Theming
  • If I wanted to make my own theme for PiPlay, how would I go about doing that? This is sort-of specific and sort-of broad. Specifically, in PiPlay, what types of files would I be editing to change things like: splash screen, backgrounds, colors, layout, etc.?

    And in a broader sense, what are some other things I need to be familiar with to start doing this kind of work? Like different code languages, editors, etc.? I am already really familiar with Photoshop. I just need to know how to make it all fit together.

    Thanks!
    John
  • I would be happy to see and test the final product ;)
  • I would be happy to provide anything I create. I just need some info to start me in the right direction!
  • you should wait just a little bit longer (hopefully only a couple more days now). I have written code for easy theme customization and SSilver2k2 has merged it into the master code. If you want to get a jump on it, you can download my repository: https://github.com/mholgatem/pimame-menu/archive/master.zip

    In the folder labeled 'themes' there are two folders, 'default' and 'tron', You can use either theme as a template. Just copy the folder and rename the whole folder to whatever you want your theme named.

    I included a photoshop template, aptly named 'template.psd' in both folders. I would recommend including this type of template in any future theme releases, so that if you haven't created a menu item for say the DosBox emulator, then it's easy for someone who has installed your theme, to go ahead and make one that matches the rest of the theme. It's just a good practice, but it's not obligatory.

    On to the meat and potatoes - First thing to do would be to open the file called 'theme.yaml' in a text editor. This file is required. It gives you all of the theme options. Here is my tron/theme.yaml file: along with explanations
  • options:

    theme_name: "Tron - by MholgateM" #not required, just handy
    header_height: 140 #the header is the space where the logo goes at the top
    header_color: "255,255,255,0" #can be in RGB or RGBa format.
    logo_image: "logo.png" #normally piplay logo, but i changed it for tron
    background_image: "background2.jpg" #image will scale proportionally, may want to include dimensions in filename of image
    background_color: "255,0,255" #this is used if background image not included
    generic_menu_item: "generic_menu_item.png" #use this for missing emulator icon
    generic_menu_item_selected: "generic_menu_item-selected.png" #item selected
    item_color: "255,255,255,128" #background color for emulator icons
    disabled_alpha: 128 #if emulator disabled due to no roms
    item_height: 55 #main menu emulator icon height
    num_items_per_row: 1 #number of items per row main menu
    menu_item_padding: 0 #padding
    display_navigation_labels: no #print label for next/back arrows

    font_file: "default.ttf" #must include a fontfile for theme
    default_font_size: 19 #default size
    default_font_color: "255,255,255" #default color
    default_font_background_color: "0,0,0,0" #background color RGB/RGBA

    display_labels: no #print name for each emulator over icon
    labels_offset: [100,20] #Starting from top left corner, move label along x,y
    label_font_size: 36 #size
    label_font_color: "0,255,255" #unselected font color
    label_background_color: "0,0,0,0" #unselected background color
    label_font_selected_color: "90,255,255" #selected font color
    label_background_selected_color: "255,0,255,255" #selected background color

    display_rom_count: no #show number of roms for category
    rom_count_offset: [540,10] #Starting from top left corner, move label along x,y
    rom_count_font_size: 19 #size
    rom_count_font_color: "0,255,255" #unselected color
    rom_count_background_color: "0,0,0,0" #unselected background color
    rom_count_font_selected_color: "90,255,255" #selected font color
    rom_count_background_selected_color: "255,255,255,0" #selected background color

    rom_list_font_size: 19 #font size to list rom titles
    rom_list_font_color: "0,255,255" #color for unselected rom title
    rom_list_background_color: "0,0,0,0" #background color for unselected rom title
    rom_list_font_selected_color: "90,255,255,255" #color for selected rom title
    rom_list_background_selected_color: "255,255,255,0" #background color selected
    rom_list_image: "rom_list.png" #print each rom title over this image
    rom_list_selected_image: "rom_list-selected.png" #selected version of image
    rom_list_offset: [20, 0, 30, 0] #rom title position/crop [x-position, y-position, pixels to crop from right, pixels to crop from bottom]
    missing_boxart_image: "missing_boxart.png" #image to display if no boxart found

  • menu_items:
    - label: SNES #don't mess with the label
    icon_file: snes.png #unselected emulator icon
    icon_selected: snes-selected.png #selected emulator icon

    - label: MAME4All
    icon_file: mame4all.png
    icon_selected: mame4all-selected.png

    - label: Neo Geo
    icon_file: neogeo.png
    icon_selected: neogeo-selected.png

    - label: AdvMAME
    icon_file: advmame.png
    icon_selected: advmame-selected.png

    - label: Final Burn
    icon_file: fba.png
    icon_selected: fba-selected.png

    - label: Genesis
    icon_file: genesis.png
    icon_selected: genesis-selected.png

    - label: NES
    icon_file: nes.png
    icon_selected: nes-selected.png

    - label: Atari 2600
    icon_file: 2600.png
    icon_selected: 2600-selected.png

    - label: Playstation 1
    icon_file: psx.png
    icon_selected: psx-selected.png

    - label: Commodore 64
    icon_file: c64.png
    icon_selected: c64-selected.png

    - label: ScummVM
    icon_file: scummvm.png
    icon_selected: scummvm-selected.png

    - label: Gameboy
    icon_file: gameboy.png
    icon_selected: gameboy-selected.png

    - label: Gameboy Advance
    icon_file: gba.png
    icon_selected: gba-selected.png

    - label: Restart
    icon_file: restart.png
    icon_selected: restart-selected.png

    - label: Shutdown
    icon_file: shutdown.png
    icon_selected: shutdown-selected.png

    - label: Update PiMAME
    icon_file: update.png
    icon_selected: update-selected.png
  • @mholgatem - That's some nice work. It looks clean and well documented. Are you part of the dev team. You do a lot of nice work on this project! :)
  • @Chad - Sort of. My arcade project was a Christmas present for my son, but I get kind of obsessed with making projects perfect. So I started modifying the code and just putting it out there in case anyone wanted it. Shea noticed my work and has looped me in for some aspects of the coding, but he and zachberry are still the main guys in the coding scene.
  • Wow! This is great, and the exact info I was looking for.
    Stupid question maybe, but if I just replace my pimame_menu folder with yours, should I expect it to run correctly?

    I saw the pictures of your build. It was VERY impressive! I am sure you both get hours of fun out of it!

    Thanks
  • At this point I consider Mark part of the dev team :)
  • @SSilver2k2 - Thanks Shea!

    @jhnwhite - yes, it should. But make a backup of yours first, just in case ;)
  • That's very impressive! You guys really do fantastic work. I have to be honest if it wasn't for this project and all the work you guys do I know I wouldn't have had an interest in the Raspberry Pi. So you guys are responsible for me buying 4 Pi's at this point and a lot of odd and end peripherals. I think part of each sale goes to charity so it's a win-win and a big thank you to the Pi-Play dev team! :)
  • I second that thought! I bought a Pi just for PiPlay.

    Copying the above folder worked fine. Now to start tweaking! :) Thanks again guys!
  • This may be a dumb question, but how do I actually activate the Tron theme?
  • Open config.yaml. Under theme, change default to tron
  • Awesome! Thanks!

    How do I tell it to only show the roms I have in the list? Not the full list?
  • I'm not quite sure what you are asking. are you talking about showing just the emulators that you have roms for?
  • Sorry, should have been more clear. As the themes sit now, the list includes every game ever made. I want it to show only the games I have roms for. I already eliminated the emulators I don't use.

    Also, how would I move the icons around on the emulator selection screen, the first one when PiPlay boots up? Is that just a padding thing?
    Take a look at this mockup I did of the main menu in PS and you'll understand what I am trying to do. Don't worry, I plan to add the PiPlay logo back in once I am done editing it to match the style! :)
    https://www.flickr.com/photos/124757791@N04/14234297014/
  • oh, that's because you got my .cache files as well. you need to go to pimame-menu/.cache/ and delete all of the files in that folder. That's a list of all of my games.

    to do that, you need to set 'num_items_per_row: 3', and 'padding: 0', then just adjust 'item_height:' until they are big enough to touch. piplay will scale them up and auto space them.
  • What if the Nintendo section in the lower middle part is just a logo? So on the bottom row only the Gameboy and Shutdown icons work. I could always add something on that Nintendo icon, like a history thing.
  • You could probably create an icon for a fake emulator that doesn't have a command
  • All of that worked flawlessly. Item height was just half of 1080.

    Now, on to the rom list. First question: how do I get the scraper to work? :)
  • 2 other things:
    1) What if I wanted to have a different looking rom list for different emulators? Would that require creating a rom list config for each emulator, and then having the config.yaml call that rom list config when that emulator is selected? Totally guessing here, I know nothing about programming!

    2) In my main menu I just have a selection for Gameboy. I would like to include the Gameboy Advance games that I own as well, but I don't feel the need to create a separate icon for it. Would it be possible to list the GBA roms alongside the GB ones? If it did, what would I need to do to get it to use the correct emulator for the different games?
  • right now, it's just from command line. you need just need to run:
    python ~/pimame/pimame-menu/scrape_script.py


    it will walk you through the rest. I would still say that it is in the alpha stages of development
  • 1) right now, that's not possible. everything will be the same style rom list.
    2) also not possible, but we may be able to work that in.
  • Well I only own a few games. I'll give it a shot later and see what happens.

    If I wanted to just set them myself, what would I do?
  • Mark thanks for all your help! This theme is coming along nicely. I'll post it as soon as it's done.
  • what do you mean set them yourself?
  • As in, if I just downloaded the box art as a .jpg or something, how would I have PiPlay show that? Is the scraper placing those images somewhere that I can access?
  • The scraper places all of the images inside of that rom folder in a folder called images. right now piplay won't recognize the artwork without having run the scraper because the scraper builds the cache file that that correlates roms to images.
  • Eventually I plan to create a way to correlate images of your choosing to roms, but for now, this is all we have. If you wanted to manually correlate them, you could place your images into the folder, then edit the appropriate cache file, they are just in .json format.
  • This is what I get when running the scraper.

    ImportError: No Module named Levenshtein
  • you need to install Levenshtein.
    Update the package index:
    # sudo apt-get update
    Install python-levenshtein deb package:
    # sudo apt-get install python-levenshtein
  • Worked like a charm!
  • Spoke too soon. A few problems, although it did find many images.
    1) Under NES and SNES I have a rom listed called "gitkeep"
    2) The GB roms did not get images, even thought scraper says it scanned and found some. The gitkeep is conspicuously absent here.
    3) The NES and SNES games no longer work. Can't remember if this came up after I ran the scraper or before. Gameboy roms are the only ones I can access. I get an error "file not found" even though the file is in the correct folder, and the config file still points there. I'll have to dig into this one a bit more later on, when I get home.
  • not sure about 2 and 3, but .gitkeep is a file you use when working with git to save empty folders.

    I need to remove that from the rom list
  • try taking a look at your cache files and make sure that they list the correct locations for your roms. Also, make sure you run the scraper AFTER any changes have been made to your config file, otherwise the cache file will not point to the right directory.
  • Everything was listed as correct. In: cache files, config.yaml, and theme.yaml. How would I get PiPlay to rebuild the cache files? Got rid of the gitkeep file in the rom folder so it no longer shows up in the list.

    Also, any reason why my pi is not detecting my TV's correct resolution? Worked fine on an HD monitor I have.
  • Figured out my second question. Nes roms still not working.
  • the nes files need to be in a folder called nes inside the nes directory.
  • Zipped or unzipped? I had them working at one point. Before I started this theming business lol.
  • Figured it out. I guess the pimame-menu folder I downloaded from mholgatem had a fix for the old NES issue of not reading roms in zip folders. Fixed the path in config.yaml and added a zipped rom just to see. Boom, loaded right up!

    Thanks you guys for all the help! I am almost ready to post my Nintendo theme.
    2 More things:
    1) Is it possible to add padding to the list items in the rom list? I have the font size set right, and the list is where it should be, but the items need to be spaced apart.
    2) Can we change the size of the image that gets displayed from the scraper? It's so big! Could we move it too?
  • Well it wasn't the fixed issue with NES. For whatever reason, I redownloaded all the ROMs I had, and unzipped them into the NES folder. Then reran the scraper, and VOILA! Who knows...

    Anyways, still wondering about the above 2 questions.
  • Well it wasn't the fixed issue with NES. For whatever reason, I redownloaded all the ROMs I had, and unzipped them into the NES folder. Then reran the scraper, and VOILA! Who knows...

    Anyways, still wondering about the above 2 questions.
  • you can add padding to the rom list by using a .png format image for rom_list_image & rom_list_selected_image. just make it the size that you want each rom title to take up, and give it a transparent background. right now, there are no options for sizing the boxart or moving it. I may add that in a bit later, but first i'm concentrating on getting the scraper to be a bit more accurate.
  • Hadn't thought of using the image file to create the space!

    Thanks for all your help on this. Silly question, since I keep asking for help on simple stuff, but is there any way I can help you guys?!
  • Hi I want to thank all for the PIMame/PiPlay software project it is turning out awesome. I'm new to RPi, Raspbian, PIMAME/PIPLAY, etc. I know enough Linux to be dangerous but not enough to consider myself more than a novice. I am running Raspbian, with PiMAME 0.7.10 and as the over achiever that I am installed your PIMAME-Menu-Master.zip file. I got it working with some path editing (for whatever reason my PIMAME install is in a PIMAME_Files folder instead of a PIMAME folder), I am trying to figure out how to replace the advmenu with yours at boot up and unfortunately everything I've tried results in very interesting albeit very cryptic python errors. Could you break out the Pimame-Menu for dummies explanation of how to get this working? Thank you.
  • @jhnwhite - I can only speak for myself, but the biggest help to me is when people help answer questions on the forums.

    @luisusmc - You need to update to PiMame .8 or above to get it working. There is a ton of stuff different between the two. version 8 is what I would call the first REAL graphical interface, it would probably be harder find all of the missing files and libraries than just upgrading. BTW, is your username a reference to the US Marine Corps?
  • Well that makes sense. Let me give that a try and yes I was in the Corps back in the early 90's. Semper Fi.
  • Well thank you for your service to our country, Sir! Let me know if you need any help upgrading.
  • Thank you. I reimaged my SD with 0.8.3 and all is well.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!