Use a Sensor to Colour Switch in HabPanel

Apps & Services HABPanel
, ,
1

Morning!

I’m been playing with HabPanel and got a few cool pages. One of the things I’ve put on my homepage is a button to open the garage. I’ve got a WeMo maker which has items for a relay which toggles movement and a sensor which reports if they are open or not via a reed switch.

At the moment I’ve got these set up as two separate ‘squares’ in HabPanel, but I’d really like to have one square which if you tap it triggers the door moving and is red/green depending on if the sensor is triggered or not. I’m sure this ought to be simple but I can’t work it out! Can anyone help?

items are set up as:

    	Switch GarageBikesSwitch  "Garage Bikes [%s]"(gGarage)						{ channel="wemo:Maker:Maker-1_0-221529S0000246:relay", autoupdate="false"} 
    	Switch GarageBikesSensor "Garage Bikes [%s]" 								{ channel="wemo:Maker:Maker-1_0-221529S0000246:sensor"} 
    	Switch GarageCarSwitch  "Garage Car [%s]" (gGarage) 		 				{ channel="wemo:Maker:Maker-1_0-221529S000018B:relay", autoupdate="false"}
    	Switch GarageCarSensor "Garage Car [%s]" 									{ channel="wemo:Maker:Maker-1_0-221529S000018B:sensor"}

And the sitemap as follows. As you can see one or the other is hidden by the sensor through the visibility but this isn’t possible with HabPanel

		Switch item=GarageCarSwitch label="Garage Car" mappings=[ON=Open] icon="carclosed" visibility=[GarageCarSensor=="ON"]
		Switch item=GarageCarSwitch label="Garage Car" mappings=[ON=Close] icon="caropen" visibility=[GarageCarSensor!="ON"]
		Switch item=GarageBikesSwitch label="Garage Bike" mappings=[ON=Open] icon="bikeclosed" visibility=[GarageBikesSensor=="ON"]
		Switch item=GarageBikesSwitch label="Garage Bike" mappings=[ON=Close] icon="bikeopen" visibility=[GarageBikesSensor!="ON"]

Screenshot of my homepage with the current garage setup (NB the sensor widgets in the lower two do usually work, sorry!)

04
Screenshot 2017-12-28 12.00.04.png1902×1051 73.7 KB

2

So basically you want 2 items on the same button?
For example, hit switch to toggle ON and if sensor senses open, it will turn green? If so, I don’t think we have a built in widget for that.

You can, however, create a custom button for what you’re trying to do. For example:

<button ng-click="sendCmd('yourSwitchItem', 'ON')" ng-style="{ background-color: ( itemValue('yourSensorItem')=='ON' ? 'red' : 'blue' }">turn on</button>

Above:
When you click the button, it will change color based on the state of yourSensorItem. You can even change this to a toggle button also. Change the sendCmd ON to a conditional value:

sendCmd('yourSwitchItem', itemValue('yourSensorItem') == 'ON' ? 'OFF' : 'ON')
1 Like
3

Thank you! Gave me a start to trying my own, I’ve combined your suggestion with the HabPanel widget help file here and came up with the below if anyone wants to copy. Thanks for the headstart!

<div ng-if="itemValue(config.wemosensor)=='OFF'">
  <button class="btn btn-med" style="background: red; color: white"
  ng-click="sendCmd(config.wemoswitch, 'ON')">
  {{config.name}}
  </button>
</div>

<div ng-if="itemValue(config.wemosensor)=='ON'">
  <button class="btn btn-med" style="background: green; color: black"
  ng-click="sendCmd(config.wemoswitch, 'ON')">
  {{config.name}}
  </button>
</div>```
4

Yeah I hope my previous reply made sense. It was tough formatting on a phone :wink: