Skip to content
BranchesTags
 
 

Repository files navigation

Canvas DS (Rocknix)

Canvas DS is a dual screen adaptation of my favorite ES-DE theme Canvas-ES originally designed for the Anbernic RG DS, with an AYN Thor adaptation.

I tried to adapt and extend as much functionality from the original theme as possible to look good on a dual screen setup while remaining faithful to the original theme's colors, art, icons and layout.

This project is built using Canvas (ES Version) as a core framework, heavily adapted to natively support dual-screen aspect ratios inspired by structural layouts from the dii-ess-aye theme.

Supported devices

Canvas DS includes separate Anbernic RG DS and AYN Thor layouts for ROCKNIX. Select 4:3 (or Automatic when available) for RG DS, or AYN Thor for Thor, under the theme's Aspect Ratio option. Thor variables, status widgets, and layout overrides load only when AYN Thor is selected.

Known Issues (that won't be fixed)

  1. Keyboard and horizontally longer popups are incorrectly sized.
  2. Advanced Game Options is hidden.
  • Workaround by pressing your Advanced Game Options button twice.
  1. Slider setting bars are way too long.

AYN Thor

The Thor layout places the system picker on the lower screen and system artwork and game lists on the upper screen. It includes a right-aligned clock and battery display, a left-aligned system game count, and a separate preview and list layout for Tools.

Install and enable automatic startup

  1. Clone or download this repository and copy its theme files to /storage/.config/emulationstation/themes/canvas-ds-thor on the device. Exclude local .git and .idea directories. The folder must be named canvas-ds-thor because the startup scripts use that path.
  2. Select canvas-ds-thor under User Interface Settings → Theme Set in EmulationStation, then set Aspect Ratio → AYN Thor in the theme configuration. When updating an existing installation, select this option explicitly; the directory name alone does not choose the Thor layout.
  3. Connect to the device over SSH and run:
THEME_DIR=/storage/.config/emulationstation/themes/canvas-ds-thor
mkdir -p /storage/.config/autostart
chmod +x "$THEME_DIR/scripts/autostart_thor.sh" "$THEME_DIR/scripts/start_es_thor.sh"
ln -sfn "$THEME_DIR/scripts/autostart_thor.sh" /storage/.config/autostart/canvas-ds-thor.sh
/storage/.config/autostart/canvas-ds-thor.sh
systemctl restart essway

This activates the layout immediately and enables it after reboot. The startup hook only applies when canvas-ds-thor is the selected theme. Keep the scripts in the theme's scripts/ directory; the Thor installation does not require copying them into Ports.

Update

Copy the updated project files into the same theme directory, then run the activation commands above again. The autostart entry links to the deployed script, so there is no separate copy to update. Make theme and startup changes in this repository before deploying them.

Disable or uninstall

Remove the startup link on the device:

rm /storage/.config/autostart/canvas-ds-thor.sh

Select another theme and reboot. ROCKNIX restores its standard launcher and display configuration on boot. You can then delete /storage/.config/emulationstation/themes/canvas-ds-thor if you want to remove the theme completely.

Startup scripts

Script Purpose
scripts/autostart_thor.sh Runs before ROCKNIX starts its UI and bind-mounts the project launcher over /usr/bin/start_es.sh.
scripts/start_es_thor.sh Runs after Sway starts, applies the display setup, and launches EmulationStation at 4400×1080.
scripts/enable_theme_thor.sh Defines the display setup and generates /storage/.config/sway/config.

The generated Sway configuration is not a source file. Edit its heredoc in scripts/enable_theme_thor.sh to change it. The launcher sets CANVAS_SKIP_BIND=1 when invoking the enable script to avoid mounting itself again. The launcher mount is temporary; the startup hook reapplies it after reboot.

Display geometry and limitations

The desktop is 4400×1080, arranged as follows:

Output Position Size
Hidden output x=0 1240×1080
Upper screen x=1240 1920×1080
Lower screen x=3160 1240×1080

Both physical outputs use a 90-degree transform. The theme coordinates and wallpaper crops depend on this arrangement.

The Thor adaptation currently uses fixed light-color settings and device-specific layout overrides. The upstream color schemes, grid settings, and previews below do not all describe the Thor layout. The Tools-specific detailed layout applies only to Tools; other detailed views retain their existing layout. The menu and popup limitations listed above still apply.

Anbernic RG DS installation

Use the RG DS scripts and select Aspect Ratio → 4:3 (or Automatic when available). The Thor-specific overrides are excluded from this layout.

  1. Download or clone this repository. You can use the release page to download the theme.
  2. Copy the contents of this repository into your themes folder under a folder named canvas-ds
  • Either connect to your network share and put it in the themes folder
  • Or copy it to /STORAGE/.config/emulationstation/themes/ directly
  1. Copy enable_theme_rgds.sh and start_es_rgds.sh from this repository's scripts folder into your roms/ports folder:
  • !!! NOTE: If you downloaded the theme as a zip, you may need to re-enable execution on the enable_theme_*.sh script either after extraction on your computer or on the device via ssh. Use chmod +x enable_theme_*.sh for either method.
  1. After updating your gamelists, open your ports section on your device and
  • Either run your device's enable_theme_*.sh script every time you want to enable the theme
    • (You will have to manually change the theme setting when you want to switch back)
  • Or set your device's enable_theme_*.sh script to run at launch by opening the Advanced Game Options (remember you can access this by pressing X twice) and turning on that option
    • Optionally, set the enable script's metadata Hidden option if you don't want it to clutter the ports

For Users who previously installed the DII-ESS-AYE theme.

If you previously installed the dii-ess-aye theme you still need to replace the enable_theme_rgds.sh and also copy the start_es_rgds.sh to the /roms/ports folder.

The enable_theme_rgds.sh from dii-ess-aye theme will also change your theme selection so you will have to swap themes everytime you start your device. I rewrote the enable_theme_rgds.sh to be theme agnostic. This is also why we need to copy the start_es_rgds.sh into the /roms/ports folder so we do not need to go and search it in dii-ess-eye or canvas-ds folders.

Uninstall on RG DS

  1. If your enable script is set to auto start: Start Menu -> System Settings -> Frontend Developer Options -> Stop Running This Game At Startup
  2. Switch your theme back to SYSTEM-THEME: Start Menu -> User Inferface Settings -> Theme Set
  3. Reboot
  4. If your enable and start scripts are hidden either manually delete the scripts completely from /roms/ports, or
  5. Go to Start Menu -> User Interface Settings -> Enable Show Hidden Files
  6. Go to your Ports section in EmulationStation and highlight the script
  7. Press X -> Edit This Game's Metadata -> Select the DELETE button at the bottom

Preview of some of the Variants, Font Sizes, and Color Schemes

Color Variant Top View Bottom View
Dark System Grid & Art dark_top_systemview dark_bottom_systemview
Dark Game Grid & Metadata On dark_top_gameview dark_bottom_gameview
Light System Carousel & Art carousel_top_systemview.png carousel_bottom_systemview.png
Neon System Grid & Icon neon_top_systemview.png neon_bottom_systemview.png
SNES System Grid & Icon sness_top_systemview.png sness_bottom_systemview.png
Retro Custom Grid 5X3 & Metadata Off retro_top_gameview.png retro_bottom_gameview.png
Famicom Detailed Game View & Metadata On famicom_top_detailedview.png famicom_bottom_detailedview.png

Configuration Options

  • This theme has a simple set of options that can be changed directly from the UI Settings menu of EmulationStation.

Gamelist Style

  • Gamelist View Style - sets the style of the gamelist View.

    • Detailed - A simple text list of games and metadata on the bottom.
    • Grid - A grid of boxart/video preview and minimal metadata below for games.
    • GameCarousel - A carousel of game marquees and metadata on the left.

  • Default Grid Style - Sets the rows/columns of the grid views. The theme will scale optimally based on the Automatic Grid Rows/Columns below if left as Automatic.

Theme Options

  • System View - sets the style of the System View.

    • Grid - A system grid with either System Icons or Game Artwork.
    • Carousel - A system carousel with either System Icons or Game Artwork.

  • System Grid Size - sets the size of the Grid within the System View.

    • Automatic - Recommended sizing based on your aspect ratio.
    • 3x1, 3x2, 3x3, 4x2, 4x3, 4x4, 5x4 - Other available sizes.

  • System Icon Style - sets the style of the icons in the System View

    • Art - Box of iconic art for each system with Logo beneath.
    • Icons - Controller and Logo for each system.

  • Theme Color Scheme - There are 8 color schemes to choose from that each change the color palette and wallpaper of the theme across all views. Each wallpaper can easily be swapped out by the user for further customization. Alternate options are included within the theme as examples:

    • Light - A light grayscale color scheme.
    • Dark - A dark grayscale color scheme.
    • Neon - A retro neon color scheme.
    • Pastel - A light and bright color scheme.
    • Sony - A blue/white style using PSP colors.
    • SNES - A gray/purple style using Super Nintendo colors.
    • Famicom - A red/gold style using Nintendo Famicom colors.
    • Retro - A striped vintage color scheme.
    • Custom - Directs to the theme-customizations folder for your Distribution. Custom colors.xml, Art folders, Icon folders, and a wallpaper can be set.

  • Theme Font Size - enables you to change the size of the fonts displayed in the theme. It will also scale the size of the system carousel.

    • Small - good for display on tvs and large handheld screens at 6 inches or larger.
    • Medium - good for display on handheld screens at 3.5 inches or larger.
    • Large - good for display on small handheld screens at 3.5 inches or smaller.

  • Metadata - enables you to disable the game details and only display the image.

    • On
    • Off

  • Metadata Rating/Playtime - A toggle to either display the game's metacritic rating or your playtime.

    • Rating
    • Playtime

Gamelist Theme Options

  • Metadata Image Type - enables you to change the image above the metadata.

    • Image - Show only the scraped game image.
    • Boxart - Show only the scraped game boxart.
    • Miximage - Compile a Miximage with boxart, marquee, and screenshot.

  • Automatic Grid Size - enables you to change the number of rows for the Grid view when Default Grid Size is set to Automatic. It will scale correctly to optimize screen space per system.

    • Automatic - Will select an optimized row choice for your aspect ratio.

    • 2 Rows

    • 3 Rows

    • 4 Rows

    • Automatic - Will select an optimized column choice for your aspect ratio.

    • 2 Columns

    • 3 Columns

    • 4 Columns

Theme Customizations

This theme allows customizations to artwork without the need to edit the source XML. This follows the default Art-Book-Next customization directions for alignment.

You will need to add your theme customizations on to the next folder found at the root of this theme in theme-customizations/.

System View Art

  • Create the folder called artwork in the theme customization directory mentioned above.
  • Create your custom artwork as a 1-1 aspect ratio square image.
  • Export your final images as webp, pngs, or jpgs.
  • They can be named:
    • ${system.theme}.webp
    • ${system.theme}.png
    • ${system.theme}.jpg
  • The theme will look them them up in that order. If a given image is not found in your folder then the the images from the theme will be used as a fallback. This allows you to customize only the images you want and still have images displayed for all systems.
  • ${system.theme}.webp should be named for the system you are looking to override. For example if you wanted to override the artwork for snes you would create an image called snes.webp in the artwork folder. Once your images are in place you turn on custom images by changing the System Icon Style setting to Custom (Art).

System View Icons

  • Create the folder called icons in the theme customization directory chosen above.
  • Create your custom icon following the other systems location and size.
  • Export your final images as webp or pngs.
  • They can be named:
    • ${system.theme}.webp
    • ${system.theme}.png
  • The theme will look them them up in that order. If a given image is not found in your folder then the the images from the theme will be used as a fallback. This allows you to customize only the images you want and still have images displayed for all systems.
  • ${system.theme}.webp should be named for the system you are looking to override. For example if you wanted to override the icons for snes you would create an image called snes.webp in the icons folder. Once your images are in place you turn on custom images by changing the System Icon Style setting to Custom (Icons).

Wallpapers and Color Schemes

  • Locate the folder wallpapers within Emulation Stations' theme directory at: canvas-ds/wallpapers

  • Inside are .webp images named after the color schemes.

  • Save over any of these with your new wallpaper (or a new jpg image) to change that color scheme look.

  • Alternate wallpapers are also stored in the "Alternate" folder as an example. But this images have not been modified to look well on dual screen setup.

  • Alternatively, use the color scheme Custom to point to a .jpg or .webp file named custom within theme-customizations\wallpapers. The theme will default to themes\canvas-ds\wallpapers\custom.webp if no wallpaper is found.

  • Choosing Custom also allows a new color scheme to be created within theme-customizations\colors.xml. If no file is present, it will default to the custom color scheme within themes\canvas-ds\colors.xml however this will be overriden if the theme is updated.

Customization Examples

I have included 2 examples on how to customize the theme.

Check them out along with further explanation on how to customize the theme here

Acknowledgments

Code structure, file layouts, tips, and theme paths were guided by the outlines from Ant - ArtBookNext as well as with the help and inspiration from dii-ess-aye to achieve dual screen layout on RG-DS

Artwork was designed and created by the following artists and credit is provided to them.

License

Creative Commons CC-BY-NC-SA - https://creativecommons.org/licenses/by-nc-sa/2.0/ You are free to share and adapt this theme as long as you provide attribution back to me (and the above credits) as well share any updates you make under the same licence terms.

About

A dual screen port of canvas-es theme for RG DS and AYN THOR on ROCKNIX

Resources

Readme
License
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages