Dear VDG, UX people and design people (plus everyone interested, of course)

I bought myself a Philips Hue smart lightbulb system, and I was rather happy with it, aside from not being able to conveniently control my lights from my favourite desktop, KDE Plasma. So I decided to try to write my first plasmoid for it.

The functionality and somewhat look and feel is based on the official app, of course with minor adaptions (e.g. a lot of missing functionality right now, whilst you can manipulate all your lights and rooms, there is so far no possibility to manage them, e.g. adding lights or rooms, deleting or renaming them.)

The basic look of the plasmoid is



As you can see, I separated three main functionalities into three tabs: Actions (turn on all lights, turn off all lights, in future versions also user defined favourite actions), Groups (imagine: rooms. As in: bedroom, kitchen, office ...) and Lights (Lights as in: single bulbs. They can be in groups, but they don't have to)

As plasma systray size is horribly small (ignore the rather tall ones on the screenshots, I patched my systray to be taller than the default. It also works fine with the default, mind. You just see fewer items), the items are by default in a collapsed state, showing the most important information:



The light type (icon, can be a bulb, can be an icon depending on the room type, more on that later), the current colour (Hue supports whites with different temperatures, plus actual colour), the name and an on / off switch.

The items can be expanded by a click, e.g.



which shows a brightness slider and 3 (lights) or 4 (groups) additional tabs, being: list of lights in the group, white temperature, colour and info.



Colour: https://i.imgur.com/M40O6K2.png Info https://i.imgur.com/hMWuhCQ.png

Colour and temperature can be chosen by simply clicking on the desired area of the rectangle, the icon on the left (and all children, in case of a group) are updated right away to show the new colour. (Also using the on/off switch or slider auto-updates all children, plus in case of lights also all parents, as they can be in multiple groups. Yes, hue is complicated)

I choose the tab approach instead of pages (with back and fourth) because usual workflows (e.g. switching off the lights in your living room, switching them on in the corridor and dimming them in the bedroom) would be a massive pain if one had to navigate back and forth for actions.

In case of problems, the plasmoid tries to be verbose about what is the issue and offer a possible solution to the user:


and more: https://i.imgur.com/13RKHLm.png https://i.imgur.com/kUsdtch.png

(by the way: ignore the mixture of languages. The plasmoid is English, but translatable. The title is German because the .desktop file is translated, and the content is German because I named my rooms and lights in German)

The thing is configurable as well, by default with a simple dialogue,


with some advanced options that are only shown when needed:




Initially every app has to be connected with the Hue bridge, which is done by sending a request from the app (in this case: the plasmoid) and actually pushing a physical button on the bridge. I try to guide the user through this:






Now I'd like to get some feedback, as this is the first plasmoid I ever wrote (please be constructive).

Code can be found at (and improved at) https://github.com/Fuchs/hoppla-sa (note the TODO, some rough edges are known).
Feel free to play around with it if you do have a Philips Hue System, it should work™, at least it does so for me with a wide variety of configurations.

And my second request: Hue supports categories / types for groups. In the app, there are some predefined categories, being:
Living room , Kitchen , Dining, Bedroom, Kids bedroom, Bathroom, Nursery, Recreation, Office, Gym, Hallway, Toilet, Front door, Garage, Terrace, Garden, Driveway, Carport, Other
As you can see, I borrowed some more or less fitting breeze icons for some of them. If you happen to have decent icons for any of the above or even want to make some, feel free to point me at them (current product license is LGPL2, thus the icons would need to be compatible). Requirements are: SVG (scalable) and monochrome, so that I can make a dark and a light variant (this is automatically picked depending on the colour of the background)
Also I'd need a big (SVG, scalable, coloured) icon for the actual plasmoid, if possible.

Thank you very much in advance, kind regards

Fuchs

PS: I am not that often around the formums, sorry if I didn't include images correctly or whatnot. Full gallery for scrolling through available at https://imgur.com/a/wPcyr and I tend to be around on IRC (freenode, hackint, OFTC, ...) as "Fuchs"

Ooh I love this! the layout and plasmoid design looks pretty good to me.

I took a first stab at an icon for the plasmoid:


The svg is here.

Hope this helps and thanks for sharing your work!

alake wrote:Ooh I love this! the layout and plasmoid design looks pretty good to me.

I took a first stab at an icon for the plasmoid:


The svg is here.

Oooh, I love it! ♥

Thank you very much. From what I can see (I might be blind, sorry in this case) I don't see your name or license in it,
what shall I put in a contributors file (I have to make one) and can I ship it LGPL2 along with the rest?

Hope this helps and thanks for sharing your work!

Yes, thank you! I also like the bulb, could you give me an icon with just the bulb, then I might replace the current im-jabber one from breeze that I use.

Thanks again, shall include it with my next commit as soon as I have the above information
(If you plan to update it, you could then just send a pull request to my GitHub repo, or whatever you prefer)

Kind regards,

Fuchs

K-Fuchs wrote:Oooh, I love it! ♥

Thank you very much. From what I can see (I might be blind, sorry in this case) I don't see your name or license in it,
what shall I put in a contributors file (I have to make one) and can I ship it LGPL2 along with the rest?

Awesome, glad you like it.

I did a few minor touch ups to better fit the pixel grid when scaled across different sizes. I also updated the metadata to include my name and the LGPL2 license. Find the updated file here.

I also like the bulb, could you give me an icon with just the bulb, then I might replace the current im-jabber one from breeze that I use.

I did up the monochrome icons for the bulb:


I'm not sure which one you prefer, but either would work well I think. You can find it here and here.

Hope this helps!

Perfect, thank you very much.

I updated the files and placed them on GitHub.

I am not using the bulb yet, shall have a look next week!
Also I need to find out how to use relative icon paths in plasma, it seems to not work as I want it to.

Have a great Sunday, kind regards,

Fuchs

I'm sure folks on the plasma irc channel would be willing to help with using relative paths for plasma icons.

I had a little extra time so I put together some icons for the groups/rooms. Hope they're helpful.



You can find all of the svgs files here.

Good luck!

Thank you very much, they are great!
I'm sure that I can also derive the few remaining ones from these, so I am all set.

Yes, I already am in the #plasma IRC channel and got help with various things, I'm sure we'll also find something for the icons.

Thanks for your great work ♥

Kind regards from Switzerland,

Fuchs

Hi,

just wanted to say that I slightly modified your bedroom icon to create a kidsbedroom one (single bed, see below, "Gastzimmer" is the one), and that I exchanged the kitchen icon (I like yours, but I wanted something a bit more pot-y and to at least make one icon myself), the rest is now in use and looks gorgeous:







Thank you once again, and I think with that the design part of the plasmoid is done, back to fixing remaining bugs, release 1.0 and then add features ♥

Looks great K-Fuchs! Glad I could help!