Matrix Theme for HABPanel

Tutorials & Examples HABPanel Examples
, ,
83

The path is incomplete in your file. You missed out some numbers… and you maybe mistyped the ID “thermometer-3”. Here below is a working file incl. the ACCOUNT SVG from www.materialdesignicons.com

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">

  <symbol id="thermometer-3">
    <g>
      <path d="M17,17A5,5 0 0,1 12,22A5,5 0 0,1 7,17C7,15.36 7.79,13.91 9,13V5A3,3 0 0,1 12,2A3,3 0 0,1 15,5V13C16.21,13.91 17,15.36 17,17M11,8V14.17C9.83,14.58 9,15.69 9,17A3,3 0 0,0 12,20A3,3 0 0,0 15,17C15,15.69 14.17,14.58 13,14.17V8H11Z" >
      </path>
    </g>
  </symbol>

  <symbol id="account">
    <g>
      <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" >
      </path>
    </g>
  </symbol>
</svg>
84

http://docs.openhab.org/administration/console.html

Found it, thanks

85

Sorry, I missed the file, uploaded now to github!

86

Hi Yannick,

I love HabPanel, I think it’s awesome, specially the new custom theme option.

What do you think about also adding a custom JS option. I’d like to add a custom.js reference to the header so that I can call some UI JS functions to enhance my theme. Is this something we could add?

Also, it would be great, if we could add a meta tag to specify the

<link rel="apple-touch-icon" href="/static/habpanel-touch-icon.png">

I add HabPanel as a “web app” to my iPhone, iPad, etc. and a nice looking Icon would be awesome.

Thanks,
Patrick

1 Like
87

Hi Patrick,

You can load additional JavaScript code (including AngularJS) as long as it’s on the same server, using the oc-lazy-load directive; see for example here: Ng-click in template widget - #4 by ysc
In fact you can also use this technique to load CSS dynamically as well.

Definitely, but perhaps with a fixed icon - it’s already in place for Chrome browsers using an app manifest so the icons are already there, I wasn’t aware iOS still didn’t support them.

88

Oh man. I brought the squidink icons to save time and not bother finding and renaming other icons. BUT the squidink icons are named differently than yours :frowning:

89

@coasting: Thanks for replying how to use the material svgs.

I tried your code but, in fact i still can not get the thermometer to appear.

My screen looks like this:

Bildschirmfoto 2017-07-20 um 20.45.25.png1108×346 14.4 KB

I this screen I thought i would see the thermometer next to the 21.0°C.

Do you have another hint for me?

90

Show me the code you use in your template or confirm that the *.svg is referenced correctly.

Template code should look like this:

<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#thermometer-3"></use></svg></div>

Your squidink.svg file should be in the /static/matrix-theme/ folder (STATIC is the HTML folder) …and of course the squidink.svg file should contain the ID “thermometer-3”.

Try with one icon in your squidink.svg first. Only if this is shown add the others step by step.

91

@coasting:
thanks you gave me the hint!

the squidink.svg had a syntax error:

the “/” is not correct:

<symbol id="thermometer-3">
<g>
  <path d="M17,17A5,5 0 0,1 12,22A5,5 0 0,1 7,17C7,15.36 7.79,13.91 9,13V5A3,3 0 0,1 12,2A3,3 0 0,1 15,5V13C16.21,13.91 17,15.36 17,17M11,8V14.17C9.83,14.58 9,15.69 9,17A3,3 0 0,0 12,20A3,3 0 0,0 15,17C15,15.69 14.17,14.58 13,14.17V8H11Z" />
  </path>
</g>

this is the correct version:

  <symbol id="thermometer-3">
<g>
  <path d="M17,17A5,5 0 0,1 12,22A5,5 0 0,1 7,17C7,15.36 7.79,13.91 9,13V5A3,3 0 0,1 12,2A3,3 0 0,1 15,5V13C16.21,13.91 17,15.36 17,17M11,8V14.17C9.83,14.58 9,15.69 9,17A3,3 0 0,0 12,20A3,3 0 0,0 15,17C15,15.69 14.17,14.58 13,14.17V8H11Z">
  </path>
</g>
92

I changed all names to match squidink’s original IDs recently for all the widgets. Did you download the latest version from github?

93

Here are all the squidink symbols used in the theme:

symbols = { ‘line-visuals’,
‘connection-arw-l’,
‘controal-4’,
‘double-arrow’,
‘down-arrow-2’,
‘reload’,
‘volume-close’,
‘volume-increase’,
‘volume’,
‘right-arrow-2’,
‘right-play’,
‘left-arrow-2’,
‘stop_1_’,
‘top-arrow-2’,
‘battery’,
‘box’,
‘charging-2’,
‘charging-3’,
‘charging-1’,
‘drive-3’,
‘drive’,
‘flat-tv’,
‘floppy’,
‘plug’,
‘processor’,
‘sim-card’,
‘window’,
‘globe’,
‘navigate’,
‘clock’,
‘direction-n’,
‘drop’,
‘drops’,
‘half-moon’,
‘half-light’,
‘shade’,
‘stars’,
‘sun’,
‘thermometer-3’,
‘wind’,
‘umberla’,
‘sun-nwave’,
‘tree-3’ }

The svgcombiner.py script generates the squidink.svg file automatically based on that manifest.

94

Easy, use the exec binding and then call this in your rule:

val resp =  executeCommandLine("/usr/bin/python /etc/openhab2/scripts/spotify.py next", 5000)
2 Likes
95

This is awesome! Thanks for the tip! :slight_smile:

96

Sorry, yes you are right ;). Corrected my previous post now…

BTW noted that the Material Design Icons look a bit fat. If you change the ID to

<symbol id="thermometer-3" stroke-width="0.2"  >

…they look better.

97

You could also overwrite the stroke-width in the css file! :slight_smile:

98

@pmpkk and @coasting

That sounds great - but both approaches does not work.

I changed every “stroke-width” entry in the css to stroke-width=0.2 and further i changed the id. But in result the icon looks further fat:

Bildschirmfoto 2017-07-20 um 22.08.39.png1118×185 12.4 KB

Do you have another hint for me?

99

Set it to stroke-width=0. The material icons are not line-based but area-based (path). If you add a stroke, you adding lines around the areas which makes them look fat.

100

Changing the stroke width in the CSS file is of course the smarter way… :slight_smile:

The Material Design Icons are generally a bit fatty. Your screenshot is close to the original icons.

101

ahh -ok.

do you perhabs know a method how i could set the thickness of the icons to the half? is this possible with svg?

102

That depends entirely on how the icon was designed/created. The nice thing about the squidink icons is that they are line based and you can set them to the thickness you want (also depending on size). It looks like the materialdesign icons are not line based and therefore you cannot make then thinner.