Feature request: Glyphicons

Hi @ysc,

I’m loving the work you have done on HABpanel. It is firmly my UI of choice for openHAB 2 :smiley:

Not sure about the etiquette to request new features / enhancements. So I’ll post here to gauge views:

Would it be possible to add the Glyphicons that have been included with the Bootstrap framework within the HABpanel GUI?

I spotted that you used these within one of the template examples, so went searching to see what was available (glyphicons). Personally the range of UI and multimedia icons would immediately satisfy a need that is not covered by the existing icon sets.

Appreciate that I could replace the standard buttons with template controls using these, but I was hoping this may be a simple code enhancement which would make multi-media panels easier to create (I’m using mine among other things to manage my Tivo).

Let me know if this is possible and / or if I should raise a feature request on Github.

You can easily add another iconset
e.g. knx-user-forum iconset

  1. add folder \html\habpanel\assets\icons\knx-user-forum with your new icons

  2. add file knx-user-forum.list.json and list new icons:

    {“notice”:“Created by knx-user-forum”,
    “url”:“https://github.com/OpenAutomationProject/knx-uf-iconset/”,
    “icons”:[
    “audio_audio”,
    “audio_eject”,
    and so on
    ]}

  3. change file icon.service.js under html\habpanel\app\services and add the knx-user forum line:

      var iconsets = [
                 { id: 'freepik-household', name: 'Builtin: Freepik Household', type: 'builtin', colorize: true },
                 { id: 'freepik-gadgets', name: 'Builtin: Freepik Gadgets', type: 'builtin', colorize: true },
                 { id: 'freepik-housethings', name: 'Builtin: Freepik House Things', type: 'builtin', colorize: true },
                 { id: 'smarthome-set', name: 'Builtin: Smart Home Set', type: 'builtin', colorize: true },
                 { id: 'knx-user-forum', name: 'Builtin: knx-user-forum', type: 'builtin', colorize: true },
                 { id: 'eclipse-smarthome-classic', name: 'Eclipse SmartHome Classic', type: 'oh2', oh2iconset: 'classic', colorize: false }
             ];
    

Finished now you have another iconset in your dropdown list.
For the mentioned knx-user-forum iconset I hab to do a mass change of the svg from white to black color. (hex code find/replace)

3 Likes

You could do what @Tab_Daham does - I’m trying to limit “built-in” icon sets now to keep the HABPanel’s size down.
There is support for icons in OH2 using bundles, I’d try that as an alternative (you still would have to have a .list.json file and add it to icon.service.js for now).

This knx-uf-iconset is nice by the way :slight_smile:

@ysc I am running latest offline snapshot of OH2, I am not able to locate this folder html\habpanel\app\services nor this file icon.service.js

@Basem_AlSaeed those files are not accessible directly, they are in the bundle.
Clone the repository in your conf/html folder if you want to tamper with them.

@ysc thanks a lot, now it is working perfectly

Cool…but how can I add the iconset dropdown selection on custom widget ? … i.e. like the official widget

I just like to give some hints for those, trying to add custom icons as well:

  1. Create directory html/habpanel in your OH2 config folder
  2. Clone all from the habpanel web folder from github into html/habpanel (you’ll have app, assets, fonts etc. then in the html/habpanel directory)
  3. Copy icons (SVG versions!) and edit json & js files according to @Tab_Daham’s post above.
  4. You won’t see the new icons until you use the static-URL: http://your-openhab-server:8080/static/habpanel/index.html

For the KNX userforum iconset you have to change the color from white to black. On Linux, this is easily done:

  1. go into the folder with the icons
  2. change the color by replacing FFFFFF with 000000:
    sed -i 's/FFFFFF/000000/g' *.svg
  3. to avoid manually adding hundreds of filenames in the .js-file named above, you can create the necessary list as well:
    find . -type f | sort | sed 's/.\//"/g' | sed 's/.svg/",/g'
    This lists all files in the directory, sorts them and replaces the first an last characters to deliver a perfect list. Just remove the latest comma and copy it into the .js-file. Done! :wink:
4 Likes

Hi @oliver_kuhl, thanks a lot for the instructions!

That’s kuhl! :wink:
Thanks a lot for the detailed instructions!
I will give it a try!

I am struggling getting web with wget…
How to get the entire web folder the easiest way?
Thanks.

EDIT:
got it with svn:
sudo svn checkout https://github.com/openhab/org.openhab.ui.habpanel/trunk/web
(substituted url “tree/master” with “trunk”)

I just added the KNX icon set, but all those icons appear smaller than other HabPanel icons, so the mix isn’t as cool as expected…

Do you think we can ajust the size in bash like you do for the color ?

Thanks @oliver_kuhl and @ysc

I got it to work!
That wasn’t that difficult with the very good tutorial!

However I have problems to show the icons on custom widgets (just displaying e.g. light state):

<div class="row">
<div class="col-xs-12"><span><widget-icon iconset="'knx-user-forum'" icon="'light_cabinet'" /></span></div>
</div>

<div class="row">
<div class="col-xs-12"><span style="color: cyan; font-size: 10pt; text-align:center">{{itemValue('Light_Cabinet')}}</span></div>
</div>

I can select the icons for switches an such though.
Any idea what might be wrong?

No one with this issue?

Got it.
Was a typo…
Grrrr…

How about the size?
@MacFly:
Did you find a solution to increase the size?

Nop :frowning:
If you find something please let me know !

Guys, is that additions of the icons will survive an upgrade to OH2 and HABPanel?
Or that will be overwritten has to be done every time i apt-get upgrade?

So far for the custom icon I was using that construct in a template:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<button class="test" 
              style= "border: none; background: rgba(0,0,0,0); outline:none; " 					
              ng-click="sendCmd('gLights', 'OFF')">       
      <i class="fa fa-power-off" style="font-size:100px;color:#8899AA" ></i>        
      </button>

But that has one major disadvantage that you cant show the state of the switch like in the:

<widget-icon iconset="'smarthome-set'" icon="'power-button'" size="100" state="itemValue('gLights_B')" />

I realy would love to see the ability to use custom icons that can be backlight as the stock icons.

Is there any way to create also a bmp version iconset? (or change the classic one from OH2)

Regards
Lorenzo