Various asset-related requests

Hi Peter,

Thanks for the great pace of adding great new features to WireframeSketcher! Which, of course, also leads to requests for even more :-)

I like the "assets" directory (and to use the names of standard categories for subdirectories, to filter for instance standard "input" widgets together with my own "input" assets)

• It would be nice if I can define the "assets" directory on either per-project or global preference, to make it easier to have screen specifications live in a docs/ subdirectory in my projects.

• Currently, it doesn't seem possible to edit elements in a group of widgets: either by zooming in on a group, or by regrouping elements after ungrouping to edit a part. Will be very useful for named groups in an asset folder. (I like to way yEd does this)

• The preview (F5) is nice, but it would be nicer if I can choose to show screens top-aligned rather than centered (more natural for web pages). My work-around is to have a "screen size" asset that I include on each page, with a "fold line" at eg. 760 pixels down.

• Perhaps it's even possible to add images to an "icons" folder and make them available as icons (for instance as {my:app-action} to get it from icons/my/app-action.png)

I hope it's ok to have multiple suggestions in a single message.

Hi Rolf,

Thank you for your kind words! Please see my replies below.

It would be nice if I can define the "assets" directory on either per-project or global preference, to make it easier to have screen specifications live in a docs/ subdirectory in my projects.

This is on my todo list. As a workaround I'd suggest using folder links. Just create docs/assets directory and configure it to be linked to the assets directory. Let me know how this works for you!

Currently, it doesn't seem possible to edit elements in a group of widgets: either by zooming in on a group, or by regrouping elements after ungrouping to edit a part. Will be very useful for named groups in an asset folder. (I like to way yEd does this)

Group editing is also on my todo list. I should have done it for some time now but there are some technical difficulties that I need to solve first. I'll take a look at what yEd does.

The preview (F5) is nice, but it would be nicer if I can choose to show screens top-aligned rather than centered (more natural for web pages). My work-around is to have a "screen size" asset that I include on each page, with a "fold line" at eg. 760 pixels down.

I can see how this could work better, I have a similar request for PDFs. My only concern is the top margin. If there is no top margin then the content will be placed at the very top of the monitor. I feel that it may not be pretty. How do you see this issue?

Perhaps it's even possible to add images to an "icons" folder and make them available as icons (for instance as {my:app-action} to get it from icons/my/app-action.png)

It's an interesting idea! It's the first time I am seeing this suggestion but I think it has potential. I am noting it down.

Hi Peter,

... As a workaround I'd suggest using folder links. Just create docs/assets directory and configure it to be linked to the assets directory. Let me know how this works for you!

I've done this with a symlink for now, yes.

Group editing is also on my todo list. I should have done it for some time now but there are some technical difficulties that I need to solve first. I'll take a look at what yEd does.

The thing I like in yEd: you press Alt-PgDn to "zoom in" and only see the elements of a group, edit as you like, then press Alt-PgUp to be back in the full picture.

I really like the "named groups" as assets and for instance put all menus in a single screen file for re-use. A smoother experience to edit such a named group would be great!

My only concern is the top margin. If there is no top margin then the content will be placed at the very top of the monitor. I feel that it may not be pretty. How do you see this issue?

Perhaps it's possible to just position the top elements not at y coordinate 0 but start at eg. 25?

I find the top elements "jumping around" in preview mode more of a problem :-) (It works fine in the exported HTML, which is my workaround for now.)

I really like the "named groups" as assets and for instance put all menus in a single screen file for re-use. A smoother experience to edit such a named group would be great!

Group editing is now a high priority task on my list.

I find the top elements "jumping around" in preview mode more of a problem :-) (It works fine in the exported HTML, which is my workaround for now.)

I am hesitant to change the current behavior since there aren't many complaints about screen centering. So I guess it's must be working well. Perhaps I could add an option to the context menu: "Center Vertically" that you could uncheck.

Another idea I have is to check all screens in the storyboard and to calculate the tallest screen and center only that one. Then position other screens by top aligning them with to the tallest one. What do you think?

I am wondering whether I should treat horizontal centering the same way.

I find the top elements "jumping around" in preview mode more of a problem :-) (It works fine in the exported HTML, which is my workaround for now.)

I am hesitant to change the current behavior since there aren't many complaints about screen centering. So I guess it's must be working well. Perhaps I could add an option to the context menu: "Center Vertically" that you could uncheck.

