Habpanel button for mobile

Jeroen_K · July 29, 2018, 3:09pm

Hello,

I’m trying to make a panelconfiguration for a phone.

I’m using this code from this forum:

<style>
.buttons {
  border: 2px solid #76899e; 
  border-radius: 10px; 
  padding: 0px; 
  padding-top: 10px; 
  padding-bottom: 10px;
}
</style>

<div ng-init='Beneden = {"name": "Beneden", "type": "button", "action_type": "navigate", "navigate_dashboard": "Default"}' />
<div ng-init='Kamer = {"name": "Kamer", "type": "button", "action_type": "navigate", "navigate_dashboard": "Kamer"}' />
<div ng-init='keuken = {"name": "Keuken", "type": "button", "action_type": "navigate", "navigate_dashboard": "keuken"}' />
<div ng-init='Slaapkamer1 = {"name": "Ons", "type": "button", "action_type": "navigate", "navigate_dashboard": "Slaapkamer1"}' />
<div ng-init='Slaapkamer2 = {"name": "Liam", "type": "button", "action_type": "navigate", "navigate_dashboard": "Slaapkamer2"}' />

<div ng-init='Lichten = {"name": "Lichten", "type": "button", "action_type": "navigate", "navigate_dashboard": "Lichten"}' />
<div ng-init='Rolluiken = {"name": "Rolluiken", "type": "button", "action_type": "navigate", "navigate_dashboard": "Rolluiken"}' />
<div ng-init='Cameras = {"name": "Cameras", "type": "button", "action_type": "navigate", "navigate_dashboard": "Cameras"}' />

<table style="width: 100%; border-collapse: separate; border-spacing: 8px;">
  <tr><td colspan=2 style="padding: 0;"><h3 style="color: #ffaa00; line-height: .1em;">Beneden</h3></td></tr>
  <tr>
      <td colspan=2 style="border: 2px solid #76899e; border-radius: 10px; padding: 0px; padding-top: 10px; padding-bottom: 10px;">  
          <widget-button   ng-model="Beneden" />
      </td>
  </tr>
  <tr>
    <td> <h4 style="line-height: .1em; color: #ffaa00; padding-top: 5px; padding-bottom: 5px;">Kamers</h2></td> 	
    <td> <h4 style="line-height: .1em; color: #ffaa00; padding-top: 5px; padding-bottom: 5px;">Onderdelen</h2></td>
   </tr>
<tr>
  <td>
    <table style="width: 100%; border-collapse: separate; border-spacing: 8px;">
      <tr><td class="buttons"><widget-button ng-model="Kamer" /></td></tr>
      <tr><td class="buttons"><widget-button ng-model="keuken" /></td></tr>
      <tr><td class="buttons"><widget-button ng-model="Slaapkamer1" /></td></tr>
      <tr><td class="buttons"><widget-button ng-model="Slaapkamer2" /></td></tr>
    </table>
  </td>
  <td>
    <table style="width: 100%; border-collapse: separate; border-spacing: 8px;">
	    <tr><td class="buttons"><widget-button ng-model="Lichten" /></td></tr>
      <tr><td class="buttons"><widget-button ng-model="Rolluiken" /></td></tr>
      <tr><td class="buttons"><widget-button ng-model="Cameras" /></td></tr>
    </table>          
  </td>
</tr>
</table>

Mobile_panel

But now I want the same layout for buttons (for my lights).
Lichten_panel

But I can’t figure out how to implement this code for the buttons:

<p>Lamp is {{itemValue('Licht_Kamer')}}</p>

<div ng-if="itemValue('Licht_Kamer')=='ON'">
  <button class="btn btn-lg" style="background: red; color: white"
  ng-click="sendCmd('Licht_Kamer', 'OFF')">
  </button>
</div>

<div ng-if="itemValue('Licht_Kamer')=='OFF'">
  <button class="btn btn-lg" style="background: green; color: black"
  ng-click="sendCmd('Licht_Kamer', 'ON')">
  </button>
</div>

Anyone an idea?

hr3 · July 29, 2018, 3:14pm

ng-click="sendCmd('Contactor', itemValue('Contactor') == 'ON' ? 'OFF' : 'ON')">

Jeroen_K · July 29, 2018, 3:51pm

@hr3

thanks for your help.

I’ll tried your code like this :

<style>
.buttons {
  border: 2px solid #76899e; 
  border-radius: 10px; 
  padding: 0px; 
  padding-top: 10px; 
  padding-bottom: 10px;
}
</style>

<div ng-init='Beneden = {"name": "Home", "type": "button", "action_type": "navigate", "navigate_dashboard": "Mobile"}' />
<div ng-init='Kamer = {"name": "Kamer", "type": "button"}' ng-click="sendCmd('Licht_Kamer', itemValue('Licht_Kamer') == 'ON' ? 'OFF' : 'ON')" />
<div ng-init='Keuken = {"name": "Keuken", "type": "button"}' ng-click="sendCmd('Keuken', itemValue('Licht_Keuken') == 'ON' ? 'OFF' : 'ON')" />
<div ng-init='Eetkamer = {"name": "Eetkamer", "type": "button"}' ng-click="sendCmd('gLights2', itemValue('gLights2') == 'ON' ? 'OFF' : 'ON')" />
<div ng-init='Slaapkamer = {"name": "Onze Slaapkamer", "type": "button"}' ng-click="sendCmd('Licht_Boven', itemValue('gLights2') == 'ON' ? 'OFF' : 'ON')" />

<div ng-init='Lichten = {"name": "Lichten", "type": "button", "action_type": "navigate", "navigate_dashboard": "Lichten"}' />
<div ng-init='Rolluiken = {"name": "Rolluiken", "type": "button", "action_type": "navigate", "navigate_dashboard": "Rolluiken"}' />
<div ng-init='Cameras = {"name": "Cameras", "type": "button", "action_type": "navigate", "navigate_dashboard": "Cameras"}' />

<table style="width: 100%; border-collapse: separate; border-spacing: 8px;">
  <tr><td colspan=2 style="padding: 0;"><h3 style="color: #ffaa00; line-height: .1em;">Lichten</h3></td></tr>
  <tr>
      <td colspan=2 style="border: 2px solid #76899e; border-radius: 10px; padding: 0px; padding-top: 10px; padding-bottom: 10px;">  
          <widget-button   ng-model="Beneden" />
      </td>
  </tr>
  <tr>
    <td> <h4 style="line-height: .1em; color: #ffaa00; padding-top: 5px; padding-bottom: 5px;">Vertrekken</h2></td> 	   </tr>
		<tr>
  <td>
    <table style="width: 100%; border-collapse: separate; border-spacing: 8px;">
      <tr><td class="buttons"><widget-button ng-model="Kamer" /></td></tr>
      <tr><td class="buttons"><widget-button ng-model="Keuken" /></td></tr>
      <tr><td class="buttons"><widget_button ng-model="Eetkamer" /></td></tr>
      <tr><td class="buttons"><widget-button ng-model="Slaapkamer" /></td></tr>
     </table>
  </td>
  <td>
    <table style="width: 100%; border-collapse: separate; border-spacing: 8px;">
	    <tr><td class="buttons"><widget-button ng-model="Lichten" /></td></tr>
      <tr><td class="buttons"><widget-button ng-model="Rolluiken" /></td></tr>
      <tr><td class="buttons"><widget-button ng-model="Cameras" /></td></tr>
    </table>          
  </td>
</tr>
</table>

But when I click on “Kamer” the lights in the livingroom is set to “ON” so this i right.
But when I click on another button the lights in the livingroom are set to on either.
so every button is linked to “Kamer” .
I’ve set different items for each button.

hr3 · July 30, 2018, 8:19am

ng-click="sendCmd('Licht_Keuken', itemValue('Licht_Keuken') == 'ON' ? 'OFF' : 'ON')"

Jeroen_K · July 30, 2018, 5:45pm

