Pegasus theme development general

SinisterSpatula

@msheehan79 thank you so much! This is exactly what I needed and extremely helpful. I wondered about that too, how to limit the number of items, fantastic! I just added an alphabet listview that pops out when the filter button is pressed and I plan to use the logic from holding the Alt key and pressing letters, should work perfectly. Man this is shaping up to exceed beyond what I imagined. Once I get that working plus lastplayed, I think it will be perfect.

Yes I think we might be able to combine multiple sorters and filters in the same proxy, I've seen that done before and should be as simple as putting both right in there. I think the order might be important, like you would want to sort decending and then chop. Versus chopping then sorting.

edit: I tried combining the sort & chop and it did not work, it seems we do have to double proxy.

AndersHP

@SinisterSpatula
Great to see the progress! Scrolling looks awesome - on a Pi Zero, that's amazing! Can't wait to test on my CM3+ module.

Do share a link when you think it's ready for test!

fluffypillow

Wow nice progress :) It is possible to use multiple filters, but not for chopping unfortunately: only games that pass all filters (no matter the order) will be present in the output. This is because filters operate on the source model: IndexFilter works on the source index, so combining that with favorites means "games that have less than <some max> index in the source model AND games that are favorites", which might indeed have unexpected results. A workaround could be using another proxy, yes, or if it's getting hard to use, perhaps manually creating and filling a JavaScript array of games could also work. (I think the proxy model does not have a toVarArray function sadly, but if it does, that could make things easier.)

SinisterSpatula

This code is pretty wild, but it's working :D I'm so freaking happy right now. The last item I need to finish is the Alpha-jumping menu. Then just fixing any other bugs I can find and figure out.

  ////////////////////
  // Game switching //

  property int currentGameIndex: 0
  readonly property var currentGame: (collectionIndex >= 2) ? currentCollection.games.get(currentGameIndex) : api.allGames.get(findCurrentGameFromProxy(currentGameIndex, collectionIndex))

  function findCurrentGameFromProxy (idx, collidx) {
    if (collidx == 0) {
      return favoriteGames.mapToSource(idx);
    }
    if (collidx == 1) {
      return lastPlayedFilter.mapToSource((lastPlayedGames.mapToSource(idx)));
    }
    return;
  }

  function changeGameIndex (idx) {
    currentGameIndex = idx
    if (collectionIndex && idx) {
    api.memory.set('gameIndex' + collectionIndex, idx);
    }
  }

  // End game switching //
  ////////////////////////

fluffypillow

@SinisterSpatula tip: for currentGame it's not necessary to track back to the original source model; it doesn't matter whether you get() a game from a proxy model or the Api, the games themselves are all the same thing in both places. Ie. you can just favoriteGames.get(someIndex) and it should work fine.

SinisterSpatula

@fluffypillow I tried using the lastPlayedGames.get(index) and favoriteGames.get(index) but something strange is happening when I do that. It's like the item it returns is not a "real game item" or something. When other code tries to access stuff it should be able to (currentGame.assets) it says it's null or a type error or something. If I fetch the game all the way back at the source it works fine.

SinisterSpatula

Man, I'm stuck on this again :(

I'm trying to make a function call to the grid from my AlphaMenu.qml, and I'm not understanding the proper way to reference it:

Keys.onPressed: {
      if (api.keys.isAccept(event)) {
          event.accepted = true;
          gamegrid.grid.jumpToMyLetter(lettersList[alphaList.currentIndex]);
          closeMenu();
          return;
      }
   }

GameGrid.qml:

