Pegasus theme development general

halfmanhalfcake

@fluffypillow Great thanks, didn't think I could use these :)

halfmanhalfcake

So I'm trying to learn QML by playing around and creating some console UI's, so far I've created a very simple PS4, Nintendo Switch and XBOX One store UI, which all function but nowhere near ready. I'll probably create an XBOX 360 NXE Dashboard next.

Issues I am having so far:

I noticed in the Pegasus default theme there is dynamic adjustment of height & width depending on whether the artwork (boxfront) is poster, square or steam grid. I want to implement something like , well mainly (poster and square).
If my delegate is the below, how could I implement?

        Rectangle {

                        id: switchartwork
                        width: vpx(275)
                        height: vpx(275)
                        color: ListView.isCurrentItem ? "#4ff0de" : "#ebebeb"
                        clip: true
                        y: 20

                        Column {
                            anchors.fill: parent

                            Image {
                                id: cover
                                anchors.left: parent.left
                                anchors.right: parent.right
                                anchors.top: parent.top
                                anchors.bottom: parent.bottom
                                height: vpx(275)

                                fillMode: Image.PreserveAspectFit
                                source: assets.banner || assets.steam || assets.boxFront
                                sourceSize { width: 300; height: 300 }
                                asynchronous: true
                            }
                        }

No matter what, I can't get navigation sounds to work, I've tried Audio and Soundeffect, but no luck. I've tried to play sounds on keypresses, is that the right way, is there example code anywhere?
How to centre a horizontal listview? I've tried placing the 'horizontalCenter: parent.horizontalCenter' within both the listview code, the item code and the rectangle code, but no luck.

fluffypillow

@halfmanhalfcake Nice! And yeah, sorry for the lack of examples, I still want to write more theming docs eventually. As for the issues,

The original idea for the default theme was to "show 5 columns if the images are portrait, 4 if they are landscape and box-sized and 3 if they are extra wide, like Steam". There are two critical issues:
1. you don't know the sizes of the images while they are not loaded, and
2. there might be different sized game images in the same collection.
As a workaround, the column is set to 3 by default, which gets recalculated when the first image of the collection loads successfully (ie. onImageLoaded). It's not really fool-proof, so I wonder if something like eg. FlowView would work better in the future.
Hm, and you don't get any errors in the log? It should work like this. On what platform does it fail, can you try it on other devices?
To center the ListView itself (ie. the container of the items), you can set its horizontalCenter like you did (might need to double check if your width and height are correct, and optionally set clip too). To make the currently selected item of the ListView appear in the middle of the ListView itself, you'll need to set preferredHighlightBegin and preferredHighlightEnd, and maybe highlightRangeMode too (Qt docs here). This should position the current element in the given range. If that doesn't really work for you, you can also try PathView instead, where you can set the middle point of where the currently selected item should appear (see eg. the Flixnet theme docs).

In general, anchoring items to their -View or Column/Row container doesn't tend to work, as the intention of these elements is to lay out their content in some defined way. It's also possible to avoid them and align the items manually or in a custom way, but the selection will have to be tracked manually then.

halfmanhalfcake

@fluffypillow Thanks for the time to reply, and no need to apologise for the lack of examples, I've learnt a lot from your tutorials already.

So for the 'auto aspect ratio' could I not use something like a calculation (I don't know have any real code knowledge, so using my excel brain here) something like, if the width and the height are not the same, then image size should be something like 200 x 600, otherwise 300 x 300? Would that work?
Do I need to import any wav/media files into QT Creator, or in assuming that theme will play the sound if i direct the code to the file? And no, no error logs, theme loads as normal. I will try again and share my code and see if i'm doing something wrong.
Ok so for example, here is my very incomplete Switch theme (link).
I want to centre the buttons at the bottom so they are centered, like this

My code structure for the bottom buttons goes like this:

Rectangle {
Item {
...ListView { }
...... Component { ... delegate rectangle, etc.

I've tried to put the horizontalCenter in the rectangle, and then the listview, but no luck.
Here's what I have so far, for only that section: link
Remember I am new to writing code :)

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.