Folks,
Is there a way to dynamically change the panel configuration in HABPanel?
I have multiple panels and want to switch between them for various reasons - can this be done by URL? I could then have a button which navigated to said URL.
Cheers
C
You can have a dummy button that changes to another page. Check the settings for a button.
Or you can do like i have done and have a menu along the top, which has page names. You can then click the page name and it will change to that page.
for instance. The home button changes to this page
this is my code
<style>
.section {
width:100%;
height:100%;
}
.collapsible-menu {
padding: 0px 30px;
border-bottom: 3px solid #CDE700;
box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
text-align: center;
}
.collapsible-menu ul {
list-style-type: none;
font-size:18px;
text-align:right;
}
ul li2 {
display:inline-block;
float: none;
}
ul li3 {
display: block;
float: left;
margin-top: 10px;
color: lightgrey;
font-weight: 400;
font-size:18px;
}
a2 {
display: block;
color: white;
text-align: center;
font-size:25px;
text-decoration: none;
border-radius: 0px;
padding-right:15px;
}
.collapsible-menu label {
display: none;
visibility: hidden;
font-size: 0px;
display: block;
cursor: pointer;
}
.collapsible-date {
visibility: hidden;
font-size: 20px;
display: block;
cursor: pointer;
}
.collapsible-menu a2 {
display:block;
padding: 10px;
color: white;
}
input#menu {
display: none;
}
input:checked ~ .menu-content {
max-height: 100%;
}
a2.selected {
font-weight:1000;
color:#CDE700;
}
.menu-content {
max-height: 100;
overflow: hidden;
}
@media screen and (max-width: 750px) {
.collapsible-menu label {
visibility: visible;
font-size: 30px;
display: block;
cursor: pointer;
}
.menu-content {
max-height: 0;
overflow: hidden;
margin-right: 35px;
}
ul li2 {
display:block;
float: none;
}
ul li3 {
visibility: hidden;
display:none;
}
}
</style>
<div class="section">
<div class="collapsible-menu">
<input type="checkbox" id="menu"><label for="menu">{{ngModel.name}}</label></input>
<div class="menu-content"><li3>{{itemValue('Date') | date:'d MMM yyyy | HH:mm a'}}</li3>
<ul>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Home']" ng-click="sendCmd('HomePageItem', 'Weather?kiosk=on')" >Home</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Alarm']" ng-click="sendCmd('HomePageItem', 'Home?kiosk=on')" >Alarm</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Lights']" ng-click="sendCmd('HomePageItem', 'Lights?kiosk=on')" >Lights</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='TV']" ng-click="sendCmd('HomePageItem', 'Tv?kiosk=on')" >TV</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Google Home']" ng-click="sendCmd('HomePageItem', 'Chromecast?kiosk=on')" >Google Home</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Blinds']" ng-click="sendCmd('HomePageItem', 'Blinds?kiosk=on')" >Blinds</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Irrigation']" ng-click="sendCmd('HomePageItem', 'Irrigation?kiosk=on')" >Irrigation</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Vacuum']" ng-click="sendCmd('HomePageItem', 'Vacuum?kiosk=on')" >Vacuum</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Logs']" ng-click="sendCmd('HomePageItem', 'Logs?kiosk=on')" >Logs</a2></li2>
</ul>
</div>
</div>
</div>
if you want to implement this i can go into more detail
Or you can use a button with this config, navigate to URL or Dashboard
