Matrix Theme for HABPanel

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

thanks Patrick you were almost right. I just remove the “ng-attr-” and now it’s working.

this is the working code if someone it is interested

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

Regards
Lorenzo

Hi,

I’m new with openhab but have some dev knownledge (but not enough apparently) and as Panel UI isn’t responsive, I decided to use your custom theme which I love.

I’ve some trouble to use it, like the Color Light which I’m not able to make it work without few changes in your code (not only items name).
Are you sure you uploaded the right version ? If yes, may you please show me how you did you defined your lights groups / items ?

I also would like to implement a slider to handle Brightness, do you think it’s possible ?

Thank you for your help,

Regards,

+1 for the light slider :slight_smile:

Hey,

Yes, the latest is on github including the color light feature.

It uses a group “gGroundFloorHue” to pull in the items. Do the items show up at all? If so, what happens when you touch/click the name? Can you post a screenshot of what you see?