Page 1 of 1

Resolution Agnostic Theme

PostPosted: Mon Dec 05, 2016 9:51 am
by Sliver-X
Recently I finished work on a media player/ROM box design based on Linux, Kodi and Mah!Cade I call Exa Drive.

Since the machine gets carried around and connected to various TVs and displays, I needed to find a way to make the Mah!Cade theme I created scale to various resolutions, rather than try to make layouts for every possible permutation I would typically run into.

I created a theme at 1440x900 (This laptop unit I initially developed it on's screen resolution), then found the lines that defined things such as menu size/positions/font sizes and the same for Snap previews, and set them as dummy values in a template file. I also created two template 1440x900 backgrounds for the two menu sections I use.

I then wrote a script that copies this template to the primary .lay file and looks at the current resolution, does some ratio calculations then fills in the dummy values with what it determines should be set for whatever resolution it was run at (I will probably change this to simply edit the .lay file in place and go by line numbers instead), resizing the template BG images as well. This script is invoked from my Kodi install rather than Mah!Cade's default, and works fairly well:

1440x900

640x480

Here is the script:

Code: Select all
## Hah!Cade v1.8
## A shitty script by Sliver X
## panicus@gmail.com

## Requires the following to work correctly:
## bc, imagemagick

## Copy master template to standard layout for editing by our script...
cp -f ~/.wahcade/layouts/exadrive/template.lay ~/.wahcade/layouts/exadrive/layout.lay

## The following will scale screen geometry for my theme so the Kodi box it resides on can be
## resolution agnostic like Kodi itself.

## Gather basic info about current resolution.
REZ=$(xrandr | grep 'Screen 0' | cut -d "t" -f2 | cut -d "," -f1 | sed 's/ //g')
REZX=$(echo $REZ | cut -d "x" -f1)
REZY=$(echo $REZ | cut -d "x" -f2)

## Resize background to match current resolution!
convert  ~/.wahcade/layouts/exadrive/template.png -resize $REZ\!  ~/.wahcade/layouts/exadrive/main.png
convert  ~/.wahcade/layouts/exadrive/template2.png -resize $REZ\!  ~/.wahcade/layouts/exadrive/main2.png

##  Determine screen size percentages from template 1440x900 native layout data.
PERCENTX=$(echo "scale=2;$REZX/1440" | bc)
PERCENTY=$(echo "scale=2;$REZY/900" | bc)

## Determine object sizes based on percentages of 1440x900 template data.
HEADER_X=$(echo "(32*$PERCENTX)/1" | bc)
HEADER_Y=$(echo "(16*$PERCENTY)/1" | bc)
HEADER_W=$(echo "(1376*$PERCENTX)/1" | bc)
HEADER_H=$(echo "(64*$PERCENTY)/1" | bc)

MAINLIST_X=$(echo "(32*$PERCENTX)/1" | bc)
MAINLIST_Y=$(echo "(88*$PERCENTY)/1" | bc)
MAINLIST_W=$(echo "(740*$PERCENTX)/1" | bc)
MAINLIST_H=$(echo "(796*$PERCENTY)/1" | bc)

SNAPS_X=$(echo "(808*$PERCENTX)/1" | bc)
SNAPS_Y=$(echo "(88*$PERCENTY)/1" | bc)
SNAPS_W=$(echo "(600*$PERCENTX)/1" | bc)
SNAPS_H=$(echo "(600*$PERCENTY)/1" | bc)

HEADERFONTSIZE=$(echo "(38*$PERCENTY)/1" | bc)
LISTFONTSIZE=$(echo "(24*$PERCENTY)/1" | bc)

### Replace preset values in .lay file with new calculated values!
sed -i -e 's/XSIZE/'$REZX'/g' ~/.wahcade/layouts/exadrive/layout.lay
sed -i -e 's/YSIZE/'$REZY'/g' ~/.wahcade/layouts/exadrive/layout.lay

sed -i -e 's/HEADER1/'$HEADER_X'/g' ~/.wahcade/layouts/exadrive/layout.lay
sed -i -e 's/HEADER2/'$HEADER_Y'/g' ~/.wahcade/layouts/exadrive/layout.lay
sed -i -e 's/HEADER3/'$HEADER_W'/g' ~/.wahcade/layouts/exadrive/layout.lay
sed -i -e 's/HEADER4/'$HEADER_H'/g' ~/.wahcade/layouts/exadrive/layout.lay

sed -i -e 's/MAINLIST1/'$MAINLIST_X'/g' ~/.wahcade/layouts/exadrive/layout.lay
sed -i -e 's/MAINLIST2/'$MAINLIST_Y'/g' ~/.wahcade/layouts/exadrive/layout.lay
sed -i -e 's/MAINLIST3/'$MAINLIST_W'/g' ~/.wahcade/layouts/exadrive/layout.lay
sed -i -e 's/MAINLIST4/'$MAINLIST_H'/g' ~/.wahcade/layouts/exadrive/layout.lay

sed -i -e 's/SNAPS1/'$SNAPS_X'/g' ~/.wahcade/layouts/exadrive/layout.lay
sed -i -e 's/SNAPS2/'$SNAPS_Y'/g' ~/.wahcade/layouts/exadrive/layout.lay
sed -i -e 's/SNAPS3/'$SNAPS_W'/g' ~/.wahcade/layouts/exadrive/layout.lay
sed -i -e 's/SNAPS4/'$SNAPS_H'/g' ~/.wahcade/layouts/exadrive/layout.lay

sed -i -e 's/HEADERFONTSIZE/'$HEADERFONTSIZE'/g' ~/.wahcade/layouts/exadrive/layout.lay
sed -i -e 's/LISTFONTSIZE/'$LISTFONTSIZE'/g' ~/.wahcade/layouts/exadrive/layout.lay

## Run Mah!Cade
wahcade


The Wah!Cade and Kodi themes I did can be found here, though it's pretty specific to my machine (Especially all the Dual Shock 3 buttons in the controls legend at the bottom of the screens) but it may be a useful starting point for others to make similar things of their own?

Re: Resolution Agnostic Theme

PostPosted: Sun Dec 11, 2016 5:05 pm
by Zombie
Do you have themes for more Esoteric systems, such as the various Amiga and Atari ST Computers?

Re: Resolution Agnostic Theme

PostPosted: Mon Dec 12, 2016 10:41 pm
by Sliver-X
Zombie wrote:Do you have themes for more Esoteric systems, such as the various Amiga and Atari ST Computers?


No. But in the process of "porting" my setup to Windows (I'm dual booting Ubuntu 14.04 x64 and Win7 x64 on a Mini ITX machine I recently built: Either Kodi install can toggle a setting on a tiny GRUB4DOS partition that controls which one boots, so I don't even have to connect a keyboard/mouse to accomplish it) I created a batch file that does what this shell script does, though it requires two small standalone EXEs to pull off (The Win32 port of convert from Imagemagick and a small command line calculator I found).

Re: Resolution Agnostic Theme

PostPosted: Tue Dec 27, 2016 1:00 am
by sairuk
nice, I’d always meant to do something like this if I’d ever got around to setting up a pi with Mahcade, although I’d intended to incorporate more pygame (sort of like ezlauncher does https://www.mameau.com/ezlauncher/) long term to handle it.