Custom Theme in HabPanel 2.1 Example

skin
theme
stylesheet
Tags: #<Tag:0x00007f6cf414cd10> #<Tag:0x00007f6cf414cba8> #<Tag:0x00007f6cf414ca40>

(Christian Alexandersen) #304

Hi pmpkk

I try to use your HabPanel - great work.

But i have som problem for example with your Spotify webconnect api

I gone through your description and to the point where i run Spotify.py

Then i get this.


Successfully got state from OpenHab: spotify_client_id
Successfully got state from OpenHab: spotify_client_secret
Successfully got state from OpenHab: spotify_access_token
Successfully got state from OpenHab: spotify_refresh_token
Successfully got state from OpenHab: spotify_token_issued
Successfully got state from OpenHab: spotify_token_expiry
-- Calling Service: Update
 -> Failure:  <type 'exceptions.ValueError'>
Error posting state to OpenHab: spotify_lastConnectionDateTime (HTTP Response State could not be parsed: 2017-12-26T08:10:05+0000)
Done in 0.503720998764 seconds

This is what the OpenHab log says

2017-12-26 09:16:52.995 [ome.event.ItemCommandEvent] - Item 'spotify_forceupadte' received command ON

2017-12-26 09:16:53.024 [vent.ItemStateChangedEvent] - spotify_forceupadte changed from NULL to ON

2017-12-26 09:16:53.768 [ome.event.ItemCommandEvent] - Item 'spotify_forceupadte' received command ON

2017-12-26 09:16:54.320 [WARN ] [rest.core.internal.item.ItemResource] - Received HTTP PUT request at 'items/spotify_lastConnectionDateTime/state' with an invalid status value '2017-12-26T08:16:54+0000'.

2017-12-26 09:16:54.464 [INFO ] [lipse.smarthome.model.script.Spotify] - Successfully got state from OpenHab: spotify_client_id

Successfully got state from OpenHab: spotify_client_secret

Successfully got state from OpenHab: spotify_access_token

Successfully got state from OpenHab: spotify_refresh_token

Successfully got state from OpenHab: spotify_token_issued

Successfully got state from OpenHab: spotify_token_expiry

Error posting state to OpenHab: spotify_lastConnectionDateTime (HTTP Response State could not be parsed: 2017-12-26T08:16:54+0000)

2017-12-26 09:16:55.202 [WARN ] [rest.core.internal.item.ItemResource] - Received HTTP PUT request at 'items/spotify_lastConnectionDateTime/state' with an invalid status value '2017-12-26T08:16:55+0000'.

Can you maybe give a hint?

Regards
Christian


(Marco Schnubel) #305

First of all, this is a great custom theme and everything works fine for me.

And here comes the big “but”.
I am really to stupid to get the icons to work. Tried both ways, manually and with the script, but no one works for me.
Is there a way (i know there is one, but i don’t know how) to use “normal” stored single svgs in matrix-theme?


(Benjamin) #306

Check out my post regarding this error:


(Marco Schnubel) #307

No solution for me?


(Bastian) #308

Hi all,

this “hack” doesn’t work for me.
Maybe Grafana changed something in their code?

Is it possible to change the grafana css file directly?

Thank you!


(John Doe) #309

Hi,

just starting with the theme and was wondering how to best edit the json files. I’m using visual studio code editor with the openHAB plug in / extension, but for the json files it only shows glibberish, unformatted code :frowning:

Thanks,
Klayman


(Marco Schnubel) #310

Hi,
i am playing with this great theme, and so, i changed the music widget for my own needs. I am using two sonos player in my house. My problem is, that they are using a dimmer item controlling volume. Can someone help me what i have to change here:

<div class="widget">
		<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#volume"></use></svg></div>
		<div class="name">Volume<div class="value">{{itemValue('dim_sonos_bad_volume')}}</div></div>
		<div class="controlGroup">
    <div class="control" ng-click="sendCmd('spotify_action', 'volume_up')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#top-arrow-2"></use></svg></div>
			<div class="control" ng-click="sendCmd('spotify_action', 'volume_down')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#down-arrow-2"></use></svg></div>
		</div>
	</div>

Volume up/down are useless commands for a dimmer. Can someone please explain me how to integrate a slider for my needs?

EDIT:

One more thing: Is it possible to hide header (Description and burger item)??


(Marco Schnubel) #311

Volume Slider problem solved for me. For sure its not the most beautiful code, but it works :wink:

<div class="controlGroup">
				<div ng-init="slider_kitchen = {
            'item': 'dim_sonos_kitchen_volume',
            'vertical': false,
            'floor': 0,
            'ceil': 100,
            'step': 2,
            'precision': 1,
            'unit': '%',
            'hidelabel': true,
            'hidelimits': false,
            'hidepointer': false,
            'showticks': false,
            'bigslider': false
            }">
         <widget-slider ng-model="slider_kitchen"/>

but the “hiding header problem” still exists. Any solution?


(Christian) #312

Nice, could you please share the code for your sonos template? Thanks


(John Doe) #313

Sorry guys, I have to bug you again. How do you edit the widget.json files? If I try to open it in a code editor, its just 2 or 3 veeeery long lines and totally unformatted… Thanks!!


(Tom) #314
  • On the HABpanel sidebar at the bottom, next to the date, click on the settings icon.

  • In the right hand box, click on Custom Widgets Manage >

  • On the page of widgets listed, click on the one you want to edit.

  • Clock on the code tab to see the json code.


(Marco Schnubel) #315

Sure, but all credits @pmpkk i only changed his multimedia widget. Hope its ok for you?

<div class="section">

<div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/icons/music.svg#music"></use></svg></div></div>
<div class="title">Bad</div>
<div class="controls">

	<div class="widget">
		<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/icons/note.svg#note"></use></svg></div>
		<div class="name">Track</div>
		<div class="appLogo"><svg viewBox="0 0 1000 400"><use xlink:href="/static/matrix-theme/squidink.svg#sonos"></use></svg></div>       
		<div class="valueGroup">
			<div class="value">{{itemValue('str_sonos_bad_currenttrack')}}</div>
			<div class="value">{{itemValue('str_sonos_bad_currentartist')}}</div>
		</div>

		<div class="music">
			<div class="cover" ng-style="{'background-image': 'url(' + itemValue('str_sonos_bad_currentalbumarturl') + ')'}"></div>
			<div class="playback">
				
			</div>
		</div>      
	</div>


	<div class="widget">
		<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/icons/playlist.svg#playlist"></use></svg></div>
		<div class="name">Sender</div>
		<div class="sceneGroup">
			<div class="scene" ng-click="sendCmd('str_sonos_bad_radio', 'Radio Salü')">Salue</div>
			<div class="scene" ng-click="sendCmd('str_sonos_bad_radio', 'UNSERDING')">Unser Ding</div>
    <div class="scene" ng-click="sendCmd('str_sonos_bad_radio', 'Classic Rock Radio')">Rock</div>
			<div class="scene" ng-click="sendCmd('str_sonos_bad_radio', 'SR 1')">SR 1</div>
    <div class="scene" ng-click="sendCmd('str_sonos_bad_radio', 'RPR 1')">RPR 1</div>
			<div class="scene" ng-click="sendCmd('str_sonos_bad_radio', 'ENERGY Digital')">Energy</div>
		</div>
	</div>

	<div class="widget">
		<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/icons/volume.svg#volume"></use></svg></div>
  <div class="name">Lautstärke<div</div></div>
		<div class="controlGroup">
    <div ng-init="slider_bad = {
        'item': 'dim_sonos_bad_volume',
        'vertical': false,
        'floor': 0,
        'ceil': 100,
        'step': 2,
        'precision': 1,
        'unit': '%',
        'hidelabel': true,
        'hidelimits': false,
        'hidepointer': false,
        'showticks': false,
        'bigslider': false
        }">
     <widget-slider ng-model="slider_bad"/>
    </div>
    <div class="controlGroup">
      <div class="control" ng-click="sendCmd('pl_sonos_bad_control', 'NEXT')" ><svg viewBox="0 0 66 55"><use xlink:href="/static/matrix-theme/icons/next.svg#next"></use></svg></div>
				<div class="control" ng-click="sendCmd('pl_sonos_bad_control', 'PAUSE')"><svg viewBox="0 0 66 55"><use xlink:href="/static/matrix-theme/icons/pause.svg#pause"></use></svg></div>
      <div class="control" ng-click="sendCmd('pl_sonos_bad_control', 'PLAY')"><svg viewBox="0 0 66 55"><use xlink:href="/static/matrix-theme/icons/play.svg#play"></use></svg></div>
      <div class="control" ng-click="sendCmd('pl_sonos_bad_control', 'PREVIOUS')"><svg viewBox="0 0 66 55"><use xlink:href="/static/matrix-theme/icons/prev.svg#prev"></use></svg></div>
     </div>
		</div>
	</div>

Really no one able to hide the header?

P.S. for a working favourite channel list, you also have to put the channels you want in your sonos app to favorites.


(Mike) #316

Hi Bogieman,

you just have to put a ?kiosk=on behind the URL an the Description and also the menu on the left will disappear.
To get them back, for editing etc. just change it to ?kiosk=off

You can give it to the variable you use to switch the dashboards.

ng-click=“sendCmd(‘DashSwitch’, ‘Schalter?kiosk=on’)”


(Marco Schnubel) #317

Great! Thx for that


(John Doe) #318

Hey, thanks for the help with how to edit the widgets. I’m just starting with website development, so please be forgiving :wink:
I can find a funny behaviour with my KNX dimmers: After replacing your hue code with a slider as suggested in this thread above, the KNX dimmer appears twice if it is set to 0 or OFF. As soon as it is at 1% or above, the copy disappears. If I go back to 0, it appears again.

This is the code:

<div class="widget" ng-if="((item.type=='Dimmer' && (itemValue(item.name)=='0' || itemValue(item.name)=='OFF')) || (item.type=='Group' && (itemValue(item.name)=='OFF' || itemValue(item.name)=='NULL'))) && itemValue(item.name + '_color')=='N/A'">
  <div class="icon off" ng-click="sendCmd(item.name, 'ON')"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use></svg></div>
  <div class="name" ng-click="showHueSelect = !showHueSelect">
    <div class="hue" ng-style="{'background': 'rgb(' + itemValue(item.name + '_color') + ')'}"></div>
    <div class="hueSelect" ng-init="showHueSelect = false" ng-show="showHueSelect"><div class="hueSelectItem"></div>
      <div class="hueSelectOptions">
        <!-- Brightness slider bar -->
        <div ng-init="slider = { value: 0, options: { floor: 0, ceil: 100, step: 1, showSelectionBar: true } };"></div>
        <rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" ng-click="sendCmd(item.name, slider.value)"></rzslider>
      </div>
    </div>
    {{item.label}}
  </div>
</div>

<div class="widget" ng-if="((item.type=='Dimmer' && itemValue(item.name)>'0') || (item.type=='Group' && itemValue(item.name)=='ON')) && itemValue(item.name + '_color')=='N/A'">
  <div class="icon on" ng-click="sendCmd(item.name, 'OFF')"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></div>
  <div class="name" ng-click="showHueSelect = !showHueSelect">
    <div class="hue" ng-style="{'background': 'rgb(' + itemValue(item.name + '_color') + ')'}"></div>
    <div class="hueSelect" ng-init="showHueSelect = false" ng-show="showHueSelect"><div class="hueSelectItem"></div>
      <div class="hueSelectOptions">
        <div ng-init='model={"item": item.name, "floor": 0, "ceil": 100, "step":1}'>
          <widget-slider ng-model="model" />
        </div>          
      </div>
    </div>
    {{item.label}}
  </div>
</div>

Any idea how to fix this? Thanks…


(Rob) #319

Hello,

Can someone help me the mini graphs get to work?
I have installed influxDb with grafan.

When I’m adding my graph to the Sytem Widget it won’t work.

Here is what I have put in

src="http://pi:3000/dashboard-solo/db/mini-graphspanelId=1&orgId=1&from=1516109468297&to=1516714268298&width=450&height=200\” >

The only thing I can see is a question mark. Grafana and habpanel are on the same host. Is there anything with user or login that I’ve to set? Or do I have to set special options to the graph?

If I try the link with my browser I can see the graph.


(K4nape) #320

Hello,

Maybe some one have this problem? Look this icon :confused:


(shane kevin) #321

Please someone help a noob guy, I would like to have the light section icon go to “lights up” when one of the lights being turned on, when all lights off, the icon stay in grey, how to code this one?

 <div class="sectionIconContainer">
    <div class="sectionIcon">
      <svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#light_bulb"></use></svg>    
    </div>  
  </div>

Please help, thank you so much

Shane


(Marco Schnubel) #322

How did you inserted the icons?
Via squidink.svg like pmpkk said?

Are there “stroke-width” informations in the svgs you inserted?
You should “play” with them. Try stroke-width="1" or perhaps stroke-width="0".

Which icons do you use?


(K4nape) #323

Hi Boogieman,

squidlink.svg:

And for buttons something that’s wrong