AxShare Interactive Redline Plugin

#21

@mbc66, I’m glad to hear that revision helped to resolve some of the issues! I’m certainly always happy to hear praise, but I invite improvement opportunities even more. If you do have another issue, please feel free to reach out and I’ll try to resolve it. I’ll try to recreate the issues you are currently facing and see if there’s a clever workaround.

@Mike_Gray, thanks for the feedback! I haven’t heard anything from Axure. I suspect it would be a lot of work for them to integrate something like this. The way which they currently render HTML on the page is very messy. They would most likely have to rewrite the core of how they render components in HTML. This tool works well for general use, but I wouldn’t call it stable enough to release as part of their software. I’ve had to use a lot of unique logic to handle many of the strange Axure methods.

Related to your issue - I’ll certainly try to recreate it and search for a resolution. If you happen to have a quick demo you could share, that might expedite things for me as well.

#22

100% width and fixed items, is native to Axure. To specify 100% width, you need to create a dynamic panel, then go into the properties panel and check 100% wide. Fixed items, the same way, but in the properties panel > Pin to Browser. You may want to give the 100% width dynamic panel a background color so you can see it - Style panel > Back Color. You can only see 100% widths previewed in the browser.

#23

Hi Sean

No problem - demos here:

No plug-in - a dummy modal popup and trigger get hidden by the OnPageLoad script which also Fires an OnClick event on the trigger to repopulate the repeater

With plug-in - none of the above!

…and file attached. Interested to hear your feedback. MG

Redlinepluginbreaksit.rp (60.3 KB)

#24

@Mike_Gray, thanks for the files! It looks like I have a solution to your issues. I noticed a couple of issues that were coming up in your sample. I have resolved all of them - as far as I can tell. I have one other pending issue I want to resolve before issuing a new release, but I hope to have the release out by tomorrow.

#25

Great - look forward to trying it out - will feedback! MG

#26

"They would most likely have to rewrite the core of how they render components in HTML. "

Judging by the amount of time that is passing before we see an Axure 9 public beta - they may be doing exactly that? :slight_smile:

#27

Just issued a new release! This should resolve the issues you are having. I guess you are using Lightbox for your modals? It looks like it’s just setting the modal backdrop to 10,000px X 10,000px which causes some issues for the tool. Really they should be using relative measurements. Anyways, if you’d like to inspect elements on the modal the process is to disable the tool, open the modal, and then enable the tool. This is because the tool blocks clicks not related to itself while it’s enabled.

As far as what Axure is up to - who knows. I doubt they’d every officially support a tool like this because their current goal of the application is rapid prototyping. I believe they don’t want the tool’s primary purpose to be to serve as a redline / spec tool. Because of this, they’ve built in all sorts of cool functionality to help designs easily create fully-interactive mockups. As you’ve seen, it’s quite hard to inspect elements while also interacting with them. This tool certainly tries its best, but there are definitely compromises. I guess there are two factors blocking a tool like this: how Axure generates HTML (which is bad), and Axure’s general vision for their application.

I’ve linked below a demo of the screens you sent me with the updated code. Take a look and let me know if you find any other improvement opportunities!

https://qmy9fw.axshare.com/#g=1&p=redline

#28

Hey Sean,
thank you so much building and releasing your plugin to the community. I think, I made the gap between Axure and the “newer” prototyping tools like Framer, proto.io and Sketch smaller.

I am currently evaluating the plugin to see if we can use it to cut down the documentation efforts. And I found a few small things with the HTML code Axure generates…

I have a small and a larger feature wish for the plugin. And a question for you.
Here it comes:

  1. Could you add the Axure element names to the redline tool display? We are using a certain naming convention within our specs, so it’d be helpful if we could see them there as well.

  2. I noticed that Axure unfortunately breaks multi-line texts apart in individual lines. Take a look at this example. A textblock has the the following structure in Axure’s HTML: a DIV for the paragraph, a DIV for the textblock minus the padding, a P for each line to text, and a SPAN for the text itself.
    Whereas single a line of text does not have the second DIV.
    It would be great if the plugin would recognize the a multiline text and indicate it – and it would be even better if it it would calculate the padding (based on the second DIV) and add this as well. And based on the location of the second DIV you could even “guess” the vertical alignment (top, middle, bottom) of the text block.

  3. Since I cannot use AxShare at my company for hosting our internal documents it would be nice if you could add a CSS of your SCSS to the github repository? For testing I added the souces by hand.
    Currently I am looking at how provide a “portable server” for the files - it will most likely be some node.js server people can run to view it.

So, thanks again for this great plugin.
I hope my comments make sense. If not, let me know. :slight_smile:

Cheers
l.

#29

