Matrix Theme for HABPanel

skin
theme
stylesheet
Tags: #<Tag:0x00007f0154f856e0> #<Tag:0x00007f0154f849c0> #<Tag:0x00007f0154f84560>

(Chriss Rhabek) #384

This looks awesome! THX
Could you also Post your .items file?


(Martin Mailloux) #385

Question regarding Hue light. I already include the standard way proposed by @pmpkk (thanks Patrick) to manage RGB. Is someone already tried to include a colorpicker similar to this one?


Here is the code provided by @kubawolanin

<div ng-init='picker = {
    "name": config.name,
    "item": config.color,
    "style": "aCKolor"
};slider = {
    "name": "",
    "item": config.brightness,
    "floor": 0,
    "ceil": 100,
    "step": 1,
    "unit": "",
    "vertical": false
};switch = {
    "name": "",
    "item": config.brightness,
    "hidelabel": true,
    "hideicon": false,
    "hideonoff": true
}'>
    <style>
    .cl-switch .switch {
      position: absolute;
      top: 0;
      width: 100%;
		}
    </style>
    <widget-colorpicker ng-model="picker"></widget-colorpicker>
    <widget-slider ng-model="slider"></widget-slider>
</div>

I did some test, but it’s currently slow and not fully fonctionnal compared to the basic widget outside the Matrix theme.


(Marco Geh.) #386

Hi @olir,

I’m also looking for implementing the Xiaomi Robot. The functions of your Widget working instantly at my setup. Do you already found a way to get a nice view of the Widget ? Tanks for your code and further help!

Best, Marco


(Oliver) #387

Short question, are these graphs/images automatically refreshing, even if the page is not reloaded manually? If yes, how did you set ip up, with jquery/ajax?


(Jompa68) #388

After some hours of finding out why my Spotify widget did not show like your post i finally fixed it. Luckily i have not so much hair left to become gray :slight_smile:


(Daniel N.) #389

Hey,

can you send me the Code for the Device Selection?

Geetz
Nog


(Christian) #390

@jompa68

Would really appreciate if you would share your code :slight_smile:
This looks very nice! :smiley:


(Jompa68) #391

Here are the code, i have just adjusted it so it works for me. All credits should go to @pmpkk , @Michael_Stjerna and @unparagoned


<div class="section">
	<div class="controls">
		<div class="widgetMenu">
			<div class="col1">
				<div class="name">Sound</div>
			</div>
			<div class="col2">
				<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#round-clock"></use></svg></div>
				<div class="name">{{itemValue('CurrentDate') | date:'HH:mm'}}</div>
			</div>
		</div>
	
		<div class="widgetMenu2">
			<div class="col2">
				<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#light_bulb"></use></svg></div>
				<div class="name">{{itemValue('gLandetLightON')}} / 6</div>
			</div>
			<div class="col2">
				<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#window"></use></svg></div>
				<div class="name">{{itemValue('gLandetWindowOpen')}} / 4</div>
			</div>
			<div class="col2">
				<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#door-2"></use></svg></div>
				<div class="name">{{itemValue('gLandetDoorOpen')}} / 5</div>
			</div>			
		</div>

		<div class="widget.wide">
			<div class="controlGroup">
				<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='System?kiosk=on']" ng-click="sendCmd('MENU_page', 'System?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#drive"></use></svg></div>
				<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='Calendar?kiosk=on']" ng-click="sendCmd('MENU_page', 'Calendar?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#calendar"></use></svg></div>
				<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='Wifi?kiosk=on']" ng-click="sendCmd('MENU_page', 'Wifi?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#home-adaptor"></use></svg></div>
				<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='Music?kiosk=on']" ng-click="sendCmd('MENU_page', 'Music?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#sound2"></use></svg></div>
				<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='HomeControl?kiosk=on']" ng-click="sendCmd('MENU_page', 'HomeControl?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#home-3"></use></svg></div>
				<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='ESP?kiosk=on']" ng-click="sendCmd('MENU_page', 'ESP?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#thermometer-3"></use></svg></div>
				<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='Weather?kiosk=on']" ng-click="sendCmd('MENU_page', 'Weather?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#sunset"></use></svg></div>
			</div>		
		</div>
  
	</div>
</div>

<div class="section">

	<div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#line-visuals"></use></svg></div></div>
	<div class="title">Music</div>
	<div class="controls">
    
		<div class="widget">
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#line-visuals"></use></svg></div>
			<div class="name">Track</div>
			<div class="appLogo"><svg viewBox="0 0 440 100"><use xlink:href="/static/matrix-theme/AppIcons.svg#spotify"></use></svg></div>        
			<div class="valueGroup">
				<div class="value">{{itemValue('spotify_current_track')}}</div>
				<div class="value">{{itemValue('spotify_current_artist')}}</div>
			</div>

			<div class="music">
				<div class="cover" ng-style="{'background-image': 'url(' + itemValue('spotify_current_cover') + ')'}"></div>
				<div class="playback">
					<div class="playbackTime">{{ 946684800000 + itemValue('spotify_current_progress')*1 | date:'mm:ss'}}</div>
					<div class="playbackBar"><div class="playbackBarDone" ng-style="{'width': itemValue('spotify_current_progress_percent') + '%'}"></div></div>
					<div class="playbackTime">{{ 946684800000 + itemValue('spotify_current_duration')*1 | date:'mm:ss'}}</div>
				</div>
				<div class="controlGroup">
					<div class="control" ng-click="sendCmd('spotify_action', 'next')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#right-arrow-2"></use></svg></div>
					<div class="control" ng-click="sendCmd('spotify_action', 'play')" ng-if="itemValue('spotify_current_playing')!='ON'"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#right-play"></use></svg></div>
					<div class="control" ng-click="sendCmd('spotify_action', 'pause')" ng-if="itemValue('spotify_current_playing')=='ON'"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#stop_1_"></use></svg></div>
					<div class="control" ng-click="sendCmd('spotify_action', 'previous')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#left-arrow-2"></use></svg></div>
				</div>
			</div>      
		</div>
    
		<div class="widget">
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#line-visuals"></use></svg></div>
			<div class="name">Play Lists</div>
			<div class="sceneGroup">
				<div class="scene" ng-class="{true:'on', false:''}[itemValue('spotify_current_context_uri')=='spotify:user:spotify:playlist:37i9dQZF1DWTh5RC6ek3nb']" ng-click="sendCmd('spotify_action', 'play spotify:user:spotify:playlist:37i9dQZF1DWTh5RC6ek3nb')">Hits 2018</div>
				<div class="scene" ng-class="{true:'on', false:''}[itemValue('spotify_current_context_uri')=='spotify:user:spotify:playlist:37i9dQZF1DWSJHnPb1f0X3']" ng-click="sendCmd('spotify_action', 'play spotify:user:spotify:playlist:37i9dQZF1DWSJHnPb1f0X3')">Cardio</div>        
			</div>
		</div>

		<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('spotify_current_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>

 		<div class="widget">
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#box"></use></svg></div>
			<div class="name">Devices</div>
			<div class="sceneGroup" ng-init="deviceList = $eval(itemValue('spotify_device_list'))">
				<div class="scene" ng-class="{true:'on', false:''}[itemValue('spotify_current_device_id')==device.id]" ng-repeat="device in deviceList" ng-click="sendCmd('spotify_current_device_id', device.id);sendCmd('spotify_action', 'transfer_playback')">{{device.name}}</div>
			</div>
		</div>		

		<div class="widget" ng-click="sendCmd('spotify_forceupadte', 'ON')">
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#double-arrow"></use></svg></div>
			<div class="name">Update</div>
     	<div class="valueGroup">
        <div class="value">{{itemValue('spotify_lastConnectionDateTime') | date:'MMM d, HH:mm:ss'}}</div>
      </div>			
		</div>

  </div>

</div>
<div class="section">

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

		<div class="widget">
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#line-visuals"></use></svg></div>
			<div class="name">Radio</div>
			<div class="appLogo"><svg viewBox="0 0 440 100"><use xlink:href="/static/matrix-theme/Old_sonos.png"></use></svg></div>        
			<div class="valueGroup">
				<div class="value">{{itemValue('str_sonos_kitchen_currenttrack')}}</div>
				<div class="value">{{itemValue('str_sonos_kitchen_currentartist')}}</div>
			</div>

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

				</div>
				<div class="controlGroup">
					<div class="control" ng-click="sendCmd('pl_sonos_kitchen_control', 'NEXT')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#right-arrow-2"></use></svg></div>
					<div class="control" ng-click="sendCmd('pl_sonos_kitchen_control', 'PLAY')" ng-if="itemValue('Sonos_State')!='PLAYING'"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#right-play"></use></svg></div>
					<div class="control" ng-click="sendCmd('pl_sonos_kitchen_control', 'PAUSE')" ng-if="itemValue('Sonos_State')=='PLAYING'"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#stop_1_"></use></svg></div>
					<div class="control" ng-click="sendCmd('pl_sonos_kitchen_control', 'PREVIOUS')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#left-arrow-2"></use></svg></div>
				</div>
			</div>      
		</div>


		<div class="widget">
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#line-visuals"></use></svg></div>
			<div class="name">Radio Stations</div>
			<div class="sceneGroup">
				<div class="scene" ng-click="sendCmd('str_sonos_kitchen_radio', 'P3 99.7 (Populärmusik)')">P3</div>
				<div class="scene" ng-click="sendCmd('str_sonos_kitchen_radio', 'P4 Gävleborg 102.0 (Sportsnack)')">P4</div>
    		<div class="scene" ng-click="sendCmd('str_sonos_kitchen_radio', 'RIX FM 104.9 (Populärmusik)')">RIX FM</div>
				<div class="scene" ng-click="sendCmd('str_sonos_kitchen_radio', 'NRJ Sweden 105.1 (Populärmusik)')">NRJ</div>
		</div>
		</div>
		
		<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="slider-div" ng-init='volumeModel={"name": "VOLUME", "item": "dim_sonos_kitchen_volume", 
                    "floor" : 0, "ceil": 30, "step": 1, "hidelabel" : "true", "hidelimits": "true" }'>
  				<widget-slider ng-model="volumeModel"/>
					</div>
			</div>
		</div>

	

  </div>

</div>



(Christian) #392

Thank you very much! I’ve tried this before, without 100% results. So I hope your code will be the solution :slight_smile:


(Jompa68) #393

@Michael_Stjerna
how does the rule looks for this? “rule_livingroom_blindsUp_Counter”


(Daniel N.) #394

Hey,

realy nice job, but i have a small Problem. I cant display all my Network-Devices of the Group “gNetwork”.

What’s the Problem?

<div class="section">
  <div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#wlan"></use></svg></div></div>
  <div class="title"><div class="name">WLAN - Geräte</div><div class="summary">Online: {{(itemsInGroup('gNetwork') | filter:{state:'OPEN'}).length}} von 20</div></div>
  <div class="controls">   
    <div ng-repeat="item in itemsInGroup('gNetwork') | filter:query as filtered">
        
      <div class="widget" ng-if="(item.type=='Contact') && (itemValue(item.name)=='Open')">
        <div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use></svg></div>
        <div class="name">{{item.label}} : {{item.Value}} ✅</div>
      </div>

      <div class="widget" ng-if="(item.type=='Contact') && (itemValue(item.name)=='CLOSED')">
        <div class="icon on" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></div>
        <div class="name">{{item.label}} : {{item.Value}} ✖</div>
      </div>

      <div class="widget" ng-if="(item.type=='Contact') && (itemValue(item.name)=='NULL')">
        <div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#none"></use></svg></div>
        <div class="name">{{item.label}} : {{item.Value}} ✖</div>
      </div>
    </div>
  </div>
</div>

(Szabi) #395

Thx


(Jonas) #396

Hi!

as i can see the conde:

<div class="widget">
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#box"></use></svg></div>
			<div class="name">Devices</div>
			<div class="sceneGroup" ng-init="deviceList = $eval(itemValue('spotify_device_list'))">
				<div class="scene" ng-class="{true:'on', false:''}[itemValue('spotify_current_device_id')==device.id]" ng-repeat="device in deviceList" ng-click="sendCmd('spotify_current_device_id', device.id);sendCmd('spotify_action', 'transfer_playback')">{{device.name}}</div>
			</div>
		</div>		

is responsible for the device selection.
I tried to add that to my code but it does not show any devices (just the speaker icon :wink: )

Did you make changes to the matrix-theme.css file too or did you make any changes in another file?
I’d love to get the device selection up and running :slight_smile:
thank you


(Jompa68) #397

If you run this command “python /etc/openhab2/scripts/spotify.py get_devices”
you should see your spotify devices on your network, start with that so we now that you have the script on right place

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: Get Devices
Successfully posted state to OpenHab: spotify_device_list = [{"name": "Echo Dot v-rum", "volume_percent": 50, "is_private_session": false, "is_active": false, "is_restricted": false, "type": "Speaker", "id": "c3923b6e16fc1876ef2f6e6749ce065686605777"}]
[{"name": "Echo Dot v-rum", "volume_percent": 50, "is_private_session": false, "is_active": false, "is_restricted": false, "type": "Speaker", "id": "c3923b6e16fc1876ef2f6e6749ce065686605777"}]
Successfully posted state to OpenHab: spotify_lastConnectionDateTime = 2018-06-10T04:57:53+0000
Done in 0.421875 seconds


(Pavel) #398

Good day to everybody.

I have problem with recently purchased SquidInk icons. In particular I can’t find at all icons named “double-arrow”, “line-visuals” and other icons named differently than shown in the symbols list. Only I encounter this problem?


(Jonas) #399

yes, it shows all of my devices. :slight_smile:
any further advice? thanks so far!


(Jonas) #400

I experienced the same on some icons. they are there though.
you can look at your folder and see the correct name and then edit the html code directly in the HabPanel!


(Pavel) #401

It’s sad, because sometimes it’s hard to say by name what icon should be used.


(Jompa68) #402

I will add my .css here tonight when i’m home from work.


(Jompa68) #403

Sorry that i did forget this last night but here is the .css i use

matrix-theme.css (34.6 KB)