Pegasus theme development general

PlayingKarrde

This post is deleted!

Thistlebrew

I am really confused with the interfacing with the API. I know the tutorials state that the API mentioned in them is out of date so I switched over to trying to use the API documentation to figure out my issue. I have also tried reviewing the example themes' code to try and figure this out.

I have this code (just trying to get a repeating list, no navigation at this point.):

 ListView
 {
	
 	id: collectionBigScroll
 	orientation: ListView.Horizontal
	
 	model: api.collections.games
	
 	delegate: 

 	Rectangle {
    // as we calculated previously
    width: vpx(240)
    height: vpx(135)

    color: "green"

    Text {
       
        text: modelData.title
    }
		
	// Image {
	// 		id: gameItem
	// 		source: modelData.assets.boxFront
			
	// 		fillMode: Image.PreserveAspectFit
	// 		asynchronous: true
			
	// 		}
	
		
	}
}

If I try just the Image (currently commented out) or the rectangle+text objects on their own, not in a list view, they get drawn on the screen. If I add them to the list view, I get nothing on the screen. Its almost like the list contains nothing, which I know it does, because the example themes display just fine. I am not getting any errors in the console either, which I was when I was trying to follow the tutorials and using the wrong API data.

Anything I may be missing? Still really new to QML so that may not be doing me any favors.

fluffypillow

@Thistlebrew Ah sorry, the documentation of games and collections was described incorrectly: the listed properties belong not to the model, but the elements of the model. I've fixed the relevant part; hope it's less confusing now, but feel free to ask if you run into troubles.

Yeah the tutorials are in need of an update, with the current API changes in progress and all. Will definitely update them after the development of these parts is mostly done.

PlayingKarrde

@fluffypillow I'm unfortunately stuck again haha. How can I use the filters to find a collection from api.allGames? It doesn't seem to accept collection as a roleName from what I can tell.

The reason why is I want to also be able to sort and filter based on the collection and potentially have multiple collections returned (otherwise api.collections would work fine).

fluffypillow

@PlayingKarrde ah so that's why SQL would be useful for you! Unfortunately there's no built-in way for such reverse-lookup yet, the games have no information about the collections they contain them at the moment. As a workaround, you could do the lookup manually, by going through all the collections in eg. a for loop and check its games member whether it contains the particular game (something like <theCollection>.games.contains(<theGame>)). It requires some programming, and probably won't be too fast... I'll see how much increase would be in the memory usage by adding a list of collections for each game.

PlayingKarrde

@fluffypillow Ah. Hmm yeah I feel like it would be important. Another (and probably better?) example would be if you're doing a search and it returns all games, having information for what system that game is seems important (especially if you have the same game on various systems).

I won't do the for loop for now as I don't want to sacrifice speed. For the time being I'll just do my filtering based on the current collection as that will get me a large part of the way to accomplish what I'm currently trying.

Also do you happen to know how to return only a certain number of results? I want to do a recently played list but only want to return 3 entries. Can't seem to figure it out.

fluffypillow

@PlayingKarrde yeah I can see the use cases, I was just worrying about the increase in memory usage. Such overhead shouldn't cause problems, but better safe than sorry.

Also do you happen to know how to return only a certain number of results?

IndexFilter might fit here, with maximumIndex: 2 (which would result a list with game[0], game[1], game[2] as elements).

PlayingKarrde

@fluffypillow Yeah that's what I was originally using but it was just returning the first three games in general. Upon further reflection though I think that suggests my filters aren't working correctly.

AndersHP

@tronkyfran that's so neat!
It would be so cool to see cartridges getting put into their respective machines upon gamestart, but maybe that's just me dreaming! :-)

spartan

@fluffypillow I'm trying to build Android version, but after installing QT Creator and everything else, I get the following error in QT Creator:

Android/Sdk/ndk-bundle/toolchains/arm-linux-androideabi-4.9/prebuilt/linux-x86_64/bin/arm-linux-androideabi-g++: not found

Using Android NDK 19.2.534500
SDK 26.1.1
QT 4.9.0
Java SDK 8

fluffypillow

