Matrix Theme for HABPanel

Menu navigation works, but this is faster and more obvious.
WAF=Women Acceptance Factor

@pmpkk Patrick I have changed a few things in your CSS to my own flavour but it seems I have lost the built in lables (or they are the same colour as the background) - any idea what element they would be?

1 Like

Looks like you changed the theme to “light” from “dark”, so you will need to change this override:

–widget-text-color: #a4a4a4;

in matrix-theme.css to black or something dark (or remove it alltogether).

Hope this helps!

@pmpkk thanks for giving this useful tutorial and for sharing the custom theme example code.
Can you please share how the items: rule_livingroom_blindsUp_TimeStamp, and rule_livingroom_blindsUp_Counter are defined in the .items file? (as well as how they are called in any other files, e.g. in the .sitemap file)
Thanks

Looks cool good work.

This is looking really nice! Thanks for the hard work making all of this.

Just a question, How can you change the percentage bar from you Cars widget, so it’s a progress bar, going from 0 to 5000. So when the itemvalue is 2000, the bar is at 40%.

What is the quickest way to make a beautiful weather widget, something like this, but in your theme style: Template Example: Weather Binding

In each rule, I do this upon execution:

        postUpdate(rule_sunset_blinds_TimeStamp, new DateTimeType())

        var Number counter
        counter = rule_sunset_blinds_Counter.state as DecimalType
        counter = counter + 1
        postUpdate(rule_sunset_blinds_Counter,counter)    

And here are the corresponding items:

Number rule_sunset_blinds_Counter
DateTime rule_sunset_blinds_TimeStamp
4 Likes

I create a rule that calculates the rgb values and sets them:


rule "TV Light"
when 
	Item gHue received update
then

	var HSBType hsb 

	gHue.members.forEach [ item | 
		hsb = item.state as HSBType
		var red = Math::round(hsb.red.intValue * 2.55)
		var green = Math::round(hsb.green.intValue * 2.55)
		var blue = Math::round(hsb.blue.intValue * 2.55)
		postUpdate(item.name + "_rgb",red.toString + "," + green.toString + "," + blue.toString)  
		logInfo("Hue","Updating Hue Colors (" + item.name + "_rgb)")
	]	

end

And corresponding item:

Color light_hue_tv "TV Strip" (gHue) {channel = "hue:0210:xxx:9:color"}
String light_hue_tv_rgb
3 Likes

@Dibbler42
Hey Thomas, did you manage to implement the knx-uf-iconset?

I tried it, but could not manage to do it.

Would be glad to hear from you

Yes and No. I didn’t had time to work on the matrix theme, but the standard habpanel supports now custom icon sets and that works for me. One problem ist that all colors in the knx set are white so you see nothing because white on white is a little bit difficult. I changes within all files the color with a text editor.

Thomas

Could you upload the colorized icons? I am interested especial in the shutter Icons.

Hi, nice job I am trying to personalize it a little bit.
I would like to create a Weather widget in the Home section,
I create a svg imagine for any weather situation (i.e. cloudy, rainy etc. etc) and include in a single svg.
Now I would like to change the icon depending on the value of Item ‘Condition’ similar to the weather widget

This code works:

<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/flat/flat.svg#cloudy"></use></svg></div>

but If I replace it with the below code does not work anymore (Condition value = cloudy of course)

<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/flat/flat.svg#{{itemValue('Condition')}}"></use></svg></div>

any help?
Thanks
Lorenzo

but If I replace it with the below code does not work anymore (Condition value = cloudy of course)

any help? Thanks Lorenzo

I am using the orange tree theme with the css override. I removed that line but stuill the same? as soon as I remove the override css they come back

Thanks @pmpkk , this works perfectly for me.

Hi @vbier
Can you please share the menu you implemented and the code you use to navigate between pages.
Thanks

//Michael Stjerna

I have added this to the css stylesheet:

.section .menu {
  position: relative;
  width: 100%;
}
.section .menu .menuContainer {
  width: 100%;
  height: 48px;
  position: absolute;
  right: 0px;
}
.section .menu .menuContainer .menuIcon {
  width: 50px;
  height: 48px;
  float: right;
  padding-left: 10px;
  padding-top: 4px;
}
.section .menu .menuContainer .menuIcon svg {
  stroke-width: 1px;
}
.section .menu .menuContainer .menuIcon.on svg {
  stroke: #3bb9ff;
  fill: #3bb9ff;
}
.section .menu .menuContainer .menuIcon.off svg {
  stroke: #565f58;
  fill: #565f58;
}

Afterwards, you can add the menu like this (below the opening element of the section):

  <div class="menu">
    <div class="menuContainer">
      <div class="menuIcon on"><a href="#/view/Info"><svg viewBox="-35 -35 400 400"><use xlink:href="/static/matrix-theme/icons.svg#info_330"></use></svg></a></div>
      <div class="menuIcon on"><a href="#/view/Alarmpanel"><svg viewBox="0 0 24 24"><use xlink:href="/static/matrix-theme/icons.svg#alarm"></use></svg></a></div>
    </div>
  </div>

I am not export on css, so there might be better way of positioning this. Currently, if the display is not wide enough, the menu icons overlap the section title. You will need to adjust the colors to the original theme.

2 Likes

I am still working on this matter:
This code works:

<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/flat/flat.svg#cloudy"></use></svg></div>

but If I replace it with the below code does not work anymore (Condition.value = “cloudy” of course)

<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/flat/flat.svg#{{itemValue('Condition')}}"></use></svg></div>

Up to now my only solution is a work around using the exec binding in a rule, but I am pretty sure you have a better solution.

Regards
Lorenzo

I don’t think this is allowed in AngularJS (which is what HabPanel is built on). I think the correcta way of doing it, is something like this:

ng-attr-xlink:href="{{'pathprefix' + xxx}}"

In your example something like:

<div class="icon on"><svg viewBox="0 0 48 48"><use ng-attr-xlink:href="{{'/static/flat/flat.svg#' + itemValue('Condition')}}"></use></svg></div>

I can’t try it out right now, but maybe it’ll work.

2 Likes

Thanks Patrick I Will try tonight.
The strange thing is that with anche IMG tag and PNG file, my code works…
Lorenzo

@vbier

Thanks for the quick replay!

I found a better way of doing this that you can use without tuching the .css

Create a new item in any .items file and paste this code on top of everything else, it has it’s own section so you will get a “menu row”

<div class="section">
<div class="title">{{itemValue('MENU_page')}}</div>
	<div class="controls">
    <div class="widget.wide">
			<div class="controlGroup">
				<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-System']" ng-click="sendCmd('MENU_page', 'P-System')"><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')=='P-Calendar']" ng-click="sendCmd('MENU_page', 'P-Calendar')"><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')=='P-Wifi']" ng-click="sendCmd('MENU_page', 'P-Wifi')"><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')=='P-Music']" ng-click="sendCmd('MENU_page', 'P-Music')"><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')=='P-HomeControl']" ng-click="sendCmd('MENU_page', 'P-HomeControl')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#home-2"></use></svg></div>
				<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-ESP']" ng-click="sendCmd('MENU_page', 'P-ESP')"><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')=='P-Weather']" ng-click="sendCmd('MENU_page', 'P-Weather')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#sunset"></use></svg></div>
			</div>
		</div>
   
	</div>

</div>```

After this you just go in to the panel configuration and set it to switch by item update, in my case the item name is "MENU_page"

![10 PM|440x134](//community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/a/a23c90a2273dd26426c7b6f2ef1dd59ebc2ff839.jpg)
5 Likes