How to add own icon to self created plasmoid widget?

Development
1

I am making a small widget to place on the taskbar. The widget runs fine, except for the icon. I want to give it a custom icon to display. How do I realize that? On the documentation I can find no other help than the Plasmoid.icon variable to set. This is only for registered icons.

Do I need to do something with paint functionality from Plasmacore? Or with the Plasmoid.file() operand?

I reduced my widget to the minimal functionality. The real widget is bit bigger, but this gives me focus on the core.

import QtQuick 2.12
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
import QtQuick.Controls 1.2 as QtControls

import "../code/returnItworks.js" as GetItworks

Item {
	id: mainElement
	property string resultFromJS

	Plasmoid.preferredRepresentation: Plasmoid.compactRepresentation
	// Plasmoid.icon: Plasmoid.file("icons", "custom.png")
	// Plasmoid.icon: "../icons/custom.png"
	Plasmoid.icon: ""

	Plasmoid.toolTipMainText: "Will it work?"
    Plasmoid.toolTipSubText: resultFromJS

	Component.onCompleted: updateDetails()

	function updateDetails(){
		console.log("Update details.");
		resultFromJS = GetItworks.answerMe();
	}

	PlasmaComponents.Label{
		text: "Hello world."
	}
}
1 Like
2

What kind of icon do you want to use? An icon from the active Plasma theme or active Icon theme, or a file on disk?

1 Like
3

I want to use a icon from file. A png to be precise.

4

In that case you’ll need to add it using the QtQuick Image primitive, and add the Image object into a custom CompactRepresentation for your widget.

1 Like
5

Thanks I will try this. And for the sake of make answers findable, post solution with code here. :wink:

1 Like
6

I highly recommend using PlasmaCore.SvgItem (with svg icon) - you can apply Plasma theme color to it

2 Likes
7

Yeah, vector icons will do better at anything bigger than 16 px

1 Like
8

You mean add it to the CompactRepresentation?

Themes is in this case not a requirement. Because it is a very personal solution. But for the sake of good programming I will try it next week. (When I have time and a computer to test it.)

9

If it’s a personal widget and you have a specific image in mind, yeah, no need to overcomplicate things. If it were something to be distributed, you would definitely want to support SVG icons.

1 Like
10

What if this person wants to share his creation?

I originally made the Advanced Radio Player for myself too)

11

In this case it very user specific. :wink:

12

Working snippet.

import QtQuick 2.12
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.plasmoid 2.0

Item {
	id: mainItem
	Plasmoid.preferredRepresentation: Plasmoid.compactRepresentation

	Plasmoid.toolTipMainText: "Will it work?"
        Plasmoid.toolTipSubText: "Yes, it does work."

	Plasmoid.compactRepresentation: Item{
		Image {
			id: myIcon
			source: "custom.png"
			anchors.fill: parent
		}
	}
}
13

If you click solved on the post with the code others can skip directly to it from the first post and it’ll show up in the post feed with a :white_check_mark:

1 Like
14

I was looking for that option. But this Discord channel has this plugin not enabled.

image
image768×167 4.62 KB

15

Yep.

Yep. Enable the Solved plugin on all categories, or allow setting help as a tag

Not sure if this was just forgotten or is intentional but I think the Development category should have the solved plugin activated.

1 Like