Pegasus theme development general

fluffypillow · 16 Feb 2018, 18:56

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

lilbud · 16 Feb 2018, 19:33

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?

fluffypillow · 16 Feb 2018, 20:17

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

halfmanhalfcake · 17 Feb 2018, 18:09

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

I want to create a black rectangle to host the text, where would I create that?
Am I putting the text code in the wrong place? As I need it to appear below the cover, not inside
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

fluffypillow · 17 Feb 2018, 22:30

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

lilbud · 18 Feb 2018, 01:03

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.

halfmanhalfcake · 18 Feb 2018, 09:46

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

fluffypillow · 18 Feb 2018, 16:40

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

tronkyfran · 18 Feb 2018, 16:46

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

lilbud · 18 Feb 2018, 17:57

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

tronkyfran · 19 Feb 2018, 09:09

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:

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

halfmanhalfcake · 19 Feb 2018, 09:25

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

tronkyfran · 19 Feb 2018, 12:30

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!!!

fluffypillow · 19 Feb 2018, 16:45

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

honorio96 · 22 Feb 2018, 20:12

How to add loading spinner in flixnet theme?

Sorry bad english!

fluffypillow · 23 Feb 2018, 11:38

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

honorio96 · 23 Feb 2018, 18:50

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

halfmanhalfcake · 23 Feb 2018, 22:07

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

My current idea:

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

Would this work?

fluffypillow · 24 Feb 2018, 13:28

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

halfmanhalfcake · 9 Mar 2018, 17:01

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?