clockworkpi

Teenage Engeering UI

Hey, In another post I’ve started with some Icons. here
So this time I want to redesign some Interface parts of the Gameshell with the look of an OP-1 from teenage engeneering. From time to time I will update these Designs. (I got my GS last week, so I try figure out how to change the background ect.)
Hope you like it :slight_smile:

drop Download OP-1 Design Kit

figmalogo Figma File

Installation:

Download a client like FileZilla connect your GS with following Account:

192.168. (ending is different) just look into the tinycloud app… User: cpi PW:cpi Port:22

Then download my dropbox files and copy and paste the appicons into

home/launcher/skin/default/Menu/Gameshell <---- Homescreen Icons
home/launcher/skin/default/Menu/Gameshell/20_Retro Games <---- Emulator Icons

Then Go back to and copy and paste all the UI Elements to these folders

home/launcher/skin/default/sys.py/footbar_icons
home/launcher/skin/default/sys.py/icons
home/launcher/skin/default/sys.py/titlebar_icons

and for the bg colors and loading screens go to

home/launcher/sys.py/UI <---- place the skin_manager.py here
home/launcher/sys.py/gameshell/wallpaper <---- place the loading, gameover ect. here

14 Likes

wow, this is actually cool

1 Like

sys.py/UI/skin_manager.py

1 Like

Thank you!:yum: After that I will upload a whole copy of the folder structure, so it’s easier to implement

How do I install this? I’m not a programmer, so I need directions on what to do.

Love it!
I am a full time graphic designer and this is very good work!

1 Like

Hey, I wrote a little guide :wink:

I was about to make a similar tutorial too :slight_smile: super cool, tightly organized :black_heart:

1 Like

I’m on version 1.24 according to my game shell update page and this did not update the background files, any ideas?

Just FYI, you should put skin colors in a config.cfg / config.ini file (looks like it was changed to .ini recently?) in the skin directory, not hardcoding the color values into skin_manager.py

The ~/launcher/skin/default/config.ini file would look something like:

[Colors]
High = #5e83ff
Text = #ffffff
ReadOnlyText = #ffffff
Front = #261f31
URL = #5e83ff
Line = #261f31
TitleBg = #111013
Active = #d92c49
Disabled = #5a5a6e
White = #111013
Black = #261f31

Also, you can just pack this all into a custom skin folder, and set the ~/launcher/sys.py/config.py SKIN variable to the path of a custom skin, just be sure to include all files and folders from the default skin, as missing files can cause the launcher to crash.

I will include your skin in next os image release, is that ok ?
:slight_smile:

3 Likes

haha nice! :blush: sure that’s totally okey!

Hey @stingray, thanks a lot for this great theme !

To help with installation and portability I created a repository here:

To install the theme we just need to run this over SSH

git clone https://github.com/rqm/gameshell-skin-OP1.git /home/cpi/skins/OP-1

Or if you use FTP, downloading the archive from github and copying the directory into

/home/cpi/skins/OP-1

Then we can easily switch to it from the skins manager in settings. This allows us to use the theme without modifying the default one and easily switch between multiple themes.

4 Likes

Stellar work, man. Excellent!

1 Like

That is a really great idea @guu ! Thanks @stingray, that’s a really good work !

Thanks for sharing! Downloading now. :nerd_face: