Custom Menu and Hide Dashboard Names?

Apps & Services HABPanel
1

I may be making a little progress in digesting and understanding a little bit on how to customize HaBpanel, I created a ‘Menu’ System using a template widget with the button widget to navigate dashboards. The css is based on the excellent work by Signal, but wanted to share what I’ve learned.

So now I wondering… Is there any way to hide/suppress the default Dashboard names in the top left of each dashboard?

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

<div ng-init='home = {"name": "Home", "type": "button", "action_type": "navigate", "navigate_dashboard": "Default"}' />
<div ng-init='family = {"name": "Family", "type": "button", "action_type": "navigate", "navigate_dashboard": "Family"}' />
<div ng-init='kitchen = {"name": "Kitchen", "type": "button", "action_type": "navigate", "navigate_dashboard": "Kitchen"}' />
<div ng-init='bedroom1 = {"name": "Master", "type": "button", "action_type": "navigate", "navigate_dashboard": "Bedroom1"}' />
<div ng-init='bedroom2 = {"name": "Childs", "type": "button", "action_type": "navigate", "navigate_dashboard": "Bedroom2"}' />

<div ng-init='lights = {"name": "Lights", "type": "button", "action_type": "navigate", "navigate_dashboard": "Lights"}' />
<div ng-init='doors = {"name": "Doors", "type": "button", "action_type": "navigate", "navigate_dashboard": "Doors"}' />
<div ng-init='windows = {"name": "Windows", "type": "button", "action_type": "navigate", "navigate_dashboard": "Windows"}' />
<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;">Main Menu</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="home" />
      </td>
  </tr>
  <tr>
    <td> <h4 style="line-height: .1em; color: #ffaa00; padding-top: 5px; padding-bottom: 5px;">Rooms</h2></td> 	
    <td> <h4 style="line-height: .1em; color: #ffaa00; padding-top: 5px; padding-bottom: 5px;">Components</h2></td>
   </tr>
<tr>
  <td>
    <table style="width: 100%; border-collapse: separate; border-spacing: 8px;">
      <tr><td class="buttons"><widget-button ng-model="family" /></td></tr>
      <tr><td class="buttons"><widget-button ng-model="kitchen" /></td></tr>
      <tr><td class="buttons"><widget-button ng-model="bedroom1" /></td></tr>
      <tr><td class="buttons"><widget-button ng-model="bedroom2" /></td></tr>
    </table>
  </td>
  <td>
    <table style="width: 100%; border-collapse: separate; border-spacing: 8px;">
	    <tr><td class="buttons"><widget-button ng-model="lights" /></td></tr>
      <tr><td class="buttons"><widget-button ng-model="doors" /></td></tr>
      <tr><td class="buttons"><widget-button ng-model="windows" /></td></tr>
      <tr><td class="buttons"><widget-button ng-model="cameras" /></td></tr>
    </table>          
  </td>
</tr>
</table>
2 Likes
2

Yes, that’s the so called “Kiosk mode”.
Add ?kiosk=on to the URL in your browser (before exporting to the main menu etc.).
Note this willl also disable the side drawer, so you’ll have to define buttons in each dashboard to go back.

3

Hi, is there a possibility to align the text of the buttons left or right? I’m struggling with this, can only change the alignment for “Main Menu” and “Rooms”, but not for “Family” or "Kitchen…
thx in advance