Sorry for the stupid question, but where do I put this?
I have created one single svg for my floorplan and I am missing this definition.
Is there a way to do this in the same svg where it’s needed?
Not a stupid question at all!
It goes in a CSS file, which is separate from the SVG. You can use just one CSS file and define all the styles you want for all your SVGs.
I’m working a lot this week/weekend, but I’ll try to post a more detailed response in a few days.
Thanks a lot for your quick response.
I will play around a bit and see if I can make progress without messing up my stuff
I hope you like your job! That makes it easier 
1 Like
Nothing more than “it was in OH2 and remains in OH3” as the UI for its intended purpose (mainly fixed wall tablets). It’s not actively worked on but still maintained for critical bug fixes.
Sorry, maybe I got it wrong.
for me it sounded like „on OH3 it’s still there but beyond…
Anyway, I’m glad to hear, that my effort I put into habpanel is not wasted 
So this is missing in a CCS file wherever this supposed to be stored:
.transparent {
opacity: 0 !important;
}
I would expect to have a reference (like in the weather webview) in my svg:
<link rel="stylesheet" type="text/css" href="{{ config.html_path == NULL ? '/static/openweathermap' : config.html_path}}/weather-icons-master/css/weather-icons.css">
I used @jh1777 floorplan as a starting point. So I have the entire code in a single svg and copy it into a template in habpanel.
This is then stored in
/var/lib/openhab/jsondb/uicomponents_habpanel_panelconfig.json
But I don’t see any reference in the svg-file to an external css file.
Questions:
- Where to put the css?
- How to reference in the svg to use it
- Alternatively: How to translate the transparent / opacity code directly into the svg?
I tried this, but this does not work:
ng-class="{'transparent': itemState('Tblt_Video1', true) == 'OFF' }">
changed to:
ng-class="{'opacity: 0': itemState('Tblt_Video1', true) == 'OFF' }">
This does not work either:
ng-class="{opacity="0.3" : itemState('Tblt_Video1', true) == 'OFF' }"
I guess there must be an easy way, but I did not find it yet.
So any hint is greatly appreciated.
Hi guys,
This tutorial is really good, thanks.
I’m working on my floorplan with some item feedback, and ng-click.
I tried to find same issue here, but I couldn’t find any.
For ng-click I used a lamp image image which is around 25x25px and I cannot make it bigger because of the size of the rooms and plan. I think it gets my click only on the line of the image and not in a 25x25px rectangle. How can I set to get click in a rectangle (maybe bigger than the image) not just on the line of the image?
It is hard to click on it now.
I have a similar need, to make touch screen devices easier to toggle items. In my case I have an inline SVG that contains everything. Inside that SVG are many more SVG’s such as a Fans, Lights, Cameras etc. When I want to turn on a light, I have a relatively small SVG of a light bulb at the location of the light itself and find it sometimes difficult to toggle the light without first zooming in to make the target larger.
What I did to resolve this issue was to create another SVG, a circle or maybe just a copy of the target SVG but scaled up some (Take the same lightbulb SVG i want to click on duplicate it and make it larger). Then make sure that the larger version is above the original one (like on the z-axis, the duplicate larger SVG should be drawn on top) I then change the colors of the fill and stroke to have 0 alpha (turn the item invisible), and setup ng-click.
So I am left with an invisible copy or a circle (depending on shape of SVG might be easier) over top the original target that intercepts the click command. The end effect is my touch screen devices have a much easier time.
Great idea, it is working. Thank you
Maybe I misunderstood something but fill with none wasn’t working but fill with some color and opacity 0 was good.
That is correct, I experience the same thing, something has to be rendered for it to exist as clickable. As far as I can tell that is normal or expected behavior. I have some icons that are just strokes with no fill, they can be hard to click on to activate since only the stroke part of the SVG is clickable.
Pro Tip: Add a fill and change the opacity to 0. Then clicking anywhere inside the stroke and fill portions will work as expected, and produce no unwanted visual effects.
I’ve discovered that this is possible in Node-Red, using the SVG node.
When I get time, I’ll take a look in more detail
1 Like
Hi everybody! Sorry for digging out that old topic, but I am really excited and would like to get it to work.
I tried to do a simple SVG with two ng-binds. One for a temperature and one with a testing variable, that toggles 1 and 0 every 5 secs.
The display of the variable in the SVG seems to work. But it only updates, when I switch to another panel and back. In the beginning it show NaN for the values.
My XML in the SVG looks like follows:
I added it to the Panel as a template with following code:
<div>
<div ng-include="'/static/test.svg'"></div>
</div>
I am using it with my current production install, it is Version 3.2.0
For displaying I use Chrome 120.0.6099.71 and also tried FKB and Firefox 119.0.1
What I observed is a Warning about the Content Security Policy preventing the use of ‘eval’ in JavaScript in the Scripting Console. However this also appears, if I remove the widget.
What works is another template without SVG, but with Angular showing the toggle variable with following code:
<h4>
<strong>
{{itemState('countertest')}}
</strong>
</h4>
I have no Idea how to proceed, since debugging web stuff is not my business. So every help would be highly appreciated!
Thank you!
1 Like
Hey,
I wasn’t able to solve it that way.
I have now implemented my Floorplan using the Floorplan feature in OH 4.1
It’s working like expected.
Cheers
Christoph