Thank you for replying. I have tried several different icons. On my first ones, the color doesn‘t change when I click on a different color in Inkscape. But on others it does work.
Here is what I do:
Import an icon into Inkscape
Select the imported icon
Change color in Inkscape, e.g. from black to grey. In the XML editor a style atribute appears with the new color and the icon changes.
Copy and paste the Insert working ng-class for my item from the working rectangle to the newly important icon
Result: No color change when item is ON in Habpanel.
have you solved this issue somehow?
Your suggested method does not work in chrome and safari and this:
.rotate{
animation: rotate 5s linear infinite;
transform-box: fill-box;
transform-origin: center;
}
@keyframes rotate {
from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
}
code above does rotate it properly, but at upper left top corner of the habpanel (where name of the dashboard is) so it’s out of SVG. Which I’m now trying to solve to stay at original place indeed.
Not sure why it is shifting self tho
edit: ah so it does look like it’s an issue with symbols. Simple rectangle works as expected… damn
edit2: solved by converting symbol to path and then it works … cheers
You sparked an idea here: I can try to modify the shadow.py module to use a base reference design as SVG (i.e. the habpanel floorplan i design in inkscape) in which I foresee an xml element (a space) to inject the shadow.py svg data into…
Food for thought…
I hope it works for you,
You could also consider storing them in a data base as influxdb.
That being said I think an xml file would be a better option.
Hi …
well, beside the first little problems with the right names, a missing symbol, … the way to add the floorplan was really amazingly easy. Even to add new colors, …
I ask myself, how I can add actions to the buttons, like opening a new webpage. For example to open the page of the 3D-Printer-Control or others.
@lzaman If you find a way to inject the data from the shadow.pi file into a .xml file I would be very interested in how you did it.
Thank you in advance for any help you can provide.
Hi Steve,
I have not managed it yet but my thought is like this:
You use inkscape to design your floorplan.
This file should contain a tag which will be replaced by the shadow SVG code.
The python file then dynamically opens the inkscape svg, looks for the tag, calculates the shadows and injects them in that tag… saving it back to the finally used svg file.
This file will be updated dynamically through the Sunset_Azimuth item update…
But like I said, havent been able to implement it yet.
Hi
So I have finally got a modification done. Now my floorplan is updated via this python script which will take a base file and dynamically add the shadow to the floorplan. The only issue though is that the shadow basically relies on a dynamic url (object with {{itemState}} trigger) to refresh the svg and the floorplan layout uses ng-include to inject the item-stream via angular. I have no knowledge of both of these systems so I’m kind off stuck with a floorplan that has the shadow when initially loading the habpanel page, but only updates the other items (not the shadow as the svg itself is not refreshed)
Any thoughts on how this could be solved?
Best regards
Lenny Zaman
MDAR
(Stuart Hanlon, UK importer of Velbus hardware)
204
Hi
I’m really having fun recreating a UI with SVG.
There is just one thing that I’m struggling with.
In a Widget, it is possible to read an itemValue and add to it.
For example, read a value of 10, add 5 and update the Item.
Thats is odd. I have no idea how to then.
In that case I guess the solution is to use another item, and then use a openhab rule for adding to the exsisting item. A bit ackward solution, but + (plus) doesnt seem to behave as it should.
1 Like
MDAR
(Stuart Hanlon, UK importer of Velbus hardware)
208
I could…
But there are quite a few to do…
And why of why does it work properly in a widget, but not an SVG?
Well, it basically is just Javascript logic. In Javascript the plus sign ( + ) is also what you use to concatenate strings, so "abc" + "d" = "abcd". So apparently, itemValue() returns a string by default. And then you do "1234"+4, and as "1234" is a string, Javascript guesses that you want to concatenate two strings. So that results in "12344".
The thing about the minus ( - ) is that the minus is not an operator that can work on strings. "abc"-"d" will probably give you a NaN, so not a number. So Javascript figures that you probably are trying to do something with numbers (as you can tell from the NaN already), and "1234"-4 will give you 1230.
So, now for a solution:
If you know that the item will always return an integer, you can use parseInt(itemValue(...)) + 4, if you would like to be able to deal with floats, you can use parseFloat() the same way.
Another, maybe more “dirty” way is to subtract a negative number instead of adding a positive number: itemValue('Church1ON_ALARM_SUN_M')- -5
Then Javascript just figures out what it needs to do by itself. Do note that you need to put a space between the two minus signs, because a double minus is a different operator altogether and definitely will error out.
2 Likes
MDAR
(Stuart Hanlon, UK importer of Velbus hardware)
210
What a great answer
Thanks, I’ll give it a try when I’m back at my PC.
Unless it keeps me awake tonight, in which case I’ll get out of bed and try it
