Pegasus theme development general

PlayingKarrde

@SinisterSpatula When I made the theme originally it was mainly just me learning QML so I was doing a lot of bad practices. Ultimately really the best way to make these themes (and if I ever get around to doing a proper cleanup pass I'll do this) is to keep all your variables stored in one place and pass them down rather than referencing them again and again. @fluffypillow may want to correct me if I'm wrong on this (and he's already provided a solution above), but ideally these variables you are getting and setting should get stored in the theme.qml and passed down each time.

I mean it's kind of annoying having to do this rather than being able to reference the top level directly within (maybe this is possible I don't know) but at least then you have clean references that only need to be updated in one place then.

SinisterSpatula

Thanks for the replies guys. I'm still wracking my brain trying to figure it out, lol. But I was having similar thoughts about it. Was just thinking, I need to refactor the code so that I have a "clean, focused" set of variables that everything else will access from. So that I know everything is grabbing and using the same information across all places. What I am really struggling with is, when using the ProxySortFilter it provides me with a model. I guess I'm trying to figure out how to best use that model as a "variable" so that for example, the game's title at the top of the screen, can access the currently selected game's name. Currently, the game details view, and the Title of the game, and launching of the game, etc, are all pulling from readonly property var currentGame: currentCollection.games.get(currentGameIndex) so I'm trying to figure out, how I can take the results from the ProxySortFilter, and place it into currentGame, by using the mapFromSource(int sourceRow). I guess I really need some hand holding on this LOL. Maybe, in the theme.qml main file, I just need to maintain two sets of data, one that is filtered, and one that is not. And a third set which everything accesses. Then I would swap the third with the first or second.

Another issue I'm thinking about, I noticed when I broke a lot of the logic, that the grid view scrolling actually gained a lot of performance. I think it's being slowed down by the logic of switching the background art immediately upon moving to the next grid item. Wondering if there is a simple way to wait for scrolling to stop for 5 seconds, before switching the background art.

It almost seems like, maybe I just need to redo the DetailsRequested() to include the game that belongs to the grid item? That way it shows the proper game always, when being opened. And the game title just needs a way to point at the currently selected grid items, modelData?

fluffypillow

I've just made an example theme, might help with sorting/filtering: https://github.com/mmatyas/pegasus-theme-proxy-example

Yes, it is possible to use variables from the top level file (and, in general, from parent files), and collecting them in one place is also a good idea. Just make sure you keep track which part of the code modifies which; global variables are easier to use, but may make harder to track down issues in large projects. It should be fine in most themes though.

Proxy models also have a get(index) function you can use to get a game. There shouldn't be a need to manually swap sets of data, unless you do some very special processing I think. You can create as many proxies as you wish, and you can also turn on/off the filters/sorters individually as well.

For the background imges, you can use Timers; there should be one already in the theme (unless it was removed since), similar to your case, but for waiting before starting videos.

SinisterSpatula

@fluffypillow Thank you so much for the example! It's clarified some things for me, a bit and given me ideas of things to try. If I still can't get it, I think I'll just start over from scratch and build from there. Since I'm just learning, that might not be a bad thing.

SinisterSpatula

I loaded up the example, just to see what it would do, and it looks like the favorites get populated, but the other's don't. Looking at the code, the only difference between favorites and "GameList" (all games) is that GameList does not use a filter. I would expect allGames to have a better chance at populating than the favorites? If the favorites can populate, allGames and Recently played certainly should. Very strange.
alt text

So api.allGames does not work (it's blank). But I can do this and it works:

    property var currentCollection: api.collections.get(2)
    SortFilterProxyModel {
        id: sortedGames
        sourceModel: currentCollection.games
        sorters: RoleSorter {
            roleName: "lastPlayed"
        }
    }

alt text

fluffypillow

@SinisterSpatula hm that's interesting, it works fine for me on desktop (that's how I made it). Do you see anything in the log? I wonder if it's related to the Pi, can you try it on other devices?

AndersHP

@SinisterSpatula
If I was to just use your theme for grid view with box art only, is it then possible to try it out now? It looks great in your videos, and I could help you with feedback :)

fluffypillow

@SinisterSpatula another idea, maybe it's just that those games have no image? There isn't any fallback added for that case, but you should still be able to click on the "place" of the games, and the rectangle and title on the top should update.

msheehan79

@fluffypillow I've been going through your theme tutorials to try and learn a bit about QML and theme design - one of the features I was trying to take a stab at was a way to incorporate a "Recently Played" collection into a theme so that it would appear as another collection in the list. That is one of the features of ES2 that I really liked and I think would be a nice addition to themes on Pegasus.

The challenge seems to be that in a ListView or PathView you can only have one model, which in most themes would be api.collections. But in order to have a recently played that spans all collections, I would need to use api.allGames as the source for the filter proxy.