@Lennart, thanks so much for all of the information! I’ll try to answer your questions below.

  1. I believe that I should be able to add the names, but I need to do some testing to ensure its consistent. It’s a bit tricky because Axure likes to wrap a lot of elements in wrapper elements, so sometimes it’s very difficult to determine exactly from where the click came. I’ll open up a feature request over on my GitHub project for this to track my progress.

  2. I took a quick look at the markup which Axure is generating. I believe I should be able to swoop in and reformat this markup into a block, but I’ll need a little time to test and ensure that me reformatting Axure’s markup isn’t going to cause any breaking changes to projects. My solution to this so far is to just place a transparent rectangle where you want the text and then set padding on the rectangle and then write text as an attribute of the rectangle. I’m not sure if there’s a downside to this besides it being a DIV instead of P. Have you tried this approach before? Were there any issues? Either way, I agree that it makes sense for me to handle multi-line text more elegantly than Axure does.

  3. I’m not completely certain about this one. The plugin is composed of JavaScript, HTML, and CSS all injected into the AxShare-rendered components. Just adding the CSS to a static file would not be enough for the tool to function. I think I can create something for you though - I just need to know how you’re hosting internal files. In what format are the internal files? If you’re just generating HTML from within Axure, you can just paste the plugin code just like you would on AxShare. Just open up the start.html file and paste the plugin code just before the closing HEAD tag. If this isn’t clear, let me know and I could make an animated GIF of this process.

I hope I provided some information about your questions. I will definitely log these requests and work to fulfill them shortly!

#30

Hi Sean,
thanks for the quick reply. To your questions:

My solution to this so far is to just place a transparent rectangle where you want the text and then set padding on the rectangle and then write text as an attribute of the rectangle. I’m not sure if there’s a downside to this besides it being a DIV instead of P. Have you tried this approach before? Were there any issues?

No, not real issues other than that it forces me to draw quite a few extra rectangles. :slight_smile:

Just adding the CSS to a static file would not be enough for the tool to function.

Oh, sorry, I was not clear. Yes, I know that I need to add the plugin’s JS,HTML and CSS to generated source of Axure. But if try to add the JS to local files I get a “cross origin request” error. So, to be able to provide the plugin with stand-alone files I was thinking to create a simple node.js server that does the job.
What do you think?

Cheers
l.

#31

@Lennart, I’ll definitely resolve the multi-line text thing because rectangles certainly aren’t the final solution.

I’m not sure why you’re facing a CORS issue. The only linked scripts are jQuery and a jQuery theme (although I’ll be removing the theme shortly). The CDNs serving those scripts all support CORS, so there should be no issue. I develop locally and do not need to proxy those links. Just to clarify, are you copying the code from plugin.txt directly into the bottom of the HEAD of start.html which was generated? Or are you taking a different approach? Can you include a screenshot of the CORS error or let me know which resource is causing the error? Maybe you could explain a little bit about how you’re serving these files locally?

#32

Oh, I realized I am the reason for the CORS issue. I moved the “local” JS of the plugin in a separate file and tried to include that. I undid that now.

#33

Hello Sean,
Thanks for this great plugin, it’s really helpful.
Im getting some issues tho.
I have a screen where the user needs to choose some options to see the content (It’s just a Dynamic panel state change) when the state change occurs, if the plugin is active on that page it throws off some elements. I’ll attach screenshots one with the plugin inactive on that page and one with the plug activated.

Screen Shot 2018-03-09 at 6.59.00 AM.png320×971 55.3 KB

Screen Shot 2018-03-09 at 7.01.20 AM.png378×617 30.2 KB

Any ideas of what could be happening here?

#34

@robertopib, would you be able to share a source file for this? I know it’s sometimes difficult because it’s proprietary and confidential work, but perhaps you could strip it down just to the issue you’re experiencing?

@Lennart, so is the code now working for you?

#35

Hey. Yes, it is. Me bad.
I’ll still be creating a stand-alone node.js server to host the plugin for offline files.

#36

Hello–
I’ve recently started using your redline tool for my projects and I’ve got to say…thank you very much for making this available. I know it’s unclear what the next release of Axure will hold, but without this type of redline capabilities, it’s going to be very hard to convince my teams to stick with Axure rather than going with something else that supports auto-redlining.

I have one question. I know that the dimension of the artboard is based on the most extreme elements is the page. I’m using a dynamic panel as a viewport that limits the visible frame for a number of elements that scroll within the viewport. Although those elements aren’t visible, they seem to show-up as a large whitespace below the viewport (screenshot attached). Is there any way to avoid this white space?

Thanks again

#37

@afinpdx, thanks so much for the feedback! Would you be able to send me a demo file of where this is occurring? I know you probably can’t send me the source for that screenshot above, but perhaps you could mock up a simple example for me to use in testing.

#38

Hmmmm…I thought I could. I stripped out a bunch of stuff and and reduced it down to just the viewport with a single layer behind it that exceeds the boundaries of the viewport. I’m attaching it in case this helps.

But now when I insert your plugin on this reduced test file…no large white space under the viewport. So maybe what I thought was the problem wasn’t the problem?

Thanks for your help,

-adam

redline_test_03.rp (164.2 KB)

#39

Would you be able to share the AxShare link with me? I might be able to figure it out just from how the online file is behaving. Sorry about the slow replies - just finishing up a big project at work.

#40

No worries at all. I appreciate the help.
https://k3yn2i.axshare.com