Pegasus theme development general

fluffypillow

@halfmanhalfcake Sorry for the late reply,

Sure, you can use calculations like that, you just need to remember that the images may come in all kinds of sizes. In your case, I think you want to set a fixed height Rectangle/Item for the game boxes, and a default width that you update when the Image (eg. inside the Rectangle) is loaded. Or, if you use an Image as the delegate, setting only the height will make the image width scale automatically according to the aspect ratio.
If the file is inside your theme directory, you should be able to reference it by its relative path. I'll check if this indeed works fine.
Here is an example: there, a 350x50px ListView is aligned in the middle of a 600x200px Rectangle. Inside the horizontal ListView, which contains 100x50px items, I've set the highlight range so the currently selected item is positioned horizontally in the center (between 125 and 225px, relative to the ListView itself). The delegates are colored Renctangles, with a Text inside them, anchored to their middle. Note that the alignment of the items inside the individual components is completely separate from their parent containers. If the ListView may be resized, you may want to set the highlight begin/end to (width / 2) - [delegate width].

In your case though, you have a fixed number of items likely with different functionality. In this case, moving the definition of the Circle item to a separate file or Component, then creating a simple Row container might be easier.

By the way, when if doesn't crash, the Designed feature in Qt Creator can come very handy for experimenting and setting up base layouts in QML.

halfmanhalfcake

@fluffypillow Thanks, appreciate the help. Will give it another go this week

halfmanhalfcake

So last night I created an XMB type of theme, which is nearly ready I guess:
https://imgur.com/a/FS9GdO8

I have a few issues so far, I might need your help reviewing the code.

How do I delay the background wallpaper appearing? I have tried Pause Animation and timer, but no luck yet. On the PS3 there is a 1-2 second delay before the background appears and I want to re-create that delay before the image appears. The code I have so far is a simple Image {} code:

Rectangle {....        

Image {
            id: backgroundart
            //verticalAlignment: Image.AlignTop
            anchors.right: parent.right
            width: parent.width
            height: parent.height
            fillMode: Image.PreserveAspectCrop
            visible: source
            source: api.currentGame.assets.background
            sourceSize { width: 1280; height: 720 }
            asynchronous: true
            opacity: 1
        }
}


- I have a drop shadow on the vertical listview delegate (the game icon), which gives a shadow to every icon in that list. I only want the shadow for the selected game icon, not for every one.

    Component {...
        Rectangle {....
            Image {
                id: gamesart
                width: parent.width
                height: parent.height
                fillMode: Image.PreserveAspectFit
                source: assets.logo ||assets.banner || assets.steam || assets.boxFront
                asynchronous: true
                sourceSize { width: 300; height: 300 }
                horizontalAlignment: Image.AlignHCenter
                verticalAlignment: Image.AlignVCenter
            }

            DropShadow {
                anchors.fill: gamesart
                horizontalOffset: 3
                verticalOffset: 3
                radius: 8.0
                samples: 17
                color: "#80000000"
                source: gamesart
            }  }   }

So far I have tried adding [visible] line to the DropShadow with ListView.isCurrentItem ? true : false, which did not work

Hope that's clear enough.

tronkyfran

Are you trying to fade in the image? If thats the case I think I have code for delaying it before it gets the image on top, but I'm afraid I wont be able to give it to you till monday(I have the test code at work).

halfmanhalfcake

@tronkyfran I managed to fade the image earlier (somehow) but everytime you go to a game with no background, and then back to the game it doesn't fade anymore, so I gave up :(

I'm just trying to delay the background showing, if it includes a fade, even better :)

tronkyfran

I had the same problem there, had to make a special "if" with a special image for those cases(no background) and it worked pretty well. That said I'm not very fond of my programming skills, so take it with a grain of salt :D

halfmanhalfcake

@tronkyfran Ah, this is my first time trying to code something. I've only ever played around with HTML before and using the inspect element in Chrome.

fluffypillow

@halfmanhalfcake nice, happy to see it's taking shape :)

I'm actually using a delay too, but for the videos, to not load instantly during scrolling. It's here in the main theme code. I've created a Timer called videoDelay which is restarted every time a particular variable changes (see it above). The interval it set to a short 50ms (default: 1 sec), and when it triggers, I set the video to play and start the playback. You could do something similar, except that you'll probably need to change the Image's source instead.
for the shadow, ListView.isCurrentItem would be my first guess too, does it have no effect at all? Maybe try creating a new property bool in it's parent Rectangle to to store the value of ListView.isCurrentItem, then use that property in the DropShadow.

lilbud

I need to get back to making my theme, except the fact that I speak code as well as I speak Spanish

I failed Spanish class

honorio96

Is there any way to add sounds at startup and in the Pegasus navigation keys?

fluffypillow

@honorio96 somehow I missed your post, sorry. SoundEffect items should work for key presses, but if I remember correctly, they didn't load for someone. Will check that. There isn't really a "loading complete" event yet, but you might be able to play some sound when the theme first gets the input focus, or on Component.onCompleted.

tronkyfran

Testing some things, still long way to go.

Still not sure about metadata placement or carousel scaling, I accept suggestions. Gameplay video will be displayed at monitor, performance is pretty good(at windows).

I have created new art for about 200 games for amstrad, so I think an Amtrad CPC versión will come pretty soon,
as well as color version with color monitor.

tronkyfran

https://streamable.com/ktair

fluffypillow

@tronkyfran Very nice! Is this actual 3D?

tronkyfran

@fluffypillow Well, its 3d rendered everything, but not realtime 3d on Qt sadly, I just have not enough prog skills yo do that, so If have to remake all the cover art by hand. It can automate some things tough.

dmmarti

I've got a quick question, that I've not yet found the answer to while reading through all of the forum posts for Pegasus-FE.

Installing the frontend from the RetroPie Setup script, I've found the "themes" folder where I can add my own into (in the /opt/retropie/configs/all directory).

But where does the default pegasus-fe theme get installed to? I'd like to add some additional logos into it but I've not been able to find where the built-in default location for "pegasus-grid" is?

I know it's probably something simple and I've just overlooked it in the previous forum posts...but so far, I've not been able to locate it's directory.

fluffypillow

@dmmarti Actually it's build into the program itself, as to always have one undeleteable theme ready in case of problems. You can find its sources here, after downloading and placing it in the theme directory, it works just like any other theme. (You can download the sources here, with the green 'Clone or download' button.)

dmmarti

@fluffypillow
Ah...that explains why I could never find it.! Haha

Thanks for getting back to me. I've just started tinkering with Pegasus and learning it's ins-and-outs while I'm beginning to learn theming for it.

Thanks for everything and developing Pegasus.

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.