Design your SVG floorplan or dashboard for HABPanel with Inkscape

[Kim_Andersen]

@MDAR

Do you mean that is simply revealed when an Item value matches a criteria,
or the Image is adjusted according to the Item value?

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)]

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…

But a real slider ???

[Kim_Andersen]

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:

[MDAR (Stuart Hanlon, UK importer of Velbus hardware)]

So what you want is a non-interactive Gauge, rather than Knob or Slider ??

A quick search found these…

Create Animated Gauges With JavaScript - SVG Gauge | CSS Script

How to Make Charts with SVG | CSS-Tricks

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.

There’s a handy list of properties by the W3C that shows which property effects which SVG element

[Kim_Andersen]

@MDAR

So what you want is a non-interactive Gauge, rather than Knob or Slider ??

Yeah, gauge ofcouse … (I was so focused on the knob look alike, that is was the only work I did search for… stupid me)…

And as I thought, this involves some script… Now I need to figure how to javascripts as well… Damn… I´ll never learn this weird html/css/svg stuff).

[HarryS1 (Harald Schlangmann)]

Which icon set have you used for temperatures, date, time, battery level, open windows?

[Dome]

Hi @Birgit_Lachner

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!

Items

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?

[Dome]

@SilkBC sorry - I missed your comment notification. I moved and my panel looks very different at the new house, but I will try to find the old SVG.

[Kim_Andersen]

@Dome

You then set the buttons to indicate the active panel with ng-class, and use ng-click for the action of changing pages.

That how I´m doing it for showing/hiding layers… Works like a charm!

[Midwave (Maarten Vankerkom)]

Hi All,
I was inspired by the SVG integration in OpenHab Widgets and wanted to start with a simple “winamp” like title scrolling label to able to show longer texts in a small window (smartphones).
I hope the idea is inspiring for others.
The ‘static text’ is working ok (although some more customization dreams to make it useful for larger audience (fi: colour picker etc).

Unfortunately i’m a bit stuck to make the config parameters dynamic. The idea is to adjust the duration & shift parameters based on the (dynamic) text. I’m targeting to build this in the OpenHab rules, so would like to avoid/limit usage of JavaScript (not supported?) or angularjs (not familiar with).
(general design concept is to put all my logic in the OpenHab rules)

Can you help me with the syntax or help to be able to change the duration like we can change the text?

(attached the widgets so far … and the challenge below)
dur=“itemState(’{{config.txtOpenHabSVGDuration}}’) + " s”" ==> NOT WORKING
ng-bind=“itemState(’{{config.txtOpenHabSVGString}}’)” ==> OK

Note: ideally I would like to keep all the code in the widget itself, but i’m ok to load CSS or supporting files if required.

Thanks a lot

[HarryS1 (Harald Schlangmann)]

I try to open a browser window when clicking a SVG shape embedded into a HABPanel widget. I tried setting the standard SVG onclick attribute to “window.open(“myhtmlpage”);” and it is working fine when opening the SVG file in a browser. Once this SVG is embedded in the HABPanel widget, it does not work (no error in the logs neither). I tried ng-click too, using the same script, but do not get the HTML page displayed either.

What is it I do wrong? Thanks!

Latest openHAB 2.5.2 and Safari browser

[Midwave (Maarten Vankerkom)]

Hi All,

Meanwhile I was able to solve my little challenge with the great support from MDAR.
Happy to share the current results. Now able to update scrolling speed/length the text and colour through openhab items and dynamically adjustable through openhab rules.

It’s still not very user friendly but meeting my needs. Feel free to improve the basic code and share an advanced version.

Please find the current draft release:
AnimatedStaticLabel.widget.json (1.6 KB)

AnimatedDynamicLabel.widget.json (1.6 KB)

or Wetransfer (till 06Mar19)

AnimatedLabelsWidgets.7z

[MDAR (Stuart Hanlon, UK importer of Velbus hardware)]

Hello

By any chance…

Have any of you any ideas how I / we can get an itemValue to affect an sodipodi:end attribute of an arc?

@Kim_Andersen and I are trying just trying to create a nice little gauge in an SVG.

There is this fabulous gauge widget for HabPanel that works perfectly, which I guess uses something similar to the rotation technique described earlier in this thread.

Which might have to be what we settle for.

[jace]

EDIT: I made some adjustments and moved to the modal, as defined in this link, and it works as expected.

HABPanel Development & Advanced Features: Start Here!

This Wiki post aims to be a centralized resource to help new users (and experienced users alike!) with the advanced features in HABPanel. It will contain relevant examples and links to help you with common issues and getting the most out of these features! Users with the “Member” badge (and levels above) can edit this post, don’t hesitate to do so if you deem it appropriate Templates & Custom Widgets What are templates? If the standard widgets don’t fit your needs or your taste, HAB…

I swear I had this working, but… if I want to use an angular variable (as opposed to using an OpenHab switch) to activate a modal defined in the custom template, ex: <div ng-click="Item_Modal=true">clicky</div>, how would I format the ng-click on an item in the svg? Just having Item_Modal=true in the svg value doesn’t seen to do it.

Thanks!

[Dome]

I know openHAB 3 will bring many changes to the UIs, specifically, that some or all of them will be merged into a new universal UI.

Does anyone in the know have any insight into how that will affect our ability to display SVGs in a HABPanel style as we have in the past? I’m really hoping that kiosk mode will remain available.

[Daniele_Z]

hello, always work with lights and UP&DOWN rollershutters
I would like to intert a kind of slider for rullershutters position (read-only)
Is there an object or I’m thinking about a “line” and trasform: scaleX or scaleY on % of the roller position (itemState) : can anybody help me?

PS: I have tryed scaleX on chrome but the line moves in a strange and non-standard way

[Daniele_Z]

hello, I would like to share my solution: this is my living room and my kitchen whit lamps and rollershutters.
The up and down button are green if the position is 0%(opened) and red if is 100% (closed) and normally black from 1% to 99%.

[llegovich (Luciano)]

What app did you use to draw the floorplan? Looks very nice!

[Daniele_Z]

Sweethome 3d
Very easy

[MDAR (Stuart Hanlon, UK importer of Velbus hardware)]

@Daniele_Z

Sweethome 3d

Apparently, it’s possible to add interactive elements with SweetHome3D that work with openHAB2.

(Proof-of-concept) Interactive WebGL view with HABPanel & Sweet Home 3D!

Hi, I came across Sweet Home 3D recently, a free interior design application in Java, which happens to have a great HTML5 export plug-in, and wondered if those WebGL views could be embedded into HABPanel dashboards… turns out they can, and it wasn’t even very difficult to do It’s not like it’s practical for everyday use or anything - but thought it was fun to write and cool to see, so here you go I wrote a directive to load in your templates and an example, follow the in…