They do turn on and off the light. I’ve tried move them around, putting them in their own layer. Its aways the same. The left 2/3 rds+ is clipped. When I look at the elements in dev tools in the the browser, there is a bounding box around the whole symbol. Here is the code in the svg file for the “torch”
What icon set did you use for the furniture? I like the style. Can the icons be scaled automatically to the dimensions of the room (i.e., when you have defined the room dimenions, can you then edit the furniture icon’s properties and define it’s dimensions, which would then size/scale to the room it is in?)
I like your solution to the “dimmer” issue. Are you able to post the code for it?
I’ve been struggling to get SVGs to resize. Its seems that it will not adjust for height, unless the SVG is smaller than its container. The SVG has to have a viewBox. Saving in Inkscape as an optimized SVG does the trick. I tried added style=“height:xxxx”, or height:100%, and/or width:100%. I also tried setting preserveAspectRatio=“xMinYMin meet”. However, the DOM is still coming up with the wrong height.
The layout looks like this:
<div class="box"/>
<generic-widget />
<widget-template />
<div class="box-content template-container ng-scope"/> <--- closest parent with right size
<div class="template-contents" /> <--- set to same height as SVG. Larger than box-content.
<div oc-lazy-load=... />
<div ng-include="/static/my.svg" />
<svg ... /> <--- want to set style="height:{{height of box-content}}"
I can’t figure the AngularJS magic needed to set this right. As you can see from the layout, the first element with the correct size is several layers up. I think JSQuery closest() would work, but looks like AngularJS does not use that.
The SVG should be sized to fit in the square box, but its height is not being recalculated.
In my previous post, I said symbols were not displaying correctly. That is still the case. However it does work if you clone the symbol. That takes up more space in the file, but at least it displays. I saw something about symbols needing a viewBox too, but have not figured out how to set that.
re 1) It is actually not an icon set but an SVG drawing that I did in inkscape myself and as it is a vector format, you can scale it to any size.
re 2) As far as the dimmer solution is concerned I have to admit that only works for one specific lamp. I always intended to allow the dimmer dialog to open on a double click on any light bulb icon and forward that item to the dimmer javascript function but I never got that to work (I struggled with the double taps for a while and also the old angularjs really drove me nuts ).
Having said that I am happy to share the SVG to you if you like to use it yourself or understand how I implemented it. Just send me a private message.
Thank You @MDAR for the tutorial and howto’s! Did help to kick start my way into svg, ng tags and angular.
My first attempt with the floorplan … was afraid doing it on something real, so started with a doll house :slight_smile;)
Or a interactive on youtube here
svg floorplan and openhab;
then rules doing json api posts to WLED library;
and a WS2812 led strip split in four segments (actually five, as there is a single pixel ‘ambilight’ behind attic, showing CO2 level in room).
Oh, I stand corrected. Thank You @ysc for the tutorial and howto’s! Did help to kick start my way into svg, ng tags and angular.
And @MDAR for some inspiring questions and answers, that helped to get back on track, when felt like beeing lost in the g-search
Not sure how to explain, but exactly like using knobs in Habpanel, if you have ever tried that.
MDAR
(Stuart Hanlon, UK importer of Velbus hardware)
230
You’re in hunt of the holy grail then…
A Slider or Knob within an SVG
I have a row / column of elements in an SVG that set the same Item to different values, and their state / colour changes to reflect the value of an Item…
Actually I just want it to remove regarding of the value… As usual, I dont have a need of clicking/pushing anything on my floorplan… But it would be a nice feature to read a meter or something simular using a knob or like…
I´m 99% possitive its possible… It´s just a question of how… Probably by the use of a javascript, I guess.
Like the meters in this video:
1 Like
MDAR
(Stuart Hanlon, UK importer of Velbus hardware)
232
So what you want is a non-interactive Gauge, rather than Knob or Slider ??
A quick search found these…
I thought this last one was really interesting, if a little off topic when looking for a Gauge.
The sentences towards the end are most interesting;
Well, one of the peculiarities of styling SVG with CSS is that there are only certain properties we can control. If we want to change the x or y coordinates of a g for instance (without using the CSS transform property) then we’ll need to use JavaScript. What makes this even stranger if you’re unfamiliar with the SVG syntax is that CSS properties will have an affect on certain elements, but not others.
I’m just getting caught up on this thread and somehow missed your comment.
You would define it in an items file. I don’t want to take the thread off topic so I’ll just recommend you look at the documentation page, and open a new thread if you still need some assistance!
EDIT: I may have misunderstood your question. You can either make the item a string or a number, and decide a name (or number) value for each page on your dashboard. You then set the buttons to indicate the active panel with ng-class, and use ng-click for the action of changing pages. Does that make sense?
).
… (I was so focused on the knob look alike, that is was the only work I did search for… stupid me)…