So I guess the question I have is do you have any suggestions for how one might go about incorporating 2 different models into a theme in some fashion? I'm still learning about QML so I might have missed something obvious. Still going to keep trying things and looking into it here but thought I'd bounce it off of you in case you have any tips.

Thanks!

fluffypillow

@msheehan79 actually that's a really interesting question! A View operates over a list of items, which in practice either an item model you can access from the Api, or a plain JavaScript array. In fact, you could actually do this:

model: [ api.collections.get(0),  api.collections.get(1),  api.collections.get(2) ] // etc.

So the simplest way to add a "fake" collection would be setting the model to an array of collections, and put our custom one into it too. Now if we have a filter like this:

    SortFilterProxyModel {
        id: filteredGames
        sourceModel: api.allGames
        filters: ValueFilter {
            roleName: "favorite"
            value: true
        }
    }

, a tempting first idea might be to put this filteredGames into the array... However, a filter over api.allGames produces a list of games, not a collection (it doesn't have a name, for example), so we should turn the list into one somehow. Themes can't "officially" create new collections, however this is JavaScript, so as long as it looks like a collections, ie. has the same properties as a collection, then it can be used as one just fine. If we then create a new object like this somewhere:

    // There are various ways to do this, this is just an example
    property var newCollection: {
        return {
            name: "My Little Favorites",
            games: filteredGames,
            // feel free to add things like `shortName`, etc.
        }
    }

, we can then include it in an array together with the other collections, and it will be treated just like the others:

model: [ newCollection,  api.collections.get(0),  api.collections.get(1) ] // etc.

And indeed it should work as expected:

https://snipboard.io/DhJj8L.jpg

Now obviously nobody wants to fill that array manually. Since it's a plain JS array, you could fill in a for loop or something. Item models also have a not really documented function called toVarArray which just returns the list of items as a plain array. For the nicest code however, we can use the fact that modern JavaScript constructs like the spread operator are also supported, and combine all that into this nice line:

model: [ newCollection, ...api.collections.toVarArray() ]

Example code repo here.

msheehan79

@fluffypillow Nice! This is very helpful indeed. Hope to get some time in the next day or two to take another crack at it.

I'm still figuring out exactly where in the code I can leverage JavaScript, so knowing I can use it in the model declaration for example is really useful info for me. Up until now I had pretty much just used it inside of functions called on keyPress events.

SinisterSpatula

Hi @AndersHP you can definitely give it a try. I got a little frustrated with the project because I'm not versed enough on QML and finding it extremely difficult to understand lol. I haven't done anything for about a week, and I'm just now starting to regain motivation to try any more with it. I came back to see some really neat stuff about making a fake collection, and that is definitely one of the pieces of the puzzle that was confusing the hell out of me. My only issue is, whenever I start adding the sort proxy filter, things with the gameOS theme start behaving erratically. Once the model changes, the gridview disappears for a moment, but then if you start pressing navigating buttons, it reappears and everything is fine. I just couldn't figure out how I'm supposed to do it so that this doesn't cause it to bug out like that. My other problem is the performance of the grid scrolling. And I think this is down to all the fancy stuff in the theme, slowing it down. I feel like I want to just start over on a very basic code, with none of the fancy elements. I want the grid to flow and scroll as smooth as possible, and I'm thinking the best way is a grid view that only wants to show cartridge art (and maybe screenshot as fallback) but no scaling the currently selected tile, no changing font color to gray, or changing opacity, no animations at all, just the scrolling, and maybe a border around the current selection. Feel like I might start over on a clean code, just keeping the platform menu, and game details screens, and cutting back all the bling on the gridview. Then, trying to implement the fake collections of "Last Played" and "Favorites". If I could get to that point, I would be so happy with it. :D But man, it's a challenge, because I really don't know anything about javascript and QML and everything I try to do is really guesswork and trial and error. Someone who actually has skills at this could do it an 30 minutes, what is taking me weeks LOL.

PlayingKarrde

@SinisterSpatula Have you already taken out the video player in the GridItem? That is most likely the heaviest piece in terms of performance. I haven't tried the theme on a pi zero (or even a pi3 for that matter) but removing all the code for that should be the first step. After that I would look at removing the changing of the background art on each item update call.

Other than that I don't think there's anything super crazy going on that should cause a lot of performance issues.

SinisterSpatula

@PlayingKarrde Yeah, the video stuff on grid view was taken out very early on, and it still chugs at times. I think it might actually be the the grid tile elements have too much going on as well. I think I need to strip out even the loading spinners, probably, anything that is asking it to use CPU cycles pretty much. I think the logic needs to be purely, grab and display art, show text on top (or not) and do it as fast as you can. The zero is really sensitive to multitasking since it only has it's single core.

SinisterSpatula

Much better, I think I'm happy with the performance of the grid scrolling now. Had to remove a lot to get it this fast. I still wish it could scroll smoothly, like if I could set the maximum velocity to something slower to give it a chance to load elements before they come into view. If I set the maximum flick velocity it will work for mouse interaction, but it completely ignores key navigation which the gamepad counts as. If I could slow that down just a tad, I think it would scroll even smoother, but seems impossible.

SinisterSpatula

Well crap. I thought I would be smart and tie my background art changes to onMovementEnded for the gridview. This worked out great, if the grid is flicked with the mouse. But does nothing if it's moved by key navigation (d-pad). So the only way to do this is with a timer? I have to reset the timer every time the grid is being scrolled? That seems so inefficient, and with the pi zero I'm trying to be as efficient as possible. :(

SinisterSpatula

Holy moly!!! I'm glad I tried the timer, and I messed it up initially because it lead to a major discovery. It stopped a function from getting called (every time the index was changing), and the performance went through the roof! So now I moved that function to the Timer trigger, and it's a dream come true. The grid is now scrolling with the performance I was dreaming of:

cyperghost

@SinisterSpatula looks great - what do you have done?

SinisterSpatula

@cyperghost done a lot with it so far, mostly resizing various elements. Reduced grid columns, removed a lot of the animations and behaviors to speed it up, then built a settings menu (which still needs UI improving, but since its eventually going to be handled by the frontend I hesitate to put more time on that), changed the way background art is being handled, same for grid art, figuring out how to get the art assets to all be found and work, lot of trial error, and added pico8 svg and openbor svg logos. Next on my list is Favorites, Last Played, few more cosmetic changes, test megadrive/pce16 -> genesis/tg16 swapping, and if I really want to go wild, see about adding alphabet listview that pops out from the side and jumps to (closest) matching index in gridview, and see if we have on screen keyboard support and add it if so. (Not sure if either of these will happen).

SinisterSpatula

Trying my hand at the fake collections, and it seems to be working beautifully! :D below was the code of how I added it, and I'm able to see the two new collections, and switch to all collections and the grid displays all the proper games, the only thing I'm worried about now, is, if the user toggles the favorites bool for the game, will it still work, and if not, how I will fix it, but I have ideas, maybe. maybe not lol. Edit: so yeah, as I expected, the gameData.favorite is a problem, but also another issue with doing it this way is I get a bunch of errors when trying to access game.assets (screenshot, boxFront, etc) saying /GameDetails.qml:287: TypeError: Cannot read property 'boxFront' of undefined I guess because it's not a true "game" from api.collections but rather just a standard array. Hmmmm. So I guess I need to redo this, following the way that @fluffypillow showed, using it as a model data specifically, and I'll just need to use the proxy filter index translating methods when filling or swapping the currentGame object. (if the current collection being displayed comes from one of the proxy sort filters). I guess I'm starting to understand the difference between an Object, a Model, and an Array.

FocusScope {
  
  SortFilterProxyModel {
    id: favoriteGames
    sourceModel: api.allGames
    filters: ValueFilter {
      roleName: "favorite"
      value: true
    }
  }
  property var favoritesCollection: {
    return {
      name: "Favorite Games",
      shortName: "favorites",
      games: favoriteGames,
    }
  }
  SortFilterProxyModel {
    id: lastPlayedGames
    sourceModel: api.allGames
    sorters: RoleSorter {
      roleName: "lastPlayed"
    }
  }
  property var lastPlayedCollection: {
    return {
      name: "Last Played",
      shortName: "lastplayed",
      games: lastPlayedGames,
    }
  }
  
  //form a collection which contains our favorites, last played, and all real collections.
  property var dynamicCollections: [favoritesCollection, lastPlayedCollection, ...api.collections.toVarArray()]
...
  //////////////////////////
  // Collection switching //

  function modulo(a,n) {
    return (a % n + n) % n;
  }

  property int collectionIndex: 0
  property var currentCollection: dynamicCollections[collectionIndex]

  function nextCollection () {
    jumpToCollection(collectionIndex + 1);
  }

  function prevCollection() {
    jumpToCollection(collectionIndex - 1);
  }

  function jumpToCollection(idx) {
    api.memory.set('gameCollIndex' + collectionIndex, currentGameIndex); // save game index of current collection
    collectionIndex = modulo(idx, (api.collections.count + 2)); // new collection index
    currentGameIndex = api.memory.get('gameCollIndex' + collectionIndex) || 0; // restore game index for newly selected collection
  }

  // End collection switching //
  //////////////////////////////

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

  property int currentGameIndex: 0
  readonly property var currentGame: currentCollection.games.get(currentGameIndex)

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

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