While the user can resize the popup window temporarily with Alt+RightClick+Drag, it will reset when the user relogs. To allow the user to permanently configure the popup size in a panel widget, or the size of the compact view in the panel, we'll need a store the width/height in the config.
Make sure you still multiply the stored width/height by PlasmaCore.Units.devicePixelRatio, otherwise your popup will look smaller by default on HiDPI/4k monitors.
To simplify testing, I added Plasmoid.hideOnWindowDeactivate: false to prevent the popup from closing when you focus the config window.
Next we register the config keys and their default values in the config/main.xml.
Lastly we register the General config tab in config/config.qml.
Install plasma-sdk then open the Plasma Engine Explorer.
Select the time dataengine.
Enter something like the following into the source name:
UTC-04:00|Solar|Latitude=43.68|Longitude=79.63|DateTime=2021-03-23T19:00:00
The above example is for Toronto, Canada.
Click "Request Source", then scroll down to the bottom to find the new data.
Examples:
Type
Key
Value
double
Azimuth
69.6342657428925
double
Corrected Elevation
-18.092120068676486
QDateTime
DateTime
Tue Mar 23 19:00:00 2021
int
Offset
UTC-04:00
QString
Timezone
UTC-04:00
QString
Timezone Abbreviation
UTC-04:00
QString
Timezone City
UTC-04:00
double
Zenith
108.10976492154272
{{< /section-right >}}
{{< /sections >}}
Avoid widget resize on text change
contents/ui/main.qml
import QtQuick 2.4
import QtQuick.Layouts 1.0
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
import org.kde.plasma.plasmoid 2.0
Item {
id: widget
property int value: 0
property int maxValue: 100
function formatText(n) {
return "" + n + "%"
}
Plasmoid.preferredRepresentation: Plasmoid.compactRepresentation
Plasmoid.compactRepresentation: PlasmaComponents.Label {
id: label
Layout.minimumWidth: textMetrics.width
Layout.minimumHeight: textMetrics.height
text: widget.formatText(value)
font.pointSize: 40
horizontalAlignment: Text.AlignHCenter
TextMetrics {
id: textMetrics
font.family: label.font.family
font.pointSize: label.font.pointSize
text: widget.formatText(100)
}
// Since we overrode the default compactRepresentation,
// we need to setup the click to toggle the popup.
MouseArea {
anchors.fill: parent
onClicked: plasmoid.expanded = !plasmoid.expanded
}
}
Plasmoid.fullRepresentation: Item {
Layout.preferredWidth: 640 * PlasmaCore.Units.devicePixelRatio
Layout.preferredHeight: 480 * PlasmaCore.Units.devicePixelRatio
Rectangle {
id: popup
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
width: parent.width * (widget.value / 100)
color: PlasmaCore.Theme.highlightColor
}
}
Timer {
interval: 100
running: true
repeat: true
onTriggered: widget.value = (widget.value + 1) % (widget.maxValue+1)
}
}
Then create a configuration form in ui/configGeneral.qml. We use and set the max value to .
An extremely simple example of this can be found in the "fuzzy clock" widget in the kdeplasma-addons repo ().
The new Date() should be familiar if you come from a javascript background. We could use a Timer with the Date type, but we want to precisely sync all clock widgets so they all show the same time on all screens. This is where Plasma's DataEngines come in. They are used to share data between widgets. There are for notifications, plugged in usb drives (hotplug), and event the weather data so it only has to fetch the data once to show it in all widgets on each screen.
To use the "time" data engine, we use to connect to it. The "time" needs us to connect to our "Local" timezone. Once connected, it gives us a DateTime object we can access using dataSource.data.Local.DateTime. This property will update every 60000 milliseconds, or every 1 minute.
We also tell the data engine to align these updates to the next minute. If we want to modify this to update every second, we'd change the interval to interval: 1000 (1 second), then remove the intervalAlignment assignment since there isn't an "AlignToSecond", just a .
A clock can then use Qt's Qt.formatTime(currentDateTime) to display the time in a human readable format. You can read more about that function on the Qt documentation for .
Solar is part of the "time" dataengine. It provides the sun's , , and "Corrected Elevation" for a longitude and latitude at a specific time of day.
The the Solar dataengine to check if the "Corrected Elevation" to start using nighttime icons.
We use to calculate the size of the label when it is the widest/maximum value of 100%. {{< /section-left >}} {{< section-right >}}