Custom Icon in HabPanel / Get URL String...Please!

Apps & Services HABPanel
1

Hi,

I’m trying to get a custom icon into my Habpanel template widget.

I’ve trawled the forums and found a few different suggestions as to what worked for others. I’ve tried them all…I’ve added them all as a svg to my html/icons and icons/classic folders, tried dynamic links, static ones, referenced the icon directly…all to no avail.

Here’s a snippet of my code

<tr ng-repeat="item in itemsInGroup('gHPRoomMenu')"> <td class="icons"><widget-icon iconset="'custom-icon'" icon="'{{item.name}}'"></widget-icon></td> <td class="buttons3"><a href="#/view/{{item.name}}">{{item.label}}</a></td> </tr>

So it’s a table row with 2 columns, that will repeat through all items in group gHPRoomMenu and list them in in the rows. The first column has the icon and the second just the item name as a link.

The ng-repeat works great, everything creates as it should but I get broken image link icons. I’ve debugged the image and get:

image

Which suggests that it can’t get the item.name…can someone please sense check this for me, maybe I’m just missing a quote mark or something but I’ve been on this for so long now I’ve gone code blind and don’t think I could see the answer if it was in bold and red!!!

Thanks in advance.

2

To be honest, I’m not at all sure about my answer, but have you tried to remove the ‘ around {{item.name}}? Does that change anything?

3

Hi,

Thanks for the reply, yes, tried removing the ‘ and the “ and then both at the same time, nothing seems to work.

I’ll have another stab at it sometime today when I’m my brain is fresh. I’m sure it can’t be this hard to get some custom icons working!

4

Hi,

Fixed it, I’ll post the correct syntax when I’m at my pc next.

Next question is can we find out the url we are on for each dashboard. I know in JavaScript and css you can do

var query = window.location.search.substring(1)

And then manipulate it to get the url string but is this possible in openhab / habpanel?

5

Hi all,

First, the correct way to request images in HabPanel:

img id=“{{item.name}}” src=“/icons/classic/{{item.name}}.svg”

Second, I’m trying to get the URL of the habpanel page I’m on, I can cast my mind back to the old days of coding JavaScript and I’ve tried to bring it up to habpanel based script, I’ve searched the forums and cobbled something together, and I’ve got:

var url_string = window.location.href; //window.location.href

or to get the last part of the URL string, (the bit I actually want)

var url_string = window.location.search.substring(1)

Now, it’s not working, (obviously otherwise I wouldn’t be posting this request), so I’m asking for help to knock it into shape to make it work please…

Anyone any ideas?

6

To get the part after “#” in the URL use:

var url_string = window.location.href.substring(window.location.href.lastIndexOf("#")+1)
7

Awesome, that’s great thanks…now, can anyone tell me the best way to get thins into a template widget style code? Does it need an ng-init style coding to make it comparable or has anyone seem any similar code examples for me to learn off?

Basiclaly I want to get the last part of the URL, ie the current dashboard name and then compare it to a dummy item value I have in OH?