@spartan yes, Google removed GCC from the NDK not too long ago. To build using the latest NDK, you'll need at least Qt 5.12, while for older versions, you should use NDK r10e.

wallmachine

@fluffypillow a while back you mentioned that you were going to update theme documentation because of some overhaul did the documentation ever get updated?

fluffypillow

@wallmachine not yet, but I do have some plans and outlines for their contents. The current ones ended up a bit massive, so this time I'll likely split things into smaller chapters, which should come sooner (well, once I actually start writing the guide) and easier to follow. I also plan to some add QML tutorials too.

wallmachine

2019-04-23T13:38:09 [i] Theme set to 'Simple theme' (`D:/Pegasus/themes/tutorial-simple/`)
2019-04-23T13:38:09 [i] Program settings saved
2019-04-23T13:38:09 [w] file:///D:/Pegasus/themes/tutorial-simple/theme.qml:29: TypeError: Cannot read property 'shortname' of undefined
2019-04-23T13:38:09 [w] file:///D:/Pegasus/themes/tutorial-simple/theme.qml:44: TypeError: Cannot read property 'index' of undefined
2019-04-23T13:38:09 [w] file:///D:/Pegasus/themes/tutorial-simple/theme.qml:42: TypeError: Cannot read property 'model' of undefined
2019-04-23T13:38:09 [w] file:///D:/Pegasus/themes/tutorial-simple/theme.qml:40: TypeError: Cannot read property 'gameList' of undefined
2019-04-23T13:38:09 [w] file:///D:/Pegasus/themes/tutorial-simple/theme.qml:102: TypeError: Cannot read property 'assets' of undefined
2019-04-23T13:38:09 [w] file:///D:/Pegasus/themes/tutorial-simple/theme.qml:110: TypeError: Cannot read property 'title' of undefined
2019-04-23T13:38:09 [w] file:///D:/Pegasus/themes/tutorial-simple/theme.qml:134: TypeError: Cannot read property 'developer' of undefined
2019-04-23T13:38:09 [w] file:///D:/Pegasus/themes/tutorial-simple/theme.qml:145: TypeError: Cannot read property 'year' of undefined
2019-04-23T13:38:09 [w] file:///D:/Pegasus/themes/tutorial-simple/theme.qml:141: TypeError: Cannot read property 'year' of undefined
2019-04-23T13:38:09 [w] file:///D:/Pegasus/themes/tutorial-simple/theme.qml:152: TypeError: Cannot read property 'summary' of undefined

fluffypillow

@wallmachine I assume that's from here right? Yes, the code in that article was not yet updated. Until then, you could take a look in the sources of these two themes, along with the reference.

wallmachine

@fluffypillow I'll see what I can work out thanks.

wallmachine

does pegasus have an A-Z search?

fluffypillow

@wallmachine Pegasus provides only the data, any kind of sorting and filtering then can be done in themes.

lilbud

@fluffypillow Got the carousel to line up
alt text

Now for the movement

On the switch itself. The carousel starts on the first item on the left, the selector then moves to the left while moving the carousel to the right (I'm uploading a video I took to better explain this) So when the frontend loads, the carousel is selecting the first item rather than the center item.

Video to better explain the movement: https://photos.app.goo.gl/SofY6eK7N64c12uT9

fluffypillow

@lilbud I see, I see, so you'd like to create a layout like this and keep the selection in the middle area: https://snag.gy/CGAw4Q.jpg

Looking at the video though, it seems the Switch UI is not actually a carousel. See there are two kinds of this linear layout in Pegasus:

ListView is easier to use but doesn't loop like a carousel (ie. you jump to the beginning/end on the last/first element). This is what the Switch UI uses in the video.
PathView is somewhat more complex but loops like the ES systems view. That's what the Carousel object in the theme uses under the hood.

So in case you'd like to make it exactly like the Switch you could take a look on ListViews too.

For both of them, you can use preferredHighlightBegin and -End to set the range where you want to keep the selection. The actual value depends on the type of the layout:

For ListView, they are in pixels, and mean the left and right edge of the area (like on the image above)
For PathViews, they are in percentage of the whole path, and mean the center point of the leftmost and rightmost item (maybe this animation helps)