I did this but now it doesn’t matter which button I click it always turns on my livingroomlicht

hr3 · July 30, 2018, 5:53pm

What item is for livingroomlight?
Have you also corrected

ng-click="sendCmd(‘Licht_Boven’, itemValue(‘gLights2’)

Post you item-file and the actual widget please.

Jeroen_K · July 30, 2018, 6:02pm

my livingroom item is:

Switch Licht_Kamer "Licht Kamer" <light> (gLights) {channel="rfxcom:lighting2:usb0:14160886_1:command"}

and this is my widget:

<style>
.buttons {
  border: 2px solid #76899e; 
  border-radius: 10px; 
  padding: 0px; 
  padding-top: 10px; 
  padding-bottom: 10px;
}
</style>

<div ng-init='Beneden = {"name": "Home", "type": "button", "action_type": "navigate", "navigate_dashboard": "Mobile"}' />
<div ng-init='Kamer = {"name": "Kamer", "type": "button"}' ng-click="sendCmd('Licht_Kamer', itemValue('Licht_Kamer') == 'ON' ? 'OFF' : 'ON')" />
<div ng-init='Keuken = {"name": "Keuken", "type": "button"}' ng-click="sendCmd('Keuken', itemValue('Licht_Keuken') == 'ON' ? 'OFF' : 'ON')" />
<div ng-init='Eetkamer = {"name": "Eetkamer", "type": "button"}' ng-click="sendCmd('gLights2', itemValue('gLights2') == 'ON' ? 'OFF' : 'ON')" />
<div ng-init='Slaapkamer = {"name": "Onze Slaapkamer", "type": "button"}' ng-click="sendCmd('Licht_Boven', itemValue('gLights2') == 'ON' ? 'OFF' : 'ON')" />

<div ng-init='Lichten = {"name": "Lichten", "type": "button", "action_type": "navigate", "navigate_dashboard": "Lichten"}' />
<div ng-init='Rolluiken = {"name": "Rolluiken", "type": "button", "action_type": "navigate", "navigate_dashboard": "Rolluiken"}' />
<div ng-init='Cameras = {"name": "Cameras", "type": "button", "action_type": "navigate", "navigate_dashboard": "Cameras"}' />

<table style="width: 100%; border-collapse: separate; border-spacing: 8px;">
  <tr><td colspan=2 style="padding: 0;"><h3 style="color: #ffaa00; line-height: .1em;">Lichten</h3></td></tr>
  <tr>
      <td colspan=2 style="border: 2px solid #76899e; border-radius: 10px; padding: 0px; padding-top: 10px; padding-bottom: 10px;">  
          <widget-button   ng-model="Beneden" />
      </td>
  </tr>
  <tr>
    <td> <h4 style="line-height: .1em; color: #ffaa00; padding-top: 5px; padding-bottom: 5px;">Vertrekken</h4></td>
  	<td><h4 style="line-height: .1em; color: #ffaa00; padding-top: 5px; padding-bottom: 5px;">Onderdelen</h4></td>
		</tr>
  <td>
    <table style="width: 100%; border-collapse: separate; border-spacing: 8px;">
      <tr><td class="buttons"><widget-button ng-model="Kamer" /></td></tr>
      <tr><td class="buttons"><widget-button ng-model="Keuken" /></td></tr>
      <tr><td class="buttons"><widget_button ng-model="Eetkamer" /></td></tr>
      <tr><td class="buttons"><widget-button ng-model="Slaapkamer" /></td></tr>
    </table>
  </td>
  <td>
     <table style="width: 100%; border-collapse: separate; border-spacing: 8px;">   
      <tr><td class="buttons"><widget-button ng-model="Lichten" /></td></tr>
      <tr><td class="buttons"><widget-button ng-model="Rolluiken" /></td></tr>
      <tr><td class="buttons"><widget-button ng-model="Cameras" /></td></tr>
    </table>          
  </td>
</tr>
</table>

Jeroen_K · August 17, 2018, 10:12am

@hr3 could you look at my code, please?