That could work. Hopefully it's a persistent setting?

Another idea I have is to check all screens in the storyboard and to calculate the tallest screen and center only that one. Then position other screens by top aligning them with to the tallest one. What do you think?

That sounds too complicated to me. My case is to present/test web pages, and they are mostly expected to start from the top of the screen.

Also: in F5 preview mode, you can walk through all screens, not just the ones in a single storyboard.

I am wondering whether I should treat horizontal centering the same way.

I personally don't have a need for that (but I can see how it makes sense if you would take the approach to look at the tallest screen)

That could work. Hopefully it's a persistent setting?

Yes, it would basically work the same way "Highlight Links" does.

That sounds too complicated to me. My case is to present/test web pages, and they are mostly expected to start from the top of the screen.

I also now think that an automated behavior might be too complex here.

Hi Rolf,

I am working on editing inside groups and I have a usable version. I need help with beta-testing. If you have time then take a look at it here: http://wireframesketcher.com/staging

Thanks!

First impression: sweet :-) This is what I was hoping for!

A things I can find so far:

1) do add "exit group" as an option to the right-click context menu (I somehow expect it at the same place as the "enter group" option)

(I found the "exit group" button in the outline view, but haven't seen any other way to exit a group yet)

2) if I move an item from the top-left of the group "inwards", or remove it, the position of the top-left corner of the group is not updated; on the bottom-right (height and width), it works fine

create a group like this:

enter the group, delete the two checkboxes, exit:

3) once inside a group, the items don't align anymore with the other (greyed-out) elements in a screen; not a huge issue, but since I can still see them, I was hoping for that)

4) now that I do look at the Outline view, I notice the groups are not expandable to see their content elements -- perhaps something for on the wish list :-)

Hi Rolf,

Thanks a lot for taking a look at this!

1. Done! I was hoping "Escape" key is obvious but I guess it's not.
2. Fixed that!
3. It was deliberate. The way I see it, a group is an independent unit and can be edited as such. Do you really have cases where you wish "outside" alignment worked?
4. Noted! Technically it's easy and now that group editing is there I think there are no side effects to it. I'll probably add group expansion as part of this beta-test a bit later.

I uploaded a new development version. Beta-testing continues :) Thanks again for your time!

Rolf, I tried to quickly add expandable groups in Outline but now I see that there are some edge cases I didn't consider. I think I'll leave this feature for later since I don't find it important. You can try to convince me otherwise :) It would help me if you could describe in more details how you intend to use it.

Hi Peter,

1: I wouldn't have thought of Esc, no... I think yEd uses Alt-PgDn to enter a group, Alt-PgUp to exit, but without a menu item that reveals the shortcut, it's hard to guess :-)

3: I explored this a bit more: currently, it's not possible to align items in relation to elements in a group either. I want to use a screen to hold variations of an interface component, with very similar layouts, so aligning and resizing with respect to "all other elements" may be useful.

But so far, I rely on the page grid and that seems to work well too.

4: I don't have an intended use for it at this point.

I can imagine a feature to import existing web pages and reverse engineer them to wireframes with groups and subgroups, so you can quickly grab elements of an existing site from the outline, to reuse in a design.

(quick search: http://www.wirify.com already exports to Balsamiq, for a fee-per-page)

Rolf,

3: Can you confirm that snapping to other elements in the same group does not work for you? I tried it on my machine and it works as expected. Snapping to grid and guides works too. Maybe you have disabled it in preferences?

I am still not sure about snapping to outside elements. I see your point, but I guess I really like that entering a group gives you a new, independent context. This way you can focus on one group at a time. I think that it will be especially useful for stencils with many components.

4: I think your scenario is supported by enter/exit group functionality. You can enter a group to copy&paste only parts of it. And then you can always ungroup :)

Also during my tests I didn't like how Outline View looked all crowded with expandable groups. I feel that they add more complexity without much benefit in return. I'll leave this feature out for now.

3: Snapping to other elements in the same group works fine.

What I meant: if I have a group on a page, and add a new widget to that page, then I cannot align it with parts within that group.

I thought I could do that. But snapping to the grid and to "items at the same level of hierarchy" has worked well for me so far, so no need to complicate matters :-)

4: Agree.

Rolf, the new version with group editing is out!

http://wireframesketcher.com/blog/2011-08-04-group-editing-dashed-and-dotted-line-styles.html