FocusScope {
  id: root
  GridView {
    id: grid
       function jumpToMyLetter (inputletter) {
             event.accepted = true;
             var jumpletter = inputletter.toLowerCase();
             var match = false;
             for (var idx = 0; idx < model.count; idx++) { // search title starting-with pattern
               var lowTitle = model.get(idx).title.toLowerCase();
               if (lowTitle.indexOf(jumpletter) == 0) {
                 currentIndex = idx;
                 match = true;
                 break;
               }
             }
             if (!match) { // no match - try to search title containing pattern
               for (var idx = 0; idx < model.count; idx++) {
                 var lowTitle = model.get(idx).title.toLowerCase();
                 if (lowTitle.indexOf(jumpletter) != -1) {
                 currentIndex = idx;
                 break;
                 }
               }
             }
           }

It looks so pretty! I just need it to work. I'm so thankful that the game title seeking code existed, I would never have figured that out on my own. Maybe this needs to be a signal and signal handler instead? I'm trying hard to understand and do the right thing.

alt text

edit: Just got it working! I'm sure this is a noobish way of doing it, but it worked:
On gamegrid.qml, under the root id:

function jumpTheGrid (letter) {
    grid.jumpToMyLetter(letter);
  }

still on gamegrid.qml, under the Gridview grid id:

function jumpToMyLetter (letter) {
//actual letter jumping code
}

On alphamenu.qml:

Keys.onPressed: {
      if (event.isAutoRepeat)
          return;
      if (api.keys.isAccept(event)) {
          event.accepted = true;
          gamegrid.jumpTheGrid(lettersList[alphaList.currentIndex]);
          closeMenu();
          return;
      }
}

So now, the last bit that needs fixing is a bunch of Type errors and reference errors when my theme tries to access the assets of the current game when sometimes the currentGame.assets is null. I just need to probably add a check for null at the beginning of these code blocks. Tomorrow I'll work on making a video to show it off.

SinisterSpatula

Video Walkthrough and annoucement post here: https://retropie.org.uk/forum/topic/23682/theme-gpios-based-on-gameos-pegasus-front-end-theme-modified-for-retroflag-gpi-case

SinisterSpatula

@fluffypillow @PlayingKarrde I want to update my modded theme and the guide I wrote for it to use the proper artwork folder names, and proper way to scrape, so that it can co-exist with Emulation Station if possible. Is there any official documentation or knowledge you can share about the correct way to name the folders for artwork? Specifically: Box art, Screenshot, Cartridge, Wheel (transparent), steam tile, and fan art? I think I have all the correct gameData.assets.'type' for each type of asset in the code and it works well, but when it came to the frontend searching for art when there exists a gamelist.xml or metadata.pegasus.txt it had problems. If pegasus hunts for the art on it's own, these folders worked: Folder names: box2dfront, fanart, screenshot, videos, wheel, steamgrid, box2dback[located in roms/systemname/media/] (I could not find the proper foldername for cartridges for use with this method so I was using box2dback for that purpose.

If I used gamelist.xml containing art path's it would break and not find some of the art.
If I used metadata.pegasus.txt either from the web conversion tool, or from skyscraper (linux) it would also break and not find some art.

Hoping I can get confirmation on the exact, correct, way to name the folders. I personally plan to only use Pegasus (but it would be nice to find this out for other users who want to use both frontends and swap.

PlayingKarrde

@SinisterSpatula The tricky thing here is that gameOS requires certain media types that the default EmulationStation scraper doesn't grab (for example videos). If you were to use Skyscraper (which is possible from within Retropie) then I believe it should work as the creator of Skyscraper recently added support for Pegasus I believe.

However I haven't tested this so it's just speculation on my part.

fluffypillow

@SinisterSpatula the fields of assets are listed here: https://pegasus-frontend.org/docs/themes/api/#assets, and here are the directories checked for assets: https://pastebin.com/KubBUcg1. In addition, if Skraper support is enabled, here are some more directories that are checked: https://pastebin.com/Thnkgz59.

SinisterSpatula

Thanks guys, great info. What is the proper way to handle the swap between Megadrive and Genesis? Looks like the themes support both, but how is Pegasus choosing which one it shows? I tried changing it in the usual way and it didn't seem to have any effect.

fluffypillow

@SinisterSpatula the default theme just shows the logo based on the collection's shortname (if there is one for it). There isn't any hardcoded game console information inside Pegasus.

SinisterSpatula

Okay, I guess the issue I'm running into, and if I understand correctly, is that Pegasus is pulling in the "shortname" for megadrive from /etc/emulationstation/es_systems.cfg and whatever is set as <name>megadrive</name>. ES/retropie is wanting to keep the name always as megadrive so it knows where to grab configs, launching image, and other info from, and as far as themes are concerned, they should follow what is set in <theme>megadrive</theme> (same applies for pcengine). So, unless I also rename the folder in /opt/retropie/configs/megadrive to genesis, (which is going against the current standard) I don't see how to get it to use "genesis" instead. I can work around this in the code of the theme, but wanted to know if there was already a more proper way that I was not aware of yet. So I guess I was hoping, that pegasus was already taking into consideration what is written in <theme> as well, and not just <name>.

Edit: Maybe I'm wrong about all of this? I just noticed Pegasus is saying "Sega Mega Drive" for the name in platforms menu, but that's not in es_systems.cfg.

For now I'm adding a setting to switch megadrive/genesis, and changing what it does based on that. (changing the source.svg image it uses, and text that it displays.) One bad side effect of this, is that the platform list will show the TurboGrafx-16 in the same spot as pcengine so the alphabetical sorting is not accurate.

fluffypillow

@SinisterSpatula Yes, it uses name for shortname and fullname for name. theme is not used, however I think platform could be used for this task and I can add support for that. The theme is set to just load "shortname + .svg" by default, but you can add any other logic as well.

mitu

@fluffypillow platform can be multi-valued in es_systems.cfg, though I don't think this is currently used by any system.

SinisterSpatula

Another thing that came up was the issue of localization. If someone wants "Favourite" instead of "Favorite" for example. I don't know if that could be something that is supported in the front end also, or how best that could be supported. For now I just included a "favourites" logo and people can manually rename it.

fluffypillow

@SinisterSpatula that's a good question and I'm not sure yet what would be the best approach. It can't be provided by Pegasus' core, since you can use any text in a theme, so probably language setting will also need to be a theme option. The language Pegasus itself is using can be accessible to help with that.

PlayingKarrde

@fluffypillow While that does at first glance feel like a theme option, I feel like simply having a EN-US and EN-GB option for language would make automating that on the theme a ton easier. As it stands right now there's no way to know which version of english people will want.

It's probably not a huge deal since Favorite/Favourite is about the only instance I can think of that we would implement but also I would hope that it was a very small change on your end too (basically just duplicate the en-us localisation and add that extra option) that maybe it's worth it?

-edit- Also on that note, how does one actually get the language selection? Someone asked about localisation for gameOS so I thought I may as well look into it (although actually properly localising it to each of the respective languages is another story...)

SinisterSpatula

When jumping to a new index of the GridView, the following code works to move to it instantly, but the strange thing is, it's only instant if the new index is further down. If the index is a previous one (up above the current) then the performance bogs down and it's a much more processor intensive task. Any ideas on that? I've tried GridView.Center, Contain, SnapPosition. Visible seems like it gives the best performance (going down but not up), none of them give good performance going up, (same for .Beginning) Wondered if there was a trick, like making it invisible and disabled before jumping, and un-do it after the jump. (Just need a way to prevent it from trying to process a scroll/flick animation, I just want it to instantly re-position the grid.) I can jump it from 0 to Z in a flash, but going from Z to 0 will move like a glacier. This also has me wondering if the grid can start over again once it get's to Z, like maybe it can just show the start of the items again. But I haven't gotten very far when searching about that.

positionViewAtIndex(idx, GridView.Visible);
          currentIndex = idx;