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

11 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:

1 Like

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