{"id":108,"date":"2021-08-02T10:57:57","date_gmt":"2021-08-02T10:57:57","guid":{"rendered":"https:\/\/blogs.scummvm.org\/av-dx\/?p=108"},"modified":"2021-08-02T10:57:57","modified_gmt":"2021-08-02T10:57:57","slug":"implementing-grouping-in-grid-view-week-8-progress","status":"publish","type":"post","link":"https:\/\/blogs.scummvm.org\/av-dx\/2021\/08\/02\/implementing-grouping-in-grid-view-week-8-progress\/","title":{"rendered":"Implementing grouping in Grid View (Week 8 progress)"},"content":{"rendered":"\n

Task 1: Rendering “Groups<\/em>“<\/h2>\n\n\n\n

I had already acquired the technology to group elements in array form, and the grid internally uses a linear array to store the entries as well. So “forming” groups is borderline copy paste.<\/p>\n\n\n\n

So I can easily add a generic “attribute” parameter to the struct (which may well be some already known parameter like engineid or gameid, I don’t worry about data redundancy here). This is the attribute to form groups on.<\/p>\n\n\n\n

Now everything to render on the grid is arranged in the form of a list internally, so just take the grouped list and read it linearly, and convert it to a grid.<\/p>\n\n\n\n

\"\"
Mockup of how the system creates a grid out of a list<\/figcaption><\/figure>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

So the group rendering … works, but obviously headers are supposed to have different style, a different height, as seen in the mockup. But this simple problem of having items not have all the same height, requires us to come up with a new rendering algorithm for the grid.<\/p>\n\n\n\n

Task 2: Variable height grid entries<\/h2>\n\n\n\n

Having all entries have the same height simplifies the calculations significantly. Just using linear maths, we can determine given a y coordinate (and the window height), exactly what elements are to be displayed. But when we don’t know beforehand the size of these entries, how do we find out given a random scroll position (y value), which entries should be drawn?<\/p>\n\n\n\n

We additionally need to store the size and position (on the scrolling page, not where to render) of the entry not within the rendering widget, but within the list itself.<\/p>\n\n\n\n

We run binary search to figure out the first visible item on the grid. It will have y value of just less than our scroll position. Then we interpret the list as a grid.<\/p>\n\n\n\n

Then during drawWidget() function, we just a boolean to use different rendering methods to draw the different kinds of items.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Task 3: Collapsible groups, improving the look<\/h2>\n\n\n\n

The toggling of groups is still the same as it was in grouped list, we modify the internal array, and reinterpret the grid from that list.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Now that we have allowed our grid items to have different heights, we can also remove the reservation of static space of two lines under the thumbnail (notice how in the above, there is one line of empty space between “Mystery House” and the tray). This was done earlier to accommodate for longer titles, but now we can dynamically allocate space for titles, we can save on vertical space where it’s not required.<\/p>\n\n\n\n

Further improvement was made to the look of the headers, restoring the triangle for fold indicators, and giving them a background color (which I plan to make theme configurable) so that the distinction between groups is clear.<\/p>\n\n\n\n

\"\"
Improved look of the grid widget<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"

Task 1: Rendering “Groups“ I had already acquired the technology to group elements in array form, and the grid internally uses a linear array to store the entries as well. So “forming” groups is borderline copy paste. So I can easily add a generic “attribute” parameter to the struct (which may well be some already… Continue reading Implementing grouping in Grid View (Week 8 progress)<\/span><\/a><\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-108","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/posts\/108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/comments?post=108"}],"version-history":[{"count":3,"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/posts\/108\/revisions"}],"predecessor-version":[{"id":118,"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/posts\/108\/revisions\/118"}],"wp:attachment":[{"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/media?parent=108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/categories?post=108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/tags?post=108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}