HABPanel - Custom Widgets

Apps & Services HABPanel
1

Hi All,

Having had a fatal crash on my OH1.8 install and therefore taking the plunge to move to OH2, I’ve been messing around with HABpanel and hit an issue.

What I want to do is to create a widget which basically shows the status summary of some items or group of items in it and when someone clicks on the widget it takes you off to another page. There seems to be no obvious way of doing this and my programming knowledge is just not up to scratch these days and so struggling to work out how to build a custom widget to have a link to another page and display the details of an item.

Two things then
a) what code do you need to put into a custom widget to direct the user to another dashboard on-click. Would be useful to know as I do have other ideas I would like to see if I can find a way of doing…bit of self help.
b) anyone got a pre-canned answer ??

Many thanks

Rex

2

Have a look at this post: Custom widget: Dashboard Link
Might point you into the right direction. The widget presented there will switch to another HAPanel when you click it. You might have to incorporate this code in your customer widget.

3

Hi,

That link didn’t quit do what I had in mind, but I did find another on the forums which does pretty much what I need (well sort of). I have a slight issue though. If I use the following code I get the result I need:

<div ng-init='nav = {
 		"name": "ON",
 		"type": "button",
 		"action_type": "navigate",
 		"navigate_dashboard": "test"
 		}'>
</div>

<widget-button class="btn btn-lg" style="width: 100%; height: 100%; background: red; color: #0db9f0; font-size: 130%" ng-model="nav"/>

Which is a button with a link to another dashboard that works. Like so (btw, it is only red so that I can show the effect…

However, what I really want to do is to make the text (or icon or both) in the box to be conditional on a state of a group item. When I do that using ‘ng-if’ then I get a very strange result on the appearance of the button. Code and button are below…(There would end up being two conditions I am looking for (ON/OFF) and the text will reflect that, but I have just left it simple for the moment.

<div ng-if="itemValue('gHeatmiser_LivingSpace') == 'ON'">
	<div ng-init='nav = {
		"name": "ON",
		"type": "button",
		"action_type": "navigate",
		"navigate_dashboard": "test"
		}'>
	</div>
	<widget-button class="btn btn-lg" style="width: 100%; height: 100%; background: red; color: #0db9f0; font-size: 130%" ng-model="nav"/>
</div>

Any ideas ?

4

I would simply wrap the content inside an <a href="#/view/test"> element.

<a class="btn btn-lg"
   style="position: absolute, left: 0; top: 0;
          width: 100%; height: 100%; background: red;
          color: #0db9f0; font-size: 130%"
   href="#/view/test">
  Other content as you see fit...
  <br />
  e.g. {{itemState('gHeatmiser_LivingSpace')}}
</a>

Check the “don’t wrap in container” checkbox and make sure the position: absolute and left/top/widget/height styling is applied to the top-level element.