{"id":47,"date":"2021-06-27T15:26:44","date_gmt":"2021-06-27T15:26:44","guid":{"rendered":"https:\/\/blogs.scummvm.org\/av-dx\/?p=47"},"modified":"2021-06-27T15:28:27","modified_gmt":"2021-06-27T15:28:27","slug":"adjusting-the-layout-for-more-screens-week-3-progress","status":"publish","type":"post","link":"https:\/\/blogs.scummvm.org\/av-dx\/2021\/06\/27\/adjusting-the-layout-for-more-screens-week-3-progress\/","title":{"rendered":"Adjusting the layout for more screens (Week 3 Progress)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Task 1 : Hi, HiDPI.<\/h2>\n\n\n\n<p>One part that had been neglected up till this point has been the look of GUI on different displays, especially high density displays (HiDPI), on which the GUI is scaled 2x. I could not test this earlier because I don&#8217;t have a HiDPI display for my computer, but sev pointed out a switch in the code which I could hardcode to force 2x scaling.<\/p>\n\n\n\n<p>Trying to make the window smaller revealed several flaws.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1021\" height=\"734\" src=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-17-36-49.png\" alt=\"\" class=\"wp-image-48\" srcset=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-17-36-49.png 1021w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-17-36-49-300x216.png 300w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-17-36-49-768x552.png 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/><\/figure>\n\n\n\n<p>It seems that the theme file needed several adjustments before the interface looked acceptable even on non-HiDPI displays.<\/p>\n\n\n\n<figure class=\"wp-block-gallery alignfull columns-3 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"691\" src=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-22-34-1024x691.png\" alt=\"\" data-id=\"49\" class=\"wp-image-49\" srcset=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-22-34-1024x691.png 1024w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-22-34-300x202.png 300w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-22-34-768x518.png 768w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-22-34.png 1030w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"589\" height=\"400\" src=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-22-41.png\" alt=\"\" data-id=\"50\" data-link=\"https:\/\/blogs.scummvm.org\/av-dx\/?attachment_id=50\" class=\"wp-image-50\" srcset=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-22-41.png 589w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-22-41-300x204.png 300w\" sizes=\"auto, (max-width: 589px) 100vw, 589px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"730\" src=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-23-42-1024x730.png\" alt=\"\" data-id=\"51\" data-full-url=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-23-42.png\" data-link=\"https:\/\/blogs.scummvm.org\/av-dx\/?attachment_id=51\" class=\"wp-image-51\" srcset=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-23-42-1024x730.png 1024w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-23-42-300x214.png 300w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-23-42-768x547.png 768w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-23-42.png 1211w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><\/ul><figcaption class=\"blocks-gallery-caption\">Left : Regular display | Center : Lowres, HiDPI | Right : High-res, HiDPI<\/figcaption><\/figure>\n\n\n\n<p>Start Game and Edit Game buttons were removed in favour of the tray icons. These were also fixed to properly display on HiDPI displays.<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-2 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"278\" height=\"356\" src=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-34-29.png\" alt=\"\" data-id=\"55\" data-full-url=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-34-29.png\" data-link=\"https:\/\/blogs.scummvm.org\/av-dx\/?attachment_id=55\" class=\"wp-image-55\" srcset=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-34-29.png 278w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-34-29-234x300.png 234w\" sizes=\"auto, (max-width: 278px) 100vw, 278px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"238\" height=\"291\" src=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-34-22.png\" alt=\"\" data-id=\"56\" data-full-url=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-34-22.png\" data-link=\"https:\/\/blogs.scummvm.org\/av-dx\/?attachment_id=56\" class=\"wp-image-56\" \/><\/figure><\/li><\/ul><figcaption class=\"blocks-gallery-caption\">Left : Regular display   |    Right : HiDPI display<\/figcaption><\/figure>\n\n\n\n<p>After few fixes:<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-2 is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"185\" height=\"236\" src=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-38-39.png\" alt=\"\" data-id=\"57\" data-full-url=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-38-39.png\" data-link=\"https:\/\/blogs.scummvm.org\/av-dx\/?attachment_id=57\" class=\"wp-image-57\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"200\" height=\"256\" src=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-39-28.png\" alt=\"\" data-id=\"58\" data-full-url=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-18-39-28.png\" data-link=\"https:\/\/blogs.scummvm.org\/av-dx\/?attachment_id=58\" class=\"wp-image-58\" \/><\/figure><\/li><\/ul><figcaption class=\"blocks-gallery-caption\">Now they look fine on both displays!<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Task 2 : Responsive Handling<\/h2>\n\n\n\n<p>Few behaviours on grid should be intuitive. For instance, hovering over an item should highlight it, double clicking on an entry should start that game, even if the play button is not clicked, scrolling or clicking outside the entry should close the tray. These behaviours were coded. Further, we need to bring the clicked entry into focus on the grid, so the grid must be scrolled as well. In order to make it less abrupt a short sliding animation can be played. This will be implemented in the upcoming week.<\/p>\n\n\n\n<p>A scrollbar was added to the grid which still needs some work. Placeholders are now used for missing thumbnails which are just the title displayed on the thumbnail area.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"260\" height=\"279\" src=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/image-10.png\" alt=\"\" class=\"wp-image-60\" \/><figcaption>I still need to work on multi-line text, so that longer titles can fit in the space.<\/figcaption><\/figure><\/div>\n\n\n\n<p>I had hardcoded loading of flags from a placeholder list, but now they are loaded according to the list of recognized languages in Language.cpp file. Similar thing is yet to be done for platforms, so I will need to seek a resource for platform icons that I can use for the project.<\/p>\n\n\n\n<p>I also removed list from the launcher view, and will be adding a switch soon to be able to toggle back and forth between the grid and the list view, like the one in Save\/Load Dialog.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"582\" src=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-20-55-26-1024x582.png\" alt=\"\" class=\"wp-image-63\" srcset=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-20-55-26-1024x582.png 1024w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-20-55-26-300x171.png 300w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-20-55-26-768x437.png 768w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-20-55-26-1536x874.png 1536w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-20-55-26-1568x892.png 1568w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/Screenshot-from-2021-06-27-20-55-26.png 1948w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Progress at the end of Week 3<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Task 1 : Hi, HiDPI. One part that had been neglected up till this point has been the look of GUI on different displays, especially high density displays (HiDPI), on which the GUI is scaled 2x. I could not test this earlier because I don&#8217;t have a HiDPI display for my computer, but sev pointed&hellip; <a class=\"more-link\" href=\"https:\/\/blogs.scummvm.org\/av-dx\/2021\/06\/27\/adjusting-the-layout-for-more-screens-week-3-progress\/\">Continue reading <span class=\"screen-reader-text\">Adjusting the layout for more screens (Week 3 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-47","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\/47","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=47"}],"version-history":[{"count":5,"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/posts\/47\/revisions"}],"predecessor-version":[{"id":65,"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/posts\/47\/revisions\/65"}],"wp:attachment":[{"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/media?parent=47"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/categories?post=47"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/tags?post=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}