You can however add an angular-clock, already built into HABPanel and used for clock widgets, on top of it. You would need to position it and style it manually with CSS, unfortunately.
Add something like this below the <div ng-include="(your SVG)"></div> in your template:
This is just plain awesome! I have a question about having an item react to an update from OpenHAB. For example, I have door sensors on all exterior doors, is there a way that I can make the object for my doors fill red when the door is opened?
I created a “ng-class” attribute for:
When I open the door, the panel does not change… I did not create an ng-click for a send command, because I don’t want to be able to click on the door and turn the sensor on, I would prefer it to react from an update from the device itself. Is this possible?
itemState(itemname, [ignoreTransform]): retrieves the state of an item by its name;
ignoreTransform (optional, false by default) will return the raw state (e.g. ‘CLOSED’) instead of the transformed state (‘zu’)
So if you have transformations you can explicitely ignore them: itemState('ContactOfficeDoor', true) == 'ON'
(note the “true” as 2nd argument)
Well, I don’t know what to say, I initially had the same problem as you with the SVG you provided.
So I loaded it in my Inkscape, removed the “metadata” node by clicking on it and pressing the button in the XML editor, and it gave me this, which works:
Note how it removed the svg: namespace prefixes in elements and added it as the default namespace (xmlns="http://www.w3.org/2000/svg"). I have an older Inkscape version than you but I don’t think it matters. Very odd.
Another thing: do not use double quotes in attribute values as it will apparently replace them by " and that won’t work. See "light-on" which I replaced by 'light-on'.
I just followed the same steps you did and it fixed the issue here too. There may have been a change in the way the Inkscape application handles the SVG generation. I followed your steps above exactly and that’s the file it generated for me. So my guess is there’s something in the way the SVG is being generated by the program, maybe something in the way they handle the metadata.
I don’t know but deleting the metadata fixed the issue.
No, I did any creative work like floorplan painting, text and font design etc. in Affinity Designer (I am a big fan of that tool!).
Exported as SVG. Any additional work and duplicating buttons and texts is done in Inkscape (which is not so funny at least on the Mac)
This is all awesome and I’ve already created some genius stuff. Now, I’m facing a problem and maybe you have an idea what is wrong…
To indicate an open door I’d like to change the color (which works) then adjust the X,Y position (which works), and then rotate it by 45 degree… which doesn’t work.
I attached a ng-class attribute to the door object