Priority work [_] 12% Preview II [_] 0% sorted images in ribbons | and correct positioning on promote/demote | | input: | [01][02][03][04][05][06][07][08][09][10][11] ... [19][20] | | single ribbon, nothing special here. | | | general sort: | [05] [10][11][12] [15] [19][20] | [01] [04] [06][07][08] [13][14] [18] | [02][03] [09] [16][17] | | each strip is positioned above or below the place it was | shifted from. | if there is not enough space use weights to balance the | thing. | | | selected [08]: | [05] [10][11][12] [15] [19][20] | [01] [04] [06][07][[08]] [13][14] [18] | [02][03] [09] [16][17] | | above and below images are centered around the current | image as axis, the rule is that the strips left are coming | from the left of the axis and likewise for the right side. | [X] stage I: position the promoted/demoted image correctly [_] 0% stage II: scroll ribbons correctly | this is simple: | - center the right edge of image returned | by getImageBefore in all ribbons other than current... | - center current-image in current ribbon | - vertically center the current ribbon (negative margin?) [X] prototype and basic API [_] migrate main code to the new system [_] 0% correct zooming and modes [_] zooming in ribbon view [_] zoom presets for ribbon view [_] all [_] all in group [_] five [_] three [_] one (with zooming) [_] single image mode with zooming | ribbons are hidden [_] grid mode (mid priority) [_] calendar mode (low priority) [_] 0% fix layout and animations [_] zooming [_] navigation [_] actions [_] 0% misc [_] add sort/re-sort capability... [_] make scrolling of other ribbons proportional to the gap... [_] 0% Preview III [_] 0% native client [_] windows [_] android [_] MacOS (low priority) [_] iOS (low priority) [_] 0% Pre-Alpha [_] 0% finalize UI logic [_] unsorted images Goals: main ribbon always consistent fast sorting via several simple passes binary | items are split into two ribbons. | | this can be done either by mandatorily shifting either up or | down or by restricting shifting to just one direction. | | this is a bit too restrictive. | | essentially this is a combination in the ternary approach | below as we can still shift images between levels. ternary | current ribbon and items are either sifted up, shifted down | relative to it or left on, unshifted. | | main ribbon consistency is not always obvious, especially on | partially sorted sets. e.g. while sorting part of the set where | should the unsorted part be? | | sorted section | +-------------------+ | | oooooooooooooooooooooooooooooooo | - oooooooooooooooooooooooooooo | > oooooooooooooooooooooxxxxxxxxxxxxxxxxxxxxxxxxxxx... < | + oooooooooooooooo | oooo | | +----------------------------+ | which level should this go to? | | in the illustration, the ribbon marked by ">" and "<" is where | the sorting started. | | there is also a question of how do we define the border between | sorted and unsorted zones and when? | ...after the sort is done, and when is that? | | possible ways to go around this: | before sorting select the working batch | - adds an extra step | - restricts later sorting | restrict promotion over the main ribbon | + sorting can be refined later in the same mode | - prevents the user to select the better images on first pass | split the sorted and unsorted batches and never mix them | - restricts later sorting | main ribbon always shows all the better images (from better levels) | o needs a way to move whole topologies up/down relative | to the main ribbon... | one way to do this is select and shift multiple images | will shift the whole pyramid (with all the "worse" images in between) | - introduces modes: sorting / viewing | - adds a separate stage -- move the topology to a correct | main ribbon position | | Q: is this system applicable to sorting search results? | A: likely yes, but the farther one gets from the main ribbon | the more the difference can get between adjacent images. images are always sortable all levels always browsable make all the steps except the actual sorting implicit | i.e. no jumping through hoops for the human... basic structure [X] ribbons [X] images [_] indicators | show where the images came from... [_] % basic control elements [_] 77% touch zones / buttons [X] next DONE [X] prev DONE [X] shift up DONE [X] shift down DONE [X] promote DONE [X] demote DONE [_] zoom in ~ need real zooming... [_] zoom out ~ need real zooming... [X] toggle single image DONE [_] 11% features [_] 45% views [_] 40% ribbon-based view [_] show all | might be good to not show any images here at all, just replace them with their average color [X] show map [X] fit to ribbon [_] fit to image (square) [_] ribbon with promoted/demoted images | show semi-transparent images that were demoted/promoted from current ribbon [_] 50% single image view [_] image fit to screen [X] image fit to square | show parts of upper and lower ribbons [_] image zooming | fast zooming to stages: | fit | 100% | 200% | ... [_] basic editing and manipulation | image unchanged, data saved to json... [_] crop [_] rotate [_] 20% General ToDo [_] 0% image sorting [_] will affect: [_] promote [_] demote [_] shift up [_] shift down [_] ribbon merging [_] add promote/demote events (to attach structure editors)... | enable extension and use as a generic widget... [X] add real images... [_] make all the code relative to the current selection (multiple instances on a page support) [_] add ribbon relative scrolling... | each ribbon is positioned relative to the current selected image | below-left: closest image to the left of the current | bolow-right: same as above but right... | | this will demote/promote the image directly up or down... [_] make this into a jquery plugin... [_] add dynamic loading and unloading for very large sets... [X] gesture support... [_] add basic actions: [_] rotate left [_] rotate right [_] crop ... [_] add info: [_] number of images in ribbon [_] position in ribbon [X] 100% refactoring: [X] merge almost identical functions... [_] % ISSUES and BUGS: [_] jumping on focus up/down... [_] demoting a first element (a ribbon is created) positions the field incorrectly (see demoteImage() for details)... . | vim:set spell :