Matrix Theme for HABPanel

skin
theme
stylesheet
Tags: #<Tag:0x00007fd312d06320> #<Tag:0x00007fd312d05f38> #<Tag:0x00007fd312d05d08>

(Avner) #163

@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


(Adtwomey) #164

Looks cool good work.


(Future Cow) #165

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


(Patrick) #166

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

(Patrick) #167

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

(Dominic Bialas) #168

@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


(Thomas Bail) #169

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


(Dominic Bialas) #170

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


(gymbowfits) #171

Thanks! that’s great - it opens up a whole world of possibility as I hadn’t really investigated rules up to now and had just considered them solely for events up to now rather than extending the data available.

Great work on the theme!


(Lorenzo Giordano) #172

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

(Andrew Pawelski) #173

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


(Avner) #174

Thanks @pmpkk , this works perfectly for me.


(Michael Stjerna) #175

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

//Michael Stjerna


(Volker Bier) #176

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.


(Lorenzo Giordano) #177

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

(Patrick) #178

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.


(Lorenzo Giordano) #179

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


(Michael Stjerna) #180

@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)

(Lorenzo Giordano) #181

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


(Alexandre) #182

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,