New "progress" theme.

[htilburgs]

I try to look at it tonight. Currently at work (has to be done also )

[blauwebuis]

Ok, I think I'm getting close.

Everything seems to be working here.

Please try it (downlink in the first post of this thread) and let me know how it goes! The only thing I haven't been able to test are the Z-wave things, and other possible specific hardware pages.

[blauwebuis]

Just having some fun..

[htilburgs]

Tested, but the ZWave part is still not OK, see picture.
I'm trying to figure out how Domoticz Dashboard is structured and give it a try with the ZWave page.

[Bikey]

Did you clear your browser cache?
I downloaded the new version this morning and I have this result (still missing some spacing between inner and outer blocks):

zwave-settings.png (169.66 KiB) Viewed 3875 times

[Blueone]

Looking good!

I found a minor issue, the temperatuur isn't properly displayed in the dashboard (see screenhot) also the mountain.css is missing in the latest download link.

[blauwebuis]

@blueone: the overlap is something I can't fix with the current HTML. But I've created a patch for dashboard's javascript what will add span-tags around the names and values. It will then be easier to deal with this (it already works here).

The mountain.css is not packaged on purpose, I'm currently working on two themes. When both of those are done it will be relatively easy to add that again. But the new themes also make it relatively easy to add your own background image, and just adding the picture of the mountain already makes it look a lot like the mountain theme

I've been working with the Domoticz developers to create a new default theme for Domoticz. It will be a dark theme like now. I will also add a new colourful theme.

The last thing I've been working on is a narrow sidebar.



If you hover over it, it expands:


When you click on the setup button, a double-column overlay shows pops up:


All these various features (main menu as sidebar, settings sub-menu as sidebar, bigger hero-buttons on the dashboard) will be optional: by commenting out lines in custom.css you can enable or disable certain aspects.

The new version can be tested by downloading the latest version of the zip-file form the first post in this thread.

[EdwinK]

Check the readme file inside the folder for other details.

There is no readme file in the zip. Should just copying work?

[blauwebuis]

yes, sorry about that. I've updates the file to include an updated readme.txt.

[blauwebuis]

A little experiment with showing all the sections as vertical columns. By dragging your favourite devices to the top you get a dashboard with big items. Then just scroll down for the rest of your favourites.

[gerard76]

Awesome. Activated the classic progress theme. It will stay that way. The icons look very bad if the main menu is on the left, so I put it back on top. Other then that. Love it.

[htilburgs]

Wow! I'm looking into the CSS and HTML as I told, but it's harder than I thought. Not as straight forward as I aspected.
Also experience a lack of time right now, so I've respect for the amount of time and hard work you put into this....

I've linked your/this page on my website if you don't mind...

[blauwebuis]

If you want to create your own theme, I would suggest to copy this theme, and then create a new modified version of classic.css or feynman.css. I've designed this theme in such a way as to make theming easier for others. The base.css takes care of the heavy lifting/modifications. And then the 'subtheme' like feynman.css is where I tried to put most of the visual stuff like colours, fonts, etc.

Theming Domoticz currenty really is quite difficult. I've made a wiki page for people who want to theme Domoticz that points out some of the (current) pitfalls. I've also made a lot of code change proposals that will make theming a little easier.
http://domoticz.com/wiki/How_to_theme_Domoticz

About the icons: I've purposefully made them pixelated. The problem is that the base icons are only 16 by 16 pixels. So I had to choose between pixelated or very blurry..

Ideally Domoticz would start using a new default icons set that has higher resolution images. Or it could first look for icons in the theme folder, so that themes could override the default icons.

[blauwebuis]

OK, the final feature for the time being: columns.

If your screen is wide enough, this feature will create vertical columns. It's smart about this: it will only do it if it fits comfortably.


If you combine columns with the earlier "highlights" feature, which makes the first three items of each category bigger, you get this:


Form now on it's just about making everything work perfect, and optimizing Domoticz' html.

Other improvements are:
- Sidebar menu feature automatically disables itself for mobile phones.
- There was an issue with the main menu sidebar and the floorplan (making it not show up). That's now fixed.

The latest version can be downloaded in the first post of this thread.

[Bikey]

Getting better each version, great work!
The floorplan now tries to show both of my floors in the same page. Result is 1 1/2 floorplan on the desktop and empty page on mobile....

[blauwebuis]

Ooh, I'll quickly look into that.

// Should be fixed. Please test.

[EdwinK]

After putting in the latest version, downloaded earlier today, I lost the nice background, and just got an ugly black background.


Liked this background

[blauwebuis]

Haha, I'm glad you like it too

I've fixed that too. I'll make sure to upload the Feynman version from now on.

[EdwinK]

Thanks Will download it again

[Bikey]

Wow, that was a quick repair, the floorplan now is fixed

Only the settings page is still not really working nicely. In Safari after clicking on settings I only get 1 partial column:

Settings Safari.png (82.42 KiB) Viewed 3653 times

And in Chrome I get 2 columns, but the spacing of the menu items is very wide. Also the menu items do not size into the second column:

Settings Chrome.png (120.89 KiB) Viewed 3653 times