AxShare Interactive Redline Plugin


#41

Thanks for the link! This will certainly help. One more request - could you also include a copy of the page without the redline tool code present?


#42

Done. Iā€™ve added a duplicate page without the redline tool.
Thanks again.


#43

Hi @srm985,
FYI, I added a few issues to the toolā€™s github page.
Nothing major, I noticed that hotspots are not shown, that annotations are not clickable and the ā€œInteraction Stylesā€ are not shown. Plus, I suggest to reposition the activate toggle switch.

Cheers
l.


#44

@afinpdx, thanks for that! Iā€™ll take a look just as soon as I can.

@Lennart, thanks for logging those issues like that! I will review them. Super helpful to have them there. I would definitely encourage anyone comfortable with GitHub to log issues there, but Iā€™ll be happy to address them here as well.


#45

@Lennart, Iā€™m trying to replicate the issue you logged, but I am unable. Could you check my notes and provide some insight?

@afinpdx, I havenā€™t forgotten about your issue. I took a preliminary look but wasnā€™t able to easily determine the cause. I might have to try and recreate it in a source file myself.

For everyone else, this next release should have some big changes that are aimed at making this tool even better and your lives even easier.


#46

Thanks @srm985 for keeping my issue in the mix. Still wondering if there is a fix.


#47

@afinpdx, I finally was able to start poking around with your issue. I found the culprit but I think Iā€™ll need your help in determining why itā€™s causing an issue. If youā€™re comfortable looking at the markup on the page, the CSS ID of the culprit is u12787. This u12787 is a hidden div under AST Administration / KPI Settings. This hidden div has a height of 1028px and a width of 1295px, making it the largest element on the page. I donā€™t know what this element is or why itā€™s there. Perhaps you could take a look in your Axure files to see if you can find anything? Currently, the way the tool functions is that even hidden elements influence the height and width of the artboard because they could become visible at a later point. If this element is something created by Axure based on something youā€™re using, then we can figure out a way to ignore it. Or perhaps itā€™s just a remnant of something you didnā€™t mean to leave on the page.


#48

Greetings all!

I just released V2.0.2 which has some exciting updates aimed to make your lives and the lives of your developers even easier. Take a look at the latest version here: https://4ciu30.axshare.com/#g=1&p=master-test

One of the exciting features is no more copying code into your projects. Just copy this small snippet into the tool and you will always be up to date with any changes I make:

<script src="https://cdn.jsdelivr.net/npm/axure-redline-tool@latest/web/axure-redline-plugin.js"></script>

Some other features:

  • Axure Component Names - The tool will now display any element names youā€™ve used in your project.
  • Annotations Always Clickable - Annotations are always available to click, even when the tool is enabled.
  • Move Redline Switch - The redline tool enable switch has been moved to the top header for better visibility.
  • Show Pseudo Class Attributes - The tool now provides CSS for those pseudo classes provided by Axure.
  • CDN Link - The tool can now be served from a CDN link which means faster load times and no more copying of huge blocks of code.
  • Hotkey Interactions - Now it is no longer required to disable the tool to interact with Axure elements. By holding down [Ctrl] (Windows) or [āŒ˜] (Mac) you can hover over or click on elements.
  • Business / Developer Links - The tool now offers up sharing links for both business and developers. The business link will prevent the tool from even rendering itself on the page. This ensure there is no confusion when sharing your prototypes with business.
  • Loading Spinner - On large pages the tool can take quite long to render the artboard. A loading spinner helps to indicate background action.
  • Color Swatches - Updated code to handle color swatches for any CSS attribute containing a color.
  • Parent Opacity - When adjusting opacity for the entire element in Axure, it is only applied to the parent. The tool now can accurately extract this information.

Iā€™ve also changed how the tool interacts with the Axure project so please let me know if you experience any errors. The aim of making this change was to allow you to interact with the prototype with the tool enabled. As usual, the project documentation can be found here: https://github.com/srm985/axure-redline-tool


#49

Hi @srm985. Sorry it took me a bit to get back to you. Using your suggestion that the culprit(s) were somewhere in ā€˜AST Administration / KPI Settingsā€™ I tracked it down to 2 box widgets. By changing the height on those I was able to make the whitespace shrink and ultimately disappear in the redline view. There is no clear reason that I could see as to why these 2 boxes were a problemā€¦but by reducing their height it worked. Thanks! Iā€™ve uploaded the repaired version to https://k3yn2i.axshare.com.

