New design talent wanted!

[pahansen (Paul Hansen)]

Oooooh. Very nice. I’ll be dusting off my css skills to work something custom up for sure.

[jirm (Jose I Rol)]

OOOOWWWW Kubawolanin !!! .Really looks awesome. So far I´m closely tuned to that work. Great !

[Fejitatete]

Glad to see there is still Hero xD. I look forward to all the places where it may lead.

[gravidigit (Gravidi)]

Hi @Fejitatete and @kubawolanin

awesome templates!

You would make the templates available for download please?

Thanks

[kubawolanin]

Just wait some more time
It’s already merged to HABPanel repository, I’m sure @ysc will announce all the new features.

[ysc (Yannick Schaus)]

Yes, but the “Orange tree” theme you made is already bundled in, so users only have to switch to it. I’ll make a post about other more developer-oriented additions.

Edit: ended up explaining most of these things here:

Habpanel standard icon colors

As it happens, there is a new (undocumented) way of accessing these colors in a template since last week when the themes were rewritten by @kubawolanin: The syntax below: {{ variable | themeValue:'primary-color' }} (leave out the {{ }} if you’re already in an expression, obviously) will give you the “primary color” of the current theme (for example for the Material theme it will be red) if variable is not set. This is useful so you can replace variable with e.g. a color config option of your…

Habpanel standard icon colors

Oh, and you can now also easily override some of these variables with the new “additional stylesheet” option in HABPanel’s additional settings. [image] You cannot provide your stylesheet inline because “reasons”, rather you have to write a file like below and put it in the static files directory of your openHAB server (conf/html): :root { --body-bg: #333; --primary-color: #888888; --box-bg: rgba(255, 255, 255, 0.1); --icon-color-filter: invert(90%) sepia(0%) saturate(0…

[Dominic_Bonneau]

Hey kubawolanin, how did you do to only change the color of the icon instead of the whole square when activated ? is this something easy to make or I need te reprograms all my icon !?

[Andrew_Pawelski]

@kubawolanin can you tell me the values to use for a CSS filter to match dark orange for svg images?

[ysc (Yannick Schaus)]

Edit: I started a new topic about the implementation of this in the HABPanel Examples category

HABPanel Examples

Overall "skin" based on the Orange Tree theme with custom widgets and styles

This is another example of using an additional stylesheet file (a new option in 2.1) along with custom widgets to change HABPanel’s appearance significantly. The design has been first suggested here: New design talent wanted! Screenshot [image] Note: it’s optimized for a 16:10 aspect ratio, YMMV. Instructions First, create a new file in conf/html and name it orange-tree-overrides.css with the content below: /* Use with Orange Tree theme and switch-leftborder & slider-leftborder custom w…

[kubawolanin]

Amazing job, man!
Well done.

I love these custom widgets especially.

Maybe it’d be worth to update orange-tree with your overrides? Looks a lot better!

[furax54]

@ysc : Why do you define buttton and slider css style in overrides.css and not in widget ?

[ysc (Yannick Schaus)]

Because when you’re defining it in the widget it gets repeated every time you spawn the widget.
Those widgets simply suppose you’re aware of the associated stylesheet.

This is currently a bit tricky to setup, but I’m envisioning as a mid-term goal for HABPanel a way to distribute complete “skins” including styles, widgets, eventually additional iconsets and so on. You would simply install the skin (which could be a standard openHAB addon/OSGi bundle) and everything would become available at once.

[ysc (Yannick Schaus)]

@kubawolanin

Maybe it’d be worth to update orange-tree with your overrides? Looks a lot better!

I’ll let you be the judge, after all it’s your theme

[Fejitatete]

It takes shape, yummy xD.

[Benjy (Ben Clark)]

Just tested it since I’m thinking of adding a panel to the house! I’ll probably squash those dummy widgets into one though. Nice one!

[marcel_erkel]

Looks very nice Ben. I especially like the vertical scrollbars. Due to the bigger size compared to the horizontal ones shown in the other screenshots in this topic, it will be much easier to set them to the correct value. I would try to line up the middle of the on/off buttons to be exactly in line with the scrollbars. Now they seem to be a little too much to the left (probably the same for the on/off buttons of the desktop and humidifier).

With regards to the power consumption of your desktop and humidifier, I think that this should be in Watt, not kilowatt. If your desktop really is using 300W when it is switched off then something is seriously wrong with it because mine use less when it is on

[Benjy (Ben Clark)]

Ha, yes. Something isn’t quite right about that default unit!

[ysc (Yannick Schaus)]

Please note: there’s a new topic in the HABPanel Examples category with an updated implementation:

Overall "skin" based on the Orange Tree theme with custom widgets and styles

This is another example of using an additional stylesheet file (a new option in 2.1) along with custom widgets to change HABPanel’s appearance significantly. The design has been first suggested here: New design talent wanted! Screenshot [image] Note: it’s optimized for a 16:10 aspect ratio, YMMV. Instructions First, create a new file in conf/html and name it orange-tree-overrides.css with the content below: /* Use with Orange Tree theme and switch-leftborder & slider-leftborder custom w…

[bruxi (Jens Bruckmann)]

Hi Fejitatete,

your CometVisu panel looks really nice. So now I’m curious why you want to migrate from CometVisu to HabPanel?!

What facts were the basis for your decision?

Right now I’m not really sure which visualization platform I should prefer so any further hints are very appreciated.

[tbraeutigam]

I doubt that the screenshot from the first post is taken from the CometVisu. I have never seen a CometVisu design like that (unfortunately).
Otherwise you could just use it with CometVisu/openHAB as they work fine together.