Please do not post a support request without first reading and following the advice in https://retropie.org.uk/forum/topic/3/read-this-first

Pegasus theme development general



  • This is a topic for general discussion about creating themes for the Pegasus frontend, solving related issues as well as sharing tips and tricks. Feel free to ask questions or tell us about issues you've encountered while themeing.

    Useful links



  • Just a few questions:

    How would I compile for Windows?

    How would I control animations?

    Can the drag and drop QT creator work for theme development?



  • @lilbud

    • To compile for Windows, you'll first need to install Qt, then download the source code, and build the project using Qt Creator.
    • You can set animations to run automatically when an object is created or one of its properties change. As for standalone animations, they have play, stop, etc. functions (see the Methods part here).
    • In theory, yes. Last time I checked, List/GridVews didn't show up properly, but for positioning non-dynamic elements, it could be useful. I couln't really use it unfortunately, as it always crashed on me in just a few minutes.


  • A bit of help needed.

    I am trying to replicate the cover+text gridview in this screenshot

    My code format for the delegate so far is:

    Item
    ...Column
    ......Image
    .........Text

    1. I want to create a black rectangle to host the text, where would I create that?
    2. Am I putting the text code in the wrong place? As I need it to appear below the cover, not inside
    3. If I make the item width and height bigger then it stretches the image to fit

    If this helps, this is my (very bad) code: https://pastebin.com/33pGBLK8



  • @halfmanhalfcake The current layout is almost good, though according to the code the Image and the Text is on the same level, both under the Column. To create a black background, I'd either replace the Item with a Rectangle (easier), or create a new Rectangle and put the Text in it (this might result in moving some components around in the code later, but might be more efficient technically).

    As for the image size, that's caused by the anchor settings in the Column, set to fill the whole area. You can't use top/bottom anchors there, because the vertical alignment of the items is handled by the Column (you get a QML Column: Cannot specify top, bottom, verticalCenter, fill or centerIn anchors for items inside Column. Column will not function. error in the log). However, you can anchor horizontally, and use the height property.

    Here's a version where I've changed a few bits: https://pastebin.com/ayAkN9UX (removed the anchors, fixed a warning about cell sizes in the highlight, added text width + wrapping and black background). Here's a screenshot: https://snag.gy/YpZv30.jpg.



  • No matter where I put the flixnet theme, it never shows up in Pegasus. I put it in all the folders listed on the wiki.



  • @fluffypillow thanks a lot mate. Will have a look at updating and hopefully get good progress on my first theme



  • @lilbud Interesting; do other (eg. self-made) themes works? On which platforms does this happen?



  • @fluffypillow I had the same problem with Netflix theme on Win10 previously, Ill try again tonight, It could be my mistake too...



  • @fluffypillow I haven't tried any self-made themes yet. Only tried the flixnet theme. I put the folder into all 3 directories listed for Windows. Program Data, App Data and the Pegasus main directory but none show the theme in Pegasus itself.



  • Flixnet theme works fine on C:\ProgramData\pegasus-frontend\themes for me, tested right now on win10. The only strange thing is that it appers twice on the theme selector screen:
    0_1519031494055_theme_load.jpg

    On the other hand, I'm having problems with video sources, cant make any video to play, even on the simplest theme with only a video loader. It could be a codec problem? I tried everything, from mp4 to webm... Everything else is working perfectly, images load..etc, so its not a path problem I think. On windows 10.
    If anyone can send me a video file that its checked to work I would appreciate it ;)



  • @tronkyfran I have the same issue with themes appearing multiple times on the setting menu, they appear 3 times for me.

    In terms of videos, I don't have any in my collection so can't test :(



  • Is it possible to randomly access any collection on api.collectionList or just the current one?
    Im just messing and doing wrong coding here. Pretty fun though :D

    PD: fluffypillow, youre going to make my employer just fire me, cant stop messing with pegasus!!!



  • Hm interesting, I'll try reproducing the theme finding issues on a Win10. As for the videos, in theory if it can be played with the default media player, Pegasus should be able to play it too.

    @tronkyfran Yes, all items of the model can be accessed by the index, setting the current index is only needed for setting the current members, but you're not forced to use that either.

    PD: fluffypillow, youre going to make my employer just fire me, cant stop messing with pegasus!!!

    hehe :)



  • How to add loading spinner in flixnet theme?

    Sorry bad english!



  • @honorio96 the spinner is a simple circle image, set to rotate 360 degrees infinitely:

    Image {
        anchors.centerIn: parent
    
        visible: boxFront.status === Image.Loading
        source: "/common/loading-spinner.png"
    
        RotationAnimator on rotation {
            loops: Animator.Infinite;
            from: 0;
            to: 360;
            duration: 500
        }
    }
    


  • @fluffypillow said in Pegasus theme development general:

    @honorio96 the spinner is a simple circle image, set to rotate 360 degrees infinitely:

    Image {
        anchors.centerIn: parent
    
        visible: boxFront.status === Image.Loading
        source: "/common/loading-spinner.png"
    
        RotationAnimator on rotation {
            loops: Animator.Infinite;
            from: 0;
            to: 360;
            duration: 500
        }
    }
    

    Thank´s

    Excellent work!



  • What's the best way to implement a light/dark theme control?

    My current idea:

    1. Keypress/Controller Button triggers a pop up dialog or a side config menu (similar to the settings menu in pegasus)
    2. Have an option to switch to light theme (default option is dark)
    3. Have IF statements in the color codes (dependent on the switch activated)

    Would this work?



  • @halfmanhalfcake Ideally there'd be a theme-specific section in the settings menu, but that's not implemented yet. Until then, yes, that idea would work too. You can also use states for this too, or eg. some global properties so you have to put if's in less places.



  • What is the best way (without adding any new modules for quick controls) to create some kind of toggle or selection control?

    I want to create one which selects type of artwork (square/poster/wide) or light & dark theme toggle?


 

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.