Merge branch 'master' into 652-allow-system-placeholders-to-be-a-combination-of-text-and-image-make-text-and-image-customizable

CHANGELOG.md

@@ -13,37 +13,53 @@
 * Added alternative emulators support where additional emulators can be defined in es_systems.xml and be selected system-wide or per game via the user interface
 * Populated the bundled es_systems.xml files with alternative emulator entries for most RetroArch cores
 * Added a virtual keyboard, partly based on code from batocera-emulationstation
+* Added badges that indicate favorite/completed/broken games as well as games suitable for children and those with a selected alternative emulator
+* Added game-specific controller images that are selectable via the metadata editor and displayed as a controller badge
 * Added the ability to make complementary game system customizations without having to replace the entire bundled es_systems.xml file
 * Added support for an optional \<systemsortname\> tag for es_systems.xml that can be used to override the default \<fullname\> systems sorting
+* Added menu scroll indicators showing if there are additional entries available below or above what's currently shown on screen
+* Improved the layout of the scraper GUIs (single-game scraper and multi-scraper)
+* Added horizontal scrolling of long game names to the scraper GUIs
 * Improved the gamelist filter screen to not allow filtering of values where there is no actual data to filter, e.g. Favorites for a system with no favorite games
 * Grayed out all fields in the gamelist filter screen where there is no data to filter, previously some fields were removed entirely and some could still be used
 * Added the ability to filter on blank/unknown values for Genre, Player, Developer, Publisher and Alternative emulator.
-* Added a filter for "Alternative emulator" and sorted the filters in the same order as the metadata editor fields
+* Added filters for "Alternative emulator" and "Controller badges" and sorted the filters in the same order as the metadata editor fields
 * Added a menu option to change the application exit key combination
+* Added an option to preload the gamelists on startup which leads to smoother navigation when first entering each gamelist
 * Lowered the minimum supported screen resolution from 640x480 to 224x224 to support arcade cabinet displays such as those running at 384x224 and 224x384
 * Expanded the themeable options for "helpsystem" to support custom button graphics, dimmed text and icon colors, upper/lower/camel case and custom spacing
 * Made the scrolling speed of ScrollableContainer more consistent across various screen resolutions and display aspect ratios
+* Decreased the amount of text that ScrollableContainer renders above and below the starting position as content is scrolled
 * Made the game name and description stop scrolling when running the media viewer, the screensaver or when running in the background while a game is launched
 * Added notification popups when plugging in or removing controllers
+* Made large optimizations to the SVG rendering which reduces application startup time dramatically when many systems are populated
+* Changed to loading the default theme set rbsimple-DE instead of the first available theme if the currently configured theme is missing
 * Added support for using the left and right trigger buttons in the help prompts
 * Removed the "Choose" entry from the help prompts in the gamelist view
+* Replaced a number of help prompt hacks with proper solutions
 * Changed the "Toggle screensaver" help entry in the system view to simply "Screensaver"
+* Changed the font size for the custom collection deletion screen to the same size as for all other menus
 * Added support for upscaling bitmap images using linear filtering
 * Changed the marquee image upscale filtering from nearest neighbor to linear for the launch screen and the gamelist views
 * Moved the Media Viewer and Screensaver settings higher in the UI Settings menu
 * Moved the game media directory setting to the top of the Other Settings menu, following the new Alternative Emulators entry
 * Added a blinking cursor to TextEditComponent
 * Changed the filter description "Text filter (game name)" to "Game name"
+* Removed a margin hack from TextComponent and if abbreviated strings end with a space character, that space is now removed
 * Added support for multi-select total count and exclusive multi-select to OptionListComponent
+* Added support for a maximum name length to OptionListComponent (non-multiselect only) with an abbreviation of the name if it exceeds this value
 * Added support for key repeat to OptionListComponent, making it possible to cycle through the options by holding the left or right button
 * Added key repeat for the "Jump to" and "Sort games by" selectors on the game options menu
 * Added key repeat when editing the "Release date" entry in the metadata editor (DateTimeEditComponent)
+* Added support for setting the Kidgame metadata flag for folders (which will only affect the badges)
 * Achieved a massive speed improvement for OptionListComponent by not resizing each added MenuComponent row (most notable in the filter GUI)
 * Made multiple optimizations to the GUI components by removing lots of unnecessary function calls for sizing, placement, opacity changes etc.
 * Simplified the logic for info popups and prepared the code for the future "multiple popups" feature
 * Added support for a new type of "flat style" button to ButtonComponent
 * Added support for correctly navigating arbitrarily sized ComponentGrid entries, i.e. those spanning multiple cells
 * Bundled the bold font version of Fontfabric Akrobat
+* Moved the resources/help directory to resources/graphics/help
+* Removed the unused graphics files resources/graphics/fav_add.svg and resources/graphics/fav_remove.svg
 * Added RapidJSON as a Git subtree
 * Added the GLM (OpenGL Mathematics) library as a Git subtree
 * Replaced all built-in matrix and vector data types and functions with GLM library equivalents
@@ -65,23 +81,34 @@
 * When scraping in interactive mode, the game counter was not decreased when skipping games, making it impossible to skip the final games in the queue
 * When scraping in interactive mode, "No games found" results could be accepted using the "A" button
 * When scraping in interactive mode, any refining done using the "Y" button shortcut would not be shown when doing another refine using the "Refine search" button
+* Fixed multiple minor rendering issues where graphics would be slightly cut off or incorrectly resized
 * Under some circumstances ScrollableContainer (used for the game descriptions) would contain a partially rendered bottom line
 * If the TextListComponent height was not evenly dividable by the font height + line spacing, a partial bottom row would get rendered
 * The line spacing for TextListComponent was incorrectly calculated for some resolutions such as 2560x1440
+* Fixed multiple issues with scaling of images which lead to various inconsistencies and sometimes cut-off graphics
 * Removing games from custom collections did not remove their filter index entries
 * Input consisting of only whitespace characters would get accepted by TextEditComponent which led to various strange behaviors
 * Leading and trailing whitespace characters would not get trimmed from the collection name when creating a new custom collection
 * Leading and trailing whitespace characters would get included in scraper search refines and TheGamesDB searches
 * Game name (text) filters were matching the system names for collection systems if the "Show system names in collections" setting was enabled
 * Brackets such as () and [] were filtered from game names in collection systems if the "Show system names in collections" setting was enabled
+* Fixed multiple issues where ComponentGrid would display incorrect help prompts
 * Help prompts were missing for the "Rating" and "Release date" fields in the metadata editor
 * There was some strange behavior in DateTimeEditComponent when changing the date all the way down to 1970-01-01
 * When navigating menus, the separator lines and menu components did not align properly and moved up and down slightly
+* Under some circumstances and at some screen resolutions, the last menu separator line would not get rendered (still an issue at extreme resolutions like 320x240)
 * When scrolling in menus, pressing other buttons than "Up" or "Down" did not stop the scrolling which caused all sorts of weird behavior
 * With the menu scale-up effect enabled and entering a submenu before the parent menu was completely scaled up, the parent would get stuck at a semi-scaled size
+* The custom collection deletion screen had incorrect row heights when running at lower resolutions such as 1280x720
+* If there was an abbreviated full system name for the "Gamelist on startup" option, that abbreviation would also get displayed when opening the selector window
+* Really long theme set names would not get abbreviated in the UI settings menu, leading to a garbled "Theme set" setting row
 * Disabling a collection while its gamelist was displayed would lead to a slide transition from a black screen if a gamelist on startup had been set
 * When marking a game to not be counted in the metadata editor and the game was part of a custom collection, no collection disabling notification was displayed
+* SliderComponent had very inconsistent widths at different screen aspect ratios
+* SliderComponent did not properly align the knob and bar vertically
+* Resizing in SwitchComponent did not reposition the image properly leading to a non-centered image
 * Horizontal sizing of the TextComponent input field was not consistent across different screen resolutions
+* The sizing of the metadata editor was strange, which was clearly visible when activating the Ctrl+G debug mode
 * The "sortname" window header was incorrectly spelled when editing this type of entry in the metadata editor
 * When the last row of a menu had its text color changed, this color was completely desaturated when navigating to a button below the list
 

CONTRIBUTING.md

@@ -30,7 +30,6 @@ This plan is under constant review so expect it to change from time to time. Sti
 
 * Support for pre-defined alternative emulators and cores (configured in es_systems.xml)
 * Badges highlighting things like favorite games, completed games etc. (will require theme support)
-* Improved full-screen support, removing the temporary full-screen hacks
 * Virtual (on-screen) keyboard
 * Support for the Raspberry Pi 4 (Raspberry Pi OS)
 * Add GLM library dependency for matrix and vector operations, decommission the built-in functions
@@ -39,25 +38,27 @@ This plan is under constant review so expect it to change from time to time. Sti
 
 #### v1.3
 
-* Localization/multi-language support
 * New theme engine with generalized views (only System and Gamelist) and theme variants support
 * Add multiple new gamelist components (wheels, wall/grid etc.)
 * Move existing theme logic to legacy support, only to be used for backwards compatibility
+* Improve full-screen support and make game launching more seamless, remove the temporary full-screen hacks
 * Checksum support for the scraper for exact searches and for determining when to overwrite files
-* Improved text and font functions, e.g. faster and cleaner line wrapping and more exact sizing
+* Improve text and font functions, e.g. faster and cleaner line wrapping and more exact sizing
 
 #### v1.4
 
+* Bulk metadata editor
+* Localization/multi-language support
 * Authoring tools to clean up orphaned gamelist entries, media files etc.
+* Add scraping of game manuals and maps and create a viewer for these (with PDF, GIF, JPG and PNG support)
 * Scrollbar component for the gamelist view which can be used by the themes
 * Web proxy support for the scraper
 * Add "time played" counter per game, similar to how it works in Steam
-* Preload all built-in resources and never clear them from the cache
+* Improve multi-threading
-* Improved multi-threading
 
 #### v1.5
 
-* Bulk metadata editor
+* Reorganize the menus, possibly adding basic/advanced modes
 * Simple file browsing component
 * Improve the performance of the GLSL shader code
 * Animated menu elements like switches, tick boxes, smooth scrolling etc.

INSTALL-DEV.md

@@ -1870,6 +1870,7 @@ There are two basic categories of metadata, `game` and `folders` and the metdata
 * `nomultiscrape` - bool, indicates whether the game should be excluded from the multi-scraper
 * `hidemetadata` - bool, indicates whether to hide most of the metadata fields when displaying the game in the gamelist view
 * `playcount` - integer, the number of times this game has been played
+* `controller` - string, used to display controller badges
 * `altemulator` - string, overrides the emulator/launch command on a per game basis
 * `lastplayed` - statistic, datetime, the last date and time this game was played
 
@@ -1891,6 +1892,7 @@ For folders, most of the fields are identical although some are removed. In the
 * `broken`
 * `nomultiscrape`
 * `hidemetadata`
+* `controller`
 * `lastplayed` - statistic, for folders this is inherited by the latest game file launched inside the folder.
 
 **Additional gamelist.xml information:**

THEMES-DEV.md

@@ -368,6 +368,8 @@ Below are the default zIndex values per element type:
     * `text name="logoPlaceholderText"`
 * Gamelist information - 50
     * `text name="gamelistInfo"`
+* Badges - 50
+    * `badges name="md_badges"`
 
 ### Theme variables
 
@@ -485,6 +487,8 @@ or to specify only a portion of the value of a theme property:
             - The "genre" metadata.
         * `text name="md_players"` - ALL
             - The "players" metadata (number of players the game supports).
+        * `badges name="md_badges"` - ALL
+            - The "badges" metadata. Displayed as a group of badges that indicate metadata such as favorites and completed games.
         * `datetime name="md_lastplayed"` - ALL
             - The "lastplayed" metadata.  Displayed as a string representing the time relative to "now" (e.g. "3 hours ago").
         * `text name="md_playcount"` - ALL
@@ -540,6 +544,8 @@ or to specify only a portion of the value of a theme property:
             - The "genre" metadata.
         * `text name="md_players"` - ALL
             - The "players" metadata (number of players the game supports).
+        * `badges name="md_badges"` - ALL
+            - The "badges" metadata. Displayed as a group of badges that indicate metadata such as favorites and completed games.
         * `datetime name="md_lastplayed"` - ALL
             - The "lastplayed" metadata.  Displayed as a string representing the time relative to "now" (e.g. "3 hours ago").
         * `text name="md_playcount"` - ALL
@@ -593,6 +599,8 @@ or to specify only a portion of the value of a theme property:
             - The "genre" metadata.
         * `text name="md_players"` - ALL
             - The "players" metadata (number of players the game supports).
+        * `badges name="md_badges"` - ALL
+            - The "badges" metadata. Displayed as a group of badges that indicate metadata such as favorites and completed games.
         * `datetime name="md_lastplayed"` - ALL
             - The "lastplayed" metadata.  Displayed as a string representing the time relative to "now" (e.g. "3 hours ago").
         * `text name="md_playcount"` - ALL
@@ -636,7 +644,7 @@ Can be created as an extra.
 * `rotation` - type: FLOAT.
     - angle in degrees that the image should be rotated.  Positive values will rotate clockwise, negative values will rotate counterclockwise.
 * `rotationOrigin` - type: NORMALIZED_PAIR.
-    - Point around which the image will be rotated. Defaults to `0.5 0.5`.
+    - Point around which the image will be rotated. Default is `0.5 0.5`.
 * `path` - type: PATH.
     - Path to the image file.  Most common extensions are supported (including .jpg, .png, and unanimated .gif).
 * `default` - type: PATH.
@@ -710,7 +718,7 @@ Can be created as an extra.
 * `rotation` - type: FLOAT.
     - angle in degrees that the text should be rotated.  Positive values will rotate clockwise, negative values will rotate counterclockwise.
 * `rotationOrigin` - type: NORMALIZED_PAIR.
-    - Point around which the text will be rotated. Defaults to `0.5 0.5`.
+    - Point around which the text will be rotated. Default is `0.5 0.5`.
 * `delay` - type: FLOAT.  Default is false.
     - Delay in seconds before video will start playing.
 * `default` - type: PATH.
@@ -739,7 +747,7 @@ Can be created as an extra.
 * `rotation` - type: FLOAT.
     - angle in degrees that the text should be rotated.  Positive values will rotate clockwise, negative values will rotate counterclockwise.
 * `rotationOrigin` - type: NORMALIZED_PAIR.
-    - Point around which the text will be rotated. Defaults to `0.5 0.5`.
+    - Point around which the text will be rotated. Default is `0.5 0.5`.
 * `text` - type: STRING.
 * `color` - type: COLOR.
 * `backgroundColor` - type: COLOR;
@@ -811,7 +819,7 @@ ES-DE borrows the concept of "nine patches" from Android (or "9-Slices"). Curren
 * `rotation` - type: FLOAT.
     - angle in degrees that the rating should be rotated.  Positive values will rotate clockwise, negative values will rotate counterclockwise.
 * `rotationOrigin` - type: NORMALIZED_PAIR.
-    - Point around which the rating will be rotated. Defaults to `0.5 0.5`.
+    - Point around which the rating will be rotated. Default is `0.5 0.5`.
 * `filledPath` - type: PATH.
     - Path to the "filled star" image.  Image must be square (width equals height).
 * `unfilledPath` - type: PATH.
@@ -835,7 +843,7 @@ ES-DE borrows the concept of "nine patches" from Android (or "9-Slices"). Curren
 * `rotation` - type: FLOAT.
     - angle in degrees that the text should be rotated.  Positive values will rotate clockwise, negative values will rotate counterclockwise.
 * `rotationOrigin` - type: NORMALIZED_PAIR.
-    - Point around which the text will be rotated. Defaults to `0.5 0.5`.
+    - Point around which the text will be rotated. Default is `0.5 0.5`.
 * `color` - type: COLOR.
 * `backgroundColor` - type: COLOR;
 * `fontPath` - type: PATH.
@@ -911,6 +919,51 @@ ES-DE borrows the concept of "nine patches" from Android (or "9-Slices"). Curren
       `button_back_XBOX360`,
       `button_start_XBOX360`.
 
+#### badges
+
+It's strongly recommended to use the same image dimensions for all badges as varying aspect ratios will lead to alignment issues. For the controller images it's recommended to keep to the square canvas size used by the default bundled graphics as otherwise sizing and placement will be inconsistent (unless all controller graphic files are customized of course).
+
+* `pos` - type: NORMALIZED_PAIR.
+* `size` - type: NORMALIZED_PAIR.
+    - Possible combinations:
+    - `w h` - Dimensions of the badges container. The badges will be scaled to fit within these dimensions. Minimum value per axis is `0.03`, maximum value is `1.0`. Default is `0.15 0.20`.
+* `origin` - type: NORMALIZED_PAIR.
+    - Where on the component `pos` refers to.  For example, an origin of `0.5 0.5` and a `pos` of `0.5 0.5` would place the component exactly in the middle of the screen.  If the "POSITION" and "SIZE" attributes are themeable, "ORIGIN" is implied. Default is `0 0`.
+* `rotation` - type: FLOAT.
+    - angle in degrees that the image should be rotated.  Positive values will rotate clockwise, negative values will rotate counterclockwise. Default is `0`.
+* `rotationOrigin` - type: NORMALIZED_PAIR.
+    - Point around which the image will be rotated. Default is `0.5 0.5`.
+* `direction` - type: STRING.
+    - Valid values are "row" or "column". Controls the primary layout direction (line axis) for the badges. Lines will fill up in the specified direction. Default is `row`.
+* `lines` - type: FLOAT.
+    - The number of lines available. Default is `2`.
+* `itemsPerLine` - type: FLOAT.
+    - Number of badges that fit on a line. When more badges are available a new line will be started. Default is `4`.
+* `itemMargin` - type: NORMALIZED_PAIR.
+    - The margins between badges. Possible combinations:
+    - `x y` - horizontal and vertical margins. Minimum value per axis is `0`, maximum value is `0.2`. Default is `0.01 0.01`. If one of the axis is set to `-1` the margin of the other axis (in pixels) will be used, which makes it possible to get identical spacing between all items regardless of screen aspect ratio.
+* `slots` - type: STRING.
+    - The badge types that should be displayed. Should be specified as a list of strings delimited by any characters of `\t\r\n ,` - that is, whitespace and commas. The order will be followed when placing badges on the screen. Available badges are:
+    - `favorite`: Will be shown when the game is marked as favorite.
+    - `completed`: Will be shown when the game is marked as completed.
+    - `kidgame`: Will be shown when the game is marked as a kids game.
+    - `broken`: Will be shown when the game is marked as broken.
+    - `controller`: Will be shown and overlaid by the corresponding controller icon if a controller type has been selected for the game using the metadata editor.
+    - `altemulator`: Will be shown when an alternative emulator is setup for the game.
+* `controllerPos` - type: NORMALIZED_PAIR.
+    - The position of the controller icon relative to the parent `controller` badge. Minimum value per axis is `-1.0`, maximum value is `2.0`. Default is `0.5 0.5` which centers the controller icon on the badge.
+* `controllerSize` - type: FLOAT.
+    - The size of the controller icon relative to the parent `controller` badge. Minimum value is `0.1`, maximum value is `2.0`. Setting the value to `1.0` sizes the controller icon to the same width as the parent badge. The image aspect ratio is always maintained.
+* `customBadgeIcon` - type: PATH.
+    - A badge icon override. Specify the badge type in the attribute `badge`. The available badges are the ones listed above.
+* `customControllerIcon` - type: PATH.
+    - A controller icon override. Specify the controller type in the attribute `controller`. These are the available types:
+    - `gamepad_generic`, `gamepad_xbox`, `gamepad_playstation`, `gamepad_nintendo_nes`, `gamepad_nintendo_snes`, `gamepad_nintendo_64`, `joystick_generic`, `joystick_arcade_2_buttons`, `joystick_arcade_3_buttons`, `joystick_arcade_4_buttons`, `joystick_arcade_6_buttons`, `trackball_generic`, `lightgun_generic`, `lightgun_nintendo`, `keyboard_generic`, `mouse_generic`, `mouse_amiga`, `keyboard_mouse_generic`, `steering_wheel_generic`, `wii_remote_nintendo`, `wii_remote_nunchuck_nintendo`, `joycon_left_or_right_nintendo`, `joycon_pair_nintendo`, `unknown`.
+* `visible` - type: BOOLEAN.
+    - If true, component will be rendered, otherwise rendering will be skipped.  Can be used to hide elements from a particular view.
+* `zIndex` - type: FLOAT.
+    - z-index value for component.  Components will be rendered in order of z-index value from low to high. Default is `50`.
+
 #### carousel
 
 * `type` - type: STRING.
@@ -933,7 +986,7 @@ ES-DE borrows the concept of "nine patches" from Android (or "9-Slices"). Curren
     - Default is 7.5
     - This property only applies when `type` is "horizontal_wheel" or "vertical_wheel".
 * `logoRotationOrigin` - type: NORMALIZED_PAIR.
-    - Point around which the logos will be rotated. Defaults to `-5 0.5`.
+    - Point around which the logos will be rotated. Default is `-5 0.5`.
     - This property only applies when `type` is "horizontal_wheel" or "vertical_wheel".
 * `logoAlignment` - type: STRING.
     - Sets the alignment of the logos relative to the carousel.

USERGUIDE-DEV.md

@@ -47,6 +47,8 @@ The following operating systems have been tested (all for the x86 architecture u
 
 **Note:** If using a Mac with an ARM CPU (e.g. M1) you need to install the x86 version of RetroArch and any other emulators, or you won't be able to launch any games. This will be fixed whenever a native macOS ARM build of ES-DE is released.
 
+As for display resolutions, the minimum pixel value is 224 and the maximum is 7680. This means that you can run ES-DE at for instance 320x224 all the way up to 7680x4320 (8K UHD). Vertical screen orientation is also supported, as well as ultra-wide resolutions like 3840x1440. Note that there could be some minor visual glitches when running in vertical orientation (this will be fixed in future ES-DE releases) and for the best experience you will probably need to use a customized theme set when running at extreme or unusual resolutions.
+
 The installation procedure is just covered briefly here and may differ a bit for your specific operating system, so in case of problems refer to your system documentation.
 
 **Installing a Linux .deb package**
@@ -213,6 +215,8 @@ In addition to the styles just described, there is a **Grid** view style as well
 
 If the theme supports it, there's a gamelist information field displayed in the gamelist view, showing the number of games for the system (total and favorites) as well as a folder icon if a folder has been entered. When applying any filters to the gamelist, the game counter is replaced with the amount of games filtered, as in 'filtered / total games', e.g. '19 / 77'. If there are game entries in the filter result that are marked not to be counted as games, the number of such files will be indicated as 'filtered + filtered non-games / total games', for example '23 + 4 / 77' indicating 23 normal games, 4 non-games out of a total of 77. Due to this approach it's theoretically possible that the combined filtered game amount exceeds the number of counted games in the collection, for instance '69 + 11 / 77'. This is not considered a bug and is so by design. This gamelist information field functionality is specific to EmulationStation Desktop Edition so older themes will not support this.
 
+Another feature which requires theme support is **Badges**, which is a set of icons displaying the status for various metadata fields. The currently supported badge types are _favorite, completed, kidgame, broken, controller_ and _alternative emulator_. If any of the first four metadata fields have been set for a game, their corresponding badges will be displayed. If a game-specific controller has been selected via the metadata editor, the corresponding controller badge will be shown. And if an alternative emulator has been selected for the specific game, that badge will be displayed. Setting an alternative emulator system-wide will not display this badge as it's only intended to indicate game-specific overrides.
+
 ![alt text](images/es-de_gamelist_view.png "ES-DE Gamelist View")
 _The **Gamelist view** is where you browse the games for a specific system._
 
@@ -970,6 +974,10 @@ With this option enabled, there will be an overlay displayed when scrolling the
 
 This enables a virtual (on-screen) keyboard that can be used at various places throughout the application to input text and numbers using a controller. The Shift and Alt keys can be toggled individually or combined together to access many special characters. The general use of the virtual keyboard should hopefully be self-explanatory.
 
+**Enable menu scroll indicators**
+
+With this option enabled, "up and down" scroll indicators will be displayed in the upper right corner of menus (including the metadata editor) if there are more entries available than can be shown on the screen at the same time. These indicators will change dynamically as the list is scrolled. If the setting is disabled, a simplified static indicator will be displayed instead.
+
 **Enable toggle favorites button**
 
 This setting enables the _Y_ button for quickly toggling a game as favorite. Although this may be convenient at times, it's also quite easy to accidentally remove a favorite tagging of a game when using the application more casually. As such it could sometimes make sense to disable this functionality. It's of course still possible to mark a game as favorite using the metadata editor when this setting is disabled. The option does not affect the use of the _Y_ button to add or remove games when editing custom collections.
@@ -1244,6 +1252,10 @@ Enabling this option offloads video decoding to the GPU. Whether this actually i
 
 With this option enabled, videos with lower frame rates than 60 FPS, such as 24 and 30 will get upscaled to 60 FPS. This results in slightly smoother playback for some videos. There is a small performance hit from this option, so on weaker machines it may be necessary to disable it for fluent video playback. This setting has no effect when using the VLC video player. If the VLC video player is not included in the ES-DE build, the "(FFmpeg)" text is omitted from the setting name.
 
+**Preload gamelists on startup**
+
+When this option is enabled, all gamelists will be loaded on application startup. This will increase the startup time slightly and lead to a higher initial memory utilization, but navigation will be smoother the first time a gamelist is entered. The improvement is especially noticeable when the _slide_ transition style has been selected.
+
 **Enable alternative emulators per game**
 
 If enabled, you will be able to select alternative emulators per game using the metadata editor. It's only recommended to disable this option for testing purposes.
@@ -1364,9 +1376,11 @@ The following filters can be applied:
 
 **Broken**
 
+**Controller badge**
+
 **Alternative emulator**
 
-With the exception of the game name text filter, all available filter values are assembled from metadata from the actual gamelist, so if there is no data to filter for the specific field, the text _Nothing to filter_ will be displayed. This for example happens for the _Completed_ filter if there are no games marked as having been completed in the current gamelist.
+With the exception of the game name text filter, all available filter values are assembled from metadata from the actual gamelist, so if there is no data to filter for the specific field, the text _Nothing to filter_ will be displayed. This for example happens for the _Completed_ filter if there are no games marked as having been completed in the current gamelist. The same happens if a metadata setting is identical for all games, such as all games being flagged as favorites.
 
 Be aware that although folders can have most of the metadata values set, the filters are only applied to files (this is also true for the game name text filter). So if you for example set a filter to only display your favorite games, any folder that contains a favorite game will be displayed, and other folders which are themselves marked as favorites but that do not contain any favorite games will be hidden.
 
@@ -1440,9 +1454,9 @@ A flag to indicate whether this is a favorite game. This flag can also be set di
 
 A flag to indicate whether you have completed the game.
 
-**Kidgame** _(files only)_
+**Kidgame**
 
-A flag to mark whether the game is suitable for children. This will be applied as a filter when starting ES-DE in _Kid_ mode.
+A flag to mark whether the game is suitable for children. This will be applied as a filter when starting ES-DE in _Kid_ mode. Although it's possible to also set this flag for folders, this will **not** affect the actual files inside those folders. It will instead only be used to display the Kidgame badge for the folders themselves.
 
 **Hidden**
 
@@ -1462,12 +1476,16 @@ Whether to exclude the file from the multi-scraper. This is quite useful in orde
 
 **Hide metadata fields**
 
-This option will hide most metadata fields in the gamelist view. The intention is to be able to hide the fields for situations such as general folders (Multi-disc, Cartridges etc.) and for setup programs and similar (e.g. SETUP.EXE or INSTALL.BAT for DOS games). It could also be used on the game files for multi-disc games where perhaps only the .m3u playlist should have any metadata values. The only fields shown with this option enabled are the game name and description. Using the description it's possible to write some comments regarding the file or folder, should you want to. It's also possible to display game images and videos with this setting enabled.
+This option will hide most metadata fields as well as any badges. The intention is to be able to hide the fields for situations such as general folders (Multi-disc, Cartridges etc.) and for setup programs and similar (e.g. SETUP.EXE or INSTALL.BAT for DOS games). It could also be used on the game files for multi-disc games where perhaps only the .m3u playlist should have any metadata values. The only fields shown with this option enabled are the game name and description. Using the description it's possible to write some comments regarding the file or folder, should you want to. It's also possible to display game images and videos with this setting enabled.
 
 **Times played** _(files only)_
 
 A statistics counter that tracks how many times you have played the game. You normally don't need to touch this, but if you want to, the possibility is there.
 
+**Controller badge**
+
+This entry provides a selection of controller icons that are built into ES-DE (although the theme set can override the actual graphics files). The selected icon will be displayed as a badge if the current theme set support badges. This functionality is only cosmetic and will not affect the actual emulators.
+
 **Alternative emulator** _(files only)_
 
 If the option _Enable alternative emulators per game_ has been enabled, there will be an entry shown where you can select between alternative emulators for the specific game. There is a similar _Alternative emulators_ entry under the _Other settings_ menu, but that will apply the selection to the entire game system. If you select an alternative for a specific game using the metadata editor, that will take precedence and override any system-wide emulator selection (the currently selected system-wide emulator will be clearly marked on the selection screen). The alternative emulators need to be defined in the es_systems.xml file, and if there are no alternatives available for the current system, this row in the metadata editor will be grayed out. If you select an alternative emulator and later remove its corresponding entry from the es_systems.xml file, an error notice will be shown on this row. In this case you have the option to remove the invalid entry. But even if there is an invalid entry, games will still launch using the default emulator while logging a warning message to the es_log.txt file. Apart from this, the emulator selection should hopefully be self-explanatory.

es-app/src/FileFilterIndex.cpp

@@ -33,6 +33,7 @@ FileFilterIndex::FileFilterIndex()
     , mFilterByKidGame(false)
     , mFilterByHidden(false)
     , mFilterByBroken(false)
+    , mFilterByController(false)
     , mFilterByAltemulator(false)
 {
     clearAllFilters();
@@ -50,6 +51,7 @@ FileFilterIndex::FileFilterIndex()
         {KIDGAME_FILTER,     &mKidGameIndexAllKeys,     &mFilterByKidGame,     &mKidGameIndexFilteredKeys,     "kidgame",      false,              "",             "KIDGAME"},
         {HIDDEN_FILTER,      &mHiddenIndexAllKeys,      &mFilterByHidden,      &mHiddenIndexFilteredKeys,      "hidden",       false,              "",             "HIDDEN"},
         {BROKEN_FILTER,      &mBrokenIndexAllKeys,      &mFilterByBroken,      &mBrokenIndexFilteredKeys,      "broken",       false,              "",             "BROKEN"},
+        {CONTROLLER_FILTER,  &mControllerIndexAllKeys,  &mFilterByController,  &mControllerIndexFilteredKeys,  "controller",   false,              "",             "CONTROLLER BADGE"},
         {ALTEMULATOR_FILTER, &mAltemulatorIndexAllKeys, &mFilterByAltemulator, &mAltemulatorIndexFilteredKeys, "altemulator",  false,              "",             "ALTERNATIVE EMULATOR"}
     };
     // clang-format on
@@ -82,6 +84,7 @@ void FileFilterIndex::importIndex(FileFilterIndex* indexToImport)
         {&mKidGameIndexAllKeys, &(indexToImport->mKidGameIndexAllKeys)},
         {&mHiddenIndexAllKeys, &(indexToImport->mHiddenIndexAllKeys)},
         {&mBrokenIndexAllKeys, &(indexToImport->mBrokenIndexAllKeys)},
+        {&mControllerIndexAllKeys, &(indexToImport->mControllerIndexAllKeys)},
         {&mAltemulatorIndexAllKeys, &(indexToImport->mAltemulatorIndexAllKeys)},
     };
 
@@ -119,6 +122,7 @@ void FileFilterIndex::resetIndex()
     clearIndex(mKidGameIndexAllKeys);
     clearIndex(mHiddenIndexAllKeys);
     clearIndex(mBrokenIndexAllKeys);
+    clearIndex(mControllerIndexAllKeys);
     clearIndex(mAltemulatorIndexAllKeys);
 }
 
@@ -215,6 +219,12 @@ std::string FileFilterIndex::getIndexableKey(FileData* game,
             key = Utils::String::toUpper(game->metadata.get("broken"));
             break;
         }
+        case CONTROLLER_FILTER: {
+            if (getSecondary)
+                break;
+            key = Utils::String::toUpper(game->metadata.get("controller"));
+            break;
+        }
         case ALTEMULATOR_FILTER: {
             if (getSecondary)
                 break;
@@ -231,8 +241,8 @@ std::string FileFilterIndex::getIndexableKey(FileData* game,
          type == PUBLISHER_FILTER) &&
         Utils::String::toUpper(key) == UNKNOWN_LABEL)
         key = ViewController::CROSSEDCIRCLE_CHAR + " UNKNOWN";
-    else if (type == ALTEMULATOR_FILTER && key.empty())
+    else if ((type == CONTROLLER_FILTER || type == ALTEMULATOR_FILTER) && key.empty())
-        key = ViewController::CROSSEDCIRCLE_CHAR + " NONE DEFINED";
+        key = ViewController::CROSSEDCIRCLE_CHAR + " NONE SELECTED";
     else if (key.empty() || (type == RATINGS_FILTER && key == "0 STARS"))
         key = UNKNOWN_LABEL;
 
@@ -251,6 +261,7 @@ void FileFilterIndex::addToIndex(FileData* game)
     manageKidGameEntryInIndex(game);
     manageHiddenEntryInIndex(game);
     manageBrokenEntryInIndex(game);
+    manageControllerEntryInIndex(game);
     manageAltemulatorEntryInIndex(game);
 }
 
@@ -266,6 +277,7 @@ void FileFilterIndex::removeFromIndex(FileData* game)
     manageKidGameEntryInIndex(game, true);
     manageHiddenEntryInIndex(game, true);
     manageBrokenEntryInIndex(game, true);
+    manageControllerEntryInIndex(game, true);
     manageAltemulatorEntryInIndex(game, true);
 }
 
@@ -365,6 +377,9 @@ void FileFilterIndex::debugPrintIndexes()
     for (auto x : mBrokenIndexAllKeys) {
         LOG(LogInfo) << "Broken Index: " << x.first << ": " << x.second;
     }
+    for (auto x : mControllerIndexAllKeys) {
+        LOG(LogInfo) << "Controller Index: " << x.first << ": " << x.second;
+    }
     for (auto x : mAltemulatorIndexAllKeys) {
         LOG(LogInfo) << "Altemulator Index: " << x.first << ": " << x.second;
     }
@@ -444,28 +459,29 @@ bool FileFilterIndex::isFiltered()
     if (UIModeController::getInstance()->isUIModeKid()) {
         return (mFilterByText || mFilterByRatings || mFilterByDeveloper || mFilterByPublisher ||
                 mFilterByGenre || mFilterByPlayers || mFilterByFavorites || mFilterByCompleted ||
-                mFilterByHidden || mFilterByBroken || mFilterByAltemulator);
+                mFilterByHidden || mFilterByBroken || mFilterByController || mFilterByAltemulator);
     }
     else {
         return (mFilterByText || mFilterByRatings || mFilterByDeveloper || mFilterByPublisher ||
                 mFilterByGenre || mFilterByPlayers || mFilterByFavorites || mFilterByCompleted ||
-                mFilterByKidGame || mFilterByHidden || mFilterByBroken || mFilterByAltemulator);
+                mFilterByKidGame || mFilterByHidden || mFilterByBroken || mFilterByController ||
+                mFilterByAltemulator);
     }
 }
 
 bool FileFilterIndex::isKeyBeingFilteredBy(std::string key, FilterIndexType type)
 {
-    const FilterIndexType filterTypes[11] = {RATINGS_FILTER,   DEVELOPER_FILTER,  PUBLISHER_FILTER,
+    const FilterIndexType filterTypes[12] = {
-                                             GENRE_FILTER,     PLAYER_FILTER,     FAVORITES_FILTER,
+        RATINGS_FILTER, DEVELOPER_FILTER, PUBLISHER_FILTER,  GENRE_FILTER,
-                                             COMPLETED_FILTER, KIDGAME_FILTER,    HIDDEN_FILTER,
+        PLAYER_FILTER,  FAVORITES_FILTER, COMPLETED_FILTER,  KIDGAME_FILTER,
-                                             BROKEN_FILTER,    ALTEMULATOR_FILTER};
+        HIDDEN_FILTER,  BROKEN_FILTER,    CONTROLLER_FILTER, ALTEMULATOR_FILTER};
-    std::vector<std::string> filterKeysList[11] = {
+    std::vector<std::string> filterKeysList[12] = {
         mRatingsIndexFilteredKeys,   mDeveloperIndexFilteredKeys,  mPublisherIndexFilteredKeys,
         mGenreIndexFilteredKeys,     mPlayersIndexFilteredKeys,    mFavoritesIndexFilteredKeys,
         mCompletedIndexFilteredKeys, mKidGameIndexFilteredKeys,    mHiddenIndexFilteredKeys,
-        mBrokenIndexFilteredKeys,    mAltemulatorIndexFilteredKeys};
+        mBrokenIndexFilteredKeys,    mControllerIndexFilteredKeys, mAltemulatorIndexFilteredKeys};
 
-    for (int i = 0; i < 11; i++) {
+    for (int i = 0; i < 12; i++) {
         if (filterTypes[i] == type) {
             for (std::vector<std::string>::const_iterator it = filterKeysList[i].cbegin();
                  it != filterKeysList[i].cend(); it++) {
@@ -611,6 +627,12 @@ void FileFilterIndex::manageBrokenEntryInIndex(FileData* game, bool remove)
     manageIndexEntry(&mBrokenIndexAllKeys, key, remove);
 }
 
+void FileFilterIndex::manageControllerEntryInIndex(FileData* game, bool remove)
+{
+    std::string key = getIndexableKey(game, CONTROLLER_FILTER, false);
+    manageIndexEntry(&mControllerIndexAllKeys, key, remove);
+}
+
 void FileFilterIndex::manageAltemulatorEntryInIndex(FileData* game, bool remove)
 {
     std::string key = getIndexableKey(game, ALTEMULATOR_FILTER, false);

es-app/src/FileFilterIndex.h

@@ -31,6 +31,7 @@ enum FilterIndexType {
     KIDGAME_FILTER,
     HIDDEN_FILTER,
     BROKEN_FILTER,
+    CONTROLLER_FILTER,
     ALTEMULATOR_FILTER
 };
 
@@ -82,6 +83,7 @@ private:
     void manageKidGameEntryInIndex(FileData* game, bool remove = false);
     void manageHiddenEntryInIndex(FileData* game, bool remove = false);
     void manageBrokenEntryInIndex(FileData* game, bool remove = false);
+    void manageControllerEntryInIndex(FileData* game, bool remove = false);
     void manageAltemulatorEntryInIndex(FileData* game, bool remove = false);
 
     void manageIndexEntry(std::map<std::string, int>* index, std::string key, bool remove);
@@ -102,6 +104,7 @@ private:
     bool mFilterByKidGame;
     bool mFilterByHidden;
     bool mFilterByBroken;
+    bool mFilterByController;
     bool mFilterByAltemulator;
 
     std::map<std::string, int> mRatingsIndexAllKeys;
@@ -114,6 +117,7 @@ private:
     std::map<std::string, int> mKidGameIndexAllKeys;
     std::map<std::string, int> mHiddenIndexAllKeys;
     std::map<std::string, int> mBrokenIndexAllKeys;
+    std::map<std::string, int> mControllerIndexAllKeys;
     std::map<std::string, int> mAltemulatorIndexAllKeys;
 
     std::vector<std::string> mRatingsIndexFilteredKeys;
@@ -126,6 +130,7 @@ private:
     std::vector<std::string> mKidGameIndexFilteredKeys;
     std::vector<std::string> mHiddenIndexFilteredKeys;
     std::vector<std::string> mBrokenIndexFilteredKeys;
+    std::vector<std::string> mControllerIndexFilteredKeys;
     std::vector<std::string> mAltemulatorIndexFilteredKeys;
 };
 

es-app/src/MetaData.cpp

@@ -37,26 +37,29 @@ MetaDataDecl gameDecls[] = {
 {"nomultiscrape", MD_BOOL,             "false",           false,     "exclude from multi-scraper", "enter no multi-scrape off/on",     false},
 {"hidemetadata",  MD_BOOL,             "false",           false,     "hide metadata fields",       "enter hide metadata off/on",       false},
 {"playcount",     MD_INT,              "0",               false,     "times played",               "enter number of times played",     false},
+{"controller",    MD_CONTROLLER,       "",                false,     "controller badge",           "select controller badge",          false},
 {"altemulator",   MD_ALT_EMULATOR,     "",                false,     "alternative emulator",       "select alternative emulator",      false},
 {"lastplayed",    MD_TIME,             "0",               true,      "last played",                "enter last played date",           false}
 };
 
 MetaDataDecl folderDecls[] = {
-{"name",          MD_STRING,           "",                false,     "name",                       "enter name",                       true},
+{"name",          MD_STRING,           "",                false,     "name",                          "enter name",                       true},
-{"desc",          MD_MULTILINE_STRING, "",                false,     "description",                "enter description",                true},
+{"desc",          MD_MULTILINE_STRING, "",                false,     "description",                   "enter description",                true},
-{"rating",        MD_RATING,           "0",               false,     "rating",                     "enter rating",                     true},
+{"rating",        MD_RATING,           "0",               false,     "rating",                        "enter rating",                     true},
-{"releasedate",   MD_DATE,             "19700101T010000", false,     "release date",               "enter release date",               true},
+{"releasedate",   MD_DATE,             "19700101T010000", false,     "release date",                  "enter release date",               true},
-{"developer",     MD_STRING,           "unknown",         false,     "developer",                  "enter developer",                  true},
+{"developer",     MD_STRING,           "unknown",         false,     "developer",                     "enter developer",                  true},
-{"publisher",     MD_STRING,           "unknown",         false,     "publisher",                  "enter publisher",                  true},
+{"publisher",     MD_STRING,           "unknown",         false,     "publisher",                     "enter publisher",                  true},
-{"genre",         MD_STRING,           "unknown",         false,     "genre",                      "enter genre",                      true},
+{"genre",         MD_STRING,           "unknown",         false,     "genre",                         "enter genre",                      true},
-{"players",       MD_STRING,           "unknown",         false,     "players",                    "enter number of players",          true},
+{"players",       MD_STRING,           "unknown",         false,     "players",                       "enter number of players",          true},
-{"favorite",      MD_BOOL,             "false",           false,     "favorite",                   "enter favorite off/on",            false},
+{"favorite",      MD_BOOL,             "false",           false,     "favorite",                      "enter favorite off/on",            false},
-{"completed",     MD_BOOL,             "false",           false,     "completed",                  "enter completed off/on",           false},
+{"completed",     MD_BOOL,             "false",           false,     "completed",                     "enter completed off/on",           false},
-{"hidden",        MD_BOOL,             "false",           false,     "hidden",                     "enter hidden off/on",              false},
+{"kidgame",       MD_BOOL,             "false",           false,     "kidgame (only affects badges)", "enter kidgame off/on",             false},
-{"broken",        MD_BOOL,             "false",           false,     "broken/not working",         "enter broken off/on",              false},
+{"hidden",        MD_BOOL,             "false",           false,     "hidden",                        "enter hidden off/on",              false},
-{"nomultiscrape", MD_BOOL,             "false",           false,     "exclude from multi-scraper", "enter no multi-scrape off/on",     false},
+{"broken",        MD_BOOL,             "false",           false,     "broken/not working",            "enter broken off/on",              false},
-{"hidemetadata",  MD_BOOL,             "false",           false,     "hide metadata fields",       "enter hide metadata off/on",       false},
+{"nomultiscrape", MD_BOOL,             "false",           false,     "exclude from multi-scraper",    "enter no multi-scrape off/on",     false},
-{"lastplayed",    MD_TIME,             "0",               true,      "last played",                "enter last played date",           false}
+{"hidemetadata",  MD_BOOL,             "false",           false,     "hide metadata fields",          "enter hide metadata off/on",       false},
+{"controller",    MD_CONTROLLER,       "",                false,     "controller badge",              "select controller badge",          false},
+{"lastplayed",    MD_TIME,             "0",               true,      "last played",                   "enter last played date",           false}
 };
 // clang-format on
 

es-app/src/MetaData.h

@@ -32,6 +32,7 @@ enum MetaDataType {
 
     // Specialized types.
     MD_MULTILINE_STRING,
+    MD_CONTROLLER,
     MD_ALT_EMULATOR,
     MD_PATH,
     MD_RATING,

es-app/src/guis/GuiAlternativeEmulators.cpp

@@ -39,13 +39,6 @@ GuiAlternativeEmulators::GuiAlternativeEmulators(Window* window)
 
         ComponentListRow row;
 
-        // This transparent bracket is only added to generate a left margin.
-        auto bracket = std::make_shared<ImageComponent>(mWindow);
-        bracket->setImage(":/graphics/arrow.svg");
-        bracket->setOpacity(0);
-        bracket->setSize(bracket->getSize() / 3.0f);
-        row.addElement(bracket, false);
-
         std::string name = (*it)->getName();
         std::shared_ptr<TextComponent> systemText =
             std::make_shared<TextComponent>(mWindow, name, Font::get(FONT_SIZE_MEDIUM), 0x777777FF);
@@ -94,7 +87,9 @@ GuiAlternativeEmulators::GuiAlternativeEmulators(Window* window)
             labelText->setColor(TEXTCOLOR_SCRAPERMARKED);
 
         mCommandRows[name] = labelText;
-        labelText->setSize(labelSizeX, labelText->getSize().y);
+        labelText->setSize(mMenu.getSize().x - systemSizeX -
+                               20.0f * Renderer::getScreenHeightModifier(),
+                           systemText->getSize().y);
 
         row.addElement(labelText, false);
         row.makeAcceptInputHandler([this, it, labelText] {
@@ -157,6 +152,7 @@ void GuiAlternativeEmulators::selectorWindow(SystemData* system)
 
         std::shared_ptr<TextComponent> labelText = std::make_shared<TextComponent>(
             mWindow, label, Font::get(FONT_SIZE_MEDIUM), 0x777777FF, ALIGN_LEFT);
+        labelText->setSelectable(true);
 
         if (system->getSystemEnvData()->mLaunchCommands.front().second == label)
             labelText->setValue(labelText->getValue().append(" [DEFAULT]"));
@@ -193,13 +189,6 @@ void GuiAlternativeEmulators::selectorWindow(SystemData* system)
             delete s;
         });
 
-        // This transparent bracket is only added to generate the correct help prompts.
-        auto bracket = std::make_shared<ImageComponent>(mWindow);
-        bracket->setImage(":/graphics/arrow.svg");
-        bracket->setOpacity(0);
-        bracket->setSize(bracket->getSize() / 3.0f);
-        row.addElement(bracket, false);
-
         // Select the row that corresponds to the selected label.
         if (selectedLabel == label)
             s->addRow(row, true);

es-app/src/guis/GuiCollectionSystemsOptions.cpp

@@ -177,12 +177,8 @@ GuiCollectionSystemsOptions::GuiCollectionSystemsOptions(Window* window, std::st
                 row.makeAcceptInputHandler(createCollectionCall);
                 auto themeFolder = std::make_shared<TextComponent>(
                     mWindow, Utils::String::toUpper(name), Font::get(FONT_SIZE_SMALL), 0x777777FF);
+                themeFolder->setSelectable(true);
                 row.addElement(themeFolder, true);
-                // This transparent bracket is only added to generate the correct help prompts.
-                auto bracket = std::make_shared<ImageComponent>(mWindow);
-                bracket->setImage(":/graphics/arrow.svg");
-                bracket->setOpacity(0);
-                row.addElement(bracket, false);
                 ss->addRow(row);
             }
             mWindow->pushGui(ss);
@@ -287,15 +283,17 @@ GuiCollectionSystemsOptions::GuiCollectionSystemsOptions(Window* window, std::st
             };
             row.makeAcceptInputHandler(deleteCollectionCall);
             auto customCollection = std::make_shared<TextComponent>(
-                mWindow, Utils::String::toUpper(name), Font::get(FONT_SIZE_SMALL), 0x777777FF);
+                mWindow, Utils::String::toUpper(name), Font::get(FONT_SIZE_MEDIUM), 0x777777FF);
+            customCollection->setSelectable(true);
             row.addElement(customCollection, true);
-            // This transparent bracket is only added generate the correct help prompts.
-            auto bracket = std::make_shared<ImageComponent>(mWindow);
-            bracket->setImage(":/graphics/arrow.svg");
-            bracket->setOpacity(0);
-            row.addElement(bracket, false);
             ss->addRow(row);
         }
+        // Make the menu slightly wider to fit the scroll indicators.
+        glm::vec2 menuSize{ss->getMenuSize()};
+        glm::vec3 menuPos{ss->getMenuPosition()};
+        ss->setMenuSize(glm::vec2{menuSize.x * 1.08f, menuSize.y});
+        menuPos.x = static_cast<float>((Renderer::getScreenWidth()) - ss->getMenuSize().x) / 2.0f;
+        ss->setMenuPosition(menuPos);
         mWindow->pushGui(ss);
     });
     addRow(row);

es-app/src/guis/GuiGameScraper.cpp

@@ -23,15 +23,13 @@ GuiGameScraper::GuiGameScraper(Window* window,
                                std::function<void(const ScraperSearchResult&)> doneFunc)
     : GuiComponent(window)
     , mClose(false)
-    , mGrid(window, glm::ivec2{1, 7})
+    , mGrid(window, glm::ivec2{2, 6})
     , mBox(window, ":/graphics/frame.svg")
     , mSearchParams(params)
 {
     addChild(&mBox);
     addChild(&mGrid);
 
-    // Row 0 is a spacer.
-
     std::string scrapeName;
 
     if (Settings::getInstance()->getBool("ScraperSearchMetadataName")) {
@@ -51,21 +49,37 @@ GuiGameScraper::GuiGameScraper(Window* window,
         mWindow,
         scrapeName +
             ((mSearchParams.game->getType() == FOLDER) ? "  " + ViewController::FOLDER_CHAR : ""),
-        Font::get(FONT_SIZE_MEDIUM), 0x777777FF, ALIGN_CENTER);
+        Font::get(FONT_SIZE_LARGE), 0x777777FF, ALIGN_CENTER);
-    mGrid.setEntry(mGameName, glm::ivec2{0, 1}, false, true);
+    mGameName->setColor(0x555555FF);
-
+    mGrid.setEntry(mGameName, glm::ivec2{0, 0}, false, true, glm::ivec2{2, 2});
-    // Row 2 is a spacer.
 
     mSystemName = std::make_shared<TextComponent>(
         mWindow, Utils::String::toUpper(mSearchParams.system->getFullName()),
         Font::get(FONT_SIZE_SMALL), 0x888888FF, ALIGN_CENTER);
-    mGrid.setEntry(mSystemName, glm::ivec2{0, 3}, false, true);
+    mGrid.setEntry(mSystemName, glm::ivec2{0, 2}, false, true, glm::ivec2{2, 1});
 
-    // Row 4 is a spacer.
+    // Row 3 is a spacer.
 
     // GuiScraperSearch.
     mSearch = std::make_shared<GuiScraperSearch>(window, GuiScraperSearch::NEVER_AUTO_ACCEPT, 1);
-    mGrid.setEntry(mSearch, glm::ivec2{0, 5}, true);
+    mGrid.setEntry(mSearch, glm::ivec2{0, 4}, true, true, glm::ivec2{2, 1});
+
+    mResultList = mSearch->getResultList();
+
+    // Set up scroll indicators.
+    mScrollUp = std::make_shared<ImageComponent>(mWindow);
+    mScrollDown = std::make_shared<ImageComponent>(mWindow);
+    mScrollIndicator =
+        std::make_shared<ScrollIndicatorComponent>(mResultList, mScrollUp, mScrollDown);
+
+    mScrollUp->setResize(0.0f, mGameName->getFont()->getLetterHeight() / 2.0f);
+    mScrollUp->setOrigin(0.0f, -0.35f);
+
+    mScrollDown->setResize(0.0f, mGameName->getFont()->getLetterHeight() / 2.0f);
+    mScrollDown->setOrigin(0.0f, 0.35f);
+
+    mGrid.setEntry(mScrollUp, glm::ivec2{1, 0}, false, false, glm::ivec2{1, 1});
+    mGrid.setEntry(mScrollDown, glm::ivec2{1, 1}, false, false, glm::ivec2{1, 1});
 
     // Buttons
     std::vector<std::shared_ptr<ButtonComponent>> buttons;
@@ -74,6 +88,9 @@ GuiGameScraper::GuiGameScraper(Window* window,
         std::make_shared<ButtonComponent>(mWindow, "REFINE SEARCH", "refine search", [&] {
             // Refine the search, unless the result has already been accepted.
             if (!mSearch->getAcceptedResult()) {
+                // Copy any search refine that may have been previously entered by opening
+                // the input screen using the "Y" button shortcut.
+                mSearchParams.nameOverride = mSearch->getNameOverride();
                 mSearch->openInputScreen(mSearchParams);
                 mGrid.resetCursor();
             }
@@ -92,20 +109,34 @@ GuiGameScraper::GuiGameScraper(Window* window,
     }));
     mButtonGrid = makeButtonGrid(mWindow, buttons);
 
-    mGrid.setEntry(mButtonGrid, glm::ivec2{0, 6}, true, false);
+    mGrid.setEntry(mButtonGrid, glm::ivec2{0, 5}, true, false, glm::ivec2{2, 1});
 
     mSearch->setAcceptCallback([this, doneFunc](const ScraperSearchResult& result) {
         doneFunc(result);
         close();
     });
     mSearch->setCancelCallback([&] { delete this; });
+    mSearch->setRefineCallback([&] {
+        mScrollUp->setOpacity(0);
+        mScrollDown->setOpacity(0);
+        mResultList->resetScrollIndicatorStatus();
+    });
 
     // Limit the width of the GUI on ultrawide monitors. The 1.778 aspect ratio value is
     // the 16:9 reference.
     float aspectValue = 1.778f / Renderer::getScreenAspectRatio();
     float width = glm::clamp(0.95f * aspectValue, 0.70f, 0.95f) * Renderer::getScreenWidth();
 
-    setSize(width, Renderer::getScreenHeight() * 0.747f);
+    float height = (mGameName->getFont()->getLetterHeight() +
+                    static_cast<float>(Renderer::getScreenHeight()) * 0.0637f) +
+                   mSystemName->getFont()->getLetterHeight() +
+                   static_cast<float>(Renderer::getScreenHeight()) * 0.04f +
+                   mButtonGrid->getSize().y + Font::get(FONT_SIZE_MEDIUM)->getHeight() * 8.0f;
+
+    // TODO: Temporary hack, see below.
+    height -= 7.0f * Renderer::getScreenHeightModifier();
+
+    setSize(width, height);
     setPosition((Renderer::getScreenWidth() - mSize.x) / 2.0f,
                 (Renderer::getScreenHeight() - mSize.y) / 2.0f);
 
@@ -115,15 +146,31 @@ GuiGameScraper::GuiGameScraper(Window* window,
 
 void GuiGameScraper::onSizeChanged()
 {
+    mGrid.setRowHeightPerc(
+        0, (mGameName->getFont()->getLetterHeight() + Renderer::getScreenHeight() * 0.0637f) /
+               mSize.y / 2.0f);
+    mGrid.setRowHeightPerc(
+        1, (mGameName->getFont()->getLetterHeight() + Renderer::getScreenHeight() * 0.0637f) /
+               mSize.y / 2.0f);
+    mGrid.setRowHeightPerc(2, mSystemName->getFont()->getLetterHeight() / mSize.y, false);
+    mGrid.setRowHeightPerc(3, 0.04f, false);
+    mGrid.setRowHeightPerc(4, ((Font::get(FONT_SIZE_MEDIUM)->getHeight() * 8.0f)) / mSize.y, false);
+
+    // TODO: Replace this temporary hack with a proper solution. There is some kind of rounding
+    // issue somewhere that causes a small alignment error. This code partly compensates for this
+    // at higher resolutions than 1920x1080.
+    if (Renderer::getScreenHeightModifier() > 1.0f)
+        mSize.y -= 3.0f * Renderer::getScreenHeightModifier();
+
+    mGrid.setColWidthPerc(1, 0.04f);
+
+    mGrid.setSize(mSize);
     mBox.fitTo(mSize, glm::vec3{}, glm::vec2{-32.0f, -32.0f});
 
-    mGrid.setRowHeightPerc(0, 0.04f, false);
+    // Add some extra margins to the game name.
-    mGrid.setRowHeightPerc(1, mGameName->getFont()->getLetterHeight() / mSize.y, false);
+    const float newSizeX = mSize.x * 0.96f;
-    mGrid.setRowHeightPerc(2, 0.04f, false);
+    mGameName->setSize(newSizeX, mGameName->getSize().y);
-    mGrid.setRowHeightPerc(3, mSystemName->getFont()->getLetterHeight() / mSize.y, false);
+    mGameName->setPosition((mSize.x - newSizeX) / 2.0f, 0.0f);
-    mGrid.setRowHeightPerc(4, 0.04f, false);
-    mGrid.setRowHeightPerc(6, mButtonGrid->getSize().y / mSize.y, false);
-    mGrid.setSize(mSize);
 }
 
 bool GuiGameScraper::input(InputConfig* config, Input input)

es-app/src/guis/GuiGameScraper.h

@@ -13,6 +13,7 @@
 
 #include "GuiComponent.h"
 #include "components/NinePatchComponent.h"
+#include "components/ScrollIndicatorComponent.h"
 #include "guis/GuiScraperSearch.h"
 
 class GuiGameScraper : public GuiComponent
@@ -38,9 +39,13 @@ private:
     NinePatchComponent mBox;
 
     std::shared_ptr<TextComponent> mGameName;
+    std::shared_ptr<ImageComponent> mScrollUp;
+    std::shared_ptr<ImageComponent> mScrollDown;
+    std::shared_ptr<ScrollIndicatorComponent> mScrollIndicator;
     std::shared_ptr<TextComponent> mSystemName;
     std::shared_ptr<GuiScraperSearch> mSearch;
     std::shared_ptr<ComponentGrid> mButtonGrid;
+    std::shared_ptr<ComponentList> mResultList;
 
     ScraperSearchParams mSearchParams;
 

es-app/src/guis/GuiGamelistFilter.cpp

@@ -11,9 +11,11 @@
 #include "guis/GuiGamelistFilter.h"
 
 #include "SystemData.h"
+#include "components/BadgeComponent.h"
 #include "components/OptionListComponent.h"
 #include "guis/GuiTextEditKeyboardPopup.h"
 #include "guis/GuiTextEditPopup.h"
+#include "utils/StringUtil.h"
 #include "views/UIModeController.h"
 #include "views/ViewController.h"
 
@@ -185,8 +187,21 @@ void GuiGamelistFilter::addFiltersToMenu()
             optionList->setOverrideMultiText("NOTHING TO FILTER");
         }
 
-        for (auto it : *allKeys)
+        if (type == CONTROLLER_FILTER) {
-            optionList->add(it.first, it.first, mFilterIndex->isKeyBeingFilteredBy(it.first, type));
+            for (auto it : *allKeys) {
+                std::string displayName =
+                    BadgeComponent::getDisplayName(Utils::String::toLower(it.first));
+                if (displayName == "unknown")
+                    displayName = it.first;
+                optionList->add(displayName, it.first,
+                                mFilterIndex->isKeyBeingFilteredBy(it.first, type));
+            }
+        }
+        else {
+            for (auto it : *allKeys)
+                optionList->add(it.first, it.first,
+                                mFilterIndex->isKeyBeingFilteredBy(it.first, type));
+        }
 
         if (allKeys->size() == 0)
             optionList->add("", "", false);

es-app/src/guis/GuiMenu.cpp

@@ -61,7 +61,7 @@ GuiMenu::GuiMenu(Window* window)
     if (isFullUI)
         addEntry("OTHER SETTINGS", 0x777777FF, true, [this] { openOtherOptions(); });
 
-    // TEMPORARY - disabled for now, will be used in the future.
+    // TEMPORARY: Disabled for now, will be used in the future.
     //    if (isFullUI)
     //        addEntry("UTILITIES", 0x777777FF, true, [this] {
     //                openUtilitiesMenu(); });
@@ -593,6 +593,7 @@ void GuiMenu::openUIOptions()
         }
     });
 
+    s->setSize(mSize);
     mWindow->pushGui(s);
 }
 
@@ -600,8 +601,8 @@ void GuiMenu::openSoundOptions()
 {
     auto s = new GuiSettings(mWindow, "SOUND SETTINGS");
 
-// TEMPORARY - Hide the volume slider on macOS and BSD Unix until the volume control logic
+// TODO: Hide the volume slider on macOS and BSD Unix until the volume control logic has been
-// has been implemented for these operating systems.
+// implemented for these operating systems.
 #if !defined(__APPLE__) && !defined(__FreeBSD__) && !defined(__OpenBSD__) && !defined(__NetBSD__)
     // System volume.
     auto system_volume = std::make_shared<SliderComponent>(mWindow, 0.f, 100.f, 1.f, "%");
@@ -700,6 +701,7 @@ void GuiMenu::openSoundOptions()
         });
     }
 
+    s->setSize(mSize);
     mWindow->pushGui(s);
 }
 
@@ -756,6 +758,7 @@ void GuiMenu::openInputDeviceOptions()
     configure_input_row.makeAcceptInputHandler(std::bind(&GuiMenu::openConfigInput, this, s));
     s->addRow(configure_input_row);
 
+    s->setSize(mSize);
     mWindow->pushGui(s);
 }
 
@@ -1043,6 +1046,17 @@ void GuiMenu::openOtherOptions()
         }
     });
 
+    // Whether to preload the gamelists on application startup.
+    auto preloadGamelists = std::make_shared<SwitchComponent>(mWindow);
+    preloadGamelists->setState(Settings::getInstance()->getBool("PreloadGamelists"));
+    s->addWithLabel("PRELOAD GAMELISTS ON STARTUP", preloadGamelists);
+    s->addSaveFunc([preloadGamelists, s] {
+        if (preloadGamelists->getState() != Settings::getInstance()->getBool("PreloadGamelists")) {
+            Settings::getInstance()->setBool("PreloadGamelists", preloadGamelists->getState());
+            s->setNeedsSaving();
+        }
+    });
+
     // Whether to enable alternative emulators per game (the option to disable this is intended
     // primarily for testing purposes).
     auto alternativeEmulatorPerGame = std::make_shared<SwitchComponent>(mWindow);
@@ -1180,12 +1194,14 @@ void GuiMenu::openOtherOptions()
     run_in_background->setCallback(launchWorkaroundToggleFunc);
 #endif
 
+    s->setSize(mSize);
     mWindow->pushGui(s);
 }
 
 void GuiMenu::openUtilitiesMenu()
 {
     auto s = new GuiSettings(mWindow, "UTILITIES");
+    s->setSize(mSize);
     mWindow->pushGui(s);
 }
 
@@ -1207,11 +1223,6 @@ void GuiMenu::openQuitMenu()
         Window* window = mWindow;
         HelpStyle style = getHelpStyle();
 
-        // This transparent bracket is only neeeded to generate the correct help prompts.
-        auto bracket = std::make_shared<ImageComponent>(mWindow);
-        bracket->setImage(":/graphics/arrow.svg");
-        bracket->setOpacity(0);
-
         ComponentListRow row;
 
         row.makeAcceptInputHandler([window, this] {
@@ -1224,10 +1235,10 @@ void GuiMenu::openQuitMenu()
                 },
                 "NO", nullptr));
         });
-        row.addElement(std::make_shared<TextComponent>(window, "QUIT EMULATIONSTATION",
+        auto quitText = std::make_shared<TextComponent>(window, "QUIT EMULATIONSTATION",
-                                                       Font::get(FONT_SIZE_MEDIUM), 0x777777FF),
+                                                        Font::get(FONT_SIZE_MEDIUM), 0x777777FF);
-                       true);
+        quitText->setSelectable(true);
-        row.addElement(bracket, false);
+        row.addElement(quitText, true);
         s->addRow(row);
 
         row.elements.clear();
@@ -1243,10 +1254,10 @@ void GuiMenu::openQuitMenu()
                 },
                 "NO", nullptr));
         });
-        row.addElement(std::make_shared<TextComponent>(window, "REBOOT SYSTEM",
+        auto rebootText = std::make_shared<TextComponent>(window, "REBOOT SYSTEM",
-                                                       Font::get(FONT_SIZE_MEDIUM), 0x777777FF),
+                                                          Font::get(FONT_SIZE_MEDIUM), 0x777777FF);
-                       true);
+        rebootText->setSelectable(true);
-        row.addElement(bracket, false);
+        row.addElement(rebootText, true);
         s->addRow(row);
 
         row.elements.clear();
@@ -1262,12 +1273,13 @@ void GuiMenu::openQuitMenu()
                 },
                 "NO", nullptr));
         });
-        row.addElement(std::make_shared<TextComponent>(window, "POWER OFF SYSTEM",
+        auto powerOffText = std::make_shared<TextComponent>(
-                                                       Font::get(FONT_SIZE_MEDIUM), 0x777777FF),
+            window, "POWER OFF SYSTEM", Font::get(FONT_SIZE_MEDIUM), 0x777777FF);
-                       true);
+        powerOffText->setSelectable(true);
-        row.addElement(bracket, false);
+        row.addElement(powerOffText, true);
         s->addRow(row);
 
+        s->setSize(mSize);
         mWindow->pushGui(s);
     }
 }

es-app/src/guis/GuiMetaDataEd.cpp

@@ -43,7 +43,7 @@ GuiMetaDataEd::GuiMetaDataEd(Window* window,
                              std::function<void()> deleteGameFunc)
     : GuiComponent{window}
     , mBackground{window, ":/graphics/frame.svg"}
-    , mGrid{window, glm::ivec2{3, 6}}
+    , mGrid{window, glm::ivec2{2, 6}}
     , mScraperParams{scraperParams}
     , mMetaDataDecl{mdd}
     , mMetaData{md}
@@ -53,12 +53,18 @@ GuiMetaDataEd::GuiMetaDataEd(Window* window,
     , mMediaFilesUpdated{false}
     , mInvalidEmulatorEntry{false}
 {
+    mControllerBadges = BadgeComponent::getGameControllers();
+
+    // Remove the last "unknown" controller entry.
+    if (mControllerBadges.size() > 1)
+        mControllerBadges.pop_back();
+
     addChild(&mBackground);
     addChild(&mGrid);
 
     mTitle = std::make_shared<TextComponent>(mWindow, "EDIT METADATA", Font::get(FONT_SIZE_LARGE),
                                              0x555555FF, ALIGN_CENTER);
-    mGrid.setEntry(mTitle, glm::ivec2{0, 0}, false, true, glm::ivec2{3, 2});
+    mGrid.setEntry(mTitle, glm::ivec2{0, 0}, false, true, glm::ivec2{2, 2});
 
     // Extract possible subfolders from the path.
     std::string folderPath =
@@ -80,13 +86,12 @@ GuiMetaDataEd::GuiMetaDataEd(Window* window,
         folderPath + Utils::FileSystem::getFileName(scraperParams.game->getPath()) + " [" +
             Utils::String::toUpper(scraperParams.system->getName()) + "]" +
             (scraperParams.game->getType() == FOLDER ? "  " + ViewController::FOLDER_CHAR : ""),
-        Font::get(FONT_SIZE_SMALL), 0x777777FF, ALIGN_CENTER, glm::vec3{}, glm::vec2{}, 0x00000000,
+        Font::get(FONT_SIZE_SMALL), 0x777777FF, ALIGN_CENTER);
-        0.05f);
 
-    mGrid.setEntry(mSubtitle, glm::ivec2{0, 2}, false, true, glm::ivec2{3, 1});
+    mGrid.setEntry(mSubtitle, glm::ivec2{0, 2}, false, true, glm::ivec2{2, 1});
 
     mList = std::make_shared<ComponentList>(mWindow);
-    mGrid.setEntry(mList, glm::ivec2{0, 4}, true, true, glm::ivec2{3, 1});
+    mGrid.setEntry(mList, glm::ivec2{0, 4}, true, true, glm::ivec2{2, 1});
 
     // Set up scroll indicators.
     mScrollUp = std::make_shared<ImageComponent>(mWindow);
@@ -99,8 +104,8 @@ GuiMetaDataEd::GuiMetaDataEd(Window* window,
     mScrollDown->setResize(0.0f, mTitle->getFont()->getLetterHeight() / 2.0f);
     mScrollDown->setOrigin(0.0f, 0.35f);
 
-    mGrid.setEntry(mScrollUp, glm::ivec2{2, 0}, false, false, glm::ivec2{1, 1});
+    mGrid.setEntry(mScrollUp, glm::ivec2{1, 0}, false, false, glm::ivec2{1, 1});
-    mGrid.setEntry(mScrollDown, glm::ivec2{2, 1}, false, false, glm::ivec2{1, 1});
+    mGrid.setEntry(mScrollDown, glm::ivec2{1, 1}, false, false, glm::ivec2{1, 1});
 
     // Populate list.
     for (auto iter = mdd.cbegin(); iter != mdd.cend(); iter++) {
@@ -138,8 +143,7 @@ GuiMetaDataEd::GuiMetaDataEd(Window* window,
                 ed = std::make_shared<SwitchComponent>(window);
                 // Make the switches slightly smaller.
                 glm::vec2 switchSize{ed->getSize() * 0.9f};
-                ed->setResize(switchSize.x, switchSize.y);
+                ed->setResize(ceilf(switchSize.x), switchSize.y);
-                ed->setOrigin(-0.05f, -0.09f);
 
                 ed->setChangedColor(ICONCOLOR_USERMARKED);
                 row.addElement(ed, false, true);
@@ -176,6 +180,88 @@ GuiMetaDataEd::GuiMetaDataEd(Window* window,
                                               std::placeholders::_2);
                 break;
             }
+            case MD_CONTROLLER: {
+                ed = std::make_shared<TextComponent>(window, "",
+                                                     Font::get(FONT_SIZE_SMALL, FONT_PATH_LIGHT),
+                                                     0x777777FF, ALIGN_RIGHT);
+                row.addElement(ed, true);
+
+                auto spacer = std::make_shared<GuiComponent>(mWindow);
+                spacer->setSize(Renderer::getScreenWidth() * 0.005f, 0.0f);
+                row.addElement(spacer, false);
+
+                auto bracket = std::make_shared<ImageComponent>(mWindow);
+                bracket->setImage(":/graphics/arrow.svg");
+                bracket->setResize(glm::vec2{0.0f, lbl->getFont()->getLetterHeight()});
+                row.addElement(bracket, false);
+
+                const std::string title = iter->displayPrompt;
+
+                // OK callback (apply new value to ed).
+                auto updateVal = [ed, originalValue](const std::string& newVal) {
+                    ed->setValue(newVal);
+                    if (newVal == BadgeComponent::getDisplayName(originalValue))
+                        ed->setColor(DEFAULT_TEXTCOLOR);
+                    else
+                        ed->setColor(TEXTCOLOR_USERMARKED);
+                };
+
+                row.makeAcceptInputHandler([this, title, ed, updateVal] {
+                    GuiSettings* s = new GuiSettings(mWindow, title);
+
+                    for (auto controller : mControllerBadges) {
+                        std::string selectedLabel = ed->getValue();
+                        std::string label;
+                        ComponentListRow row;
+
+                        std::shared_ptr<TextComponent> labelText = std::make_shared<TextComponent>(
+                            mWindow, label, Font::get(FONT_SIZE_MEDIUM), 0x777777FF);
+                        labelText->setSelectable(true);
+                        labelText->setValue(controller.displayName);
+
+                        label = controller.displayName;
+
+                        row.addElement(labelText, true);
+
+                        row.makeAcceptInputHandler([s, updateVal, controller] {
+                            updateVal(controller.displayName);
+                            delete s;
+                        });
+
+                        // Select the row that corresponds to the selected label.
+                        if (selectedLabel == label)
+                            s->addRow(row, true);
+                        else
+                            s->addRow(row, false);
+                    }
+
+                    // If a value is set, then display "Clear entry" as the last entry.
+                    if (ed->getValue() != "") {
+                        ComponentListRow row;
+                        std::shared_ptr<TextComponent> clearText = std::make_shared<TextComponent>(
+                            mWindow, ViewController::CROSSEDCIRCLE_CHAR + " CLEAR ENTRY",
+                            Font::get(FONT_SIZE_MEDIUM), 0x777777FF);
+                        clearText->setSelectable(true);
+                        row.addElement(clearText, true);
+                        row.makeAcceptInputHandler([s, ed] {
+                            ed->setValue("");
+                            delete s;
+                        });
+                        s->addRow(row, false);
+                    }
+
+                    float aspectValue = 1.778f / Renderer::getScreenAspectRatio();
+                    float maxWidthModifier = glm::clamp(0.64f * aspectValue, 0.42f, 0.92f);
+                    float maxWidth =
+                        static_cast<float>(Renderer::getScreenWidth()) * maxWidthModifier;
+
+                    s->setMenuSize(glm::vec2{maxWidth, s->getMenuSize().y});
+                    s->setMenuPosition(
+                        glm::vec3{(s->getSize().x - maxWidth) / 2.0f, mPosition.y, mPosition.z});
+                    mWindow->pushGui(s);
+                });
+                break;
+            }
             case MD_ALT_EMULATOR: {
                 mInvalidEmulatorEntry = false;
 
@@ -248,6 +334,11 @@ GuiMetaDataEd::GuiMetaDataEd(Window* window,
                                 "", ViewController::CROSSEDCIRCLE_CHAR + " CLEAR ENTRY"));
 
                         for (auto entry : launchCommands) {
+                            if (mInvalidEmulatorEntry && singleEntry &&
+                                entry.second !=
+                                    ViewController::EXCLAMATION_CHAR + " " + originalValue)
+                                continue;
+
                             std::string selectedLabel = ed->getValue();
                             std::string label;
                             ComponentListRow row;
@@ -260,6 +351,7 @@ GuiMetaDataEd::GuiMetaDataEd(Window* window,
                             std::shared_ptr<TextComponent> labelText =
                                 std::make_shared<TextComponent>(
                                     mWindow, label, Font::get(FONT_SIZE_MEDIUM), 0x777777FF);
+                            labelText->setSelectable(true);
 
                             if (scraperParams.system->getAlternativeEmulator() == "" &&
                                 scraperParams.system->getSystemEnvData()
@@ -284,14 +376,6 @@ GuiMetaDataEd::GuiMetaDataEd(Window* window,
                                     delete s;
                                 });
 
-                            // This transparent bracket is only added to generate the correct help
-                            // prompts.
-                            auto bracket = std::make_shared<ImageComponent>(mWindow);
-                            bracket->setImage(":/graphics/arrow.svg");
-                            bracket->setOpacity(0);
-                            bracket->setSize(bracket->getSize() / 3.0f);
-                            row.addElement(bracket, false);
-
                             // Select the row that corresponds to the selected label.
                             if (selectedLabel == label)
                                 s->addRow(row, true);
@@ -299,23 +383,14 @@ GuiMetaDataEd::GuiMetaDataEd(Window* window,
                                 s->addRow(row, false);
                         }
 
-                        // Adjust the width depending on the aspect ratio of the screen, to make the
-                        // screen look somewhat coherent regardless of screen type. The 1.778 aspect
-                        // ratio value is the 16:9 reference.
                         float aspectValue = 1.778f / Renderer::getScreenAspectRatio();
-
                         float maxWidthModifier = glm::clamp(0.64f * aspectValue, 0.42f, 0.92f);
                         float maxWidth =
                             static_cast<float>(Renderer::getScreenWidth()) * maxWidthModifier;
 
                         s->setMenuSize(glm::vec2{maxWidth, s->getMenuSize().y});
-
+                        s->setMenuPosition(glm::vec3{(s->getSize().x - maxWidth) / 2.0f,
-                        auto menuSize = s->getMenuSize();
+                                                     mPosition.y, mPosition.z});
-                        auto menuPos = s->getMenuPosition();
-
-                        s->setMenuPosition(glm::vec3{(s->getSize().x - menuSize.x) / 2.0f,
-                                                     (s->getSize().y - menuSize.y) / 3.0f,
-                                                     menuPos.z});
                         mWindow->pushGui(s);
                     });
                 }
@@ -398,10 +473,19 @@ GuiMetaDataEd::GuiMetaDataEd(Window* window,
         assert(ed);
         mList->addRow(row);
 
-        if (iter->type == MD_ALT_EMULATOR && mInvalidEmulatorEntry == true)
+        if (iter->type == MD_ALT_EMULATOR && mInvalidEmulatorEntry == true) {
             ed->setValue(ViewController::EXCLAMATION_CHAR + " " + originalValue);
-        else
+        }
+        else if (iter->type == MD_CONTROLLER && mMetaData->get(iter->key) != "") {
+            std::string displayName = BadgeComponent::getDisplayName(mMetaData->get(iter->key));
+            if (displayName != "unknown")
+                ed->setValue(displayName);
+            else
+                ed->setValue(ViewController::EXCLAMATION_CHAR + " " + mMetaData->get(iter->key));
+        }
+        else {
             ed->setValue(mMetaData->get(iter->key));
+        }
 
         mEditors.push_back(ed);
     }
@@ -476,7 +560,7 @@ GuiMetaDataEd::GuiMetaDataEd(Window* window,
     }
 
     mButtons = makeButtonGrid(mWindow, buttons);
-    mGrid.setEntry(mButtons, glm::ivec2{0, 5}, true, false, glm::ivec2{3, 1});
+    mGrid.setEntry(mButtons, glm::ivec2{0, 5}, true, false, glm::ivec2{2, 1});
 
     // Resize + center.
     float width =
@@ -500,14 +584,18 @@ void GuiMetaDataEd::onSizeChanged()
     mGrid.setRowHeightPerc(3, (titleSubtitleSpacing * 1.2f) / mSize.y);
     mGrid.setRowHeightPerc(4, ((mList->getRowHeight(0) * 10.0f) + 2.0f) / mSize.y);
 
-    mGrid.setColWidthPerc(0, 0.07f);
+    mGrid.setColWidthPerc(1, 0.055f);
-    mGrid.setColWidthPerc(2, 0.07f);
 
     mGrid.setSize(mSize);
     mBackground.fitTo(mSize, glm::vec3{}, glm::vec2{-32.0f, -32.0f});
 
     setPosition((Renderer::getScreenWidth() - mSize.x) / 2.0f,
                 (Renderer::getScreenHeight() - mSize.y) / 2.0f);
+
+    // Add some extra margins to the file/folder name.
+    const float newSizeX = mSize.x * 0.96f;
+    mSubtitle->setSize(newSizeX, mSubtitle->getSize().y);
+    mSubtitle->setPosition((mSize.x - newSizeX) / 2.0f, mSubtitle->getPosition().y);
 }
 
 void GuiMetaDataEd::save()
@@ -528,6 +616,13 @@ void GuiMetaDataEd::save()
         if (mMetaDataDecl.at(i).key == "altemulator" && mInvalidEmulatorEntry == true)
             continue;
 
+        if (mMetaDataDecl.at(i).key == "controller" && mEditors.at(i)->getValue() != "") {
+            std::string shortName = BadgeComponent::getShortName(mEditors.at(i)->getValue());
+            if (shortName != "unknown")
+                mMetaData->set(mMetaDataDecl.at(i).key, shortName);
+            continue;
+        }
+
         if (!showHiddenGames && mMetaDataDecl.at(i).key == "hidden" &&
             mEditors.at(i)->getValue() != mMetaData->get("hidden"))
             hideGameWhileHidden = true;
@@ -672,6 +767,12 @@ void GuiMetaDataEd::close()
         if (key == "altemulator" && mInvalidEmulatorEntry == true)
             continue;
 
+        if (mMetaDataDecl.at(i).key == "controller" && mEditors.at(i)->getValue() != "") {
+            std::string shortName = BadgeComponent::getShortName(mEditors.at(i)->getValue());
+            if (shortName == "unknown" || mMetaDataValue == shortName)
+                continue;
+        }
+
         if (mMetaDataValue != mEditorsValue) {
             metadataUpdated = true;
             break;

es-app/src/guis/GuiMetaDataEd.h

@@ -13,6 +13,7 @@
 
 #include "GuiComponent.h"
 #include "MetaData.h"
+#include "components/BadgeComponent.h"
 #include "components/ComponentGrid.h"
 #include "components/NinePatchComponent.h"
 #include "components/ScrollIndicatorComponent.h"
@@ -60,6 +61,7 @@ private:
 
     ScraperSearchParams mScraperParams;
 
+    std::vector<GameControllers> mControllerBadges;
     std::vector<std::shared_ptr<GuiComponent>> mEditors;
 
     std::vector<MetaDataDecl> mMetaDataDecl;

es-app/src/guis/GuiScraperMulti.cpp

@@ -28,7 +28,7 @@ GuiScraperMulti::GuiScraperMulti(Window* window,
                                  bool approveResults)
     : GuiComponent(window)
     , mBackground(window, ":/graphics/frame.svg")
-    , mGrid(window, glm::ivec2{1, 5})
+    , mGrid(window, glm::ivec2{2, 6})
     , mSearchQueue(searches)
     , mApproveResults(approveResults)
 {
@@ -47,15 +47,15 @@ GuiScraperMulti::GuiScraperMulti(Window* window,
     // Set up grid.
     mTitle = std::make_shared<TextComponent>(mWindow, "SCRAPING IN PROGRESS",
                                              Font::get(FONT_SIZE_LARGE), 0x555555FF, ALIGN_CENTER);
-    mGrid.setEntry(mTitle, glm::ivec2{0, 0}, false, true);
+    mGrid.setEntry(mTitle, glm::ivec2{0, 0}, false, true, glm::ivec2{2, 2});
 
     mSystem = std::make_shared<TextComponent>(mWindow, "SYSTEM", Font::get(FONT_SIZE_MEDIUM),
                                               0x777777FF, ALIGN_CENTER);
-    mGrid.setEntry(mSystem, glm::ivec2{0, 1}, false, true);
+    mGrid.setEntry(mSystem, glm::ivec2{0, 2}, false, true, glm::ivec2{2, 1});
 
     mSubtitle = std::make_shared<TextComponent>(
         mWindow, "subtitle text", Font::get(FONT_SIZE_SMALL), 0x888888FF, ALIGN_CENTER);
-    mGrid.setEntry(mSubtitle, glm::ivec2{0, 2}, false, true);
+    mGrid.setEntry(mSubtitle, glm::ivec2{0, 3}, false, true, glm::ivec2{2, 1});
 
     if (mApproveResults && !Settings::getInstance()->getBool("ScraperSemiautomatic"))
         mSearchComp = std::make_shared<GuiScraperSearch>(
@@ -70,10 +70,34 @@ GuiScraperMulti::GuiScraperMulti(Window* window,
         std::bind(&GuiScraperMulti::acceptResult, this, std::placeholders::_1));
     mSearchComp->setSkipCallback(std::bind(&GuiScraperMulti::skip, this));
     mSearchComp->setCancelCallback(std::bind(&GuiScraperMulti::finish, this));
-    mGrid.setEntry(mSearchComp, glm::ivec2{0, 3},
+    mSearchComp->setRefineCallback([&] {
-                   mSearchComp->getSearchType() != GuiScraperSearch::ALWAYS_ACCEPT_FIRST_RESULT,
+        mScrollUp->setOpacity(0);
-                   true);
+        mScrollDown->setOpacity(0);
+        mResultList->resetScrollIndicatorStatus();
+    });
 
+    mGrid.setEntry(mSearchComp, glm::ivec2{0, 4},
+                   mSearchComp->getSearchType() != GuiScraperSearch::ALWAYS_ACCEPT_FIRST_RESULT,
+                   true, glm::ivec2{2, 1});
+
+    mResultList = mSearchComp->getResultList();
+
+    // Set up scroll indicators.
+    mScrollUp = std::make_shared<ImageComponent>(mWindow);
+    mScrollDown = std::make_shared<ImageComponent>(mWindow);
+    mScrollIndicator =
+        std::make_shared<ScrollIndicatorComponent>(mResultList, mScrollUp, mScrollDown);
+
+    mScrollUp->setResize(0.0f, mTitle->getFont()->getLetterHeight() / 2.0f);
+    mScrollUp->setOrigin(0.0f, -0.35f);
+
+    mScrollDown->setResize(0.0f, mTitle->getFont()->getLetterHeight() / 2.0f);
+    mScrollDown->setOrigin(0.0f, 0.35f);
+
+    mGrid.setEntry(mScrollUp, glm::ivec2{1, 0}, false, false, glm::ivec2{1, 1});
+    mGrid.setEntry(mScrollDown, glm::ivec2{1, 1}, false, false, glm::ivec2{1, 1});
+
+    // Buttons.
     std::vector<std::shared_ptr<ButtonComponent>> buttons;
 
     if (mApproveResults) {
@@ -125,14 +149,23 @@ GuiScraperMulti::GuiScraperMulti(Window* window,
                                                         std::bind(&GuiScraperMulti::finish, this)));
 
     mButtonGrid = makeButtonGrid(mWindow, buttons);
-    mGrid.setEntry(mButtonGrid, glm::ivec2{0, 4}, true, false);
+    mGrid.setEntry(mButtonGrid, glm::ivec2{0, 5}, true, false, glm::ivec2{2, 1});
 
     // Limit the width of the GUI on ultrawide monitors. The 1.778 aspect ratio value is
     // the 16:9 reference.
     float aspectValue = 1.778f / Renderer::getScreenAspectRatio();
     float width = glm::clamp(0.95f * aspectValue, 0.70f, 0.95f) * Renderer::getScreenWidth();
 
-    setSize(width, Renderer::getScreenHeight() * 0.849f);
+    float height = (mTitle->getFont()->getLetterHeight() +
+                    static_cast<float>(Renderer::getScreenHeight()) * 0.0637f) +
+                   mSystem->getFont()->getLetterHeight() +
+                   mSubtitle->getFont()->getHeight() * 1.75f + mButtonGrid->getSize().y +
+                   Font::get(FONT_SIZE_MEDIUM)->getHeight() * 7.0f;
+
+    // TODO: Temporary hack, see below.
+    height -= 7.0f * Renderer::getScreenHeightModifier();
+
+    setSize(width, height);
     setPosition((Renderer::getScreenWidth() - mSize.x) / 2.0f,
                 (Renderer::getScreenHeight() - mSize.y) / 2.0f);
 
@@ -153,13 +186,26 @@ GuiScraperMulti::~GuiScraperMulti()
 
 void GuiScraperMulti::onSizeChanged()
 {
-    mBackground.fitTo(mSize, glm::vec3{}, glm::vec2{-32.0f, -32.0f});
+    mGrid.setRowHeightPerc(
+        0, (mTitle->getFont()->getLetterHeight() + Renderer::getScreenHeight() * 0.0637f) /
+               mSize.y / 2.0f);
+    mGrid.setRowHeightPerc(
+        1, (mTitle->getFont()->getLetterHeight() + Renderer::getScreenHeight() * 0.0637f) /
+               mSize.y / 2.0f);
+    mGrid.setRowHeightPerc(2, (mSystem->getFont()->getLetterHeight()) / mSize.y, false);
+    mGrid.setRowHeightPerc(3, mSubtitle->getFont()->getHeight() * 1.75f / mSize.y, false);
+    mGrid.setRowHeightPerc(4, ((Font::get(FONT_SIZE_MEDIUM)->getHeight() * 7.0f)) / mSize.y, false);
+
+    // TODO: Replace this temporary hack with a proper solution. There is some kind of rounding
+    // issue somewhere that causes a small alignment error. This code partly compensates for this
+    // at higher resolutions than 1920x1080.
+    if (Renderer::getScreenHeightModifier() > 1.0f)
+        mSize.y -= 3.0f * Renderer::getScreenHeightModifier();
+
+    mGrid.setColWidthPerc(1, 0.04f);
 
-    mGrid.setRowHeightPerc(0, mTitle->getFont()->getLetterHeight() * 1.9725f / mSize.y, false);
-    mGrid.setRowHeightPerc(1, (mSystem->getFont()->getLetterHeight() + 2.0f) / mSize.y, false);
-    mGrid.setRowHeightPerc(2, mSubtitle->getFont()->getHeight() * 1.75f / mSize.y, false);
-    mGrid.setRowHeightPerc(4, mButtonGrid->getSize().y / mSize.y, false);
     mGrid.setSize(mSize);
+    mBackground.fitTo(mSize, glm::vec3{}, glm::vec2{-32.0f, -32.0f});
 }
 
 void GuiScraperMulti::doNextSearch()
@@ -189,6 +235,10 @@ void GuiScraperMulti::doNextSearch()
             scrapeName = Utils::FileSystem::getFileName(mSearchQueue.front().game->getPath());
     }
 
+    mScrollUp->setOpacity(0);
+    mScrollDown->setOpacity(0);
+    mResultList->resetScrollIndicatorStatus();
+
     // Extract possible subfolders from the path.
     std::string folderPath =
         Utils::String::replace(Utils::FileSystem::getParent(mSearchQueue.front().game->getPath()),
@@ -264,9 +314,6 @@ void GuiScraperMulti::finish()
 std::vector<HelpPrompt> GuiScraperMulti::getHelpPrompts()
 {
     std::vector<HelpPrompt> prompts = mGrid.getHelpPrompts();
-    // Remove the 'Choose' entry if in fully automatic mode.
-    if (!mApproveResults)
-        prompts.pop_back();
     return prompts;
 }
 

es-app/src/guis/GuiScraperMulti.h

@@ -16,6 +16,7 @@
 #include "MetaData.h"
 #include "components/ComponentGrid.h"
 #include "components/NinePatchComponent.h"
+#include "components/ScrollIndicatorComponent.h"
 #include "scrapers/Scraper.h"
 
 class GuiScraperSearch;
@@ -45,10 +46,14 @@ private:
     ComponentGrid mGrid;
 
     std::shared_ptr<TextComponent> mTitle;
+    std::shared_ptr<ImageComponent> mScrollUp;
+    std::shared_ptr<ImageComponent> mScrollDown;
+    std::shared_ptr<ScrollIndicatorComponent> mScrollIndicator;
     std::shared_ptr<TextComponent> mSystem;
     std::shared_ptr<TextComponent> mSubtitle;
     std::shared_ptr<GuiScraperSearch> mSearchComp;
     std::shared_ptr<ComponentGrid> mButtonGrid;
+    std::shared_ptr<ComponentList> mResultList;
 
     std::queue<ScraperSearchParams> mSearchQueue;
     std::vector<MetaDataDecl> mMetaDataDecl;

es-app/src/guis/GuiScraperSearch.cpp

@@ -39,7 +39,7 @@
 
 GuiScraperSearch::GuiScraperSearch(Window* window, SearchType type, unsigned int scrapeCount)
     : GuiComponent(window)
-    , mGrid(window, glm::ivec2{4, 3})
+    , mGrid(window, glm::ivec2{5, 3})
     , mSearchType(type)
     , mScrapeCount(scrapeCount)
     , mRefinedSearch(false)
@@ -88,14 +88,11 @@ GuiScraperSearch::GuiScraperSearch(Window* window, SearchType type, unsigned int
     mMD_ReleaseDate = std::make_shared<DateTimeEditComponent>(mWindow);
     mMD_ReleaseDate->setColor(mdColor);
     mMD_ReleaseDate->setUppercase(true);
-    mMD_Developer = std::make_shared<TextComponent>(mWindow, "", font, mdColor, ALIGN_LEFT,
+    mMD_Developer = std::make_shared<TextComponent>(mWindow, "", font, mdColor, ALIGN_LEFT);
-                                                    glm::vec3{}, glm::vec2{}, 0x00000000, 0.02f);
+    mMD_Publisher = std::make_shared<TextComponent>(mWindow, "", font, mdColor, ALIGN_LEFT);
-    mMD_Publisher = std::make_shared<TextComponent>(mWindow, "", font, mdColor, ALIGN_LEFT,
+    mMD_Genre =
-                                                    glm::vec3{}, glm::vec2{}, 0x00000000, 0.02f);
+        std::make_shared<TextComponent>(mWindow, "", font, mdColor, ALIGN_LEFT, glm::vec3{});
-    mMD_Genre = std::make_shared<TextComponent>(mWindow, "", font, mdColor, ALIGN_LEFT, glm::vec3{},
+    mMD_Players = std::make_shared<TextComponent>(mWindow, "", font, mdColor, ALIGN_LEFT);
-                                                glm::vec2{}, 0x00000000, 0.02f);
-    mMD_Players = std::make_shared<TextComponent>(mWindow, "", font, mdColor, ALIGN_LEFT,
-                                                  glm::vec3{}, glm::vec2{}, 0x00000000, 0.02f);
     mMD_Filler = std::make_shared<TextComponent>(mWindow, "", font, mdColor);
 
     if (Settings::getInstance()->getString("Scraper") != "thegamesdb")
@@ -193,45 +190,47 @@ void GuiScraperSearch::onSizeChanged()
     mGrid.setColWidthPerc(1, 0.25f);
 
     if (mSearchType == ALWAYS_ACCEPT_FIRST_RESULT)
-        mGrid.setColWidthPerc(2, 0.25f);
+        mGrid.setColWidthPerc(2, 0.33f);
     else
-        mGrid.setColWidthPerc(2, 0.28f);
+        mGrid.setColWidthPerc(2, 0.30f);
 
     // Row heights.
     if (mSearchType == ALWAYS_ACCEPT_FIRST_RESULT) // Show name.
         mGrid.setRowHeightPerc(0, (mResultName->getFont()->getHeight() * 1.6f) /
                                       mGrid.getSize().y); // Result name.
     else
-        mGrid.setRowHeightPerc(0, 0.0825f); // Hide name but do padding.
+        mGrid.setRowHeightPerc(0, 0.0725f); // Hide name but do padding.
 
     if (mSearchType == ALWAYS_ACCEPT_FIRST_RESULT)
         mGrid.setRowHeightPerc(2, 0.2f);
     else
         mGrid.setRowHeightPerc(1, 0.505f);
 
-    const float boxartCellScale = 0.9f;
+    const float thumbnailCellScale = 0.93f;
 
     // Limit thumbnail size using setMaxHeight - we do this instead of letting mGrid
     // call setSize because it maintains the aspect ratio.
     // We also pad a little so it doesn't rub up against the metadata labels.
-    mResultThumbnail->setMaxSize(mGrid.getColWidth(1) * boxartCellScale, mGrid.getRowHeight(1));
+    mResultThumbnail->setMaxSize(mGrid.getColWidth(1) * thumbnailCellScale, mGrid.getRowHeight(1));
 
     // Metadata.
     resizeMetadata();
 
+    // Small vertical spacer between the metadata fields and the result list.
+    mGrid.setColWidthPerc(3, 0.004f);
+
     if (mSearchType != ALWAYS_ACCEPT_FIRST_RESULT)
-        mDescContainer->setSize(mGrid.getColWidth(1) * boxartCellScale + mGrid.getColWidth(2),
+        mDescContainer->setSize(mGrid.getColWidth(1) * thumbnailCellScale + mGrid.getColWidth(2),
                                 mResultDesc->getFont()->getHeight() * 3.0f);
     else
-        mDescContainer->setSize(mGrid.getColWidth(3) * boxartCellScale,
+        mDescContainer->setSize(mGrid.getColWidth(4) * thumbnailCellScale,
-                                mResultDesc->getFont()->getHeight() * 6.0f);
+                                mResultDesc->getFont()->getHeight() * 8.0f);
 
     // Make description text wrap at edge of container.
     mResultDesc->setSize(mDescContainer->getSize().x, 0.0f);
 
     // Set the width of mResultName to the cell width so that text abbreviation will work correctly.
-    glm::vec2 resultNameSize{mResultName->getSize()};
+    mResultName->setSize(mGrid.getColWidth(1) + mGrid.getColWidth(2), mResultName->getSize().y);
-    mResultName->setSize(mGrid.getColWidth(3), resultNameSize.y);
 
     mGrid.onSizeChanged();
     mBusyAnim.setSize(mSize);
@@ -289,30 +288,30 @@ void GuiScraperSearch::updateViewStyle()
     // Add them back depending on search type.
     if (mSearchType == ALWAYS_ACCEPT_FIRST_RESULT) {
         // Show name.
-        mGrid.setEntry(mResultName, glm::ivec2{1, 0}, false, false, glm::ivec2{2, 1},
+        mGrid.setEntry(mResultName, glm::ivec2{1, 0}, false, false, glm::ivec2{3, 1},
                        GridFlags::BORDER_TOP);
 
         // Need a border on the bottom left.
         mGrid.setEntry(std::make_shared<GuiComponent>(mWindow), glm::ivec2{0, 2}, false, false,
-                       glm::ivec2{3, 1}, GridFlags::BORDER_BOTTOM);
+                       glm::ivec2{4, 1}, GridFlags::BORDER_BOTTOM);
 
         // Show description on the right.
-        mGrid.setEntry(mDescContainer, glm::ivec2{3, 0}, false, false, glm::ivec2{1, 3},
+        mGrid.setEntry(mDescContainer, glm::ivec2{4, 0}, false, false, glm::ivec2{1, 3},
-                       GridFlags::BORDER_TOP | GridFlags::BORDER_BOTTOM);
+                       GridFlags::BORDER_TOP | GridFlags::BORDER_BOTTOM | GridFlags::BORDER_LEFT);
         // Make description text wrap at edge of container.
         mResultDesc->setSize(mDescContainer->getSize().x, 0.0f);
     }
     else {
         // Fake row where name would be.
         mGrid.setEntry(std::make_shared<GuiComponent>(mWindow), glm::ivec2{1, 0}, false, true,
-                       glm::ivec2{2, 1}, GridFlags::BORDER_TOP);
+                       glm::ivec2{3, 1}, GridFlags::BORDER_TOP);
 
         // Show result list on the right.
-        mGrid.setEntry(mResultList, glm::ivec2{3, 0}, true, true, glm::ivec2{1, 3},
+        mGrid.setEntry(mResultList, glm::ivec2{4, 0}, true, true, glm::ivec2{1, 3},
                        GridFlags::BORDER_LEFT | GridFlags::BORDER_TOP | GridFlags::BORDER_BOTTOM);
 
         // Show description under image/info.
-        mGrid.setEntry(mDescContainer, glm::ivec2{1, 2}, false, false, glm::ivec2{2, 1},
+        mGrid.setEntry(mDescContainer, glm::ivec2{1, 2}, false, false, glm::ivec2{3, 1},
                        GridFlags::BORDER_BOTTOM);
         // Make description text wrap at edge of container.
         mResultDesc->setSize(mDescContainer->getSize().x, 0);
@@ -328,6 +327,7 @@ void GuiScraperSearch::search(const ScraperSearchParams& params)
     mScrapeResult = {};
 
     mResultList->clear();
+    mResultList->setLoopRows(false);
     mScraperResults.clear();
     mMDRetrieveURLsHandle.reset();
     mThumbnailReqMap.clear();
@@ -356,6 +356,7 @@ void GuiScraperSearch::onSearchDone(const std::vector<ScraperSearchResult>& resu
     mResultList->clear();
 
     mScraperResults = results;
+    mResultList->setLoopRows(true);
 
     auto font = Font::get(FONT_SIZE_MEDIUM);
     unsigned int color = 0x777777FF;
@@ -390,7 +391,7 @@ void GuiScraperSearch::onSearchDone(const std::vector<ScraperSearchResult>& resu
             row.addElement(
                 std::make_shared<TextComponent>(
                     mWindow, Utils::String::toUpper(results.at(i).mdl.get("name")), font, color),
-                true);
+                false);
             row.makeAcceptInputHandler([this, i] { returnResult(mScraperResults.at(i)); });
             mResultList->addRow(row);
         }
@@ -563,8 +564,10 @@ bool GuiScraperSearch::input(InputConfig* config, Input input)
         else if (mSearchType == ACCEPT_SINGLE_MATCHES && !mFoundGame)
             allowRefine = true;
 
-        if (allowRefine)
+        if (allowRefine) {
+            mResultList->stopLooping();
             openInputScreen(mLastSearch);
+        }
     }
 
     // If multi-scraping, skip game unless the result has already been accepted.
@@ -590,6 +593,7 @@ void GuiScraperSearch::render(const glm::mat4& parentTrans)
 
 void GuiScraperSearch::returnResult(ScraperSearchResult result)
 {
+    mResultList->setLoopRows(false);
 
     mBlockAccept = true;
     mAcceptedResult = true;
@@ -798,6 +802,8 @@ void GuiScraperSearch::openInputScreen(ScraperSearchParams& params)
         stop();
         mRefinedSearch = true;
         params.nameOverride = name;
+        if (mRefineCallback != nullptr)
+            mRefineCallback();
         search(params);
     };
 

es-app/src/guis/GuiScraperSearch.h

@@ -71,6 +71,10 @@ public:
     {
         mCancelCallback = cancelCallback;
     }
+    void setRefineCallback(const std::function<void()>& refineCallback)
+    {
+        mRefineCallback = refineCallback;
+    }
 
     bool input(InputConfig* config, Input input) override;
     void update(int deltaTime) override;
@@ -92,6 +96,8 @@ public:
     void onFocusGained() override { mGrid.onFocusGained(); }
     void onFocusLost() override { mGrid.onFocusLost(); }
 
+    std::shared_ptr<ComponentList>& getResultList() { return mResultList; }
+
 private:
     void updateViewStyle();
     void updateThumbnail();
@@ -152,6 +158,7 @@ private:
     std::function<void(const ScraperSearchResult&)> mAcceptCallback;
     std::function<void()> mSkipCallback;
     std::function<void()> mCancelCallback;
+    std::function<void()> mRefineCallback;
     unsigned int mScrapeCount;
     bool mRefinedSearch;
     bool mBlockAccept;

es-app/src/guis/GuiScreensaverOptions.cpp

@@ -17,6 +17,7 @@
 
 GuiScreensaverOptions::GuiScreensaverOptions(Window* window, const std::string& title)
     : GuiSettings(window, title)
+    , mWindow(window)
 {
     // Screensaver timer.
     auto screensaver_timer = std::make_shared<SliderComponent>(mWindow, 0.0f, 30.0f, 1.0f, "m");
@@ -52,7 +53,8 @@ GuiScreensaverOptions::GuiScreensaverOptions(Window* window, const std::string&
                 // If before it wasn't risky but now there's a risk of problems, show warning.
                 mWindow->pushGui(new GuiMsgBox(
                     mWindow, getHelpStyle(),
-                    "THE 'VIDEO' SCREENSAVER SHOWS\nVIDEOS FROM YOUR GAMELISTS\n\n"
+                    "THE 'VIDEO' SCREENSAVER SHOWS\n"
+                    "VIDEOS FROM YOUR GAMELISTS\n\n"
                     "IF YOU DO NOT HAVE ANY VIDEOS, THE\n"
                     "SCREENSAVER WILL DEFAULT TO 'DIM'",
                     "OK", [] { return; }, "", nullptr, "", nullptr));
@@ -94,6 +96,8 @@ GuiScreensaverOptions::GuiScreensaverOptions(Window* window, const std::string&
     row.makeAcceptInputHandler(
         std::bind(&GuiScreensaverOptions::openVideoScreensaverOptions, this));
     addRow(row);
+
+    setSize(getMenuSize());
 }
 
 void GuiScreensaverOptions::openSlideshowScreensaverOptions()
@@ -205,6 +209,7 @@ void GuiScreensaverOptions::openSlideshowScreensaverOptions()
         }
     });
 
+    s->setSize(mSize);
     mWindow->pushGui(s);
 }
 
@@ -286,5 +291,6 @@ void GuiScreensaverOptions::openVideoScreensaverOptions()
     });
 #endif
 
+    s->setSize(mSize);
     mWindow->pushGui(s);
 }

es-app/src/guis/GuiScreensaverOptions.h

@@ -18,6 +18,8 @@ public:
     GuiScreensaverOptions(Window* window, const std::string& title);
 
 private:
+    Window* mWindow;
+
     void openSlideshowScreensaverOptions();
     void openVideoScreensaverOptions();
 };

es-app/src/main.cpp

@@ -232,7 +232,7 @@ bool parseArgs(int argc, char* argv[])
             }
             int width = atoi(argv[i + 1]);
             int height = atoi(argv[i + 2]);
-            if (width < 224 || height < 224 || width > 7680 || height > 4320 ||
+            if (width < 224 || height < 224 || width > 7680 || height > 7680 ||
                 height < width / 4 || width < height / 2) {
                 std::cerr << "Error: Unsupported resolution " << width << "x" << height
                           << " supplied.\n";

es-app/src/views/ViewController.cpp

@@ -961,7 +961,11 @@ void ViewController::preload()
                 std::to_string(systemCount) + ")");
         }
         (*it)->getIndex()->resetFilters();
-        getGameListView(*it);
+
+        if (Settings::getInstance()->getBool("PreloadGamelists"))
+            getGameListView(*it)->preloadGamelist();
+        else
+            getGameListView(*it);
     }
 
     // Load navigation sounds, either from the theme if it supports it, or otherwise from

es-app/src/views/gamelist/DetailedGameListView.cpp

@@ -38,6 +38,7 @@ DetailedGameListView::DetailedGameListView(Window* window, FileData* root)
     , mLastPlayed(window)
     , mPlayCount(window)
     , mName(window)
+    , mBadges(window)
     , mDescContainer(window)
     , mDescription(window)
     , mGamelistInfo(window)
@@ -101,6 +102,13 @@ DetailedGameListView::DetailedGameListView(Window* window, FileData* root)
     addChild(&mLblPlayCount);
     addChild(&mPlayCount);
 
+    // Badges.
+    addChild(&mBadges);
+    mBadges.setOrigin(0.5f, 0.5f);
+    mBadges.setPosition(mSize.x * 0.8f, mSize.y * 0.7f);
+    mBadges.setSize(mSize.x * 0.15f, mSize.y * 0.2f);
+    mBadges.setDefaultZIndex(50.0f);
+
     mName.setPosition(mSize.x, mSize.y);
     mName.setDefaultZIndex(40.0f);
     mName.setColor(0xAAAAAAFF);
@@ -141,6 +149,7 @@ void DetailedGameListView::onThemeChanged(const std::shared_ptr<ThemeData>& them
     mImage.applyTheme(theme, getName(), "md_image",
                       POSITION | ThemeFlags::SIZE | Z_INDEX | ROTATION | VISIBLE);
     mName.applyTheme(theme, getName(), "md_name", ALL);
+    mBadges.applyTheme(theme, getName(), "md_badges", ALL);
 
     initMDLabels();
     std::vector<TextComponent*> labels = getMDLabels();
@@ -297,6 +306,7 @@ void DetailedGameListView::updateInfoPanel()
         mLastPlayed.setVisible(false);
         mLblPlayCount.setVisible(false);
         mPlayCount.setVisible(false);
+        mBadges.setVisible(false);
     }
     else {
         mLblRating.setVisible(true);
@@ -315,6 +325,7 @@ void DetailedGameListView::updateInfoPanel()
         mLastPlayed.setVisible(true);
         mLblPlayCount.setVisible(true);
         mPlayCount.setVisible(true);
+        mBadges.setVisible(true);
     }
 
     bool fadingOut = false;
@@ -397,6 +408,29 @@ void DetailedGameListView::updateInfoPanel()
         mPublisher.setValue(file->metadata.get("publisher"));
         mGenre.setValue(file->metadata.get("genre"));
         mPlayers.setValue(file->metadata.get("players"));
+
+        // Populate the badge slots based on game metadata.
+        std::vector<BadgeComponent::BadgeInfo> badgeSlots;
+        for (auto badge : mBadges.getBadgeTypes()) {
+            BadgeComponent::BadgeInfo badgeInfo;
+            badgeInfo.badgeType = badge;
+            if (badge == "controller") {
+                if (file->metadata.get("controller").compare("") != 0) {
+                    badgeInfo.gameController = file->metadata.get("controller");
+                    badgeSlots.push_back(badgeInfo);
+                }
+            }
+            else if (badge == "altemulator") {
+                if (file->metadata.get(badge).compare("") != 0)
+                    badgeSlots.push_back(badgeInfo);
+            }
+            else {
+                if (file->metadata.get(badge).compare("true") == 0)
+                    badgeSlots.push_back(badgeInfo);
+            }
+        }
+        mBadges.setBadges(badgeSlots);
+
         mName.setValue(file->metadata.get("name"));
 
         if (file->getType() == GAME) {
@@ -422,6 +456,7 @@ void DetailedGameListView::updateInfoPanel()
     comps.push_back(&mImage);
     comps.push_back(&mDescription);
     comps.push_back(&mName);
+    comps.push_back(&mBadges);
     std::vector<TextComponent*> labels = getMDLabels();
     comps.insert(comps.cend(), labels.cbegin(), labels.cend());
 

es-app/src/views/gamelist/DetailedGameListView.h

@@ -9,6 +9,7 @@
 #ifndef ES_APP_VIEWS_GAME_LIST_DETAILED_GAME_LIST_VIEW_H
 #define ES_APP_VIEWS_GAME_LIST_DETAILED_GAME_LIST_VIEW_H
 
+#include "components/BadgeComponent.h"
 #include "components/DateTimeComponent.h"
 #include "components/RatingComponent.h"
 #include "components/ScrollableContainer.h"
@@ -24,6 +25,8 @@ public:
     virtual std::string getName() const override { return "detailed"; }
     virtual void launch(FileData* game) override;
 
+    virtual void preloadGamelist() override { updateInfoPanel(); }
+
 protected:
     virtual void update(int deltaTime) override;
 
@@ -55,6 +58,7 @@ private:
     DateTimeComponent mLastPlayed;
     TextComponent mPlayCount;
     TextComponent mName;
+    BadgeComponent mBadges;
 
     std::vector<TextComponent*> getMDLabels();
     std::vector<GuiComponent*> getMDValues();

es-app/src/views/gamelist/GridGameListView.cpp

@@ -32,6 +32,7 @@ GridGameListView::GridGameListView(Window* window, FileData* root)
     , mLblPlayers(window)
     , mLblLastPlayed(window)
     , mLblPlayCount(window)
+    , mBadges(window)
     , mRating(window)
     , mReleaseDate(window)
     , mDeveloper(window)
@@ -55,6 +56,7 @@ GridGameListView::GridGameListView(Window* window, FileData* root)
     populateList(root->getChildrenListToDisplay(), root);
 
     // Metadata labels + values.
+    addChild(&mBadges);
     mLblRating.setText("Rating: ", false);
     addChild(&mLblRating);
     addChild(&mRating);
@@ -491,7 +493,7 @@ void GridGameListView::updateInfoPanel()
         if ((comp->isAnimationPlaying(0) && comp->isAnimationReversed(0) != fadingOut) ||
             (!comp->isAnimationPlaying(0) && comp->getOpacity() != (fadingOut ? 0 : 255))) {
 
-            // TEMPORARY - This does not seem to work, needs to be reviewed later.
+            // TODO: This does not seem to work, needs to be reviewed later.
             // auto func = [comp](float t) {
             auto func = [](float t) {
                 // comp->setOpacity(static_cast<unsigned char>(glm::mix(0.0f, 1.0f, t) * 255));

es-app/src/views/gamelist/GridGameListView.h

@@ -9,6 +9,7 @@
 #ifndef ES_APP_VIEWS_GAME_LIST_GRID_GAME_LIST_VIEW_H
 #define ES_APP_VIEWS_GAME_LIST_GRID_GAME_LIST_VIEW_H
 
+#include "components/BadgeComponent.h"
 #include "components/DateTimeComponent.h"
 #include "components/ImageGridComponent.h"
 #include "components/RatingComponent.h"
@@ -88,6 +89,7 @@ private:
     TextComponent mLblLastPlayed;
     TextComponent mLblPlayCount;
 
+    BadgeComponent mBadges;
     RatingComponent mRating;
     DateTimeComponent mReleaseDate;
     TextComponent mDeveloper;

es-app/src/views/gamelist/IGameListView.h

@@ -32,6 +32,8 @@ public:
     void setTheme(const std::shared_ptr<ThemeData>& theme);
     const std::shared_ptr<ThemeData>& getTheme() const { return mTheme; }
 
+    virtual void preloadGamelist(){};
+
     virtual FileData* getCursor() = 0;
     virtual void setCursor(FileData*) = 0;
     virtual FileData* getNextEntry() = 0;

es-app/src/views/gamelist/VideoGameListView.cpp

@@ -45,6 +45,7 @@ VideoGameListView::VideoGameListView(Window* window, FileData* root)
     , mLastPlayed(window)
     , mPlayCount(window)
     , mName(window)
+    , mBadges(window)
     , mDescContainer(window)
     , mDescription(window)
     , mGamelistInfo(window)
@@ -118,6 +119,13 @@ VideoGameListView::VideoGameListView(Window* window, FileData* root)
     addChild(&mLblPlayCount);
     addChild(&mPlayCount);
 
+    // Badges.
+    addChild(&mBadges);
+    mBadges.setOrigin(0.5f, 0.5f);
+    mBadges.setPosition(mSize.x * 0.8f, mSize.y * 0.7f);
+    mBadges.setSize(mSize.x * 0.15f, mSize.y * 0.2f);
+    mBadges.setDefaultZIndex(50.0f);
+
     mName.setPosition(mSize.x, mSize.y);
     mName.setDefaultZIndex(40.0f);
     mName.setColor(0xAAAAAAFF);
@@ -163,6 +171,7 @@ void VideoGameListView::onThemeChanged(const std::shared_ptr<ThemeData>& theme)
                        POSITION | ThemeFlags::SIZE | ThemeFlags::DELAY | Z_INDEX | ROTATION |
                            VISIBLE);
     mName.applyTheme(theme, getName(), "md_name", ALL);
+    mBadges.applyTheme(theme, getName(), "md_badges", ALL);
 
     initMDLabels();
     std::vector<TextComponent*> labels = getMDLabels();
@@ -319,6 +328,7 @@ void VideoGameListView::updateInfoPanel()
         mLastPlayed.setVisible(false);
         mLblPlayCount.setVisible(false);
         mPlayCount.setVisible(false);
+        mBadges.setVisible(false);
     }
     else {
         mLblRating.setVisible(true);
@@ -337,6 +347,7 @@ void VideoGameListView::updateInfoPanel()
         mLastPlayed.setVisible(true);
         mLblPlayCount.setVisible(true);
         mPlayCount.setVisible(true);
+        mBadges.setVisible(true);
     }
 
     bool fadingOut = false;
@@ -437,6 +448,29 @@ void VideoGameListView::updateInfoPanel()
         mPublisher.setValue(file->metadata.get("publisher"));
         mGenre.setValue(file->metadata.get("genre"));
         mPlayers.setValue(file->metadata.get("players"));
+
+        // Populate the badge slots based on game metadata.
+        std::vector<BadgeComponent::BadgeInfo> badgeSlots;
+        for (auto badge : mBadges.getBadgeTypes()) {
+            BadgeComponent::BadgeInfo badgeInfo;
+            badgeInfo.badgeType = badge;
+            if (badge == "controller") {
+                if (file->metadata.get("controller").compare("") != 0) {
+                    badgeInfo.gameController = file->metadata.get("controller");
+                    badgeSlots.push_back(badgeInfo);
+                }
+            }
+            else if (badge == "altemulator") {
+                if (file->metadata.get(badge).compare("") != 0)
+                    badgeSlots.push_back(badgeInfo);
+            }
+            else {
+                if (file->metadata.get(badge).compare("true") == 0)
+                    badgeSlots.push_back(badgeInfo);
+            }
+        }
+        mBadges.setBadges(badgeSlots);
+
         mName.setValue(file->metadata.get("name"));
 
         if (file->getType() == GAME) {
@@ -462,6 +496,7 @@ void VideoGameListView::updateInfoPanel()
     comps.push_back(mVideo);
     comps.push_back(&mDescription);
     comps.push_back(&mName);
+    comps.push_back(&mBadges);
     std::vector<TextComponent*> labels = getMDLabels();
     comps.insert(comps.cend(), labels.cbegin(), labels.cend());
 

es-app/src/views/gamelist/VideoGameListView.h

@@ -9,6 +9,7 @@
 #ifndef ES_APP_VIEWS_GAME_LIST_VIDEO_GAME_LIST_VIEW_H
 #define ES_APP_VIEWS_GAME_LIST_VIDEO_GAME_LIST_VIEW_H
 
+#include "components/BadgeComponent.h"
 #include "components/DateTimeComponent.h"
 #include "components/RatingComponent.h"
 #include "components/ScrollableContainer.h"
@@ -27,6 +28,8 @@ public:
     virtual std::string getName() const override { return "video"; }
     virtual void launch(FileData* game) override;
 
+    virtual void preloadGamelist() override { updateInfoPanel(); }
+
 protected:
     virtual void update(int deltaTime) override;
 
@@ -59,6 +62,7 @@ private:
     DateTimeComponent mLastPlayed;
     TextComponent mPlayCount;
     TextComponent mName;
+    BadgeComponent mBadges;
 
     std::vector<TextComponent*> getMDLabels();
     std::vector<GuiComponent*> getMDValues();

es-core/CMakeLists.txt

@@ -34,12 +34,14 @@ set(CORE_HEADERS
 
     # GUI components
     ${CMAKE_CURRENT_SOURCE_DIR}/src/components/AnimatedImageComponent.h
+    ${CMAKE_CURRENT_SOURCE_DIR}/src/components/BadgeComponent.h
     ${CMAKE_CURRENT_SOURCE_DIR}/src/components/BusyComponent.h
     ${CMAKE_CURRENT_SOURCE_DIR}/src/components/ButtonComponent.h
     ${CMAKE_CURRENT_SOURCE_DIR}/src/components/ComponentGrid.h
     ${CMAKE_CURRENT_SOURCE_DIR}/src/components/ComponentList.h
     ${CMAKE_CURRENT_SOURCE_DIR}/src/components/DateTimeComponent.h
     ${CMAKE_CURRENT_SOURCE_DIR}/src/components/DateTimeEditComponent.h
+    ${CMAKE_CURRENT_SOURCE_DIR}/src/components/FlexboxComponent.h
     ${CMAKE_CURRENT_SOURCE_DIR}/src/components/GridTileComponent.h
     ${CMAKE_CURRENT_SOURCE_DIR}/src/components/HelpComponent.h
     ${CMAKE_CURRENT_SOURCE_DIR}/src/components/IList.h
@@ -110,12 +112,14 @@ set(CORE_SOURCES
 
     # GUI components
     ${CMAKE_CURRENT_SOURCE_DIR}/src/components/AnimatedImageComponent.cpp
+    ${CMAKE_CURRENT_SOURCE_DIR}/src/components/BadgeComponent.cpp
     ${CMAKE_CURRENT_SOURCE_DIR}/src/components/BusyComponent.cpp
     ${CMAKE_CURRENT_SOURCE_DIR}/src/components/ButtonComponent.cpp
     ${CMAKE_CURRENT_SOURCE_DIR}/src/components/ComponentGrid.cpp
     ${CMAKE_CURRENT_SOURCE_DIR}/src/components/ComponentList.cpp
     ${CMAKE_CURRENT_SOURCE_DIR}/src/components/DateTimeComponent.cpp
     ${CMAKE_CURRENT_SOURCE_DIR}/src/components/DateTimeEditComponent.cpp
+    ${CMAKE_CURRENT_SOURCE_DIR}/src/components/FlexboxComponent.cpp
     ${CMAKE_CURRENT_SOURCE_DIR}/src/components/GridTileComponent.cpp
     ${CMAKE_CURRENT_SOURCE_DIR}/src/components/HelpComponent.cpp
     ${CMAKE_CURRENT_SOURCE_DIR}/src/components/ImageComponent.cpp

es-core/src/Settings.cpp

@@ -181,7 +181,7 @@ void Settings::setDefaults()
     mBoolMap["SpecialCharsASCII"] = {false, false};
     mBoolMap["ListScrollOverlay"] = {false, false};
     mBoolMap["VirtualKeyboard"] = {true, true};
-    mBoolMap["ScrollIndicators"] = {false, false};
+    mBoolMap["ScrollIndicators"] = {true, true};
     mBoolMap["FavoritesAddButton"] = {true, true};
     mBoolMap["RandomAddButton"] = {false, false};
     mBoolMap["GamelistFilters"] = {true, true};
@@ -242,6 +242,7 @@ void Settings::setDefaults()
     mBoolMap["VideoHardwareDecoding"] = {false, false};
 #endif
     mBoolMap["VideoUpscaleFrameRate"] = {false, false};
+    mBoolMap["PreloadGamelists"] = {true, true};
     mBoolMap["AlternativeEmulatorPerGame"] = {true, true};
     mBoolMap["ShowHiddenFiles"] = {true, true};
     mBoolMap["ShowHiddenGames"] = {true, true};

es-core/src/ThemeData.cpp

@@ -146,6 +146,24 @@ std::map<std::string, std::map<std::string, ThemeData::ElementPropertyType>> The
       {"unfilledPath", PATH},
       {"visible", BOOLEAN},
       {"zIndex", FLOAT}}},
+    {"badges",
+     {{"pos", NORMALIZED_PAIR},
+      {"size", NORMALIZED_PAIR},
+      {"origin", NORMALIZED_PAIR},
+      {"rotation", FLOAT},
+      {"rotationOrigin", NORMALIZED_PAIR},
+      {"alignment", STRING},
+      {"direction", STRING},
+      {"lines", FLOAT},
+      {"itemsPerLine", FLOAT},
+      {"itemMargin", NORMALIZED_PAIR},
+      {"slots", STRING},
+      {"controllerPos", NORMALIZED_PAIR},
+      {"controllerSize", FLOAT},
+      {"customBadgeIcon", PATH},
+      {"customControllerIcon", PATH},
+      {"visible", BOOLEAN},
+      {"zIndex", FLOAT}}},
     {"sound", {{"path", PATH}}},
     {"helpsystem",
      {{"pos", NORMALIZED_PAIR},
@@ -503,15 +521,30 @@ void ThemeData::parseElement(const pugi::xml_node& root,
                                                           "");
                 }
 
-                // Special parsing instruction for customButtonIcon -> save node as it's button
+                // Special parsing instruction for recurring options.
-                // attribute to prevent nodes overwriting each other.
+                // Store as its attribute to prevent nodes overwriting each other.
                 if (strcmp(node.name(), "customButtonIcon") == 0) {
-                    const auto btn = node.attribute("button").as_string("");
+                    const auto button = node.attribute("button").as_string("");
-                    if (strcmp(btn, "") == 0)
+                    if (strcmp(button, "") == 0)
                         LOG(LogError)
                             << "<customButtonIcon> element requires the `button` property.";
                     else
-                        element.properties[btn] = path;
+                        element.properties[button] = path;
+                }
+                else if (strcmp(node.name(), "customBadgeIcon") == 0) {
+                    const auto badge = node.attribute("badge").as_string("");
+                    if (strcmp(badge, "") == 0)
+                        LOG(LogError) << "<customBadgeIcon> element requires the `badge` property.";
+                    else
+                        element.properties[badge] = path;
+                }
+                else if (strcmp(node.name(), "customControllerIcon") == 0) {
+                    const auto controller = node.attribute("controller").as_string("");
+                    if (strcmp(controller, "") == 0)
+                        LOG(LogError)
+                            << "<customControllerIcon> element requires the `controller` property.";
+                    else
+                        element.properties[controller] = path;
                 }
                 else
                     element.properties[node.name()] = path;

es-core/src/Window.cpp

@@ -24,7 +24,9 @@
 #include <algorithm>
 #include <iomanip>
 
+#if defined(USE_OPENGL_21)
 #define CLOCK_BACKGROUND_CREATION false
+#endif
 
 Window::Window()
     : mScreensaver(nullptr)
@@ -600,8 +602,8 @@ void Window::renderLoadingScreen(std::string text)
                        static_cast<float>(Renderer::getScreenHeight()), 0x000000FF, 0x000000FF);
 
     ImageComponent splash(this, true);
-    splash.setResize(Renderer::getScreenWidth() * 0.6f, 0.0f);
     splash.setImage(":/graphics/splash.svg");
+    splash.setResize(Renderer::getScreenWidth() * 0.6f, 0.0f);
     splash.setPosition((Renderer::getScreenWidth() - splash.getSize().x) / 2.0f,
                        (Renderer::getScreenHeight() - splash.getSize().y) / 2.0f * 0.6f);
     splash.render(trans);

es-core/src/components/BadgeComponent.cpp

@@ -0,0 +1,308 @@
+//  SPDX-License-Identifier: MIT
+//
+//  EmulationStation Desktop Edition
+//  BadgeComponent.cpp
+//
+//  Game badges icons.
+//  Used by the gamelist views.
+//
+
+#define SLOT_FAVORITE "favorite"
+#define SLOT_COMPLETED "completed"
+#define SLOT_KIDGAME "kidgame"
+#define SLOT_BROKEN "broken"
+#define SLOT_CONTROLLER "controller"
+#define SLOT_ALTEMULATOR "altemulator"
+
+#include "components/BadgeComponent.h"
+
+#include "Log.h"
+#include "ThemeData.h"
+#include "utils/StringUtil.h"
+
+std::vector<GameControllers> BadgeComponent::sGameControllers;
+
+// clang-format off
+
+// The "unknown" controller entry has to be placed last.
+GameControllers sControllerDefinitions [] = {
+    // shortName                      displayName                           fileName
+    {"gamepad_generic",               "Gamepad (Generic)",                  ":/graphics/controllers/gamepad_generic.svg"},
+    {"gamepad_xbox",                  "Gamepad (Xbox)",                     ":/graphics/controllers/gamepad_xbox.svg"},
+    {"gamepad_playstation",           "Gamepad (PlayStation)",              ":/graphics/controllers/gamepad_playstation.svg"},
+    {"gamepad_nintendo_nes",          "Gamepad (Nintendo NES)",             ":/graphics/controllers/gamepad_nintendo_nes.svg"},
+    {"gamepad_nintendo_snes",         "Gamepad (Nintendo SNES)",            ":/graphics/controllers/gamepad_nintendo_snes.svg"},
+    {"gamepad_nintendo_64",           "Gamepad (Nintendo 64)",              ":/graphics/controllers/gamepad_nintendo_64.svg"},
+    {"joystick_generic",              "Joystick (Generic)",                 ":/graphics/controllers/joystick_generic.svg"},
+    {"joystick_arcade_2_buttons",     "Joystick (Arcade 2 Buttons)",        ":/graphics/controllers/joystick_arcade_2_buttons.svg"},
+    {"joystick_arcade_3_buttons",     "Joystick (Arcade 3 Buttons)",        ":/graphics/controllers/joystick_arcade_3_buttons.svg"},
+    {"joystick_arcade_4_buttons",     "Joystick (Arcade 4 Buttons)",        ":/graphics/controllers/joystick_arcade_4_buttons.svg"},
+    {"joystick_arcade_6_buttons",     "Joystick (Arcade 6 Buttons)",        ":/graphics/controllers/joystick_arcade_6_buttons.svg"},
+    {"trackball_generic",             "Trackball (Generic)",                ":/graphics/controllers/trackball_generic.svg"},
+    {"lightgun_generic",              "Lightgun (Generic)",                 ":/graphics/controllers/lightgun_generic.svg"},
+    {"lightgun_nintendo",             "Lightgun (Nintendo)",                ":/graphics/controllers/lightgun_nintendo.svg"},
+    {"keyboard_generic",              "Keyboard (Generic)",                 ":/graphics/controllers/keyboard_generic.svg"},
+    {"mouse_generic",                 "Mouse (Generic)",                    ":/graphics/controllers/mouse_generic.svg"},
+    {"mouse_amiga",                   "Mouse (Amiga)",                      ":/graphics/controllers/mouse_amiga.svg"},
+    {"keyboard_mouse_generic",        "Keyboard and Mouse (Generic)",       ":/graphics/controllers/keyboard_mouse_generic.svg"},
+    {"steering_wheel_generic",        "Steering Wheel (Generic)",           ":/graphics/controllers/steering_wheel_generic.svg"},
+    {"wii_remote_nintendo",           "Wii Remote (Nintendo)",              ":/graphics/controllers/wii_remote_nintendo.svg"},
+    {"wii_remote_nunchuck_nintendo",  "Wii Remote and Nunchuck (Nintendo)", ":/graphics/controllers/wii_remote_nunchuck_nintendo.svg"},
+    {"joycon_left_or_right_nintendo", "Joy-Con Left or Right (Nintendo)",   ":/graphics/controllers/joycon_left_or_right_nintendo.svg"},
+    {"joycon_pair_nintendo",          "Joy-Con Pair (Nintendo)",            ":/graphics/controllers/joycon_pair_nintendo.svg"},
+    {"unknown",                       "Unknown Controller",                 ":/graphics/controllers/unknown.svg"}
+};
+
+// clang-format on
+
+BadgeComponent::BadgeComponent(Window* window)
+    : GuiComponent{window}
+    , mFlexboxItems{}
+    , mFlexboxComponent{window, mFlexboxItems}
+    , mBadgeTypes{{SLOT_FAVORITE, SLOT_COMPLETED, SLOT_KIDGAME, SLOT_BROKEN, SLOT_CONTROLLER,
+                   SLOT_ALTEMULATOR}}
+{
+    mBadgeIcons[SLOT_FAVORITE] = ":/graphics/badge_favorite.svg";
+    mBadgeIcons[SLOT_COMPLETED] = ":/graphics/badge_completed.svg";
+    mBadgeIcons[SLOT_KIDGAME] = ":/graphics/badge_kidgame.svg";
+    mBadgeIcons[SLOT_BROKEN] = ":/graphics/badge_broken.svg";
+    mBadgeIcons[SLOT_CONTROLLER] = ":/graphics/badge_controller.svg";
+    mBadgeIcons[SLOT_ALTEMULATOR] = ":/graphics/badge_altemulator.svg";
+}
+
+void BadgeComponent::populateGameControllers()
+{
+    sGameControllers.clear();
+    for (auto controller : sControllerDefinitions)
+        sGameControllers.push_back(controller);
+}
+
+void BadgeComponent::setBadges(const std::vector<BadgeInfo>& badges)
+{
+    std::map<std::string, bool> prevVisibility;
+    std::map<std::string, std::string> prevPlayers;
+    std::map<std::string, std::string> prevController;
+
+    // Save the visibility status to know whether any badges changed.
+    for (auto& item : mFlexboxItems) {
+        prevVisibility[item.label] = item.visible;
+        prevController[item.label] = item.overlayImage.getTexture()->getTextureFilePath();
+        item.visible = false;
+    }
+
+    for (auto& badge : badges) {
+        auto it = std::find_if(
+            mFlexboxItems.begin(), mFlexboxItems.end(),
+            [badge](FlexboxComponent::FlexboxItem item) { return item.label == badge.badgeType; });
+
+        if (it != mFlexboxItems.end()) {
+            it->visible = true;
+            if (badge.gameController != "" &&
+                badge.gameController != it->overlayImage.getTexture()->getTextureFilePath()) {
+
+                auto it2 = std::find_if(sGameControllers.begin(), sGameControllers.end(),
+                                        [badge](GameControllers gameController) {
+                                            return gameController.shortName == badge.gameController;
+                                        });
+
+                if (it2 != sGameControllers.cend()) {
+                    it->overlayImage.setImage((*it2).fileName);
+                }
+                else if (badge.gameController != "")
+                    it->overlayImage.setImage(sGameControllers.back().fileName);
+            }
+        }
+    }
+
+    // Only recalculate the flexbox if any badges changed.
+    for (auto& item : mFlexboxItems) {
+        if (prevVisibility[item.label] != item.visible ||
+            prevController[item.label] != item.label) {
+            mFlexboxComponent.onSizeChanged();
+            break;
+        }
+    }
+}
+
+const std::string BadgeComponent::getShortName(const std::string& displayName)
+{
+    auto it = std::find_if(sGameControllers.begin(), sGameControllers.end(),
+                           [displayName](GameControllers gameController) {
+                               return gameController.displayName == displayName;
+                           });
+    if (it != sGameControllers.end())
+        return (*it).shortName;
+    else
+        return "unknown";
+}
+
+const std::string BadgeComponent::getDisplayName(const std::string& shortName)
+{
+    auto it = std::find_if(sGameControllers.begin(), sGameControllers.end(),
+                           [shortName](GameControllers gameController) {
+                               return gameController.shortName == shortName;
+                           });
+    if (it != sGameControllers.end())
+        return (*it).displayName;
+    else
+        return "unknown";
+}
+
+void BadgeComponent::render(const glm::mat4& parentTrans)
+{
+    if (!isVisible())
+        return;
+
+    if (mOpacity == 255) {
+        mFlexboxComponent.render(parentTrans);
+    }
+    else {
+        mFlexboxComponent.setOpacity(mOpacity);
+        mFlexboxComponent.render(parentTrans);
+        mFlexboxComponent.setOpacity(255);
+    }
+}
+
+void BadgeComponent::applyTheme(const std::shared_ptr<ThemeData>& theme,
+                                const std::string& view,
+                                const std::string& element,
+                                unsigned int properties)
+{
+    populateGameControllers();
+
+    using namespace ThemeFlags;
+
+    const ThemeData::ThemeElement* elem{theme->getElement(view, element, "badges")};
+    if (!elem)
+        return;
+
+    if (elem->has("alignment")) {
+        const std::string alignment{elem->get<std::string>("alignment")};
+        if (alignment != "left" && alignment != "right") {
+            LOG(LogWarning) << "BadgeComponent: Invalid theme configuration, <alignment> set to \""
+                            << alignment << "\"";
+        }
+        else {
+            mFlexboxComponent.setAlignment(alignment);
+        }
+    }
+
+    if (elem->has("direction")) {
+        const std::string direction{elem->get<std::string>("direction")};
+        if (direction != "row" && direction != "column") {
+            LOG(LogWarning) << "BadgeComponent: Invalid theme configuration, <direction> set to \""
+                            << direction << "\"";
+        }
+        else {
+            mFlexboxComponent.setDirection(direction);
+        }
+    }
+
+    if (elem->has("lines")) {
+        const float lines{elem->get<float>("lines")};
+        if (lines < 1.0f || lines > 10.0f) {
+            LOG(LogWarning) << "BadgeComponent: Invalid theme configuration, <lines> set to \""
+                            << lines << "\"";
+        }
+        else {
+            mFlexboxComponent.setLines(static_cast<unsigned int>(lines));
+        }
+    }
+
+    if (elem->has("itemsPerLine")) {
+        const float itemsPerLine{elem->get<float>("itemsPerLine")};
+        if (itemsPerLine < 1.0f || itemsPerLine > 10.0f) {
+            LOG(LogWarning)
+                << "BadgeComponent: Invalid theme configuration, <itemsPerLine> set to \""
+                << itemsPerLine << "\"";
+        }
+        else {
+            mFlexboxComponent.setItemsPerLine(static_cast<unsigned int>(itemsPerLine));
+        }
+    }
+
+    if (elem->has("itemMargin")) {
+        glm::vec2 itemMargin = elem->get<glm::vec2>("itemMargin");
+        if ((itemMargin.x != -1.0 && itemMargin.y != -1.0) &&
+            (itemMargin.x < 0.0f || itemMargin.x > 0.2f || itemMargin.y < 0.0f ||
+             itemMargin.y > 0.2f)) {
+            LOG(LogWarning) << "BadgeComponent: Invalid theme configuration, <itemMargin> set to \""
+                            << itemMargin.x << " " << itemMargin.y << "\"";
+        }
+        else {
+            mFlexboxComponent.setItemMargin(itemMargin);
+        }
+    }
+
+    if (elem->has("controllerPos")) {
+        const glm::vec2 controllerPos = elem->get<glm::vec2>("controllerPos");
+        if (controllerPos.x < -1.0f || controllerPos.x > 2.0f || controllerPos.y < -1.0f ||
+            controllerPos.y > 2.0f) {
+            LOG(LogWarning)
+                << "BadgeComponent: Invalid theme configuration, <controllerPos> set to \""
+                << controllerPos.x << " " << controllerPos.y << "\"";
+        }
+        else {
+            mFlexboxComponent.setOverlayPosition(controllerPos);
+        }
+    }
+
+    if (elem->has("controllerSize")) {
+        const float controllerSize = elem->get<float>("controllerSize");
+        if (controllerSize < 0.1f || controllerSize > 2.0f) {
+            LOG(LogWarning)
+                << "BadgeComponent: Invalid theme configuration, <controllerSize> set to \""
+                << controllerSize << "\"";
+        }
+        else {
+            mFlexboxComponent.setOverlaySize(controllerSize);
+        }
+    }
+
+    if (elem->has("slots")) {
+        // Replace possible whitespace separators with commas.
+        std::string slotsTag = Utils::String::toLower(elem->get<std::string>("slots"));
+        for (auto& character : slotsTag) {
+            if (std::isspace(character))
+                character = ',';
+        }
+        slotsTag = Utils::String::replace(slotsTag, ",,", ",");
+        std::vector<std::string> slots = Utils::String::delimitedStringToVector(slotsTag, ",");
+
+        for (auto slot : slots) {
+            if (std::find(mBadgeTypes.cbegin(), mBadgeTypes.cend(), slot) != mBadgeTypes.end()) {
+                if (properties & PATH && elem->has(slot))
+                    mBadgeIcons[slot] = elem->get<std::string>(slot);
+
+                FlexboxComponent::FlexboxItem item;
+                item.label = slot;
+
+                ImageComponent badgeImage{mWindow, false, false};
+                badgeImage.setImage(mBadgeIcons[slot]);
+                item.baseImage = badgeImage;
+                item.overlayImage = ImageComponent{mWindow};
+
+                mFlexboxItems.push_back(item);
+            }
+            else {
+                LOG(LogError) << "Invalid badge slot \"" << slot << "\" defined";
+            }
+        }
+
+        for (auto& gameController : sGameControllers) {
+            if (properties & PATH && elem->has(gameController.shortName))
+                gameController.fileName = elem->get<std::string>(gameController.shortName);
+        }
+
+        GuiComponent::applyTheme(theme, view, element, properties);
+
+        mFlexboxComponent.setPosition(mPosition);
+        mFlexboxComponent.setSize(mSize);
+        mFlexboxComponent.setOrigin(mOrigin);
+        mFlexboxComponent.setRotation(mRotation);
+        mFlexboxComponent.setRotationOrigin(mRotationOrigin);
+        mFlexboxComponent.setVisible(mVisible);
+        mFlexboxComponent.setDefaultZIndex(mDefaultZIndex);
+        mFlexboxComponent.setZIndex(mZIndex);
+    }
+}

es-core/src/components/BadgeComponent.h

@@ -0,0 +1,63 @@
+//  SPDX-License-Identifier: MIT
+//
+//  EmulationStation Desktop Edition
+//  BadgeComponent.h
+//
+//  Game badges icons.
+//  Used by the gamelist views.
+//
+
+#ifndef ES_CORE_COMPONENTS_BADGE_COMPONENT_H
+#define ES_CORE_COMPONENTS_BADGE_COMPONENT_H
+
+#include "FlexboxComponent.h"
+#include "GuiComponent.h"
+
+struct GameControllers {
+    std::string shortName;
+    std::string displayName;
+    std::string fileName;
+};
+
+class BadgeComponent : public GuiComponent
+{
+public:
+    BadgeComponent(Window* window);
+
+    struct BadgeInfo {
+        std::string badgeType;
+        std::string gameController;
+    };
+
+    static void populateGameControllers();
+    std::vector<std::string> getBadgeTypes() { return mBadgeTypes; }
+    void setBadges(const std::vector<BadgeInfo>& badges);
+    static const std::vector<GameControllers>& getGameControllers()
+    {
+        if (sGameControllers.empty())
+            populateGameControllers();
+        return sGameControllers;
+    }
+
+    static const std::string getShortName(const std::string& displayName);
+    static const std::string getDisplayName(const std::string& shortName);
+
+    void render(const glm::mat4& parentTrans) override;
+    void onSizeChanged() override { mFlexboxComponent.onSizeChanged(); }
+
+    virtual void applyTheme(const std::shared_ptr<ThemeData>& theme,
+                            const std::string& view,
+                            const std::string& element,
+                            unsigned int properties) override;
+
+private:
+    static std::vector<GameControllers> sGameControllers;
+
+    std::vector<FlexboxComponent::FlexboxItem> mFlexboxItems;
+    FlexboxComponent mFlexboxComponent;
+
+    std::vector<std::string> mBadgeTypes;
+    std::map<std::string, std::string> mBadgeIcons;
+};
+
+#endif // ES_CORE_COMPONENTS_BADGE_COMPONENT_H

es-core/src/components/ComponentGrid.cpp

@@ -474,22 +474,42 @@ std::vector<HelpPrompt> ComponentGrid::getHelpPrompts()
     if (e)
         prompts = e->component->getHelpPrompts();
 
-    bool canScrollVert = mGridSize.y > 1;
+    bool canScrollVert = false;
-    bool canScrollHoriz = mGridSize.x > 1;
+
-    for (auto it = prompts.cbegin(); it != prompts.cend(); it++) {
+    // If the currently selected cell does not fill the entire Y axis, then check if the cells
-        if (it->first == "up/down/left/right") {
+    // above or below are actually focusable as otherwise they should not affect the help prompts.
-            canScrollHoriz = false;
+    if (mGridSize.y > 1 && e->dim.y < mGridSize.y) {
-            canScrollVert = false;
+        if (e->pos.y - e->dim.y >= 0) {
-            break;
+            const GridEntry* cell = getCellAt(glm::ivec2{e->pos.x, e->pos.y - e->dim.y});
+            if (cell != nullptr && cell->canFocus)
+                canScrollVert = true;
         }
-        else if (it->first == "up/down") {
+        if (e->pos.y + e->dim.y < mGridSize.y) {
-            canScrollVert = false;
+            const GridEntry* cell = getCellAt(glm::ivec2{e->pos.x, e->pos.y + e->dim.y});
-        }
+            if (cell != nullptr && cell->canFocus)
-        else if (it->first == "left/right") {
+                canScrollVert = true;
-            canScrollHoriz = false;
         }
     }
 
+    // There is currently no situation in the application where unfocusable cells are located
+    // next to each other horizontally, so this code is good enough. If this changes in the
+    // future, code similar to the the vertical cell handling above needs to be added.
+    bool canScrollHoriz = (mGridSize.x > 1 && e->dim.x < mGridSize.x);
+
+    // Check existing capabilities as indicated by the help prompts, and if the prompts should
+    // be combined into "up/down/left/right" then also remove the single-axis prompts.
+    if (!prompts.empty() && prompts.back() == HelpPrompt("up/down", "choose")) {
+        canScrollVert = true;
+        if (canScrollHoriz && canScrollVert)
+            prompts.pop_back();
+    }
+    else if (!prompts.empty() && prompts.back() == HelpPrompt("left/right", "choose")) {
+        canScrollHoriz = true;
+        if (canScrollHoriz && canScrollVert)
+            prompts.pop_back();
+    }
+
+    // Any duplicates will be removed in Window::setHelpPrompts()
     if (canScrollHoriz && canScrollVert)
         prompts.push_back(HelpPrompt("up/down/left/right", "choose"));
     else if (canScrollHoriz)

es-core/src/components/ComponentList.cpp

@@ -8,6 +8,8 @@
 
 #include "components/ComponentList.h"
 
+#include "resources/Font.h"
+
 #define TOTAL_HORIZONTAL_PADDING_PX 20.0f
 
 ComponentList::ComponentList(Window* window)
@@ -15,8 +17,14 @@ ComponentList::ComponentList(Window* window)
     , mFocused{false}
     , mSetupCompleted{false}
     , mBottomCameraOffset{false}
+    , mSingleRowScroll{false}
     , mSelectorBarOffset{0.0f}
     , mCameraOffset{0.0f}
+    , mLoopRows{false}
+    , mLoopScroll{false}
+    , mLoopOffset{0}
+    , mLoopOffset2{0}
+    , mLoopTime{0}
     , mScrollIndicatorStatus{SCROLL_NONE}
 {
     // Adjust the padding relative to the aspect ratio and screen resolution to make it look
@@ -63,6 +71,8 @@ bool ComponentList::input(InputConfig* config, Input input)
     if (size() == 0)
         return false;
 
+    mSingleRowScroll = false;
+
     if (input.value &&
         (config->isMappedTo("a", input) || config->isMappedLike("lefttrigger", input) ||
          config->isMappedLike("righttrigger", input))) {
@@ -86,9 +96,11 @@ bool ComponentList::input(InputConfig* config, Input input)
 
     // Input handler didn't consume the input - try to scroll.
     if (config->isMappedLike("up", input)) {
+        mSingleRowScroll = true;
         return listInput(input.value != 0 ? -1 : 0);
     }
     else if (config->isMappedLike("down", input)) {
+        mSingleRowScroll = true;
         return listInput(input.value != 0 ? 1 : 0);
     }
     else if (config->isMappedLike("leftshoulder", input)) {
@@ -115,6 +127,12 @@ bool ComponentList::input(InputConfig* config, Input input)
 
 void ComponentList::update(int deltaTime)
 {
+    if (!mFocused && mLoopRows) {
+        mLoopOffset = 0;
+        mLoopOffset2 = 0;
+        mLoopTime = 0;
+    }
+
     const float totalHeight = getTotalRowHeight();
 
     // Scroll indicator logic, used by ScrollIndicatorComponent.
@@ -142,15 +160,44 @@ void ComponentList::update(int deltaTime)
     }
 
     if (scrollIndicatorChanged == true && mScrollIndicatorChangedCallback != nullptr)
-        mScrollIndicatorChangedCallback(mScrollIndicatorStatus);
+        mScrollIndicatorChangedCallback(mScrollIndicatorStatus, mSingleRowScroll);
 
     listUpdate(deltaTime);
 
     if (size()) {
+        float rowWidth{0.0f};
+
         // Update our currently selected row.
         for (auto it = mEntries.at(mCursor).data.elements.cbegin();
-             it != mEntries.at(mCursor).data.elements.cend(); it++)
+             it != mEntries.at(mCursor).data.elements.cend(); it++) {
             it->component->update(deltaTime);
+            rowWidth += it->component->getSize().x;
+        }
+
+        if (mLoopRows && rowWidth + mHorizontalPadding / 2.0f > mSize.x) {
+            // Loop the text.
+            const float speed{
+                Font::get(FONT_SIZE_MEDIUM)->sizeText("ABCDEFGHIJKLMNOPQRSTUVWXYZ").x * 0.247f};
+            const float delay{1500.0f};
+            const float scrollLength{rowWidth};
+            const float returnLength{speed * 1.5f};
+            const float scrollTime{(scrollLength * 1000.0f) / speed};
+            const float returnTime{(returnLength * 1000.0f) / speed};
+            const int maxTime{static_cast<int>(delay + scrollTime + returnTime)};
+
+            mLoopTime += deltaTime;
+            while (mLoopTime > maxTime)
+                mLoopTime -= maxTime;
+
+            mLoopOffset = static_cast<int>(Utils::Math::loop(delay, scrollTime + returnTime,
+                                                             static_cast<float>(mLoopTime),
+                                                             scrollLength + returnLength));
+
+            if (mLoopOffset > (scrollLength - (mSize.x - returnLength)))
+                mLoopOffset2 = static_cast<int>(mLoopOffset - (scrollLength + returnLength));
+            else if (mLoopOffset2 < 0)
+                mLoopOffset2 = 0;
+        }
     }
 }
 
@@ -158,6 +205,12 @@ void ComponentList::onCursorChanged(const CursorState& state)
 {
     mSetupCompleted = true;
 
+    if (mLoopRows) {
+        mLoopOffset = 0;
+        mLoopOffset2 = 0;
+        mLoopTime = 0;
+    }
+
     // Update the selector bar position.
     // In the future this might be animated.
     mSelectorBarOffset = 0;
@@ -196,14 +249,24 @@ void ComponentList::updateCameraOffset()
         while (mCameraOffset < target && i < mEntries.size()) {
             mCameraOffset += getRowHeight(mEntries.at(i).data);
             if (mCameraOffset > totalHeight - mSize.y) {
-                if (mSetupCompleted && mCameraOffset != oldCameraOffset)
+                if (mSetupCompleted) {
-                    mBottomCameraOffset = true;
+                    if (mScrollIndicatorStatus == ComponentList::SCROLL_NONE &&
+                        oldCameraOffset == 0.0f)
+                        break;
+                    if (mScrollIndicatorStatus != ComponentList::SCROLL_NONE &&
+                        oldCameraOffset == 0.0f)
+                        mBottomCameraOffset = true;
+                    else if (mCameraOffset != oldCameraOffset)
+                        mBottomCameraOffset = true;
+                }
                 break;
             }
             i++;
         }
 
-        if (mCameraOffset < oldCameraOffset)
+        if (mCameraOffset < oldCameraOffset &&
+            (oldCameraOffset > mSelectorBarOffset ||
+             mScrollIndicatorStatus != ComponentList::SCROLL_NONE))
             mBottomCameraOffset = false;
 
         if (mCameraOffset < 0.0f)
@@ -226,22 +289,47 @@ void ComponentList::render(const glm::mat4& parentTrans)
     dim.x = (trans[0].x * dim.x + trans[3].x) - trans[3].x;
     dim.y = (trans[1].y * dim.y + trans[3].y) - trans[3].y;
 
-    Renderer::pushClipRect(
+    const int clipRectPosX{static_cast<int>(std::round(trans[3].x))};
-        glm::ivec2{static_cast<int>(std::round(trans[3].x)),
+    const int clipRectPosY{static_cast<int>(std::round(trans[3].y))};
-                   static_cast<int>(std::round(trans[3].y))},
+    const int clipRectSizeX{static_cast<int>(std::round(dim.x))};
-        glm::ivec2{static_cast<int>(std::round(dim.x)), static_cast<int>(std::round(dim.y))});
+    const int clipRectSizeY{static_cast<int>(std::round(dim.y))};
+
+    Renderer::pushClipRect(glm::ivec2{clipRectPosX, clipRectPosY},
+                           glm::ivec2{clipRectSizeX, clipRectSizeY});
 
     // Scroll the camera.
     trans = glm::translate(trans, glm::vec3{0.0f, -mCameraOffset, 0.0f});
 
+    glm::mat4 loopTrans{trans};
+
     // Draw our entries.
     std::vector<GuiComponent*> drawAfterCursor;
     bool drawAll;
     for (size_t i = 0; i < mEntries.size(); i++) {
+
+        if (mLoopRows && mFocused && mLoopOffset > 0) {
+            loopTrans =
+                glm::translate(trans, glm::vec3{static_cast<float>(-mLoopOffset), 0.0f, 0.0f});
+        }
+
         auto& entry = mEntries.at(i);
         drawAll = !mFocused || i != static_cast<unsigned int>(mCursor);
         for (auto it = entry.data.elements.cbegin(); it != entry.data.elements.cend(); it++) {
             if (drawAll || it->invert_when_selected) {
+                auto renderLoopFunc = [&]() {
+                    // Needed to avoid flickering when returning to the start position.
+                    if (mLoopOffset == 0 && mLoopOffset2 == 0)
+                        mLoopScroll = false;
+                    it->component->render(loopTrans);
+                    // Render row again if text is moved far enough for it to repeat.
+                    if (mLoopOffset2 < 0 || mLoopScroll) {
+                        mLoopScroll = true;
+                        loopTrans = glm::translate(
+                            trans, glm::vec3{static_cast<float>(-mLoopOffset2), 0.0f, 0.0f});
+                        it->component->render(loopTrans);
+                    }
+                };
+
                 // For the row where the cursor is at, we want to remove any hue from the
                 // font or image before inverting, as it would otherwise lead to an ugly
                 // inverted color (e.g. red inverting to a green hue).
@@ -260,15 +348,14 @@ void ComponentList::render(const glm::mat4& parentTrans)
                     unsigned char byteBlue = origColor >> 8 & 0xFF;
                     // If it's neutral, just proceed with normal rendering.
                     if (byteRed == byteGreen && byteGreen == byteBlue) {
-                        it->component->render(trans);
+                        renderLoopFunc();
                     }
                     else {
                         if (isTextComponent)
                             it->component->setColor(DEFAULT_INVERTED_TEXTCOLOR);
                         else
                             it->component->setColorShift(DEFAULT_INVERTED_IMAGECOLOR);
-
+                        renderLoopFunc();
-                        it->component->render(trans);
                         // Revert to the original color after rendering.
                         if (isTextComponent)
                             it->component->setColor(origColor);

es-core/src/components/ComponentList.h

@@ -86,6 +86,22 @@ public:
     float getTotalRowHeight() const;
     float getRowHeight(int row) const { return getRowHeight(mEntries.at(row).data); }
 
+    // Horizontal looping for row content that doesn't fit on-screen.
+    void setLoopRows(bool state) { mLoopRows = state; }
+    void stopLooping()
+    {
+        mLoopOffset = 0;
+        mLoopOffset2 = 0;
+        mLoopTime = 0;
+    }
+
+    void resetScrollIndicatorStatus()
+    {
+        mScrollIndicatorStatus = SCROLL_NONE;
+        if (mScrollIndicatorChangedCallback != nullptr)
+            mScrollIndicatorChangedCallback(mScrollIndicatorStatus, false);
+    }
+
     void setCursorChangedCallback(const std::function<void(CursorState state)>& callback)
     {
         mCursorChangedCallback = callback;
@@ -95,7 +111,7 @@ public:
         return mCursorChangedCallback;
     }
     void setScrollIndicatorChangedCallback(
-        const std::function<void(ScrollIndicator state)>& callback)
+        const std::function<void(ScrollIndicator state, bool singleRowScroll)>& callback)
     {
         mScrollIndicatorChangedCallback = callback;
     }
@@ -107,6 +123,7 @@ private:
     bool mFocused;
     bool mSetupCompleted;
     bool mBottomCameraOffset;
+    bool mSingleRowScroll;
 
     void updateCameraOffset();
     void updateElementPosition(const ComponentListRow& row);
@@ -118,8 +135,15 @@ private:
     float mSelectorBarOffset;
     float mCameraOffset;
 
+    bool mLoopRows;
+    bool mLoopScroll;
+    int mLoopOffset;
+    int mLoopOffset2;
+    int mLoopTime;
+
     std::function<void(CursorState state)> mCursorChangedCallback;
-    std::function<void(ScrollIndicator state)> mScrollIndicatorChangedCallback;
+    std::function<void(ScrollIndicator state, bool singleRowScroll)>
+        mScrollIndicatorChangedCallback;
 
     ScrollIndicator mScrollIndicatorStatus;
 };

es-core/src/components/FlexboxComponent.cpp

@@ -0,0 +1,258 @@
+//  SPDX-License-Identifier: MIT
+//
+//  EmulationStation Desktop Edition
+//  FlexboxComponent.cpp
+//
+//  Flexbox layout component.
+//
+
+#define DEFAULT_DIRECTION "row"
+#define DEFAULT_ALIGNMENT "left"
+#define DEFAULT_ITEMS_PER_LINE 4
+#define DEFAULT_LINES 2
+#define DEFAULT_ITEM_PLACEMENT "center"
+#define DEFAULT_MARGIN_X std::roundf(0.01f * Renderer::getScreenWidth())
+#define DEFAULT_MARGIN_Y std::roundf(0.01f * Renderer::getScreenHeight())
+
+#include "components/FlexboxComponent.h"
+
+#include "Settings.h"
+#include "ThemeData.h"
+
+FlexboxComponent::FlexboxComponent(Window* window, std::vector<FlexboxItem>& items)
+    : GuiComponent{window}
+    , mItems(items)
+    , mDirection{DEFAULT_DIRECTION}
+    , mAlignment{DEFAULT_ALIGNMENT}
+    , mLines{DEFAULT_LINES}
+    , mItemsPerLine{DEFAULT_ITEMS_PER_LINE}
+    , mItemPlacement{DEFAULT_ITEM_PLACEMENT}
+    , mItemMargin{glm::vec2{DEFAULT_MARGIN_X, DEFAULT_MARGIN_Y}}
+    , mOverlayPosition{0.5f, 0.5f}
+    , mOverlaySize{0.5f}
+    , mLayoutValid{false}
+{
+}
+
+void FlexboxComponent::render(const glm::mat4& parentTrans)
+{
+    if (!isVisible())
+        return;
+
+    if (!mLayoutValid)
+        computeLayout();
+
+    glm::mat4 trans{parentTrans * getTransform()};
+    Renderer::setMatrix(trans);
+
+    if (Settings::getInstance()->getBool("DebugImage"))
+        Renderer::drawRect(0.0f, 0.0f, ceilf(mSize.x), ceilf(mSize.y), 0xFF000033, 0xFF000033);
+
+    for (auto& item : mItems) {
+        if (!item.visible)
+            continue;
+        if (mOpacity == 255) {
+            item.baseImage.render(trans);
+            if (item.overlayImage.getTexture() != nullptr)
+                item.overlayImage.render(trans);
+        }
+        else {
+            item.baseImage.setOpacity(mOpacity);
+            item.baseImage.render(trans);
+            item.baseImage.setOpacity(255);
+            if (item.overlayImage.getTexture() != nullptr) {
+                item.overlayImage.setOpacity(mOpacity);
+                item.overlayImage.render(trans);
+                item.overlayImage.setOpacity(255);
+            }
+        }
+    }
+}
+
+void FlexboxComponent::setItemMargin(glm::vec2 value)
+{
+    if (value.x == -1.0f)
+        mItemMargin.x = std::roundf(value.y * Renderer::getScreenHeight());
+    else
+        mItemMargin.x = std::roundf(value.x * Renderer::getScreenWidth());
+
+    if (value.y == -1.0f)
+        mItemMargin.y = std::roundf(value.x * Renderer::getScreenWidth());
+    else
+        mItemMargin.y = std::roundf(value.y * Renderer::getScreenHeight());
+
+    mLayoutValid = false;
+}
+
+void FlexboxComponent::computeLayout()
+{
+    // If we're not clamping itemMargin to a reasonable value, all kinds of weird rendering
+    // issues could occur.
+    mItemMargin.x = glm::clamp(mItemMargin.x, 0.0f, mSize.x / 2.0f);
+    mItemMargin.y = glm::clamp(mItemMargin.y, 0.0f, mSize.y / 2.0f);
+
+    // Also keep the size within reason.
+    mSize.x = glm::clamp(mSize.x, static_cast<float>(Renderer::getScreenWidth()) * 0.03f,
+                         static_cast<float>(Renderer::getScreenWidth()));
+    mSize.y = glm::clamp(mSize.y, static_cast<float>(Renderer::getScreenHeight()) * 0.03f,
+                         static_cast<float>(Renderer::getScreenHeight()));
+
+    if (mItemsPerLine * mLines < mItems.size()) {
+        LOG(LogWarning)
+            << "FlexboxComponent: Invalid theme configuration, the number of badges"
+               " exceeds the product of <lines> times <itemsPerLine>, setting <itemsPerLine> to "
+            << mItems.size();
+        mItemsPerLine = static_cast<unsigned int>(mItems.size());
+    }
+
+    glm::vec2 grid{};
+
+    if (mDirection == "row")
+        grid = {mItemsPerLine, mLines};
+    else
+        grid = {mLines, mItemsPerLine};
+
+    glm::vec2 maxItemSize{(mSize + mItemMargin - grid * mItemMargin) / grid};
+
+    float rowHeight{0.0f};
+    bool firstItem{true};
+
+    // Calculate maximum item dimensions.
+    for (auto& item : mItems) {
+        if (!item.visible)
+            continue;
+
+        glm::vec2 sizeDiff{item.baseImage.getSize() / maxItemSize};
+
+        // The first item dictates the maximum width for the rest.
+        if (firstItem) {
+            maxItemSize.x = (item.baseImage.getSize() / std::max(sizeDiff.x, sizeDiff.y)).x;
+            sizeDiff = item.baseImage.getSize() / maxItemSize;
+            item.baseImage.setSize((item.baseImage.getSize() / std::max(sizeDiff.x, sizeDiff.y)));
+            firstItem = false;
+        }
+        else {
+            item.baseImage.setSize((item.baseImage.getSize() / std::max(sizeDiff.x, sizeDiff.y)));
+        }
+
+        if (item.baseImage.getSize().y > rowHeight)
+            rowHeight = item.baseImage.getSize().y;
+    }
+
+    // Update the maximum item height.
+    maxItemSize.y = 0.0f;
+    for (auto& item : mItems) {
+        if (!item.visible)
+            continue;
+        if (item.baseImage.getSize().y > maxItemSize.y)
+            maxItemSize.y = item.baseImage.getSize().y;
+    }
+
+    maxItemSize = glm::round(maxItemSize);
+
+    bool alignRight{mAlignment == "right"};
+    float alignRightComp{0.0f};
+
+    // If right-aligning, move the overall container contents during grid setup.
+    if (alignRight && mDirection == "row")
+        alignRightComp =
+            std::round(mSize.x - ((maxItemSize.x + mItemMargin.x) * grid.x) + mItemMargin.x);
+
+    std::vector<glm::vec2> itemPositions;
+
+    // Lay out the grid.
+    if (mDirection == "row") {
+        for (int y = 0; y < grid.y; y++) {
+            for (int x = 0; x < grid.x; x++) {
+                itemPositions.push_back(
+                    glm::vec2{(x * (maxItemSize.x + mItemMargin.x) + alignRightComp),
+                              y * (rowHeight + mItemMargin.y)});
+            }
+        }
+    }
+    else if (mDirection == "column" && !alignRight) {
+        for (int x = 0; x < grid.x; x++) {
+            for (int y = 0; y < grid.y; y++) {
+                itemPositions.push_back(glm::vec2{(x * (maxItemSize.x + mItemMargin.x)),
+                                                  y * (rowHeight + mItemMargin.y)});
+            }
+        }
+    }
+    else { // Right-aligned.
+        for (int x = 0; x < grid.x; x++) {
+            for (int y = 0; y < grid.y; y++) {
+                itemPositions.push_back(
+                    glm::vec2{(mSize.x - (x * (maxItemSize.x + mItemMargin.x)) - maxItemSize.x),
+                              y * (rowHeight + mItemMargin.y)});
+            }
+        }
+    }
+
+    int pos{0};
+    float lastY{0.0f};
+    float itemsOnLastRow{0};
+
+    // Position items on the grid.
+    for (auto& item : mItems) {
+        if (!item.visible)
+            continue;
+
+        if (mDirection == "row" && pos > 0) {
+            if (itemPositions[pos - 1].y < itemPositions[pos].y) {
+                lastY = itemPositions[pos].y;
+                itemsOnLastRow = 0;
+            }
+        }
+
+        float verticalOffset{0.0f};
+
+        // For any items that do not fill the maximum height, position these either on
+        // top/start (implicit), center or bottom/end.
+        if (item.baseImage.getSize().y < maxItemSize.y) {
+            if (mItemPlacement == "center") {
+                verticalOffset = std::floor((maxItemSize.y - item.baseImage.getSize().y) / 2.0f);
+            }
+            else if (mItemPlacement == "end") {
+                verticalOffset = maxItemSize.y - item.baseImage.getSize().y;
+            }
+        }
+
+        item.baseImage.setPosition(itemPositions[pos].x, itemPositions[pos].y + verticalOffset,
+                                   0.0f);
+
+        // Optional overlay image.
+        if (item.overlayImage.getTexture() != nullptr) {
+            item.overlayImage.setResize(item.baseImage.getSize().x * mOverlaySize, 0.0f);
+            item.overlayImage.setPosition(
+                item.baseImage.getPosition().x + (item.baseImage.getSize().x * mOverlayPosition.x) -
+                    item.overlayImage.getSize().x / 2.0f,
+                item.baseImage.getPosition().y + (item.baseImage.getSize().y * mOverlayPosition.y) -
+                    item.overlayImage.getSize().y / 2.0f);
+        }
+
+        // This rasterizes the SVG images so they look nice and smooth.
+        item.baseImage.setResize(item.baseImage.getSize());
+
+        itemsOnLastRow++;
+        pos++;
+    }
+
+    // Apply right-align to the items if we're using row mode.
+    if (alignRight && mDirection == "row") {
+        for (auto& item : mItems) {
+            if (!item.visible)
+                continue;
+            glm::vec3 currPos{item.baseImage.getPosition()};
+            if (currPos.y == lastY) {
+                const float offset{(grid.x - itemsOnLastRow) * (maxItemSize.x + mItemMargin.x)};
+                item.baseImage.setPosition(currPos.x + offset, currPos.y, currPos.z);
+                if (item.overlayImage.getTexture() != nullptr) {
+                    currPos = item.overlayImage.getPosition();
+                    item.overlayImage.setPosition(currPos.x + offset, currPos.y, currPos.z);
+                }
+            }
+        }
+    }
+
+    mLayoutValid = true;
+}

es-core/src/components/FlexboxComponent.h

@@ -0,0 +1,101 @@
+//  SPDX-License-Identifier: MIT
+//
+//  EmulationStation Desktop Edition
+//  FlexboxComponent.h
+//
+//  Flexbox layout component.
+//
+
+#ifndef ES_CORE_COMPONENTS_FLEXBOX_COMPONENT_H
+#define ES_CORE_COMPONENTS_FLEXBOX_COMPONENT_H
+
+#include "GuiComponent.h"
+#include "Window.h"
+#include "components/ImageComponent.h"
+
+class FlexboxComponent : public GuiComponent
+{
+public:
+    struct FlexboxItem {
+        // Optional label, mostly a convenience for the calling class to track items.
+        std::string label;
+        // Main image that governs grid sizing and placement.
+        ImageComponent baseImage{nullptr};
+        // Optional overlay image that can be sized and positioned relative to the base image.
+        ImageComponent overlayImage{nullptr};
+        bool visible = false;
+    };
+
+    FlexboxComponent(Window* window, std::vector<FlexboxItem>& items);
+
+    // Getters/setters for the layout.
+    std::string getDirection() const { return mDirection; }
+    void setDirection(const std::string& direction)
+    {
+        assert(direction == "row" || direction == "column");
+        mDirection = direction;
+    }
+
+    std::string getAlignment() const { return mAlignment; }
+    void setAlignment(const std::string& value)
+    {
+        assert(value == "left" || value == "right");
+        mAlignment = value;
+        mLayoutValid = false;
+    }
+
+    unsigned int getLines() const { return mLines; }
+    void setLines(unsigned int value)
+    {
+        mLines = value;
+        mLayoutValid = false;
+    }
+
+    unsigned int getItemsPerLine() const { return mItemsPerLine; }
+    void setItemsPerLine(unsigned int value)
+    {
+        mItemsPerLine = value;
+        mLayoutValid = false;
+    }
+
+    std::string getItemPlacement() const { return mItemPlacement; }
+    void setItemPlacement(const std::string& value)
+    {
+        assert(value == "start" || value == "center" || value == "end" || value == "stretch");
+        mItemPlacement = value;
+        mLayoutValid = false;
+    }
+
+    glm::vec2 getItemMargin() const { return mItemMargin; }
+    void setItemMargin(glm::vec2 value);
+
+    glm::vec2 getOverlayPosition() const { return mOverlayPosition; }
+    void setOverlayPosition(glm::vec2 position) { mOverlayPosition = position; }
+
+    float getOverlaySize() const { return mOverlaySize; }
+    void setOverlaySize(float size) { mOverlaySize = size; }
+
+    void onSizeChanged() override { mLayoutValid = false; }
+    void render(const glm::mat4& parentTrans) override;
+
+private:
+    // Calculate flexbox layout.
+    void computeLayout();
+
+    std::vector<FlexboxItem>& mItems;
+
+    // Layout options.
+    std::string mDirection;
+    std::string mAlignment;
+    unsigned int mLines;
+    unsigned int mItemsPerLine;
+    std::string mItemPlacement;
+    glm::vec2 mItemMargin;
+
+    glm::vec2 mOverlayPosition;
+    float mOverlaySize;
+
+    bool mLayoutValid;
+};
+
+#endif // ES_CORE_COMPONENTS_FLEXBOX_COMPONENT_H

es-core/src/components/HelpComponent.cpp

@@ -34,129 +34,129 @@ void HelpComponent::assignIcons()
 
     // These graphics files are common between all controller types.
     sIconPathMap["up/down"] = mStyle.mCustomButtons.dpad_updown.empty() ?
-                                  ":/help/dpad_updown.svg" :
+                                  ":/graphics/help/dpad_updown.svg" :
                                   mStyle.mCustomButtons.dpad_updown;
     sIconPathMap["left/right"] = mStyle.mCustomButtons.dpad_leftright.empty() ?
-                                     ":/help/dpad_leftright.svg" :
+                                     ":/graphics/help/dpad_leftright.svg" :
                                      mStyle.mCustomButtons.dpad_leftright;
     sIconPathMap["up/down/left/right"] = mStyle.mCustomButtons.dpad_all.empty() ?
-                                             ":/help/dpad_all.svg" :
+                                             ":/graphics/help/dpad_all.svg" :
                                              mStyle.mCustomButtons.dpad_all;
     sIconPathMap["thumbstickclick"] = mStyle.mCustomButtons.thumbstick_click.empty() ?
-                                          ":/help/thumbstick_click.svg" :
+                                          ":/graphics/help/thumbstick_click.svg" :
                                           mStyle.mCustomButtons.thumbstick_click;
-    sIconPathMap["l"] = mStyle.mCustomButtons.button_l.empty() ? ":/help/button_l.svg" :
+    sIconPathMap["l"] = mStyle.mCustomButtons.button_l.empty() ? ":/graphics/help/button_l.svg" :
                                                                  mStyle.mCustomButtons.button_l;
-    sIconPathMap["r"] = mStyle.mCustomButtons.button_r.empty() ? ":/help/button_r.svg" :
+    sIconPathMap["r"] = mStyle.mCustomButtons.button_r.empty() ? ":/graphics/help/button_r.svg" :
                                                                  mStyle.mCustomButtons.button_r;
-    sIconPathMap["lr"] = mStyle.mCustomButtons.button_lr.empty() ? ":/help/button_lr.svg" :
+    sIconPathMap["lr"] = mStyle.mCustomButtons.button_lr.empty() ? ":/graphics/help/button_lr.svg" :
                                                                    mStyle.mCustomButtons.button_lr;
-    sIconPathMap["lt"] = mStyle.mCustomButtons.button_lt.empty() ? ":/help/button_lt.svg" :
+    sIconPathMap["lt"] = mStyle.mCustomButtons.button_lt.empty() ? ":/graphics/help/button_lt.svg" :
                                                                    mStyle.mCustomButtons.button_lt;
-    sIconPathMap["rt"] = mStyle.mCustomButtons.button_rt.empty() ? ":/help/button_rt.svg" :
+    sIconPathMap["rt"] = mStyle.mCustomButtons.button_rt.empty() ? ":/graphics/help/button_rt.svg" :
                                                                    mStyle.mCustomButtons.button_rt;
 
     // These graphics files are custom per controller type.
     if (controllerType == "snes") {
         sIconPathMap["a"] = mStyle.mCustomButtons.button_a_SNES.empty() ?
-                                ":/help/button_a_SNES.svg" :
+                                ":/graphics/help/button_a_SNES.svg" :
                                 mStyle.mCustomButtons.button_a_SNES;
         sIconPathMap["b"] = mStyle.mCustomButtons.button_b_SNES.empty() ?
-                                ":/help/button_b_SNES.svg" :
+                                ":/graphics/help/button_b_SNES.svg" :
                                 mStyle.mCustomButtons.button_b_SNES;
         sIconPathMap["x"] = mStyle.mCustomButtons.button_x_SNES.empty() ?
-                                ":/help/button_x_SNES.svg" :
+                                ":/graphics/help/button_x_SNES.svg" :
                                 mStyle.mCustomButtons.button_x_SNES;
         sIconPathMap["y"] = mStyle.mCustomButtons.button_y_SNES.empty() ?
-                                ":/help/button_y_SNES.svg" :
+                                ":/graphics/help/button_y_SNES.svg" :
                                 mStyle.mCustomButtons.button_y_SNES;
         sIconPathMap["start"] = mStyle.mCustomButtons.button_start_SNES.empty() ?
-                                    ":/help/button_start_SNES.svg" :
+                                    ":/graphics/help/button_start_SNES.svg" :
                                     mStyle.mCustomButtons.button_start_SNES;
         sIconPathMap["back"] = mStyle.mCustomButtons.button_back_SNES.empty() ?
-                                   ":/help/button_back_SNES.svg" :
+                                   ":/graphics/help/button_back_SNES.svg" :
                                    mStyle.mCustomButtons.button_back_SNES;
     }
     else if (controllerType == "ps4") {
         sIconPathMap["a"] = mStyle.mCustomButtons.button_a_PS.empty() ?
-                                ":/help/button_a_PS.svg" :
+                                ":/graphics/help/button_a_PS.svg" :
                                 mStyle.mCustomButtons.button_a_PS;
         sIconPathMap["b"] = mStyle.mCustomButtons.button_b_PS.empty() ?
-                                ":/help/button_b_PS.svg" :
+                                ":/graphics/help/button_b_PS.svg" :
                                 mStyle.mCustomButtons.button_b_PS;
         sIconPathMap["x"] = mStyle.mCustomButtons.button_x_PS.empty() ?
-                                ":/help/button_x_PS.svg" :
+                                ":/graphics/help/button_x_PS.svg" :
                                 mStyle.mCustomButtons.button_x_PS;
         sIconPathMap["y"] = mStyle.mCustomButtons.button_y_PS.empty() ?
-                                ":/help/button_y_PS.svg" :
+                                ":/graphics/help/button_y_PS.svg" :
                                 mStyle.mCustomButtons.button_y_PS;
         sIconPathMap["start"] = mStyle.mCustomButtons.button_start_PS4.empty() ?
-                                    ":/help/button_start_PS4.svg" :
+                                    ":/graphics/help/button_start_PS4.svg" :
                                     mStyle.mCustomButtons.button_start_PS4;
         sIconPathMap["back"] = mStyle.mCustomButtons.button_back_PS4.empty() ?
-                                   ":/help/button_back_PS4.svg" :
+                                   ":/graphics/help/button_back_PS4.svg" :
                                    mStyle.mCustomButtons.button_back_PS4;
     }
     else if (controllerType == "ps5") {
         sIconPathMap["a"] = mStyle.mCustomButtons.button_a_PS.empty() ?
-                                ":/help/button_a_PS.svg" :
+                                ":/graphics/help/button_a_PS.svg" :
                                 mStyle.mCustomButtons.button_a_PS;
         sIconPathMap["b"] = mStyle.mCustomButtons.button_b_PS.empty() ?
-                                ":/help/button_b_PS.svg" :
+                                ":/graphics/help/button_b_PS.svg" :
                                 mStyle.mCustomButtons.button_b_PS;
         sIconPathMap["x"] = mStyle.mCustomButtons.button_x_PS.empty() ?
-                                ":/help/button_x_PS.svg" :
+                                ":/graphics/help/button_x_PS.svg" :
                                 mStyle.mCustomButtons.button_x_PS;
         sIconPathMap["y"] = mStyle.mCustomButtons.button_y_PS.empty() ?
-                                ":/help/button_y_PS.svg" :
+                                ":/graphics/help/button_y_PS.svg" :
                                 mStyle.mCustomButtons.button_y_PS;
         sIconPathMap["start"] = mStyle.mCustomButtons.button_start_PS5.empty() ?
-                                    ":/help/button_start_PS5.svg" :
+                                    ":/graphics/help/button_start_PS5.svg" :
                                     mStyle.mCustomButtons.button_start_PS5;
         sIconPathMap["back"] = mStyle.mCustomButtons.button_back_PS5.empty() ?
-                                   ":/help/button_back_PS5.svg" :
+                                   ":/graphics/help/button_back_PS5.svg" :
                                    mStyle.mCustomButtons.button_back_PS5;
     }
     else if (controllerType == "xbox360") {
 
         sIconPathMap["a"] = mStyle.mCustomButtons.button_a_XBOX.empty() ?
-                                ":/help/button_a_XBOX.svg" :
+                                ":/graphics/help/button_a_XBOX.svg" :
                                 mStyle.mCustomButtons.button_a_XBOX;
         sIconPathMap["b"] = mStyle.mCustomButtons.button_b_XBOX.empty() ?
-                                ":/help/button_b_XBOX.svg" :
+                                ":/graphics/help/button_b_XBOX.svg" :
                                 mStyle.mCustomButtons.button_b_XBOX;
         sIconPathMap["x"] = mStyle.mCustomButtons.button_x_XBOX.empty() ?
-                                ":/help/button_x_XBOX.svg" :
+                                ":/graphics/help/button_x_XBOX.svg" :
                                 mStyle.mCustomButtons.button_x_XBOX;
         sIconPathMap["y"] = mStyle.mCustomButtons.button_y_XBOX.empty() ?
-                                ":/help/button_y_XBOX.svg" :
+                                ":/graphics/help/button_y_XBOX.svg" :
                                 mStyle.mCustomButtons.button_y_XBOX;
         sIconPathMap["start"] = mStyle.mCustomButtons.button_start_XBOX360.empty() ?
-                                    ":/help/button_start_XBOX360.svg" :
+                                    ":/graphics/help/button_start_XBOX360.svg" :
                                     mStyle.mCustomButtons.button_start_XBOX360;
         sIconPathMap["back"] = mStyle.mCustomButtons.button_back_XBOX360.empty() ?
-                                   ":/help/button_back_XBOX360.svg" :
+                                   ":/graphics/help/button_back_XBOX360.svg" :
                                    mStyle.mCustomButtons.button_back_XBOX360;
     }
     else {
         // Xbox One and later.
         sIconPathMap["a"] = mStyle.mCustomButtons.button_a_XBOX.empty() ?
-                                ":/help/button_a_XBOX.svg" :
+                                ":/graphics/help/button_a_XBOX.svg" :
                                 mStyle.mCustomButtons.button_a_XBOX;
         sIconPathMap["b"] = mStyle.mCustomButtons.button_b_XBOX.empty() ?
-                                ":/help/button_b_XBOX.svg" :
+                                ":/graphics/help/button_b_XBOX.svg" :
                                 mStyle.mCustomButtons.button_b_XBOX;
         sIconPathMap["x"] = mStyle.mCustomButtons.button_x_XBOX.empty() ?
-                                ":/help/button_x_XBOX.svg" :
+                                ":/graphics/help/button_x_XBOX.svg" :
                                 mStyle.mCustomButtons.button_x_XBOX;
         sIconPathMap["y"] = mStyle.mCustomButtons.button_y_XBOX.empty() ?
-                                ":/help/button_y_XBOX.svg" :
+                                ":/graphics/help/button_y_XBOX.svg" :
                                 mStyle.mCustomButtons.button_y_XBOX;
         sIconPathMap["start"] = mStyle.mCustomButtons.button_start_XBOX.empty() ?
-                                    ":/help/button_start_XBOX.svg" :
+                                    ":/graphics/help/button_start_XBOX.svg" :
                                     mStyle.mCustomButtons.button_start_XBOX;
         sIconPathMap["back"] = mStyle.mCustomButtons.button_back_XBOX.empty() ?
-                                   ":/help/button_back_XBOX.svg" :
+                                   ":/graphics/help/button_back_XBOX.svg" :
                                    mStyle.mCustomButtons.button_back_XBOX;
     }
 

es-core/src/components/ImageComponent.cpp

@@ -63,11 +63,8 @@ void ImageComponent::resize()
     else {
         // SVG rasterization is determined by height and rasterization is done in terms of pixels.
         // If rounding is off enough in the rasterization step (for images with extreme aspect
-        // ratios), it can cause cutoff when the aspect ratio breaks.
+        // ratios), it can cause cutoff when the aspect ratio breaks. So we always make sure to
-        // So we always make sure the resultant height is an integer to make sure cutoff doesn't
+        // round accordingly to avoid such issues.
-        // happen, and scale width from that (you'll see this scattered throughout the function).
-        // It's important to use floorf rather than round for this, as we never want to round up
-        // since that can lead to the cutoff just described.
         if (mTargetIsMax) {
             mSize = textureSize;
 
@@ -77,13 +74,11 @@ void ImageComponent::resize()
                 // This will be mTargetSize.x. We can't exceed it, nor be lower than it.
                 mSize.x *= resizeScale.x;
                 // We need to make sure we're not creating an image larger than max size.
-                mSize.y = std::min(floorf(mSize.y * resizeScale.x), mTargetSize.y);
+                mSize.y = floorf(std::min(mSize.y * resizeScale.x, mTargetSize.y));
             }
             else {
                 // This will be mTargetSize.y(). We can't exceed it.
-                mSize.y = floorf(mSize.y * resizeScale.y);
+                mSize.y *= resizeScale.y;
-                // For SVG rasterization, always calculate width from rounded height (see comment
-                // above). We need to make sure we're not creating an image larger than max size.
                 mSize.x = std::min((mSize.y / textureSize.y) * textureSize.x, mTargetSize.x);
             }
         }
@@ -106,9 +101,7 @@ void ImageComponent::resize()
                 float cropPercent = (mSize.x - mTargetSize.x) / (mSize.x * 2.0f);
                 crop(cropPercent, 0.0f, cropPercent, 0.0f);
             }
-            // For SVG rasterization, always calculate width from rounded height (see comment
+            mSize.y = std::max(mSize.y, mTargetSize.y);
-            // above). We need to make sure we're not creating an image smaller than min size.
-            mSize.y = std::max(floorf(mSize.y), mTargetSize.y);
             mSize.x = std::max((mSize.y / textureSize.y) * textureSize.x, mTargetSize.x);
         }
         else {
@@ -117,23 +110,24 @@ void ImageComponent::resize()
             mSize = mTargetSize == glm::vec2{} ? textureSize : mTargetSize;
 
             // If only one component is set, we resize in a way that maintains aspect ratio.
-            // For SVG rasterization, we always calculate width from rounded height (see
-            // comment above).
             if (!mTargetSize.x && mTargetSize.y) {
-                mSize.y = floorf(mTargetSize.y);
+                mSize.y = mTargetSize.y;
                 mSize.x = (mSize.y / textureSize.y) * textureSize.x;
             }
             else if (mTargetSize.x && !mTargetSize.y) {
-                mSize.y = floorf((mTargetSize.x / textureSize.x) * textureSize.y);
+                mSize.y = (mTargetSize.x / textureSize.x) * textureSize.y;
                 mSize.x = (mSize.y / textureSize.y) * textureSize.x;
             }
         }
     }
 
-    mSize.x = floorf(mSize.x);
+    // Make sure sub-pixel values are not rounded to zero.
-    mSize.y = floorf(mSize.y);
+    if (mSize.x < 1.0f)
-    // mSize.y() should already be rounded.
+        mSize.x = 1.0f;
-    mTexture->rasterizeAt(static_cast<size_t>(mSize.x), static_cast<size_t>(mSize.y));
+    if (mSize.y < 1.0f)
+        mSize.y = 1.0f;
+
+    mTexture->rasterizeAt(mSize.x, mSize.y);
 
     onSizeChanged();
 }
@@ -339,7 +333,7 @@ void ImageComponent::setSaturation(float saturation)
 
 void ImageComponent::updateVertices()
 {
-    if (!mTexture || !mTexture->isInitialized())
+    if (!mTexture)
         return;
 
     // We go through this mess to make sure everything is properly rounded.
@@ -404,7 +398,7 @@ void ImageComponent::render(const glm::mat4& parentTrans)
             Renderer::drawRect(0.0f, 0.0f, mSize.x, mSize.y, 0xFF000033, 0xFF000033);
         }
         // An image with zero size would normally indicate a corrupt image file.
-        if (mTexture->isInitialized() && mTexture->getSize() != glm::ivec2{}) {
+        if (mTexture->getSize() != glm::ivec2{}) {
             // Actually draw the image.
             // The bind() function returns false if the texture is not currently loaded. A blank
             // texture is bound in this case but we want to handle a fade so it doesn't just

es-core/src/components/ImageComponent.h

@@ -107,7 +107,8 @@ private:
     bool mTargetIsMin;
 
     // Calculates the correct mSize from our resizing information (set by setResize/setMaxSize).
-    // Used internally whenever the resizing parameters or texture change.
+    // Used internally whenever the resizing parameters or texture change. This function also
+    // initiates the SVG rasterization.
     void resize();
 
     Renderer::Vertex mVertices[4];

es-core/src/components/MenuComponent.cpp

@@ -21,7 +21,7 @@ MenuComponent::MenuComponent(Window* window,
                              const std::shared_ptr<Font>& titleFont)
     : GuiComponent(window)
     , mBackground(window)
-    , mGrid(window, glm::ivec2{3, 4})
+    , mGrid(window, glm::ivec2{2, 4})
     , mNeedsSaving(false)
 {
     addChild(&mBackground);
@@ -34,11 +34,11 @@ MenuComponent::MenuComponent(Window* window,
     mTitle->setHorizontalAlignment(ALIGN_CENTER);
     mTitle->setColor(0x555555FF);
     setTitle(title, titleFont);
-    mGrid.setEntry(mTitle, glm::ivec2{0, 0}, false, true, glm::ivec2{3, 2});
+    mGrid.setEntry(mTitle, glm::ivec2{0, 0}, false, true, glm::ivec2{2, 2});
 
     // Set up list which will never change (externally, anyway).
     mList = std::make_shared<ComponentList>(mWindow);
-    mGrid.setEntry(mList, glm::ivec2{0, 2}, true, true, glm::ivec2{3, 1});
+    mGrid.setEntry(mList, glm::ivec2{0, 2}, true, true, glm::ivec2{2, 1});
 
     // Set up scroll indicators.
     mScrollUp = std::make_shared<ImageComponent>(mWindow);
@@ -51,8 +51,8 @@ MenuComponent::MenuComponent(Window* window,
     mScrollDown->setResize(0.0f, mTitle->getFont()->getLetterHeight() / 2.0f);
     mScrollDown->setOrigin(0.0f, 0.35f);
 
-    mGrid.setEntry(mScrollUp, glm::ivec2{2, 0}, false, false, glm::ivec2{1, 1});
+    mGrid.setEntry(mScrollUp, glm::ivec2{1, 0}, false, false, glm::ivec2{1, 1});
-    mGrid.setEntry(mScrollDown, glm::ivec2{2, 1}, false, false, glm::ivec2{1, 1});
+    mGrid.setEntry(mScrollDown, glm::ivec2{1, 1}, false, false, glm::ivec2{1, 1});
 
     updateGrid();
     updateSize();
@@ -103,7 +103,7 @@ void MenuComponent::updateSize()
         int i = 0;
         while (i < mList->size()) {
             // Add the separator height to the row height so that it also gets properly rendered.
-            float rowHeight = mList->getRowHeight(i) + (1 * Renderer::getScreenHeightModifier());
+            float rowHeight = mList->getRowHeight(i) + (1.0f * Renderer::getScreenHeightModifier());
             if (height + rowHeight < maxHeight)
                 height += rowHeight;
             else
@@ -127,8 +127,7 @@ void MenuComponent::onSizeChanged()
     mGrid.setRowHeightPerc(1, TITLE_HEIGHT / mSize.y / 2.0f);
     mGrid.setRowHeightPerc(3, getButtonGridHeight() / mSize.y);
 
-    mGrid.setColWidthPerc(0, 0.07f);
+    mGrid.setColWidthPerc(1, 0.055f);
-    mGrid.setColWidthPerc(2, 0.07f);
 
     mGrid.setSize(mSize);
 }
@@ -152,7 +151,7 @@ void MenuComponent::updateGrid()
 
     if (mButtons.size()) {
         mButtonGrid = makeButtonGrid(mWindow, mButtons);
-        mGrid.setEntry(mButtonGrid, glm::ivec2{0, 3}, true, false, glm::ivec2{3, 1});
+        mGrid.setEntry(mButtonGrid, glm::ivec2{0, 3}, true, false, glm::ivec2{2, 1});
     }
 }
 

es-core/src/components/NinePatchComponent.cpp

@@ -59,7 +59,7 @@ void NinePatchComponent::buildVertices()
     else
         scaleFactor = glm::clamp(Renderer::getScreenWidthModifier(), 0.4f, 3.0f);
 
-    mTexture = TextureResource::get(mPath, false, false, true, true, scaleFactor);
+    mTexture = TextureResource::get(mPath, false, false, false, true, true, scaleFactor);
 
     if (mTexture->getSize() == glm::ivec2{}) {
         mVertices = nullptr;

es-core/src/components/OptionListComponent.h

@@ -76,8 +76,12 @@ public:
     // Handles positioning/resizing of text and arrows.
     void onSizeChanged() override
     {
-        mLeftArrow.setResize(0, mText.getFont()->getLetterHeight());
+        if (mText.getFont()->getLetterHeight() != mLeftArrow.getSize().y ||
-        mRightArrow.setResize(0, mText.getFont()->getLetterHeight());
+            mLeftArrow.getTexture()->getPendingRasterization())
+            mLeftArrow.setResize(0, mText.getFont()->getLetterHeight());
+        if (mText.getFont()->getLetterHeight() != mRightArrow.getSize().y ||
+            mRightArrow.getTexture()->getPendingRasterization())
+            mRightArrow.setResize(0, mText.getFont()->getLetterHeight());
 
         if (mSize.x < (mLeftArrow.getSize().x + mRightArrow.getSize().x)) {
             LOG(LogWarning) << "OptionListComponent too narrow";

es-core/src/components/RatingComponent.cpp

@@ -102,11 +102,10 @@ void RatingComponent::onSizeChanged()
         mSize.x = mSize.y * NUM_RATING_STARS;
 
     if (mSize.y > 0.0f) {
-        size_t heightPx = static_cast<size_t>(std::round(mSize.y));
         if (mFilledTexture)
-            mFilledTexture->rasterizeAt(heightPx, heightPx);
+            mFilledTexture->rasterizeAt(mSize.y, mSize.y);
         if (mUnfilledTexture)
-            mUnfilledTexture->rasterizeAt(heightPx, heightPx);
+            mUnfilledTexture->rasterizeAt(mSize.y, mSize.y);
     }
 
     updateVertices();

es-core/src/components/ScrollIndicatorComponent.h

@@ -34,7 +34,7 @@ public:
             // If the scroll indicators setting is disabled, then show a permanent down arrow
             // symbol when the component list contains more entries than can fit on screen.
             componentList.get()->setScrollIndicatorChangedCallback(
-                [scrollUp, scrollDown](ComponentList::ScrollIndicator state) {
+                [scrollUp, scrollDown](ComponentList::ScrollIndicator state, bool singleRowScroll) {
                     if (state == ComponentList::SCROLL_UP ||
                         state == ComponentList::SCROLL_UP_DOWN ||
                         state == ComponentList::SCROLL_DOWN) {
@@ -46,8 +46,9 @@ public:
             // If the scroll indicator setting is enabled, then also show the up and up/down
             // combination and switch between these as the list is scrolled.
             componentList.get()->setScrollIndicatorChangedCallback(
-                [this, scrollUp, scrollDown](ComponentList::ScrollIndicator state) {
+                [this, scrollUp, scrollDown](ComponentList::ScrollIndicator state,
-                    float fadeInTime{FADE_IN_TIME};
+                                             bool singleRowScroll) {
+                    float fadeTime{FADE_IN_TIME};
 
                     bool upFadeIn = false;
                     bool upFadeOut = false;
@@ -68,7 +69,7 @@ public:
                     else if (state == ComponentList::SCROLL_UP &&
                              mPreviousScrollState == ComponentList::SCROLL_DOWN) {
                         upFadeIn = true;
-                        fadeInTime *= 1.5f;
+                        fadeTime *= 2.0f;
                         scrollDown->setOpacity(0);
                     }
                     else if (state == ComponentList::SCROLL_UP_DOWN &&
@@ -95,17 +96,22 @@ public:
                     else if (state == ComponentList::SCROLL_DOWN &&
                              mPreviousScrollState == ComponentList::SCROLL_UP) {
                         downFadeIn = true;
-                        fadeInTime *= 1.5f;
+                        fadeTime *= 2.0f;
                         scrollUp->setOpacity(0);
                     }
 
+                    // If jumping more than one row using the shoulder or trigger buttons, then
+                    // don't fade the indicators.
+                    if (!singleRowScroll)
+                        fadeTime = 0.0f;
+
                     if (upFadeIn) {
                         auto upFadeInFunc = [scrollUp](float t) {
                             scrollUp->setOpacity(
                                 static_cast<unsigned char>(glm::mix(0.0f, 1.0f, t) * 255));
                         };
                         scrollUp->setAnimation(
-                            new LambdaAnimation(upFadeInFunc, static_cast<int>(fadeInTime)), 0,
+                            new LambdaAnimation(upFadeInFunc, static_cast<int>(fadeTime)), 0,
                             nullptr, false);
                     }
 
@@ -115,7 +121,7 @@ public:
                                 static_cast<unsigned char>(glm::mix(0.0f, 1.0f, t) * 255));
                         };
                         scrollUp->setAnimation(
-                            new LambdaAnimation(upFadeOutFunc, static_cast<int>(fadeInTime)), 0,
+                            new LambdaAnimation(upFadeOutFunc, static_cast<int>(fadeTime)), 0,
                             nullptr, true);
                     }
 
@@ -125,7 +131,7 @@ public:
                                 static_cast<unsigned char>(glm::mix(0.0f, 1.0f, t) * 255));
                         };
                         scrollDown->setAnimation(
-                            new LambdaAnimation(downFadeInFunc, static_cast<int>(fadeInTime)), 0,
+                            new LambdaAnimation(downFadeInFunc, static_cast<int>(fadeTime)), 0,
                             nullptr, false);
                     }
 
@@ -135,7 +141,7 @@ public:
                                 static_cast<unsigned char>(glm::mix(0.0f, 1.0f, t) * 255));
                         };
                         scrollDown->setAnimation(
-                            new LambdaAnimation(downFadeOutFunc, static_cast<int>(fadeInTime)), 0,
+                            new LambdaAnimation(downFadeOutFunc, static_cast<int>(fadeTime)), 0,
                             nullptr, true);
                     }
 

es-core/src/components/ScrollableContainer.cpp

@@ -18,6 +18,7 @@ ScrollableContainer::ScrollableContainer(Window* window)
     : GuiComponent{window}
     , mScrollPos{0.0f, 0.0f}
     , mScrollDir{0.0f, 0.0f}
+    , mClipSpacing{0.0f}
     , mAutoScrollDelay{0}
     , mAutoScrollSpeed{0}
     , mAutoScrollAccumulator{0}
@@ -81,6 +82,13 @@ void ScrollableContainer::update(int deltaTime)
     float lineSpacing{mChildren.front()->getLineSpacing()};
     float combinedHeight{mChildren.front()->getFont()->getHeight(lineSpacing)};
 
+    // Calculate the spacing which will be used to clip the container.
+    if (lineSpacing > 1.2f && mClipSpacing == 0.0f) {
+        const float minimumSpacing = mChildren.front()->getFont()->getHeight(1.2f);
+        const float currentSpacing = mChildren.front()->getFont()->getHeight(lineSpacing);
+        mClipSpacing = std::round((currentSpacing - minimumSpacing) / 2.0f);
+    }
+
     // Resize container to font height boundary to avoid rendering a fraction of the last line.
     if (!mUpdatedSize && contentSize.y > mSize.y) {
         float numLines{mSize.y / combinedHeight};
@@ -170,8 +178,13 @@ void ScrollableContainer::render(const glm::mat4& parentTrans)
     dimScaled.x = std::fabs(trans[3].x + mSize.x);
     dimScaled.y = std::fabs(trans[3].y + mSize.y);
 
-    glm::ivec2 clipDim{static_cast<int>(dimScaled.x - trans[3].x),
+    glm::ivec2 clipDim{static_cast<int>(ceilf(dimScaled.x - trans[3].x)),
-                       static_cast<int>(dimScaled.y - trans[3].y)};
+                       static_cast<int>(ceilf(dimScaled.y - trans[3].y))};
+
+    // By effectively clipping the upper and lower boundaries of the container we mostly avoid
+    // scrolling outside the vertical starting and ending positions.
+    clipPos.y += static_cast<int>(mClipSpacing);
+    clipDim.y -= static_cast<int>(mClipSpacing);
 
     Renderer::pushClipRect(clipPos, clipDim);
 

es-core/src/components/ScrollableContainer.h

@@ -44,6 +44,7 @@ private:
     float mAutoScrollDelayConstant;
     float mAutoScrollSpeedConstant;
     float mResolutionModifier;
+    float mClipSpacing;
 
     int mAutoScrollDelay;
     int mAutoScrollSpeed;

es-core/src/components/SliderComponent.cpp

@@ -8,6 +8,7 @@
 
 #include "components/SliderComponent.h"
 
+#include "Window.h"
 #include "resources/Font.h"
 
 #define MOVE_REPEAT_DELAY 500
@@ -15,15 +16,16 @@
 
 SliderComponent::SliderComponent(
     Window* window, float min, float max, float increment, const std::string& suffix)
-    : GuiComponent(window)
+    : GuiComponent{window}
-    , mMin(min)
+    , mMin{min}
-    , mMax(max)
+    , mMax{max}
-    , mSingleIncrement(increment)
+    , mSingleIncrement{increment}
-    , mMoveRate(0)
+    , mMoveRate{0.0f}
-    , mKnob(window)
+    , mBarHeight{0.0f}
-    , mSuffix(suffix)
+    , mKnob{window}
+    , mSuffix{suffix}
 {
-    assert((min - max) != 0);
+    assert((min - max) != 0.0f);
 
     // Some sane default value.
     mValue = (max + min) / 2.0f;
@@ -31,7 +33,7 @@ SliderComponent::SliderComponent(
     mKnob.setOrigin(0.5f, 0.5f);
     mKnob.setImage(":/graphics/slider_knob.svg");
 
-    setSize(Renderer::getScreenWidth() * 0.15f, Font::get(FONT_SIZE_MEDIUM)->getLetterHeight());
+    setSize(window->peekGui()->getSize().x * 0.26f, Font::get(FONT_SIZE_MEDIUM)->getLetterHeight());
 }
 
 bool SliderComponent::input(InputConfig* config, Input input)
@@ -41,7 +43,7 @@ bool SliderComponent::input(InputConfig* config, Input input)
             if (input.value)
                 setValue(mValue - mSingleIncrement);
 
-            mMoveRate = input.value ? -mSingleIncrement : 0;
+            mMoveRate = input.value ? -mSingleIncrement : 0.0f;
             mMoveAccumulator = -MOVE_REPEAT_DELAY;
             return true;
         }
@@ -49,13 +51,13 @@ bool SliderComponent::input(InputConfig* config, Input input)
             if (input.value)
                 setValue(mValue + mSingleIncrement);
 
-            mMoveRate = input.value ? mSingleIncrement : 0;
+            mMoveRate = input.value ? mSingleIncrement : 0.0f;
             mMoveAccumulator = -MOVE_REPEAT_DELAY;
             return true;
         }
     }
     else {
-        mMoveRate = 0;
+        mMoveRate = 0.0f;
     }
 
     return GuiComponent::input(config, input);
@@ -79,19 +81,26 @@ void SliderComponent::render(const glm::mat4& parentTrans)
     glm::mat4 trans{parentTrans * getTransform()};
     Renderer::setMatrix(trans);
 
-    // Render suffix.
+    if (Settings::getInstance()->getBool("DebugText")) {
-    if (mValueCache)
+        Renderer::drawRect(
-        mFont->renderTextCache(mValueCache.get());
+            mSize.x - mTextCache->metrics.size.x, (mSize.y - mTextCache->metrics.size.y) / 2.0f,
+            mTextCache->metrics.size.x, mTextCache->metrics.size.y, 0x0000FF33, 0x0000FF33);
+        Renderer::drawRect(mSize.x - mTextCache->metrics.size.x, 0.0f, mTextCache->metrics.size.x,
+                           mSize.y, 0x00000033, 0x00000033);
+    }
 
     float width{mSize.x - mKnob.getSize().x -
-                (mValueCache ?
+                (mTextCache ?
-                     mValueCache->metrics.size.x + (4.0f * Renderer::getScreenWidthModifier()) :
+                     mTextCache->metrics.size.x + (4.0f * Renderer::getScreenWidthModifier()) :
                      0.0f)};
 
-    // Render line.
+    // Render suffix.
-    const float lineWidth{2.0f * Renderer::getScreenHeightModifier()};
+    if (mTextCache)
-    Renderer::drawRect(mKnob.getSize().x / 2.0f, mSize.y / 2.0f - lineWidth / 2.0f, width,
+        mFont->renderTextCache(mTextCache.get());
-                       lineWidth, 0x777777FF, 0x777777FF);
+
+    // Render bar.
+    Renderer::drawRect(mKnob.getSize().x / 2.0f, mSize.y / 2.0f - mBarHeight / 2.0f, width,
+                       mBarHeight, 0x777777FF, 0x777777FF);
 
     // Render knob.
     mKnob.render(trans);
@@ -138,19 +147,33 @@ void SliderComponent::onValueChanged()
         const std::string max = ss.str();
 
         glm::vec2 textSize = mFont->sizeText(max);
-        mValueCache = std::shared_ptr<TextCache>(mFont->buildTextCache(
+        mTextCache = std::shared_ptr<TextCache>(mFont->buildTextCache(
             val, mSize.x - textSize.x, (mSize.y - textSize.y) / 2.0f, 0x777777FF));
-        mValueCache->metrics.size.x = textSize.x; // Fudge the width.
+        mTextCache->metrics.size.x = textSize.x; // Fudge the width.
     }
 
-    // Update knob position/size.
+    mKnob.setResize(0.0f, std::round(mSize.y * 0.7f));
-    mKnob.setResize(0, mSize.y * 0.7f);
-    float lineLength =
-        mSize.x - mKnob.getSize().x -
-        (mValueCache ? mValueCache->metrics.size.x + (4.0f * Renderer::getScreenWidthModifier()) :
-                       0.0f);
 
-    mKnob.setPosition(((mValue - mMin / 2.0f) / mMax) * lineLength + mKnob.getSize().x / 2.0f,
+    float barLength =
+        mSize.x - mKnob.getSize().x -
+        (mTextCache ? mTextCache->metrics.size.x + (4.0f * Renderer::getScreenWidthModifier()) :
+                      0.0f);
+
+    int barHeight = static_cast<int>(std::round(2.0f * Renderer::getScreenHeightModifier()));
+
+    // For very low resolutions, make sure the bar height is not rounded to zero.
+    if (barHeight == 0)
+        barHeight = 1;
+
+    // Resize the knob one pixel if necessary to keep the bar centered.
+    if (barHeight % 2 == 0 && static_cast<int>(mKnob.getSize().y) % 2 != 0)
+        mKnob.setResize(mKnob.getSize().x - 1.0f, mKnob.getSize().y - 1.0f);
+    else if (barHeight == 1 && static_cast<int>(mKnob.getSize().y) % 2 == 0)
+        mKnob.setResize(mKnob.getSize().x - 1.0f, mKnob.getSize().y - 1);
+
+    mBarHeight = static_cast<float>(barHeight);
+
+    mKnob.setPosition(((mValue - mMin / 2.0f) / mMax) * barLength + mKnob.getSize().x / 2.0f,
                       mSize.y / 2.0f);
 }
 

es-core/src/components/SliderComponent.h

@@ -45,13 +45,14 @@ private:
     float mValue;
     float mSingleIncrement;
     float mMoveRate;
+    float mBarHeight;
     int mMoveAccumulator;
 
     ImageComponent mKnob;
 
     std::string mSuffix;
     std::shared_ptr<Font> mFont;
-    std::shared_ptr<TextCache> mValueCache;
+    std::shared_ptr<TextCache> mTextCache;
 };
 
 #endif // ES_CORE_COMPONENTS_SLIDER_COMPONENT_H

es-core/src/components/SwitchComponent.cpp

@@ -71,6 +71,7 @@ void SwitchComponent::setValue(const std::string& statestring)
 void SwitchComponent::onStateChanged()
 {
     mImage.setImage(mState ? ":/graphics/on.svg" : ":/graphics/off.svg");
+    mImage.setResize(mSize);
 
     // Change the color of the switch to reflect the changes.
     if (mState == mOriginalValue)

es-core/src/components/SwitchComponent.h

@@ -22,8 +22,7 @@ public:
     void render(const glm::mat4& parentTrans) override;
     void onSizeChanged() override { mImage.setSize(mSize); }
 
-    void setResize(float width, float height) override { mImage.setResize(width, height); }
+    void setResize(float width, float height) override { setSize(width, height); }
-
     bool getState() const { return mState; }
     void setState(bool state);
     std::string getValue() const override;

es-core/src/components/TextComponent.cpp

@@ -13,18 +13,18 @@
 #include "utils/StringUtil.h"
 
 TextComponent::TextComponent(Window* window)
-    : GuiComponent(window)
+    : GuiComponent{window}
-    , mFont(Font::get(FONT_SIZE_MEDIUM))
+    , mFont{Font::get(FONT_SIZE_MEDIUM)}
-    , mColor(0x000000FF)
+    , mColor{0x000000FF}
-    , mBgColor(0)
+    , mBgColor{0}
-    , mMargin(0.0f)
+    , mRenderBackground{false}
-    , mRenderBackground(false)
+    , mUppercase{false}
-    , mUppercase(false)
+    , mAutoCalcExtent{1, 1}
-    , mAutoCalcExtent(true, true)
+    , mHorizontalAlignment{ALIGN_LEFT}
-    , mHorizontalAlignment(ALIGN_LEFT)
+    , mVerticalAlignment{ALIGN_CENTER}
-    , mVerticalAlignment(ALIGN_CENTER)
+    , mLineSpacing{1.5f}
-    , mLineSpacing(1.5f)
+    , mNoTopMargin{false}
-    , mNoTopMargin(false)
+    , mSelectable{false}
 {
 }
 
@@ -35,20 +35,19 @@ TextComponent::TextComponent(Window* window,
                              Alignment align,
                              glm::vec3 pos,
                              glm::vec2 size,
-                             unsigned int bgcolor,
+                             unsigned int bgcolor)
-                             float margin)
+    : GuiComponent{window}
-    : GuiComponent(window)
+    , mFont{nullptr}
-    , mFont(nullptr)
+    , mColor{0x000000FF}
-    , mColor(0x000000FF)
+    , mBgColor{0}
-    , mBgColor(0)
+    , mRenderBackground{false}
-    , mMargin(margin)
+    , mUppercase{false}
-    , mRenderBackground(false)
+    , mAutoCalcExtent{1, 1}
-    , mUppercase(false)
+    , mHorizontalAlignment{align}
-    , mAutoCalcExtent(true, true)
+    , mVerticalAlignment{ALIGN_CENTER}
-    , mHorizontalAlignment(align)
+    , mLineSpacing{1.5f}
-    , mVerticalAlignment(ALIGN_CENTER)
+    , mNoTopMargin{false}
-    , mLineSpacing(1.5f)
+    , mSelectable{false}
-    , mNoTopMargin(false)
 {
     setFont(font);
     setColor(color);
@@ -236,12 +235,12 @@ void TextComponent::onTextChanged()
         // Abbreviate text.
         const std::string abbrev = "...";
         glm::vec2 abbrevSize{f->sizeText(abbrev)};
-        // mMargin adds a margin around the text if it's abbreviated.
-        float marginAdjustedSize = mSize.x - (mSize.x * mMargin);
 
-        while (text.size() && size.x + abbrevSize.x > marginAdjustedSize) {
+        while (text.size() && size.x + abbrevSize.x > mSize.x) {
             size_t newSize = Utils::String::prevCursor(text, text.size());
             text.erase(newSize, text.size() - newSize);
+            if (!text.empty() && text.back() == ' ')
+                text.pop_back();
             size = f->sizeText(text);
         }
 
@@ -282,6 +281,14 @@ void TextComponent::setNoTopMargin(bool margin)
     onTextChanged();
 }
 
+std::vector<HelpPrompt> TextComponent::getHelpPrompts()
+{
+    std::vector<HelpPrompt> prompts;
+    if (mSelectable)
+        prompts.push_back(HelpPrompt("a", "select"));
+    return prompts;
+}
+
 void TextComponent::applyTheme(const std::shared_ptr<ThemeData>& theme,
                                const std::string& view,
                                const std::string& element,

es-core/src/components/TextComponent.h

@@ -32,8 +32,7 @@ public:
                   Alignment align = ALIGN_LEFT,
                   glm::vec3 pos = {},
                   glm::vec2 size = {},
-                  unsigned int bgcolor = 0x00000000,
+                  unsigned int bgcolor = 0x00000000);
-                  float margin = 0.0f);
 
     void setFont(const std::shared_ptr<Font>& font);
     void setUppercase(bool uppercase);
@@ -60,11 +59,15 @@ public:
     unsigned char getOpacity() const override { return mColor & 0x000000FF; }
     void setOpacity(unsigned char opacity) override;
 
+    void setSelectable(bool status) { mSelectable = status; }
+
     virtual void applyTheme(const std::shared_ptr<ThemeData>& theme,
                             const std::string& view,
                             const std::string& element,
                             unsigned int properties) override;
 
+    virtual std::vector<HelpPrompt> getHelpPrompts() override;
+
     unsigned int getColor() const override { return mColor; }
     std::shared_ptr<Font> getFont() const override { return mFont; }
     Alignment getHorizontalAlignment() { return mHorizontalAlignment; }
@@ -85,7 +88,6 @@ private:
     unsigned int mBgColor;
     unsigned char mColorOpacity;
     unsigned char mBgColorOpacity;
-    float mMargin;
     bool mRenderBackground;
 
     bool mUppercase;
@@ -95,6 +97,7 @@ private:
     Alignment mVerticalAlignment;
     float mLineSpacing;
     bool mNoTopMargin;
+    bool mSelectable;
 };
 
 #endif // ES_CORE_COMPONENTS_TEXT_COMPONENT_H

es-core/src/components/TextListComponent.h

@@ -24,7 +24,7 @@ struct TextListData {
     std::shared_ptr<TextCache> textCache;
 };
 
-// A graphical list. Supports multiple colors for rows and scrolling.
+// A scrollable text list supporting multiple row colors.
 template <typename T> class TextListComponent : public IList<TextListData, T>
 {
 protected:
@@ -108,10 +108,10 @@ protected:
     virtual void onCursorChanged(const CursorState& state) override;
 
 private:
-    int mMarqueeOffset;
+    int mLoopOffset;
-    int mMarqueeOffset2;
+    int mLoopOffset2;
-    int mMarqueeTime;
+    int mLoopTime;
-    bool mMarqueeScroll;
+    bool mLoopScroll;
 
     Alignment mAlignment;
     float mHorizontalMargin;
@@ -138,10 +138,10 @@ TextListComponent<T>::TextListComponent(Window* window)
     : IList<TextListData, T>(window)
     , mSelectorImage(window)
 {
-    mMarqueeOffset = 0;
+    mLoopOffset = 0;
-    mMarqueeOffset2 = 0;
+    mLoopOffset2 = 0;
-    mMarqueeTime = 0;
+    mLoopTime = 0;
-    mMarqueeScroll = false;
+    mLoopScroll = false;
 
     mHorizontalMargin = 0.0f;
     mAlignment = ALIGN_CENTER;
@@ -223,8 +223,10 @@ template <typename T> void TextListComponent<T>::render(const glm::mat4& parentT
     dim.y = (trans[1].y * dim.y + trans[3].y) - trans[3].y;
 
     Renderer::pushClipRect(
-        glm::ivec2{static_cast<int>(trans[3].x + mHorizontalMargin), static_cast<int>(trans[3].y)},
+        glm::ivec2{static_cast<int>(std::round(trans[3].x + mHorizontalMargin)),
-        glm::ivec2{static_cast<int>(dim.x - mHorizontalMargin * 2.0f), static_cast<int>(dim.y)});
+                   static_cast<int>(std::round(trans[3].y))},
+        glm::ivec2{static_cast<int>(std::round(dim.x - mHorizontalMargin * 2.0f)),
+                   static_cast<int>(std::round(dim.y))});
 
     for (int i = startEntry; i < listCutoff; i++) {
         typename IList<TextListData, T>::Entry& entry = mEntries.at(static_cast<unsigned int>(i));
@@ -271,26 +273,26 @@ template <typename T> void TextListComponent<T>::render(const glm::mat4& parentT
         // Render text.
         glm::mat4 drawTrans{trans};
 
-        // Currently selected item text might be scrolling.
+        // Currently selected item text might be looping.
-        if (mCursor == i && mMarqueeOffset > 0)
+        if (mCursor == i && mLoopOffset > 0)
             drawTrans = glm::translate(
-                drawTrans, offset - glm::vec3{static_cast<float>(mMarqueeOffset), 0.0f, 0.0f});
+                drawTrans, offset - glm::vec3{static_cast<float>(mLoopOffset), 0.0f, 0.0f});
         else
             drawTrans = glm::translate(drawTrans, offset);
 
         // Needed to avoid flickering when returning to the start position.
-        if (mMarqueeOffset == 0 && mMarqueeOffset2 == 0)
+        if (mLoopOffset == 0 && mLoopOffset2 == 0)
-            mMarqueeScroll = false;
+            mLoopScroll = false;
 
         Renderer::setMatrix(drawTrans);
         font->renderTextCache(entry.data.textCache.get());
 
-        // Render currently selected row again if marquee is scrolled far enough for it to repeat.
+        // Render currently selected row again if text is moved far enough for it to repeat.
-        if ((mCursor == i && mMarqueeOffset2 < 0) || (mCursor == i && mMarqueeScroll)) {
+        if ((mCursor == i && mLoopOffset2 < 0) || (mCursor == i && mLoopScroll)) {
-            mMarqueeScroll = true;
+            mLoopScroll = true;
             drawTrans = trans;
             drawTrans = glm::translate(
-                drawTrans, offset - glm::vec3{static_cast<float>(mMarqueeOffset2), 0.0f, 0.0f});
+                drawTrans, offset - glm::vec3{static_cast<float>(mLoopOffset2), 0.0f, 0.0f});
             Renderer::setMatrix(drawTrans);
             font->renderTextCache(entry.data.textCache.get());
         }
@@ -353,11 +355,11 @@ template <typename T> void TextListComponent<T>::update(int deltaTime)
         stopScrolling();
 
     if (!isScrolling() && size() > 0) {
-        // Always reset the marquee offsets.
+        // Always reset the loop offsets.
-        mMarqueeOffset = 0;
+        mLoopOffset = 0;
-        mMarqueeOffset2 = 0;
+        mLoopOffset2 = 0;
 
-        // If we're not scrolling and this object's text exceeds our size, then marquee it.
+        // If we're not scrolling and this object's text exceeds our size, then loop it.
         const float textLength = mFont
                                      ->sizeText(Utils::String::toUpper(
                                          mEntries.at(static_cast<unsigned int>(mCursor)).name))
@@ -374,16 +376,16 @@ template <typename T> void TextListComponent<T>::update(int deltaTime)
             const float returnTime = (returnLength * 1000.0f) / speed;
             const int maxTime = static_cast<int>(delay + scrollTime + returnTime);
 
-            mMarqueeTime += deltaTime;
+            mLoopTime += deltaTime;
-            while (mMarqueeTime > maxTime)
+            while (mLoopTime > maxTime)
-                mMarqueeTime -= maxTime;
+                mLoopTime -= maxTime;
 
-            mMarqueeOffset = static_cast<int>(Utils::Math::loop(delay, scrollTime + returnTime,
+            mLoopOffset = static_cast<int>(Utils::Math::loop(delay, scrollTime + returnTime,
-                                                                static_cast<float>(mMarqueeTime),
+                                                             static_cast<float>(mLoopTime),
-                                                                scrollLength + returnLength));
+                                                             scrollLength + returnLength));
 
-            if (mMarqueeOffset > (scrollLength - (limit - returnLength)))
+            if (mLoopOffset > (scrollLength - (limit - returnLength)))
-                mMarqueeOffset2 = static_cast<int>(mMarqueeOffset - (scrollLength + returnLength));
+                mLoopOffset2 = static_cast<int>(mLoopOffset - (scrollLength + returnLength));
         }
     }
 
@@ -405,9 +407,9 @@ void TextListComponent<T>::add(const std::string& name, const T& obj, unsigned i
 
 template <typename T> void TextListComponent<T>::onCursorChanged(const CursorState& state)
 {
-    mMarqueeOffset = 0;
+    mLoopOffset = 0;
-    mMarqueeOffset2 = 0;
+    mLoopOffset2 = 0;
-    mMarqueeTime = 0;
+    mLoopTime = 0;
 
     if (mCursorChangedCallback)
         mCursorChangedCallback(state);

es-core/src/guis/GuiInputConfig.cpp

@@ -201,67 +201,67 @@ void GuiInputConfig::populateConfigList()
     std::string controllerType = Settings::getInstance()->getString("InputControllerType");
 
     // clang-format off
-    sGuiInputConfigList[0] = {"Up",    false, "D-PAD UP",    ":/help/dpad_up.svg"};
+    sGuiInputConfigList[0] = {"Up",    false, "D-PAD UP",    ":/graphics/help/dpad_up.svg"};
-    sGuiInputConfigList[1] = {"Down",  false, "D-PAD DOWN",  ":/help/dpad_down.svg"};
+    sGuiInputConfigList[1] = {"Down",  false, "D-PAD DOWN",  ":/graphics/help/dpad_down.svg"};
-    sGuiInputConfigList[2] = {"Left",  false, "D-PAD LEFT",  ":/help/dpad_left.svg"};
+    sGuiInputConfigList[2] = {"Left",  false, "D-PAD LEFT",  ":/graphics/help/dpad_left.svg"};
-    sGuiInputConfigList[3] = {"Right", false, "D-PAD RIGHT", ":/help/dpad_right.svg"};
+    sGuiInputConfigList[3] = {"Right", false, "D-PAD RIGHT", ":/graphics/help/dpad_right.svg"};
 
     if (controllerType == "snes") {
-        sGuiInputConfigList[4] = {"Back",  false, "SELECT",    ":/help/button_back_SNES.svg"};
+        sGuiInputConfigList[4] = {"Back",  false, "SELECT",    ":/graphics/help/button_back_SNES.svg"};
-        sGuiInputConfigList[5] = {"Start", false, "START",     ":/help/button_start_SNES.svg"};
+        sGuiInputConfigList[5] = {"Start", false, "START",     ":/graphics/help/button_start_SNES.svg"};
-        sGuiInputConfigList[6] = {"A",     false, "B",         ":/help/mbuttons_a_SNES.svg"};
+        sGuiInputConfigList[6] = {"A",     false, "B",         ":/graphics/help/mbuttons_a_SNES.svg"};
-        sGuiInputConfigList[7] = {"B",     false, "A",         ":/help/mbuttons_b_SNES.svg"};
+        sGuiInputConfigList[7] = {"B",     false, "A",         ":/graphics/help/mbuttons_b_SNES.svg"};
-        sGuiInputConfigList[8] = {"X",     true,  "Y",         ":/help/mbuttons_x_SNES.svg"};
+        sGuiInputConfigList[8] = {"X",     true,  "Y",         ":/graphics/help/mbuttons_x_SNES.svg"};
-        sGuiInputConfigList[9] = {"Y",     true,  "X",         ":/help/mbuttons_y_SNES.svg"};
+        sGuiInputConfigList[9] = {"Y",     true,  "X",         ":/graphics/help/mbuttons_y_SNES.svg"};
     }
     else if (controllerType == "ps4") {
-        sGuiInputConfigList[4] = {"Back",  false, "SHARE",     ":/help/button_back_PS4.svg"};
+        sGuiInputConfigList[4] = {"Back",  false, "SHARE",     ":/graphics/help/button_back_PS4.svg"};
-        sGuiInputConfigList[5] = {"Start", false, "OPTIONS",   ":/help/button_start_PS4.svg"};
+        sGuiInputConfigList[5] = {"Start", false, "OPTIONS",   ":/graphics/help/button_start_PS4.svg"};
-        sGuiInputConfigList[6] = {"A",     false, "CROSS",     ":/help/mbuttons_a_PS.svg"};
+        sGuiInputConfigList[6] = {"A",     false, "CROSS",     ":/graphics/help/mbuttons_a_PS.svg"};
-        sGuiInputConfigList[7] = {"B",     false, "CIRCLE",    ":/help/mbuttons_b_PS.svg"};
+        sGuiInputConfigList[7] = {"B",     false, "CIRCLE",    ":/graphics/help/mbuttons_b_PS.svg"};
-        sGuiInputConfigList[8] = {"X",     true,  "SQUARE",    ":/help/mbuttons_x_PS.svg"};
+        sGuiInputConfigList[8] = {"X",     true,  "SQUARE",    ":/graphics/help/mbuttons_x_PS.svg"};
-        sGuiInputConfigList[9] = {"Y",     true,  "TRIANGLE",  ":/help/mbuttons_y_PS.svg"};
+        sGuiInputConfigList[9] = {"Y",     true,  "TRIANGLE",  ":/graphics/help/mbuttons_y_PS.svg"};
     }
     else if (controllerType == "ps5") {
-        sGuiInputConfigList[4] = {"Back",  false, "CREATE",    ":/help/button_back_PS5.svg"};
+        sGuiInputConfigList[4] = {"Back",  false, "CREATE",    ":/graphics/help/button_back_PS5.svg"};
-        sGuiInputConfigList[5] = {"Start", false, "OPTIONS",   ":/help/button_start_PS5.svg"};
+        sGuiInputConfigList[5] = {"Start", false, "OPTIONS",   ":/graphics/help/button_start_PS5.svg"};
-        sGuiInputConfigList[6] = {"A",     false, "CROSS",     ":/help/mbuttons_a_PS.svg"};
+        sGuiInputConfigList[6] = {"A",     false, "CROSS",     ":/graphics/help/mbuttons_a_PS.svg"};
-        sGuiInputConfigList[7] = {"B",     false, "CIRCLE",    ":/help/mbuttons_b_PS.svg"};
+        sGuiInputConfigList[7] = {"B",     false, "CIRCLE",    ":/graphics/help/mbuttons_b_PS.svg"};
-        sGuiInputConfigList[8] = {"X",     true,  "SQUARE",    ":/help/mbuttons_x_PS.svg"};
+        sGuiInputConfigList[8] = {"X",     true,  "SQUARE",    ":/graphics/help/mbuttons_x_PS.svg"};
-        sGuiInputConfigList[9] = {"Y",     true,  "TRIANGLE",  ":/help/mbuttons_y_PS.svg"};
+        sGuiInputConfigList[9] = {"Y",     true,  "TRIANGLE",  ":/graphics/help/mbuttons_y_PS.svg"};
     }
     else if (controllerType == "xbox360") {
-        sGuiInputConfigList[4] = {"Back",  false, "BACK",      ":/help/button_back_XBOX360.svg"};
+        sGuiInputConfigList[4] = {"Back",  false, "BACK",      ":/graphics/help/button_back_XBOX360.svg"};
-        sGuiInputConfigList[5] = {"Start", false, "START",     ":/help/button_start_XBOX360.svg"};
+        sGuiInputConfigList[5] = {"Start", false, "START",     ":/graphics/help/button_start_XBOX360.svg"};
-        sGuiInputConfigList[6] = {"A",     false, "A",         ":/help/mbuttons_a_XBOX.svg"};
+        sGuiInputConfigList[6] = {"A",     false, "A",         ":/graphics/help/mbuttons_a_XBOX.svg"};
-        sGuiInputConfigList[7] = {"B",     false, "B",         ":/help/mbuttons_b_XBOX.svg"};
+        sGuiInputConfigList[7] = {"B",     false, "B",         ":/graphics/help/mbuttons_b_XBOX.svg"};
-        sGuiInputConfigList[8] = {"X",     true,  "X",         ":/help/mbuttons_x_XBOX.svg"};
+        sGuiInputConfigList[8] = {"X",     true,  "X",         ":/graphics/help/mbuttons_x_XBOX.svg"};
-        sGuiInputConfigList[9] = {"Y",     true,  "Y",         ":/help/mbuttons_y_XBOX.svg"};
+        sGuiInputConfigList[9] = {"Y",     true,  "Y",         ":/graphics/help/mbuttons_y_XBOX.svg"};
     }
     else {
         // Xbox One and later.
-        sGuiInputConfigList[4] = {"Back",  false, "VIEW", ":/help/button_back_XBOX.svg"};
+        sGuiInputConfigList[4] = {"Back",  false, "VIEW", ":/graphics/help/button_back_XBOX.svg"};
-        sGuiInputConfigList[5] = {"Start", false, "MENU", ":/help/button_start_XBOX.svg"};
+        sGuiInputConfigList[5] = {"Start", false, "MENU", ":/graphics/help/button_start_XBOX.svg"};
-        sGuiInputConfigList[6] = {"A",     false, "A",    ":/help/mbuttons_a_XBOX.svg"};
+        sGuiInputConfigList[6] = {"A",     false, "A",    ":/graphics/help/mbuttons_a_XBOX.svg"};
-        sGuiInputConfigList[7] = {"B",     false, "B",    ":/help/mbuttons_b_XBOX.svg"};
+        sGuiInputConfigList[7] = {"B",     false, "B",    ":/graphics/help/mbuttons_b_XBOX.svg"};
-        sGuiInputConfigList[8] = {"X",     true,  "X",    ":/help/mbuttons_x_XBOX.svg"};
+        sGuiInputConfigList[8] = {"X",     true,  "X",    ":/graphics/help/mbuttons_x_XBOX.svg"};
-        sGuiInputConfigList[9] = {"Y",     true,  "Y",    ":/help/mbuttons_y_XBOX.svg"};
+        sGuiInputConfigList[9] = {"Y",     true,  "Y",    ":/graphics/help/mbuttons_y_XBOX.svg"};
     }
 
-    sGuiInputConfigList[10] = {"LeftShoulder",         true, "LEFT SHOULDER",          ":/help/button_l.svg"};
+    sGuiInputConfigList[10] = {"LeftShoulder",         true, "LEFT SHOULDER",          ":/graphics/help/button_l.svg"};
-    sGuiInputConfigList[11] = {"RightShoulder",        true, "RIGHT SHOULDER",         ":/help/button_r.svg"};
+    sGuiInputConfigList[11] = {"RightShoulder",        true, "RIGHT SHOULDER",         ":/graphics/help/button_r.svg"};
-    sGuiInputConfigList[12] = {"LeftTrigger",          true, "LEFT TRIGGER",           ":/help/button_lt.svg"};
+    sGuiInputConfigList[12] = {"LeftTrigger",          true, "LEFT TRIGGER",           ":/graphics/help/button_lt.svg"};
-    sGuiInputConfigList[13] = {"RightTrigger",         true, "RIGHT TRIGGER",          ":/help/button_rt.svg"};
+    sGuiInputConfigList[13] = {"RightTrigger",         true, "RIGHT TRIGGER",          ":/graphics/help/button_rt.svg"};
-    sGuiInputConfigList[14] = {"LeftThumbstickUp",     true, "LEFT THUMBSTICK UP",     ":/help/thumbstick_up.svg"};
+    sGuiInputConfigList[14] = {"LeftThumbstickUp",     true, "LEFT THUMBSTICK UP",     ":/graphics/help/thumbstick_up.svg"};
-    sGuiInputConfigList[15] = {"LeftThumbstickDown",   true, "LEFT THUMBSTICK DOWN",   ":/help/thumbstick_down.svg"};
+    sGuiInputConfigList[15] = {"LeftThumbstickDown",   true, "LEFT THUMBSTICK DOWN",   ":/graphics/help/thumbstick_down.svg"};
-    sGuiInputConfigList[16] = {"LeftThumbstickLeft",   true, "LEFT THUMBSTICK LEFT",   ":/help/thumbstick_left.svg"};
+    sGuiInputConfigList[16] = {"LeftThumbstickLeft",   true, "LEFT THUMBSTICK LEFT",   ":/graphics/help/thumbstick_left.svg"};
-    sGuiInputConfigList[17] = {"LeftThumbstickRight",  true, "LEFT THUMBSTICK RIGHT",  ":/help/thumbstick_right.svg"};
+    sGuiInputConfigList[17] = {"LeftThumbstickRight",  true, "LEFT THUMBSTICK RIGHT",  ":/graphics/help/thumbstick_right.svg"};
-    sGuiInputConfigList[18] = {"LeftThumbstickClick",  true, "LEFT THUMBSTICK CLICK",  ":/help/thumbstick_click.svg"};
+    sGuiInputConfigList[18] = {"LeftThumbstickClick",  true, "LEFT THUMBSTICK CLICK",  ":/graphics/help/thumbstick_click.svg"};
-    sGuiInputConfigList[19] = {"RightThumbstickUp",    true, "RIGHT THUMBSTICK UP",    ":/help/thumbstick_up.svg"};
+    sGuiInputConfigList[19] = {"RightThumbstickUp",    true, "RIGHT THUMBSTICK UP",    ":/graphics/help/thumbstick_up.svg"};
-    sGuiInputConfigList[20] = {"RightThumbstickDown",  true, "RIGHT THUMBSTICK DOWN",  ":/help/thumbstick_down.svg"};
+    sGuiInputConfigList[20] = {"RightThumbstickDown",  true, "RIGHT THUMBSTICK DOWN",  ":/graphics/help/thumbstick_down.svg"};
-    sGuiInputConfigList[21] = {"RightThumbstickLeft",  true, "RIGHT THUMBSTICK LEFT",  ":/help/thumbstick_left.svg"};
+    sGuiInputConfigList[21] = {"RightThumbstickLeft",  true, "RIGHT THUMBSTICK LEFT",  ":/graphics/help/thumbstick_left.svg"};
-    sGuiInputConfigList[22] = {"RightThumbstickRight", true, "RIGHT THUMBSTICK RIGHT", ":/help/thumbstick_right.svg"};
+    sGuiInputConfigList[22] = {"RightThumbstickRight", true, "RIGHT THUMBSTICK RIGHT", ":/graphics/help/thumbstick_right.svg"};
-    sGuiInputConfigList[23] = {"RightThumbstickClick", true, "RIGHT THUMBSTICK CLICK", ":/help/thumbstick_click.svg"};
+    sGuiInputConfigList[23] = {"RightThumbstickClick", true, "RIGHT THUMBSTICK CLICK", ":/graphics/help/thumbstick_click.svg"};
     // clang-format on
 }
 

es-core/src/guis/GuiMsgBox.cpp

@@ -179,11 +179,6 @@ std::vector<HelpPrompt> GuiMsgBox::getHelpPrompts()
 {
     std::vector<HelpPrompt> prompts = mGrid.getHelpPrompts();
 
-    // If there is only one button, then remove the "Choose" help symbol
-    // as there is no way to make a choice.
-    if (mButtons.size() == 1)
-        prompts.pop_back();
-
     if (!mDisableBackButton)
         prompts.push_back(HelpPrompt("b", "Back"));
 

es-core/src/guis/GuiTextEditKeyboardPopup.cpp

@@ -567,8 +567,8 @@ void GuiTextEditKeyboardPopup::shiftKeys()
     mShift = !mShift;
 
     if (mShift) {
-        mShiftButton->setFlatColorFocused(0xFF2222FF);
+        mShiftButton->setFlatColorFocused(0xF26767FF);
-        mShiftButton->setFlatColorUnfocused(0xFF2222FF);
+        mShiftButton->setFlatColorUnfocused(0xF26767FF);
     }
     else {
         mShiftButton->setFlatColorFocused(0x878787FF);
@@ -600,8 +600,8 @@ void GuiTextEditKeyboardPopup::altKeys()
     mAlt = !mAlt;
 
     if (mAlt) {
-        mAltButton->setFlatColorFocused(0xFF2222FF);
+        mAltButton->setFlatColorFocused(0xF26767FF);
-        mAltButton->setFlatColorUnfocused(0xFF2222FF);
+        mAltButton->setFlatColorUnfocused(0xF26767FF);
     }
     else {
         mAltButton->setFlatColorFocused(0x878787FF);

es-core/src/resources/TextureData.cpp

@@ -24,16 +24,18 @@
 #define DPI 96
 
 TextureData::TextureData(bool tile)
-    : mTile(tile)
+    : mTile{tile}
-    , mTextureID(0)
+    , mTextureID{0}
     , mDataRGBA({})
-    , mWidth(0)
+    , mWidth{0}
-    , mHeight(0)
+    , mHeight{0}
-    , mSourceWidth(0.0f)
+    , mSourceWidth{0.0f}
-    , mSourceHeight(0.0f)
+    , mSourceHeight{0.0f}
-    , mScaleDuringLoad(1.0f)
+    , mScaleDuringLoad{1.0f}
-    , mScalable(false)
+    , mScalable{false}
-    , mLinearMagnify(false)
+    , mLinearMagnify{false}
+    , mForceRasterization{false}
+    , mPendingRasterization{false}
 {
 }
 
@@ -54,27 +56,32 @@ void TextureData::initFromPath(const std::string& path)
 bool TextureData::initSVGFromMemory(const std::string& fileData)
 {
     // If already initialized then don't process it again.
-    std::unique_lock<std::mutex> lock(mMutex);
+    std::unique_lock<std::mutex> lock{mMutex};
 
     if (!mDataRGBA.empty())
         return true;
 
-    NSVGimage* svgImage = nsvgParse(const_cast<char*>(fileData.c_str()), "px", DPI);
+    NSVGimage* svgImage{nsvgParse(const_cast<char*>(fileData.c_str()), "px", DPI)};
 
     if (!svgImage) {
         LOG(LogError) << "Couldn't parse SVG image";
         return false;
     }
 
-    // We want to rasterize this texture at a specific resolution. If the source size
+    bool rasterize{true};
-    // variables are set then use them, otherwise get them from the parsed file.
+
-    if ((mSourceWidth == 0.0f) && (mSourceHeight == 0.0f)) {
+    // If there is no image size defined yet, then don't rasterize unless mForceRasterization has
-        mSourceWidth = svgImage->width;
+    // been set (this is only used by NinePatchComponent to avoid flickering menus).
-        mSourceHeight = svgImage->height;
+    if (mSourceWidth == 0.0f && mSourceHeight == 0.0f) {
+        if (!mForceRasterization)
+            rasterize = false;
+        // Set a small temporary size that maintains the image aspect ratio.
+        mSourceWidth = 64.0f;
+        mSourceHeight = 64.0f * (svgImage->height / svgImage->width);
     }
 
-    mWidth = static_cast<size_t>(floorf(floorf(mSourceWidth) * mScaleDuringLoad));
+    mWidth = static_cast<int>(std::round(mSourceWidth * mScaleDuringLoad));
-    mHeight = static_cast<size_t>(floorf(floorf(mSourceHeight) * mScaleDuringLoad));
+    mHeight = static_cast<int>(std::round(mSourceHeight * mScaleDuringLoad));
 
     if (mWidth == 0) {
         // Auto scale width to keep aspect ratio.
@@ -87,24 +94,31 @@ bool TextureData::initSVGFromMemory(const std::string& fileData)
             std::round((static_cast<float>(mWidth) / svgImage->width) * svgImage->height));
     }
 
-    std::vector<unsigned char> tempVector;
+    if (rasterize) {
-    tempVector.reserve(mWidth * mHeight * 4);
+        std::vector<unsigned char> tempVector;
+        tempVector.reserve(mWidth * mHeight * 4);
 
-    NSVGrasterizer* rast = nsvgCreateRasterizer();
+        NSVGrasterizer* rast = nsvgCreateRasterizer();
 
-    nsvgRasterize(rast, svgImage, 0, 0, mHeight / svgImage->height, tempVector.data(),
+        nsvgRasterize(rast, svgImage, 0, 0, mHeight / svgImage->height, tempVector.data(), mWidth,
-                  static_cast<int>(mWidth), static_cast<int>(mHeight),
+                      mHeight, mWidth * 4);
-                  static_cast<int>(mWidth) * 4);
+
+        nsvgDeleteRasterizer(rast);
+
+        mDataRGBA.insert(mDataRGBA.begin(), tempVector.data(),
+                         tempVector.data() + (mWidth * mHeight * 4));
+
+        ImageIO::flipPixelsVert(mDataRGBA.data(), mWidth, mHeight);
+        mPendingRasterization = false;
+    }
+    else {
+        // TODO: Fix this properly instead of using the single byte texture workaround.
+        mDataRGBA.push_back(0);
+        mPendingRasterization = true;
+    }
 
-    // This is important in order to avoid memory leaks.
-    nsvgDeleteRasterizer(rast);
     nsvgDelete(svgImage);
 
-    mDataRGBA.insert(mDataRGBA.begin(), tempVector.data(),
-                     tempVector.data() + (mWidth * mHeight * 4));
-
-    ImageIO::flipPixelsVert(mDataRGBA.data(), mWidth, mHeight);
-
     return true;
 }
 
@@ -148,8 +162,8 @@ bool TextureData::initFromRGBA(const unsigned char* dataRGBA, size_t width, size
     mDataRGBA.reserve(width * height * 4);
     mDataRGBA.insert(mDataRGBA.begin(), dataRGBA, dataRGBA + (width * height * 4));
 
-    mWidth = width;
+    mWidth = static_cast<int>(width);
-    mHeight = height;
+    mHeight = static_cast<int>(height);
     return true;
 }
 

es-core/src/resources/TextureData.h

@@ -61,8 +61,13 @@ public:
     void setScaleDuringLoad(float scale) { mScaleDuringLoad = scale; }
     // Whether to use linear filtering when magnifying the texture.
     void setLinearMagnify(bool setting) { mLinearMagnify = setting; }
+    // Whether to rasterize the image even if a size has not been set yet.
+    void setForceRasterization(bool setting) { mForceRasterization = setting; }
 
-    std::vector<unsigned char> getRawRGBAData() { return mDataRGBA; }
+    // Has the image been loaded but not yet been rasterized as the size was not known?
+    bool getPendingRasterization() { return mPendingRasterization; }
+
+    std::vector<unsigned char>& getRawRGBAData() { return mDataRGBA; }
     std::string getTextureFilePath() { return mPath; }
     bool tiled() { return mTile; }
 
@@ -72,14 +77,16 @@ private:
     std::string mPath;
     unsigned int mTextureID;
     std::vector<unsigned char> mDataRGBA;
-    size_t mWidth;
+    int mWidth;
-    size_t mHeight;
+    int mHeight;
     float mSourceWidth;
     float mSourceHeight;
     float mScaleDuringLoad;
     bool mScalable;
     bool mLinearMagnify;
     bool mReloadable;
+    bool mForceRasterization;
+    bool mPendingRasterization;
 };
 
 #endif // ES_CORE_RESOURCES_TEXTURE_DATA_H

es-core/src/resources/TextureResource.cpp

@@ -8,16 +8,20 @@
 
 #include "resources/TextureResource.h"
 
-#include "resources/TextureData.h"
 #include "utils/FileSystemUtil.h"
+#include "utils/StringUtil.h"
 
 TextureDataManager TextureResource::sTextureDataManager;
 std::map<TextureResource::TextureKeyType, std::weak_ptr<TextureResource>>
     TextureResource::sTextureMap;
 std::set<TextureResource*> TextureResource::sAllTextures;
 
-TextureResource::TextureResource(
+TextureResource::TextureResource(const std::string& path,
-    const std::string& path, bool tile, bool dynamic, bool linearMagnify, float scaleDuringLoad)
+                                 bool tile,
+                                 bool dynamic,
+                                 bool linearMagnify,
+                                 bool forceRasterization,
+                                 float scaleDuringLoad)
     : mTextureData(nullptr)
     , mForceLoad(false)
 {
@@ -32,6 +36,7 @@ TextureResource::TextureResource(
             if (scaleDuringLoad != 1.0f)
                 data->setScaleDuringLoad(scaleDuringLoad);
             data->setLinearMagnify(linearMagnify);
+            data->setForceRasterization(forceRasterization);
             // Force the texture manager to load it using a blocking load.
             sTextureDataManager.load(data, true);
         }
@@ -42,6 +47,7 @@ TextureResource::TextureResource(
             if (scaleDuringLoad != 1.0f)
                 data->setScaleDuringLoad(scaleDuringLoad);
             data->setLinearMagnify(linearMagnify);
+            data->setForceRasterization(forceRasterization);
             // Load it so we can read the width/height.
             data->load();
         }
@@ -148,14 +154,15 @@ std::shared_ptr<TextureResource> TextureResource::get(const std::string& path,
                                                       bool forceLoad,
                                                       bool dynamic,
                                                       bool linearMagnify,
+                                                      bool forceRasterization,
                                                       float scaleDuringLoad)
 {
     std::shared_ptr<ResourceManager>& rm = ResourceManager::getInstance();
 
     const std::string canonicalPath = Utils::FileSystem::getCanonicalPath(path);
     if (canonicalPath.empty()) {
-        std::shared_ptr<TextureResource> tex(
+        std::shared_ptr<TextureResource> tex(new TextureResource(
-            new TextureResource("", tile, false, linearMagnify, scaleDuringLoad));
+            "", tile, false, linearMagnify, forceRasterization, scaleDuringLoad));
         // Make sure we get properly deinitialized even though we do nothing on reinitialization.
         rm->addReloadable(tex);
         return tex;
@@ -171,12 +178,13 @@ std::shared_ptr<TextureResource> TextureResource::get(const std::string& path,
 
     // Need to create it.
     std::shared_ptr<TextureResource> tex;
-    tex = std::shared_ptr<TextureResource>(
+    tex = std::shared_ptr<TextureResource>(new TextureResource(
-        new TextureResource(key.first, tile, dynamic, linearMagnify, scaleDuringLoad));
+        key.first, tile, dynamic, linearMagnify, forceRasterization, scaleDuringLoad));
     std::shared_ptr<TextureData> data = sTextureDataManager.get(tex.get());
 
     // Is it an SVG?
-    if (key.first.substr(key.first.size() - 4, std::string::npos) != ".svg") {
+    if (Utils::String::toLower(key.first.substr(key.first.size() - 4, std::string::npos)) !=
+        ".svg") {
         // Probably not. Add it to our map. We don't add SVGs because 2 SVGs might be
         // rasterized at different sizes.
         sTextureMap[key] = std::weak_ptr<TextureResource>(tex);
@@ -194,7 +202,7 @@ std::shared_ptr<TextureResource> TextureResource::get(const std::string& path,
     return tex;
 }
 
-void TextureResource::rasterizeAt(size_t width, size_t height)
+void TextureResource::rasterizeAt(float width, float height)
 {
     if (mTextureData != nullptr) {
         glm::vec2 textureSize = mTextureData.get()->getSize();
@@ -209,7 +217,7 @@ void TextureResource::rasterizeAt(size_t width, size_t height)
         data = sTextureDataManager.get(this);
     mSourceSize = glm::vec2{static_cast<float>(width), static_cast<float>(height)};
     data->setSourceSize(static_cast<float>(width), static_cast<float>(height));
-    if (mForceLoad || (mTextureData != nullptr))
+    if (mForceLoad || mTextureData != nullptr)
         data->load();
 }
 

es-core/src/resources/TextureResource.h

@@ -10,6 +10,7 @@
 #define ES_CORE_RESOURCES_TEXTURE_RESOURCE_H
 
 #include "resources/ResourceManager.h"
+#include "resources/TextureData.h"
 #include "resources/TextureDataManager.h"
 #include "utils/MathUtil.h"
 
@@ -30,6 +31,7 @@ public:
                                                 bool forceLoad = false,
                                                 bool dynamic = true,
                                                 bool linearMagnify = false,
+                                                bool forceRasterization = false,
                                                 float scaleDuringLoad = 1.0f);
     void initFromPixels(const unsigned char* dataRGBA, size_t width, size_t height);
     virtual void initFromMemory(const char* data, size_t length);
@@ -38,18 +40,23 @@ public:
     // Returns the raw pixel values.
     std::vector<unsigned char> getRawRGBAData();
 
+    // Has the image been loaded but not yet been rasterized as the size was not known?
+    bool getPendingRasterization()
+    {
+        return (mTextureData != nullptr ? mTextureData->getPendingRasterization() : false);
+    }
+
     std::string getTextureFilePath();
 
     // For SVG graphics this function effectively rescales the image to the defined size.
     // It does unload and re-rasterize the texture though which may cause flickering in some
     // situations. An alternative is to set a scaling factor directly when loading the texture
     // using get(), by using the scaleDuringLoad parameter (which also works for raster graphics).
-    void rasterizeAt(size_t width, size_t height);
+    void rasterizeAt(float width, float height);
     glm::vec2 getSourceImageSize() const { return mSourceSize; }
 
     virtual ~TextureResource();
 
-    bool isInitialized() const { return true; }
     bool isTiled() const;
 
     const glm::ivec2 getSize() const { return mSize; }
@@ -65,6 +72,7 @@ protected:
                     bool tile,
                     bool dynamic,
                     bool linearMagnify,
+                    bool forceRasterization,
                     float scaleDuringLoad);
     virtual void unload(std::shared_ptr<ResourceManager>& rm);
     virtual void reload(std::shared_ptr<ResourceManager>& rm);

resources/graphics/badge_altemulator.svg

@@ -0,0 +1,405 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="80"
+   height="92"
+   viewBox="0 0 21.166666 24.341667"
+   version="1.1"
+   id="svg4842"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="badge_altemulator.svg">
+  <defs
+     id="defs4836" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="12.066296"
+     inkscape:cx="11.393424"
+     inkscape:cy="66.081732"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     units="px"
+     inkscape:snap-nodes="false"
+     inkscape:snap-others="false"
+     inkscape:snap-global="true"
+     inkscape:document-rotation="0" />
+  <metadata
+     id="metadata4839">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-1.9829021e-4,-271.40882)">
+    <g
+       id="g54"
+       aria-label="CONTENT RATED BY"
+       transform="matrix(0.09871346,0,0,0.10292059,-29.557342,270.26518)"
+       style="fill:#ffffff;stroke-width:0.25911999">
+      <path
+         id="path26"
+         d="m 17.44,237.05 c 0,6.2189 2.6119,7.5125 6.7911,7.5125 1.0199,0 1.8408,-0.0746 2.8607,-0.27364 l -0.52239,-3.9304 -2.2886,0.17413 c -1.0199,0.0497 -1.6667,-0.52239 -1.6667,-3.4826 0,-2.9602 0.74627,-3.5075 1.6667,-3.4577 l 2.2886,0.14926 0.54726,-3.9055 c -1.0199,-0.22388 -1.8159,-0.42289 -2.8358,-0.42289 -4.204,0 -6.8408,1.791 -6.8408,7.6368 z"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path28"
+         d="m 27.505,237.05 c 0,5.7712 2.1642,7.612 6.9154,7.612 3.5075,-0.17413 5.7214,-2.7114 5.7214,-7.612 0,-5.7463 -2.2388,-7.6368 -6.9652,-7.6368 -3.5075,0.17413 -5.6717,2.7612 -5.6717,7.6368 z m 5.1741,0 c 0,-2.9602 0.42289,-3.2836 1.0945,-3.2836 0.67161,0 1.1692,0.32339 1.1692,3.2836 0,2.9602 -0.42289,3.2836 -1.0945,3.2836 -0.67161,0 -1.1692,-0.32339 -1.1692,-3.2836 z"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path30"
+         d="m 41.176,237.05 c 0,2.4876 0.04975,4.8756 0.0995,7.214 0,0.14925 0.0995,0.24875 0.24876,0.24875 0.79602,0.0498 1.5672,0.0746 2.4129,0.0746 0.8209,0 1.2687,-0.0249 2.0647,-0.0746 l -0.0995,-6.5921 2.5871,6.3433 c 0.04975,0.14925 0.12438,0.24875 0.27363,0.24875 0.79602,0.0498 1.5174,0.0746 2.2637,0.0746 0.8209,0 1.2438,-0.0249 1.9403,-0.0746 0.04975,-2.4876 0.0995,-4.9751 0.0995,-7.4627 0,-2.4876 -0.04975,-4.8756 -0.0995,-7.214 0,-0.12438 -0.12438,-0.22388 -0.24876,-0.24876 -0.74627,-0.0249 -1.4677,-0.0498 -2.3134,-0.0498 -0.8209,0 -1.393,0.0249 -2.1642,0.0498 l 0.07463,6.6169 -2.5622,-6.3682 c -0.07463,-0.12438 -0.14925,-0.22388 -0.27363,-0.24876 -0.79602,-0.0249 -1.4428,-0.0498 -2.1642,-0.0498 -0.8209,0 -1.2687,0.0249 -2.0398,0.0498 -0.07463,2.4876 -0.0995,4.9751 -0.0995,7.4627 z"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path32"
+         d="m 53.827,231.48 c 0,0.67164 0,1.3433 0.02488,2.0398 0,0.14926 0.0995,0.24876 0.24876,0.24876 0.42289,0.0249 1.6169,0.0498 2.7363,0.0746 v 3.209 c 0,2.4876 0.04975,4.8756 0.0995,7.214 0,0.14925 0.0995,0.24875 0.24876,0.24875 0.8209,0.0498 1.6915,0.0746 2.5373,0.0746 0.8209,0 1.393,-0.0249 2.1891,-0.0746 0.04975,-2.4876 0.0995,-4.9751 0.0995,-7.4627 0,-1.1443 -0.02488,-2.1642 -0.04975,-3.1841 1.2935,0 2.6119,-0.0249 3.0348,-0.0497 v -1.8408 -2.1393 c -0.02488,-0.12438 -0.12438,-0.24876 -0.24876,-0.24876 -0.84577,-0.0249 -4.3035,-0.0498 -5.1493,-0.0498 -0.8209,0 -4.9751,0.0249 -5.7463,0.0498 -0.02488,0.67165 -0.02488,1.2935 -0.02488,1.8906 z"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path34"
+         d="m 65.782,237.05 c 0,2.4876 0.04975,4.8756 0.0995,7.214 0,0.14925 0.0995,0.24875 0.24876,0.24875 0.8209,0.0498 4.4279,0.12438 5.2736,0.12438 0.8209,0 3.4826,-0.0249 4.2786,-0.0746 v -1.8159 -2.1642 c -0.02488,-0.12437 -0.12438,-0.24875 -0.24876,-0.24875 -0.84577,-0.0249 -3.5572,-0.0497 -4.403,-0.0497 h -0.32338 v -1.2935 h 3.2338 v -1.6418 -1.8906 c -0.02488,-0.12438 -0.12438,-0.24876 -0.24876,-0.24876 -0.64677,0 -1.9901,-0.0249 -2.9851,-0.0249 v -1.3184 h 0.97015 c 0.8209,0 3.1592,0 3.9552,-0.0497 v -1.8159 -2.1642 c -0.02487,-0.12438 -0.12438,-0.24876 -0.24876,-0.24876 -0.84577,-0.0249 -3.5075,-0.0498 -4.3532,-0.0498 -0.8209,0 -4.3781,0.0249 -5.1493,0.0498 -0.07463,2.4876 -0.0995,4.9751 -0.0995,7.4627 z"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path36"
+         d="m 76.816,237.05 c 0,2.4876 0.04975,4.8756 0.0995,7.214 0,0.14925 0.0995,0.24875 0.24876,0.24875 0.79602,0.0498 1.5672,0.0746 2.4129,0.0746 0.8209,0 1.2687,-0.0249 2.0647,-0.0746 l -0.0995,-6.5921 2.5871,6.3433 c 0.04975,0.14925 0.12438,0.24875 0.27363,0.24875 0.79602,0.0498 1.5174,0.0746 2.2637,0.0746 0.8209,0 1.2438,-0.0249 1.9403,-0.0746 0.04975,-2.4876 0.0995,-4.9751 0.0995,-7.4627 0,-2.4876 -0.04975,-4.8756 -0.0995,-7.214 0,-0.12438 -0.12438,-0.22388 -0.24876,-0.24876 -0.74627,-0.0249 -1.4677,-0.0498 -2.3134,-0.0498 -0.8209,0 -1.393,0.0249 -2.1642,0.0498 l 0.07463,6.6169 -2.5622,-6.3682 c -0.07463,-0.12438 -0.14925,-0.22388 -0.27363,-0.24876 -0.79602,-0.0249 -1.4428,-0.0498 -2.1642,-0.0498 -0.8209,0 -1.2687,0.0249 -2.0398,0.0498 -0.07463,2.4876 -0.0995,4.9751 -0.0995,7.4627 z"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path38"
+         d="m 89.468,231.48 c 0,0.67164 0,1.3433 0.02488,2.0398 0,0.14926 0.0995,0.24876 0.24876,0.24876 0.42289,0.0249 1.6169,0.0498 2.7363,0.0746 v 3.209 c 0,2.4876 0.04975,4.8756 0.0995,7.214 0,0.14925 0.0995,0.24875 0.24876,0.24875 0.8209,0.0498 1.6915,0.0746 2.5373,0.0746 0.8209,0 1.393,-0.0249 2.1891,-0.0746 0.04975,-2.4876 0.0995,-4.9751 0.0995,-7.4627 0,-1.1443 -0.02488,-2.1642 -0.04975,-3.1841 1.2935,0 2.612,-0.0249 3.0348,-0.0497 v -1.8408 -2.1393 c -0.0249,-0.12438 -0.12438,-0.24876 -0.24875,-0.24876 -0.84578,-0.0249 -4.3035,-0.0498 -5.1493,-0.0498 -0.8209,0 -4.9751,0.0249 -5.7463,0.0498 -0.02488,0.67165 -0.02488,1.2935 -0.02488,1.8906 z"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path40"
+         d="m 106.6,236.73 c 0,2.4876 0.0498,5.199 0.0498,7.5373 0,0.14925 0.0995,0.24875 0.24876,0.24875 0.84577,0.0498 1.6916,0.0498 2.5373,0.0498 0.7214,0 1.4428,0 2.1891,-0.0498 -0.0249,-1.9403 -0.0995,-4.0796 -0.12438,-6.1194 h 0.32339 c 0.49751,1.7164 1.194,3.8309 1.8906,5.9453 0.0497,0.14926 0.24876,0.24876 0.37314,0.24876 0.67164,0.0498 1.3433,0.0746 2.0149,0.0746 0.87065,0 1.7662,-0.0498 2.5871,-0.14926 -0.42289,-1.8657 -0.99503,-3.6567 -1.9652,-5.597 -0.34826,-0.57214 -0.8209,-0.97015 -1.393,-1.1692 1.6418,-0.77114 2.6617,-2.1642 2.6617,-4.005 0,-4.0299 -2.5373,-4.3284 -6.2438,-4.3284 -1.393,0 -3.4577,0.17413 -5.0995,0.42289 0,2.4876 -0.0498,4.403 -0.0498,6.8906 z m 4.9005,-1.393 v -2.2388 c 0.17413,-0.0249 0.39802,-0.0249 0.59702,-0.0249 0.89553,0 1.1443,0.42289 1.1443,1.194 0,0.64676 -0.54726,1.0696 -1.3184,1.0696 z"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path42"
+         d="m 118.46,244.31 c 0,0.12438 0.0995,0.199 0.22388,0.199 0.8209,0.0498 1.6916,0.0746 2.5373,0.0746 0.8209,0 1.2687,-0.0249 2.0647,-0.0746 0.17413,-0.89552 0.32339,-1.8159 0.47264,-2.7363 h 2.3134 c 0.12438,0.84577 0.27363,1.6915 0.44776,2.4876 0.0249,0.14925 0.14926,0.24875 0.27364,0.24875 0.87065,0.0746 1.592,0.0746 2.4378,0.0746 0.84578,0 1.393,-0.0249 2.1642,-0.0746 -0.7214,-4.8259 -1.8906,-9.9005 -2.8358,-14.677 -0.0249,-0.12438 -0.14925,-0.24876 -0.27363,-0.24876 -1.194,-0.0249 -2.3632,-0.0498 -3.5572,-0.0498 -1.1692,0 -2.3134,0 -3.4328,0.0498 -0.9204,4.602 -1.9652,9.403 -2.7115,13.955 -0.0497,0.24876 -0.12437,0.7214 -0.12437,0.77115 z m 5.7214,-5.7712 c 0.199,-1.8657 0.39801,-3.7314 0.62189,-5.5722 0.24876,1.8657 0.49751,3.7314 0.77115,5.5722 z"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path44"
+         d="m 130.74,231.48 c 0,0.67164 0,1.3433 0.0249,2.0398 0,0.14926 0.0995,0.24876 0.24876,0.24876 0.42289,0.0249 1.6169,0.0498 2.7363,0.0746 v 3.209 c 0,2.4876 0.0498,4.8756 0.0995,7.214 0,0.14925 0.0995,0.24875 0.24876,0.24875 0.82089,0.0498 1.6915,0.0746 2.5373,0.0746 0.8209,0 1.393,-0.0249 2.1891,-0.0746 0.0497,-2.4876 0.0995,-4.9751 0.0995,-7.4627 0,-1.1443 -0.0249,-2.1642 -0.0498,-3.1841 1.2935,0 2.612,-0.0249 3.0348,-0.0497 v -1.8408 -2.1393 c -0.0249,-0.12438 -0.12438,-0.24876 -0.24876,-0.24876 -0.84577,-0.0249 -4.3035,-0.0498 -5.1493,-0.0498 -0.8209,0 -4.9751,0.0249 -5.7463,0.0498 -0.0249,0.67165 -0.0249,1.2935 -0.0249,1.8906 z"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path46"
+         d="m 142.69,237.05 c 0,2.4876 0.0498,4.8756 0.0995,7.214 0,0.14925 0.0995,0.24875 0.24876,0.24875 0.8209,0.0498 4.4279,0.12438 5.2736,0.12438 0.8209,0 3.4826,-0.0249 4.2786,-0.0746 v -1.8159 -2.1642 c -0.0249,-0.12437 -0.12438,-0.24875 -0.24876,-0.24875 -0.84577,-0.0249 -3.5572,-0.0497 -4.403,-0.0497 h -0.32338 v -1.2935 h 3.2338 v -1.6418 -1.8906 c -0.0249,-0.12438 -0.12438,-0.24876 -0.24876,-0.24876 -0.64676,0 -1.99,-0.0249 -2.9851,-0.0249 v -1.3184 h 0.97015 c 0.8209,0 3.1592,0 3.9552,-0.0497 v -1.8159 -2.1642 c -0.0249,-0.12438 -0.12438,-0.24876 -0.24876,-0.24876 -0.84577,-0.0249 -3.5075,-0.0498 -4.3532,-0.0498 -0.82089,0 -4.3781,0.0249 -5.1493,0.0498 -0.0746,2.4876 -0.0995,4.9751 -0.0995,7.4627 z"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path48"
+         d="m 158.7,237.05 c 0,-1.194 0,-2.2388 0.0249,-3.2836 h 0.42289 c 0.67164,0 1.1692,0.32339 1.1692,3.2836 0,2.9602 -0.49752,3.3085 -1.1692,3.3085 H 158.7249 C 158.7,239.3137 158.7,238.2689 158.7,237.05 Z m -4.9254,0 c 0,2.4876 0.0498,4.6269 0.0498,6.9652 0,0.14925 0.0995,0.24876 0.24876,0.24876 1.7164,0.17413 3.2836,0.29851 4.6518,0.29851 4.1791,0 6.7911,-1.2935 6.7911,-7.5125 0,-5.8458 -2.6368,-7.6368 -6.8408,-7.6368 -1.393,0 -3.209,0.17413 -4.8508,0.42289 0,2.4876 -0.0498,4.7264 -0.0498,7.214 z"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path50"
+         d="m 176.61,235.06 c 0,-0.77115 0,-1.4179 0.0249,-2.0398 0.0497,-0.0249 0.199,-0.0249 0.2985,-0.0249 0.64677,0 1.2935,0.32338 1.2935,0.99502 0,0.69652 -0.67164,1.0697 -1.4428,1.0697 z m 0.0249,3.6816 h 0.62189 c 0.67164,0 1.1443,0.42289 1.1443,0.99503 0,0.64677 -0.37313,1.0199 -1.3184,1.0199 h -0.39801 c -0.0249,-0.67164 -0.0497,-1.3433 -0.0497,-2.0149 z m -4.9005,-2.0149 c 0,2.4876 0.0497,5 0.0497,7.3383 0,0.14926 0.0995,0.27363 0.24876,0.29851 1.7164,0.19901 3.607,0.27363 5.2985,0.27363 3.3582,0 6.0448,-0.67164 6.0448,-4.6269 0,-1.194 -0.8209,-2.2886 -2.1891,-3.0597 0.89552,-0.77115 1.4428,-1.8906 1.4428,-3.209 0,-4.0299 -2.5373,-4.3284 -5.995,-4.3284 -1.393,0 -3.209,0.17413 -4.8508,0.42289 0,2.4876 -0.0497,4.403 -0.0497,6.8906 z"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path52"
+         d="m 183.01,229.69 c 0.42289,1.8906 1.0945,4.4279 2.0647,6.3433 0.57214,0.97015 1.2687,1.7413 2.0149,2.3383 -0.0249,2.0149 -0.0249,3.9801 -0.0249,5.8955 0,0.14925 0.0995,0.24875 0.24875,0.24875 0.8209,0.0498 1.7413,0.0746 2.5871,0.0746 0.8209,0 1.4428,-0.0249 2.2388,-0.0746 -0.0249,-2.0398 -0.0498,-4.0796 -0.0746,-6.1443 0.74627,-0.59702 1.4428,-1.3682 2.0149,-2.3383 0.97016,-1.9154 1.6418,-4.4528 2.0647,-6.3433 -0.8209,-0.0995 -1.7164,-0.14926 -2.5871,-0.14926 -0.67165,0 -1.3433,0.0249 -2.0149,0.0746 -0.12438,0 -0.32338,0.0995 -0.37313,0.24876 -0.54727,1.6667 -1.1443,3.7314 -1.592,5.4229 -0.47264,-1.6916 -1.0448,-3.7562 -1.592,-5.4229 -0.0497,-0.14926 -0.24876,-0.24876 -0.37314,-0.24876 -0.67164,-0.0497 -1.3433,-0.0746 -2.0149,-0.0746 -0.89552,0 -1.7662,0.0498 -2.5871,0.14926 z"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       id="g82"
+       aria-label="ES-DE"
+       transform="matrix(0.13868224,0,0,0.07325495,-40.728497,268.55447)"
+       style="fill:#ffffff;stroke-width:0.36405">
+      <path
+         id="path72"
+         d="m 13.291,366.57 c 0,5.5336 0.11067,10.846 0.22134,16.047 0,0.33202 0.22134,0.55336 0.55336,0.55336 1.8261,0.11067 9.8498,0.27668 11.731,0.27668 1.8261,0 7.747,-0.0553 9.5178,-0.16601 v -4.0395 -4.8142 c -0.05534,-0.27668 -0.27668,-0.55335 -0.55336,-0.55335 -1.8814,-0.0553 -7.913,-0.11068 -9.7944,-0.11068 h -0.71936 v -2.8775 h 7.1937 v -3.6522 -4.2055 c -0.05534,-0.27668 -0.27668,-0.55336 -0.55336,-0.55336 -1.4387,0 -4.4269,-0.0553 -6.6403,-0.0553 v -2.9328 h 2.1581 c 1.8261,0 7.0276,0 8.7984,-0.11067 v -4.0395 -4.8142 c -0.05533,-0.27668 -0.27668,-0.55336 -0.55336,-0.55336 -1.8814,-0.0553 -7.8023,-0.11067 -9.6838,-0.11067 -1.8261,0 -9.7391,0.0553 -11.455,0.11067 -0.16601,5.5336 -0.22134,11.067 -0.22134,16.601 z"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path74"
+         d="m 37.75,382.84 c 3.8182,0.44268 7.913,0.60869 11.676,0.60869 7.4703,0 13.557,-2.0474 13.557,-10.846 0,-7.6917 -6.8616,-9.7391 -11.455,-11.122 -2.2688,-0.66403 -3.9842,-1.1621 -3.9842,-2.1581 0,-0.996 1.1067,-1.5494 2.8221,-1.5494 3.4308,0 7.3597,1.1067 9.9604,2.2688 l 1.2727,-9.2411 c -3.7075,-0.71937 -7.4703,-1.2174 -10.68,-1.2174 -7.581,0 -13.115,0.66403 -13.115,9.6284 0,8.5217 6.1423,10.292 10.292,11.455 2.1581,0.60869 3.7628,1.0514 3.7628,2.1581 0,0.88537 -0.88537,1.9921 -2.9881,1.9921 -2.4901,0 -5.9209,-0.71936 -9.7944,-1.9368 z"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path76"
+         d="m 64.643,366.52 c 0,1.3834 0.05534,2.6561 0.11067,4.0395 0,0.33201 0.22134,0.55336 0.55336,0.55336 1.8261,0.11067 8.9644,0.27667 10.846,0.27667 1.8261,0 8.3004,-0.0553 9.5178,-0.166 0,-1.162 0.05533,-2.3794 0.05533,-3.4862 0,-2.7668 -0.05533,-3.3755 -0.05533,-4.7035 -0.05534,-0.27668 -0.27668,-0.55336 -0.55336,-0.55336 -1.8814,-0.0553 -6.2529,-0.11067 -8.1344,-0.11067 -1.8261,0 -10.514,0.0553 -12.229,0.11067 -0.05534,1.8261 -0.11067,2.9881 -0.11067,4.0395 z"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path78"
+         d="m 99.836,366.57 c 0,-2.6561 0,-4.9802 0.05534,-7.3043 h 0.94071 c 1.4941,0 2.6008,0.71937 2.6008,7.3043 0,6.58493 -1.1067,7.3597 -2.6008,7.3597 H 99.89134 C 99.836,371.6056 99.836,369.2815 99.836,366.57 Z m -10.956,0 c 0,5.5336 0.11067,10.292 0.11067,15.494 0,0.33202 0.22134,0.55336 0.55336,0.55336 3.8182,0.38735 7.3043,0.66403 10.348,0.66403 9.2964,0 15.107,-2.8775 15.107,-16.711 0,-13.004 -5.8656,-16.988 -15.217,-16.988 -3.0988,0 -7.1383,0.38735 -10.79,0.94071 0,5.5336 -0.11067,10.514 -0.11067,16.047 z"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path80"
+         d="m 117.88,366.57 c 0,5.5336 0.11067,10.846 0.22134,16.047 0,0.33202 0.22134,0.55336 0.55336,0.55336 1.8261,0.11067 9.8498,0.27668 11.731,0.27668 1.8261,0 7.747,-0.0553 9.5178,-0.16601 v -4.0395 -4.8142 c -0.0553,-0.27668 -0.27668,-0.55335 -0.55336,-0.55335 -1.8814,-0.0553 -7.913,-0.11068 -9.7944,-0.11068 h -0.71936 v -2.8775 h 7.1936 v -3.6522 -4.2055 c -0.0553,-0.27668 -0.27668,-0.55336 -0.55336,-0.55336 -1.4387,0 -4.4269,-0.0553 -6.6403,-0.0553 v -2.9328 h 2.1581 c 1.8261,0 7.0276,0 8.7984,-0.11067 v -4.0395 -4.8142 c -0.0553,-0.27668 -0.27667,-0.55336 -0.55335,-0.55336 -1.8814,-0.0553 -7.8024,-0.11067 -9.6838,-0.11067 -1.8261,0 -9.7391,0.0553 -11.455,0.11067 -0.16601,5.5336 -0.22134,11.067 -0.22134,16.601 z"
+         inkscape:connector-curvature="0" />
+    </g>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.58329964px;line-height:1.25;font-family:Dyuthi;-inkscape-font-specification:Dyuthi;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458299"
+       x="19.372959"
+       y="271.49698"
+       id="text5145" />
+    <rect
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.51566374;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       id="rect5286"
+       width="21.166666"
+       height="24.341667"
+       x="0.0001986081"
+       y="271.40881" />
+    <g
+       id="g16"
+       transform="matrix(0.10079384,0,0,0.08235571,-2.2547839e-4,271.45845)"
+       style="fill:#d7d7d7;fill-opacity:1">
+      <rect
+         x="3.0257001"
+         y="2.9029"
+         width="204.36"
+         height="288.81"
+         id="rect14"
+         style="fill:#d7d7d7;fill-opacity:1;stroke-width:0.26458001" />
+    </g>
+    <g
+       id="g20"
+       transform="matrix(0.10079384,0,0,0.0816046,-2.2547839e-4,271.5469)"
+       style="fill:#000000;fill-opacity:1">
+      <rect
+         x="7.7007999"
+         y="7.7174001"
+         width="194.89999"
+         height="279.22"
+         id="rect18"
+         style="stroke-width:0.26458001;fill:#000000;fill-opacity:1" />
+    </g>
+    <rect
+       style="fill:#e6e6e6;fill-opacity:1;stroke-width:0.02649944"
+       id="rect22"
+       height="17.205626"
+       width="17.540144"
+       y="276.70892"
+       x="1.8325093" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Layer 2"
+     transform="translate(0,-5.2916667)">
+    <g
+       id="g5222"
+       transform="translate(-0.01924762,-262.81668)">
+      <g
+         transform="translate(0.1223722)"
+         id="g5202">
+        <path
+           style="opacity:1;fill:#ffd700;fill-opacity:1;stroke:#282828;stroke-width:0.221985;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+           d="m 11.142864,276.8821 c 0,-0.13102 -0.08756,-0.2366 -0.19606,-0.2366 h -0.245083 v -0.8903 h -0.444919 v 0.8903 h -0.245074 c -0.1085141,0 -0.1960697,0.10558 -0.1960697,0.2366 v 0.80877 c 0,0.13102 0.087556,0.23659 0.1960697,0.23659 h 0.935076 c 0.108505,0 0.19606,-0.10557 0.19606,-0.23659 z m -0.437842,0.17863 v 0.45151 h -0.451513 v -0.45151 z"
+           id="rect5069-0-5-6-6"
+           inkscape:connector-curvature="0" />
+        <path
+           style="opacity:1;vector-effect:none;fill:#ffd700;fill-opacity:1;stroke:#282828;stroke-width:0.222;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           d="m 16.452628,276.8821 c 0,-0.13102 -0.08755,-0.2366 -0.19607,-0.2366 h -0.245073 v -0.8903 h -0.444919 v 0.8903 h -0.245083 c -0.108514,0 -0.196061,0.10558 -0.196061,0.2366 v 0.80877 c 0,0.13102 0.08756,0.23659 0.196061,0.23659 h 0.935075 c 0.108506,0 0.19607,-0.10557 0.19607,-0.23659 z m -0.437851,0.17863 v 0.45151 h -0.451513 v -0.45151 z"
+           id="rect5195-2"
+           inkscape:connector-curvature="0" />
+        <path
+           style="opacity:1;vector-effect:none;fill:#ffd700;fill-opacity:1;stroke:#282828;stroke-width:0.221985;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           d="m 5.8349883,276.8821 c 0,-0.13102 -0.087556,-0.2366 -0.1960607,-0.2366 H 5.3938449 v -0.8903 H 4.9489256 v 0.8903 H 4.703852 c -0.1085142,0 -0.1960698,0.10558 -0.1960698,0.2366 v 0.80877 c 0,0.13102 0.087556,0.23659 0.1960698,0.23659 h 0.9350756 c 0.1085051,0 0.1960607,-0.10557 0.1960607,-0.23659 z m -0.4378418,0.17863 v 0.45151 H 4.9456332 v -0.45151 z"
+           id="rect5069-0-5-1-0-8-8"
+           inkscape:connector-curvature="0" />
+        <path
+           style="opacity:1;vector-effect:none;fill:#ffd700;fill-opacity:1;stroke:#282828;stroke-width:0.221985;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           d="m 7.605691,276.8821 c 0,-0.13102 -0.087556,-0.2366 -0.1960607,-0.2366 H 7.1645475 v -0.8903 H 6.7196374 v 0.8903 H 6.4745547 c -0.1085143,0 -0.1960608,0.10558 -0.1960608,0.2366 v 0.80877 c 0,0.13102 0.087556,0.23659 0.1960608,0.23659 h 0.9350756 c 0.1085051,0 0.1960607,-0.10557 0.1960607,-0.23659 z m -0.4378419,0.17863 v 0.45151 H 6.7163358 v -0.45151 z"
+           id="rect5069-0-5-1-0-4"
+           inkscape:connector-curvature="0" />
+        <path
+           style="opacity:1;vector-effect:none;fill:#ffd700;fill-opacity:1;stroke:#282828;stroke-width:0.221985;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           d="m 9.3740406,276.8821 c 0,-0.13102 -0.087556,-0.2366 -0.1960607,-0.2366 H 8.9328972 v -0.8903 H 8.487987 v 0.8903 H 8.2429043 c -0.1085143,0 -0.1960607,0.10558 -0.1960607,0.2366 v 0.80877 c 0,0.13102 0.087556,0.23659 0.1960607,0.23659 h 0.9350756 c 0.1085051,0 0.1960607,-0.10557 0.1960607,-0.23659 z m -0.4378419,0.17863 v 0.45151 H 8.4846854 v -0.45151 z"
+           id="rect5069-0-5-1-7"
+           inkscape:connector-curvature="0" />
+        <path
+           style="opacity:1;fill:#ffd700;fill-opacity:1;stroke:#282828;stroke-width:0.221985;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+           d="m 12.916869,276.8821 c 0,-0.13102 -0.08756,-0.2366 -0.196061,-0.2366 h -0.245083 v -0.8903 h -0.444919 v 0.8903 h -0.245074 c -0.108514,0 -0.19607,0.10558 -0.19607,0.2366 v 0.80877 c 0,0.13102 0.08756,0.23659 0.19607,0.23659 h 0.935076 c 0.108505,0 0.196061,-0.10557 0.196061,-0.23659 z m -0.437842,0.17863 v 0.45151 h -0.451514 v -0.45151 z"
+           id="rect5069-0-5-2"
+           inkscape:connector-curvature="0" />
+        <path
+           style="opacity:1;fill:#ffd700;fill-opacity:1;stroke:#282828;stroke-width:0.221985;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+           d="m 14.686158,276.8821 c 0,-0.13102 -0.08756,-0.2366 -0.196061,-0.2366 h -0.245083 v -0.8903 h -0.44491 v 0.8903 h -0.245083 c -0.108514,0 -0.196061,0.10558 -0.196061,0.2366 v 0.80877 c 0,0.13102 0.08756,0.23659 0.196061,0.23659 h 0.935076 c 0.108505,0 0.196061,-0.10557 0.196061,-0.23659 z m -0.437842,0.17863 v 0.45151 h -0.451514 v -0.45151 z"
+           id="rect5069-0-4"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="translate(0.12237585)"
+         id="g5193">
+        <path
+           style="opacity:1;fill:#ffd700;fill-opacity:1;stroke:#282828;stroke-width:0.221985;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+           d="m 11.142864,282.65618 c 0,-0.13102 -0.08756,-0.2366 -0.19606,-0.2366 h -0.935076 c -0.1084776,0 -0.1960697,0.10558 -0.1960697,0.2366 v 0.80876 c 0,0.13102 0.087556,0.2366 0.1960697,0.2366 h 0.245074 v 0.8903 h 0.444919 v -0.8903 h 0.245083 c 0.108477,0 0.19606,-0.10558 0.19606,-0.2366 z m -0.437842,0.17862 v 0.45152 h -0.451513 v -0.45152 z"
+           id="rect5069-0-5-6"
+           inkscape:connector-curvature="0" />
+        <path
+           style="opacity:1;vector-effect:none;fill:#ffd700;fill-opacity:1;stroke:#282828;stroke-width:0.221985;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           d="m 16.452628,282.65618 c 0,-0.13102 -0.08755,-0.2366 -0.19607,-0.2366 h -0.935075 c -0.108478,0 -0.196061,0.10558 -0.196061,0.2366 v 0.80876 c 0,0.13102 0.08756,0.2366 0.196061,0.2366 h 0.245083 v 0.8903 h 0.444919 v -0.8903 h 0.245073 c 0.108478,0 0.19607,-0.10558 0.19607,-0.2366 z m -0.437851,0.17862 v 0.45152 h -0.451513 v -0.45152 z"
+           id="rect5195"
+           inkscape:connector-curvature="0" />
+        <path
+           style="opacity:1;vector-effect:none;fill:#ffd700;fill-opacity:1;stroke:#282828;stroke-width:0.221985;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           d="m 5.8349883,282.65618 c 0,-0.13102 -0.087556,-0.2366 -0.1960607,-0.2366 H 4.703852 c -0.1084777,0 -0.1960698,0.10558 -0.1960698,0.2366 v 0.80876 c 0,0.13102 0.087556,0.2366 0.1960698,0.2366 h 0.2450736 v 0.8903 h 0.4449193 v -0.8903 h 0.2450827 c 0.1084778,0 0.1960607,-0.10558 0.1960607,-0.2366 z m -0.4378418,0.17862 v 0.45152 H 4.9456332 v -0.45152 z"
+           id="rect5069-0-5-1-0-8"
+           inkscape:connector-curvature="0" />
+        <path
+           style="opacity:1;vector-effect:none;fill:#ffd700;fill-opacity:1;stroke:#282828;stroke-width:0.221985;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           d="m 7.605691,282.65618 c 0,-0.13102 -0.087556,-0.2366 -0.1960607,-0.2366 H 6.4745547 c -0.1084778,0 -0.1960608,0.10558 -0.1960608,0.2366 v 0.80876 c 0,0.13102 0.087556,0.2366 0.1960608,0.2366 h 0.2450827 v 0.8903 h 0.4449101 v -0.8903 h 0.2450828 c 0.1084777,0 0.1960607,-0.10558 0.1960607,-0.2366 z m -0.4378419,0.17862 v 0.45152 H 6.7163358 v -0.45152 z"
+           id="rect5069-0-5-1-0"
+           inkscape:connector-curvature="0" />
+        <path
+           style="opacity:1;vector-effect:none;fill:#ffd700;fill-opacity:1;stroke:#282828;stroke-width:0.221985;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           d="m 9.3740406,282.65618 c 0,-0.13102 -0.087556,-0.2366 -0.1960607,-0.2366 H 8.2429043 c -0.1084778,0 -0.1960607,0.10558 -0.1960607,0.2366 v 0.80876 c 0,0.13102 0.087556,0.2366 0.1960607,0.2366 H 8.487987 v 0.8903 h 0.4449102 v -0.8903 h 0.2450827 c 0.1084777,0 0.1960607,-0.10558 0.1960607,-0.2366 z m -0.4378419,0.17862 v 0.45152 H 8.4846854 v -0.45152 z"
+           id="rect5069-0-5-1"
+           inkscape:connector-curvature="0" />
+        <path
+           style="opacity:1;fill:#ffd700;fill-opacity:1;stroke:#282828;stroke-width:0.221985;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+           d="m 12.916869,282.65618 c 0,-0.13102 -0.08756,-0.2366 -0.196061,-0.2366 h -0.935076 c -0.108478,0 -0.19607,0.10558 -0.19607,0.2366 v 0.80876 c 0,0.13102 0.08756,0.2366 0.19607,0.2366 h 0.245074 v 0.8903 h 0.444919 v -0.8903 h 0.245083 c 0.108478,0 0.196061,-0.10558 0.196061,-0.2366 z m -0.437842,0.17862 v 0.45152 h -0.451514 v -0.45152 z"
+           id="rect5069-0-5"
+           inkscape:connector-curvature="0" />
+        <path
+           style="opacity:1;fill:#ffd700;fill-opacity:1;stroke:#282828;stroke-width:0.221985;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+           d="m 14.686158,282.65618 c 0,-0.13102 -0.08756,-0.2366 -0.196061,-0.2366 h -0.935076 c -0.108478,0 -0.196061,0.10558 -0.196061,0.2366 v 0.80876 c 0,0.13102 0.08756,0.2366 0.196061,0.2366 h 0.245083 v 0.8903 h 0.44491 v -0.8903 h 0.245083 c 0.108478,0 0.196061,-0.10558 0.196061,-0.2366 z m -0.437842,0.17862 v 0.45152 h -0.451514 v -0.45152 z"
+           id="rect5069-0"
+           inkscape:connector-curvature="0" />
+      </g>
+      <path
+         id="rect5061"
+         d="m 4.7486749,277.07833 c -0.3682172,0 -0.664559,0.25094 -0.664559,0.56276 v 5.0648 c 0,0.31182 0.2963418,0.56276 0.664559,0.56276 H 16.456487 c 0.368217,0 0.664559,-0.25094 0.664559,-0.56276 v -1.64279 a 0.91714642,0.91714642 0 0 1 -0.698149,-0.88987 0.91714642,0.91714642 0 0 1 0.698149,-0.88935 v -1.64279 c 0,-0.31182 -0.296342,-0.56276 -0.664559,-0.56276 z"
+         style="opacity:1;fill:#fcfcfd;fill-opacity:1;stroke:#282828;stroke-width:0.27490199;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+         inkscape:connector-curvature="0" />
+      <rect
+         rx="0.42198506"
+         ry="0.42198506"
+         y="277.72012"
+         x="7.7069221"
+         height="4.9067254"
+         width="5.7913175"
+         id="rect5019"
+         style="opacity:1;vector-effect:none;fill:#ffd700;fill-opacity:1;stroke:#282828;stroke-width:0.21396799;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" />
+    </g>
+    <g
+       aria-label="ALTERNATIVE"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.60125422px;line-height:1.25;font-family:FontAwesome;-inkscape-font-specification:FontAwesome;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="text4942"
+       transform="matrix(1.1491297,0,0,1.5857309,-1.3267257,-15.489625)">
+      <path
+         d="m 3.9524717,26.040316 q 0,-0.01016 0.012066,-0.07938 0.033659,-0.208938 0.076844,-0.432484 0.043185,-0.22418 0.1117727,-0.555688 0.068588,-0.332142 0.089545,-0.435659 0.1270144,-0.0057 0.3492895,-0.0057 0.2070334,0 0.3619909,0.0057 0.010161,0 0.019052,0.0076 0.00889,0.007 0.010796,0.01778 0.027943,0.141621 0.094626,0.462967 0.067318,0.321347 0.1143129,0.56839 0.04763,0.246408 0.081289,0.467413 -0.1200285,0.0057 -0.221005,0.0057 -0.1619433,0 -0.2489481,-0.0057 -0.010796,-6.35e-4 -0.019687,-0.0076 -0.00826,-0.0076 -0.010161,-0.01778 -0.028578,-0.146067 -0.04636,-0.254029 H 4.4922827 q -0.020322,0.135905 -0.0489,0.279432 -0.1219338,0.0057 -0.2102088,0.0057 -0.1054219,0 -0.2597444,-0.0057 -0.00953,0 -0.015242,-0.0057 -0.00572,-0.0064 -0.00572,-0.01524 z m 0.5823608,-0.588711 h 0.1428912 q -0.015242,-0.104152 -0.04128,-0.296579 -0.026038,-0.193062 -0.037469,-0.273081 -0.012701,0.103517 -0.033659,0.297214 -0.020957,0.193062 -0.030483,0.272446 z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:digitalt;-inkscape-font-specification:digitalt;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4944"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 5.3655065,25.299187 q 0,-0.35564 0.010161,-0.762086 0.1206636,-0.0057 0.2222751,-0.0057 0.1047869,0 0.2603795,0.0057 0.010161,0 0.017782,0.0076 0.00762,0.0076 0.00762,0.01778 0.010161,0.477574 0.010161,0.736683 0,0.168929 -0.00191,0.329603 h 0.010796 q 0.2318012,0 0.3873938,0.0057 0.010161,0 0.017782,0.0076 0.00762,0.0076 0.00762,0.01778 0.00254,0.154958 0.00254,0.219735 0,0.09971 -0.00254,0.186711 -0.1206637,0.0057 -0.3746924,0.0057 -0.062872,0 -0.2680003,-0.0044 -0.2044932,-0.0038 -0.2718108,-0.0063 -0.010161,0 -0.017782,-0.0076 -0.00762,-0.0076 -0.00762,-0.01778 -0.010161,-0.477574 -0.010161,-0.736684 z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:digitalt;-inkscape-font-specification:digitalt;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4946"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 6.2012611,24.730163 q 0,-0.102247 0.00254,-0.193062 0.1212988,-0.0057 0.5880766,-0.0057 0.3689767,0 0.5245693,0.0057 0.010161,0 0.017782,0.0076 0.00762,0.0076 0.00762,0.01778 0.00254,0.143526 0.00254,0.215924 0,0.103517 -0.00254,0.190522 -0.04128,0.0019 -0.3073748,0.0044 0.00254,0.137175 0.00254,0.325791 0,0.355641 -0.010161,0.762087 -0.1206636,0.0057 -0.2222751,0.0057 -0.1047869,0 -0.2603795,-0.0057 -0.010161,0 -0.017782,-0.0076 -0.00762,-0.0076 -0.00762,-0.01778 -0.010161,-0.477574 -0.010161,-0.736684 0,-0.117488 0.00254,-0.328332 -0.1460665,-0.0032 -0.2819719,-0.007 -0.010161,0 -0.017782,-0.0076 -0.00762,-0.0076 -0.00762,-0.01778 -0.00254,-0.146067 -0.00254,-0.208304 z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:digitalt;-inkscape-font-specification:digitalt;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4948"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 7.4485421,25.299187 q 0,-0.35564 0.010161,-0.762086 0.1206637,-0.0057 0.5271097,-0.0057 0.2876875,0 0.4432801,0.0057 0.010161,0 0.017782,0.0076 0.00762,0.0076 0.00762,0.01778 0.00254,0.154958 0.00254,0.219735 0,0.09971 -0.00254,0.186711 -0.1073272,0.0051 -0.4039057,0.0051 -0.053346,0 -0.096531,-6.35e-4 -0.00127,0.08764 -0.00191,0.133365 0.2273557,0.0013 0.3041994,0.0044 0.010161,0 0.017782,0.0076 0.00762,0.0076 0.00762,0.01778 0.00191,0.104152 0.00191,0.191157 0,0.07811 -0.00191,0.169564 H 7.9521541 q 6.35e-4,0.04445 0.00191,0.132095 h 0.030483 q 0.3111852,0 0.4496309,0.0051 0.010161,0 0.017782,0.0076 0.00762,0.0076 0.00762,0.01778 0.00254,0.154958 0.00254,0.219735 0,0.09971 -0.00254,0.186711 -0.1206637,0.0057 -0.4356593,0.0057 -0.062872,0 -0.2680003,-0.0044 -0.2044932,-0.0038 -0.2718108,-0.0063 -0.010161,0 -0.017782,-0.0076 -0.00762,-0.0076 -0.00762,-0.01778 -0.010161,-0.477574 -0.010161,-0.736684 z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:digitalt;-inkscape-font-specification:digitalt;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4950"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 8.6069129,25.266164 q 0,-0.127015 0.00254,-0.35183 0.00254,-0.224816 0.00254,-0.35183 0.1270144,-0.01969 0.2699055,-0.03112 0.1435263,-0.01207 0.2508534,-0.01207 0.092721,0 0.1555926,0.0032 0.062872,0.0025 0.1352703,0.0127 0.073033,0.0095 0.1200286,0.02794 0.046995,0.01842 0.093991,0.05081 0.046995,0.03239 0.073033,0.07875 0.026673,0.04636 0.043185,0.113678 0.016512,0.06732 0.016512,0.154322 0,0.137811 -0.071128,0.242598 -0.071128,0.104786 -0.1981424,0.164483 0.08637,0.02985 0.1403509,0.121934 0.1263793,0.248313 0.2019528,0.571565 -0.1168532,0.01397 -0.2660951,0.01397 -0.1079622,0 -0.2038581,-0.0064 -0.012066,-6.35e-4 -0.023498,-0.0076 -0.011431,-0.007 -0.015242,-0.01778 -0.123839,-0.375963 -0.1924268,-0.607129 h -0.033659 q 0.00127,0.07113 0.00572,0.291498 0.00508,0.22037 0.00572,0.333413 -0.1041518,0.0044 -0.2229102,0.0044 -0.1073272,0 -0.2597444,-0.0044 -0.010796,0 -0.018417,-0.007 -0.00699,-0.0076 -0.00699,-0.01842 0,-0.117489 -0.00254,-0.379138 -0.00254,-0.26165 -0.00254,-0.390569 z m 0.5004366,-0.142256 h 0.043185 q 0.060332,0 0.097166,-0.02985 0.037469,-0.03048 0.037469,-0.08002 0,-0.06224 -0.025403,-0.09209 -0.025403,-0.03048 -0.09018,-0.03048 -0.033024,0 -0.060967,0.0019 -0.00127,0.148607 -0.00127,0.230532 z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:digitalt;-inkscape-font-specification:digitalt;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4952"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 9.9380235,25.299187 q 0,-0.35564 0.010161,-0.762086 0.1206635,-0.0057 0.2095735,-0.0057 0.07557,0 0.219735,0.0057 0.01842,6.35e-4 0.02794,0.0254 l 0.26292,0.650314 -0.0089,-0.675717 q 0.121299,-0.0057 0.222275,-0.0057 0.09907,0 0.234977,0.0057 0.0108,6.35e-4 0.01778,0.0083 0.0076,0.007 0.0076,0.01715 0.01016,0.477574 0.01016,0.736683 0,0.355641 -0.01016,0.762087 -0.105422,0.0057 -0.196873,0.0057 -0.108597,0 -0.232436,-0.0057 -0.01905,-6.35e-4 -0.02794,-0.0254 l -0.26292,-0.650314 0.0089,0.675717 q -0.120663,0.0057 -0.209573,0.0057 -0.100342,0 -0.2476786,-0.0057 -0.010796,-6.35e-4 -0.018417,-0.0076 -0.00699,-0.0076 -0.00699,-0.01778 -0.010161,-0.477574 -0.010161,-0.736684 z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:digitalt;-inkscape-font-specification:digitalt;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4954"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 11.243096,26.040316 q 0,-0.01016 0.01207,-0.07938 0.03366,-0.208938 0.07684,-0.432484 0.04318,-0.22418 0.111773,-0.555688 0.06859,-0.332142 0.08955,-0.435659 0.127014,-0.0057 0.34929,-0.0057 0.207033,0 0.361991,0.0057 0.01016,0 0.01905,0.0076 0.0089,0.007 0.0108,0.01778 0.02794,0.141621 0.09463,0.462967 0.06732,0.321347 0.114313,0.56839 0.04763,0.246408 0.08129,0.467413 -0.120029,0.0057 -0.221005,0.0057 -0.161944,0 -0.248948,-0.0057 -0.0108,-6.35e-4 -0.01969,-0.0076 -0.0083,-0.0076 -0.01016,-0.01778 -0.02858,-0.146067 -0.04636,-0.254029 h -0.235612 q -0.02032,0.135905 -0.0489,0.279432 -0.121934,0.0057 -0.210209,0.0057 -0.105422,0 -0.259744,-0.0057 -0.0095,0 -0.01524,-0.0057 -0.0057,-0.0064 -0.0057,-0.01524 z m 0.582361,-0.588711 h 0.142891 q -0.01524,-0.104152 -0.04128,-0.296579 -0.02604,-0.193062 -0.03747,-0.273081 -0.0127,0.103517 -0.03366,0.297214 -0.02096,0.193062 -0.03048,0.272446 z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:digitalt;-inkscape-font-specification:digitalt;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4956"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 12.521496,24.730163 q 0,-0.102247 0.0025,-0.193062 0.121299,-0.0057 0.588077,-0.0057 0.368977,0 0.524569,0.0057 0.01016,0 0.01778,0.0076 0.0076,0.0076 0.0076,0.01778 0.0025,0.143526 0.0025,0.215924 0,0.103517 -0.0025,0.190522 -0.04128,0.0019 -0.307375,0.0044 0.0025,0.137175 0.0025,0.325791 0,0.355641 -0.01016,0.762087 -0.120663,0.0057 -0.222275,0.0057 -0.104787,0 -0.260379,-0.0057 -0.01016,0 -0.01778,-0.0076 -0.0076,-0.0076 -0.0076,-0.01778 -0.01016,-0.477574 -0.01016,-0.736684 0,-0.117488 0.0025,-0.328332 -0.146066,-0.0032 -0.281972,-0.007 -0.01016,0 -0.01778,-0.0076 -0.0076,-0.0076 -0.0076,-0.01778 -0.0025,-0.146067 -0.0025,-0.208304 z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:digitalt;-inkscape-font-specification:digitalt;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4958"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 13.768777,25.299187 q 0,-0.35564 0.01016,-0.762086 0.120664,-0.0057 0.222276,-0.0057 0.104786,0 0.260379,0.0057 0.01016,0 0.01778,0.0076 0.0076,0.0076 0.0076,0.01778 0.01016,0.477574 0.01016,0.736683 0,0.355641 -0.01016,0.762087 -0.120664,0.0057 -0.222275,0.0057 -0.104787,0 -0.26038,-0.0057 -0.01016,0 -0.01778,-0.0076 -0.0076,-0.0076 -0.0076,-0.01778 -0.01016,-0.477574 -0.01016,-0.736684 z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:digitalt;-inkscape-font-specification:digitalt;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4960"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 14.377811,24.537101 q 0.120028,-0.0057 0.231166,-0.0057 0.161943,0 0.248948,0.0057 0.0108,6.35e-4 0.01969,0.0083 0.0089,0.007 0.0108,0.01715 0.02921,0.147337 0.05906,0.336588 0.03048,0.189252 0.04382,0.285147 0.01397,0.0959 0.04763,0.339764 0.0032,-0.02096 0.01461,-0.107327 0.01207,-0.08637 0.01588,-0.113678 0.0038,-0.02794 0.01461,-0.105422 0.0108,-0.07811 0.01651,-0.114313 0.0057,-0.0362 0.01588,-0.105422 0.01016,-0.06922 0.01778,-0.114313 0.0076,-0.04509 0.01778,-0.104787 0.01016,-0.06033 0.02032,-0.114313 0.01016,-0.05398 0.02096,-0.107327 0.121934,-0.0057 0.197507,-0.0057 0.115583,0 0.269906,0.0057 0.0095,0 0.01524,0.0064 0.0057,0.0057 0.0057,0.01461 0,0.0095 -0.01207,0.08002 -0.0959,0.593157 -0.288323,1.423196 -0.120663,0.0057 -0.323251,0.0057 -0.174645,0 -0.349925,-0.0057 -0.01016,0 -0.01905,-0.007 -0.0083,-0.0076 -0.0108,-0.01842 -0.102247,-0.448361 -0.175915,-0.805906 -0.07367,-0.358181 -0.124474,-0.692864 z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:digitalt;-inkscape-font-specification:digitalt;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4962"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 15.762903,25.299187 q 0,-0.35564 0.01016,-0.762086 0.120664,-0.0057 0.527109,-0.0057 0.287688,0 0.443281,0.0057 0.01016,0 0.01778,0.0076 0.0076,0.0076 0.0076,0.01778 0.0025,0.154958 0.0025,0.219735 0,0.09971 -0.0025,0.186711 -0.107327,0.0051 -0.403905,0.0051 -0.05335,0 -0.09653,-6.35e-4 -0.0013,0.08764 -0.0019,0.133365 0.227355,0.0013 0.304199,0.0044 0.01016,0 0.01778,0.0076 0.0076,0.0076 0.0076,0.01778 0.0019,0.104152 0.0019,0.191157 0,0.07811 -0.0019,0.169564 h -0.329602 q 6.35e-4,0.04445 0.0019,0.132095 h 0.03048 q 0.311186,0 0.449631,0.0051 0.01016,0 0.01778,0.0076 0.0076,0.0076 0.0076,0.01778 0.0025,0.154958 0.0025,0.219735 0,0.09971 -0.0025,0.186711 -0.120664,0.0057 -0.435659,0.0057 -0.06287,0 -0.268001,-0.0044 -0.204493,-0.0038 -0.27181,-0.0063 -0.01016,0 -0.01778,-0.0076 -0.0076,-0.0076 -0.0076,-0.01778 -0.01016,-0.477574 -0.01016,-0.736684 z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:digitalt;-inkscape-font-specification:digitalt;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4964"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       aria-label="EMULATOR"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:4.39663363px;line-height:1.25;font-family:FontAwesome;-inkscape-font-specification:FontAwesome;letter-spacing:0px;word-spacing:0px;fill:#f0f0f0;fill-opacity:1;stroke:none;stroke-width:0.10991583"
+       id="text5082"
+       transform="matrix(1,0,0,1.1141081,-0.03539297,-1.229734)">
+      <path
+         d="m 1.8968336,8.600587 q 0,-0.6011022 0.017174,-1.2880762 0.2039454,-0.00966 0.8909194,-0.00966 0.4862488,0 0.7492311,0.00966 0.017174,0 0.030055,0.012881 0.012881,0.012881 0.012881,0.030055 0.00429,0.2619088 0.00429,0.3713953 0,0.1685233 -0.00429,0.3155787 -0.181404,0.00859 -0.6826804,0.00859 -0.090165,0 -0.1631563,-0.00107 -0.00215,0.1481288 -0.00322,0.2254134 0.3842761,0.00215 0.5141571,0.00751 0.017174,0 0.030055,0.012881 0.012881,0.012881 0.012881,0.030055 0.00322,0.1760371 0.00322,0.3230925 0,0.1320278 -0.00322,0.286597 h -0.557093 q 0.00107,0.075138 0.00322,0.2232665 h 0.051523 q 0.5259645,0 0.759965,0.00859 0.017174,0 0.030055,0.012881 0.012881,0.012881 0.012881,0.030055 0.00429,0.2619088 0.00429,0.3713953 0,0.1685233 -0.00429,0.3155787 -0.2039454,0.00966 -0.7363503,0.00966 -0.1062662,0 -0.4529734,-0.00751 -0.3456338,-0.00644 -0.4594139,-0.010734 -0.017174,0 -0.030055,-0.012881 Q 1.9140079,9.8629018 1.9140079,9.8457274 1.8968336,9.038533 1.8968336,8.600587 Z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:digitalt;-inkscape-font-specification:digitalt;fill:#f0f0f0;fill-opacity:1;stroke-width:0.10991583"
+         id="path5084"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 3.8461223,8.600587 q 0,-0.6011022 0.017174,-1.2880762 0.2039455,-0.00966 0.354221,-0.00966 0.1803307,0 0.3713953,0.00966 0.031128,0.00107 0.047229,0.042936 l 0.538846,1.0991583 0.5388453,-1.0991584 q 0.030055,-0.039716 0.052596,-0.041862 0.1341746,-0.010734 0.3016245,-0.010734 0.1803307,0 0.3971569,0.00966 0.018248,0.00107 0.030055,0.013954 0.012881,0.011807 0.012881,0.028982 0.017174,0.8071944 0.017174,1.2451403 0,0.6011023 -0.017174,1.2880763 -0.1846243,0.00966 -0.3327531,0.00966 -0.1341746,0 -0.3971568,-0.00966 -0.017174,0 -0.030055,-0.012881 -0.012881,-0.012881 -0.012881,-0.030055 -0.00322,-0.1202204 -0.00966,-0.3595879 -0.00644,-0.2404409 -0.010734,-0.4357992 -0.00429,-0.1964316 -0.00537,-0.3756889 l -0.489469,0.9993325 -0.047229,0.00859 -0.042936,-0.00859 -0.4658543,-0.9510296 0.015028,1.165709 q -0.2039454,0.00966 -0.354221,0.00966 -0.1556425,0 -0.4186248,-0.00966 -0.017174,0 -0.030055,-0.012881 -0.012879,-0.01288 -0.012879,-0.030055 Q 3.8461223,9.038533 3.8461223,8.600587 Z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:digitalt;-inkscape-font-specification:digitalt;fill:#f0f0f0;fill-opacity:1;stroke-width:0.10991583"
+         id="path5086"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 6.7528808,8.616688 q 0,-0.6172032 0.017174,-1.3041772 0.2039454,-0.00966 0.3756889,-0.00966 0.1771105,0 0.4400927,0.00966 0.017174,0 0.030055,0.012881 0.012881,0.012881 0.012881,0.030055 0.017174,0.8071944 0.017174,1.3911223 0,0.140615 0.00966,0.2286335 0.00966,0.088019 0.033275,0.1341747 0.023615,0.045083 0.052596,0.06011 0.028982,0.015028 0.076211,0.015028 0.06333,0 0.095532,-0.028982 0.032202,-0.028982 0.049376,-0.124514 0.018248,-0.096606 0.018248,-0.2855236 0,-0.7460108 0.017174,-1.4329848 0.2050188,-0.00966 0.3756889,-0.00966 0.1771105,0 0.4400927,0.00966 0.017174,0 0.030055,0.012881 0.012881,0.012881 0.012881,0.030055 0.017174,0.8071944 0.017174,1.2612413 0,0.275863 -0.041862,0.4905424 -0.041863,0.2146793 -0.1202205,0.3660283 -0.078358,0.1502756 -0.197505,0.2501015 -0.1180737,0.099826 -0.265129,0.1492021 -0.1470554,0.049376 -0.3327531,0.059037 -0.1513489,0 -0.2726428,-0.012881 Q 7.5225064,9.906911 7.4087263,9.8779293 7.2949462,9.8489476 7.2080011,9.8006447 7.1210559,9.7512685 7.0448448,9.6793509 6.969707,9.6063599 6.9171105,9.5076074 6.8645141,9.4077815 6.8258718,9.2779005 6.7883029,9.1480194 6.7700552,8.9837897 6.7528808,8.8184866 6.7528808,8.616688 Z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:digitalt;-inkscape-font-specification:digitalt;fill:#f0f0f0;fill-opacity:1;stroke-width:0.10991583"
+         id="path5088"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 9.1014735,8.600587 q 0,-0.6011022 0.017174,-1.2880762 0.2039454,-0.00966 0.3756889,-0.00966 0.1771105,0 0.4400928,0.00966 0.017174,0 0.030055,0.012881 0.012881,0.012881 0.012881,0.030055 0.017174,0.8071944 0.017174,1.2451403 0,0.2855236 -0.00322,0.557093 h 0.018248 q 0.39179,0 0.654772,0.00966 0.01717,0 0.03006,0.012881 0.01288,0.012881 0.01288,0.030055 0.0043,0.2619088 0.0043,0.3713953 0,0.1685233 -0.0043,0.3155787 -0.203945,0.00966 -0.633304,0.00966 -0.1062648,0 -0.452972,-0.00751 -0.3456338,-0.00644 -0.4594139,-0.010734 -0.017174,0 -0.030055,-0.012881 Q 9.1186478,9.8629018 9.1186478,9.8457274 9.1014735,9.038533 9.1014735,8.600587 Z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:digitalt;-inkscape-font-specification:digitalt;fill:#f0f0f0;fill-opacity:1;stroke-width:0.10991583"
+         id="path5090"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 10.706202,9.8532412 q 0,-0.017174 0.02039,-0.1341746 0.05689,-0.3531476 0.129881,-0.7309833 0.07299,-0.3789091 0.188918,-0.9392223 0.115927,-0.5613865 0.151349,-0.7363502 0.214679,-0.00966 0.590368,-0.00966 0.349928,0 0.611837,0.00966 0.01717,0 0.0322,0.012881 0.01503,0.011807 0.01825,0.030055 0.04723,0.2393675 0.159936,0.7825063 0.11378,0.5431388 0.193212,0.9606902 0.08051,0.416478 0.137395,0.7900201 -0.202872,0.00966 -0.373543,0.00966 -0.273716,0 -0.420771,-0.00966 -0.01825,-0.00107 -0.03327,-0.012881 -0.01395,-0.012881 -0.01717,-0.030055 -0.0483,-0.2468813 -0.07836,-0.4293587 h -0.39823 q -0.03435,0.2297069 -0.08265,0.4722946 -0.206092,0.00966 -0.355294,0.00966 -0.178184,0 -0.439019,-0.00966 -0.0161,0 -0.02576,-0.00966 -0.0097,-0.010734 -0.0097,-0.025761 z m 0.984305,-0.9950389 h 0.241514 Q 11.906259,8.6821652 11.86225,8.3569259 11.818241,8.0306133 11.79892,7.8953653 11.777452,8.070329 11.74203,8.397715 11.70661,8.7240277 11.69051,8.8582023 Z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:digitalt;-inkscape-font-specification:digitalt;fill:#f0f0f0;fill-opacity:1;stroke-width:0.10991583"
+         id="path5092"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 12.866949,7.6388234 q 0,-0.1728169 0.0043,-0.3263126 0.205019,-0.00966 0.993966,-0.00966 0.623643,0 0.886625,0.00966 0.01717,0 0.03006,0.012881 0.01288,0.012881 0.01288,0.030055 0.0043,0.2425876 0.0043,0.3649549 0,0.1749637 -0.0043,0.3220191 -0.06977,0.00322 -0.519524,0.00751 0.0043,0.2318538 0.0043,0.5506526 0,0.6011023 -0.01717,1.2880763 -0.203945,0.00966 -0.375688,0.00966 -0.177111,0 -0.440093,-0.00966 -0.01717,0 -0.03005,-0.012881 -0.01288,-0.012881 -0.01288,-0.030055 -0.01717,-0.8071944 -0.01717,-1.2451404 0,-0.1985784 0.0043,-0.5549462 -0.246881,-0.00537 -0.476588,-0.011807 -0.01717,0 -0.03006,-0.012881 -0.01288,-0.012881 -0.01288,-0.030055 -0.0043,-0.2468813 -0.0043,-0.3520742 z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:digitalt;-inkscape-font-specification:digitalt;fill:#f0f0f0;fill-opacity:1;stroke-width:0.10991583"
+         id="path5094"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 14.837707,8.5995136 q 0,-0.3123585 0.06762,-0.5560195 0.06762,-0.2447345 0.194284,-0.4078909 0.127735,-0.1631563 0.308065,-0.2522482 0.181404,-0.089092 0.408965,-0.1008993 0.209312,0 0.373542,0.028982 0.164229,0.027908 0.300551,0.092312 0.137395,0.06333 0.234,0.1653031 0.09661,0.1019727 0.163157,0.2479547 0.06762,0.145982 0.09875,0.3402668 0.0322,0.1942849 0.0322,0.4422395 0,0.3123585 -0.0687,0.557093 -0.0687,0.2436611 -0.198579,0.4068174 -0.128807,0.162083 -0.310211,0.2511749 -0.181404,0.088019 -0.410038,0.099826 -0.208239,0 -0.372469,-0.027908 Q 15.495699,9.8575348 15.359378,9.7942044 15.22413,9.730874 15.127524,9.6299746 15.031991,9.5280019 14.965441,9.38202 14.899964,9.236038 14.868835,9.0428265 14.837707,8.8485417 14.837707,8.5995136 Z m 0.897359,0 q 0,0.1502756 0.0097,0.2554685 0.01073,0.1051929 0.02576,0.1663765 0.0161,0.06011 0.04293,0.093386 0.02684,0.033275 0.05367,0.042936 0.02684,0.00966 0.06548,0.00966 0.03864,0 0.0644,-0.00966 0.02576,-0.00966 0.05152,-0.042936 0.02576,-0.033275 0.03972,-0.093386 0.01503,-0.061184 0.02361,-0.1663765 0.0097,-0.1051929 0.0097,-0.2554685 0,-0.124514 -0.0064,-0.2178995 -0.0064,-0.094459 -0.0204,-0.1556426 -0.01395,-0.061184 -0.03005,-0.099826 -0.0161,-0.039716 -0.04186,-0.059037 -0.02469,-0.019321 -0.0483,-0.025761 -0.02254,-0.00751 -0.05474,-0.00751 -0.0322,0 -0.05474,0.00644 -0.02147,0.00644 -0.04401,0.026835 -0.02254,0.019321 -0.03757,0.059037 -0.01395,0.038642 -0.02576,0.1008993 -0.01181,0.061184 -0.01717,0.1545692 -0.0054,0.092312 -0.0054,0.2178995 z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:digitalt;-inkscape-font-specification:digitalt;fill:#f0f0f0;fill-opacity:1;stroke-width:0.10991583"
+         id="path5096"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 17.250702,8.5447704 q 0,-0.2146794 0.0043,-0.5946619 0.0043,-0.3799825 0.0043,-0.5946618 0.214679,-0.033275 0.456193,-0.052596 0.242588,-0.020395 0.423992,-0.020395 0.156716,0 0.262982,0.00537 0.106266,0.00429 0.228634,0.021468 0.12344,0.016101 0.202872,0.047229 0.07943,0.031129 0.158862,0.085872 0.07943,0.054743 0.123441,0.1331012 0.04508,0.078358 0.07299,0.1921381 0.02791,0.11378 0.02791,0.2608354 0,0.2329271 -0.12022,0.4100376 -0.12022,0.1771105 -0.3349,0.2780098 0.145982,0.05045 0.237221,0.2060922 0.213606,0.4196982 0.34134,0.9660572 -0.197505,0.023615 -0.449753,0.023615 -0.182478,0 -0.344561,-0.010734 -0.02039,-0.00107 -0.03972,-0.012881 -0.01932,-0.011807 -0.02576,-0.030055 -0.209312,-0.635451 -0.325239,-1.0261674 h -0.05689 q 0.0021,0.1202204 0.0097,0.4926891 0.0086,0.3724687 0.0097,0.5635334 -0.176037,0.00751 -0.376762,0.00751 -0.181404,0 -0.43902,-0.00751 -0.01825,0 -0.03113,-0.011807 -0.01181,-0.012881 -0.01181,-0.031129 0,-0.1985784 -0.0043,-0.6408179 -0.0043,-0.4422395 -0.0043,-0.6601391 z m 0.845837,-0.2404409 h 0.07299 q 0.101973,0 0.16423,-0.05045 0.06333,-0.051523 0.06333,-0.135248 0,-0.1051929 -0.04294,-0.1556425 -0.04294,-0.051523 -0.152422,-0.051523 -0.05582,0 -0.103046,0.00322 -0.0021,0.2511749 -0.0021,0.3896431 z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:digitalt;-inkscape-font-specification:digitalt;fill:#f0f0f0;fill-opacity:1;stroke-width:0.10991583"
+         id="path5098"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

resources/graphics/badge_broken.svg

@@ -0,0 +1,141 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="80"
+   height="92"
+   viewBox="0 0 21.166666 24.341667"
+   version="1.1"
+   id="svg4842"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="badge_broken.svg">
+  <defs
+     id="defs4836" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.584182"
+     inkscape:cx="-13.360205"
+     inkscape:cy="53.651595"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     units="px" />
+  <metadata
+     id="metadata4839">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-1.9829021e-4,-271.40882)">
+    <rect
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.51566374;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       id="rect5286"
+       width="21.166666"
+       height="24.341667"
+       x="0.0001986081"
+       y="271.40881" />
+    <g
+       id="g16"
+       transform="matrix(0.10079384,0,0,0.08235571,-2.2531965e-4,271.45843)"
+       style="fill:#d7d7d7;fill-opacity:1">
+      <rect
+         x="3.0257001"
+         y="2.9029"
+         width="204.36"
+         height="288.81"
+         id="rect14"
+         style="fill:#d7d7d7;fill-opacity:1;stroke-width:0.26458001" />
+    </g>
+    <g
+       id="g20"
+       transform="matrix(0.10079384,0,0,0.0816046,-2.2531965e-4,271.54688)"
+       style="fill:#000000;fill-opacity:1">
+      <rect
+         x="7.7007999"
+         y="7.7174001"
+         width="194.89999"
+         height="279.22"
+         id="rect18"
+         style="stroke-width:0.26458001;fill:#000000;fill-opacity:1" />
+    </g>
+    <rect
+       style="fill:#e6e6e6;fill-opacity:1;stroke-width:0.02649944"
+       id="rect22"
+       height="17.205626"
+       width="17.540144"
+       y="276.70892"
+       x="1.8134596" />
+    <g
+       id="g68"
+       aria-label="BROKEN"
+       transform="matrix(0.1103491,0,0,0.0919063,-2.2531608e-4,271.40862)"
+       style="fill:#f0f0f0;fill-opacity:1;stroke-width:0.35387999">
+      <path
+         id="path56"
+         d="m 27.531,29.488 c 0,-1.609 0,-2.9585 0.0519,-4.256 0.10381,-0.0519 0.41522,-0.0519 0.62283,-0.0519 1.3495,0 2.6989,0.67474 2.6989,2.0761 0,1.4533 -1.4014,2.2318 -3.0104,2.2318 z m 0.0519,7.6816 h 1.2976 c 1.4014,0 2.3875,0.88235 2.3875,2.0761 0,1.3495 -0.77854,2.128 -2.7508,2.128 h -0.83044 c -0.0519,-1.4014 -0.10381,-2.8028 -0.10381,-4.2041 z m -10.225,-4.2041 c 0,5.1903 0.10381,10.432 0.10381,15.311 0,0.31142 0.20761,0.57093 0.51903,0.62283 3.5813,0.41522 7.5259,0.57093 11.055,0.57093 7.0069,0 12.612,-1.4014 12.612,-9.6539 0,-2.4913 -1.7128,-4.7751 -4.5674,-6.384 1.8685,-1.609 3.0104,-3.9446 3.0104,-6.6955 0,-8.4083 -5.2941,-9.0311 -12.509,-9.0311 -2.9066,0 -6.6955,0.36332 -10.121,0.88235 0,5.1903 -0.10381,9.1868 -0.10381,14.377 z"
+         inkscape:connector-curvature="0"
+         style="fill:#f0f0f0;fill-opacity:1" />
+      <path
+         id="path58"
+         d="m 44.14,32.965 c 0,5.1903 0.10381,10.848 0.10381,15.727 0,0.31142 0.20761,0.51903 0.51903,0.51903 1.7647,0.1038 3.5294,0.1038 5.2941,0.1038 1.5052,0 3.0104,0 4.5674,-0.1038 -0.0519,-4.0484 -0.20761,-8.5121 -0.25951,-12.768 h 0.67474 c 1.0381,3.5813 2.4913,7.993 3.9446,12.405 0.10381,0.31142 0.51903,0.51903 0.77854,0.51903 1.4014,0.10381 2.8028,0.15571 4.2041,0.15571 1.8166,0 3.6851,-0.1038 5.3979,-0.31142 -0.88235,-3.8927 -2.0761,-7.6297 -4.1003,-11.678 -0.72664,-1.1938 -1.7128,-2.0242 -2.9066,-2.4394 3.4256,-1.609 5.5536,-4.5155 5.5536,-8.3564 0,-8.4083 -5.2941,-9.0311 -13.028,-9.0311 -2.9066,0 -7.2145,0.36332 -10.64,0.88235 0,5.1903 -0.10381,9.1868 -0.10381,14.377 z m 10.225,-2.9066 v -4.6713 c 0.36332,-0.0519 0.83044,-0.0519 1.2457,-0.0519 1.8685,0 2.3875,0.88235 2.3875,2.4913 0,1.3495 -1.1419,2.2318 -2.7508,2.2318 z"
+         inkscape:connector-curvature="0"
+         style="fill:#f0f0f0;fill-opacity:1" />
+      <path
+         id="path60"
+         d="m 70.299,33.64 c 0,12.041 4.5155,15.882 14.429,15.882 7.3183,-0.36332 11.938,-5.6574 11.938,-15.882 0,-11.99 -4.6713,-15.934 -14.533,-15.934 -7.3183,0.36332 -11.834,5.7612 -11.834,15.934 z m 10.796,0 c 0,-6.1764 0.88235,-6.8512 2.2837,-6.8512 1.4014,0 2.4394,0.67474 2.4394,6.8512 0,6.1764 -0.88235,6.8512 -2.2837,6.8512 -1.40135,0 -2.4394,-0.67474 -2.4394,-6.8512 z"
+         inkscape:connector-curvature="0"
+         style="fill:#f0f0f0;fill-opacity:1" />
+      <path
+         id="path62"
+         d="m 99.365,33.64 c 0,5.1903 0.1038,10.173 0.20761,15.052 0,0.31142 0.20761,0.51903 0.51903,0.51903 1.7128,0.1038 3.5294,0.15571 5.2941,0.15571 1.7128,0 2.9066,-0.0519 4.5674,-0.15571 v -2.1799 c 0,-3.5294 -0.15571,-7.0069 -0.25951,-10.484 h 0.98615 c 1.0381,3.6332 2.3875,8.5121 3.6332,12.301 0.1038,0.31142 0.51903,0.51903 0.77854,0.51903 1.4014,0.10381 2.8028,0.15571 4.2041,0.15571 1.8166,0 3.6851,-0.1038 5.3979,-0.31142 -0.88235,-3.8927 -2.2837,-9.1868 -4.3079,-13.235 -0.93425,-1.609 -2.3875,-2.5951 -4.2041,-2.7508 v -0.0519 c 1.8166,-0.10381 3.1142,-1.1419 4.0484,-2.7508 2.0242,-3.9965 3.4775,-8.3564 4.3598,-12.301 -1.7128,-0.20761 -3.3218,-0.31142 -5.1384,-0.31142 -1.4014,0 -2.8028,0.0519 -4.2041,0.15571 -0.25952,0 -0.67474,0.20761 -0.77854,0.51903 -1.1419,3.4775 -2.4913,7.2664 -3.5813,10.536 h -1.1419 c 0.10381,-2.9066 0.20761,-5.7612 0.20761,-8.564 v -1.8685 c 0,-0.25951 -0.25951,-0.51903 -0.51902,-0.51903 -1.7647,-0.0519 -3.5813,-0.10381 -5.346,-0.10381 -1.7128,0 -2.9066,0.0519 -4.5155,0.10381 -0.15571,5.1903 -0.20761,10.381 -0.20761,15.571 z"
+         inkscape:connector-curvature="0"
+         style="fill:#f0f0f0;fill-opacity:1" />
+      <path
+         id="path64"
+         d="m 127.03,33.64 c 0,5.1903 0.10381,10.173 0.20761,15.052 0,0.31142 0.20761,0.51903 0.51903,0.51903 1.7128,0.1038 9.2387,0.25951 11.003,0.25951 1.7128,0 7.2664,-0.0519 8.9273,-0.15571 v -3.7889 -4.5155 c -0.0519,-0.25951 -0.25952,-0.51903 -0.51903,-0.51903 -1.7647,-0.0519 -7.4221,-0.10381 -9.1868,-0.10381 h -0.67473 v -2.6989 h 6.7474 v -3.4256 -3.9446 c -0.0519,-0.25951 -0.25951,-0.51903 -0.51903,-0.51903 -1.3495,0 -4.1522,-0.0519 -6.2283,-0.0519 v -2.7508 h 2.0242 c 1.7128,0 6.5917,0 8.2526,-0.10381 v -3.7889 -4.5155 c -0.0519,-0.25951 -0.25951,-0.51903 -0.51903,-0.51903 -1.7647,-0.0519 -7.3183,-0.10381 -9.083,-0.10381 -1.7128,0 -9.1349,0.0519 -10.744,0.10381 -0.15571,5.1903 -0.20761,10.381 -0.20761,15.571 z"
+         inkscape:connector-curvature="0"
+         style="fill:#f0f0f0;fill-opacity:1" />
+      <path
+         id="path66"
+         d="m 150.59,33.64 c 0,5.1903 0.1038,10.173 0.20761,15.052 0,0.31142 0.20761,0.51903 0.51903,0.51903 1.6609,0.1038 3.2699,0.15571 5.0346,0.15571 1.7128,0 2.647,-0.0519 4.3079,-0.15571 l -0.20761,-13.754 5.3979,13.235 c 0.10381,0.31142 0.25952,0.51903 0.57093,0.51903 1.6609,0.1038 3.1661,0.15571 4.7232,0.15571 1.7128,0 2.5951,-0.0519 4.0484,-0.15571 0.1038,-5.1903 0.20761,-10.381 0.20761,-15.571 0,-5.19 -0.10381,-10.173 -0.20761,-15.052 0,-0.25951 -0.25952,-0.46712 -0.51903,-0.51903 -1.5571,-0.0519 -3.0623,-0.10381 -4.827,-0.10381 -1.7128,0 -2.9066,0.0519 -4.5156,0.10381 l 0.15571,13.806 -5.346,-13.287 c -0.15571,-0.25951 -0.31141,-0.46712 -0.57093,-0.51903 -1.6609,-0.0519 -3.0104,-0.10381 -4.5155,-0.10381 -1.7128,0 -2.647,0.0519 -4.256,0.10381 C 150.6419,23.2593 150.59,28.45 150.59,33.64 Z"
+         inkscape:connector-curvature="0"
+         style="fill:#f0f0f0;fill-opacity:1" />
+    </g>
+    <path
+       style="fill:#f80000;fill-opacity:1;stroke:#282828;stroke-width:0.222;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       d="m 7.6384917,280.08465 c -1.874665,0 -3.397725,1.53959 -3.397725,3.39245 0,0.64602 0.295505,1.19991 0.567407,1.60492 0.271901,0.40498 0.54932,0.67684 0.54932,0.67684 l 5.2260383,5.21817 5.226037,-5.21817 c 0,0 1.116728,-0.98945 1.116728,-2.28176 0,-1.85276 -1.523577,-3.39194 -3.398242,-3.39194 -0.711151,0 -1.346631,0.23624 -1.861385,0.51898 l -0.149862,0.0826 -0.931726,2.56446 h 1.640727 l -1.642277,2.81105 v -1.90671 H 8.9763951 l 0.700216,-3.45539 -0.304375,-0.15683 c -0.487832,-0.25072 -1.0758624,-0.45816 -1.7337444,-0.45816 z"
+       id="path84"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

resources/graphics/badge_completed.svg

@@ -0,0 +1,150 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="80"
+   height="92"
+   version="1.1"
+   viewBox="0 0 21.166666 24.341667"
+   id="svg92"
+   sodipodi:docname="badge_completed.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <defs
+     id="defs96" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     id="namedview94"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="3.0165741"
+     inkscape:cx="-308.2567"
+     inkscape:cy="78.979511"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg92"
+     units="px" />
+  <metadata
+     id="metadata2">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.51566374;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+     id="rect5286"
+     width="21.166666"
+     height="24.341667"
+     x="2.2368853e-07"
+     y="-2.6645353e-15" />
+  <g
+     id="g16"
+     transform="matrix(0.10079384,0,0,0.08235571,-4.2317622e-4,0.04964061)"
+     style="fill:#d7d7d7;fill-opacity:1">
+    <rect
+       x="3.0257001"
+       y="2.9029"
+       width="204.36"
+       height="288.81"
+       id="rect14"
+       style="fill:#d7d7d7;fill-opacity:1;stroke-width:0.26458001" />
+  </g>
+  <g
+     id="g20"
+     transform="matrix(0.10079384,0,0,0.0816046,-4.2317622e-4,0.13809161)"
+     style="fill:#0e0e0e;fill-opacity:1">
+    <rect
+       x="7.7007999"
+       y="7.7174001"
+       width="194.89999"
+       height="279.22"
+       id="rect18"
+       style="stroke-width:0.26458001;fill:#0e0e0e;fill-opacity:1" />
+  </g>
+  <rect
+     style="fill:#e6e6e6;fill-opacity:1;stroke-width:0.02649944"
+     id="rect22"
+     height="17.205626"
+     width="17.540144"
+     y="5.3001137"
+     x="1.8323119" />
+  <g
+     style="fill:#f0f0f0;fill-opacity:1;stroke-width:0.29527"
+     id="g74"
+     aria-label="COMPLETED"
+     transform="matrix(0.09207517,0,0,0.11015111,-4.2465753e-4,-1.9389228e-4)">
+    <path
+       inkscape:connector-curvature="0"
+       id="path56"
+       d="m 19.811,28.068 c 0,10.827 4.5471,13.078 11.823,13.078 1.7756,0 3.2047,-0.12992 4.9802,-0.47637 l -0.90943,-6.8424 -3.9842,0.30314 c -1.7756,0.08661 -2.9015,-0.90943 -2.9015,-6.0629 0,-5.1534 1.2992,-6.1062 2.9015,-6.0195 l 3.9842,0.25984 0.95273,-6.7991 c -1.7756,-0.38976 -3.1613,-0.7362 -4.9369,-0.7362 -7.3187,0 -11.909,3.118 -11.909,13.295 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path58"
+       d="m 37.783,28.068 c 0,10.047 3.7676,13.252 12.039,13.252 6.1062,-0.30314 9.9604,-4.7204 9.9604,-13.252 0,-10.004 -3.8975,-13.295 -12.126,-13.295 -6.1062,0.30314 -9.8738,4.807 -9.8738,13.295 z m 9.0077,0 c 0,-5.1534 0.7362,-5.7164 1.9055,-5.7164 1.1693,0 2.0354,0.56298 2.0354,5.7164 0,5.1534 -0.7362,5.7164 -1.9055,5.7164 -1.1693,0 -2.0354,-0.56298 -2.0354,-5.7164 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path60"
+       d="m 62.034,28.068 c 0,4.3306 0.08661,8.488 0.17322,12.559 0,0.25984 0.17322,0.43306 0.43306,0.43306 1.4291,0.08661 3.1613,0.12992 4.2007,0.12992 1.4291,0 2.2086,-0.04331 3.5944,-0.12992 l -0.17322,-11.736 4.7204,9.5706 0.43306,0.08661 0.47637,-0.08661 4.9369,-10.047 c 0,4.0708 0.17322,7.9683 0.25984,11.779 0,0.25984 0.17322,0.43306 0.43306,0.43306 1.4291,0.08661 2.9448,0.12992 3.9842,0.12992 1.4291,0 2.122,-0.04331 3.3779,-0.12992 0.08661,-4.3306 0.17322,-8.6612 0.17322,-12.992 0,-4.3306 -0.08661,-8.488 -0.17322,-12.559 0,-0.21653 -0.21653,-0.38976 -0.43306,-0.43306 -1.2126,-0.04331 -2.5551,-0.08661 -4.0275,-0.08661 -1.2126,0 -2.2519,0.04331 -3.0314,0.12992 -0.21653,0 -0.38976,0.21653 -0.51967,0.38976 l -5.4566,11.13 -5.4133,-11.13 c -0.08661,-0.17322 -0.25984,-0.38976 -0.47637,-0.43306 -1.2992,-0.04331 -2.2952,-0.08661 -3.7676,-0.08661 -1.4291,0 -2.2086,0.04331 -3.5511,0.08661 -0.12992,4.3306 -0.17322,8.6612 -0.17322,12.992 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path62"
+       d="m 92.262,28.068 c 0,4.3306 0.08661,8.488 0.08661,12.559 0,0.25984 0.17322,0.43306 0.43306,0.43306 1.4724,0.08661 2.9448,0.08661 4.4172,0.08661 1.2559,0 2.5118,0 3.8109,-0.08661 -0.0433,-1.9921 -0.0866,-3.9842 -0.0866,-5.9762 7.2321,0 11.606,-1.8189 11.606,-10.047 0,-9.3108 -4.4172,-10.264 -11.736,-10.264 -2.4251,0 -5.5865,0.30314 -8.4447,0.7362 0,4.244 -0.08661,8.2282 -0.08661,12.559 z m 8.5746,-0.04331 v -5.8463 h 0.95274 c 1.7322,0 1.9488,0.30314 1.9488,2.9881 0,2.5551 -1.0826,2.8582 -2.2519,2.8582 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path64"
+       d="m 114.52,28.068 c 0,4.3306 0.0866,8.488 0.17323,12.559 0,0.25984 0.17322,0.43306 0.43306,0.43306 1.4291,0.08661 7.7085,0.21653 9.1809,0.21653 1.4291,0 5.0235,-0.04331 6.4093,-0.12992 v -3.1613 -3.7676 c -0.0433,-0.21653 -0.21653,-0.43306 -0.43306,-0.43306 -1.4724,-0.04331 -5.1534,-0.08661 -6.6258,-0.08661 h -0.17322 c 0,-1.8189 0.0433,-3.681 0.0433,-5.6298 0,-4.3306 -0.0866,-8.488 -0.17322,-12.559 0,-0.21653 -0.21653,-0.43306 -0.43306,-0.43306 -1.4724,-0.04331 -2.9881,-0.08661 -4.4605,-0.08661 -1.4291,0 -2.4251,0.04331 -3.7676,0.08661 -0.12992,4.3306 -0.17323,8.6612 -0.17323,12.992 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path66"
+       d="m 132.28,28.068 c 0,4.3306 0.0866,8.488 0.17322,12.559 0,0.25984 0.17323,0.43306 0.43306,0.43306 1.4291,0.08661 7.7085,0.21653 9.1809,0.21653 1.4291,0 6.0629,-0.04331 7.4486,-0.12992 v -3.1613 -3.7676 c -0.0433,-0.21653 -0.21653,-0.43306 -0.43306,-0.43306 -1.4724,-0.04331 -6.1928,-0.08661 -7.6652,-0.08661 h -0.56298 v -2.2519 h 5.6298 V 28.588 25.2967 c -0.0433,-0.21653 -0.21653,-0.43306 -0.43306,-0.43306 -1.126,0 -3.4645,-0.04331 -5.1967,-0.04331 v -2.2952 h 1.6889 c 1.4291,0 5.4999,0 6.8857,-0.08661 v -3.1613 -3.7676 c -0.0433,-0.21653 -0.21653,-0.43306 -0.43306,-0.43306 -1.4724,-0.04331 -6.1062,-0.08661 -7.5786,-0.08661 -1.4291,0 -7.6219,0.04331 -8.9644,0.08661 -0.12992,4.3306 -0.17322,8.6612 -0.17322,12.992 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path68"
+       d="m 150.59,18.368 c 0,1.1693 0,2.3385 0.0433,3.5511 0,0.25984 0.17322,0.43306 0.43306,0.43306 0.7362,0.04331 2.8149,0.08661 4.7637,0.12992 v 5.5865 c 0,4.3306 0.0866,8.488 0.17322,12.559 0,0.25984 0.17323,0.43306 0.43306,0.43306 1.4291,0.08661 2.9448,0.12992 4.4172,0.12992 1.4291,0 2.4251,-0.04331 3.8109,-0.12992 0.0866,-4.3306 0.17323,-8.6612 0.17323,-12.992 0,-1.9921 -0.0433,-3.7676 -0.0866,-5.5432 2.2519,0 4.5471,-0.04331 5.2833,-0.08661 v -3.2047 -3.7243 c -0.0433,-0.21653 -0.21653,-0.43306 -0.43306,-0.43306 -1.4724,-0.04331 -7.492,-0.08661 -8.9644,-0.08661 -1.4291,0 -8.6612,0.04331 -10.004,0.08661 -0.0433,1.1693 -0.0433,2.2519 -0.0433,3.2913 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path70"
+       d="m 171.86,28.068 c 0,4.3306 0.0866,8.488 0.17323,12.559 0,0.25984 0.17322,0.43306 0.43306,0.43306 1.4291,0.08661 7.7085,0.21653 9.1809,0.21653 1.4291,0 6.0628,-0.04331 7.4486,-0.12992 v -3.1613 -3.7676 c -0.0433,-0.21653 -0.21653,-0.43306 -0.43306,-0.43306 -1.4724,-0.04331 -6.1928,-0.08661 -7.6652,-0.08661 h -0.56298 v -2.2519 h 5.6298 V 28.588 25.2967 c -0.0433,-0.21653 -0.21653,-0.43306 -0.43306,-0.43306 -1.126,0 -3.4645,-0.04331 -5.1967,-0.04331 v -2.2952 h 1.6889 c 1.4291,0 5.4999,0 6.8857,-0.08661 v -3.1613 -3.7676 c -0.0433,-0.21653 -0.21653,-0.43306 -0.43306,-0.43306 -1.4724,-0.04331 -6.1062,-0.08661 -7.5786,-0.08661 -1.4291,0 -7.6219,0.04331 -8.9644,0.08661 -0.12992,4.3306 -0.17323,8.6612 -0.17323,12.992 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path72"
+       d="m 200.18,28.068 c 0,-2.0787 0,-3.8975 0.0433,-5.7164 h 0.7362 c 1.1693,0 2.0354,0.56298 2.0354,5.7164 0,5.1534 -0.86613,5.7597 -2.0354,5.7597 h -0.7362 C 200.18,32.0088 200.18,30.19 200.18,28.068 Z m -8.5746,0 c 0,4.3306 0.0866,8.0549 0.0866,12.126 0,0.25984 0.17323,0.43306 0.43307,0.43306 2.9881,0.30314 5.7164,0.51967 8.0982,0.51967 7.2754,0 11.823,-2.2519 11.823,-13.078 0,-10.177 -4.5904,-13.295 -11.909,-13.295 -2.4251,0 -5.5865,0.30314 -8.4447,0.7362 0,4.3306 -0.0866,8.2282 -0.0866,12.559 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+  </g>
+  <path
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#28e819;fill-opacity:1;fill-rule:nonzero;stroke:#282828;stroke-width:0.22206067;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     d="M 15.847808,8.6772533 15.6287,8.8944404 15.293837,9.2261541 8.4678971,16.042533 l -3.109371,-3.103559 -1.719275,1.715831 3.974951,3.968698 0.853695,0.815097 0.853178,-0.815097 8.2444579,-8.230934 z"
+     id="path90-9-4"
+     inkscape:connector-curvature="0" />
+</svg>

resources/graphics/badge_controller.svg

@@ -0,0 +1,147 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="80"
+   height="92"
+   version="1.1"
+   viewBox="0 0 21.166666 24.341666"
+   id="svg90"
+   sodipodi:docname="badge_controller.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <defs
+     id="defs94" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     id="namedview92"
+     showgrid="false"
+     units="px"
+     inkscape:zoom="10.971939"
+     inkscape:cx="-8.9420672"
+     inkscape:cy="61.90432"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg90"
+     inkscape:snap-global="false" />
+  <metadata
+     id="metadata2">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.51566374;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+     id="rect5286"
+     width="21.166666"
+     height="24.341665"
+     x="-6.884097e-12"
+     y="-2.6253017e-14" />
+  <g
+     id="g16"
+     transform="matrix(0.10079384,0,0,0.08235571,-4.2392733e-4,0.0496411)"
+     style="fill:#d7d7d7;fill-opacity:1">
+    <rect
+       x="3.0257001"
+       y="2.9029"
+       width="204.36"
+       height="288.81"
+       id="rect14"
+       style="fill:#d7d7d7;fill-opacity:1;stroke-width:0.26458001" />
+  </g>
+  <g
+     id="g20"
+     transform="matrix(0.10079384,0,0,0.0816046,-4.2392733e-4,0.13809204)"
+     style="fill:#000000;fill-opacity:1">
+    <rect
+       x="7.7007999"
+       y="7.7174001"
+       width="194.89999"
+       height="279.22"
+       id="rect18"
+       style="stroke-width:0.26458001;fill:#000000;fill-opacity:1" />
+  </g>
+  <rect
+     style="fill:#e6e6e6;fill-opacity:1;stroke-width:0.02649944"
+     id="rect22"
+     height="17.205626"
+     width="17.540144"
+     y="5.3001146"
+     x="1.8323106" />
+  <g
+     aria-label="CONTROLLER"
+     transform="matrix(0.92632099,0,0,1.1827072,0,-0.4326279)"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:4.0387764px;line-height:1.25;font-family:Digitalt;-inkscape-font-specification:Digitalt;letter-spacing:0px;word-spacing:0px;fill:#f0f0f0;fill-opacity:1;stroke:none;stroke-width:0.10096943"
+     id="text4846">
+    <path
+       d="m 1.9102824,2.9855499 q 0,-0.2741162 0.049301,-0.4811824 Q 2.0098713,2.2963153 2.0996,2.1592573 2.1893287,2.0212131 2.3254008,1.9354286 2.4624588,1.848658 2.6251537,1.8121749 q 0.1626948,-0.036483 0.369761,-0.036483 0.1104353,0 0.2080522,0.016763 0.098603,0.015777 0.2415772,0.050288 L 3.3597456,2.4609823 2.9959007,2.4363315 q -0.046343,-0.00296 -0.082826,0.00789 -0.036483,0.010846 -0.070994,0.046343 -0.034511,0.035497 -0.05719,0.096631 -0.022679,0.060148 -0.036483,0.1607228 -0.013804,0.100575 -0.013804,0.2376331 0,0.1380441 0.011832,0.2386191 0.012818,0.099589 0.033525,0.1617088 0.021693,0.061134 0.055218,0.095645 0.034511,0.034511 0.07198,0.046343 0.037469,0.010846 0.088743,0.0069 L 3.3597456,3.5111036 3.4406,4.1342741 q -0.235661,0.043385 -0.4535735,0.043385 -0.1153655,0 -0.2119963,-0.00789 Q 2.6783993,4.1608969 2.5837405,4.1411763 2.4900677,4.1204697 2.4131574,4.0879308 2.3362471,4.0553918 2.265253,4.0051043 2.1952449,3.9548168 2.1410133,3.8887528 2.0867816,3.8217028 2.0424103,3.7329602 1.998039,3.6442175 1.9694441,3.5337822 1.9408493,3.4233469 1.9250728,3.2862889 1.9102824,3.1482447 1.9102824,2.9855499 Z"
+       style="fill:#f0f0f0;fill-opacity:1;stroke-width:0.10096943"
+       id="path4848"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 3.5470911,2.9855499 q 0,-0.2869346 0.06212,-0.5107632 0.06212,-0.2248147 0.1784713,-0.3746912 0.1173375,-0.1498765 0.2829904,-0.2317169 0.166639,-0.08184 0.3756772,-0.092687 0.1922758,0 0.3431383,0.026623 0.1508625,0.025637 0.2760882,0.084799 0.1262118,0.058176 0.2149544,0.1518486 0.088743,0.093673 0.1498765,0.2277728 0.06212,0.1341 0.090715,0.3125713 0.029581,0.1784713 0.029581,0.4062441 0,0.2869345 -0.063106,0.5117492 Q 5.4244911,3.7211278 5.3051815,3.8710043 5.186858,4.0198947 5.020219,4.1017352 q -0.1666389,0.080854 -0.3766632,0.091701 -0.1912897,0 -0.3421522,-0.025637 Q 4.1515272,4.1411763 4.0263014,4.0830006 3.9020617,4.0248249 3.8133191,3.9321381 3.7255625,3.8384653 3.6644286,3.7043653 3.6042808,3.5702653 3.575686,3.39278 3.5470911,3.2143087 3.5470911,2.9855499 Z m 0.8243206,0 q 0,0.1380441 0.00887,0.234675 0.00986,0.096631 0.023665,0.1528345 0.01479,0.055218 0.039441,0.085785 0.024651,0.030567 0.049301,0.039441 0.024651,0.00887 0.060148,0.00887 0.035497,0 0.059162,-0.00887 0.023665,-0.00887 0.047329,-0.039441 0.023665,-0.030567 0.036483,-0.085785 0.013804,-0.056204 0.021693,-0.1528345 0.00887,-0.096631 0.00887,-0.234675 0,-0.1143794 -0.00592,-0.200164 -0.00592,-0.086771 -0.018735,-0.1429742 -0.012818,-0.056204 -0.027609,-0.091701 -0.01479,-0.036483 -0.038455,-0.054232 -0.022679,-0.017748 -0.044371,-0.023665 -0.020707,-0.0069 -0.050287,-0.0069 -0.029581,0 -0.050288,0.00592 -0.019721,0.00592 -0.040427,0.024651 -0.020707,0.017749 -0.034511,0.054232 -0.012818,0.035497 -0.023665,0.092687 -0.010846,0.056204 -0.015776,0.1419882 -0.00493,0.084799 -0.00493,0.200164 z"
+       style="fill:#f0f0f0;fill-opacity:1;stroke-width:0.10096943"
+       id="path4850"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 5.7557968,2.9865359 q 0,-0.5521764 0.015777,-1.1832353 0.1873456,-0.00887 0.3253897,-0.00887 0.1173375,0 0.3411662,0.00887 0.028595,9.861e-4 0.043385,0.039441 L 6.8897306,2.8524359 6.8759262,1.8033006 q 0.1883316,-0.00887 0.3451103,-0.00887 0.1538206,0 0.3648309,0.00887 0.016763,9.861e-4 0.027609,0.012818 0.011832,0.010846 0.011832,0.026623 0.015777,0.7414941 0.015777,1.1437941 0,0.5521765 -0.015777,1.1832353 -0.1636808,0.00887 -0.3056691,0.00887 -0.168611,0 -0.3608867,-0.00887 Q 6.9291716,4.168785 6.9153676,4.13033 L 6.5071512,3.1206359 6.5209556,4.1697712 q -0.1873456,0.00887 -0.3253897,0.00887 -0.1557926,0 -0.3845514,-0.00887 Q 5.794252,4.1687852 5.7824196,4.1579388 5.7715733,4.1461065 5.7715733,4.13033 5.7557968,3.3888359 5.7557968,2.9865359 Z"
+       style="fill:#f0f0f0;fill-opacity:1;stroke-width:0.10096943"
+       id="path4852"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 7.802794,2.1030536 q 0,-0.1587507 0.00394,-0.299753 0.1883316,-0.00887 0.9130632,-0.00887 0.5728831,0 0.8144603,0.00887 0.015776,0 0.027609,0.011832 0.011832,0.011832 0.011832,0.027609 0.00394,0.2228427 0.00394,0.33525 0,0.1607228 -0.00394,0.2958088 -0.064092,0.00296 -0.4772383,0.0069 0.00394,0.2129824 0.00394,0.5058331 0,0.5521765 -0.015776,1.1832353 -0.1873456,0.00887 -0.3451103,0.00887 -0.1626949,0 -0.4042721,-0.00887 -0.015776,0 -0.027609,-0.011832 -0.011832,-0.011832 -0.011832,-0.027609 -0.015776,-0.7414941 -0.015776,-1.1437941 0,-0.1824154 0.00394,-0.5097772 -0.2267868,-0.00493 -0.437797,-0.010846 -0.015777,0 -0.027609,-0.011832 -0.011832,-0.011832 -0.011832,-0.027609 -0.00394,-0.2267867 -0.00394,-0.3234176 z"
+       style="fill:#f0f0f0;fill-opacity:1;stroke-width:0.10096943"
+       id="path4854"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 9.7472437,2.9352624 q 0,-0.1972059 0.00394,-0.5462603 0.00394,-0.3490544 0.00394,-0.5462603 0.1972059,-0.030567 0.4190623,-0.048315 0.222843,-0.018735 0.389482,-0.018735 0.14396,0 0.241577,0.00493 0.09762,0.00394 0.210025,0.019721 0.113393,0.01479 0.186359,0.043385 0.07297,0.028595 0.145932,0.078882 0.07297,0.050288 0.113394,0.1222677 0.04141,0.07198 0.06705,0.1764992 0.02564,0.1045191 0.02564,0.2396052 0,0.2139683 -0.110436,0.3766632 -0.110435,0.1626948 -0.307641,0.2553816 0.1341,0.046343 0.217913,0.1893176 0.196219,0.3855375 0.313557,0.8874265 -0.181429,0.021693 -0.413146,0.021693 -0.167625,0 -0.316516,-0.00986 -0.01873,-9.86e-4 -0.03648,-0.011832 -0.01775,-0.010846 -0.02366,-0.027609 -0.192278,-0.5837298 -0.29877,-0.9426445 h -0.05226 q 0.002,0.1104353 0.0089,0.4525875 0.0079,0.3421522 0.0089,0.5176654 -0.161708,0.0069 -0.346096,0.0069 -0.166639,0 -0.4032859,-0.0069 -0.016762,0 -0.028595,-0.010846 -0.010846,-0.011832 -0.010846,-0.028595 0,-0.1824154 -0.00394,-0.5886595 -0.00394,-0.4062441 -0.00394,-0.6064081 z M 10.524235,2.7143918 h 0.06705 q 0.09367,0 0.150862,-0.046343 0.05818,-0.047329 0.05818,-0.1242397 0,-0.096631 -0.03944,-0.1429742 -0.03944,-0.047329 -0.140016,-0.047329 -0.05127,0 -0.09466,0.00296 -0.002,0.2307309 -0.002,0.3579287 z"
+       style="fill:#f0f0f0;fill-opacity:1;stroke-width:0.10096943"
+       id="path4856"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 11.735079,2.9855499 q 0,-0.2869346 0.06212,-0.5107632 0.06212,-0.2248147 0.178471,-0.3746912 0.117338,-0.1498765 0.282991,-0.2317169 0.166639,-0.08184 0.375677,-0.092687 0.192276,0 0.343138,0.026623 0.150863,0.025637 0.276088,0.084799 0.126212,0.058176 0.214955,0.1518486 0.08874,0.093673 0.149876,0.2277728 0.06212,0.1341 0.09072,0.3125713 0.02958,0.1784713 0.02958,0.4062441 0,0.2869345 -0.06311,0.5117492 -0.06311,0.2238287 -0.182416,0.3737052 -0.118323,0.1488904 -0.284962,0.2307309 -0.166639,0.080854 -0.376663,0.091701 -0.19129,0 -0.342152,-0.025637 -0.149877,-0.026623 -0.275103,-0.084798 -0.124239,-0.058176 -0.212982,-0.1508625 -0.08776,-0.093673 -0.14889,-0.2277728 -0.06015,-0.1341 -0.08874,-0.3115853 -0.02859,-0.1784713 -0.02859,-0.4072301 z m 0.824321,0 q 0,0.1380441 0.0089,0.234675 0.0099,0.096631 0.02366,0.1528345 0.01479,0.055218 0.03944,0.085785 0.02465,0.030567 0.0493,0.039441 0.02465,0.00887 0.06015,0.00887 0.0355,0 0.05916,-0.00887 0.02366,-0.00887 0.04733,-0.039441 0.02366,-0.030567 0.03648,-0.085785 0.0138,-0.056204 0.02169,-0.1528345 0.0089,-0.096631 0.0089,-0.234675 0,-0.1143794 -0.0059,-0.200164 -0.0059,-0.086771 -0.01874,-0.1429742 -0.01282,-0.056204 -0.02761,-0.091701 -0.01479,-0.036483 -0.03846,-0.054232 -0.02268,-0.017748 -0.04437,-0.023665 -0.02071,-0.0069 -0.05029,-0.0069 -0.02958,0 -0.05029,0.00592 -0.01972,0.00592 -0.04043,0.024651 -0.02071,0.017749 -0.03451,0.054232 -0.01282,0.035497 -0.02366,0.092687 -0.01085,0.056204 -0.01578,0.1419882 -0.0049,0.084799 -0.0049,0.200164 z"
+       style="fill:#f0f0f0;fill-opacity:1;stroke-width:0.10096943"
+       id="path4858"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 13.943785,2.9865359 q 0,-0.5521764 0.01578,-1.1832353 0.187345,-0.00887 0.34511,-0.00887 0.162695,0 0.404272,0.00887 0.01578,0 0.02761,0.011832 0.01183,0.011832 0.01183,0.027609 0.01578,0.7414941 0.01578,1.1437941 0,0.2622838 -0.003,0.5117493 h 0.01676 q 0.359901,0 0.601478,0.00887 0.01578,0 0.02761,0.011832 0.01183,0.011832 0.01183,0.027609 0.0039,0.2405912 0.0039,0.3411662 0,0.1548066 -0.0039,0.2898926 -0.187346,0.00887 -0.581757,0.00887 -0.09762,0 -0.416105,-0.0069 -0.317501,-0.00592 -0.42202,-0.00986 -0.01578,0 -0.02761,-0.011832 -0.01183,-0.011832 -0.01183,-0.027609 -0.01578,-0.7414941 -0.01578,-1.1437941 z"
+       style="fill:#f0f0f0;fill-opacity:1;stroke-width:0.10096943"
+       id="path4860"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 15.560873,2.9865359 q 0,-0.5521764 0.01578,-1.1832353 0.187345,-0.00887 0.34511,-0.00887 0.162695,0 0.404272,0.00887 0.01578,0 0.02761,0.011832 0.01183,0.011832 0.01183,0.027609 0.01578,0.7414941 0.01578,1.1437941 0,0.2622838 -0.003,0.5117493 h 0.01676 q 0.359901,0 0.601478,0.00887 0.01578,0 0.02761,0.011832 0.01183,0.011832 0.01183,0.027609 0.0039,0.2405912 0.0039,0.3411662 0,0.1548066 -0.0039,0.2898926 -0.187345,0.00887 -0.581757,0.00887 -0.09762,0 -0.416104,-0.0069 -0.317502,-0.00592 -0.422021,-0.00986 -0.01578,0 -0.02761,-0.011832 -0.01183,-0.011832 -0.01183,-0.027609 -0.01578,-0.7414941 -0.01578,-1.1437941 z"
+       style="fill:#f0f0f0;fill-opacity:1;stroke-width:0.10096943"
+       id="path4862"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 17.177962,2.9865359 q 0,-0.5521764 0.01578,-1.1832353 0.187346,-0.00887 0.818405,-0.00887 0.446671,0 0.688248,0.00887 0.01578,0 0.02761,0.011832 0.01183,0.011832 0.01183,0.027609 0.0039,0.2405912 0.0039,0.3411662 0,0.1548066 -0.0039,0.2898926 -0.166639,0.00789 -0.627114,0.00789 -0.08283,0 -0.149877,-9.861e-4 -0.002,0.1360721 -0.003,0.2070662 0.352999,0.00197 0.472308,0.0069 0.01578,0 0.02761,0.011832 0.01183,0.011832 0.01183,0.027609 0.003,0.1617088 0.003,0.2967948 0,0.1212817 -0.003,0.2632699 h -0.511749 q 9.86e-4,0.069022 0.003,0.2050941 h 0.04733 q 0.483154,0 0.698108,0.00789 0.01578,0 0.02761,0.011832 0.01183,0.011832 0.01183,0.027609 0.0039,0.2405912 0.0039,0.3411662 0,0.1548066 -0.0039,0.2898926 -0.187346,0.00887 -0.676417,0.00887 -0.09762,0 -0.416104,-0.0069 -0.317502,-0.00592 -0.422021,-0.00986 -0.01578,0 -0.02761,-0.011832 -0.01183,-0.011832 -0.01183,-0.027609 -0.01578,-0.7414941 -0.01578,-1.1437941 z"
+       style="fill:#f0f0f0;fill-opacity:1;stroke-width:0.10096943"
+       id="path4864"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 18.976478,2.9352624 q 0,-0.1972059 0.0039,-0.5462603 0.0039,-0.3490544 0.0039,-0.5462603 0.197206,-0.030567 0.419062,-0.048315 0.222843,-0.018735 0.389482,-0.018735 0.14396,0 0.241577,0.00493 0.09762,0.00394 0.210024,0.019721 0.113394,0.01479 0.18636,0.043385 0.07297,0.028595 0.145932,0.078882 0.07297,0.050288 0.113393,0.1222677 0.04141,0.07198 0.06705,0.1764992 0.02564,0.1045191 0.02564,0.2396052 0,0.2139683 -0.110435,0.3766632 -0.110435,0.1626948 -0.307641,0.2553816 0.1341,0.046343 0.217912,0.1893176 0.19622,0.3855375 0.313558,0.8874265 -0.18143,0.021693 -0.413147,0.021693 -0.167625,0 -0.316515,-0.00986 Q 20.1478,4.1806178 20.13005,4.1697718 20.1123,4.1589258 20.10638,4.1421628 19.914192,3.558433 19.807701,3.1995183 h -0.05226 q 0.002,0.1104353 0.0089,0.4525875 0.0079,0.3421522 0.0089,0.5176654 -0.161709,0.0069 -0.346096,0.0069 -0.166639,0 -0.403286,-0.0069 -0.01676,0 -0.02859,-0.010846 -0.01085,-0.011832 -0.01085,-0.028595 0,-0.1824154 -0.0039,-0.5886595 -0.0039,-0.4062441 -0.0039,-0.6064081 z M 19.75347,2.7143918 h 0.06705 q 0.09367,0 0.150862,-0.046343 0.05818,-0.047329 0.05818,-0.1242397 0,-0.096631 -0.03944,-0.1429742 -0.03944,-0.047329 -0.140017,-0.047329 -0.05127,0 -0.09466,0.00296 -0.002,0.2307309 -0.002,0.3579287 z"
+       style="fill:#f0f0f0;fill-opacity:1;stroke-width:0.10096943"
+       id="path4866"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

resources/graphics/badge_favorite.svg

@@ -0,0 +1,142 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="80"
+   height="92"
+   version="1.1"
+   viewBox="0 0 21.166666 24.341666"
+   id="svg90"
+   sodipodi:docname="badge_favorite.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <defs
+     id="defs94" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     id="namedview92"
+     showgrid="false"
+     units="px"
+     inkscape:zoom="12.442154"
+     inkscape:cx="-26.425635"
+     inkscape:cy="40.73358"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg90"
+     inkscape:snap-global="false" />
+  <metadata
+     id="metadata2">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.51566374;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+     id="rect5286"
+     width="21.166666"
+     height="24.341665"
+     x="-6.884097e-12"
+     y="-2.6253017e-14" />
+  <g
+     id="g16"
+     transform="matrix(0.10079384,0,0,0.08235571,-4.2392733e-4,0.0496411)"
+     style="fill:#d7d7d7;fill-opacity:1">
+    <rect
+       x="3.0257001"
+       y="2.9029"
+       width="204.36"
+       height="288.81"
+       id="rect14"
+       style="fill:#d7d7d7;fill-opacity:1;stroke-width:0.26458001" />
+  </g>
+  <g
+     id="g20"
+     transform="matrix(0.10079384,0,0,0.0816046,-4.2392733e-4,0.13809204)"
+     style="fill:#000000;fill-opacity:1">
+    <rect
+       x="7.7007999"
+       y="7.7174001"
+       width="194.89999"
+       height="279.22"
+       id="rect18"
+       style="stroke-width:0.26458001;fill:#000000;fill-opacity:1" />
+  </g>
+  <rect
+     style="fill:#e6e6e6;fill-opacity:1;stroke-width:0.02649944"
+     id="rect22"
+     height="17.205626"
+     width="17.540144"
+     y="5.3001146"
+     x="1.8323106" />
+  <path
+     style="fill:#ffe431;fill-opacity:1;stroke:#282828;stroke-width:0.22077018;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     inkscape:connector-curvature="0"
+     id="path24"
+     d="m 17.240062,12.456484 -4.709693,-0.491108 -1.927985,-4.2699571 -1.9279844,4.2699571 -4.7096929,0.491108 3.5178058,3.130612 -0.9820949,4.573603 4.1020064,-2.335917 4.102007,2.335917 -0.982095,-4.573603 z" />
+  <g
+     style="fill:#f0f0f0;fill-opacity:1;stroke-width:0.32426"
+     id="g74"
+     aria-label="FAVORITE"
+     transform="matrix(0.10111638,0,0,0.09920503,-4.2392733e-4,-1.9532637e-4)">
+    <path
+       inkscape:connector-curvature="0"
+       id="path58"
+       d="m 19.021,30.825 c 0,4.7559 0.09512,9.3215 0.19024,13.792 0,0.28535 0.19024,0.47559 0.47559,0.47559 1.5694,0.09512 3.234,0.14268 4.851,0.14268 1.5694,0 2.6633,-0.04756 4.1852,-0.14268 0,-2.6157 -0.04756,-5.279 -0.09512,-7.9423 1.7597,0 4.4705,-0.04756 5.8022,-0.14268 v -3.4718 -4.1376 c -0.04756,-0.23779 -0.2378,-0.47559 -0.47559,-0.47559 -1.1414,0 -3.5194,-0.04756 -5.3266,-0.04756 v -4.1376 c 0.71338,0.04756 1.2841,0.04756 1.617,0.04756 1.5694,0 5.4217,-0.04756 6.9436,-0.14268 v -3.4718 -4.1376 c -0.04756,-0.2378 -0.2378,-0.47559 -0.47559,-0.47559 -1.617,-0.04756 -6.04,-0.09512 -7.657,-0.09512 -1.5694,0 -8.3704,0.04756 -9.8447,0.09512 -0.14268,4.7559 -0.19024,9.5118 -0.19024,14.268 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path60"
+       d="m 37.235,44.712 c 0,0.23779 0.19024,0.38047 0.42803,0.38047 1.5694,0.09512 3.234,0.14268 4.851,0.14268 1.5694,0 2.4255,-0.04756 3.9474,-0.14268 0.33291,-1.7121 0.61827,-3.4718 0.90362,-5.2315 h 4.423 c 0.23779,1.617 0.52315,3.234 0.85606,4.7559 0.04756,0.28535 0.28535,0.47559 0.52315,0.47559 1.6646,0.14268 3.0438,0.14268 4.6608,0.14268 1.617,0 2.6633,-0.04756 4.1376,-0.14268 -1.3792,-9.2264 -3.6145,-18.928 -5.4217,-28.06 -0.04756,-0.2378 -0.28535,-0.47559 -0.52315,-0.47559 -2.2828,-0.04756 -4.5181,-0.09512 -6.8009,-0.09512 -2.2353,0 -4.423,0 -6.5631,0.09512 -1.7597,8.7984 -3.7572,17.977 -5.1839,26.681 -0.09512,0.47559 -0.23779,1.3792 -0.23779,1.4743 z M 48.174,33.678 c 0.38047,-3.5669 0.76094,-7.1338 1.189,-10.653 0.47559,3.5669 0.95118,7.1338 1.4743,10.653 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path62"
+       d="m 61.11,16.557 c 1.4268,9.274 3.5669,18.976 5.612,28.06 0.09512,0.28535 0.33291,0.47559 0.57071,0.47559 2.1877,0.09512 4.3279,0.14268 6.5631,0.14268 2.0926,0 4.0425,-0.04756 6.04,-0.14268 2.045,-8.7508 3.9949,-17.93 5.4217,-26.633 0.04756,-0.47559 0.2378,-1.2841 0.2378,-1.4743 0,-0.2378 -0.19024,-0.42803 -0.42803,-0.42803 -1.617,-0.04756 -3.4242,-0.09512 -5.0412,-0.09512 -1.3792,0 -2.1877,0.04756 -3.7096,0.09512 -1.2365,6.1827 -2.045,12.365 -2.8535,18.5 -0.85606,-6.04 -1.6646,-12.032 -2.8535,-18.025 -0.04756,-0.2378 -0.28535,-0.42803 -0.57071,-0.47559 -1.617,-0.09512 -3.0438,-0.09512 -4.6608,-0.09512 -1.5694,0 -2.806,0.04756 -4.3279,0.09512 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path64"
+       d="m 85.65,30.825 c 0,11.034 4.1376,14.553 13.221,14.553 6.7058,-0.33291 10.939,-5.1839 10.939,-14.553 0,-10.986 -4.2803,-14.601 -13.316,-14.601 -6.7058,0.33291 -10.843,5.279 -10.843,14.601 z m 9.8923,0 c 0,-5.6595 0.8085,-6.2778 2.0926,-6.2778 1.2841,0 2.2353,0.61826 2.2353,6.2778 0,5.65954 -0.8085,6.2778 -2.0926,6.2778 -1.2841,0 -2.2353,-0.61827 -2.2353,-6.2778 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path66"
+       d="m 112.38,30.206 c 0,4.7559 0.0951,9.9398 0.0951,14.41 0,0.28535 0.19024,0.47559 0.47559,0.47559 1.617,0.09512 3.234,0.09512 4.851,0.09512 1.3792,0 2.7584,0 4.1852,-0.09512 -0.0476,-3.7096 -0.19023,-7.7997 -0.23779,-11.699 h 0.61827 c 0.95117,3.2816 2.2828,7.3241 3.6145,11.367 0.0951,0.28535 0.47559,0.47559 0.71339,0.47559 1.2841,0.09512 2.5682,0.14268 3.8523,0.14268 1.6646,0 3.3767,-0.09512 4.9461,-0.28535 -0.8085,-3.5669 -1.9024,-6.9912 -3.7572,-10.701 -0.66583,-1.0939 -1.5694,-1.8548 -2.6633,-2.2353 3.1389,-1.4743 5.0888,-4.1376 5.0888,-7.657 0,-7.7045 -4.851,-8.2752 -11.937,-8.2752 -2.6633,0 -6.6107,0.33291 -9.7496,0.8085 0,4.7559 -0.0951,8.4179 -0.0951,13.174 z m 9.3691,-2.6633 v -4.2803 c 0.33291,-0.04756 0.76094,-0.04756 1.1414,-0.04756 1.7121,0 2.1877,0.8085 2.1877,2.2828 0,1.2365 -1.0463,2.045 -2.5206,2.045 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path68"
+       d="m 137.3,30.825 c 0,4.7559 0.0951,9.3215 0.19024,13.792 0,0.28535 0.19023,0.47559 0.47558,0.47559 1.5694,0.09512 3.234,0.14268 4.851,0.14268 1.5694,0 2.6633,-0.04756 4.1852,-0.14268 0.0951,-4.7559 0.19024,-9.5118 0.19024,-14.268 0,-4.7562 -0.0951,-9.3215 -0.19024,-13.792 0,-0.2378 -0.23779,-0.47559 -0.47558,-0.47559 -1.617,-0.04756 -3.2816,-0.09512 -4.8986,-0.09512 -1.5694,0 -2.6633,0.04756 -4.1376,0.09512 C 137.34756,21.3129 137.3,26.0688 137.3,30.825 Z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path70"
+       d="m 149.14,20.171 c 0,1.2841 0,2.5682 0.0476,3.8998 0,0.28535 0.19023,0.47559 0.47559,0.47559 0.8085,0.04756 3.0913,0.09512 5.2315,0.14268 v 6.1351 c 0,4.7559 0.0951,9.3215 0.19023,13.792 0,0.28535 0.19024,0.47559 0.47559,0.47559 1.5694,0.09512 3.234,0.14268 4.851,0.14268 1.5694,0 2.6633,-0.04756 4.1852,-0.14268 0.0951,-4.7559 0.19024,-9.5118 0.19024,-14.268 0,-2.1877 -0.0476,-4.1376 -0.0951,-6.0875 2.4731,0 4.9937,-0.04756 5.8022,-0.09512 v -3.5194 -4.0901 c -0.0476,-0.2378 -0.2378,-0.47559 -0.47559,-0.47559 -1.617,-0.04756 -8.2277,-0.09512 -9.8447,-0.09512 -1.5694,0 -9.5118,0.04756 -10.986,0.09512 -0.0476,1.2841 -0.0476,2.4731 -0.0476,3.6145 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path72"
+       d="m 172.49,30.825 c 0,4.7559 0.0951,9.3215 0.19024,13.792 0,0.28535 0.19023,0.47559 0.47559,0.47559 1.5694,0.09512 8.4655,0.2378 10.082,0.2378 1.5694,0 6.6582,-0.04756 8.1801,-0.14268 v -3.4718 -4.1376 c -0.0476,-0.23779 -0.23779,-0.47559 -0.47559,-0.47559 -1.617,-0.04756 -6.8009,-0.09512 -8.4179,-0.09512 h -0.61827 v -2.4731 h 6.1827 v -3.1389 -3.6145 c -0.0476,-0.2378 -0.23779,-0.47559 -0.47559,-0.47559 -1.2365,0 -3.8047,-0.04756 -5.7071,-0.04756 v -2.5206 h 1.8548 c 1.5694,0 6.04,0 7.5619,-0.09512 v -3.4718 -4.1376 c -0.0476,-0.2378 -0.23779,-0.47559 -0.47558,-0.47559 -1.617,-0.04756 -6.7058,-0.09512 -8.3228,-0.09512 -1.5694,0 -8.3704,0.04756 -9.8447,0.09512 -0.14268,4.7559 -0.19024,9.5118 -0.19024,14.268 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+  </g>
+</svg>

resources/graphics/badge_kidgame.svg

@@ -0,0 +1,145 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="80"
+   height="92"
+   version="1.1"
+   viewBox="0 0 21.166666 24.341667"
+   id="svg90"
+   sodipodi:docname="badge_kidgame.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <defs
+     id="defs94" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     id="namedview92"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="9.0242459"
+     inkscape:cx="-20.683876"
+     inkscape:cy="60.045111"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg90"
+     units="px" />
+  <metadata
+     id="metadata2">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.51566374;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+     id="rect5286"
+     width="21.166666"
+     height="24.341667"
+     x="2.2368853e-07"
+     y="-2.6645353e-15" />
+  <g
+     id="g16"
+     transform="matrix(0.10079384,0,0,0.08235571,-4.237873e-4,0.04964161)"
+     style="fill:#d7d7d7;fill-opacity:1">
+    <rect
+       x="3.0257001"
+       y="2.9029"
+       width="204.36"
+       height="288.81"
+       id="rect14"
+       style="fill:#d7d7d7;fill-opacity:1;stroke-width:0.26458001" />
+  </g>
+  <g
+     id="g20"
+     transform="matrix(0.10079384,0,0,0.0816046,-4.237873e-4,0.13809261)"
+     style="fill:#000000;fill-opacity:1">
+    <rect
+       x="7.7007999"
+       y="7.7174001"
+       width="194.89999"
+       height="279.22"
+       id="rect18"
+       style="stroke-width:0.26458001;fill:#000000;fill-opacity:1" />
+  </g>
+  <rect
+     style="fill:#e6e6e6;fill-opacity:1;stroke-width:0.02649944"
+     id="rect22"
+     height="17.205626"
+     width="17.540144"
+     y="5.3001156"
+     x="1.8132613" />
+  <path
+     style="fill:#3974ff;fill-opacity:1;stroke:#141414;stroke-width:0.21342269;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     inkscape:connector-curvature="0"
+     id="path24"
+     d="M 4.2719194,9.2899832 7.5642988,20.858601 16.894338,18.490114 16.025104,15.486921 10.530737,16.910518 10.155183,15.577444 15.650846,14.180192 14.791009,11.17484 9.310487,12.587467 8.9381592,11.320213 14.438408,9.9434334 13.590192,6.9470637 Z" />
+  <g
+     style="fill:#f0f0f0;fill-opacity:1;stroke-width:0.31213999"
+     id="g74"
+     aria-label="EVERYONE"
+     transform="matrix(0.09733762,0,0,0.10419427,-4.2465753e-4,-1.9389228e-4)">
+    <path
+       inkscape:connector-curvature="0"
+       id="path58"
+       d="m 19.756,29.672 c 0,4.5781 0.09156,8.9731 0.18312,13.277 0,0.27469 0.18312,0.45781 0.45781,0.45781 1.5108,0.09156 8.149,0.2289 9.7056,0.2289 1.5108,0 6.4094,-0.04578 7.8743,-0.13734 v -3.342 -3.983 c -0.04578,-0.22891 -0.2289,-0.45781 -0.45781,-0.45781 -1.5566,-0.04578 -6.5467,-0.09156 -8.1033,-0.09156 h -0.59515 v -2.3806 h 5.9515 v -3.0216 -3.4794 c -0.04578,-0.22891 -0.2289,-0.45781 -0.45781,-0.45781 -1.1903,0 -3.6625,-0.04578 -5.4937,-0.04578 v -2.4264 h 1.7855 c 1.5108,0 5.8142,0 7.2792,-0.09156 v -3.342 -3.983 c -0.04578,-0.22891 -0.2289,-0.45781 -0.45781,-0.45781 -1.5566,-0.04578 -6.4551,-0.09156 -8.0117,-0.09156 -1.5108,0 -8.0575,0.04578 -9.4767,0.09156 -0.13734,4.5781 -0.18312,9.1562 -0.18312,13.734 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path60"
+       d="m 38.663,15.938 c 1.3734,8.9273 3.4336,18.267 5.4022,27.011 0.09156,0.27469 0.32047,0.45781 0.54937,0.45781 2.1059,0.09156 4.1661,0.13734 6.3178,0.13734 2.0144,0 3.8914,-0.04578 5.8142,-0.13734 1.9686,-8.4237 3.8456,-17.259 5.219,-25.637 0.04578,-0.45781 0.2289,-1.2361 0.2289,-1.4192 0,-0.22891 -0.18312,-0.41203 -0.41203,-0.41203 -1.5566,-0.04578 -3.2962,-0.09156 -4.8528,-0.09156 -1.3277,0 -2.1059,0.04578 -3.5709,0.09156 -1.1903,5.9515 -1.9686,11.903 -2.7469,17.809 -0.82406,-5.8142 -1.6023,-11.583 -2.7469,-17.351 -0.04578,-0.22891 -0.27469,-0.41203 -0.54937,-0.45781 -1.5566,-0.09156 -2.93,-0.09156 -4.4865,-0.09156 -1.5108,0 -2.7011,0.04578 -4.1661,0.09156 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path62"
+       d="m 63.66,29.672 c 0,4.5781 0.09156,8.9731 0.18312,13.277 0,0.27469 0.18312,0.45781 0.45781,0.45781 1.5108,0.09156 8.149,0.2289 9.7056,0.2289 1.5108,0 6.4094,-0.04578 7.8743,-0.13734 v -3.342 -3.983 c -0.04578,-0.22891 -0.2289,-0.45781 -0.45781,-0.45781 -1.5566,-0.04578 -6.5467,-0.09156 -8.1033,-0.09156 h -0.59515 v -2.3806 h 5.9515 v -3.0216 -3.4794 c -0.04578,-0.22891 -0.22891,-0.45781 -0.45781,-0.45781 -1.1903,0 -3.6625,-0.04578 -5.4937,-0.04578 v -2.4264 h 1.7855 c 1.5108,0 5.8142,0 7.2792,-0.09156 v -3.342 -3.983 c -0.04578,-0.22891 -0.22891,-0.45781 -0.45781,-0.45781 -1.5566,-0.04578 -6.4551,-0.09156 -8.0117,-0.09156 -1.5108,0 -8.0575,0.04578 -9.4767,0.09156 -0.13734,4.5781 -0.18312,9.1562 -0.18312,13.734 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path64"
+       d="m 84.536,29.077 c 0,4.5781 0.09156,9.5682 0.09156,13.872 0,0.27469 0.18312,0.45781 0.45781,0.45781 1.5566,0.09156 3.1131,0.09156 4.6697,0.09156 1.3277,0 2.6553,0 4.0287,-0.09156 -0.04578,-3.5709 -0.18312,-7.5081 -0.22891,-11.262 h 0.59516 c 0.91562,3.1589 2.1975,7.0503 3.4794,10.942 0.09156,0.27469 0.45781,0.45781 0.68672,0.45781 1.2361,0.09156 2.4722,0.13734 3.7083,0.13734 1.6023,0 3.2504,-0.09156 4.7612,-0.27469 -0.77828,-3.4336 -1.8312,-6.7298 -3.6167,-10.301 -0.64093,-1.053 -1.5108,-1.7855 -2.5637,-2.1517 3.0216,-1.4192 4.8986,-3.983 4.8986,-7.3708 0,-7.4165 -4.6697,-7.9659 -11.491,-7.9659 -2.5637,0 -6.3636,0.32047 -9.3851,0.77828 0,4.5781 -0.09156,8.1033 -0.09156,12.681 z m 9.0189,-2.5637 V 22.393 c 0.32047,-0.04578 0.7325,-0.04578 1.0987,-0.04578 1.6481,0 2.1059,0.77828 2.1059,2.1975 0,1.1903 -1.0072,1.9686 -2.4264,1.9686 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path66"
+       d="m 106.14,16.121 c 0.77828,3.4794 2.0144,8.149 3.7998,11.674 1.053,1.7855 2.3348,3.2047 3.7083,4.3034 -0.0458,3.7083 -0.0458,7.325 -0.0458,10.85 0,0.27469 0.18312,0.45781 0.45781,0.45781 1.5108,0.09156 3.2047,0.13734 4.7612,0.13734 1.5108,0 2.6553,-0.04578 4.1203,-0.13734 -0.0458,-3.7541 -0.0916,-7.5081 -0.13734,-11.308 1.3734,-1.0987 2.6553,-2.518 3.7083,-4.3034 1.7855,-3.5251 3.0216,-8.1948 3.7998,-11.674 -1.5108,-0.18312 -3.1589,-0.27469 -4.7612,-0.27469 -1.2361,0 -2.4722,0.04578 -3.7083,0.13734 -0.2289,0 -0.59515,0.18312 -0.68671,0.45781 -1.0072,3.0673 -2.1059,6.8672 -2.93,9.9803 -0.86984,-3.1131 -1.9228,-6.9129 -2.93,-9.9803 -0.0916,-0.27469 -0.45781,-0.45781 -0.68672,-0.45781 -1.2361,-0.09156 -2.4722,-0.13734 -3.7083,-0.13734 -1.6481,0 -3.2505,0.09156 -4.7612,0.27469 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path68"
+       d="m 130,29.672 c 0,10.621 3.983,14.009 12.727,14.009 6.4551,-0.32047 10.53,-4.9901 10.53,-14.009 0,-10.575 -4.1203,-14.055 -12.819,-14.055 C 133.9829,15.93747 130,20.6987 130,29.672 Z m 9.5225,0 c 0,-5.448 0.77828,-6.0431 2.0144,-6.0431 1.23612,0 2.1517,0.59515 2.1517,6.0431 0,5.44795 -0.77828,6.0431 -2.0144,6.0431 -1.23612,0 -2.1517,-0.59516 -2.1517,-6.0431 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path70"
+       d="m 155.63,29.672 c 0,4.5781 0.0916,8.9731 0.18313,13.277 0,0.27469 0.18312,0.45781 0.45781,0.45781 1.465,0.09156 2.8842,0.13734 4.4408,0.13734 1.5108,0 2.3348,-0.04578 3.7998,-0.13734 l -0.18313,-12.132 4.7612,11.674 c 0.0916,0.27469 0.2289,0.45781 0.50359,0.45781 1.465,0.09156 2.7926,0.13734 4.1661,0.13734 1.5108,0 2.2891,-0.04578 3.5709,-0.13734 0.0916,-4.5781 0.18312,-9.1562 0.18312,-13.734 0,-4.5778 -0.0916,-8.9731 -0.18312,-13.277 0,-0.22891 -0.22891,-0.41203 -0.45782,-0.45781 -1.3734,-0.04578 -2.7011,-0.09156 -4.2576,-0.09156 -1.5108,0 -2.5637,0.04578 -3.983,0.09156 l 0.13734,12.178 -4.7154,-11.72 c -0.13735,-0.22891 -0.27469,-0.41203 -0.5036,-0.45781 -1.465,-0.04578 -2.6553,-0.09156 -3.983,-0.09156 -1.5108,0 -2.3348,0.04578 -3.754,0.09156 -0.13735,4.5781 -0.18313,9.1562 -0.18313,13.734 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path72"
+       d="m 180.81,29.672 c 0,4.5781 0.0916,8.9731 0.18313,13.277 0,0.27469 0.18312,0.45781 0.45781,0.45781 1.5108,0.09156 8.149,0.2289 9.7056,0.2289 1.5108,0 6.4094,-0.04578 7.8744,-0.13734 v -3.342 -3.983 c -0.0458,-0.22891 -0.2289,-0.45781 -0.45781,-0.45781 -1.5566,-0.04578 -6.5467,-0.09156 -8.1032,-0.09156 h -0.59516 v -2.3806 h 5.9516 v -3.0216 -3.4794 c -0.0458,-0.22891 -0.22891,-0.45781 -0.45782,-0.45781 -1.1903,0 -3.6625,-0.04578 -5.4937,-0.04578 v -2.4264 h 1.7855 c 1.5108,0 5.8142,0 7.2792,-0.09156 v -3.342 -3.983 c -0.0458,-0.22891 -0.2289,-0.45781 -0.45781,-0.45781 -1.5566,-0.04578 -6.4551,-0.09156 -8.0117,-0.09156 -1.5108,0 -8.0575,0.04578 -9.4767,0.09156 -0.13734,4.5781 -0.18313,9.1562 -0.18313,13.734 z"
+       style="fill:#f0f0f0;fill-opacity:1" />
+  </g>
+</svg>

resources/graphics/controllers/gamepad_generic.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="42"
+   height="42"
+   viewBox="0 0 11.1125 11.1125"
+   version="1.1"
+   id="svg4925"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="unknown.svg">
+  <defs
+     id="defs4919" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="6.7728148"
+     inkscape:cx="-21.346482"
+     inkscape:cy="-0.76992782"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4922">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-285.88748)">
+    <g
+       aria-label="?"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.72348785px;line-height:1.25;font-family:Digitalt;-inkscape-font-specification:Digitalt;letter-spacing:0px;word-spacing:0px;fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="text4825"
+       transform="matrix(0.91316098,0,0,0.91316098,1.9388092,25.308702)">
+      <path
+         d="m 1.9437243,295.40006 q 0,-0.59882 0.013713,-1.25707 0.66739,-0.032 1.3530646,-0.032 0.6033936,0 1.5724804,0.032 0.073139,0 0.1279926,0.0548 0.054854,0.0549 0.054854,0.128 0.013713,0.74053 0.013713,1.40334 0,0.58968 -0.013713,1.24793 -0.4114048,0.0229 -0.9919426,0.0229 -0.8410942,0 -1.9336024,-0.0594 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.12799 -0.013713,-0.71768 -0.013713,-1.35764 z m -1.50391294,-9.11947 q 1.63190554,-0.39312 3.35523444,-0.39312 0.6811034,0 1.2205008,0.0777 0.5439685,0.0777 1.0147984,0.2697 0.475401,0.18741 0.7908113,0.48911 0.3154104,0.29713 0.4936858,0.76339 0.1828465,0.46625 0.1828465,1.07879 0,0.68567 -0.3016968,1.27078 -0.2971257,0.58511 -0.8182384,1.12908 -0.2422717,0.25142 -0.3656931,0.38855 -0.1234214,0.13713 -0.3199815,0.39769 -0.1919889,0.25599 -0.2925545,0.46169 -0.095994,0.2057 -0.1782754,0.50283 -0.07771,0.29255 -0.082281,0.60339 -0.5531109,0.0366 -1.3804916,0.0366 -0.8502365,0 -1.6913306,-0.0366 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.128 0,-0.53025 0.1325638,-0.99651 0.1325637,-0.46626 0.3428373,-0.79538 0.2102735,-0.32913 0.4662587,-0.61254 0.2559852,-0.28798 0.5119704,-0.5074 0.2559851,-0.22398 0.4662587,-0.41597 0.2102735,-0.19199 0.3428373,-0.38855 0.1325637,-0.19656 0.1325637,-0.38398 0,-0.5394 -0.754242,-0.5394 -0.612536,0 -1.5084841,0.31541 -0.891377,0.31084 -1.16564687,0.5074 z"
+         style="fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4827"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

resources/graphics/controllers/gamepad_nintendo_64.svg

@@ -0,0 +1,294 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="42"
+   height="42"
+   viewBox="0 0 11.1125 11.1125"
+   version="1.1"
+   id="svg4925"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="gamepad_nintendo_64.svg">
+  <defs
+     id="defs4919">
+    <clipPath
+       id="clipPath16"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path18"
+         d="M 0,366.069 H 352.845 V 0 H 0 Z" />
+    </clipPath>
+    <clipPath
+       id="clipPath16-4"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path18-6"
+         d="M 0,366.069 H 352.845 V 0 H 0 Z" />
+    </clipPath>
+    <clipPath
+       id="clipPath16-4-4"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path18-6-6"
+         d="M 0,366.069 H 352.845 V 0 H 0 Z" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.627417"
+     inkscape:cx="14.408843"
+     inkscape:cy="35.16371"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:snap-bbox="false" />
+  <metadata
+     id="metadata4922">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-285.88748)">
+    <g
+       id="g6500">
+      <path
+         d="m 8.9207505,288.75028 v -0.28673 c 0,0 -0.8945998,-0.5964 -3.3891568,-0.5964 -2.494557,0 -3.3891568,0.5964 -3.3891568,0.5964 v 0.28673"
+         style="fill:#515151;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02293845"
+         id="path22-9-2"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path26-2-4"
+         d="m 5.5533939,287.39694 c -0.756969,0 -1.6331147,0.34396 -1.6331147,0.34396 l -0.2066758,0.40158 c 0,0 -2.1943939,0.16039 -2.1867555,1.63611 5.085e-4,0.0982 0.0075,0.18881 0.01904,0.27331 -0.1137858,0.538 -0.2468545,1.45365 -0.133525,2.53298 0.092809,0.88393 0.4822912,1.17919 0.7014452,1.18319 0.3958948,0.007 0.6790322,-0.98964 0.7971423,-1.56548 0.1240976,-0.60497 0.1548601,-0.89078 0.1633366,-1.0221 0.084918,0.008 0.1608876,0.0163 0.2189511,0.028 0.7952073,0.16057 0.9046239,0.0698 1.1162999,1.37634 0.2217231,1.36867 0.5245184,2.92843 1.1438567,2.90548 0.6193384,0.023 0.9221336,-1.53681 1.1438567,-2.90548 0.2116761,-1.30655 0.3210926,-1.21577 1.1162999,-1.37634 0.059266,-0.0119 0.1373374,-0.0202 0.2244625,-0.0286 0.00843,0.13111 0.03911,0.417 0.1633365,1.0226 0.1181333,0.57583 0.4012477,1.5727 0.7971423,1.56548 0.2191538,-0.004 0.608887,-0.29924 0.7016953,-1.18319 0.1143159,-1.08873 -0.022366,-2.01198 -0.1367813,-2.548 2.04e-5,-1.6e-4 -2.04e-5,-3.4e-4 0,-5e-4 0.010198,-0.08 0.015807,-0.16573 0.016283,-0.25778 0.00764,-1.47572 -2.1867555,-1.63612 -2.1867555,-1.63612 L 7.1865088,287.7408 c 0,0 -0.8761456,-0.34396 -1.6331147,-0.34396 z"
+         style="fill:#c2c2c2;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.10583333;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         sodipodi:nodetypes="cccc"
+         d="m 7.1595743,287.77369 -0.1162104,1.70489 0.3254908,-1.29954 z"
+         style="fill:#878787;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02235503"
+         id="path226-0-9"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 3.6964736,289.83986 c 0,0.45806 -0.3713048,0.82932 -0.829317,0.82932 -0.458035,0 -0.8293398,-0.37126 -0.8293398,-0.82932 0,-0.45802 0.3713048,-0.82932 0.8293398,-0.82932 0.4580122,0 0.829317,0.3713 0.829317,0.82932"
+         style="fill:#a3a3a3;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02293845"
+         id="path46-2-8"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 3.6964736,289.83986 c 0,0.45806 -0.3713048,0.82932 -0.829317,0.82932 -0.458035,0 -0.8293398,-0.37126 -0.8293398,-0.82932 0,-0.45802 0.3713048,-0.82932 0.8293398,-0.82932 0.4580122,0 0.829317,0.3713 0.829317,0.82932 z"
+         style="fill:none;stroke:#a3a3a3;stroke-width:0.02293845;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+         id="path50-4-3"
+         inkscape:connector-curvature="0" />
+      <path
+         d="M 3.0196996,290.48209 H 2.7333131 c -0.031632,0 -0.057346,-0.0257 -0.057346,-0.0573 v -0.38906 H 2.2962667 c -0.03154,0 -0.057277,-0.0257 -0.057277,-0.0573 v -0.28636 c 0,-0.0316 0.025667,-0.0573 0.057277,-0.0573 h 0.3797002 v -0.37971 c 0,-0.0317 0.025714,-0.0573 0.057346,-0.0573 h 0.2863866 c 0.031586,0 0.057277,0.0257 0.057277,0.0573 v 0.37971 h 0.3610521 c 0.031609,0 0.057278,0.0257 0.057278,0.0573 v 0.28636 c 0,0.0316 -0.025669,0.0572 -0.057278,0.0572 H 3.076977 v 0.3891 c 0,0.0316 -0.025691,0.0573 -0.057277,0.0573"
+         style="fill:#515151;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02293845"
+         id="path54-7-1"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 5.9659651,289.9888 c 0,0.22627 -0.1834388,0.4097 -0.4097038,0.4097 -0.2262878,0 -0.4097265,-0.18343 -0.4097265,-0.40968 0,-0.22629 0.1834387,-0.40971 0.4097265,-0.40971 0.226265,0 0.4097038,0.18342 0.4097038,0.40969"
+         style="fill:#a3a3a3;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02293845"
+         id="path58-7-3"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 6.459142,291.72032 c 0,0.49864 -0.4042444,0.90288 -0.9028806,0.90288 -0.498659,0 -0.9029034,-0.40424 -0.9029034,-0.90288 0,-0.49864 0.4042444,-0.90288 0.9029034,-0.90288 0.4986362,0 0.9028806,0.40424 0.9028806,0.90288"
+         style="fill:#515151;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02293845"
+         id="path66-4-9"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 7.4576186,290.30537 -0.052965,0.0512 -0.1864895,-0.19306 0.052964,-0.0512 z"
+         style="fill:#878787;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02293845"
+         id="path70-9"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 8.9056076,289.42315 c 0,0.33271 -0.2697416,0.60245 -0.6024706,0.60245 -0.332729,0 -0.6024705,-0.26974 -0.6024705,-0.60245 0,-0.33275 0.2697415,-0.60247 0.6024705,-0.60247 0.332729,0 0.6024706,0.26972 0.6024706,0.60247"
+         style="fill:#afafaf;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02362629"
+         id="path78-3"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 3.0006584,289.83986 c 0,0.0738 -0.059755,0.1335 -0.1335018,0.1335 -0.073748,0 -0.1335247,-0.0598 -0.1335247,-0.1335 0,-0.0738 0.059778,-0.13351 0.1335247,-0.13351 0.073748,0 0.1335018,0.0597 0.1335018,0.13351"
+         style="fill:#3d3d3d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02293845"
+         id="path82-1-0"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 2.7653604,290.1433 h 0.2035787 l -0.1018008,0.2189 z"
+         style="fill:#3d3d3d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02293845"
+         id="path86-2-6"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 2.7653604,290.1433 h 0.2035787 l -0.1018008,0.2189 z"
+         style="fill:none;stroke:#3d3d3d;stroke-width:0.02293845;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+         id="path90-8-4"
+         inkscape:connector-curvature="0" />
+      <path
+         d="M 2.9689391,289.53641 H 2.7653604 l 0.1018008,-0.21889 z"
+         style="fill:#3d3d3d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02293845"
+         id="path94-9-0"
+         inkscape:connector-curvature="0" />
+      <path
+         d="M 2.9689391,289.53641 H 2.7653604 l 0.1018008,-0.21889 z"
+         style="fill:none;stroke:#3d3d3d;stroke-width:0.02293845;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+         id="path98-3-6"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 2.5637062,289.73807 v 0.20358 l -0.2189017,-0.1018 z"
+         style="fill:#3d3d3d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02293845"
+         id="path102-6-6"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 2.5637062,289.73807 v 0.20358 l -0.2189017,-0.1018 z"
+         style="fill:none;stroke:#3d3d3d;stroke-width:0.02293845;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+         id="path106-8-5"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 3.1705911,289.94165 v -0.20358 l 0.2189017,0.1018 z"
+         style="fill:#3d3d3d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02293845"
+         id="path110-0-9"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 3.1705911,289.94165 v -0.20358 l 0.2189017,0.1018 z"
+         style="fill:none;stroke:#3d3d3d;stroke-width:0.02293845;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+         id="path114-2-7"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 5.8774113,289.9888 c 0,0.17736 -0.1438011,0.32116 -0.3211613,0.32116 -0.1773601,0 -0.3211613,-0.14378 -0.3211613,-0.32114 0,-0.17738 0.1438012,-0.32118 0.3211613,-0.32118 0.1773602,0 0.3211613,0.1438 0.3211613,0.32116"
+         style="fill:#b40519;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02293845"
+         id="path118-1-8"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 7.3836283,289.91383 c 0,0.18788 -0.1523572,0.34024 -0.340269,0.34024 -0.1879118,0 -0.340269,-0.15236 -0.340269,-0.34024 0,-0.18794 0.1523572,-0.34027 0.340269,-0.34027 0.1879118,0 0.340269,0.15233 0.340269,0.34027"
+         style="fill:#0c9655;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02293845"
+         id="path122-0-9"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 8.0680409,289.42315 c 0,0.12282 -0.099553,0.22234 -0.2223425,0.22234 -0.1228125,0 -0.2223653,-0.0995 -0.2223653,-0.22234 0,-0.12278 0.099553,-0.22234 0.2223653,-0.22234 0.1227893,0 0.2223425,0.0996 0.2223425,0.22234"
+         style="fill:#f9c200;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02293845"
+         id="path126-5-6"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 8.9829135,289.42315 c 0,0.12282 -0.099553,0.22234 -0.2223425,0.22234 -0.1228123,0 -0.2223654,-0.0995 -0.2223654,-0.22234 0,-0.12278 0.099553,-0.22234 0.2223654,-0.22234 0.1227894,0 0.2223425,0.0996 0.2223425,0.22234"
+         style="fill:#f9c200;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02293845"
+         id="path130-1-2"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 8.303137,289.65823 c 0.1228123,0 0.2223427,0.0996 0.2223427,0.22235 0,0.12281 -0.09953,0.22236 -0.2223427,0.22236 -0.1228123,0 -0.2223426,-0.0995 -0.2223426,-0.22236 0,-0.1228 0.09953,-0.22235 0.2223426,-0.22235"
+         style="fill:#f9c200;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02293845"
+         id="path134-1-6"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 8.303137,288.74333 c 0.1228123,0 0.2223427,0.0996 0.2223427,0.22235 0,0.12282 -0.09953,0.22236 -0.2223427,0.22236 -0.1228123,0 -0.2223426,-0.0995 -0.2223426,-0.22236 0,-0.12279 0.09953,-0.22235 0.2223426,-0.22235"
+         style="fill:#f9c200;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02293845"
+         id="path138-0-3"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 5.1694732,292.09916 -0.1545823,-0.38444 0.1625419,-0.38117 0.3844027,-0.15459 0.3811912,0.16255 0.1545823,0.38442 -0.1625419,0.38117 -0.3844256,0.15457 z"
+         style="fill:#212121;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02293845"
+         id="path142-1"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 8.0009272,290.52703 c 0,0.1879 -0.1523573,0.34027 -0.3402691,0.34027 -0.1879118,0 -0.340269,-0.15237 -0.340269,-0.34027 0,-0.18792 0.1523572,-0.34028 0.340269,-0.34028 0.1879118,0 0.3402691,0.15236 0.3402691,0.34028"
+         style="fill:#0356b2;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02293845"
+         id="path146-8-9"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 5.976639,291.72032 c 0,0.23217 -0.1882258,0.4204 -0.4204033,0.4204 -0.2321489,0 -0.4203747,-0.1882 -0.4203747,-0.4204 0,-0.23215 0.1882258,-0.42037 0.4203747,-0.42037 0.2321775,0 0.4204033,0.18819 0.4204033,0.42037"
+         style="fill:#a3a3a3;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02848453"
+         id="path154-9"
+         inkscape:connector-curvature="0" />
+      <path
+         d="M 5.5563759,288.61448 H 6.279442 c 0.01273,0 0.02537,-9.1e-4 0.037963,-0.003 0.1009521,-0.0178 0.1681389,-0.118 0.1457739,-0.21756 -0.019131,-0.0852 -0.092029,-0.14386 -0.1792869,-0.14386 -0.4850337,-8e-5 -0.9700444,-3e-5 -1.455078,0 -0.042803,0 -0.081041,0.0133 -0.1146923,0.0398 -0.077922,0.0614 -0.091662,0.1771 -0.02982,0.25462 0.037895,0.0475 0.087855,0.0702 0.1484119,0.0702 z m -2.28e-5,-0.42096 c 0.2412207,0 0.4824645,9e-5 0.7236853,-7e-5 0.044661,-4e-5 0.086753,0.01 0.1250834,0.0326 0.065443,0.0394 0.1051957,0.097 0.1158162,0.17286 0.016217,0.11602 -0.05168,0.22386 -0.1623125,0.26019 -0.025324,0.008 -0.051359,0.0117 -0.077968,0.0117 -0.4283985,-4e-5 -0.8568201,-4e-5 -1.2852186,-4e-5 -0.057438,0 -0.1148759,4.6e-4 -0.1722679,-1.8e-4 -0.1077419,-9.2e-4 -0.2030283,-0.0781 -0.2275494,-0.18292 -0.028398,-0.12164 0.039385,-0.24292 0.1579083,-0.28235 0.025691,-0.008 0.052116,-0.0119 0.079137,-0.0119 0.2412208,8e-5 0.4824416,3e-5 0.7236853,3e-5"
+         style="fill:#a3a3a3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02293845"
+         id="path178-2"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 4.9485735,288.47435 v -0.006 c 0,-0.0466 9.17e-5,-0.093 -1.376e-4,-0.13947 0,-0.005 0.00133,-0.006 0.00624,-0.006 0.018443,2.8e-4 0.036931,2.3e-4 0.05542,5e-5 0.00386,-5e-5 0.00495,9.2e-4 0.00493,0.005 -9.18e-5,0.0702 -9.18e-5,0.14028 2.29e-5,0.21039 0,0.005 -0.0011,0.006 -0.00527,0.006 -0.018671,-2.3e-4 -0.037367,-2.3e-4 -0.056039,0 -0.00399,9e-5 -0.00594,-0.002 -0.00796,-0.005 -0.031655,-0.0492 -0.063425,-0.0984 -0.095172,-0.14754 -0.00117,-0.002 -0.00239,-0.004 -0.0047,-0.006 v 0.006 c 0,0.048 -1.376e-4,0.0961 1.606e-4,0.14422 6.88e-5,0.006 -0.00179,0.007 -0.00755,0.007 -0.017662,-3.6e-4 -0.035371,-2.7e-4 -0.053011,-5e-5 -0.00424,5e-5 -0.00582,-4.8e-4 -0.0058,-0.006 1.606e-4,-0.0699 1.606e-4,-0.13983 -2.3e-5,-0.20978 0,-0.005 0.00161,-0.006 0.00573,-0.006 0.020071,1.8e-4 0.040142,2.3e-4 0.060213,-4e-5 0.00413,-5e-5 0.00631,0.002 0.00842,0.005 0.031012,0.0491 0.062186,0.0982 0.093268,0.14726 4.358e-4,-4e-5 8.483e-4,-9e-5 0.00126,-1.4e-4"
+         style="fill:#a3a3a3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02293845"
+         id="path182-6"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 6.0513672,288.47076 c 0,-0.0106 2.065e-4,-0.0211 -4.58e-5,-0.0316 -3.899e-4,-0.015 -0.010184,-0.0253 -0.024246,-0.0256 -0.014452,-4.5e-4 -0.026104,0.009 -0.026655,0.0239 -8.241e-4,0.022 -5.284e-4,0.044 -1.376e-4,0.0661 1.835e-4,0.009 0.00592,0.0151 0.015529,0.0168 0.00647,9.2e-4 0.013029,0.002 0.019567,2.3e-4 0.010253,-0.002 0.015713,-0.007 0.01592,-0.0183 2.065e-4,-0.0105 4.59e-5,-0.021 6.89e-5,-0.0316 m 4.58e-5,-0.0675 c 0,-0.0217 -6.88e-5,-0.0423 4.59e-5,-0.0628 0,-0.006 -0.00243,-0.0131 9.162e-4,-0.0167 0.00337,-0.004 0.010896,-9.2e-4 0.016584,-9.2e-4 0.014474,-1.8e-4 0.028994,5e-5 0.043514,-1.4e-4 0.00388,-4e-5 0.00544,4.9e-4 0.00541,0.005 -1.147e-4,0.0702 -1.147e-4,0.14031 -2.3e-5,0.21043 2.3e-5,0.004 -7.804e-4,0.006 -0.00484,0.006 -0.018901,-2.1e-4 -0.03778,-4e-5 -0.056635,-1.1e-4 -0.00213,0 -0.00466,9.1e-4 -0.00518,-0.003 -4.129e-4,-0.004 -0.00294,-4.9e-4 -0.00399,-1.8e-4 -0.011745,0.005 -0.023947,0.007 -0.036495,0.008 -0.030004,0.002 -0.051956,-0.0129 -0.067577,-0.0371 -0.035395,-0.0549 7.321e-4,-0.10807 0.043537,-0.11935 0.020645,-0.006 0.040096,-0.002 0.058539,0.008 0.00172,9.2e-4 0.00339,0.002 0.00619,0.004"
+         style="fill:#a3a3a3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02293845"
+         id="path186-0"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 5.7793768,288.41346 c 0.00748,-0.003 0.013671,-0.006 0.019933,-0.0104 0.038399,-0.0221 0.082625,-0.005 0.1049205,0.0289 0.003,0.005 0.00426,0.01 0.00424,0.0153 -1.376e-4,0.0318 -1.376e-4,0.0635 2.3e-5,0.0953 2.28e-5,0.004 -5.527e-4,0.006 -0.00502,0.006 -0.019268,-2.8e-4 -0.038537,-2.8e-4 -0.057782,-4e-5 -0.00423,4e-5 -0.00527,-9.2e-4 -0.00525,-0.006 1.835e-4,-0.031 9.18e-5,-0.062 9.18e-5,-0.093 0,-0.0152 -0.01842,-0.0291 -0.033284,-0.0253 -0.00464,0.002 -0.00896,0.003 -0.013213,0.006 -0.010093,0.006 -0.015322,0.0119 -0.014956,0.0243 8.725e-4,0.0296 1.835e-4,0.0592 3.9e-4,0.0887 4.58e-5,0.005 -0.00115,0.006 -0.00525,0.006 -0.018671,-2.4e-4 -0.037367,-2.4e-4 -0.056016,0 -0.00424,9e-5 -0.00523,-9.2e-4 -0.00523,-0.006 1.375e-4,-0.0463 1.605e-4,-0.0926 0,-0.13885 0,-0.005 0.0015,-0.006 0.00544,-0.006 0.018443,1.8e-4 0.036931,2.7e-4 0.05542,-5e-5 0.00498,-1.3e-4 0.00608,0.002 0.00559,0.006 -3.211e-4,0.003 -4.59e-5,0.006 -4.59e-5,0.009"
+         style="fill:#a3a3a3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02293845"
+         id="path190-2"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 5.2250897,288.4088 c 0.00605,-0.004 0.011469,-0.006 0.016424,-0.009 0.031609,-0.0203 0.069871,-0.0129 0.09563,0.0116 0.011515,0.0109 0.01819,0.0229 0.017502,0.0397 -0.0011,0.0284 -4.588e-4,0.0568 -1.377e-4,0.0852 6.89e-5,0.006 -0.00175,0.006 -0.00697,0.006 -0.018282,-2.8e-4 -0.036564,-2.8e-4 -0.054846,0 -0.00489,1.2e-4 -0.00633,-9.2e-4 -0.00631,-0.006 2.753e-4,-0.0304 1.376e-4,-0.0608 1.376e-4,-0.0912 0,-0.0167 -0.018512,-0.0306 -0.034775,-0.026 -0.00438,0.002 -0.00851,0.003 -0.012548,0.006 -0.0095,0.005 -0.014726,0.0116 -0.014383,0.0235 8.727e-4,0.0292 9.17e-5,0.0584 4.588e-4,0.0876 9.17e-5,0.006 -0.0017,0.007 -0.00727,0.007 -0.017869,-3.7e-4 -0.035738,-2.8e-4 -0.053608,-5e-5 -0.00399,5e-5 -0.00548,-9.2e-4 -0.00546,-0.006 1.606e-4,-0.0465 1.147e-4,-0.093 2.29e-5,-0.13947 0,-0.004 8.484e-4,-0.005 0.00461,-0.005 0.018878,1.8e-4 0.037734,1.8e-4 0.056589,0 0.00377,-4e-5 0.00546,9.2e-4 0.00502,0.005 -3.442e-4,0.003 -9.18e-5,0.006 -9.18e-5,0.0102"
+         style="fill:#a3a3a3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02293845"
+         id="path194-2"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 6.2155653,288.47058 h 2.29e-5 c 0,0.0143 -1.835e-4,0.0286 6.89e-5,0.0428 1.606e-4,0.0103 0.00516,0.0161 0.015231,0.0183 0.00527,0.002 0.010644,9.2e-4 0.015988,9.2e-4 0.012937,-9.2e-4 0.019774,-0.007 0.019842,-0.0204 2.295e-4,-0.0275 2.982e-4,-0.0551 0,-0.0828 -1.146e-4,-0.016 -0.00996,-0.0257 -0.025003,-0.0257 -0.016148,4e-5 -0.025874,0.01 -0.026127,0.0258 -2.064e-4,0.0137 -2.29e-5,0.0274 -2.29e-5,0.041 m 0.026563,-0.0817 c 0.023856,9e-5 0.046152,0.006 0.065627,0.0215 0.041679,0.0317 0.042619,0.0856 0.0022,0.11895 -0.037619,0.031 -0.097901,0.0313 -0.1358415,4.9e-4 -0.040991,-0.0331 -0.039684,-0.0896 0.00282,-0.12079 0.019245,-0.014 0.041037,-0.0202 0.065191,-0.0204"
+         style="fill:#a3a3a3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02293845"
+         id="path198-5"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 5.5903594,288.44518 h 0.00954 c 0.017203,0 0.017203,0 0.016034,-0.0174 -9.645e-4,-0.0139 -0.011217,-0.0238 -0.025347,-0.0241 -0.014153,-3.8e-4 -0.024109,0.008 -0.025623,0.0218 -5.963e-4,0.006 -9.16e-5,0.0111 -3.211e-4,0.0166 -1.147e-4,0.003 0.00147,0.003 0.00372,0.003 0.00734,-5e-5 0.014657,0 0.021998,0 m 0.0356,0.0248 c -0.018671,0 -0.037343,1.4e-4 -0.055993,-5e-5 -0.00397,-4e-5 -0.0055,4.9e-4 -0.00541,0.006 3.441e-4,0.0123 4.58e-5,0.0246 1.835e-4,0.0369 1.376e-4,0.0129 0.00674,0.0197 0.019705,0.0206 0.00516,3.4e-4 0.0103,4.3e-4 0.015391,-9.2e-4 0.010735,-0.003 0.015874,-0.009 0.016103,-0.0197 1.376e-4,-0.006 1.835e-4,-0.0111 0,-0.0167 -9.18e-5,-0.003 6.884e-4,-0.004 0.0036,-0.004 0.020048,6e-5 0.040119,1.1e-4 0.06019,0 0.00477,-6e-5 0.00339,0.003 0.00248,0.005 -0.007,0.0181 -0.019589,0.0314 -0.036059,0.0413 -0.038949,0.0233 -0.092602,0.0191 -0.1264368,-0.01 -0.037046,-0.0319 -0.037183,-0.082 -2.752e-4,-0.11402 0.038881,-0.0336 0.1041177,-0.0332 0.1418972,9.2e-4 0.01468,0.0133 0.02365,0.0295 0.025714,0.0495 4.359e-4,0.005 -3.212e-4,0.006 -0.00509,0.006 -0.018649,-2.7e-4 -0.037344,-1.2e-4 -0.055993,-1.2e-4"
+         style="fill:#a3a3a3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02293845"
+         id="path202-2"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 5.3941507,288.46808 c 0,-0.0231 -1.147e-4,-0.0461 1.147e-4,-0.0692 4.58e-5,-0.005 -0.00126,-0.006 -0.00535,-0.006 -0.00833,2.6e-4 -0.016699,-4e-5 -0.025025,1.5e-4 -0.00319,8e-5 -0.00449,-4.9e-4 -0.00458,-0.005 -4.817e-4,-0.0159 -6.205e-4,-0.0159 0.015369,-0.0159 0.00516,0 0.010345,-1.9e-4 0.015506,3e-5 0.0031,1.2e-4 0.00413,-9.2e-4 0.00404,-0.004 -2.294e-4,-0.007 9.17e-5,-0.0154 -1.377e-4,-0.0232 -9.17e-5,-0.004 9.369e-4,-0.005 0.00434,-0.005 0.019659,1.4e-4 0.039316,1.4e-4 0.058998,0 0.00358,-3e-5 0.00489,9.2e-4 0.00473,0.005 -2.981e-4,0.007 9.18e-5,0.0151 -1.605e-4,0.0226 -1.147e-4,0.004 0.00101,0.005 0.00434,0.005 0.00872,-2.2e-4 0.017479,7e-5 0.026219,-1.3e-4 0.00332,-9e-5 0.00426,9.2e-4 0.00432,0.005 2.295e-4,0.0158 3.671e-4,0.0157 -0.015483,0.0158 -0.00631,9e-5 -0.014657,-0.003 -0.018236,9.2e-4 -0.00312,0.004 -0.00103,0.0117 -0.00103,0.0178 -4.6e-5,0.0413 -1.148e-4,0.0827 9.17e-5,0.124 2.3e-5,0.005 -0.00119,0.006 -0.00619,0.006 -0.018856,-3.2e-4 -0.037757,-2.7e-4 -0.056635,-5e-5 -0.00411,5e-5 -0.00536,-9.2e-4 -0.00532,-0.006 2.294e-4,-0.0232 1.146e-4,-0.0465 1.146e-4,-0.0697"
+         style="fill:#a3a3a3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02293845"
+         id="path206-0"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 5.1224492,288.46834 c 0,0.0231 -1.146e-4,0.0461 1.377e-4,0.0692 4.58e-5,0.005 -0.0011,0.006 -0.00558,0.006 -0.018489,-2.4e-4 -0.036954,-2.4e-4 -0.05542,0 -0.00411,3e-5 -0.00539,-9.2e-4 -0.00539,-0.006 1.605e-4,-0.0462 1.605e-4,-0.0926 0,-0.13883 -2.3e-5,-0.005 0.00133,-0.006 0.00536,-0.006 0.018671,1.9e-4 0.037367,1.9e-4 0.056039,0 0.0038,-4e-5 0.00498,9.2e-4 0.00495,0.005 -2.064e-4,0.0232 -1.147e-4,0.0465 -1.147e-4,0.0697"
+         style="fill:#a3a3a3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02293845"
+         id="path210-8"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 5.0891632,288.36212 c -0.00954,0 -0.019085,-9e-5 -0.028627,9e-5 -0.00339,9e-5 -0.00438,-9.2e-4 -0.00432,-0.005 1.835e-4,-0.0106 1.376e-4,-0.0211 0,-0.0316 0,-0.003 6.884e-4,-0.004 0.00367,-0.004 0.019636,1.1e-4 0.039316,1.1e-4 0.058998,0 0.00291,0 0.00367,9.1e-4 0.00365,0.004 -1.605e-4,0.0107 -2.063e-4,0.0214 0,0.0321 9.18e-5,0.004 -0.00131,0.004 -0.00417,0.004 -0.00975,-1.4e-4 -0.019475,-9e-5 -0.029201,-9e-5"
+         style="fill:#a3a3a3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02293845"
+         id="path214-8"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 6.3475509,288.38595 c 0.01546,1.4e-4 0.02904,-0.0132 0.029132,-0.0287 6.88e-5,-0.0164 -0.013144,-0.0304 -0.028811,-0.0304 -0.016309,-4e-5 -0.028581,0.0129 -0.028627,0.03 -6.88e-5,0.0163 0.012272,0.0289 0.028306,0.029 m 1.147e-4,-0.0645 c 0.018351,-7e-5 0.034247,0.0164 0.034293,0.0356 2.29e-5,0.018 -0.016195,0.0344 -0.034178,0.0344 -0.018511,0 -0.034018,-0.0156 -0.034064,-0.0343 -4.58e-5,-0.0196 0.015163,-0.0356 0.033949,-0.0356"
+         style="fill:#a3a3a3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02293845"
+         id="path218-4"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 6.346498,288.35589 c 0.00411,3.9e-4 0.00761,1.8e-4 0.00769,-0.005 1.376e-4,-0.006 -0.00397,-0.006 -0.00815,-0.006 -0.00466,-4.4e-4 -0.00535,0.002 -0.00553,0.006 -2.294e-4,0.006 0.00184,0.006 0.00599,0.006 m -0.01124,-9.2e-4 c -2.3e-5,-9.2e-4 -1.147e-4,-0.002 2.28e-5,-0.003 3.9e-4,-0.004 -0.00199,-0.0102 0.00117,-0.0117 0.0049,-0.002 0.011332,-0.002 0.01686,1.8e-4 0.00656,0.003 0.00876,0.012 0.00348,0.0174 -0.00285,0.003 -0.0023,0.005 -5.527e-4,0.007 0.00103,0.002 0.00314,0.004 -2.294e-4,0.006 -0.00354,0.002 -0.00328,-0.002 -0.00443,-0.003 -8.968e-4,-9.2e-4 -0.00158,-0.003 -0.00211,-0.004 -0.00144,-0.004 -0.00435,-0.002 -0.00672,-0.002 -0.00344,0 -0.00175,0.003 -0.00202,0.005 -2.523e-4,0.002 4.129e-4,0.004 -0.00282,0.004 -0.00319,-5e-5 -0.00264,-0.002 -0.00266,-0.004 -2.3e-5,-0.004 0,-0.007 0,-0.0113"
+         style="fill:#a3a3a3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02293845"
+         id="path222-9"
+         inkscape:connector-curvature="0" />
+      <path
+         sodipodi:nodetypes="cccc"
+         d="m 3.947426,287.77302 0.1326142,1.75161 -0.3425676,-1.34569 z"
+         style="fill:#878787;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02293845"
+         id="path230-6-2"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

resources/graphics/controllers/gamepad_nintendo_nes.svg

@@ -0,0 +1,334 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="42"
+   height="42"
+   viewBox="0 0 11.1125 11.1125"
+   version="1.1"
+   id="svg4925"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="gamepad_nintendo_nes.svg">
+  <defs
+     id="defs4919" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="33.785627"
+     inkscape:cx="7.8454542"
+     inkscape:cy="25.685359"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:snap-global="false" />
+  <metadata
+     id="metadata4922">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-285.88748)">
+    <g
+       id="g5404"
+       transform="matrix(0.98413614,0,0,0.98413614,0.08814355,4.6234203)">
+      <g
+         style="fill:#c2c2c2;fill-opacity:1;stroke:#000000;stroke-width:5.20466661;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(0,-0.02089351,-0.02089351,0,9.9447542,293.31016)"
+         id="g20">
+        <path
+           id="path22"
+           style="fill:#c2c2c2;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:5.20466661;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 0,0 c -1.039,0 -1.881,0.958 -1.881,2.139 v 415.804 c 0,1.182 0.842,2.14 1.881,2.14 h 178.662 c 1.038,0 1.88,-0.958 1.88,-2.14 V 2.139 C 180.542,0.958 179.7,0 178.662,0 Z"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02089351,-0.02089351,0,6.464353,293.10033)"
+         id="g24">
+        <path
+           id="path26"
+           style="fill:#333333;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 v -152.916 c 0,-1.111 0.65,-2.012 1.451,-2.012 H 139.34 c 0.802,0 1.451,0.901 1.451,2.012 v 391.023 c 0,1.112 -0.649,2.012 -1.451,2.012 H 1.451 C 0.65,240.119 0,239.219 0,238.107 V 117.433 Z"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02089351,-0.02089351,0,6.4908229,292.51958)"
+         id="g28">
+        <path
+           id="path30"
+           style="fill:#212121;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 c -3.512,0 -6.358,2.314 -6.358,5.169 v 108.025 c 0,2.856 2.846,5.17 6.358,5.17 h 27.98 c 3.511,0 6.359,-2.314 6.359,-5.17 V 5.169 C 34.339,2.314 31.491,0 27.98,0 Z"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         style="fill:#d2d2d2;fill-opacity:1"
+         transform="matrix(0,-0.02089351,-0.02089351,0,6.3691078,292.49015)"
+         id="g32">
+        <path
+           id="path34"
+           style="fill:#d2d2d2;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 c -1.287,0 -2.33,1.043 -2.33,2.33 v 102.054 c 0,1.286 1.043,2.329 2.33,2.329 h 25.164 c 1.287,0 2.33,-1.043 2.33,-2.329 V 2.33 C 27.494,1.043 26.451,0 25.164,0 Z"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         style="fill:#7a7a7a;fill-opacity:1"
+         transform="matrix(0,-0.02089351,-0.02089351,0,6.4810844,290.23659)"
+         id="g36">
+        <path
+           id="path38"
+           style="fill:#7a7a7a;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 c 2.059,0 3.728,1.67 3.728,3.729 v 109.975 c 0,2.06 -1.669,3.728 -3.728,3.728 h -11.301 c -2.058,0 -3.727,-1.668 -3.727,-3.728 V 3.729 C -15.028,1.67 -13.359,0 -11.301,0 Z"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         style="fill:#7a7a7a;fill-opacity:1"
+         transform="matrix(0,-0.02089351,-0.02089351,0,6.4810844,290.77188)"
+         id="g40">
+        <path
+           id="path42"
+           style="fill:#7a7a7a;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 c 2.059,0 3.729,1.67 3.729,3.729 v 109.975 c 0,2.06 -1.67,3.728 -3.729,3.728 h -11.301 c -2.058,0 -3.727,-1.668 -3.727,-3.728 V 3.729 C -15.028,1.67 -13.359,0 -11.301,0 Z"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         style="fill:#7a7a7a;fill-opacity:1"
+         transform="matrix(0,-0.02089351,-0.02089351,0,6.4810844,291.32568)"
+         id="g44">
+        <path
+           id="path46"
+           style="fill:#7a7a7a;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 c 2.06,0 3.729,1.67 3.729,3.729 v 109.975 c 0,2.06 -1.669,3.728 -3.729,3.728 h -11.3 c -2.059,0 -3.728,-1.668 -3.728,-3.728 V 3.729 C -15.028,1.67 -13.359,0 -11.3,0 Z"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         style="fill:#7a7a7a;fill-opacity:1"
+         transform="matrix(0,-0.02089351,-0.02089351,0,6.4031809,292.84107)"
+         id="g48">
+        <path
+           id="path50"
+           style="fill:#7a7a7a;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 v 109.975 c 0,2.06 -1.669,3.728 -3.727,3.728 h -8.681 V -3.729 h 8.681 C -1.669,-3.729 0,-2.059 0,0"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         style="fill:#d2d2d2;fill-opacity:1"
+         transform="matrix(0,-0.02089351,-0.02089351,0,3.0886639,292.15446)"
+         id="g52">
+        <path
+           id="path54"
+           style="fill:#d2d2d2;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 v -20.241 c 0,-2.059 1.669,-3.728 3.729,-3.728 h 27.726 c 2.06,0 3.729,1.669 3.729,3.728 V 0 h 20.242 c 2.058,0 3.727,1.67 3.727,3.728 v 27.727 c 0,2.06 -1.669,3.729 -3.727,3.729 H 35.184 v 20.242 c 0,2.058 -1.669,3.728 -3.729,3.728 H 3.729 C 1.669,59.154 0,57.484 0,55.426 V 35.184 h -20.241 c -2.059,0 -3.729,-1.669 -3.729,-3.729 V 3.728 C -23.97,1.67 -22.3,0 -20.241,0 Z"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         style="fill:#c2c2c2;fill-opacity:1"
+         transform="matrix(0,-0.02089351,-0.02089351,0,7.8323054,292.63419)"
+         id="g56">
+        <path
+           id="path58"
+           style="fill:#c2c2c2;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 c -1.287,0 -2.33,1.043 -2.33,2.33 v 38.912 c 0,1.286 1.043,2.329 2.33,2.329 h 39.377 c 1.287,0 2.33,-1.043 2.33,-2.329 V 2.33 C 41.707,1.043 40.664,0 39.377,0 Z"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02089351,-0.02089351,0,7.7397953,292.22282)"
+         id="g60">
+        <path
+           id="path62"
+           style="fill:#cd3332;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 c -9.587,0 -17.358,7.771 -17.358,17.357 0,9.588 7.771,17.36 17.358,17.36 9.587,0 17.358,-7.772 17.358,-17.36 C 17.358,7.771 9.587,0 0,0"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         style="fill:#c2c2c2;fill-opacity:1"
+         transform="matrix(0,-0.02089351,-0.02089351,0,8.9744701,292.63419)"
+         id="g64">
+        <path
+           id="path66"
+           style="fill:#c2c2c2;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 c -1.287,0 -2.33,1.043 -2.33,2.33 v 38.911 c 0,1.286 1.043,2.329 2.33,2.329 h 39.377 c 1.287,0 2.33,-1.043 2.33,-2.329 V 2.33 C 41.707,1.043 40.664,0 39.377,0 Z"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02089351,-0.02089351,0,8.8819599,292.22282)"
+         id="g68">
+        <path
+           id="path70"
+           style="fill:#cd3332;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 c -9.587,0 -17.358,7.771 -17.358,17.357 0,9.588 7.771,17.36 17.358,17.36 9.587,0 17.358,-7.772 17.358,-17.36 C 17.358,7.771 9.587,0 0,0"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02089351,-0.02089351,0,4.4506386,292.34857)"
+         id="g72">
+        <path
+           id="path74"
+           style="fill:#212121;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 c 0,3.323 2.694,6.019 6.019,6.019 3.325,0 6.019,-2.696 6.019,-6.019 v -21.94 c 0,-3.325 -2.694,-6.02 -6.019,-6.02 -3.325,0 -6.019,2.695 -6.019,6.02 z"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02089351,-0.02089351,0,5.5995372,292.34857)"
+         id="g76">
+        <path
+           id="path78"
+           style="fill:#212121;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 c 0,3.325 2.694,6.02 6.019,6.02 3.325,0 6.019,-2.695 6.019,-6.02 v -21.94 c 0,-3.325 -2.694,-6.02 -6.019,-6.02 -3.325,0 -6.019,2.695 -6.019,6.02 z"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02089351,-0.02089351,0,3.0229224,292.08875)"
+         id="g80">
+        <path
+           id="path82"
+           style="fill:#212121;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="M 0,0 V -24.058 H 28.893 V 0 H 52.95 V 28.893 H 28.893 V 52.949 H 0 V 28.893 H -24.057 V 0 Z"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02089351,-0.02089351,0,2.7211094,291.4072)"
+         id="g84">
+        <path
+           id="path86"
+           style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="M 0,0 V -6 H 6.933 V -8.563 L 15.379,0 6.933,8.563 V 6 H 0 Z"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02089351,-0.02089351,0,2.7211094,292.16662)"
+         id="g88">
+        <path
+           id="path90"
+           style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="M 0,0 V 6 H -6.932 V 8.563 L -15.378,0 -6.932,-8.563 V -6 H 0 Z"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02089351,-0.02089351,0,3.1008238,291.7915)"
+         id="g92">
+        <path
+           id="path94"
+           style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="M 0,0 H -6 V -6.932 H -8.564 L 0,-15.377 8.563,-6.932 H 5.999 V 0 Z"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02089351,-0.02089351,0,2.3413927,291.7915)"
+         id="g96">
+        <path
+           id="path98"
+           style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="M 0,0 H 5.999 V 6.932 H 8.563 L 0,15.379 -8.564,6.932 H -6 V 0 Z"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02089351,-0.02089351,0,2.8862161,291.7915)"
+         id="g100">
+        <path
+           id="path102"
+           style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 c -4.364,0 -7.902,3.539 -7.902,7.902 0,4.366 3.538,7.903 7.902,7.903 4.363,0 7.902,-3.537 7.902,-7.903 C 7.902,3.539 4.363,0 0,0"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02089351,-0.02089351,0,7.175263,290.8466)"
+         id="g104">
+        <path
+           id="path106"
+           style="fill:#cd3332;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 c 0.08,0.115 0.173,0.176 0.267,0.234 2.855,1.764 5.71,3.53 8.568,5.287 0.172,0.107 0.243,0.213 0.24,0.42 C 9.064,7.103 9.07,8.264 9.07,9.424 9.07,9.516 9.061,9.607 9.057,9.713 H -4.03 V 5.705 H 5.015 C 5.021,5.682 5.029,5.659 5.035,5.637 4.946,5.578 4.856,5.518 4.767,5.461 1.915,3.691 -0.936,1.919 -3.791,0.155 -3.982,0.037 -4.053,-0.09 -4.051,-0.316 -4.039,-1.448 -4.045,-2.58 -4.045,-3.713 V -4.008 H 9.049 V 0 Z"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02089351,-0.02089351,0,8.5241189,290.87865)"
+         id="g108">
+        <path
+           id="path110"
+           style="fill:#cd3332;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 c -0.848,0.033 -1.414,0.732 -1.385,1.563 0.03,0.85 0.614,1.467 1.462,1.501 0.611,0.025 1.227,0.004 1.839,0.004 V 3.073 C 2.481,3.073 3.048,3.086 3.613,3.07 4.539,3.044 5.123,2.465 5.154,1.569 5.184,0.696 4.636,0.03 3.731,-0.006 2.489,-0.055 1.242,-0.049 0,0 m 5.763,-0.004 c 0.4,0.733 0.716,1.44 0.775,2.236 C 6.595,3.02 6.481,3.772 6.142,4.488 5.799,5.211 5.303,5.807 4.667,6.286 3.091,7.476 0.943,7.616 -0.624,6.494 -3.002,4.792 -3.281,2.557 -2.06,0.008 c -0.148,-0.01 -0.293,-0.021 -0.432,-0.03 v -3.849 h 13.081 v 3.867 z"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02089351,-0.02089351,0,7.6522619,290.76894)"
+         id="g112">
+        <path
+           id="path114"
+           style="fill:#cd3332;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="M 0,0 C 1.673,1.627 1.79,4.392 0.265,6.199 0.203,6.273 0.145,6.352 0.038,6.486 h 0.88 v 3.858 H -7.753 V 6.501 c 0.128,-0.007 0.248,-0.019 0.368,-0.018 1.708,0.002 3.415,0.013 5.122,0.003 0.276,-0.002 0.575,-0.045 0.82,-0.158 0.777,-0.36 1.186,-1.329 0.972,-2.205 -0.203,-0.832 -0.886,-1.35 -1.787,-1.35 H -7.409 -7.74 v -3.868 c 0.048,-0.009 0.075,-0.018 0.102,-0.018 1.614,0 3.227,-0.019 4.839,0.008 1.06,0.017 2.02,0.348 2.799,1.105"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02089351,-0.02089351,0,8.3449716,290.81916)"
+         id="g116">
+        <path
+           id="path118"
+           style="fill:#cd3332;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="M 0,0 C 1.046,0.037 1.942,0.512 2.638,1.314 4.101,3.004 4.11,5.552 2.665,7.268 2.601,7.343 2.538,7.418 2.419,7.561 H 3.33 v 3.868 h -8.667 v -3.87 h 0.388 c 1.726,0.002 3.453,0.002 5.179,0.005 0.363,0 0.688,-0.097 0.978,-0.312 C 1.875,6.754 2.155,5.846 1.888,5.049 1.626,4.268 1.006,3.848 0.108,3.846 c -1.697,0 -3.395,0 -5.093,-10e-4 C -5.104,3.844 -5.222,3.83 -5.337,3.822 v -3.837 c 0.058,-0.01 0.094,-0.023 0.131,-0.023 C -3.471,-0.031 -1.733,-0.061 0,0"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02089351,-0.02089351,0,8.7863471,290.83871)"
+         id="g120">
+        <path
+           id="path122"
+           style="fill:#cd3332;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 v 0.029 c -0.745,0 -1.491,-0.033 -2.234,0.008 -0.991,0.057 -1.624,0.767 -1.587,1.701 0.029,0.736 0.595,1.336 1.404,1.474 0.222,0.038 0.449,0.056 0.675,0.056 1.161,0.005 2.32,0.005 3.48,-0.002 C 1.982,3.265 2.23,3.247 2.469,3.197 3.325,3.016 3.874,2.35 3.832,1.569 3.787,0.741 3.153,0.121 2.262,0.031 2.131,0.018 1.999,0.002 1.867,0.002 1.244,-0.002 0.622,0 0,0 M 3.417,-2.502 C 5.386,-0.238 5.358,3.506 3.357,5.771 1.523,7.85 -1.442,7.885 -3.313,5.84 -4.408,4.643 -4.882,3.205 -4.896,1.699 c 0.007,-1.582 0.424,-2.926 1.363,-4.086 1.87,-2.308 5.001,-2.357 6.95,-0.115"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02089351,-0.02089351,0,7.9732969,290.81294)"
+         id="g124">
+        <path
+           id="path126"
+           style="fill:#cd3332;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="M 0,0 C 0,0.669 0.012,1.338 -0.006,2.008 -0.012,2.264 0.073,2.342 0.319,2.314 0.627,2.277 0.943,2.295 1.246,2.236 2.02,2.086 2.555,1.415 2.55,0.645 2.545,-0.133 1.982,-0.811 1.196,-0.937 0.819,-0.998 0.433,-0.998 0,-1.029 Z M 1.818,-3.759 C 2.904,-2.672 3.463,-1.34 3.571,0.183 3.697,1.963 3.24,3.566 2.048,4.92 1.251,5.823 0.254,6.383 -0.967,6.467 -2.552,6.576 -3.83,5.939 -4.793,4.723 -6.229,2.906 -6.516,0.842 -5.858,-1.342 c 0.459,-1.523 1.379,-2.711 2.86,-3.398 0.113,-0.053 0.234,-0.086 0.355,-0.129 v 3.844 c -0.358,0.027 -0.697,0.033 -1.032,0.081 -0.823,0.117 -1.405,0.739 -1.433,1.506 -0.032,0.838 0.453,1.54 1.299,1.665 0.803,0.117 1.628,0.086 2.488,0.123 v -7.455 c 0.142,0 0.244,-0.01 0.344,0 1.094,0.111 2.025,0.574 2.795,1.346"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02089351,-0.02089351,0,7.8475264,290.72222)"
+         id="g128">
+        <path
+           id="path130"
+           style="fill:#cd3332;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 0,0 v 2.109 h 1.748 v 3.942 h -1.751 c 0,0.128 0.001,0.229 0,0.33 C -0.004,6.9 0.001,7.419 -0.014,7.937 -0.016,8.021 -0.101,8.17 -0.156,8.173 -0.52,8.193 -0.887,8.184 -1.283,8.184 V 6.035 H -9.981 V 2.102 h 8.706 V 0 Z"
+           inkscape:connector-curvature="0" />
+      </g>
+      <path
+         id="path132"
+         style="fill:#cd3332;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02089351"
+         d="m 7.3891019,290.93085 v -0.18126 h -0.081297 v 0.18126 z"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path134"
+         style="fill:#cd3332;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02089351"
+         d="m 7.3074291,290.65749 v 0.0545 h 0.081652 v -0.0545 z"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

resources/graphics/controllers/gamepad_playstation.svg

@@ -0,0 +1,295 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="42"
+   height="42"
+   viewBox="0 0 11.1125 11.1125"
+   version="1.1"
+   id="svg4925"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="gamepad_playstation.svg">
+  <defs
+     id="defs4919">
+    <clipPath
+       id="clipPath16"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path18"
+         d="M 0,428.623 H 265.712 V 0 H 0 Z" />
+    </clipPath>
+    <clipPath
+       id="clipPath16-6"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path18-4"
+         d="M 0,428.623 H 265.712 V 0 H 0 Z" />
+    </clipPath>
+    <clipPath
+       id="clipPath16-4"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path18-0"
+         d="M 0,428.623 H 265.712 V 0 H 0 Z" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="14.89669"
+     inkscape:cx="-5.2451591"
+     inkscape:cy="30.03994"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4922">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-285.88748)">
+    <g
+       id="g6486">
+      <path
+         inkscape:connector-curvature="0"
+         d="m 7.6061742,288.87228 c 0,-0.1636 0.13386,-0.29746 0.297458,-0.29746 h 0.484651 c 0.163598,0 0.297459,0.13386 0.297459,0.29746"
+         style="fill:#5a5a5a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02098775"
+         id="path22-3" />
+      <path
+         inkscape:connector-curvature="0"
+         d="m 2.376696,288.87771 c 0,-0.1636 0.13386,-0.29746 0.297459,-0.29746 h 0.48465 c 0.163599,0 0.297459,0.13386 0.297459,0.29746"
+         style="fill:#5a5a5a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02098775"
+         id="path26-0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path30-4"
+         d="m 2.9188254,288.73848 c -0.3626261,0 -0.616968,0.0767 -0.6457872,0.22565 -0.01881,0.097 -0.050224,0.30821 -0.078304,0.49129 -0.41776,0.24637 -0.6988306,0.69994 -0.6988306,1.22 0,0.0214 0.00244,0.0421 0.00334,0.0631 -0.162574,0.97662 -0.2776564,1.9435 -0.3645706,2.39876 -0.1552047,0.81336 1.2039422,1.49728 1.7192908,0.55737 0.2440554,-0.44511 0.4645608,-0.87975 0.6276849,-1.20611 0.1572849,0.27068 0.4470001,0.45466 0.7826057,0.45466 0.3725061,0 0.6916645,-0.22473 0.8318607,-0.54559 h 0.9038486 c 0.1406855,0.31961 0.458946,0.5435 0.8305979,0.5435 0.3414904,0 0.6363897,-0.19031 0.7914465,-0.46899 0.164161,0.32858 0.3886006,0.7719 0.6356832,1.22253 0.5153483,0.93993 1.8802687,0.25485 1.7192919,-0.55737 -0.088057,-0.44424 -0.2047877,-1.44363 -0.3708866,-2.43665 9.23e-5,-0.006 8.063e-4,-0.0131 8.063e-4,-0.0198 0,-0.53576 -0.2975275,-1.00202 -0.7362977,-1.24274 -0.026471,-0.17238 -0.057632,-0.38042 -0.075777,-0.47403 -0.028798,-0.14887 -0.2831807,-0.22565 -0.6457867,-0.22565 -0.3626265,0 -0.6169468,0.0768 -0.6457865,0.22565 -0.020408,0.10559 -0.053047,0.32285 -0.085459,0.53464 -0.043019,0.0282 -0.087115,0.055 -0.1267154,0.0876 H 5.8530383 c -0.010012,0.0164 -0.028546,0.0278 -0.049255,0.0278 H 5.2775555 c -0.020687,0 -0.03798,-0.0113 -0.047992,-0.0278 h -1.411553 c -0.054123,-0.045 -0.1129686,-0.0841 -0.1734445,-0.12082 -0.029054,-0.1895 -0.060403,-0.40239 -0.079566,-0.5014 -0.028798,-0.14887 -0.2836438,-0.22565 -0.6462072,-0.22565 z"
+         style="fill:#c6c7c9;fill-opacity:1;fill-rule:nonzero;stroke:#010101;stroke-width:0.12790291;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         inkscape:connector-curvature="0"
+         d="m 4.2437007,291.15143 c 0.05362,-0.14922 0.08292,-0.31007 0.08292,-0.47783 0,-0.78032 -0.632571,-1.41289 -1.412938,-1.41289 -0.780324,0 -1.412895,0.63257 -1.412895,1.41289 0,0.78037 0.632571,1.41294 1.412895,1.41294 0.160599,0 0.314942,-0.0269 0.458813,-0.0762 -4.82e-4,0.0124 -8.6e-4,0.0248 -8.6e-4,0.0373 0,0.49513 0.401391,0.89648 0.896492,0.89648 0.495143,0 0.896491,-0.40135 0.896491,-0.89648 0,-0.4951 -0.401348,-0.89649 -0.896491,-0.89649 -0.0082,0 -0.01631,1.3e-4 -0.02443,3.6e-4"
+         style="fill:#c6c7c9;fill-opacity:1;fill-rule:nonzero;stroke:#010101;stroke-width:0.05291667;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path70" />
+      <path
+         inkscape:connector-curvature="0"
+         d="m 4.9385613,292.03283 c 0,0.37663 -0.3054025,0.68198 -0.6820351,0.68198 -0.3766326,0 -0.6819521,-0.30535 -0.6819521,-0.68198 0,-0.37666 0.3053195,-0.68199 0.6819521,-0.68199 0.3766326,0 0.6820351,0.30533 0.6820351,0.68199"
+         style="fill:#878787;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02068842"
+         id="path78-7" />
+      <path
+         inkscape:connector-curvature="0"
+         d="m 4.8520898,292.03283 c 0,0.32888 -0.266653,0.59553 -0.5955575,0.59553 -0.3288837,0 -0.595475,-0.26665 -0.595475,-0.59553 0,-0.32891 0.2665913,-0.59553 0.595475,-0.59553 0.3289045,0 0.5955575,0.26662 0.5955575,0.59553"
+         style="fill:#5a5a5a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02068842"
+         id="path82-2" />
+      <path
+         inkscape:connector-curvature="0"
+         d="m 6.861339,291.15143 c -0.05362,-0.14922 -0.08292,-0.31007 -0.08292,-0.47783 0,-0.78032 0.6325711,-1.41289 1.4129381,-1.41289 0.780324,0 1.412895,0.63257 1.412895,1.41289 0,0.78037 -0.632571,1.41294 -1.412895,1.41294 -0.160599,0 -0.314942,-0.0269 -0.458813,-0.0762 4.816e-4,0.0124 8.599e-4,0.0248 8.599e-4,0.0373 0,0.49513 -0.401391,0.89648 -0.8964919,0.89648 -0.4951431,0 -0.8964909,-0.40135 -0.8964909,-0.89648 0,-0.4951 0.4013478,-0.89649 0.8964909,-0.89649 0.0082,0 0.016309,1.3e-4 0.024429,3.6e-4"
+         style="fill:#c6c7c9;fill-opacity:1;fill-rule:nonzero;stroke:#010101;stroke-width:0.05291667;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path70-5" />
+      <path
+         inkscape:connector-curvature="0"
+         d="m 7.8918798,289.64915 c -0.056376,0 -0.1021387,0.0457 -0.1021387,0.10218 v 0.53847 H 7.2501044 c -0.056417,0 -0.1010629,0.0457 -0.1010629,0.10221 v 0.57294 c 0,0.0564 0.044645,0.10218 0.1010629,0.10218 h 0.5396367 v 0.53846 c 0,0.0565 0.045763,0.10221 0.1021387,0.10221 h 0.5729657 c 0.056417,0 0.1010216,-0.0457 0.1010216,-0.10221 v -0.53846 h 0.5396366 c 0.056417,0 0.1010212,-0.0457 0.1010212,-0.10218 v -0.57294 c 0,-0.0564 -0.044605,-0.10221 -0.1010212,-0.10221 H 8.5658671 v -0.53847 c 0,-0.0564 -0.044605,-0.10218 -0.1010216,-0.10218 z"
+         style="fill:#aaaaaa;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02068842"
+         id="path86-4" />
+      <path
+         inkscape:connector-curvature="0"
+         d="m 4.5344502,290.69786 h 0.4095271 c 0.00492,0 0.00896,0.004 0.00896,0.009 v 0.22701 c 0,0.005 -0.00403,0.009 -0.00896,0.009 H 4.5344502 c -0.00496,0 -0.00894,-0.004 -0.00894,-0.009 v -0.22701 c 0,-0.005 0.00397,-0.009 0.00894,-0.009"
+         style="fill:#5a5a5a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02068842"
+         id="path90-2" />
+      <path
+         inkscape:connector-curvature="0"
+         d="m 5.3469963,291.51396 h 0.4094858 c 0.00497,0 0.00902,0.004 0.00902,0.009 v 0.22703 c 0,0.005 -0.00406,0.009 -0.00902,0.009 H 5.3469963 c -0.00496,0 -0.00898,-0.004 -0.00898,-0.009 v -0.22703 c 0,-0.005 0.00402,-0.009 0.00898,-0.009"
+         style="fill:#5a5a5a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02068842"
+         id="path94-2" />
+      <path
+         inkscape:connector-curvature="0"
+         d="m 6.4994054,290.82032 c 0,0.0533 -0.3121883,0.12245 -0.3121883,0.12245 -0.03455,0.009 -0.057617,-0.006 -0.057617,-0.0576 v -0.1297 c 0,-0.0514 0.025219,-0.0661 0.057617,-0.0576 0,0 0.3121883,0.0722 0.3121883,0.12246"
+         style="fill:#5a5a5a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02068842"
+         id="path102-0" />
+      <path
+         inkscape:connector-curvature="0"
+         d="m 8.4929293,290.03011 c 0,0.16709 -0.1354885,0.30257 -0.3025681,0.30257 -0.1670797,0 -0.3025681,-0.13548 -0.3025681,-0.30257 0,-0.16711 0.1354884,-0.30257 0.3025681,-0.30257 0.1670796,0 0.3025681,0.13546 0.3025681,0.30257"
+         style="fill:#5a5a5a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02068842"
+         id="path106-9" />
+      <path
+         inkscape:connector-curvature="0"
+         d="m 8.4929293,291.33164 c 0,0.16711 -0.1354885,0.30257 -0.3025681,0.30257 -0.1670797,0 -0.3025681,-0.13546 -0.3025681,-0.30257 0,-0.16711 0.1354884,-0.30256 0.3025681,-0.30256 0.1670796,0 0.3025681,0.13545 0.3025681,0.30256"
+         style="fill:#5a5a5a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02068842"
+         id="path110-5" />
+      <path
+         inkscape:connector-curvature="0"
+         d="m 8.5385472,290.68087 c 0,-0.16708 0.1354886,-0.30259 0.3025681,-0.30259 0.1671211,0 0.3025681,0.13551 0.3025681,0.30259 0,0.1671 -0.135447,0.30257 -0.3025681,0.30257 -0.1670795,0 -0.3025681,-0.13547 -0.3025681,-0.30257"
+         style="fill:#5a5a5a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02068842"
+         id="path114-0" />
+      <path
+         inkscape:connector-curvature="0"
+         d="m 7.2370366,290.68087 c 0,-0.16708 0.1354471,-0.30259 0.3025681,-0.30259 0.167121,0 0.3025681,0.13551 0.3025681,0.30259 0,0.1671 -0.1354471,0.30257 -0.3025681,0.30257 -0.167121,0 -0.3025681,-0.13547 -0.3025681,-0.30257"
+         style="fill:#5a5a5a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02068842"
+         id="path118-7" />
+      <path
+         inkscape:connector-curvature="0"
+         d="m 2.628972,289.63145 c -0.056455,0 -0.1021799,0.0457 -0.1021799,0.10219 v 0.53847 H 1.9871556 c -0.056455,0 -0.1010216,0.0457 -0.1010216,0.10218 v 0.57293 c 0,0.0565 0.044561,0.10218 0.1010216,0.10218 h 0.5396365 v 0.53846 c 0,0.0565 0.045718,0.10219 0.1021799,0.10219 h 0.5728832 c 0.056455,0 0.1010216,-0.0457 0.1010216,-0.10219 v -0.53846 h 0.5396365 c 0.056459,0 0.1010629,-0.0457 0.1010629,-0.10218 v -0.57293 c 0,-0.0565 -0.044605,-0.10218 -0.1010629,-0.10218 H 3.3028768 v -0.53847 c 0,-0.0565 -0.044562,-0.10219 -0.1010216,-0.10219 z"
+         style="fill:#aaaaaa;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02068842"
+         id="path122-8" />
+      <path
+         inkscape:connector-curvature="0"
+         d="m 7.512774,292.03283 c 0,0.37663 -0.3053611,0.68198 -0.6819936,0.68198 -0.3766327,0 -0.6819938,-0.30535 -0.6819938,-0.68198 0,-0.37666 0.3053611,-0.68199 0.6819938,-0.68199 0.3766325,0 0.6819936,0.30533 0.6819936,0.68199"
+         style="fill:#878787;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02068842"
+         id="path126-0" />
+      <path
+         inkscape:connector-curvature="0"
+         d="m 7.4263026,292.03283 c 0,0.32888 -0.2666116,0.59553 -0.5955161,0.59553 -0.3289251,0 -0.595516,-0.26665 -0.595516,-0.59553 0,-0.32891 0.2665909,-0.59553 0.595516,-0.59553 0.3289045,0 0.5955161,0.26662 0.5955161,0.59553"
+         style="fill:#5a5a5a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02068842"
+         id="path130-6" />
+      <path
+         inkscape:connector-curvature="0"
+         d="m 3.2572628,290.45458 c -0.012333,8.1e-4 -0.023649,0.007 -0.03103,0.0172 l -0.1285787,0.16305 c -0.011959,0.0155 -0.011959,0.0372 0,0.0528 l 0.128579,0.16424 c 0.00817,0.0108 0.020895,0.0172 0.034468,0.0172 l 0.2985335,8.1e-4 c 0.011584,1.1e-4 0.022696,-0.005 0.030949,-0.0127 0.00815,-0.008 0.012725,-0.0194 0.012644,-0.0309 v -0.32265 c 2.069e-4,-0.0237 -0.018745,-0.0432 -0.042476,-0.0436 l -0.2985132,-0.006 c -0.00155,-6e-5 -0.00301,-6e-5 -0.00456,0"
+         style="fill:#5a5a5a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02068842"
+         id="path150-6" />
+      <path
+         inkscape:connector-curvature="0"
+         d="m 2.5724426,290.45133 c 0.012285,8.1e-4 0.02356,0.007 0.030949,0.0172 l 0.1286193,0.16303 c 0.012,0.0155 0.012,0.0372 0,0.0528 l -0.1286193,0.16414 c -0.00815,0.0108 -0.020855,0.0172 -0.034428,0.0172 l -0.2984927,8.1e-4 c -0.011626,9e-5 -0.022737,-0.005 -0.030989,-0.0126 -0.00815,-0.008 -0.012725,-0.0194 -0.012644,-0.0309 v -0.32261 c -2.069e-4,-0.0238 0.018745,-0.0432 0.042476,-0.0436 l 0.298513,-0.006 c 0.00155,-7e-5 0.00309,-7e-5 0.00464,0"
+         style="fill:#5a5a5a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02068842"
+         id="path154-9" />
+      <path
+         inkscape:connector-curvature="0"
+         d="m 3.1210109,291.00316 c -0.00105,-0.0123 -0.00733,-0.0236 -0.017254,-0.0309 l -0.1630449,-0.1286 c -0.015561,-0.012 -0.037262,-0.012 -0.052821,0 l -0.1641626,0.1286 c -0.010802,0.008 -0.017172,0.0209 -0.017214,0.0345 l -0.00114,0.29852 c -4.07e-5,0.0116 0.00456,0.0227 0.012684,0.0309 0.00821,0.008 0.019364,0.0128 0.030973,0.0127 h 0.3226357 c 0.02369,1.9e-4 0.043152,-0.0188 0.043608,-0.0425 l 0.00579,-0.2985 c 4.16e-5,-0.002 4.16e-5,-0.003 0,-0.005"
+         style="fill:#5a5a5a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02068842"
+         id="path158-5" />
+      <path
+         inkscape:connector-curvature="0"
+         d="m 3.1242418,290.31833 c -0.00105,0.0123 -0.00733,0.0236 -0.017214,0.031 l -0.1630042,0.12856 c -0.0156,0.012 -0.037303,0.012 -0.052863,0 l -0.1641623,-0.12852 c -0.010843,-0.008 -0.017173,-0.021 -0.017214,-0.0345 l -0.00114,-0.29853 c -8.22e-5,-0.0116 0.00448,-0.0227 0.012684,-0.0309 0.00821,-0.008 0.019364,-0.0128 0.030973,-0.0127 h 0.3225942 c 0.023772,-1.6e-4 0.043201,0.0188 0.043649,0.0425 l 0.00571,0.29847 c 8.3e-5,0.002 8.3e-5,0.003 0,0.005"
+         style="fill:#5a5a5a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.02068842"
+         id="path162-7" />
+      <g
+         transform="matrix(0,-0.02098775,-0.02098775,0,5.714463,290.41875)"
+         id="g164-4">
+        <path
+           id="path166-6"
+           style="fill:#666666;fill-opacity:1;fill-rule:evenodd;stroke:none"
+           d="m 0,0 c -0.068,-0.422 -0.107,-0.654 -0.179,-0.977 -0.08,-0.369 -0.177,-0.736 -0.301,-1.093 -0.152,-0.436 -0.337,-0.852 -0.624,-1.217 -0.229,-0.291 -0.503,-0.516 -0.87,-0.625 -0.327,-0.1 -0.629,-0.041 -0.911,0.131 -0.326,0.197 -0.557,0.488 -0.763,0.801 -0.25,0.386 -0.429,0.806 -0.587,1.234 -0.011,0.037 -0.015,0.078 -0.026,0.117 -0.012,0.031 -0.003,0.063 0.008,0.096 0.113,0.377 0.23,0.75 0.348,1.129 0.187,0.599 0.375,1.199 0.557,1.797 0.107,0.347 0.218,0.693 0.324,1.039 0.009,0.031 0.014,0.072 0.056,0.084 0.033,-0.016 0.038,-0.047 0.047,-0.077 0.132,-0.382 0.268,-0.765 0.393,-1.148 0.09,-0.27 0.191,-0.537 0.334,-0.787 0.062,-0.117 0.139,-0.231 0.236,-0.324 0.027,-0.026 0.055,-0.049 0.088,-0.069 0.099,-0.054 0.197,-0.039 0.273,0.051 0.076,0.092 0.115,0.201 0.143,0.313 0.043,0.187 0.06,0.38 0.066,0.572 0.012,0.449 -0.042,0.889 -0.119,1.326 -0.027,0.148 -0.086,0.291 -0.135,0.432 -0.209,0.597 -0.401,1.201 -0.604,1.802 -0.015,0.043 -0.038,0.086 -0.038,0.135 0.051,0.215 0.124,0.424 0.19,0.635 0.203,0.66 0.409,1.322 0.613,1.982 0.128,0.412 0.257,0.871 0.382,1.284 0.01,0.025 0.02,-0.016 0.04,0 0.006,0 0.011,0.003 0.015,0 0.01,-0.006 0.009,0.007 0.012,0 C -0.895,8.238 -0.757,7.818 -0.63,7.408 -0.449,6.807 -0.285,6.201 -0.153,5.586 -0.077,5.236 -0.077,5.254 0.04,4.535 0.157,3.818 0.198,1.258 0,0"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02098775,-0.02098775,0,5.353533,290.53832)"
+         id="g168-9">
+        <path
+           id="path170-2"
+           style="fill:#666666;fill-opacity:1;fill-rule:evenodd;stroke:none"
+           d="M 0,0 C 0.034,0.686 0.183,1.504 0.295,2.252 0.381,2.818 0.473,3.387 0.598,3.947 0.709,4.453 0.838,4.955 1.065,5.424 1.14,5.58 1.231,5.727 1.342,5.865 1.573,6.148 1.869,6.254 2.232,6.215 2.827,6.156 3.277,5.844 3.65,5.402 3.93,5.068 4.138,4.693 4.301,4.289 4.335,4.201 4.384,4.115 4.394,4.016 4.394,3.922 4.354,3.838 4.327,3.752 4.12,3.104 3.918,2.461 3.712,1.814 3.555,1.324 3.402,0.836 3.245,0.348 3.234,0.314 3.223,0.207 3.194,0.184 c 0,0 -0.041,0.119 -0.051,0.15 C 3.062,0.561 2.98,0.789 2.897,1.018 2.842,1.176 2.793,1.342 2.701,1.488 2.667,1.545 2.626,1.6 2.572,1.646 2.38,1.82 2.149,1.781 1.972,1.578 1.786,1.363 1.703,1.102 1.675,0.82 1.637,0.467 1.724,0.137 1.841,-0.193 1.949,-0.5 2.049,-0.809 2.152,-1.119 2.249,-1.414 2.35,-1.709 2.45,-2.002 2.461,-2.033 2.478,-2.066 2.474,-2.104 2.399,-2.342 2.323,-2.578 2.249,-2.818 2.118,-3.221 1.989,-3.695 1.86,-4.102 c -0.009,-0.033 -0.014,0.022 -0.046,0 -0.413,-0.003 -0.829,-0.009 -1.245,0 -0.003,-0.002 -0.007,-0.005 -0.005,0 -0.045,-0.011 -0.055,-0.002 -0.097,0 -0.09,0.344 -0.203,0.985 -0.264,1.317 0,0 -0.241,1.617 -0.203,2.785"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02098775,-0.02098775,0,5.6617479,290.48109)"
+         id="g172-2">
+        <path
+           id="path174-4"
+           style="fill:#666666;fill-opacity:1;fill-rule:evenodd;stroke:none"
+           d="M 0,0 C -0.068,-0.145 -0.101,-0.303 -0.148,-0.453 -0.352,-1.102 -0.549,-1.75 -0.751,-2.398 -0.849,-2.717 -0.949,-3.033 -1.05,-3.35 c -0.08,-0.263 -0.16,-0.527 -0.24,-0.791 -0.041,0.112 -0.083,0.223 -0.125,0.332 -0.11,0.321 -0.225,0.643 -0.336,0.961 -0.183,0.522 -0.365,1.041 -0.547,1.561 -0.169,0.475 -0.338,0.945 -0.503,1.416 -0.192,0.545 -0.384,1.088 -0.575,1.631 -0.061,0.168 -0.129,0.334 -0.175,0.508 -0.011,0.05 0.014,0.097 0.026,0.144 0.135,0.422 0.269,0.842 0.401,1.264 0.257,0.795 0.506,1.662 0.758,2.455 0.01,0.033 0.016,-0.018 0.051,0 h 0.22 c 0.031,-0.012 0.032,0.025 0.043,0 0.16,-0.486 0.332,-1.022 0.493,-1.504 0.254,-0.74 0.506,-1.475 0.758,-2.211 C -0.629,1.906 -0.454,1.4 -0.28,0.891 -0.189,0.625 -0.099,0.355 -0.005,0.092 0.004,0.061 0.032,0.029 0,0"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02098775,-0.02098775,0,5.3481619,290.47124)"
+         id="g176-7">
+        <path
+           id="path178-7"
+           style="fill:#666666;fill-opacity:1;fill-rule:evenodd;stroke:none"
+           d="M 0,0 C 0.164,0.52 0.33,1.039 0.5,1.561 0.73,2.293 0.965,3.029 1.197,3.76 1.448,3.016 1.7,2.271 1.949,1.525 2.342,0.363 2.734,-0.799 3.125,-1.959 3.2,-2.184 3.277,-2.408 3.35,-2.635 3.36,-2.664 3.35,-2.697 3.341,-2.729 3.177,-3.252 3.014,-3.834 2.857,-4.357 c -0.017,-0.059 -0.044,-0.002 -0.104,0 -0.398,0 -0.792,-0.002 -1.187,0 -0.032,0.005 -0.043,-0.026 -0.051,0 C 1.351,-3.895 1.183,-3.381 1.019,-2.916 0.822,-2.367 0.624,-1.818 0.428,-1.275 0.286,-0.877 0.146,-0.488 0.006,-0.096 -0.005,-0.066 -0.023,-0.035 0,0"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02098775,-0.02098775,0,5.533076,290.52969)"
+         id="g180-5">
+        <path
+           id="path182-4"
+           style="fill:#666666;fill-opacity:1;fill-rule:evenodd;stroke:none"
+           d="m 0,0 c -0.411,-1.291 -0.823,-2.57 -1.235,-3.863 -0.079,0.185 -0.136,0.384 -0.208,0.58 -0.144,0.404 -0.285,0.812 -0.426,1.22 -0.189,0.538 -0.375,1.075 -0.56,1.612 -0.046,0.127 -0.092,0.324 -0.137,0.451 h 0.028 c 0.017,0.016 0.038,0 0.063,0 h 2.459 z"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02098775,-0.02098775,0,5.4396141,290.43855)"
+         id="g184-8">
+        <path
+           id="path186-1"
+           style="fill:#666666;fill-opacity:1;fill-rule:evenodd;stroke:none"
+           d="M 0,0 C 0.401,-0.002 0.798,0 1.201,0 1.239,-0.002 1.261,-0.047 1.276,0 1.392,0.391 1.514,0.824 1.637,1.217 1.691,1.385 1.74,1.555 1.792,1.723 1.896,1.428 1.999,1.131 2.1,0.832 2.198,0.553 2.292,0.281 2.39,0 2.396,-0.006 2.392,-0.002 2.384,0 2.369,-0.002 2.352,0 2.338,0 1.576,-0.002 0.818,0 0.057,0 0.037,0 0.019,-0.002 0,0 -0.004,0.004 -0.004,-0.002 0,0"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02098775,-0.02098775,0,5.614895,290.46632)"
+         id="g188-2">
+        <path
+           id="path190-8"
+           style="fill:#666666;fill-opacity:1;fill-rule:evenodd;stroke:none"
+           d="m 0,0 c -0.08,0.221 -0.157,0.439 -0.233,0.658 -0.372,1.088 -0.742,2.156 -1.117,3.24 h 0.059 2.45 0.049 C 1.055,3.406 0.902,2.928 0.751,2.436 0.619,2.014 0.488,1.592 0.358,1.174 0.236,0.781 0.117,0.391 0,0"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02098775,-0.02098775,0,5.3976379,290.48677)"
+         id="g192-9">
+        <path
+           id="path194-3"
+           style="fill:#666666;fill-opacity:1;fill-rule:evenodd;stroke:none"
+           d="M 0,0 C 0.084,-0.244 0.17,-0.486 0.251,-0.732 0.398,-1.162 0.537,-1.572 0.68,-2 c -0.25,-0.002 -0.502,0 -0.75,0 -0.194,-0.002 -0.383,-0.002 -0.573,0 0.124,0.393 0.248,0.766 0.373,1.158 0.089,0.28 0.178,0.565 0.27,0.842"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02098775,-0.02098775,0,5.4396141,290.5003)"
+         id="g196-6">
+        <path
+           id="path198-8"
+           style="fill:#666666;fill-opacity:1;fill-rule:evenodd;stroke:none"
+           d="M 0,0 C 0.443,0.004 0.887,0.004 1.328,0 1.795,0.006 2.264,-0.002 2.729,0 2.799,0 2.87,0.006 2.938,0 3.695,-0.004 4.449,0 5.205,0 5.248,-0.002 5.291,0.02 5.329,0 5.36,-0.004 5.392,0 5.421,0 9.187,-0.002 12.955,-0.018 16.72,-0.018 h 0.071 c 0.02,-0.003 0.028,-0.015 0.018,-0.035 -0.051,-0.189 -0.104,-0.375 -0.155,-0.562 -0.142,-0.531 -0.283,-1.063 -0.422,-1.594 -0.13,-0.484 -0.255,-0.975 -0.384,-1.459 -0.151,-0.572 -0.304,-1.143 -0.452,-1.713 -0.121,-0.463 -0.253,-0.922 -0.411,-1.369 -0.277,-0.781 -0.622,-1.531 -1.089,-2.217 -0.25,-0.369 -0.529,-0.713 -0.853,-1.017 -0.336,-0.323 -0.708,-0.594 -1.123,-0.819 -0.452,-0.244 -0.934,-0.406 -1.438,-0.513 -0.202,-0.043 -0.41,-0.065 -0.615,-0.09 -0.03,-0.012 -0.061,0.002 -0.091,-0.012 -0.036,0 -0.071,-0.002 -0.106,-0.004 -0.045,-0.012 -0.09,0.004 -0.135,-0.01 H 8.898 c -0.058,0.014 -0.117,-0.002 -0.175,0.01 -0.04,0.002 -0.082,0.004 -0.122,0.004 -0.038,0.016 -0.081,-0.002 -0.119,0.012 -0.029,0.002 -0.064,0.002 -0.093,0.004 -0.027,0.011 -0.061,-0.002 -0.089,0.007 -0.024,0.002 -0.044,0.004 -0.066,0.004 -0.025,0.014 -0.049,0 -0.078,0.012 -0.016,0 -0.034,0.002 -0.053,0.002 -0.021,0.016 -0.049,0 -0.073,0.014 -0.343,0.049 -0.684,0.105 -1.02,0.197 -0.449,0.127 -0.879,0.303 -1.266,0.568 -0.438,0.301 -0.773,0.69 -0.99,1.176 -0.139,0.322 -0.212,0.664 -0.247,1.014 -0.011,0.031 0.003,0.062 -0.009,0.092 -0.002,0.05 -0.004,0.097 -0.005,0.148 -0.009,0.094 -0.009,0.189 0,0.283 10e-4,0.049 0.003,0.1 0.005,0.151 0.012,0.039 -0.004,0.08 0.009,0.119 0.001,0.019 0.003,0.045 0.003,0.064 0.014,0.024 0,0.051 0.011,0.076 0.01,0.182 0.041,0.368 0.078,0.547 0.044,0.213 0.084,0.43 0.155,0.637 0.009,0.035 0.017,0.072 0.027,0.109 0.004,0.02 0.016,0.03 0.033,0.03 h 0.065 7.462 c 0.03,0 0.06,-0.008 0.089,0.004 0.243,0.023 0.406,0.164 0.52,0.367 0.072,0.133 0.117,0.281 0.129,0.435 0.007,0.075 0.007,0.149 0,0.223 -0.023,0.246 -0.098,0.463 -0.321,0.602 -0.057,0.037 -0.117,0.058 -0.183,0.058 -0.073,0.014 -0.145,0.004 -0.22,0.006 -0.212,0.004 -0.432,-0.006 -0.648,0.004 -0.27,0 -0.543,0.004 -0.812,0.006 L 2.85,-4.453 c -0.008,-0.004 -0.017,0 -0.026,0 -0.027,-0.004 -0.059,0 -0.086,0 H 0.36 0.269 c -0.478,-0.004 -0.959,-0.004 -1.435,0 -0.079,-0.004 -0.156,-0.004 -0.234,0 -0.603,-0.004 -1.2,0 -1.8,0 h -0.658 -0.08 -0.029 c 0.101,0.297 0.2,0.697 0.298,0.998 0.108,0.328 0.214,0.654 0.32,0.982 0.124,0.393 0.252,0.784 0.381,1.172 0.123,0.381 0.245,0.922 0.368,1.301 h 0.114 z"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02098775,-0.02098775,0,5.5388961,290.5889)"
+         id="g242-7">
+        <path
+           id="path244-2"
+           style="fill:none;stroke:#d1d2d4;stroke-width:0.55199999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+           d="M 0,0 H 7.379"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0,-0.02098775,-0.02098775,0,5.433916,290.5344)"
+         id="g246-4">
+        <path
+           id="path248-0"
+           style="fill:none;stroke:#d1d2d4;stroke-width:0.55199999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+           d="M 0,0 H 7.38"
+           inkscape:connector-curvature="0" />
+      </g>
+    </g>
+  </g>
+</svg>

resources/graphics/controllers/gamepad_xbox.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="42"
+   height="42"
+   viewBox="0 0 11.1125 11.1125"
+   version="1.1"
+   id="svg4925"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="unknown.svg">
+  <defs
+     id="defs4919" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="6.7728148"
+     inkscape:cx="-21.346482"
+     inkscape:cy="-0.76992782"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4922">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-285.88748)">
+    <g
+       aria-label="?"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.72348785px;line-height:1.25;font-family:Digitalt;-inkscape-font-specification:Digitalt;letter-spacing:0px;word-spacing:0px;fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="text4825"
+       transform="matrix(0.91316098,0,0,0.91316098,1.9388092,25.308702)">
+      <path
+         d="m 1.9437243,295.40006 q 0,-0.59882 0.013713,-1.25707 0.66739,-0.032 1.3530646,-0.032 0.6033936,0 1.5724804,0.032 0.073139,0 0.1279926,0.0548 0.054854,0.0549 0.054854,0.128 0.013713,0.74053 0.013713,1.40334 0,0.58968 -0.013713,1.24793 -0.4114048,0.0229 -0.9919426,0.0229 -0.8410942,0 -1.9336024,-0.0594 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.12799 -0.013713,-0.71768 -0.013713,-1.35764 z m -1.50391294,-9.11947 q 1.63190554,-0.39312 3.35523444,-0.39312 0.6811034,0 1.2205008,0.0777 0.5439685,0.0777 1.0147984,0.2697 0.475401,0.18741 0.7908113,0.48911 0.3154104,0.29713 0.4936858,0.76339 0.1828465,0.46625 0.1828465,1.07879 0,0.68567 -0.3016968,1.27078 -0.2971257,0.58511 -0.8182384,1.12908 -0.2422717,0.25142 -0.3656931,0.38855 -0.1234214,0.13713 -0.3199815,0.39769 -0.1919889,0.25599 -0.2925545,0.46169 -0.095994,0.2057 -0.1782754,0.50283 -0.07771,0.29255 -0.082281,0.60339 -0.5531109,0.0366 -1.3804916,0.0366 -0.8502365,0 -1.6913306,-0.0366 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.128 0,-0.53025 0.1325638,-0.99651 0.1325637,-0.46626 0.3428373,-0.79538 0.2102735,-0.32913 0.4662587,-0.61254 0.2559852,-0.28798 0.5119704,-0.5074 0.2559851,-0.22398 0.4662587,-0.41597 0.2102735,-0.19199 0.3428373,-0.38855 0.1325637,-0.19656 0.1325637,-0.38398 0,-0.5394 -0.754242,-0.5394 -0.612536,0 -1.5084841,0.31541 -0.891377,0.31084 -1.16564687,0.5074 z"
+         style="fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4827"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

resources/graphics/controllers/joycon_left_or_right_nintendo.svg

@@ -0,0 +1,314 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="42"
+   height="42"
+   viewBox="0 0 11.1125 11.1125"
+   version="1.1"
+   id="svg4925"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="joycon_left_or_right_nintendo.svg">
+  <defs
+     id="defs4919" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="17.595863"
+     inkscape:cx="-0.77044279"
+     inkscape:cy="30.632636"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4922">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-285.88748)">
+    <g
+       id="g4910"
+       transform="matrix(1.0578414,0,0,1.0578414,-0.32138125,-15.666888)">
+      <g
+         transform="translate(-3.8154512,-1.3888992e-6)"
+         id="g5517">
+        <path
+           style="fill:#5cc8e4;fill-opacity:1;stroke:#3a3a3a;stroke-width:0.10255391;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 11.490269,288.142 c -0.05711,3.7e-4 -0.0966,9.4e-4 -0.104504,0.003 -0.03504,0.006 -0.04397,0.0161 -0.03916,0.0432 l 0.0034,0.0207 -0.259024,0.003 c -0.283756,0.003 -0.330474,0.008 -0.443152,0.0433 -0.122296,0.0387 -0.231534,0.10257 -0.324974,0.19031 -0.121609,0.11354 -0.193036,0.23546 -0.234946,0.39997 -0.0089,0.0375 -0.01169,0.0974 -0.01513,0.34517 l -0.0041,0.30001 -0.05841,0.002 c -0.04122,0.002 -0.06183,0.005 -0.07007,0.0122 -0.01168,0.01 -0.01236,0.0394 -0.01236,0.44774 v 0.4374 l 0.01513,0.0135 c 0.01237,0.011 0.02404,0.013 0.07213,0.013 h 0.057 v 0.86126 0.86124 h -0.05429 c -0.04397,0 -0.05702,0.003 -0.07213,0.0135 l -0.01785,0.0129 v 0.43806 0.43806 l 0.01785,0.0129 c 0.01511,0.011 0.02816,0.0135 0.07213,0.0135 h 0.05363 l 0.0021,0.50192 0.0021,0.50131 0.02267,0.0774 c 0.07489,0.26257 0.287176,0.4761 0.548259,0.55158 0.03641,0.011 0.0687,0.0193 0.07213,0.0193 0.0034,0 0.0062,-0.0283 0.0062,-0.0632 0,-0.0529 0.0028,-0.0677 0.01583,-0.0917 0.02061,-0.0393 0.07625,-0.071 0.123656,-0.071 0.02748,0 0.03641,-0.003 0.05358,-0.0187 l 0.01991,-0.0187 v 0.14447 0.14518 l 0.493317,-0.003 c 0.467201,-0.003 0.496745,-0.003 0.569574,-0.0162 0.40674,-0.0723 0.737236,-0.27548 0.957782,-0.58773 0.11199,-0.15806 0.182748,-0.32644 0.221222,-0.52515 l 0.01513,-0.0787 v -2.04833 c 0,-1.64189 -0.0021,-2.05993 -0.0089,-2.10638 -0.01237,-0.082 -0.04051,-0.18966 -0.06731,-0.25998 -0.01305,-0.0329 -0.02337,-0.0625 -0.02337,-0.0658 0,-0.003 0.0076,-0.008 0.01649,-0.0103 0.0089,-0.002 0.02337,-0.0103 0.03162,-0.0187 l 0.01443,-0.0142 -0.01719,-0.0471 c -0.06665,-0.1787 -0.275496,-0.41094 -0.511158,-0.56772 -0.179322,-0.11934 -0.368952,-0.1987 -0.561328,-0.23548 -0.07764,-0.0148 -0.100333,-0.0162 -0.367601,-0.0187 -0.07832,-9.4e-4 -0.153053,-9.4e-4 -0.210165,-9.4e-4 z"
+           id="path6-2-9-6-7-2"
+           inkscape:connector-curvature="0" />
+        <path
+           style="fill:#3a3a3a;fill-opacity:1;stroke:#3a3a3a;stroke-width:0.10255391;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 10.941609,288.21703 c -0.0071,1.90972 0.0062,4.82211 -0.0036,6.23889 l -0.02015,0.0191 c -0.01717,0.0157 -0.02575,0.0186 -0.05323,0.0186 -0.04741,0 -0.103414,0.0315 -0.124023,0.0708 -0.01303,0.024 -0.0155,0.0391 -0.0155,0.092 0,0.0349 -0.0028,0.063 -0.0062,0.063 -0.0034,0 -0.03594,-0.008 -0.07235,-0.0191 -0.261084,-0.0755 -0.473397,-0.28933 -0.548287,-0.5519 l -0.02274,-0.0775 -0.0021,-0.50126 -0.0021,-0.50178 h -0.05374 c -0.043971,0 -0.056721,-0.002 -0.071831,-0.0134 l -0.018087,-0.0129 v -0.43822 -0.4377 l 0.018087,-0.0129 c 0.01511,-0.0105 0.02786,-0.0139 0.071831,-0.0139 h 0.05426 v -0.86093 -0.86144 h -0.05684 c -0.048091,0 -0.059461,-0.002 -0.07183,-0.0129 l -0.015502,-0.0134 v -0.43718 c 0,-0.40834 7.144e-4,-0.43803 0.012401,-0.44804 0.00824,-0.007 0.02906,-0.0104 0.070281,-0.0124 l 0.05839,-0.002 0.0041,-0.30024 c 0.0034,-0.24777 0.0061,-0.3077 0.01499,-0.3452 0.04191,-0.16451 0.113518,-0.28643 0.235127,-0.39997 0.09343,-0.0877 0.202741,-0.15146 0.325037,-0.19016 0.08324,-0.0261 0.160138,-0.0338 0.293522,-0.0382 z"
+           id="path6-2-9-6-7-0-4"
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="cccscsscccccscccccscccsccscccccccc" />
+      </g>
+      <circle
+         r="0.52860862"
+         cy="291.67377"
+         cx="8.1153326"
+         id="path4913-2"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10583334;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.40539873"
+         cy="291.67377"
+         cx="8.1153326"
+         id="path4913-7-8"
+         style="opacity:1;vector-effect:none;fill:#666666;fill-opacity:1;stroke:none;stroke-width:0.08116535;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.24365099"
+         cy="289.31393"
+         cx="8.1084871"
+         id="path4932-9"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10829458;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.24365099"
+         cy="290.31146"
+         cx="8.1084871"
+         id="path4932-9-3"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10829458;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.24365099"
+         cy="289.80917"
+         cx="8.6362085"
+         id="path4932-9-3-6"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10829458;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.24365099"
+         cy="289.80917"
+         cx="7.5882106"
+         id="path4932-9-3-6-8"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10829458;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.27285156"
+         cy="292.93457"
+         cx="7.7411723"
+         id="path5072"
+         style="opacity:1;vector-effect:none;fill:#7a7a7a;fill-opacity:1;stroke:none;stroke-width:0.10746154;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.20463867"
+         cy="292.93457"
+         cx="7.7411723"
+         id="path5072-0"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.08059616;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <g
+         transform="translate(0.07832299,-1.3888992e-6)"
+         id="g5361">
+        <rect
+           style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10772337;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="rect5091"
+           width="0.11885579"
+           height="0.36896971"
+           x="7.4061403"
+           y="288.6051" />
+        <rect
+           style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10772337;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="rect5091-2"
+           width="0.1188558"
+           height="0.36896974"
+           x="-288.84903"
+           y="7.2810831"
+           transform="rotate(-90)" />
+      </g>
+      <g
+         style="fill:#8e8e8e;fill-opacity:1"
+         transform="translate(-0.58238277,-1.3888992e-6)"
+         id="g5361-2">
+        <rect
+           style="opacity:1;vector-effect:none;fill:#8e8e8e;fill-opacity:1;stroke:none;stroke-width:0.10772337;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="rect5091-5"
+           width="0.11885579"
+           height="0.36896971"
+           x="7.4061403"
+           y="288.6051" />
+        <rect
+           style="opacity:1;vector-effect:none;fill:#8e8e8e;fill-opacity:1;stroke:none;stroke-width:0.10772337;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="rect5091-2-8"
+           width="0.1188558"
+           height="0.36896974"
+           x="-288.84903"
+           y="7.2810831"
+           transform="rotate(-90)" />
+      </g>
+    </g>
+    <g
+       id="g4874"
+       transform="matrix(1.0578414,0,0,1.0578414,-0.32138125,-18.048138)">
+      <g
+         transform="translate(-0.02566855,-1.3888992e-6)"
+         id="g5474">
+        <path
+           style="fill:#ef675b;fill-opacity:1;stroke:#3a3a3a;stroke-width:0.10255391;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 3.4633507,288.142 c 0.05711,3.7e-4 0.0966,9.4e-4 0.104504,0.003 0.03504,0.006 0.04397,0.0161 0.03916,0.0432 l -0.0034,0.0207 0.259024,0.003 c 0.283756,0.003 0.330474,0.008 0.443152,0.0433 0.122296,0.0387 0.231534,0.10257 0.324974,0.19031 0.121609,0.11354 0.193036,0.23546 0.234946,0.39997 0.0089,0.0375 0.01169,0.0974 0.01513,0.34517 l 0.0041,0.30001 0.05841,0.002 c 0.04122,0.002 0.06183,0.005 0.07007,0.0122 0.01168,0.01 0.01236,0.0394 0.01236,0.44774 v 0.4374 l -0.01513,0.0135 c -0.01237,0.011 -0.02404,0.013 -0.07213,0.013 h -0.057 v 0.86126 0.86124 h 0.05429 c 0.04397,0 0.05702,0.003 0.07213,0.0135 l 0.01785,0.0129 v 0.43806 0.43806 l -0.01785,0.0129 c -0.01511,0.011 -0.02816,0.0135 -0.07213,0.0135 h -0.05363 l -0.0021,0.50192 -0.0021,0.50131 -0.02267,0.0774 c -0.07489,0.26257 -0.287176,0.4761 -0.548259,0.55158 -0.03641,0.011 -0.0687,0.0193 -0.07213,0.0193 -0.0034,0 -0.0062,-0.0283 -0.0062,-0.0632 0,-0.0529 -0.0028,-0.0677 -0.01583,-0.0917 -0.02061,-0.0393 -0.07625,-0.071 -0.123656,-0.071 -0.02748,0 -0.03641,-0.003 -0.05358,-0.0187 l -0.01991,-0.0187 v 0.14447 0.14518 l -0.493317,-0.003 c -0.467201,-0.003 -0.496745,-0.003 -0.569574,-0.0162 -0.40674,-0.0723 -0.737236,-0.27548 -0.957782,-0.58773 -0.11199,-0.15806 -0.182748,-0.32644 -0.221222,-0.52515 l -0.01513,-0.0787 v -2.04833 c 0,-1.64189 0.0021,-2.05993 0.0089,-2.10638 0.01237,-0.082 0.04051,-0.18966 0.06731,-0.25998 0.01305,-0.0329 0.02337,-0.0625 0.02337,-0.0658 0,-0.003 -0.0076,-0.008 -0.01649,-0.0103 -0.0089,-0.002 -0.02337,-0.0103 -0.03162,-0.0187 l -0.01443,-0.0142 0.01719,-0.0471 c 0.06665,-0.1787 0.275496,-0.41094 0.511158,-0.56772 0.179322,-0.11934 0.368952,-0.1987 0.561328,-0.23548 0.07764,-0.0148 0.100333,-0.0162 0.367601,-0.0187 0.07832,-9.4e-4 0.153053,-9.4e-4 0.210165,-9.4e-4 z"
+           id="path6-2-9-6-7"
+           inkscape:connector-curvature="0" />
+        <path
+           style="fill:#3a3a3a;fill-opacity:1;stroke:#3a3a3a;stroke-width:0.10255391;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 4.0120111,288.21703 c 0.0071,1.90972 -0.0062,4.82211 0.00362,6.23889 l 0.020153,0.0191 c 0.017169,0.0157 0.025747,0.0186 0.053227,0.0186 0.047406,0 0.1034135,0.0315 0.1240234,0.0708 0.013031,0.024 0.015502,0.0391 0.015502,0.092 0,0.0349 0.0028,0.063 0.0062,0.063 0.00343,0 0.035937,-0.008 0.072347,-0.0191 0.2610831,-0.0755 0.473397,-0.28933 0.548287,-0.5519 l 0.022738,-0.0775 0.00206,-0.50126 0.00206,-0.50178 h 0.053743 c 0.04397,0 0.05672,-0.002 0.07183,-0.0134 l 0.018087,-0.0129 v -0.43822 -0.4377 l -0.018087,-0.0129 c -0.01511,-0.0105 -0.02786,-0.0139 -0.07183,-0.0139 h -0.05426 v -0.86093 -0.86144 h 0.056844 c 0.04809,0 0.059461,-0.002 0.07183,-0.0129 l 0.015502,-0.0134 v -0.43718 c 0,-0.40834 -7.144e-4,-0.43803 -0.012401,-0.44804 -0.00824,-0.007 -0.02906,-0.0104 -0.07028,-0.0124 l -0.058394,-0.002 -0.00414,-0.30024 c -0.00344,-0.24777 -0.00609,-0.3077 -0.014986,-0.3452 -0.04191,-0.16451 -0.1135187,-0.28643 -0.2351278,-0.39997 -0.093432,-0.0877 -0.202741,-0.15146 -0.3250367,-0.19016 -0.083235,-0.0261 -0.1601383,-0.0338 -0.2935221,-0.0382 z"
+           id="path6-2-9-6-7-0"
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="cccscsscccccscccccscccsccscccccccc" />
+      </g>
+      <circle
+         r="0.52860862"
+         cy="289.81152"
+         cx="2.9495108"
+         id="path4913"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10583334;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.40539873"
+         cy="289.81152"
+         cx="2.9495108"
+         id="path4913-7"
+         style="opacity:1;vector-effect:none;fill:#666666;fill-opacity:1;stroke:none;stroke-width:0.08116535;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.24365099"
+         cy="291.17242"
+         cx="2.95681"
+         id="path4932"
+         style="opacity:1;vector-effect:none;fill:#404040;fill-opacity:1;stroke:none;stroke-width:0.10829458;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.24365099"
+         cy="292.16913"
+         cx="2.95681"
+         id="path4932-5"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10829458;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.24365099"
+         cy="291.668"
+         cx="3.4801056"
+         id="path4932-5-4"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10829458;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.24365099"
+         cy="291.668"
+         cx="2.4279764"
+         id="path4932-5-4-8"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10829458;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <rect
+         y="292.72568"
+         x="3.1146293"
+         height="0.40977666"
+         width="0.40977666"
+         id="rect4981"
+         style="opacity:1;vector-effect:none;fill:#666666;fill-opacity:1;stroke:none;stroke-width:0.11866162;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <rect
+         y="288.72342"
+         x="3.3874006"
+         height="0.11767235"
+         width="0.36270773"
+         id="rect4985"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10989299;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.15931769"
+         cy="292.93057"
+         cx="3.3195176"
+         id="path5346"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10265833;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <rect
+         y="288.72342"
+         x="4.0690918"
+         height="0.11767235"
+         width="0.36270773"
+         id="rect4985-6"
+         style="opacity:1;vector-effect:none;fill:#8e8e8e;fill-opacity:1;stroke:none;stroke-width:0.10989299;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <path
+         inkscape:transform-center-y="-0.036071626"
+         d="m 2.95681,291.04147 0.1249556,0.21643 -0.2499112,0 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="-0.52359878"
+         sodipodi:arg1="-1.5707963"
+         sodipodi:r2="0.072143152"
+         sodipodi:r1="0.1442863"
+         sodipodi:cy="291.18576"
+         sodipodi:cx="2.95681"
+         sodipodi:sides="3"
+         id="path5401"
+         style="opacity:1;vector-effect:none;fill:#282828;fill-opacity:1;stroke:none;stroke-width:0.08117354;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         sodipodi:type="star" />
+      <path
+         transform="scale(1,-1)"
+         inkscape:transform-center-y="0.03607122"
+         d="m 2.95681,-292.29272 0.1249556,0.21643 -0.2499112,0 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="-0.52359878"
+         sodipodi:arg1="-1.5707963"
+         sodipodi:r2="0.07214316"
+         sodipodi:r1="0.1442863"
+         sodipodi:cy="-292.14844"
+         sodipodi:cx="2.95681"
+         sodipodi:sides="3"
+         id="path5401-2"
+         style="opacity:1;vector-effect:none;fill:#282828;fill-opacity:1;stroke:none;stroke-width:0.08117354;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         sodipodi:type="star" />
+      <path
+         inkscape:transform-center-x="-0.036068174"
+         transform="rotate(90,2.6363911,291.97629)"
+         inkscape:transform-center-y="-3.4871622e-06"
+         d="m 2.3320532,291.00348 0.1249556,0.21643 -0.2499112,0 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="-0.52359878"
+         sodipodi:arg1="-1.5707963"
+         sodipodi:r2="0.07214316"
+         sodipodi:r1="0.1442863"
+         sodipodi:cy="291.14777"
+         sodipodi:cx="2.3320532"
+         sodipodi:sides="3"
+         id="path5401-8"
+         style="opacity:1;vector-effect:none;fill:#282828;fill-opacity:1;stroke:none;stroke-width:0.08117354;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         sodipodi:type="star" />
+      <path
+         inkscape:transform-center-x="0.036067872"
+         transform="matrix(0,1,1,0,294.55714,289.3399)"
+         d="m 2.3320532,-292.25473 0.1249556,0.21643 -0.2499112,0 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="-0.52359878"
+         sodipodi:arg1="-1.5707963"
+         sodipodi:r2="0.07214316"
+         sodipodi:r1="0.1442863"
+         sodipodi:cy="-292.11044"
+         sodipodi:cx="2.3320532"
+         sodipodi:sides="3"
+         id="path5401-2-4"
+         style="opacity:1;vector-effect:none;fill:#282828;fill-opacity:1;stroke:none;stroke-width:0.08117354;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         sodipodi:type="star" />
+    </g>
+  </g>
+</svg>

resources/graphics/controllers/joycon_pair_nintendo.svg

@@ -0,0 +1,322 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="42"
+   height="42"
+   viewBox="0 0 11.1125 11.1125"
+   version="1.1"
+   id="svg4925"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="joycon_pair_nintendo.svg">
+  <defs
+     id="defs4919">
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="0 : 5.55625 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="11.1125 : 5.55625 : 1"
+       inkscape:persp3d-origin="5.55625 : 3.7041667 : 1"
+       id="perspective4841" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="14.109375"
+     inkscape:cx="3.8930481"
+     inkscape:cy="14.965158"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4922">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-285.88748)">
+    <g
+       id="g4910"
+       transform="matrix(1.0578414,0,0,1.0578414,-0.32138125,-16.857513)">
+      <g
+         transform="translate(-3.8154512,-1.3888992e-6)"
+         id="g5517">
+        <path
+           style="fill:#5cc8e4;fill-opacity:1;stroke:#3a3a3a;stroke-width:0.10255391;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 11.490269,288.142 c -0.05711,3.7e-4 -0.0966,9.4e-4 -0.104504,0.003 -0.03504,0.006 -0.04397,0.0161 -0.03916,0.0432 l 0.0034,0.0207 -0.259024,0.003 c -0.283756,0.003 -0.330474,0.008 -0.443152,0.0433 -0.122296,0.0387 -0.231534,0.10257 -0.324974,0.19031 -0.121609,0.11354 -0.193036,0.23546 -0.234946,0.39997 -0.0089,0.0375 -0.01169,0.0974 -0.01513,0.34517 l -0.0041,0.30001 -0.05841,0.002 c -0.04122,0.002 -0.06183,0.005 -0.07007,0.0122 -0.01168,0.01 -0.01236,0.0394 -0.01236,0.44774 v 0.4374 l 0.01513,0.0135 c 0.01237,0.011 0.02404,0.013 0.07213,0.013 h 0.057 v 0.86126 0.86124 h -0.05429 c -0.04397,0 -0.05702,0.003 -0.07213,0.0135 l -0.01785,0.0129 v 0.43806 0.43806 l 0.01785,0.0129 c 0.01511,0.011 0.02816,0.0135 0.07213,0.0135 h 0.05363 l 0.0021,0.50192 0.0021,0.50131 0.02267,0.0774 c 0.07489,0.26257 0.287176,0.4761 0.548259,0.55158 0.03641,0.011 0.0687,0.0193 0.07213,0.0193 0.0034,0 0.0062,-0.0283 0.0062,-0.0632 0,-0.0529 0.0028,-0.0677 0.01583,-0.0917 0.02061,-0.0393 0.07625,-0.071 0.123656,-0.071 0.02748,0 0.03641,-0.003 0.05358,-0.0187 l 0.01991,-0.0187 v 0.14447 0.14518 l 0.493317,-0.003 c 0.467201,-0.003 0.496745,-0.003 0.569574,-0.0162 0.40674,-0.0723 0.737236,-0.27548 0.957782,-0.58773 0.11199,-0.15806 0.182748,-0.32644 0.221222,-0.52515 l 0.01513,-0.0787 v -2.04833 c 0,-1.64189 -0.0021,-2.05993 -0.0089,-2.10638 -0.01237,-0.082 -0.04051,-0.18966 -0.06731,-0.25998 -0.01305,-0.0329 -0.02337,-0.0625 -0.02337,-0.0658 0,-0.003 0.0076,-0.008 0.01649,-0.0103 0.0089,-0.002 0.02337,-0.0103 0.03162,-0.0187 l 0.01443,-0.0142 -0.01719,-0.0471 c -0.06665,-0.1787 -0.275496,-0.41094 -0.511158,-0.56772 -0.179322,-0.11934 -0.368952,-0.1987 -0.561328,-0.23548 -0.07764,-0.0148 -0.100333,-0.0162 -0.367601,-0.0187 -0.07832,-9.4e-4 -0.153053,-9.4e-4 -0.210165,-9.4e-4 z"
+           id="path6-2-9-6-7-2"
+           inkscape:connector-curvature="0" />
+        <path
+           style="fill:#3a3a3a;fill-opacity:1;stroke:#3a3a3a;stroke-width:0.10255391;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 10.941609,288.21703 c -0.0071,1.90972 0.0062,4.82211 -0.0036,6.23889 l -0.02015,0.0191 c -0.01717,0.0157 -0.02575,0.0186 -0.05323,0.0186 -0.04741,0 -0.103414,0.0315 -0.124023,0.0708 -0.01303,0.024 -0.0155,0.0391 -0.0155,0.092 0,0.0349 -0.0028,0.063 -0.0062,0.063 -0.0034,0 -0.03594,-0.008 -0.07235,-0.0191 -0.261084,-0.0755 -0.473397,-0.28933 -0.548287,-0.5519 l -0.02274,-0.0775 -0.0021,-0.50126 -0.0021,-0.50178 h -0.05374 c -0.043971,0 -0.056721,-0.002 -0.071831,-0.0134 l -0.018087,-0.0129 v -0.43822 -0.4377 l 0.018087,-0.0129 c 0.01511,-0.0105 0.02786,-0.0139 0.071831,-0.0139 h 0.05426 v -0.86093 -0.86144 h -0.05684 c -0.048091,0 -0.059461,-0.002 -0.07183,-0.0129 l -0.015502,-0.0134 v -0.43718 c 0,-0.40834 7.144e-4,-0.43803 0.012401,-0.44804 0.00824,-0.007 0.02906,-0.0104 0.070281,-0.0124 l 0.05839,-0.002 0.0041,-0.30024 c 0.0034,-0.24777 0.0061,-0.3077 0.01499,-0.3452 0.04191,-0.16451 0.113518,-0.28643 0.235127,-0.39997 0.09343,-0.0877 0.202741,-0.15146 0.325037,-0.19016 0.08324,-0.0261 0.160138,-0.0338 0.293522,-0.0382 z"
+           id="path6-2-9-6-7-0-4"
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="cccscsscccccscccccscccsccscccccccc" />
+      </g>
+      <circle
+         r="0.52860862"
+         cy="291.67377"
+         cx="8.1153326"
+         id="path4913-2"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10583334;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.40539873"
+         cy="291.67377"
+         cx="8.1153326"
+         id="path4913-7-8"
+         style="opacity:1;vector-effect:none;fill:#666666;fill-opacity:1;stroke:none;stroke-width:0.08116535;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.24365099"
+         cy="289.31393"
+         cx="8.1084871"
+         id="path4932-9"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10829458;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.24365099"
+         cy="290.31146"
+         cx="8.1084871"
+         id="path4932-9-3"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10829458;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.24365099"
+         cy="289.80917"
+         cx="8.6362085"
+         id="path4932-9-3-6"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10829458;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.24365099"
+         cy="289.80917"
+         cx="7.5882106"
+         id="path4932-9-3-6-8"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10829458;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.27285156"
+         cy="292.93457"
+         cx="7.7411723"
+         id="path5072"
+         style="opacity:1;vector-effect:none;fill:#7a7a7a;fill-opacity:1;stroke:none;stroke-width:0.10746154;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.20463867"
+         cy="292.93457"
+         cx="7.7411723"
+         id="path5072-0"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.08059616;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <g
+         transform="translate(0.07832299,-1.3888992e-6)"
+         id="g5361">
+        <rect
+           style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10772337;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="rect5091"
+           width="0.11885579"
+           height="0.36896971"
+           x="7.4061403"
+           y="288.6051" />
+        <rect
+           style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10772337;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="rect5091-2"
+           width="0.1188558"
+           height="0.36896974"
+           x="-288.84903"
+           y="7.2810831"
+           transform="rotate(-90)" />
+      </g>
+      <g
+         style="fill:#8e8e8e;fill-opacity:1"
+         transform="translate(-0.58238277,-1.3888992e-6)"
+         id="g5361-2">
+        <rect
+           style="opacity:1;vector-effect:none;fill:#8e8e8e;fill-opacity:1;stroke:none;stroke-width:0.10772337;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="rect5091-5"
+           width="0.11885579"
+           height="0.36896971"
+           x="7.4061403"
+           y="288.6051" />
+        <rect
+           style="opacity:1;vector-effect:none;fill:#8e8e8e;fill-opacity:1;stroke:none;stroke-width:0.10772337;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="rect5091-2-8"
+           width="0.1188558"
+           height="0.36896974"
+           x="-288.84903"
+           y="7.2810831"
+           transform="rotate(-90)" />
+      </g>
+    </g>
+    <g
+       id="g4874"
+       transform="matrix(1.0578414,0,0,1.0578414,-0.32138125,-16.857513)">
+      <g
+         transform="translate(-0.02566855,-1.3888992e-6)"
+         id="g5474">
+        <path
+           style="fill:#ef675b;fill-opacity:1;stroke:#3a3a3a;stroke-width:0.10255391;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 3.4633507,288.142 c 0.05711,3.7e-4 0.0966,9.4e-4 0.104504,0.003 0.03504,0.006 0.04397,0.0161 0.03916,0.0432 l -0.0034,0.0207 0.259024,0.003 c 0.283756,0.003 0.330474,0.008 0.443152,0.0433 0.122296,0.0387 0.231534,0.10257 0.324974,0.19031 0.121609,0.11354 0.193036,0.23546 0.234946,0.39997 0.0089,0.0375 0.01169,0.0974 0.01513,0.34517 l 0.0041,0.30001 0.05841,0.002 c 0.04122,0.002 0.06183,0.005 0.07007,0.0122 0.01168,0.01 0.01236,0.0394 0.01236,0.44774 v 0.4374 l -0.01513,0.0135 c -0.01237,0.011 -0.02404,0.013 -0.07213,0.013 h -0.057 v 0.86126 0.86124 h 0.05429 c 0.04397,0 0.05702,0.003 0.07213,0.0135 l 0.01785,0.0129 v 0.43806 0.43806 l -0.01785,0.0129 c -0.01511,0.011 -0.02816,0.0135 -0.07213,0.0135 h -0.05363 l -0.0021,0.50192 -0.0021,0.50131 -0.02267,0.0774 c -0.07489,0.26257 -0.287176,0.4761 -0.548259,0.55158 -0.03641,0.011 -0.0687,0.0193 -0.07213,0.0193 -0.0034,0 -0.0062,-0.0283 -0.0062,-0.0632 0,-0.0529 -0.0028,-0.0677 -0.01583,-0.0917 -0.02061,-0.0393 -0.07625,-0.071 -0.123656,-0.071 -0.02748,0 -0.03641,-0.003 -0.05358,-0.0187 l -0.01991,-0.0187 v 0.14447 0.14518 l -0.493317,-0.003 c -0.467201,-0.003 -0.496745,-0.003 -0.569574,-0.0162 -0.40674,-0.0723 -0.737236,-0.27548 -0.957782,-0.58773 -0.11199,-0.15806 -0.182748,-0.32644 -0.221222,-0.52515 l -0.01513,-0.0787 v -2.04833 c 0,-1.64189 0.0021,-2.05993 0.0089,-2.10638 0.01237,-0.082 0.04051,-0.18966 0.06731,-0.25998 0.01305,-0.0329 0.02337,-0.0625 0.02337,-0.0658 0,-0.003 -0.0076,-0.008 -0.01649,-0.0103 -0.0089,-0.002 -0.02337,-0.0103 -0.03162,-0.0187 l -0.01443,-0.0142 0.01719,-0.0471 c 0.06665,-0.1787 0.275496,-0.41094 0.511158,-0.56772 0.179322,-0.11934 0.368952,-0.1987 0.561328,-0.23548 0.07764,-0.0148 0.100333,-0.0162 0.367601,-0.0187 0.07832,-9.4e-4 0.153053,-9.4e-4 0.210165,-9.4e-4 z"
+           id="path6-2-9-6-7"
+           inkscape:connector-curvature="0" />
+        <path
+           style="fill:#3a3a3a;fill-opacity:1;stroke:#3a3a3a;stroke-width:0.10255391;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 4.0120111,288.21703 c 0.0071,1.90972 -0.0062,4.82211 0.00362,6.23889 l 0.020153,0.0191 c 0.017169,0.0157 0.025747,0.0186 0.053227,0.0186 0.047406,0 0.1034135,0.0315 0.1240234,0.0708 0.013031,0.024 0.015502,0.0391 0.015502,0.092 0,0.0349 0.0028,0.063 0.0062,0.063 0.00343,0 0.035937,-0.008 0.072347,-0.0191 0.2610831,-0.0755 0.473397,-0.28933 0.548287,-0.5519 l 0.022738,-0.0775 0.00206,-0.50126 0.00206,-0.50178 h 0.053743 c 0.04397,0 0.05672,-0.002 0.07183,-0.0134 l 0.018087,-0.0129 v -0.43822 -0.4377 l -0.018087,-0.0129 c -0.01511,-0.0105 -0.02786,-0.0139 -0.07183,-0.0139 h -0.05426 v -0.86093 -0.86144 h 0.056844 c 0.04809,0 0.059461,-0.002 0.07183,-0.0129 l 0.015502,-0.0134 v -0.43718 c 0,-0.40834 -7.144e-4,-0.43803 -0.012401,-0.44804 -0.00824,-0.007 -0.02906,-0.0104 -0.07028,-0.0124 l -0.058394,-0.002 -0.00414,-0.30024 c -0.00344,-0.24777 -0.00609,-0.3077 -0.014986,-0.3452 -0.04191,-0.16451 -0.1135187,-0.28643 -0.2351278,-0.39997 -0.093432,-0.0877 -0.202741,-0.15146 -0.3250367,-0.19016 -0.083235,-0.0261 -0.1601383,-0.0338 -0.2935221,-0.0382 z"
+           id="path6-2-9-6-7-0"
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="cccscsscccccscccccscccsccscccccccc" />
+      </g>
+      <circle
+         r="0.52860862"
+         cy="289.81152"
+         cx="2.9495108"
+         id="path4913"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10583334;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.40539873"
+         cy="289.81152"
+         cx="2.9495108"
+         id="path4913-7"
+         style="opacity:1;vector-effect:none;fill:#666666;fill-opacity:1;stroke:none;stroke-width:0.08116535;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.24365099"
+         cy="291.17242"
+         cx="2.95681"
+         id="path4932"
+         style="opacity:1;vector-effect:none;fill:#404040;fill-opacity:1;stroke:none;stroke-width:0.10829458;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.24365099"
+         cy="292.16913"
+         cx="2.95681"
+         id="path4932-5"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10829458;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.24365099"
+         cy="291.668"
+         cx="3.4801056"
+         id="path4932-5-4"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10829458;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.24365099"
+         cy="291.668"
+         cx="2.4279764"
+         id="path4932-5-4-8"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10829458;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <rect
+         y="292.72568"
+         x="3.1146293"
+         height="0.40977666"
+         width="0.40977666"
+         id="rect4981"
+         style="opacity:1;vector-effect:none;fill:#666666;fill-opacity:1;stroke:none;stroke-width:0.11866162;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <rect
+         y="288.72342"
+         x="3.3874006"
+         height="0.11767235"
+         width="0.36270773"
+         id="rect4985"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10989299;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="0.15931769"
+         cy="292.93057"
+         cx="3.3195176"
+         id="path5346"
+         style="opacity:1;vector-effect:none;fill:#3a3a3a;fill-opacity:1;stroke:none;stroke-width:0.10265833;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <rect
+         y="288.72342"
+         x="4.0690918"
+         height="0.11767235"
+         width="0.36270773"
+         id="rect4985-6"
+         style="opacity:1;vector-effect:none;fill:#8e8e8e;fill-opacity:1;stroke:none;stroke-width:0.10989299;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <path
+         inkscape:transform-center-y="-0.036071626"
+         d="m 2.95681,291.04147 0.1249556,0.21643 -0.2499112,0 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="-0.52359878"
+         sodipodi:arg1="-1.5707963"
+         sodipodi:r2="0.072143152"
+         sodipodi:r1="0.1442863"
+         sodipodi:cy="291.18576"
+         sodipodi:cx="2.95681"
+         sodipodi:sides="3"
+         id="path5401"
+         style="opacity:1;vector-effect:none;fill:#282828;fill-opacity:1;stroke:none;stroke-width:0.08117354;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         sodipodi:type="star" />
+      <path
+         transform="scale(1,-1)"
+         inkscape:transform-center-y="0.03607122"
+         d="m 2.95681,-292.29272 0.1249556,0.21643 -0.2499112,0 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="-0.52359878"
+         sodipodi:arg1="-1.5707963"
+         sodipodi:r2="0.07214316"
+         sodipodi:r1="0.1442863"
+         sodipodi:cy="-292.14844"
+         sodipodi:cx="2.95681"
+         sodipodi:sides="3"
+         id="path5401-2"
+         style="opacity:1;vector-effect:none;fill:#282828;fill-opacity:1;stroke:none;stroke-width:0.08117354;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         sodipodi:type="star" />
+      <path
+         inkscape:transform-center-x="-0.036068174"
+         transform="rotate(90,2.6363911,291.97629)"
+         inkscape:transform-center-y="-3.4871622e-06"
+         d="m 2.3320532,291.00348 0.1249556,0.21643 -0.2499112,0 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="-0.52359878"
+         sodipodi:arg1="-1.5707963"
+         sodipodi:r2="0.07214316"
+         sodipodi:r1="0.1442863"
+         sodipodi:cy="291.14777"
+         sodipodi:cx="2.3320532"
+         sodipodi:sides="3"
+         id="path5401-8"
+         style="opacity:1;vector-effect:none;fill:#282828;fill-opacity:1;stroke:none;stroke-width:0.08117354;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         sodipodi:type="star" />
+      <path
+         inkscape:transform-center-x="0.036067872"
+         transform="matrix(0,1,1,0,294.55714,289.3399)"
+         d="m 2.3320532,-292.25473 0.1249556,0.21643 -0.2499112,0 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="-0.52359878"
+         sodipodi:arg1="-1.5707963"
+         sodipodi:r2="0.07214316"
+         sodipodi:r1="0.1442863"
+         sodipodi:cy="-292.11044"
+         sodipodi:cx="2.3320532"
+         sodipodi:sides="3"
+         id="path5401-2-4"
+         style="opacity:1;vector-effect:none;fill:#282828;fill-opacity:1;stroke:none;stroke-width:0.08117354;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         sodipodi:type="star" />
+    </g>
+  </g>
+</svg>

resources/graphics/controllers/joystick_arcade_2_buttons.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="42"
+   height="42"
+   viewBox="0 0 11.1125 11.1125"
+   version="1.1"
+   id="svg4925"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="unknown.svg">
+  <defs
+     id="defs4919" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="6.7728148"
+     inkscape:cx="-21.346482"
+     inkscape:cy="-0.76992782"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4922">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-285.88748)">
+    <g
+       aria-label="?"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.72348785px;line-height:1.25;font-family:Digitalt;-inkscape-font-specification:Digitalt;letter-spacing:0px;word-spacing:0px;fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="text4825"
+       transform="matrix(0.91316098,0,0,0.91316098,1.9388092,25.308702)">
+      <path
+         d="m 1.9437243,295.40006 q 0,-0.59882 0.013713,-1.25707 0.66739,-0.032 1.3530646,-0.032 0.6033936,0 1.5724804,0.032 0.073139,0 0.1279926,0.0548 0.054854,0.0549 0.054854,0.128 0.013713,0.74053 0.013713,1.40334 0,0.58968 -0.013713,1.24793 -0.4114048,0.0229 -0.9919426,0.0229 -0.8410942,0 -1.9336024,-0.0594 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.12799 -0.013713,-0.71768 -0.013713,-1.35764 z m -1.50391294,-9.11947 q 1.63190554,-0.39312 3.35523444,-0.39312 0.6811034,0 1.2205008,0.0777 0.5439685,0.0777 1.0147984,0.2697 0.475401,0.18741 0.7908113,0.48911 0.3154104,0.29713 0.4936858,0.76339 0.1828465,0.46625 0.1828465,1.07879 0,0.68567 -0.3016968,1.27078 -0.2971257,0.58511 -0.8182384,1.12908 -0.2422717,0.25142 -0.3656931,0.38855 -0.1234214,0.13713 -0.3199815,0.39769 -0.1919889,0.25599 -0.2925545,0.46169 -0.095994,0.2057 -0.1782754,0.50283 -0.07771,0.29255 -0.082281,0.60339 -0.5531109,0.0366 -1.3804916,0.0366 -0.8502365,0 -1.6913306,-0.0366 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.128 0,-0.53025 0.1325638,-0.99651 0.1325637,-0.46626 0.3428373,-0.79538 0.2102735,-0.32913 0.4662587,-0.61254 0.2559852,-0.28798 0.5119704,-0.5074 0.2559851,-0.22398 0.4662587,-0.41597 0.2102735,-0.19199 0.3428373,-0.38855 0.1325637,-0.19656 0.1325637,-0.38398 0,-0.5394 -0.754242,-0.5394 -0.612536,0 -1.5084841,0.31541 -0.891377,0.31084 -1.16564687,0.5074 z"
+         style="fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4827"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

resources/graphics/controllers/joystick_arcade_3_buttons.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="42"
+   height="42"
+   viewBox="0 0 11.1125 11.1125"
+   version="1.1"
+   id="svg4925"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="unknown.svg">
+  <defs
+     id="defs4919" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="6.7728148"
+     inkscape:cx="-21.346482"
+     inkscape:cy="-0.76992782"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4922">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-285.88748)">
+    <g
+       aria-label="?"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.72348785px;line-height:1.25;font-family:Digitalt;-inkscape-font-specification:Digitalt;letter-spacing:0px;word-spacing:0px;fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="text4825"
+       transform="matrix(0.91316098,0,0,0.91316098,1.9388092,25.308702)">
+      <path
+         d="m 1.9437243,295.40006 q 0,-0.59882 0.013713,-1.25707 0.66739,-0.032 1.3530646,-0.032 0.6033936,0 1.5724804,0.032 0.073139,0 0.1279926,0.0548 0.054854,0.0549 0.054854,0.128 0.013713,0.74053 0.013713,1.40334 0,0.58968 -0.013713,1.24793 -0.4114048,0.0229 -0.9919426,0.0229 -0.8410942,0 -1.9336024,-0.0594 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.12799 -0.013713,-0.71768 -0.013713,-1.35764 z m -1.50391294,-9.11947 q 1.63190554,-0.39312 3.35523444,-0.39312 0.6811034,0 1.2205008,0.0777 0.5439685,0.0777 1.0147984,0.2697 0.475401,0.18741 0.7908113,0.48911 0.3154104,0.29713 0.4936858,0.76339 0.1828465,0.46625 0.1828465,1.07879 0,0.68567 -0.3016968,1.27078 -0.2971257,0.58511 -0.8182384,1.12908 -0.2422717,0.25142 -0.3656931,0.38855 -0.1234214,0.13713 -0.3199815,0.39769 -0.1919889,0.25599 -0.2925545,0.46169 -0.095994,0.2057 -0.1782754,0.50283 -0.07771,0.29255 -0.082281,0.60339 -0.5531109,0.0366 -1.3804916,0.0366 -0.8502365,0 -1.6913306,-0.0366 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.128 0,-0.53025 0.1325638,-0.99651 0.1325637,-0.46626 0.3428373,-0.79538 0.2102735,-0.32913 0.4662587,-0.61254 0.2559852,-0.28798 0.5119704,-0.5074 0.2559851,-0.22398 0.4662587,-0.41597 0.2102735,-0.19199 0.3428373,-0.38855 0.1325637,-0.19656 0.1325637,-0.38398 0,-0.5394 -0.754242,-0.5394 -0.612536,0 -1.5084841,0.31541 -0.891377,0.31084 -1.16564687,0.5074 z"
+         style="fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4827"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

resources/graphics/controllers/joystick_arcade_4_buttons.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="42"
+   height="42"
+   viewBox="0 0 11.1125 11.1125"
+   version="1.1"
+   id="svg4925"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="unknown.svg">
+  <defs
+     id="defs4919" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="6.7728148"
+     inkscape:cx="-21.346482"
+     inkscape:cy="-0.76992782"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4922">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-285.88748)">
+    <g
+       aria-label="?"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.72348785px;line-height:1.25;font-family:Digitalt;-inkscape-font-specification:Digitalt;letter-spacing:0px;word-spacing:0px;fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="text4825"
+       transform="matrix(0.91316098,0,0,0.91316098,1.9388092,25.308702)">
+      <path
+         d="m 1.9437243,295.40006 q 0,-0.59882 0.013713,-1.25707 0.66739,-0.032 1.3530646,-0.032 0.6033936,0 1.5724804,0.032 0.073139,0 0.1279926,0.0548 0.054854,0.0549 0.054854,0.128 0.013713,0.74053 0.013713,1.40334 0,0.58968 -0.013713,1.24793 -0.4114048,0.0229 -0.9919426,0.0229 -0.8410942,0 -1.9336024,-0.0594 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.12799 -0.013713,-0.71768 -0.013713,-1.35764 z m -1.50391294,-9.11947 q 1.63190554,-0.39312 3.35523444,-0.39312 0.6811034,0 1.2205008,0.0777 0.5439685,0.0777 1.0147984,0.2697 0.475401,0.18741 0.7908113,0.48911 0.3154104,0.29713 0.4936858,0.76339 0.1828465,0.46625 0.1828465,1.07879 0,0.68567 -0.3016968,1.27078 -0.2971257,0.58511 -0.8182384,1.12908 -0.2422717,0.25142 -0.3656931,0.38855 -0.1234214,0.13713 -0.3199815,0.39769 -0.1919889,0.25599 -0.2925545,0.46169 -0.095994,0.2057 -0.1782754,0.50283 -0.07771,0.29255 -0.082281,0.60339 -0.5531109,0.0366 -1.3804916,0.0366 -0.8502365,0 -1.6913306,-0.0366 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.128 0,-0.53025 0.1325638,-0.99651 0.1325637,-0.46626 0.3428373,-0.79538 0.2102735,-0.32913 0.4662587,-0.61254 0.2559852,-0.28798 0.5119704,-0.5074 0.2559851,-0.22398 0.4662587,-0.41597 0.2102735,-0.19199 0.3428373,-0.38855 0.1325637,-0.19656 0.1325637,-0.38398 0,-0.5394 -0.754242,-0.5394 -0.612536,0 -1.5084841,0.31541 -0.891377,0.31084 -1.16564687,0.5074 z"
+         style="fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4827"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

resources/graphics/controllers/joystick_arcade_6_buttons.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="42"
+   height="42"
+   viewBox="0 0 11.1125 11.1125"
+   version="1.1"
+   id="svg4925"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="unknown.svg">
+  <defs
+     id="defs4919" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="6.7728148"
+     inkscape:cx="-21.346482"
+     inkscape:cy="-0.76992782"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4922">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-285.88748)">
+    <g
+       aria-label="?"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.72348785px;line-height:1.25;font-family:Digitalt;-inkscape-font-specification:Digitalt;letter-spacing:0px;word-spacing:0px;fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="text4825"
+       transform="matrix(0.91316098,0,0,0.91316098,1.9388092,25.308702)">
+      <path
+         d="m 1.9437243,295.40006 q 0,-0.59882 0.013713,-1.25707 0.66739,-0.032 1.3530646,-0.032 0.6033936,0 1.5724804,0.032 0.073139,0 0.1279926,0.0548 0.054854,0.0549 0.054854,0.128 0.013713,0.74053 0.013713,1.40334 0,0.58968 -0.013713,1.24793 -0.4114048,0.0229 -0.9919426,0.0229 -0.8410942,0 -1.9336024,-0.0594 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.12799 -0.013713,-0.71768 -0.013713,-1.35764 z m -1.50391294,-9.11947 q 1.63190554,-0.39312 3.35523444,-0.39312 0.6811034,0 1.2205008,0.0777 0.5439685,0.0777 1.0147984,0.2697 0.475401,0.18741 0.7908113,0.48911 0.3154104,0.29713 0.4936858,0.76339 0.1828465,0.46625 0.1828465,1.07879 0,0.68567 -0.3016968,1.27078 -0.2971257,0.58511 -0.8182384,1.12908 -0.2422717,0.25142 -0.3656931,0.38855 -0.1234214,0.13713 -0.3199815,0.39769 -0.1919889,0.25599 -0.2925545,0.46169 -0.095994,0.2057 -0.1782754,0.50283 -0.07771,0.29255 -0.082281,0.60339 -0.5531109,0.0366 -1.3804916,0.0366 -0.8502365,0 -1.6913306,-0.0366 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.128 0,-0.53025 0.1325638,-0.99651 0.1325637,-0.46626 0.3428373,-0.79538 0.2102735,-0.32913 0.4662587,-0.61254 0.2559852,-0.28798 0.5119704,-0.5074 0.2559851,-0.22398 0.4662587,-0.41597 0.2102735,-0.19199 0.3428373,-0.38855 0.1325637,-0.19656 0.1325637,-0.38398 0,-0.5394 -0.754242,-0.5394 -0.612536,0 -1.5084841,0.31541 -0.891377,0.31084 -1.16564687,0.5074 z"
+         style="fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4827"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

resources/graphics/controllers/joystick_generic.svg

@@ -0,0 +1,334 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="42"
+   height="42"
+   viewBox="0 0 11.1125 11.1125"
+   version="1.1"
+   id="svg4925"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="joystick_generic.svg">
+  <defs
+     id="defs4919" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="28.21875"
+     inkscape:cx="6.1924519"
+     inkscape:cy="24.290783"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4922">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-285.88748)">
+    <g
+       id="g4868">
+      <rect
+         ry="0"
+         rx="0"
+         y="285.88748"
+         x="5.397531"
+         height="0.76249182"
+         width="0.31743795"
+         id="rect4932"
+         style="opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.00956567;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <rect
+         y="286.62579"
+         x="5.306838"
+         height="1.4259971"
+         width="0.49882337"
+         id="rect4880"
+         style="opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.02827883;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <rect
+         ry="0.016676867"
+         rx="0.024991227"
+         y="286.92184"
+         x="5.1724882"
+         height="0.19134112"
+         width="0.76752394"
+         id="rect5083-1-0-8-5-3-0-0-9"
+         style="opacity:1;vector-effect:none;fill:#161616;fill-opacity:1;stroke:none;stroke-width:0.02487354;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <rect
+         ry="0.039864741"
+         rx="0.039688922"
+         y="287.47369"
+         x="5.139914"
+         height="0.29505575"
+         width="0.83267176"
+         id="rect5083-1-0-8-5-3-0"
+         style="opacity:1;vector-effect:none;fill:#161616;fill-opacity:1;stroke:none;stroke-width:0.03217189;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <rect
+         ry="0.016676867"
+         rx="0.025478471"
+         y="287.19897"
+         x="5.1650062"
+         height="0.19134112"
+         width="0.78248805"
+         id="rect5083-1-0-8-5-3-0-0"
+         style="opacity:1;vector-effect:none;fill:#161616;fill-opacity:1;stroke:none;stroke-width:0.02511485;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <rect
+         ry="0.038403545"
+         rx="0.045789048"
+         y="286.56445"
+         x="5.1949348"
+         height="0.28480145"
+         width="0.72263134"
+         id="rect5083-1-0-8-5"
+         style="opacity:1;vector-effect:none;fill:#161616;fill-opacity:1;stroke:none;stroke-width:0.02944537;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <rect
+         ry="0.026452964"
+         rx="0.026452964"
+         y="287.74936"
+         x="5.1503634"
+         height="0.30350661"
+         width="0.81241632"
+         id="rect5083-1-0-8-5-3"
+         style="opacity:1;vector-effect:none;fill:#333333;fill-opacity:1;stroke:none;stroke-width:0.03223006;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <rect
+         rx="0.99709696"
+         ry="0.99709696"
+         y="287.72314"
+         x="1.6818355"
+         height="7.7660403"
+         width="7.7488289"
+         id="rect4978"
+         style="opacity:1;vector-effect:none;fill:#0c0c0c;fill-opacity:1;stroke:#0a0a0a;stroke-width:0.08007559;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <g
+         style="fill:#ea7306;fill-opacity:1;stroke:#000000;stroke-width:1.2247448;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(0.05012578,0,0,0.05012578,1.8150027,287.93001)"
+         id="g8">
+        <circle
+           cx="28.9"
+           cy="27.299999"
+           r="14.5"
+           id="circle6"
+           style="fill:#ea7306;fill-opacity:1;stroke:#000000;stroke-width:1.2247448;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      </g>
+      <path
+         style="fill:#3c3c3b;fill-opacity:1;stroke-width:0.05127106"
+         inkscape:connector-curvature="0"
+         id="path30"
+         d="m 4.1096097,289.29845 c 0,0.46657 -0.3794056,0.84597 -0.8459724,0.84597 -0.4665665,0 -0.8459723,-0.3794 -0.8459723,-0.84597 0,-0.46657 0.3794058,-0.84598 0.8459723,-0.84598 0.4665668,0 0.8459724,0.37941 0.8459724,0.84598 z m -0.8459724,-0.74344 c -0.4101683,0 -0.7434302,0.33327 -0.7434302,0.74344 0,0.41017 0.3332619,0.74343 0.7434302,0.74343 0.4101685,0 0.7434305,-0.33326 0.7434305,-0.74343 0,-0.41017 -0.333262,-0.74344 -0.7434305,-0.74344 z" />
+      <g
+         style="fill:#ea7306;fill-opacity:1;stroke:#000000;stroke-width:1.59749329;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(0.05012578,0,0,0.05012578,6.4008691,287.93001)"
+         id="g8-6">
+        <circle
+           cx="28.9"
+           cy="27.299999"
+           r="14.5"
+           id="circle6-9"
+           style="fill:#ea7306;fill-opacity:1;stroke:#000000;stroke-width:1.59749329;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      </g>
+      <path
+         style="fill:#666666;fill-opacity:0.55982205;stroke-width:0.05127106"
+         inkscape:connector-curvature="0"
+         id="path30-3"
+         d="m 8.6954757,289.29845 c 0,0.46657 -0.3794058,0.84597 -0.8459722,0.84597 -0.4665662,0 -0.8459718,-0.3794 -0.8459718,-0.84597 0,-0.46657 0.3794056,-0.84598 0.8459718,-0.84598 0.4665664,0 0.8459722,0.37941 0.8459722,0.84598 z m -0.8459722,-0.74344 c -0.4101681,0 -0.7434299,0.33327 -0.7434299,0.74344 0,0.41016 0.3332618,0.74343 0.7434299,0.74343 0.4101688,0 0.7434306,-0.33327 0.7434306,-0.74343 0,-0.41017 -0.3332618,-0.74344 -0.7434306,-0.74344 z" />
+      <g
+         style="fill:#d36705;fill-opacity:1;stroke:none;stroke-opacity:1"
+         transform="matrix(0.04027323,0,0,0.04027323,2.099741,288.19899)"
+         id="g8-69">
+        <circle
+           cx="28.9"
+           cy="27.299999"
+           r="14.5"
+           id="circle6-2"
+           style="fill:#d36705;fill-opacity:1;stroke:none;stroke-opacity:1" />
+      </g>
+      <g
+         style="fill:#d36705;fill-opacity:1;stroke:none;stroke-opacity:1"
+         transform="matrix(0.04027323,0,0,0.04027323,6.6856077,288.19899)"
+         id="g8-69-2">
+        <circle
+           cx="28.9"
+           cy="27.299999"
+           r="14.5"
+           id="circle6-2-4"
+           style="fill:#d36705;fill-opacity:1;stroke:none;stroke-opacity:1" />
+      </g>
+      <path
+         inkscape:connector-curvature="0"
+         id="rect4815"
+         d="m 4.3484109,289.07627 c -0.1863819,-0.004 -0.1663103,0.11482 -0.1685162,0.23642 0.014105,0.49951 -0.4635825,0.90414 -0.8472682,0.90581 -0.2719318,0.004 -0.2804784,0.0407 -0.2804784,0.26402 -0.00677,0.63408 0.012349,1.0844 0.013227,1.7186 l -8.332e-4,1.54351 c 0,0.22744 0.2735663,0.39146 0.4580559,0.39151 l 2.0336516,-3.9e-4 2.033651,3.9e-4 c 0.1844894,-5e-5 0.4580557,-0.16407 0.4580557,-0.39151 l -8.287e-4,-1.54351 c 8.813e-4,-0.6342 0.019993,-1.08452 0.013228,-1.7186 0,-0.2233 -0.00855,-0.26014 -0.2804787,-0.26402 -0.3836853,-0.002 -0.8613731,-0.4063 -0.8472672,-0.90581 -0.00221,-0.1216 0.017866,-0.24033 -0.1685164,-0.23642 H 5.7621559 5.3503431 Z"
+         style="opacity:1;vector-effect:none;fill:#c4c4c4;fill-opacity:1;stroke:#000000;stroke-width:0.08007559;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <g
+         transform="matrix(0.05949902,0,0,0.05592343,1.3248815,287.32792)"
+         id="g5237-9-4">
+        <path
+           style="opacity:1;vector-effect:none;fill:#df0000;fill-opacity:1;stroke:none;stroke-width:0.51822096;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           d="m 69.607084,34.312099 h 3.018984 v 3.811669 h -3.018984 z"
+           id="rect4778-9-2-6-22-8"
+           inkscape:connector-curvature="0" />
+        <path
+           style="opacity:1;vector-effect:none;fill:#080000;fill-opacity:1;stroke:none;stroke-width:0.30850437;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           d="m 68.537159,34.3121 h 1.069925 v 3.811669 h -1.069925 z"
+           id="rect4778-9-2-6-5-4-1"
+           inkscape:connector-curvature="0" />
+        <path
+           style="opacity:1;vector-effect:none;fill:#080000;fill-opacity:1;stroke:none;stroke-width:0.30850437;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           d="m 72.626068,34.3121 h 1.069925 v 3.811669 h -1.069925 z"
+           id="rect4778-9-2-6-5-8-77-2"
+           inkscape:connector-curvature="0" />
+      </g>
+      <path
+         inkscape:connector-curvature="0"
+         id="path4796-6"
+         d="m 5.9993054,290.2016 a 1.5082321,1.5082321 0 0 0 -0.8704204,-0.003 l 0.045365,0.11124 a 1.389433,1.389433 0 0 1 0.7788509,0.004 l 0.046947,-0.11161 a 1.5082321,1.5082321 0 0 0 -7.426e-4,-2.5e-4 z m 0.276333,0.11766 -0.04605,0.10947 a 1.389433,1.389433 0 0 1 0.5463573,0.55532 l 0.111503,-0.0455 a 1.5082321,1.5082321 0 0 0 -0.6118105,-0.61932 z m 0.7252174,0.89665 -0.1113713,0.0454 a 1.389433,1.389433 0 0 1 -0.00339,0.77874 l 0.1115153,0.0469 a 1.5082321,1.5082321 0 0 0 0.00324,-0.87107 z M 4.851553,290.31204 a 1.5082321,1.5082321 0 0 0 -0.6191895,0.61175 l 0.1091964,0.0459 a 1.389433,1.389433 0 0 1 0.5554117,-0.54632 z m -0.7366668,0.8874 a 1.5082321,1.5082321 0 0 0 -0.00324,0.87107 l 0.1112394,-0.0454 a 1.389433,1.389433 0 0 1 0.00342,-0.77883 z m 2.656054,1.11725 a 1.389433,1.389433 0 0 1 -0.5554123,0.54632 l 0.045365,0.11124 a 1.5082321,1.5082321 0 0 0 0.6191505,-0.61166 z m -2.4345574,-0.0142 -0.1113321,0.0453 a 1.5082321,1.5082321 0 0 0 0.6118104,0.61932 l 0.046011,-0.10938 A 1.389433,1.389433 0 0 1 4.336383,292.30246 Z m 1.601867,0.67404 a 1.389433,1.389433 0 0 1 -0.7788504,-0.004 l -0.046947,0.11161 a 1.5082321,1.5082321 0 0 0 0.8711089,0.003 z"
+         style="opacity:1;vector-effect:none;fill:#0e0000;fill-opacity:1;stroke:#000000;stroke-width:0.07409604;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <rect
+         transform="rotate(135)"
+         inkscape:transform-center-y="-3.3040202"
+         inkscape:transform-center-x="0.1335562"
+         y="-211.63332"
+         x="202.16725"
+         height="0.33849055"
+         width="0.2570976"
+         id="rect4778-9-2-3-0-4-0-5-9"
+         style="opacity:1;vector-effect:none;fill:#df0000;fill-opacity:1;stroke:#010101;stroke-width:0.0450803;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <rect
+         transform="rotate(45)"
+         inkscape:transform-center-y="0.13355563"
+         inkscape:transform-center-x="3.3040195"
+         y="200.79958"
+         x="210.00444"
+         height="0.33849055"
+         width="0.2570976"
+         id="rect4778-9-2-3-0-4"
+         style="opacity:1;vector-effect:none;fill:#df0000;fill-opacity:1;stroke:#010101;stroke-width:0.0450803;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <rect
+         inkscape:transform-center-y="-16.798768"
+         inkscape:transform-center-x="-13.656553"
+         transform="rotate(-90)"
+         y="4.0631337"
+         x="-291.77136"
+         height="0.33849055"
+         width="0.2570976"
+         id="rect4778-9-2-7"
+         style="opacity:1;vector-effect:none;fill:#df0000;fill-opacity:1;stroke:#010101;stroke-width:0.0450803;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <rect
+         inkscape:transform-center-y="-16.798768"
+         inkscape:transform-center-x="-13.656553"
+         transform="rotate(-90)"
+         y="6.7224898"
+         x="-291.77136"
+         height="0.33849055"
+         width="0.2570976"
+         id="rect4778-9-2-3"
+         style="opacity:1;vector-effect:none;fill:#df0000;fill-opacity:1;stroke:#010101;stroke-width:0.0450803;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <rect
+         transform="rotate(45)"
+         inkscape:transform-center-y="0.13355563"
+         inkscape:transform-center-x="3.3040195"
+         y="203.44121"
+         x="210.02908"
+         height="0.33849055"
+         width="0.2570976"
+         id="rect4778-9-2-3-0-4-0"
+         style="opacity:1;vector-effect:none;fill:#df0000;fill-opacity:1;stroke:#010101;stroke-width:0.0450803;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <rect
+         transform="rotate(135)"
+         inkscape:transform-center-y="-3.3040202"
+         inkscape:transform-center-x="0.1335562"
+         y="-208.99785"
+         x="202.16519"
+         height="0.33849055"
+         width="0.2570976"
+         id="rect4778-9-2-3-0-4-0-5"
+         style="opacity:1;vector-effect:none;fill:#df0000;fill-opacity:1;stroke:#010101;stroke-width:0.0450803;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <g
+         transform="matrix(0.05949902,0,0,0.05592343,1.3248813,287.87114)"
+         id="g5237-5">
+        <path
+           style="opacity:1;vector-effect:none;fill:#df0000;fill-opacity:1;stroke:none;stroke-width:0.51822096;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           d="m 69.607084,34.312099 h 3.018984 v 3.811669 h -3.018984 z"
+           id="rect4778-9-2-6-3"
+           inkscape:connector-curvature="0" />
+        <path
+           style="opacity:1;vector-effect:none;fill:#080000;fill-opacity:1;stroke:none;stroke-width:0.30850437;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           d="m 68.537159,34.3121 h 1.069925 v 3.811669 h -1.069925 z"
+           id="rect4778-9-2-6-5-5"
+           inkscape:connector-curvature="0" />
+        <path
+           style="opacity:1;vector-effect:none;fill:#080000;fill-opacity:1;stroke:none;stroke-width:0.30850437;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           d="m 72.626068,34.3121 h 1.069925 v 3.811669 h -1.069925 z"
+           id="rect4778-9-2-6-5-8-6"
+           inkscape:connector-curvature="0" />
+      </g>
+      <g
+         transform="matrix(0.05949902,0,0,0.0565384,1.3248815,287.5765)"
+         id="g5237-9">
+        <path
+           style="opacity:1;vector-effect:none;fill:#df0000;fill-opacity:1;stroke:none;stroke-width:0.51822096;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           d="m 69.607084,34.312099 h 3.018984 v 3.811669 h -3.018984 z"
+           id="rect4778-9-2-6-22"
+           inkscape:connector-curvature="0" />
+        <path
+           style="opacity:1;vector-effect:none;fill:#080000;fill-opacity:1;stroke:none;stroke-width:0.30850437;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           d="m 68.537159,34.3121 h 1.069925 v 3.811669 h -1.069925 z"
+           id="rect4778-9-2-6-5-4"
+           inkscape:connector-curvature="0" />
+        <path
+           style="opacity:1;vector-effect:none;fill:#080000;fill-opacity:1;stroke:none;stroke-width:0.30850437;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           d="m 72.626068,34.3121 h 1.069925 v 3.811669 h -1.069925 z"
+           id="rect4778-9-2-6-5-8-77"
+           inkscape:connector-curvature="0" />
+      </g>
+      <rect
+         inkscape:transform-center-y="-0.016569883"
+         inkscape:transform-center-x="0.036263862"
+         y="290.15695"
+         x="5.4276991"
+         height="0.33849055"
+         width="0.2570976"
+         id="rect4778-9-2-3-0"
+         style="opacity:1;vector-effect:none;fill:#df0000;fill-opacity:1;stroke:#010101;stroke-width:0.06797801;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <rect
+         y="292.78873"
+         x="5.4276991"
+         height="0.33849055"
+         width="0.2570976"
+         id="rect4778-9-2-8"
+         style="opacity:1;vector-effect:none;fill:#df0000;fill-opacity:1;stroke:#010101;stroke-width:0.0450803;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <circle
+         r="1.2759957"
+         cx="5.5562501"
+         cy="291.64316"
+         id="circle34-2"
+         style="opacity:1;fill:#0c0c0c;fill-opacity:1;stroke-width:0.03002343" />
+    </g>
+  </g>
+</svg>

resources/graphics/controllers/keyboard_generic.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="42"
+   height="42"
+   viewBox="0 0 11.1125 11.1125"
+   version="1.1"
+   id="svg4925"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="unknown.svg">
+  <defs
+     id="defs4919" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="6.7728148"
+     inkscape:cx="-21.346482"
+     inkscape:cy="-0.76992782"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4922">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-285.88748)">
+    <g
+       aria-label="?"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.72348785px;line-height:1.25;font-family:Digitalt;-inkscape-font-specification:Digitalt;letter-spacing:0px;word-spacing:0px;fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="text4825"
+       transform="matrix(0.91316098,0,0,0.91316098,1.9388092,25.308702)">
+      <path
+         d="m 1.9437243,295.40006 q 0,-0.59882 0.013713,-1.25707 0.66739,-0.032 1.3530646,-0.032 0.6033936,0 1.5724804,0.032 0.073139,0 0.1279926,0.0548 0.054854,0.0549 0.054854,0.128 0.013713,0.74053 0.013713,1.40334 0,0.58968 -0.013713,1.24793 -0.4114048,0.0229 -0.9919426,0.0229 -0.8410942,0 -1.9336024,-0.0594 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.12799 -0.013713,-0.71768 -0.013713,-1.35764 z m -1.50391294,-9.11947 q 1.63190554,-0.39312 3.35523444,-0.39312 0.6811034,0 1.2205008,0.0777 0.5439685,0.0777 1.0147984,0.2697 0.475401,0.18741 0.7908113,0.48911 0.3154104,0.29713 0.4936858,0.76339 0.1828465,0.46625 0.1828465,1.07879 0,0.68567 -0.3016968,1.27078 -0.2971257,0.58511 -0.8182384,1.12908 -0.2422717,0.25142 -0.3656931,0.38855 -0.1234214,0.13713 -0.3199815,0.39769 -0.1919889,0.25599 -0.2925545,0.46169 -0.095994,0.2057 -0.1782754,0.50283 -0.07771,0.29255 -0.082281,0.60339 -0.5531109,0.0366 -1.3804916,0.0366 -0.8502365,0 -1.6913306,-0.0366 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.128 0,-0.53025 0.1325638,-0.99651 0.1325637,-0.46626 0.3428373,-0.79538 0.2102735,-0.32913 0.4662587,-0.61254 0.2559852,-0.28798 0.5119704,-0.5074 0.2559851,-0.22398 0.4662587,-0.41597 0.2102735,-0.19199 0.3428373,-0.38855 0.1325637,-0.19656 0.1325637,-0.38398 0,-0.5394 -0.754242,-0.5394 -0.612536,0 -1.5084841,0.31541 -0.891377,0.31084 -1.16564687,0.5074 z"
+         style="fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4827"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

resources/graphics/controllers/keyboard_mouse_generic.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="42"
+   height="42"
+   viewBox="0 0 11.1125 11.1125"
+   version="1.1"
+   id="svg4925"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="unknown.svg">
+  <defs
+     id="defs4919" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="6.7728148"
+     inkscape:cx="-21.346482"
+     inkscape:cy="-0.76992782"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4922">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-285.88748)">
+    <g
+       aria-label="?"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.72348785px;line-height:1.25;font-family:Digitalt;-inkscape-font-specification:Digitalt;letter-spacing:0px;word-spacing:0px;fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="text4825"
+       transform="matrix(0.91316098,0,0,0.91316098,1.9388092,25.308702)">
+      <path
+         d="m 1.9437243,295.40006 q 0,-0.59882 0.013713,-1.25707 0.66739,-0.032 1.3530646,-0.032 0.6033936,0 1.5724804,0.032 0.073139,0 0.1279926,0.0548 0.054854,0.0549 0.054854,0.128 0.013713,0.74053 0.013713,1.40334 0,0.58968 -0.013713,1.24793 -0.4114048,0.0229 -0.9919426,0.0229 -0.8410942,0 -1.9336024,-0.0594 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.12799 -0.013713,-0.71768 -0.013713,-1.35764 z m -1.50391294,-9.11947 q 1.63190554,-0.39312 3.35523444,-0.39312 0.6811034,0 1.2205008,0.0777 0.5439685,0.0777 1.0147984,0.2697 0.475401,0.18741 0.7908113,0.48911 0.3154104,0.29713 0.4936858,0.76339 0.1828465,0.46625 0.1828465,1.07879 0,0.68567 -0.3016968,1.27078 -0.2971257,0.58511 -0.8182384,1.12908 -0.2422717,0.25142 -0.3656931,0.38855 -0.1234214,0.13713 -0.3199815,0.39769 -0.1919889,0.25599 -0.2925545,0.46169 -0.095994,0.2057 -0.1782754,0.50283 -0.07771,0.29255 -0.082281,0.60339 -0.5531109,0.0366 -1.3804916,0.0366 -0.8502365,0 -1.6913306,-0.0366 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.128 0,-0.53025 0.1325638,-0.99651 0.1325637,-0.46626 0.3428373,-0.79538 0.2102735,-0.32913 0.4662587,-0.61254 0.2559852,-0.28798 0.5119704,-0.5074 0.2559851,-0.22398 0.4662587,-0.41597 0.2102735,-0.19199 0.3428373,-0.38855 0.1325637,-0.19656 0.1325637,-0.38398 0,-0.5394 -0.754242,-0.5394 -0.612536,0 -1.5084841,0.31541 -0.891377,0.31084 -1.16564687,0.5074 z"
+         style="fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4827"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

resources/graphics/controllers/lightgun_generic.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="42"
+   height="42"
+   viewBox="0 0 11.1125 11.1125"
+   version="1.1"
+   id="svg4925"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="unknown.svg">
+  <defs
+     id="defs4919" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="6.7728148"
+     inkscape:cx="-21.346482"
+     inkscape:cy="-0.76992782"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4922">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-285.88748)">
+    <g
+       aria-label="?"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.72348785px;line-height:1.25;font-family:Digitalt;-inkscape-font-specification:Digitalt;letter-spacing:0px;word-spacing:0px;fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="text4825"
+       transform="matrix(0.91316098,0,0,0.91316098,1.9388092,25.308702)">
+      <path
+         d="m 1.9437243,295.40006 q 0,-0.59882 0.013713,-1.25707 0.66739,-0.032 1.3530646,-0.032 0.6033936,0 1.5724804,0.032 0.073139,0 0.1279926,0.0548 0.054854,0.0549 0.054854,0.128 0.013713,0.74053 0.013713,1.40334 0,0.58968 -0.013713,1.24793 -0.4114048,0.0229 -0.9919426,0.0229 -0.8410942,0 -1.9336024,-0.0594 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.12799 -0.013713,-0.71768 -0.013713,-1.35764 z m -1.50391294,-9.11947 q 1.63190554,-0.39312 3.35523444,-0.39312 0.6811034,0 1.2205008,0.0777 0.5439685,0.0777 1.0147984,0.2697 0.475401,0.18741 0.7908113,0.48911 0.3154104,0.29713 0.4936858,0.76339 0.1828465,0.46625 0.1828465,1.07879 0,0.68567 -0.3016968,1.27078 -0.2971257,0.58511 -0.8182384,1.12908 -0.2422717,0.25142 -0.3656931,0.38855 -0.1234214,0.13713 -0.3199815,0.39769 -0.1919889,0.25599 -0.2925545,0.46169 -0.095994,0.2057 -0.1782754,0.50283 -0.07771,0.29255 -0.082281,0.60339 -0.5531109,0.0366 -1.3804916,0.0366 -0.8502365,0 -1.6913306,-0.0366 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.128 0,-0.53025 0.1325638,-0.99651 0.1325637,-0.46626 0.3428373,-0.79538 0.2102735,-0.32913 0.4662587,-0.61254 0.2559852,-0.28798 0.5119704,-0.5074 0.2559851,-0.22398 0.4662587,-0.41597 0.2102735,-0.19199 0.3428373,-0.38855 0.1325637,-0.19656 0.1325637,-0.38398 0,-0.5394 -0.754242,-0.5394 -0.612536,0 -1.5084841,0.31541 -0.891377,0.31084 -1.16564687,0.5074 z"
+         style="fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4827"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

resources/graphics/controllers/lightgun_nintendo.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="42"
+   height="42"
+   viewBox="0 0 11.1125 11.1125"
+   version="1.1"
+   id="svg4925"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="unknown.svg">
+  <defs
+     id="defs4919" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="6.7728148"
+     inkscape:cx="-21.346482"
+     inkscape:cy="-0.76992782"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4922">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-285.88748)">
+    <g
+       aria-label="?"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.72348785px;line-height:1.25;font-family:Digitalt;-inkscape-font-specification:Digitalt;letter-spacing:0px;word-spacing:0px;fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="text4825"
+       transform="matrix(0.91316098,0,0,0.91316098,1.9388092,25.308702)">
+      <path
+         d="m 1.9437243,295.40006 q 0,-0.59882 0.013713,-1.25707 0.66739,-0.032 1.3530646,-0.032 0.6033936,0 1.5724804,0.032 0.073139,0 0.1279926,0.0548 0.054854,0.0549 0.054854,0.128 0.013713,0.74053 0.013713,1.40334 0,0.58968 -0.013713,1.24793 -0.4114048,0.0229 -0.9919426,0.0229 -0.8410942,0 -1.9336024,-0.0594 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.12799 -0.013713,-0.71768 -0.013713,-1.35764 z m -1.50391294,-9.11947 q 1.63190554,-0.39312 3.35523444,-0.39312 0.6811034,0 1.2205008,0.0777 0.5439685,0.0777 1.0147984,0.2697 0.475401,0.18741 0.7908113,0.48911 0.3154104,0.29713 0.4936858,0.76339 0.1828465,0.46625 0.1828465,1.07879 0,0.68567 -0.3016968,1.27078 -0.2971257,0.58511 -0.8182384,1.12908 -0.2422717,0.25142 -0.3656931,0.38855 -0.1234214,0.13713 -0.3199815,0.39769 -0.1919889,0.25599 -0.2925545,0.46169 -0.095994,0.2057 -0.1782754,0.50283 -0.07771,0.29255 -0.082281,0.60339 -0.5531109,0.0366 -1.3804916,0.0366 -0.8502365,0 -1.6913306,-0.0366 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.128 0,-0.53025 0.1325638,-0.99651 0.1325637,-0.46626 0.3428373,-0.79538 0.2102735,-0.32913 0.4662587,-0.61254 0.2559852,-0.28798 0.5119704,-0.5074 0.2559851,-0.22398 0.4662587,-0.41597 0.2102735,-0.19199 0.3428373,-0.38855 0.1325637,-0.19656 0.1325637,-0.38398 0,-0.5394 -0.754242,-0.5394 -0.612536,0 -1.5084841,0.31541 -0.891377,0.31084 -1.16564687,0.5074 z"
+         style="fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4827"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

resources/graphics/controllers/mouse_amiga.svg

@@ -0,0 +1,110 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="42"
+   height="42"
+   viewBox="0 0 11.1125 11.1125"
+   version="1.1"
+   id="svg4925"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="mouse_amiga.svg">
+  <defs
+     id="defs4919" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="16.892814"
+     inkscape:cx="-25.122961"
+     inkscape:cy="12.292821"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:snap-bbox="false"
+     inkscape:snap-global="false" />
+  <metadata
+     id="metadata4922">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-285.88748)">
+    <g
+       id="g5117">
+      <path
+         inkscape:connector-curvature="0"
+         id="rect4891"
+         d="m 5.4289836,285.88748 h 0.2545328 v 2.06353 H 5.4289836 Z"
+         style="opacity:1;vector-effect:none;fill:#60605d;fill-opacity:1;stroke:none;stroke-width:0.04231874;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <polygon
+         transform="matrix(0.05395004,0,0,0.05395004,17.263409,268.3063)"
+         style="fill:#868580"
+         id="XMLID_697_"
+         points="-216.2,356.8 -209.7,356.8 -210.6,354.4 -216.2,354.4 -216.2,352.8 -211.3,352.8 -212.2,350.4 -222.2,350.4 -223.1,352.8 -217.8,352.8 -217.8,354.4 -223.7,354.4 -224.6,356.8 -217.8,356.8 -217.8,358.4 -225.1,358.4 -225.9,360.4 -217.8,360.4 -217.8,362 -226.5,362 -227.8,365.6 -206.2,365.6 -207.6,362 -216.2,362 -216.2,360.4 -208.3,360.4 -209,358.4 -216.2,358.4 " />
+      <path
+         style="fill:#c2c2c2;fill-opacity:1;stroke:#000000;stroke-width:0.14408384;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         inkscape:connector-curvature="0"
+         id="XMLID_695_"
+         d="m 3.5924685,287.9657 h 3.9275632 c 0.2158001,0 0.3884402,0.17264 0.3884402,0.38844 v 6.86246 c 0,0.21579 -0.1726401,0.38842 -0.3884402,0.38842 H 3.5924685 c -0.2158001,0 -0.3884403,-0.17263 -0.3884403,-0.38842 v -6.86246 c 0,-0.2158 0.1726402,-0.38844 0.3884403,-0.38844 z" />
+      <path
+         style="fill:#d6d6d6;fill-opacity:1;stroke-width:0.05395004"
+         inkscape:connector-curvature="0"
+         id="XMLID_693_"
+         d="M 4.1967089,289.36841 H 6.915791 c 0.070136,0 0.1294803,0.0594 0.1294803,0.12948 v 3.79809 c 0,0.0702 -0.059345,0.12946 -0.1294803,0.12946 H 4.1967089 c -0.070136,0 -0.1294802,-0.0594 -0.1294802,-0.12946 v -3.79809 c 0,-0.0755 0.059345,-0.12948 0.1294802,-0.12948 z" />
+      <g
+         transform="translate(-0.0215808)"
+         id="g4938">
+        <path
+           style="fill:#60605d;stroke-width:0.05395004"
+           inkscape:connector-curvature="0"
+           id="XMLID_691_"
+           d="m 4.2182898,288.6185 h 0.8632006 c 0.070135,0 0.1294802,0.0594 0.1294802,0.12947 v 1.72641 c 0,0.0701 -0.059345,0.12947 -0.1294802,0.12947 H 4.2182898 c -0.070135,0 -0.1294801,-0.0594 -0.1294801,-0.12947 v -1.72641 c 0,-0.0701 0.059345,-0.12947 0.1294801,-0.12947 z" />
+        <path
+           style="fill:#60605d;stroke-width:0.05395004"
+           inkscape:connector-curvature="0"
+           id="XMLID_686_"
+           d="m 6.0741712,288.6185 h 0.8632007 c 0.070135,0 0.12948,0.0594 0.12948,0.12947 v 1.72641 c 0,0.0701 -0.059345,0.12947 -0.12948,0.12947 H 6.0741712 c -0.070135,0 -0.1294801,-0.0594 -0.1294801,-0.12947 v -1.72641 c 0,-0.0701 0.059345,-0.12947 0.1294801,-0.12947 z" />
+        <g
+           id="g4931">
+          <path
+             d="m 4.2182898,288.5052 h 0.8632006 c 0.070135,0 0.1294802,0.0594 0.1294802,0.12948 v 1.7264 c 0,0.0701 -0.059345,0.12947 -0.1294802,0.12947 H 4.2182898 c -0.070135,0 -0.1294801,-0.0594 -0.1294801,-0.12947 v -1.7264 c 0,-0.0755 0.059345,-0.12948 0.1294801,-0.12948 z"
+             id="XMLID_689_"
+             inkscape:connector-curvature="0"
+             style="fill:#7d7c77;fill-opacity:1;stroke-width:0.05395004" />
+          <path
+             d="m 6.0741712,288.5052 h 0.8632007 c 0.070135,0 0.12948,0.0594 0.12948,0.12948 v 1.7264 c 0,0.0701 -0.059345,0.12947 -0.12948,0.12947 H 6.0741712 c -0.070135,0 -0.1294801,-0.0594 -0.1294801,-0.12947 v -1.7264 c 0,-0.0755 0.059345,-0.12948 0.1294801,-0.12948 z"
+             id="XMLID_684_"
+             inkscape:connector-curvature="0"
+             style="fill:#7d7c77;fill-opacity:1;stroke-width:0.05395004" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

resources/graphics/controllers/mouse_generic.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="42"
+   height="42"
+   viewBox="0 0 11.1125 11.1125"
+   version="1.1"
+   id="svg4925"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="unknown.svg">
+  <defs
+     id="defs4919" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="6.7728148"
+     inkscape:cx="-21.346482"
+     inkscape:cy="-0.76992782"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4922">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-285.88748)">
+    <g
+       aria-label="?"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.72348785px;line-height:1.25;font-family:Digitalt;-inkscape-font-specification:Digitalt;letter-spacing:0px;word-spacing:0px;fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="text4825"
+       transform="matrix(0.91316098,0,0,0.91316098,1.9388092,25.308702)">
+      <path
+         d="m 1.9437243,295.40006 q 0,-0.59882 0.013713,-1.25707 0.66739,-0.032 1.3530646,-0.032 0.6033936,0 1.5724804,0.032 0.073139,0 0.1279926,0.0548 0.054854,0.0549 0.054854,0.128 0.013713,0.74053 0.013713,1.40334 0,0.58968 -0.013713,1.24793 -0.4114048,0.0229 -0.9919426,0.0229 -0.8410942,0 -1.9336024,-0.0594 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.12799 -0.013713,-0.71768 -0.013713,-1.35764 z m -1.50391294,-9.11947 q 1.63190554,-0.39312 3.35523444,-0.39312 0.6811034,0 1.2205008,0.0777 0.5439685,0.0777 1.0147984,0.2697 0.475401,0.18741 0.7908113,0.48911 0.3154104,0.29713 0.4936858,0.76339 0.1828465,0.46625 0.1828465,1.07879 0,0.68567 -0.3016968,1.27078 -0.2971257,0.58511 -0.8182384,1.12908 -0.2422717,0.25142 -0.3656931,0.38855 -0.1234214,0.13713 -0.3199815,0.39769 -0.1919889,0.25599 -0.2925545,0.46169 -0.095994,0.2057 -0.1782754,0.50283 -0.07771,0.29255 -0.082281,0.60339 -0.5531109,0.0366 -1.3804916,0.0366 -0.8502365,0 -1.6913306,-0.0366 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.128 0,-0.53025 0.1325638,-0.99651 0.1325637,-0.46626 0.3428373,-0.79538 0.2102735,-0.32913 0.4662587,-0.61254 0.2559852,-0.28798 0.5119704,-0.5074 0.2559851,-0.22398 0.4662587,-0.41597 0.2102735,-0.19199 0.3428373,-0.38855 0.1325637,-0.19656 0.1325637,-0.38398 0,-0.5394 -0.754242,-0.5394 -0.612536,0 -1.5084841,0.31541 -0.891377,0.31084 -1.16564687,0.5074 z"
+         style="fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4827"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

resources/graphics/controllers/steering_wheel_generic.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="42"
+   height="42"
+   viewBox="0 0 11.1125 11.1125"
+   version="1.1"
+   id="svg4925"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="unknown.svg">
+  <defs
+     id="defs4919" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="6.7728148"
+     inkscape:cx="-21.346482"
+     inkscape:cy="-0.76992782"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4922">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-285.88748)">
+    <g
+       aria-label="?"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.72348785px;line-height:1.25;font-family:Digitalt;-inkscape-font-specification:Digitalt;letter-spacing:0px;word-spacing:0px;fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="text4825"
+       transform="matrix(0.91316098,0,0,0.91316098,1.9388092,25.308702)">
+      <path
+         d="m 1.9437243,295.40006 q 0,-0.59882 0.013713,-1.25707 0.66739,-0.032 1.3530646,-0.032 0.6033936,0 1.5724804,0.032 0.073139,0 0.1279926,0.0548 0.054854,0.0549 0.054854,0.128 0.013713,0.74053 0.013713,1.40334 0,0.58968 -0.013713,1.24793 -0.4114048,0.0229 -0.9919426,0.0229 -0.8410942,0 -1.9336024,-0.0594 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.12799 -0.013713,-0.71768 -0.013713,-1.35764 z m -1.50391294,-9.11947 q 1.63190554,-0.39312 3.35523444,-0.39312 0.6811034,0 1.2205008,0.0777 0.5439685,0.0777 1.0147984,0.2697 0.475401,0.18741 0.7908113,0.48911 0.3154104,0.29713 0.4936858,0.76339 0.1828465,0.46625 0.1828465,1.07879 0,0.68567 -0.3016968,1.27078 -0.2971257,0.58511 -0.8182384,1.12908 -0.2422717,0.25142 -0.3656931,0.38855 -0.1234214,0.13713 -0.3199815,0.39769 -0.1919889,0.25599 -0.2925545,0.46169 -0.095994,0.2057 -0.1782754,0.50283 -0.07771,0.29255 -0.082281,0.60339 -0.5531109,0.0366 -1.3804916,0.0366 -0.8502365,0 -1.6913306,-0.0366 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.128 0,-0.53025 0.1325638,-0.99651 0.1325637,-0.46626 0.3428373,-0.79538 0.2102735,-0.32913 0.4662587,-0.61254 0.2559852,-0.28798 0.5119704,-0.5074 0.2559851,-0.22398 0.4662587,-0.41597 0.2102735,-0.19199 0.3428373,-0.38855 0.1325637,-0.19656 0.1325637,-0.38398 0,-0.5394 -0.754242,-0.5394 -0.612536,0 -1.5084841,0.31541 -0.891377,0.31084 -1.16564687,0.5074 z"
+         style="fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4827"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

resources/graphics/controllers/trackball_generic.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="42"
+   height="42"
+   viewBox="0 0 11.1125 11.1125"
+   version="1.1"
+   id="svg4925"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="unknown.svg">
+  <defs
+     id="defs4919" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="6.7728148"
+     inkscape:cx="-21.346482"
+     inkscape:cy="-0.76992782"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4922">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-285.88748)">
+    <g
+       aria-label="?"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.72348785px;line-height:1.25;font-family:Digitalt;-inkscape-font-specification:Digitalt;letter-spacing:0px;word-spacing:0px;fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="text4825"
+       transform="matrix(0.91316098,0,0,0.91316098,1.9388092,25.308702)">
+      <path
+         d="m 1.9437243,295.40006 q 0,-0.59882 0.013713,-1.25707 0.66739,-0.032 1.3530646,-0.032 0.6033936,0 1.5724804,0.032 0.073139,0 0.1279926,0.0548 0.054854,0.0549 0.054854,0.128 0.013713,0.74053 0.013713,1.40334 0,0.58968 -0.013713,1.24793 -0.4114048,0.0229 -0.9919426,0.0229 -0.8410942,0 -1.9336024,-0.0594 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.12799 -0.013713,-0.71768 -0.013713,-1.35764 z m -1.50391294,-9.11947 q 1.63190554,-0.39312 3.35523444,-0.39312 0.6811034,0 1.2205008,0.0777 0.5439685,0.0777 1.0147984,0.2697 0.475401,0.18741 0.7908113,0.48911 0.3154104,0.29713 0.4936858,0.76339 0.1828465,0.46625 0.1828465,1.07879 0,0.68567 -0.3016968,1.27078 -0.2971257,0.58511 -0.8182384,1.12908 -0.2422717,0.25142 -0.3656931,0.38855 -0.1234214,0.13713 -0.3199815,0.39769 -0.1919889,0.25599 -0.2925545,0.46169 -0.095994,0.2057 -0.1782754,0.50283 -0.07771,0.29255 -0.082281,0.60339 -0.5531109,0.0366 -1.3804916,0.0366 -0.8502365,0 -1.6913306,-0.0366 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.128 0,-0.53025 0.1325638,-0.99651 0.1325637,-0.46626 0.3428373,-0.79538 0.2102735,-0.32913 0.4662587,-0.61254 0.2559852,-0.28798 0.5119704,-0.5074 0.2559851,-0.22398 0.4662587,-0.41597 0.2102735,-0.19199 0.3428373,-0.38855 0.1325637,-0.19656 0.1325637,-0.38398 0,-0.5394 -0.754242,-0.5394 -0.612536,0 -1.5084841,0.31541 -0.891377,0.31084 -1.16564687,0.5074 z"
+         style="fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4827"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

resources/graphics/controllers/unknown.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="42"
+   height="42"
+   viewBox="0 0 11.1125 11.1125"
+   version="1.1"
+   id="svg4925"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="unknown.svg">
+  <defs
+     id="defs4919" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="16.892814"
+     inkscape:cx="-37.558608"
+     inkscape:cy="23.448283"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4922">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-285.88748)">
+    <g
+       aria-label="?"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.72348785px;line-height:1.25;font-family:Digitalt;-inkscape-font-specification:Digitalt;letter-spacing:0px;word-spacing:0px;fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="text4825"
+       transform="matrix(0.76718259,0,0,0.76718259,2.5170951,67.853186)">
+      <path
+         d="m 1.9437243,295.40006 q 0,-0.59882 0.013713,-1.25707 0.66739,-0.032 1.3530646,-0.032 0.6033936,0 1.5724804,0.032 0.073139,0 0.1279926,0.0548 0.054854,0.0549 0.054854,0.128 0.013713,0.74053 0.013713,1.40334 0,0.58968 -0.013713,1.24793 -0.4114048,0.0229 -0.9919426,0.0229 -0.8410942,0 -1.9336024,-0.0594 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.12799 -0.013713,-0.71768 -0.013713,-1.35764 z m -1.50391294,-9.11947 q 1.63190554,-0.39312 3.35523444,-0.39312 0.6811034,0 1.2205008,0.0777 0.5439685,0.0777 1.0147984,0.2697 0.475401,0.18741 0.7908113,0.48911 0.3154104,0.29713 0.4936858,0.76339 0.1828465,0.46625 0.1828465,1.07879 0,0.68567 -0.3016968,1.27078 -0.2971257,0.58511 -0.8182384,1.12908 -0.2422717,0.25142 -0.3656931,0.38855 -0.1234214,0.13713 -0.3199815,0.39769 -0.1919889,0.25599 -0.2925545,0.46169 -0.095994,0.2057 -0.1782754,0.50283 -0.07771,0.29255 -0.082281,0.60339 -0.5531109,0.0366 -1.3804916,0.0366 -0.8502365,0 -1.6913306,-0.0366 -0.07771,-0.005 -0.1325638,-0.0548 -0.050283,-0.0549 -0.050283,-0.128 0,-0.53025 0.1325638,-0.99651 0.1325637,-0.46626 0.3428373,-0.79538 0.2102735,-0.32913 0.4662587,-0.61254 0.2559852,-0.28798 0.5119704,-0.5074 0.2559851,-0.22398 0.4662587,-0.41597 0.2102735,-0.19199 0.3428373,-0.38855 0.1325637,-0.19656 0.1325637,-0.38398 0,-0.5394 -0.754242,-0.5394 -0.612536,0 -1.5084841,0.31541 -0.891377,0.31084 -1.16564687,0.5074 z"
+         style="fill:#f00000;fill-opacity:1;stroke:#000000;stroke-width:0.2605817;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4827"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

resources/graphics/controllers/wii_remote_nintendo.svg

@@ -0,0 +1,334 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="42"
+   height="42"
+   viewBox="0 0 11.1125 11.1125"
+   version="1.1"
+   id="svg4925"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="wii_remote_nintendo.svg">
+  <defs
+     id="defs4919" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.627417"
+     inkscape:cx="-16.659924"
+     inkscape:cy="14.555913"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4922">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-285.88748)">
+    <g
+       id="g5266">
+      <path
+         inkscape:connector-curvature="0"
+         id="path6"
+         d="m 4.492749,286.76443 c -0.150954,0 -0.274402,0.12397 -0.274402,0.27492 v 9.05681 c 0,0.15095 0.123448,0.27492 0.274402,0.27492 h 2.1270018 c 0.1509541,0 0.2744021,-0.12397 0.2744021,-0.27492 v -9.05681 c 0,-0.15095 -0.123448,-0.27492 -0.2744021,-0.27492 z"
+         style="fill:#f8f8f8;stroke:#000000;stroke-width:0.079375;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" />
+      <g
+         transform="matrix(0.03430772,0,0,0.03430772,13.275487,277.84072)"
+         id="g16">
+        <polyline
+           style="fill:#5c5c5c"
+           id="polyline8"
+           points="-231.1,505.2 -236.1,505.2 -236.1,510.2 -231.1,510.2 -231.1,505.2    " />
+        <polyline
+           style="fill:#5c5c5c"
+           id="polyline10"
+           points="-196.8,505.2 -201.8,505.2 -201.8,510.2 -196.8,510.2 -196.8,505.2    " />
+        <polyline
+           style="fill:#5c5c5c"
+           id="polyline12"
+           points="-213.9,505.2 -218.9,505.2 -218.9,510.2 -213.9,510.2 -213.9,505.2    " />
+        <polyline
+           style="fill:#11b3ef"
+           id="polyline14"
+           points="-248.2,505.2 -253.2,505.2 -253.2,510.2 -248.2,510.2 -248.2,505.2    " />
+      </g>
+      <circle
+         style="stroke-width:0.03430772"
+         id="circle18"
+         r="0.051461581"
+         cy="292.64108"
+         cx="5.8135581" />
+      <circle
+         style="stroke-width:0.03430772"
+         id="circle20"
+         r="0.051461581"
+         cy="292.64108"
+         cx="5.5562501" />
+      <circle
+         style="stroke-width:0.03430772"
+         id="circle22"
+         r="0.051461581"
+         cy="292.64108"
+         cx="5.2989421" />
+      <circle
+         style="stroke-width:0.03430772"
+         id="circle24"
+         r="0.051461581"
+         cy="292.43521"
+         cx="5.8135581" />
+      <circle
+         style="stroke-width:0.03430772"
+         id="circle26"
+         r="0.051461581"
+         cy="292.43521"
+         cx="5.5562501" />
+      <circle
+         style="stroke-width:0.03430772"
+         id="circle28"
+         r="0.051461581"
+         cy="292.43521"
+         cx="5.2989421" />
+      <circle
+         style="stroke-width:0.03430772"
+         id="circle30"
+         r="0.034307718"
+         cy="292.22937"
+         cx="5.8135581" />
+      <circle
+         style="stroke-width:0.03430772"
+         id="circle32"
+         r="0.034307718"
+         cy="292.22937"
+         cx="5.5562501" />
+      <circle
+         style="stroke-width:0.03430772"
+         id="circle34"
+         r="0.034307718"
+         cy="292.22937"
+         cx="5.2989421" />
+      <circle
+         style="stroke-width:0.03430772"
+         id="circle36"
+         r="0.017153859"
+         cy="292.02353"
+         cx="5.8135581" />
+      <circle
+         style="stroke-width:0.03430772"
+         id="circle38"
+         r="0.017153859"
+         cy="292.02353"
+         cx="5.5562501" />
+      <circle
+         style="stroke-width:0.03430772"
+         id="circle40"
+         r="0.017153859"
+         cy="292.02353"
+         cx="5.2989421" />
+      <circle
+         style="stroke-width:0.03430772"
+         id="circle42"
+         r="0.017153859"
+         cy="293.05276"
+         cx="5.8135581" />
+      <circle
+         style="stroke-width:0.03430772"
+         id="circle44"
+         r="0.017153859"
+         cy="293.05276"
+         cx="5.5562501" />
+      <circle
+         style="stroke-width:0.03430772"
+         id="circle46"
+         r="0.017153859"
+         cy="293.05276"
+         cx="5.2989421" />
+      <circle
+         style="stroke-width:0.03430772"
+         id="circle48"
+         r="0.034307718"
+         cy="292.84692"
+         cx="5.8135581" />
+      <circle
+         style="stroke-width:0.03430772"
+         id="circle50"
+         r="0.034307718"
+         cy="292.84692"
+         cx="5.5562501" />
+      <circle
+         style="stroke-width:0.03430772"
+         id="circle52"
+         r="0.034307718"
+         cy="292.84692"
+         cx="5.2989421" />
+      <path
+         style="fill:#b0b2b4;stroke-width:0.03430772;fill-opacity:1"
+         inkscape:connector-curvature="0"
+         id="path56"
+         d="M 5.6677502,287.6047 H 5.44475 c -0.024015,0 -0.0446,0.0309 -0.0446,0.072 v 0.40827 H 4.9918881 c -0.041169,0 -0.072046,0.0206 -0.072046,0.0446 v 0.223 c 0,0.024 0.030877,0.0446 0.072046,0.0446 H 5.40015 v 0.40826 c 0,0.0412 0.020585,0.072 0.0446,0.072 h 0.2230002 c 0.024015,0 0.0446,-0.0309 0.0446,-0.072 v -0.40826 H 6.120612 c 0.041169,0 0.072046,-0.0206 0.072046,-0.0446 v -0.223 c 0,-0.024 -0.030877,-0.0446 -0.072046,-0.0446 H 5.7123503 v -0.40827 c -0.00343,-0.0412 -0.020585,-0.072 -0.0446,-0.072" />
+      <rect
+         style="fill:#818285;stroke-width:0.03430772"
+         id="rect58"
+         height="0.034307718"
+         width="0.23672327"
+         y="288.22568"
+         x="5.026196" />
+      <rect
+         style="fill:#818285;stroke-width:0.03430772"
+         id="rect60"
+         height="0.034307718"
+         width="0.23672327"
+         y="288.22568"
+         x="5.8461504" />
+      <rect
+         style="fill:#818285;stroke-width:0.03430772"
+         id="rect62"
+         height="0.23672327"
+         width="0.034307718"
+         y="287.70074"
+         x="5.5373812" />
+      <rect
+         style="fill:#818285;stroke-width:0.03430772"
+         id="rect64"
+         height="0.23672327"
+         width="0.034307718"
+         y="288.54474"
+         x="5.5373812" />
+      <path
+         style="fill:#bdbebf;stroke-width:0.03430772"
+         inkscape:connector-curvature="0"
+         id="path66"
+         d="m 4.8426494,287.41257 c -0.1338001,0 -0.240154,-0.10635 -0.240154,-0.24015 0,-0.1338 0.1063539,-0.24015 0.240154,-0.24015 0.1338001,0 0.2401541,0.10635 0.2401541,0.24015 0,0.1338 -0.106354,0.24015 -0.2401541,0.24015 z" />
+      <circle
+         style="fill:#e7e8e9;stroke-width:0.03430772"
+         id="circle68"
+         r="0.22986172"
+         cy="287.16898"
+         cx="4.8426495" />
+      <path
+         style="fill:#bf1e2e;stroke-width:0.03430772"
+         inkscape:connector-curvature="0"
+         id="path70"
+         d="m 4.8426494,287.30622 c -0.061754,0 -0.1097847,-0.048 -0.1097847,-0.10978 0,-0.0618 0.048031,-0.10979 0.1097847,-0.10979 0.061754,0 0.1097847,0.048 0.1097847,0.10979 0,0.0618 -0.048031,0.10978 -0.1097847,0.10978 z m 0,-0.18526 c -0.041169,0 -0.075477,0.0343 -0.075477,0.0755 0,0.0412 0.034308,0.0755 0.075477,0.0755 0.041169,0 0.075477,-0.0343 0.075477,-0.0755 0,-0.0412 -0.034308,-0.0755 -0.075477,-0.0755 z" />
+      <rect
+         style="fill:#e7e8e9;stroke-width:0.03430772"
+         id="rect72"
+         height="0.20241556"
+         width="0.075476989"
+         y="287.02832"
+         x="4.8049111" />
+      <rect
+         style="fill:#bf1e2e;stroke-width:0.03430772"
+         id="rect74"
+         height="0.16810784"
+         width="0.034307718"
+         y="287.04205"
+         x="4.8254952" />
+      <path
+         style="fill:#b0b2b4;stroke-width:0.03430772;fill-opacity:1"
+         inkscape:connector-curvature="0"
+         id="path76"
+         d="m 5.55625,290.20522 c -0.2504463,0 -0.4528619,-0.20584 -0.4528619,-0.45629 0,-0.25045 0.2024156,-0.45629 0.4528619,-0.45629 0.2504464,0 0.4528619,0.20584 0.4528619,0.45629 0,0.25045 -0.2024155,0.45629 -0.4528619,0.45629 z" />
+      <path
+         style="fill:#b0b2b4;stroke-width:0.03430772;fill-opacity:1"
+         inkscape:connector-curvature="0"
+         id="path84"
+         d="m 5.5562499,291.35453 c -0.1338001,0 -0.240154,-0.10635 -0.240154,-0.24015 0,-0.1338 0.1063539,-0.24016 0.240154,-0.24016 0.1338001,0 0.2401541,0.10636 0.2401541,0.24016 0,0.1338 -0.106354,0.24015 -0.2401541,0.24015" />
+      <path
+         style="fill:#b0b2b4;stroke-width:0.03430772;fill-opacity:1"
+         inkscape:connector-curvature="0"
+         id="path92"
+         d="m 4.8460801,291.35453 c -0.1338001,0 -0.240154,-0.10635 -0.240154,-0.24015 0,-0.1338 0.1063539,-0.24016 0.240154,-0.24016 0.1338001,0 0.2401541,0.10636 0.2401541,0.24016 0,0.1338 -0.1097847,0.24015 -0.2401541,0.24015 z" />
+      <path
+         style="fill:#b0b2b4;stroke-width:0.03430772;fill-opacity:1"
+         inkscape:connector-curvature="0"
+         id="path100"
+         d="m 6.2664197,291.35453 c -0.1338001,0 -0.240154,-0.10635 -0.240154,-0.24015 0,-0.1338 0.1063539,-0.24016 0.240154,-0.24016 0.1338002,0 0.2401541,0.10636 0.2401541,0.24016 0,0.1338 -0.1063539,0.24015 -0.2401541,0.24015 z" />
+      <path
+         style="fill:#b0b2b4;stroke-width:0.03430772;fill-opacity:1"
+         inkscape:connector-curvature="0"
+         id="path112"
+         d="m 5.5562499,294.04083 c -0.1886924,0 -0.3396464,-0.15096 -0.3396464,-0.33965 0,-0.18869 0.150954,-0.33965 0.3396464,-0.33965 0.1886925,0 0.3396465,0.15096 0.3396465,0.33965 0,0.18869 -0.150954,0.33965 -0.3396465,0.33965 z" />
+      <path
+         style="fill:#b0b2b4;stroke-width:0.03430772;fill-opacity:1"
+         inkscape:connector-curvature="0"
+         id="path120"
+         d="m 5.5562499,294.97056 c -0.1886924,0 -0.3396464,-0.15095 -0.3396464,-0.33964 0,-0.18869 0.150954,-0.33965 0.3396464,-0.33965 0.1886925,0 0.3396465,0.15096 0.3396465,0.33965 0,0.18869 -0.150954,0.33964 -0.3396465,0.33964 z" />
+      <rect
+         style="fill:#7a7b7e;stroke-width:0.03430772;fill-opacity:1"
+         id="rect126"
+         height="0.33278489"
+         width="0.068615437"
+         y="295.66016"
+         x="5.9233427" />
+      <rect
+         style="fill:#7a7b7e;stroke-width:0.03430772;fill-opacity:1"
+         id="rect128"
+         height="0.072046205"
+         width="0.068615437"
+         y="295.52979"
+         x="5.9233427" />
+      <rect
+         style="fill:#7a7b7e;stroke-width:0.03430772;fill-opacity:1"
+         id="rect130"
+         height="0.33278489"
+         width="0.068615437"
+         y="295.66016"
+         x="5.7552347" />
+      <rect
+         style="fill:#7a7b7e;stroke-width:0.03430772;fill-opacity:1"
+         id="rect132"
+         height="0.072046205"
+         width="0.068615437"
+         y="295.52979"
+         x="5.7552347" />
+      <polygon
+         transform="matrix(0.03430772,0,0,0.03430772,13.206872,277.84072)"
+         style="fill:#7a7b7e;fill-opacity:1"
+         id="polygon134"
+         points="-226.3,515.5 -223.6,525.3 -220.8,515.5 -218.9,516.1 -222.6,529.2 -224.5,529.2 -227.3,519.5 -230.1,529.2 -232,529.2 -235.7,516.1 -233.8,515.5 -231,525.3 -228.2,515.5 " />
+      <rect
+         y="291.8157"
+         x="3.3556859"
+         height="1.6210666"
+         width="4.0409198"
+         id="rect5212"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:none;stroke-width:0.10874375;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <rect
+         y="287.48111"
+         x="3.993932"
+         height="1.5779947"
+         width="2.6900308"
+         id="rect5214"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:none;stroke-width:0.10874375;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+    </g>
+  </g>
+</svg>

resources/graphics/controllers/wii_remote_nunchuck_nintendo.svg

@@ -0,0 +1,368 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="42"
+   height="42"
+   viewBox="0 0 11.1125 11.1125"
+   version="1.1"
+   id="svg4925"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="wii_remote_nunchuck_nintendo.svg">
+  <defs
+     id="defs4919" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="32"
+     inkscape:cx="3.7670704"
+     inkscape:cy="20.243876"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2065"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:snap-bbox="true" />
+  <metadata
+     id="metadata4922">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-285.88748)">
+    <g
+       id="g5629"
+       transform="matrix(0.97763205,0,0,0.97763205,0.12423766,6.4933408)">
+      <path
+         id="path188"
+         d="m 3.330473,296.25878 c -0.6814899,0 -0.8835396,-1.82872 -1.0821648,-3.5958 -0.034246,-0.29793 -0.068491,-0.60615 -0.1027371,-0.89723 -0.1678041,-1.35271 0.1335583,-2.01708 0.4177977,-2.33556 0.2260218,-0.25684 0.5239596,-0.3904 0.8629922,-0.3904 0.3390326,0 0.6369704,0.13356 0.8629921,0.3904 0.2808149,0.31848 0.5821773,0.98285 0.4177978,2.33556 -0.034246,0.29108 -0.068491,0.5993 -0.1027372,0.89723 -0.1952006,1.76708 -0.4006749,3.5958 -1.0821647,3.5958 z"
+         inkscape:connector-curvature="0"
+         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.10556875;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <polygon
+         transform="matrix(0.03424572,0,0,0.03424572,15.149569,277.85171)"
+         id="polygon192"
+         points="-326.6,358.3 -320.1,374.1 -326.6,389.8 -342.3,396.4 -358.1,389.8 -364.6,374.1 -358.1,358.3 -342.3,351.8 "
+         style="fill:#b0b2b4;fill-opacity:1" />
+      <circle
+         style="fill:#efefef;fill-opacity:1;stroke-width:0.03424572"
+         cx="3.4272597"
+         cy="290.66302"
+         r="0.51368582"
+         id="circle198" />
+    </g>
+    <g
+       id="g5624"
+       transform="matrix(0.97763205,0,0,0.97763205,0.12423766,6.4932822)">
+      <path
+         inkscape:connector-curvature="0"
+         id="path6"
+         d="m 6.6137471,286.68123 c -0.150954,0 -0.274402,0.12359 -0.274402,0.27409 v 9.02943 c 0,0.1505 0.123448,0.27409 0.274402,0.27409 h 2.1270018 c 0.1509541,0 0.2744021,-0.12359 0.2744021,-0.27409 v -9.02943 c 0,-0.1505 -0.123448,-0.27409 -0.2744021,-0.27409 z"
+         style="fill:#fefefe;fill-opacity:1;stroke:#000000;stroke-width:0.10556875;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <g
+         transform="matrix(0.03430772,0,0,0.03420402,15.396485,277.78449)"
+         id="g16">
+        <polyline
+           style="fill:#5c5c5c"
+           id="polyline8"
+           points="-231.1,505.2 -236.1,505.2 -236.1,510.2 -231.1,510.2 -231.1,505.2    " />
+        <polyline
+           style="fill:#5c5c5c"
+           id="polyline10"
+           points="-196.8,505.2 -201.8,505.2 -201.8,510.2 -196.8,510.2 -196.8,505.2    " />
+        <polyline
+           style="fill:#5c5c5c"
+           id="polyline12"
+           points="-213.9,505.2 -218.9,505.2 -218.9,510.2 -213.9,510.2 -213.9,505.2    " />
+        <polyline
+           style="fill:#11b3ef"
+           id="polyline14"
+           points="-248.2,505.2 -253.2,505.2 -253.2,510.2 -248.2,510.2 -248.2,505.2    " />
+      </g>
+      <path
+         style="fill:#b0b2b4;fill-opacity:1;stroke-width:0.03425583"
+         inkscape:connector-curvature="0"
+         id="path56"
+         d="M 7.7887483,287.51896 H 7.5657481 c -0.024015,0 -0.0446,0.0308 -0.0446,0.0718 v 0.40704 H 7.1128862 c -0.041169,0 -0.072046,0.0205 -0.072046,0.0445 v 0.22233 c 0,0.0239 0.030877,0.0445 0.072046,0.0445 h 0.4082619 v 0.40703 c 0,0.0411 0.020585,0.0718 0.0446,0.0718 h 0.2230002 c 0.024015,0 0.0446,-0.0308 0.0446,-0.0718 v -0.40703 h 0.4082618 c 0.041169,0 0.072046,-0.0205 0.072046,-0.0445 v -0.22233 c 0,-0.0239 -0.030877,-0.0445 -0.072046,-0.0445 H 7.8333484 v -0.40704 c -0.00343,-0.0411 -0.020585,-0.0718 -0.0446,-0.0718" />
+      <rect
+         style="fill:#818285;stroke-width:0.03425583"
+         id="rect58"
+         height="0.034204017"
+         width="0.23672327"
+         y="288.13806"
+         x="7.1471944" />
+      <rect
+         style="fill:#818285;stroke-width:0.03425583"
+         id="rect60"
+         height="0.034204017"
+         width="0.23672327"
+         y="288.13806"
+         x="7.9671488" />
+      <rect
+         style="fill:#818285;stroke-width:0.03425583"
+         id="rect62"
+         height="0.23600774"
+         width="0.034307718"
+         y="287.61472"
+         x="7.6583796" />
+      <rect
+         style="fill:#818285;stroke-width:0.03425583"
+         id="rect64"
+         height="0.23600774"
+         width="0.034307718"
+         y="288.45615"
+         x="7.6583796" />
+      <path
+         style="fill:#bdbebf;stroke-width:0.03425583"
+         inkscape:connector-curvature="0"
+         id="path66"
+         d="m 6.9636475,287.32741 c -0.1338001,0 -0.240154,-0.10603 -0.240154,-0.23942 0,-0.1334 0.1063539,-0.23943 0.240154,-0.23943 0.1338001,0 0.2401541,0.10603 0.2401541,0.23943 0,0.13339 -0.106354,0.23942 -0.2401541,0.23942 z" />
+      <ellipse
+         ry="0.22916692"
+         rx="0.22986172"
+         style="fill:#e7e8e9;stroke-width:0.03425583"
+         id="circle68"
+         cy="287.08456"
+         cx="6.9636478" />
+      <path
+         style="fill:#bf1e2e;stroke-width:0.03425583"
+         inkscape:connector-curvature="0"
+         id="path70"
+         d="m 6.9636475,287.22138 c -0.061754,0 -0.1097847,-0.0478 -0.1097847,-0.10945 0,-0.0616 0.048031,-0.10945 0.1097847,-0.10945 0.061754,0 0.1097847,0.0478 0.1097847,0.10945 0,0.0616 -0.048031,0.10945 -0.1097847,0.10945 z m 0,-0.1847 c -0.041169,0 -0.075477,0.0342 -0.075477,0.0753 0,0.0411 0.034308,0.0753 0.075477,0.0753 0.041169,0 0.075477,-0.0342 0.075477,-0.0753 0,-0.0411 -0.034308,-0.0753 -0.075477,-0.0753 z" />
+      <rect
+         style="fill:#e7e8e9;stroke-width:0.03425583"
+         id="rect72"
+         height="0.20180373"
+         width="0.075476989"
+         y="286.94434"
+         x="6.9259095" />
+      <rect
+         style="fill:#bf1e2e;stroke-width:0.03425583"
+         id="rect74"
+         height="0.16759971"
+         width="0.034307718"
+         y="286.95801"
+         x="6.9464936" />
+      <path
+         style="fill:#b0b2b4;fill-opacity:1;stroke-width:0.03425583"
+         inkscape:connector-curvature="0"
+         id="path76"
+         d="m 7.6772481,290.11162 c -0.2504463,0 -0.4528619,-0.20522 -0.4528619,-0.45491 0,-0.24969 0.2024156,-0.45491 0.4528619,-0.45491 0.2504464,0 0.4528619,0.20522 0.4528619,0.45491 0,0.24969 -0.2024155,0.45491 -0.4528619,0.45491 z" />
+      <path
+         style="fill:#b0b2b4;fill-opacity:1;stroke-width:0.03425583"
+         inkscape:connector-curvature="0"
+         id="path84"
+         d="m 7.677248,291.25746 c -0.1338001,0 -0.240154,-0.10603 -0.240154,-0.23943 0,-0.13339 0.1063539,-0.23943 0.240154,-0.23943 0.1338001,0 0.2401541,0.10604 0.2401541,0.23943 0,0.1334 -0.106354,0.23943 -0.2401541,0.23943" />
+      <path
+         style="fill:#b0b2b4;fill-opacity:1;stroke-width:0.03425583"
+         inkscape:connector-curvature="0"
+         id="path92"
+         d="m 6.9670782,291.25746 c -0.1338001,0 -0.240154,-0.10603 -0.240154,-0.23943 0,-0.13339 0.1063539,-0.23943 0.240154,-0.23943 0.1338001,0 0.2401541,0.10604 0.2401541,0.23943 0,0.1334 -0.1097847,0.23943 -0.2401541,0.23943 z" />
+      <path
+         style="fill:#b0b2b4;fill-opacity:1;stroke-width:0.03425583"
+         inkscape:connector-curvature="0"
+         id="path100"
+         d="m 8.3874178,291.25746 c -0.1338001,0 -0.240154,-0.10603 -0.240154,-0.23943 0,-0.13339 0.1063539,-0.23943 0.240154,-0.23943 0.1338002,0 0.2401541,0.10604 0.2401541,0.23943 0,0.1334 -0.1063539,0.23943 -0.2401541,0.23943 z" />
+      <path
+         style="fill:#b0b2b4;fill-opacity:1;stroke-width:0.03425583"
+         inkscape:connector-curvature="0"
+         id="path112"
+         d="m 7.677248,293.93564 c -0.1886924,0 -0.3396464,-0.15051 -0.3396464,-0.33863 0,-0.18812 0.150954,-0.33862 0.3396464,-0.33862 0.1886925,0 0.3396465,0.1505 0.3396465,0.33862 0,0.18812 -0.150954,0.33863 -0.3396465,0.33863 z" />
+      <path
+         style="fill:#b0b2b4;fill-opacity:1;stroke-width:0.03425583"
+         inkscape:connector-curvature="0"
+         id="path120"
+         d="m 7.677248,294.86256 c -0.1886924,0 -0.3396464,-0.1505 -0.3396464,-0.33862 0,-0.18812 0.150954,-0.33862 0.3396464,-0.33862 0.1886925,0 0.3396465,0.1505 0.3396465,0.33862 0,0.18812 -0.150954,0.33862 -0.3396465,0.33862 z" />
+      <rect
+         style="fill:#7a7b7e;fill-opacity:1;stroke-width:0.03425583"
+         id="rect126"
+         height="0.331779"
+         width="0.068615437"
+         y="295.55008"
+         x="8.0443411" />
+      <rect
+         style="fill:#7a7b7e;fill-opacity:1;stroke-width:0.03425583"
+         id="rect128"
+         height="0.071828432"
+         width="0.068615437"
+         y="295.4201"
+         x="8.0443411" />
+      <rect
+         style="fill:#7a7b7e;fill-opacity:1;stroke-width:0.03425583"
+         id="rect130"
+         height="0.331779"
+         width="0.068615437"
+         y="295.55008"
+         x="7.8762331" />
+      <rect
+         style="fill:#7a7b7e;fill-opacity:1;stroke-width:0.03425583"
+         id="rect132"
+         height="0.071828432"
+         width="0.068615437"
+         y="295.4201"
+         x="7.8762331" />
+      <polygon
+         transform="matrix(0.03430772,0,0,0.03420402,15.32787,277.78449)"
+         style="fill:#7a7b7e;fill-opacity:1"
+         id="polygon134"
+         points="-227.3,519.5 -230.1,529.2 -232,529.2 -235.7,516.1 -233.8,515.5 -231,525.3 -228.2,515.5 -226.3,515.5 -223.6,525.3 -220.8,515.5 -218.9,516.1 -222.6,529.2 -224.5,529.2 " />
+      <rect
+         y="287.39575"
+         x="6.1149302"
+         height="1.573225"
+         width="2.6900308"
+         id="rect5214"
+         style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:none;stroke-width:0.10857928;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+      <ellipse
+         ry="0.051306032"
+         rx="0.051461581"
+         style="stroke-width:0.03425583"
+         id="circle18-5"
+         cy="292.54013"
+         cx="7.934556" />
+      <ellipse
+         ry="0.051306032"
+         rx="0.051461581"
+         style="stroke-width:0.03425583"
+         id="circle20-6"
+         cy="292.54013"
+         cx="7.677248" />
+      <ellipse
+         ry="0.051306032"
+         rx="0.051461581"
+         style="stroke-width:0.03425583"
+         id="circle22-6"
+         cy="292.54013"
+         cx="7.41994" />
+      <ellipse
+         ry="0.051306032"
+         rx="0.051461581"
+         style="stroke-width:0.03425583"
+         id="circle24-4"
+         cy="292.33487"
+         cx="7.934556" />
+      <ellipse
+         ry="0.051306032"
+         rx="0.051461581"
+         style="stroke-width:0.03425583"
+         id="circle26-0"
+         cy="292.33487"
+         cx="7.677248" />
+      <ellipse
+         ry="0.051306032"
+         rx="0.051461581"
+         style="stroke-width:0.03425583"
+         id="circle28-0"
+         cy="292.33487"
+         cx="7.41994" />
+      <ellipse
+         ry="0.034204017"
+         rx="0.034307718"
+         style="stroke-width:0.03425583"
+         id="circle30-4"
+         cy="292.12964"
+         cx="7.934556" />
+      <ellipse
+         ry="0.034204017"
+         rx="0.034307718"
+         style="stroke-width:0.03425583"
+         id="circle32-6"
+         cy="292.12964"
+         cx="7.677248" />
+      <ellipse
+         ry="0.034204017"
+         rx="0.034307718"
+         style="stroke-width:0.03425583"
+         id="circle34-2"
+         cy="292.12964"
+         cx="7.41994" />
+      <ellipse
+         ry="0.017102009"
+         rx="0.017153859"
+         style="stroke-width:0.03425583"
+         id="circle36-6"
+         cy="291.92444"
+         cx="7.934556" />
+      <ellipse
+         ry="0.017102009"
+         rx="0.017153859"
+         style="stroke-width:0.03425583"
+         id="circle38-7"
+         cy="291.92444"
+         cx="7.677248" />
+      <ellipse
+         ry="0.017102009"
+         rx="0.017153859"
+         style="stroke-width:0.03425583"
+         id="circle40-5"
+         cy="291.92444"
+         cx="7.41994" />
+      <ellipse
+         ry="0.017102009"
+         rx="0.017153859"
+         style="stroke-width:0.03425583"
+         id="circle42-6"
+         cy="292.95056"
+         cx="7.934556" />
+      <ellipse
+         ry="0.017102009"
+         rx="0.017153859"
+         style="stroke-width:0.03425583"
+         id="circle44-9"
+         cy="292.95056"
+         cx="7.677248" />
+      <ellipse
+         ry="0.017102009"
+         rx="0.017153859"
+         style="stroke-width:0.03425583"
+         id="circle46-8"
+         cy="292.95056"
+         cx="7.41994" />
+      <ellipse
+         ry="0.034204017"
+         rx="0.034307718"
+         style="stroke-width:0.03425583"
+         id="circle48-7"
+         cy="292.74533"
+         cx="7.934556" />
+      <ellipse
+         ry="0.034204017"
+         rx="0.034307718"
+         style="stroke-width:0.03425583"
+         id="circle50-2"
+         cy="292.74533"
+         cx="7.677248" />
+      <ellipse
+         ry="0.034204017"
+         rx="0.034307718"
+         style="stroke-width:0.03425583"
+         id="circle52-8"
+         cy="292.74533"
+         cx="7.41994" />
+    </g>
+  </g>
+</svg>

resources/graphics/fav_add.svg

@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="64" height="64" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
-	<line stroke-width="4" x1="2" y1="32" x2="62" y2="32" stroke="#777"/>
-	<line stroke-width="4" x1="32" y1="2" x2="32" y2="62" stroke="#777"/>
-</svg>

resources/graphics/fav_remove.svg

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="64" height="64" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
-	<line stroke-width="4" x1="2" y1="32" x2="62" y2="32" stroke="#777"/>
-</svg>