ubuntu-touch-coreapps team mailing list archive

[Svenn-Arne Dragly <s@xxxxxxxxxx>]

Hi Joey!

The algorithm is tailored to meet the needs of the Shorts-design, so it 
is not based on something I know from before. It follows these steps 
for each item:

- Select randomly the alignment configuration (text upper left, bottom 
right, etc.)
- Select from a sequence the size of the element. This could be random, 
but having a sequence gave better results and still looks organic.
- Place each item as close as possible in y-direction to the previous 
item (plus a random margin).
- When the y-position + height of the element exceeds the height of the 
view, a new "column" is started instead. (Column is a really bad word 
to use here because of the organic layout, but let's just stick with it 
for the implementation details).
- The x-position is at first set to the maximum x-value of the elements 
in the previous column.
- This will of course cause the new item and some items in the previous 
column to collide, so the new item is then moved as far right as is 
needed to avoid any collisions.
- The item is now in its final position.

I'll comment the source code more thoroughly if we decide to use this 
algorithm.

In addition to the steps above, a random margin is always added in x- 
and y-directions from the previous elements to make some space.

You're right that there is no memory management in the algorithm. This 
is on purpose because I did not want to start messing around with that 
before the design is considered final.

Memory management could probably be done by getting the position (x) of 
the flickable and hide/delete elements that are too far away to be 
seen. The algorithm should also be capable of handling new objects on 
the run, but I think it is best to do it iteratively to avoid laggy 
scrolling. In other words, scroll for some time, load a bunch of items, 
and scroll some more. This of course depends on what looks best on a 
device, which again will depend on plenty of testing.

In the meantime, I would suggest limiting our view to a few hundred 
items if that's possible.


Best regards,
Svenn-Arne


On Mon 15 Jul 2013 04:25:19 PM CEST, Joey Chan wrote:
> Hi Svenn,
>
> Could u describe what algorithm u r using in your demo? And seems no
> memory management in your algorithm.
>
> br,
> Joey
>
>
> 2013/7/14 Svenn-Arne Dragly <s@xxxxxxxxxx <mailto:s@xxxxxxxxxx>>
>
>     Hi,
>
>     Just wanted to let you know that I have uploaded a new branch with an
>     implementation of the Shorts design using a Flickable and freely
>     distributed items (as opposed to using ListView + Columns). It is
>     currently just a demo showing what a completely random/organic layout
>     could look like and contains no real data or functionality. The branch
>     is located here:
>
>     https://code.launchpad.net/~dragly/ubuntu-rssreader-app/shorts-grid-demo
>
>     After branching, you may run it with the command:
>     qmlscene ubuntu-rssreader-app.qml
>
>     I uploaded it so that you may give feedback on the look and feel
>     of it,
>     whether I have missed something and if this is the right direction to
>     move. I think it looks okay, but perhaps its a bit untidy? What do you
>     guys think?
>
>
>     Best regards,
>     Svenn-Arne
>
>