Iconset: Animated Climacons

Apps & Services HABPanel
1

Hi,

There are a few initiatives for weather widgets and their associated icons lately, so I thought I would share my view of how these icons should be handled in those cases (where you don’t need to have them in HABPanel’s icon picker): the proper way using the standard ESH iconset infrastructure.

@kubawolanin made an attempt to use the awesome animated Climacons (https://github.com/noahblon/animated-climacons) and he was kind enough to map several of the icons’ names to the former 1.x binding’s “condition common Id” of the legacy OH 1.x Weather binding.

So I decided to make a bundle like the Classic icon set you already know as an proof-of-concept:

Download the binary here: https://github.com/ghys/org.openhab.ui.iconset.climacons/releases/latest

Source here: https://github.com/ghys/org.openhab.ui.iconset.climacons/

Compile the sources or download the .jar binary and follow the instructions on the GitHub release page.

Once the bundle is installed, you will be able to retrieve the icons in SVG format with URLs like these:

/icon/climacon?iconset=climacons&format=svg&state=snow-flurries

It works quite well in a template!

<img style="filter: invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%);"
     src="/icon/climacon?iconset=climacons&format=svg&state={{itemValue('Weather_Condition')}}"></img>

This approach allows the flexibility of altering the layout with templates (in a custom widget) with the ease of use of the iconset infrastructure - drop the .jar in the addons folder and you’re set.

If you have a weather widget in mind you would like to contribute, simply state this iconset bundle (or another one!) is a prerequisite. :slight_smile:

Looking forward to your contributions!

8 Likes
2

Just for other Firefox users: SVG CSS animation not working through img tag
Will be resolved with Firefox Release 51

3

I’m currently using OH1.8.3 on raspberry pi 3. I installed your .jar file and save it under addons folder. What should I do next?
I’d hope you answer, thanks

4

They are for OH 2 only.

5

@ysc
I’ve just migrated to OH2 and tried your example
I thought changing the parameters’ values here: style="filter: invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%);

would change the icon’s color, but no matter what I changed, it appeared only black color like this:

Can you show me how to fix it?

1 Like
6

This works for me:

<img style="
        filter: invert(75%) sepia(100%) hue-rotate(0deg) saturate(10000%);
-webkit-filter: invert(75%) sepia(100%) hue-rotate(0deg) saturate(10000%);"
     src="/icon/climacon?iconset=climacons&format=svg&state=few-showers"></img>

<img style="
        filter: invert(75%) sepia(100%) hue-rotate(40deg) saturate(10000%);
-webkit-filter: invert(75%) sepia(100%) hue-rotate(40deg) saturate(10000%);"
     src="/icon/climacon?iconset=climacons&format=svg&state=snow"></img>

7

@ysc is there any way to do an icon name mapping? My weather conditions for example have partly-cloudy but the icon set has only partly-cloudy-day and partly-cloudy-night

8

@Andrew_Pawelski can’t think of an elegant solution right now. You could add the missing icons and build the .jar again though?

9

I could do if I knew how - no idea there

I’ve gone the un-elegant route of multiple .replace functions

If it’s quick and easy and you have time to provide instruction or a link to opening,adding and rebuilding a jar that would be awesome as I’m sure there are some more I haven’t found

Thanks
Andrew

10

It’s not so hard but not straightforward either :slight_smile:
You have to configure an openHAB development (instructions here: http://docs.openhab.org/developers/development/ide.html) then import the project into your workspace (File > Import…, then in the tree view Import existing projects into workspace in the General section, then Next and click Browse…, select the project’s folder, it will appear in the Projects list, select it then click Finish).

When that’s done you may add additional .svg files in the icons folders, no code change is necessary.

To build you can either use the Maven commandline if you installed it separately (mvn clean package) or configure a Maven Build task in Eclipse like this (Run > Run Configurations…):

image.png728×773 37.4 KB

Then click Run.

It might take a while the first time as it’ll download a bunch of dependencies. If everything went well you’ll see a BUILD SUCCESS message in the output and the .jar file will be in the target folder.

Good luck :slight_smile:

1 Like
11

I use Fully kiosk Browser ( for a lot of good reason ) and icon does not appear well because it used outdated Chromium engine on old android device…

Is there something I can do ? is it possible to convert the icon into png ?

Thanks

12

This bundle (and HABPanel’s icon handling in general) only supports SVG.

13

Doesn’t seem to work after I updated my snapshot build (#964). I’ve removed the bundle and re-added it a few times but the path (servername:8080/icon/climacon?iconset=climacons&format=svg&state=sunny) no just returns 404.

I looked at the github page and it looks like the binding needs to be updated to account for the change from i18nProvider to TranslationProvider.

1 Like
14

I see, thanks for reporting and investigating!

1 Like
15

Well. Now were openHAB2.1 is released, this seems to be an issue for everyone :frowning:

16

Yes same for me

18

Same here … what to do now?

19

https://github.com/ghys/org.openhab.ui.iconset.climacons/releases/tag/2.2.0.201707061209

1 Like
20

Works like a charm! Thanks a lot @ysc!!!

21

thanks!