Much thanks again. Looking forward to checking out the new release.


#50

Hey @srm985,
thank you for your efforts and many thumbs for the significant update and bug fix release!
I really appreciate that you take the time to build and update this constantly.

Cheers,
l.


#51

Just got the notice about the upcoming release of Axure 9. I went to look at the new feature list in hopes that some version of a redlining tool would be mentioned. Nope. Such a disappointment.


#52

Brilliant! This is one thing Axure was lacking, forcing people to use Sketch/measure or even better Sketch/Zeplin. One thing would be nice to have - CSS parameters copy/paste. pretty much like Zeplin is doing. Itā€™s a time saver.


#53

@afinpdx, that is pretty disappointing. If Axure would like to do something with me, Iā€™d be open. As far as Axure 9 goes, looks like theyā€™ll be releasing a beta version soon. Iā€™ll try to get in on that as soon as possible so that I can start testing to see what has changed.

@nightern, thanks for the feedback! Iā€™m not sure why I never implemented the CSS properties box. I thought there was a reason, but I canā€™t come up with it. Iā€™ll log that and try to get to it by this weekend. If youā€™re using the:
<script src="https://cdn.jsdelivr.net/npm/axure-redline-tool@latest/web/axure-redline-plugin.js"></script>
then youā€™ll see the new updates as soon as I release them. Iā€™ll keep you posted here as well. You can also track the issue here: https://github.com/srm985/axure-redline-tool/issues/48


#54

@nightern, I just pushed an update last night to provide the CSS properties block. Let me know if itā€™s what you were looking for or if there are any improvement opportunities.


#57

Hello,

Not sure if this is possible, but was hoping that instead of displaying the notes on the redline page, that it would instead be part of the information captured in the redline tool panel. Specifically looking for the notes to display in the redline tool panel. So for this example,

Title: Annotation
Note: Testing annotation here

Title: ALT
Note: Testing alt test here

Title: Accessibility
Note: 508 guidelines here

So those would be under the ā€œContentā€ block and the note icon would not display, but instead be part of the redline tool panel. Hope that makes sense!

Also if the business version would not display without the note when it loads, and requires turning on the notes from the note panel of axureā€¦ that would be a bonus. :slight_smile:


#58

@koralissa, thanks for the feedback on the annotations. I definitely agree that I need to come up with a more elegant solution of displaying notes. Iā€™ll spend some time working through some concepts.

For your second note on the business version, that is a good plan. I will investigate and ensure itā€™s feasible. A GitHub issue has been created to track this.


#59

If you need me to share anything with you let me knowā€¦ i just canā€™t post it here, proprietary, confidential, and all that. The idea here is that our development partners would be able to view the panel to get all the information they neededā€¦ and because we deal with federal government, the 508 information has to be included for those items that need to be read by a screenreader.

The annotations would be great as well to help fill in any gaps that may need to be communicated, so that they can see it all within the context of the redline tool.


#60

I just pushed a new version of the tool. It now disables annotations when sharing the business link. They may be re-enabled through the AxShare interface like normal. This was what you were asking for, correct? If youā€™re serving the tool from the CDN, it will typically take up to 24 hours for the caches to be flushed. Otherwise, if youā€™re directly copying the code, then you can try it out immediately. The demo page will also take some time to reflect the changes.


#61

Hi,

That was the first part, sorry I should have been specific. The second piece is to have the notes that are displaying within the axure interface and onClick of the note icon to display within the redline tool panel, under the ā€œcontentā€ blockā€¦ so everything you would have seen in the note, moves to the black panel of the redline tool. I attached a rough drawing of it.

And the end result is

Hope that makes sense.

Just to help, the notes were entered here in axureā€¦ with custom fields


#62

@koralissa, thanks for the feedback! Yep, I understand exactly what youā€™re asking. I need some time to review the possibilities here. Iā€™d like to try to avoid adding additional content to the sidebar if I can avoid it. I need to spend some time considering the possibilities.

For all others, I made the call to disable annotations by default now on the business URL. They can still be enabled in the AxShare sidebar. Iā€™m wondering how does business use AxShare? Do they typically read the annotations? Do you typically use annotations at all? If there is a strong opposition to my changes, I will be happy to consider another path.