Expandable/collapsable loop tags bar #920

Closed
oceanhahn opened this Issue Dec 30, 2015 · 28 comments

Comments

Projects
None yet
6 participants
@oceanhahn

I have a sprite with a few overlapping tags in the animation/layers pane, but if two loop tags begin on the same frame (or even on a nearby frame), the tags can overlap, making the occluded one inaccessible without (as far as I know) deleting the superposed loop. Which I don't want to do.

If we could have some way of either selecting a loop from, maybe a context menu of overlapping ones (generated on-the-spot when multiple tag labels overlap) or have the space loop labels appear in grow and shrink automatically when tags would overlap (example below), that would be dandy!

I made this mock-up of what I was thinking, if it's of any help:
aseprite tabs

The upper section is the existing form; the lower part is the same data presented in a format I'd imagined based on the interface as it is now. There's also a new button there, that collapses the tags area into a single row (as it currently exists). Perhaps when labels overlap, only the first letter is shown, and the label is offset according to length (with the labels for longer loops occurring last, so that they're above at least some of their frames)?
It might also be convenient if the loop selection brackets were coloured after the loop labels!

Thanks for considering it!

@dacap

This comment has been minimized.

Show comment
Hide comment
@dacap

dacap Dec 30, 2015

Member

Related to #768

Member

dacap commented Dec 30, 2015

Related to #768

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Dec 30, 2015

@oceanhahn i'm not sure about collapsing the tag area - tags/animations are of the same importance as layers. they are the third dimension, after layers and frames.
maybe if the tag area grows too big let the user collapse it into a selector (a dropdown list?). i need to reflect on this some more.

ghost commented Dec 30, 2015

@oceanhahn i'm not sure about collapsing the tag area - tags/animations are of the same importance as layers. they are the third dimension, after layers and frames.
maybe if the tag area grows too big let the user collapse it into a selector (a dropdown list?). i need to reflect on this some more.

@oceanhahn

This comment has been minimized.

Show comment
Hide comment
@oceanhahn

oceanhahn Dec 31, 2015

The basic purpose I'd thought for collapsing the tag/loop area is so that, if the total height of the tags became too deep (that is, it imposed too greatly upon the graphic editor space), the user could press a button to roll them up (and, later, press it again to restore them). Basically, it just hustles them out of the way when they aren't needed and brings them back with a single click, in much the same way that [Tab] hides and reveals the entire pane.

I'm not super-sure how useful it might be considering that, to be meaningfully cumbersome, there would probably have be be at least three stacked sets of layers (fewer, I suppose, if ASEprite is running in a smallish window or on a small or low-res screen), but it might be nice to be able to switch between a full profile of loop labels and a compressed one during viewing.

I do agree that the tags are important; my reasoning is just that the more simple and uncomplicated options a user has for viewing their data, the more robust the UI environment becomes. :D

In any case, the "Collapse" button doesn't hide the loop labels and leave them hidden; there'd be a corresponding "Reveal" button that expands the pane back to the larger size.

I look forward to hearing more about what you think!

The basic purpose I'd thought for collapsing the tag/loop area is so that, if the total height of the tags became too deep (that is, it imposed too greatly upon the graphic editor space), the user could press a button to roll them up (and, later, press it again to restore them). Basically, it just hustles them out of the way when they aren't needed and brings them back with a single click, in much the same way that [Tab] hides and reveals the entire pane.

I'm not super-sure how useful it might be considering that, to be meaningfully cumbersome, there would probably have be be at least three stacked sets of layers (fewer, I suppose, if ASEprite is running in a smallish window or on a small or low-res screen), but it might be nice to be able to switch between a full profile of loop labels and a compressed one during viewing.

I do agree that the tags are important; my reasoning is just that the more simple and uncomplicated options a user has for viewing their data, the more robust the UI environment becomes. :D

In any case, the "Collapse" button doesn't hide the loop labels and leave them hidden; there'd be a corresponding "Reveal" button that expands the pane back to the larger size.

I look forward to hearing more about what you think!

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Dec 31, 2015

that's an interesting idea about [Tab]. +[Tab] could be used to toggle the state of the tag area.

when overlapping tags are collapsed into a single row they look really messy when not colorcoded. what makes it worse is that you can't click on an overlapped tag to bring it to the foreground.
maybe when two overlapping tags start on the same frame, when you click on the foreground one the tag area is temporarily expanded to let you select the right tag. also such tags that cover other tags could be marked somehow e.g. the shadowed tags could stick out from behind them by a couple of pixels.

ghost commented Dec 31, 2015

that's an interesting idea about [Tab]. +[Tab] could be used to toggle the state of the tag area.

when overlapping tags are collapsed into a single row they look really messy when not colorcoded. what makes it worse is that you can't click on an overlapped tag to bring it to the foreground.
maybe when two overlapping tags start on the same frame, when you click on the foreground one the tag area is temporarily expanded to let you select the right tag. also such tags that cover other tags could be marked somehow e.g. the shadowed tags could stick out from behind them by a couple of pixels.

@oceanhahn

This comment has been minimized.

Show comment
Hide comment
@oceanhahn

oceanhahn Dec 31, 2015

Mm. That was my issue to begin with (or rather, what prompted me to create this particular issue thread), actually. I had noted the pulldown menu, but the shadow is a really good addition. :D

It would be nice to have the context menu version when the labels area is collapsed but still be able to expand it to see everything at once, but that could represent a lot of extra work for something that may not come up that often...

Mm. That was my issue to begin with (or rather, what prompted me to create this particular issue thread), actually. I had noted the pulldown menu, but the shadow is a really good addition. :D

It would be nice to have the context menu version when the labels area is collapsed but still be able to expand it to see everything at once, but that could represent a lot of extra work for something that may not come up that often...

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Dec 31, 2015

this is how tags could work wrt clicking (disregarding overlapping issues):

  • when you left-click a tag it is marked as current. this is roughly equivalent to selecting its frames and pressing . if you left-click it again the mark is removed.
  • when you right-click a tag a dialog with its properties is brought up.

when a tag is selected as current you can delete it with .

ghost commented Dec 31, 2015

this is how tags could work wrt clicking (disregarding overlapping issues):

  • when you left-click a tag it is marked as current. this is roughly equivalent to selecting its frames and pressing . if you left-click it again the mark is removed.
  • when you right-click a tag a dialog with its properties is brought up.

when a tag is selected as current you can delete it with .

@dacap dacap added this to the v1.2 milestone Mar 23, 2016

@dacap

This comment has been minimized.

Show comment
Hide comment
@dacap

dacap May 30, 2016

Member

I was thinking about this issue, and I came with this possible solution:

  • Moving the mouse over the tags they should expand and you can click one tag from the list to make it active/current
  • Right-clicking a tag should popup a menu with options like Properties / Remove / etc

new-tags

Member

dacap commented May 30, 2016

I was thinking about this issue, and I came with this possible solution:

  • Moving the mouse over the tags they should expand and you can click one tag from the list to make it active/current
  • Right-clicking a tag should popup a menu with options like Properties / Remove / etc

new-tags

@SolarLune

This comment has been minimized.

Show comment
Hide comment
@SolarLune

SolarLune Oct 26, 2016

Also interested in this.

@dacap Your solution looks pretty simple! I might recommend making the shadowed tag have brackets pointing to the frame like the foreground one, just darkened according to the color of the tag.

Otherwise, it seems fine to me!

Also interested in this.

@dacap Your solution looks pretty simple! I might recommend making the shadowed tag have brackets pointing to the frame like the foreground one, just darkened according to the color of the tag.

Otherwise, it seems fine to me!

@oceanhahn

This comment has been minimized.

Show comment
Hide comment
@oceanhahn

oceanhahn Oct 26, 2016

@dacap I really like that idea, too. :D

@dacap I really like that idea, too. :D

@Tranberry

This comment has been minimized.

Show comment
Hide comment
@Tranberry

Tranberry Oct 27, 2016

what is the UX benefit from having the a animated upward?

what is the UX benefit from having the a animated upward?

@dacap

This comment has been minimized.

Show comment
Hide comment
@dacap

dacap Oct 27, 2016

Member

@Tranberry yesterday I was seeing the animation again and thought "this should not work in this way": the tag that is being focused by the mouse should stay in the same place, and a popup with the other tags should appear above. I'll create another mockup soon.

Member

dacap commented Oct 27, 2016

@Tranberry yesterday I was seeing the animation again and thought "this should not work in this way": the tag that is being focused by the mouse should stay in the same place, and a popup with the other tags should appear above. I'll create another mockup soon.

@oceanhahn

This comment has been minimized.

Show comment
Hide comment
@oceanhahn

oceanhahn Oct 27, 2016

I'm with @SolarLune on having the other tags' range brackets visible, but shaded.

I'm with @SolarLune on having the other tags' range brackets visible, but shaded.

@2dchaos

This comment has been minimized.

Show comment
Hide comment
@2dchaos

2dchaos Mar 23, 2017

I like @oceanhahn original idea, I like having all my tags visible at the same time. There are tags that I use to mark down some animation loop(for example "Idle", "Run") and others that I use to mark down important keyframes on my animation ("Contact", "Passing"), so an option to not loop some tagged animations would be nice.
Also, adding shortcuts to switch between the previows and next tags in a level would be nice.

2dchaos commented Mar 23, 2017

I like @oceanhahn original idea, I like having all my tags visible at the same time. There are tags that I use to mark down some animation loop(for example "Idle", "Run") and others that I use to mark down important keyframes on my animation ("Contact", "Passing"), so an option to not loop some tagged animations would be nice.
Also, adding shortcuts to switch between the previows and next tags in a level would be nice.

@dacap dacap self-assigned this Mar 26, 2017

@dacap

This comment has been minimized.

Show comment
Hide comment
@dacap

dacap Mar 27, 2017

Member

I'm working on this issue, here some screenshots:

screen shot 2017-03-26 at 9 46 41 pm

screen shot 2017-03-26 at 9 46 46 pm

I think the @oceanhahn idea about collapse/expand the view might be useful (e.g. to hide all overlapped text labels)

Member

dacap commented Mar 27, 2017

I'm working on this issue, here some screenshots:

screen shot 2017-03-26 at 9 46 41 pm

screen shot 2017-03-26 at 9 46 46 pm

I think the @oceanhahn idea about collapse/expand the view might be useful (e.g. to hide all overlapped text labels)

@oceanhahn

This comment has been minimized.

Show comment
Hide comment
@oceanhahn

oceanhahn Mar 27, 2017

@dacap Really liking what I'm seeing so far! :D
As a suggestion, though, maybe it would be worth considering colouring the tag brackets, too? It would make the beginnings of one tag and the ends of others a bit easier to distinguish, from oneanother, I think.
I tried doing something like that in my mockup at the top of this issue but I'm not sure how hard that would be to actually create software for..

oceanhahn commented Mar 27, 2017

@dacap Really liking what I'm seeing so far! :D
As a suggestion, though, maybe it would be worth considering colouring the tag brackets, too? It would make the beginnings of one tag and the ends of others a bit easier to distinguish, from oneanother, I think.
I tried doing something like that in my mockup at the top of this issue but I'm not sure how hard that would be to actually create software for..

@dacap

This comment has been minimized.

Show comment
Hide comment
@dacap

dacap Mar 27, 2017

Member

@oceanhahn yeah, I'm trying to color the brackets too (some difficulties here)

Member

dacap commented Mar 27, 2017

@oceanhahn yeah, I'm trying to color the brackets too (some difficulties here)

@oceanhahn

This comment has been minimized.

Show comment
Hide comment
@oceanhahn

oceanhahn Mar 27, 2017

@dacap Out of curiosity, how are you thinking of going about recolouring the lines? Palette swap?

@dacap Out of curiosity, how are you thinking of going about recolouring the lines? Palette swap?

@dacap

This comment has been minimized.

Show comment
Hide comment
@dacap

dacap Mar 27, 2017

Member

@oceanhahn I can use the she::Surface::drawColoredRgbaSurface function to draw a "theme/skin part" with a specific color (black is converted to the color, and alpha channel is kept), the UI uses RGBA (not indexed color). There are two implementations of drawColoredRgbaSurface:

Member

dacap commented Mar 27, 2017

@oceanhahn I can use the she::Surface::drawColoredRgbaSurface function to draw a "theme/skin part" with a specific color (black is converted to the color, and alpha channel is kept), the UI uses RGBA (not indexed color). There are two implementations of drawColoredRgbaSurface:

@dacap

This comment has been minimized.

Show comment
Hide comment
@dacap

dacap Mar 27, 2017

Member

screen shot 2017-03-27 at 11 36 01 am

Member

dacap commented Mar 27, 2017

screen shot 2017-03-27 at 11 36 01 am

@oceanhahn

This comment has been minimized.

Show comment
Hide comment
@oceanhahn

oceanhahn Mar 27, 2017

@dacap Very cool; I'm absolutely looking forward to seeing this in action! Thanks for sharing the specifics, too! :D

@dacap Very cool; I'm absolutely looking forward to seeing this in action! Thanks for sharing the specifics, too! :D

@SolarLune

This comment has been minimized.

Show comment
Hide comment
@SolarLune

SolarLune Mar 27, 2017

Whoa, cool, that's way better already.

Whoa, cool, that's way better already.

dacap added a commit that referenced this issue Mar 27, 2017

@oceanhahn

This comment has been minimized.

Show comment
Hide comment
@oceanhahn

oceanhahn Mar 27, 2017

I still think the popup-tags idea is a good one too, perhaps when the tags are in a collapsed state. I'm not sure how it would work for tags that overlap but have offset starting and ending frames, but I'm still excited to see how it'll all come together.

Thanks for investing so much effort in this! :D

I still think the popup-tags idea is a good one too, perhaps when the tags are in a collapsed state. I'm not sure how it would work for tags that overlap but have offset starting and ending frames, but I'm still excited to see how it'll all come together.

Thanks for investing so much effort in this! :D

@dacap dacap closed this in f4c6c92 Mar 30, 2017

dacap added a commit that referenced this issue Mar 30, 2017

@oceanhahn

This comment has been minimized.

Show comment
Hide comment
@oceanhahn

oceanhahn Mar 30, 2017

Oh man, is it going to be in 1.1.14? 😀

Oh man, is it going to be in 1.1.14? 😀

dacap added a commit that referenced this issue Mar 30, 2017

dacap added a commit that referenced this issue Mar 30, 2017

Show all frame tags again in some special cases
When we add/remove frame tags or change the active document we have to show all tags again. Related to #920
@dacap

This comment has been minimized.

Show comment
Hide comment
@dacap

dacap Mar 30, 2017

Member

@oceanhahn there will not be v1.1.x versions because the code was too different to the beta version 😞 the next version will be v1.2-beta8 (available through Humble Bundle, Gumroad and itch.io too)

Member

dacap commented Mar 30, 2017

@oceanhahn there will not be v1.1.x versions because the code was too different to the beta version 😞 the next version will be v1.2-beta8 (available through Humble Bundle, Gumroad and itch.io too)

@oceanhahn

This comment has been minimized.

Show comment
Hide comment
@oceanhahn

oceanhahn Mar 30, 2017

Aa, I see, so the next updates in the stable branch won't be until v1.2?

Aa, I see, so the next updates in the stable branch won't be until v1.2?

@dacap

This comment has been minimized.

Show comment
Hide comment
@dacap

dacap Mar 30, 2017

Member

I think so, anyway after v1.2-beta8 I'd like to fix as many bugs as possible to make v1.2 stable ASAP.

Member

dacap commented Mar 30, 2017

I think so, anyway after v1.2-beta8 I'd like to fix as many bugs as possible to make v1.2 stable ASAP.

@oceanhahn

This comment has been minimized.

Show comment
Hide comment
@oceanhahn

oceanhahn Mar 30, 2017

Cool-- really looking forward to it! :D

Cool-- really looking forward to it! :D

@dacap dacap changed the title from Feature request: Expandable/collapsable loop tags bar. to Expandable/collapsable loop tags bar Aug 11, 2017

@fluffbirb

This comment has been minimized.

Show comment
Hide comment
@fluffbirb

fluffbirb Sep 16, 2017

v1.2-beta12
I've been using nested tags a lot! Labelling individual frames, loops, and current WIP section. But it seems like every time I erase or draw (perhaps other actions too), it uncollapses all the tags.

image
https://imgur.com/a/2FiMr
So if I am drawing frames in the WIP tag, then tabbing through my frames with <> so that I don't flip out of the tag, every time I make a mark, all the tags uncollapse, and when I tab frames to D or R, I can't keep flipping, because I'm restricted to the tag D, which is only one frame.
So I find myself constantly in a loop of

  • collapse to WIP tag
  • flip frames to figure out movement
  • draw new frame
  • tags uncollapse
  • start flipping to see if new drawing works
  • getting stuck inside a tag other than WIP
  • repeat

v1.2-beta12
I've been using nested tags a lot! Labelling individual frames, loops, and current WIP section. But it seems like every time I erase or draw (perhaps other actions too), it uncollapses all the tags.

image
https://imgur.com/a/2FiMr
So if I am drawing frames in the WIP tag, then tabbing through my frames with <> so that I don't flip out of the tag, every time I make a mark, all the tags uncollapse, and when I tab frames to D or R, I can't keep flipping, because I'm restricted to the tag D, which is only one frame.
So I find myself constantly in a loop of

  • collapse to WIP tag
  • flip frames to figure out movement
  • draw new frame
  • tags uncollapse
  • start flipping to see if new drawing works
  • getting stuck inside a tag other than WIP
  • repeat
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment