Virtual lights are not working in svg floorplan

[Dhanasekar_Jaganatha (Dhanasekar Jaganathan)]

Hi All,

I am new to OH 2. I have added virtual lights in my floorplan. I am trying to ON / OFF virtual lights in SVG floorplan.

I have created cursor, ng-class and ng-click for virtual light. When I click on the virtual light, it is not glowing (not changing its state). But log is showing that vitual lights is turned ON from OFF state when click on the lights. It is not reflected in floor plan.

My OH details:

OH version: openhab 2 version 2.4.0-SNAPSHOT Build #1443.
Binding: Astro Bindings .

Items details:
I have trying different ways in item declaration

Switch Light_GF_Corridor_Ceiling    "Ceiling"      <switch> (GF_Corridor, Lights)   ["Light"]
//Switch Light_GF_Corridor_Ceiling    "Ceiling"      <light>  ["Light"]
/*Switch Light_GF_Corridor_Ceiling    "Ceiling"      <light> (gSwitch) 
Switch Light_C_Corridor_Ceiling     "Ceiling"      <light> (gSwitch) */
Switch Light_C_Corridor_Ceiling     "Ceiling"      <switch> (gC, Lights)            ["Light"]

/*Switch	SW_u_01_LIGHT_Attic	        "Attic   "	    <light>	(gSwitch)		{channel="zwave:device:512:node28:switch_binary" }*/
Switch	SW_u_01_LIGHT_Attic	        "Attic"	    <light>	(GF_Corridor, Lights) {channel="..."}
Switch Light_C_Staircase            "Staircase"    <light> (gC, Lights)            ["Light"]

Log details:

2018-11-27 19:06:10.682 [ome.event.ItemCommandEvent] - Item 'Light_C_Corridor_Ceiling' received command OFF
2018-11-27 19:06:10.684 [thome.event.ItemStateEvent] - Light_C_Corridor_Ceiling updated to OFF
2018-11-27 19:06:10.687 [vent.ItemStateChangedEvent] - Light_C_Corridor_Ceiling changed from ON to OFF
2018-11-27 19:06:10.687 [GroupItemStateChangedEvent] - Lights changed from ON to OFF through Light_C_Corridor_Ceiling
2018-11-27 19:06:10.856 [ome.event.ItemCommandEvent] - Item 'Light_C_Corridor_Ceiling' received command ON
2018-11-27 19:06:10.856 [thome.event.ItemStateEvent] - Light_C_Corridor_Ceiling updated to ON
2018-11-27 19:06:10.857 [vent.ItemStateChangedEvent] - Light_C_Corridor_Ceiling changed from OFF to ON
2018-11-27 19:06:10.857 [GroupItemStateChangedEvent] - Lights changed from OFF to ON through Light_C_Corridor_Ceiling
2018-11-27 19:06:11.060 [ome.event.ItemCommandEvent] - Item 'Light_C_Corridor_Ceiling' received command OFF
2018-11-27 19:06:11.062 [thome.event.ItemStateEvent] - Light_C_Corridor_Ceiling updated to OFF
2018-11-27 19:06:11.062 [vent.ItemStateChangedEvent] - Light_C_Corridor_Ceiling changed from ON to OFF
2018-11-27 19:06:11.062 [GroupItemStateChangedEvent] - Lights changed from ON to OFF through Light_C_Corridor_Ceiling
2018-11-27 19:06:20.347 [ome.event.ItemCommandEvent] - Item 'Light_GF_Corridor_Ceiling' received command ON
2018-11-27 19:06:20.347 [thome.event.ItemStateEvent] - Light_GF_Corridor_Ceiling updated to ON
2018-11-27 19:06:20.348 [GroupItemStateChangedEvent] - Lights changed from OFF to ON through Light_GF_Corridor_Ceiling
2018-11-27 19:06:20.348 [vent.ItemStateChangedEvent] - Light_GF_Corridor_Ceiling changed from OFF to ON
2018-11-27 19:06:20.673 [ome.event.ItemCommandEvent] - Item 'Light_GF_Corridor_Ceiling' received command OFF
2018-11-27 19:06:20.673 [thome.event.ItemStateEvent] - Light_GF_Corridor_Ceiling updated to OFF
2018-11-27 19:06:20.673 [GroupItemStateChangedEvent] - Lights changed from ON to OFF through Light_GF_Corridor_Ceiling
2018-11-27 19:06:20.673 [vent.ItemStateChangedEvent] - Light_GF_Corridor_Ceiling changed from ON to OFF
2018-11-27 19:06:20.865 [ome.event.ItemCommandEvent] - Item 'Light_GF_Corridor_Ceiling' received command ON
2018-11-27 19:06:20.867 [thome.event.ItemStateEvent] - Light_GF_Corridor_Ceiling updated to ON
2018-11-27 19:06:20.868 [vent.ItemStateChangedEvent] - Light_GF_Corridor_Ceiling changed from OFF to ON
2018-11-27 19:06:20.868 [GroupItemStateChangedEvent] - Lights changed from OFF to ON through Light_GF_Corridor_Ceiling

• Platform information:

  • Hardware: Intel core i5-7500 , RAM - 8 GB, HDD - 1 TB

  • OS: Ubnutu 16.04 LTS

  • Java Runtime Environment:

    java version “1.8.0_191”
    Java™ SE Runtime Environment (build 1.8.0_191-b12)
    Java HotSpot™ 64-Bit Server VM (build 25.191-b12, mixed mode)

Can please any one help me to glow virtual lights?. As I am new OH, I didnt get proper help and guidance from OH community.

Please share your ideas.

Thanks,
Dhanasekar

[H102 (CM6.5 H102)]

I’m not a big Habpanel user, just trying to help, here’s a tutorial that may give you some hints.

Design your SVG floorplan or dashboard for HABPanel with Inkscape

Hi all, Today a friend using Home Assistant showed me ha-floorplan - basically a way to display interactive SVGs in the web UI. Some skilled people got very creative with it - this goes far beyond floorplans since you can design your dashboard entirely with SVG! But did you know you can already achieve a similar result for your openHAB system with HABPanel? SVG can be included in templates without problems using ng-include! [habpanel-floorplan] Here’s a little quick start gu…

[gitMiguel (Miika Jukka)]

@Dhanasekar_Jaganatha

Can please any one help me to glow virtual lights?. As I am new OH, I didnt get proper help and guidance from OH community.

So you thought that opening a new thread would help? And what do you consider proper help?

FTR, This is your last topic.

Looking through your posts it seems to me that OH side of this problem is working just fine. Logs shows that your virtual items is switching its state. Isn’t the remaining part unrelated to openHAB?

Edit: Didn’t want to sound harsh. But opening new threads won’t get you any further.

[Dhanasekar_Jaganatha (Dhanasekar Jaganathan)]

Hi Miika,

I have not get reply for my old topic (Virtual Light). I dont have enough knowledge to confirm things based log file. I was expecting that .css file calling should be present in the log. I thought that OH is unable to invoke corresponding .css file. So I have started a new thread. I am new to OH, I learning functionality of OH community.

I have opened other thread for other issue, but I have not received input. Some time I am getting one time reply. Based on that, I am unable to progress further.

Actually, I am doing debugging and I am expecting help from other. I don’t know why .css file is not getting called because of that light color is not changing.

Please correct me if I am wrong.

Sorry for my mistakes…

[Vradatta (Eric Zenz-Matzl)]

Hi,

I also had problems with this, but i got it working.

Thats my solution:

The code in the svg:
style=“fill:#c83737;stroke-width:1.01305819;enable-background:new”
ng-class="{“light_on”: itemState(‘light_state_test’) == ‘ON’ ,“light_off”: itemState(‘light_state_test’) == ‘OFF’ }"

In the .css:

.light_on {
fill: #4fc497 !important;
}

.light_off {
fill: #c83737 !important;
}

I saw (in the other topic) that you have a “cursor: pointer” in the svg, do you need this? Maybe thats the problem

An other possible way what is working for me is to have two objects in the svg for one light.
When the light is on, i make the “OFF” object invisble, and when it’s off i make the “ON” object invisible

ng-class="{“gt_licht_terasse_ON”: itemState(‘gt_licht_terasse’) == ‘OFF’ }"

.gt_licht_terasse_ON {
display: none;
}

ng-class="{“gt_licht_terasse_OFF”: itemState(‘gt_licht_terasse’) == ‘ON’ }"

.gt_licht_terasse_OFF {
display: none;
}

[Dhanasekar_Jaganatha (Dhanasekar Jaganathan)]

Hi Eric,

Thanks for helping.

I have tried your idea, but it is not working. I think I am still missing something. Below I have provided my observation.

Light 1 :

<g
       id="g2933"
       transform="matrix(1.257946,0,0,1.173293,118.12818,183.91992)"
       ng-class="&quot;{'light_on': itemState('Light_Garden_Terrace') == 'ON' ,'light_off': itemState('Light_Garden_Terrace') == 'OFF' }&quot;"
       ng-click="sendCmd('Light_Garden_Terrace', (itemState('Light_Garden_Terrace') == 'ON') ? 'OFF' : 'ON')">

Light 2:

<g
       id="g2439"
       transform="matrix(0.14067844,0,0,0.13589094,504.67492,222.52506)"
       ng-class="&quot;{'light_true': itemState('Light_C_Staircase') == 'ON' ,'light_false': itemState'Light_C_Staircase') == 'OFF' }&quot;"
       ng-click="sendCmd('Light_C_Staircase', (itemState('Light_C_Staircase') == 'ON') ? 'OFF' : 'ON')">

.ccs file :

.light_on {
fill: #4fc497 !important;
}

.light_off {
fill: #c83737 !important;

.light_true {
fill: yellow !important;
}

.light_false {
fill: green !important;
}

Please provide your comments.

[Vradatta (Eric Zenz-Matzl)]

You use the wrong quotation marks at around you css object ( ’ instead of " ).
Also you have a double quotation mark at the beginning and the end

You use:
“{‘light_true’: itemState(‘Light_C_Staircase’) == ‘ON’ ,‘light_false’: itemState’Light_C_Staircase’) == ‘OFF’ }”

But try:
{“light_true”: itemState(‘Light_C_Staircase’) == ‘ON’ , “light_false”: itemState(‘Light_C_Staircase’) == ‘OFF’}

[Dhanasekar_Jaganatha (Dhanasekar Jaganathan)]

Hi Eric,

It is working. I can able to turn on and off the light in floor plan.

Light ON / OFF action is not working when I click any where on light image. Only particular point in light image, ON/OFF action is working. So I need to try with different light image or i need to add any attribute for that.

Thank you so much.