RetroPie forum home
    • Recent
    • Tags
    • Popular
    • Home
    • Docs
    • Register
    • Login

    Pegasus theme development general

    Scheduled Pinned Locked Moved Ideas and Development
    pegasusqmltheme makingtheme help
    156 Posts 16 Posters 52.4k Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • halfmanhalfcakeH
      halfmanhalfcake @fluffypillow
      last edited by

      @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 :)

      1 Reply Last reply Reply Quote 0
      • fluffypillowF
        fluffypillow
        last edited by

        @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.

        halfmanhalfcakeH 1 Reply Last reply Reply Quote 0
        • halfmanhalfcakeH
          halfmanhalfcake @fluffypillow
          last edited by

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

          1 Reply Last reply Reply Quote 0
          • halfmanhalfcakeH
            halfmanhalfcake
            last edited by

            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.

            1 Reply Last reply Reply Quote 0
            • T
              tronkyfran
              last edited by

              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).

              halfmanhalfcakeH 1 Reply Last reply Reply Quote 0
              • halfmanhalfcakeH
                halfmanhalfcake @tronkyfran
                last edited by

                @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 :)

                1 Reply Last reply Reply Quote 0
                • T
                  tronkyfran
                  last edited by

                  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

                  halfmanhalfcakeH 1 Reply Last reply Reply Quote 0
                  • halfmanhalfcakeH
                    halfmanhalfcake @tronkyfran
                    last edited by

                    @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.

                    1 Reply Last reply Reply Quote 0
                    • fluffypillowF
                      fluffypillow
                      last edited by

                      @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.

                      1 Reply Last reply Reply Quote 1
                      • lilbudL
                        lilbud
                        last edited by

                        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

                        Creator of the Radiocade: https://retropie.org.uk/forum/topic/6077/radiocade

                        Backlog: http://backloggery.com/lilbud

                        1 Reply Last reply Reply Quote 0
                        • H
                          honorio96
                          last edited by

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

                          fluffypillowF 1 Reply Last reply Reply Quote 0
                          • fluffypillowF
                            fluffypillow @honorio96
                            last edited by

                            @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.

                            1 Reply Last reply Reply Quote 0
                            • T
                              tronkyfran
                              last edited by tronkyfran

                              Testing some things, still long way to go.
                              0_1535101655464_TEST_01_PEGASUS_THEME_V01.jpg

                              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.

                              1 Reply Last reply Reply Quote 1
                              • T
                                tronkyfran
                                last edited by

                                https://streamable.com/ktair

                                AndersHPA 1 Reply Last reply Reply Quote 1
                                • fluffypillowF
                                  fluffypillow
                                  last edited by

                                  @tronkyfran Very nice! Is this actual 3D?

                                  T 1 Reply Last reply Reply Quote 0
                                  • T
                                    tronkyfran @fluffypillow
                                    last edited by

                                    @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.

                                    1 Reply Last reply Reply Quote 0
                                    • D
                                      dmmarti
                                      last edited by

                                      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.

                                      fluffypillowF 1 Reply Last reply Reply Quote 0
                                      • fluffypillowF
                                        fluffypillow @dmmarti
                                        last edited by

                                        @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.)

                                        D 1 Reply Last reply Reply Quote 0
                                        • D
                                          dmmarti @fluffypillow
                                          last edited by

                                          @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.

                                          1 Reply Last reply Reply Quote 1
                                          • PlayingKarrdeP
                                            PlayingKarrde
                                            last edited by

                                            This post is deleted!
                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Contributions to the project are always appreciated, so if you would like to support us with a donation you can do so here.

                                            Hosting provided by Mythic-Beasts. See the Hosting Information page for more information.