Page 3 of 7

Re: New "progress" theme.

Posted: Monday 27 March 2017 12:42
by htilburgs
I try to look at it tonight. Currently at work (has to be done also :D )

Re: New "progress" theme.

Posted: Tuesday 28 March 2017 23:41
by blauwebuis
Ok, I think I'm getting close. 8-)

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.

Re: New "progress" theme.

Posted: Wednesday 29 March 2017 0:30
by blauwebuis
Just having some fun..

Image

Re: New "progress" theme.

Posted: Wednesday 29 March 2017 13:52
by 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.

Image

Re: New "progress" theme.

Posted: Wednesday 29 March 2017 15:21
by 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
zwave-settings.png (169.66 KiB) Viewed 3874 times

Re: New "progress" theme.

Posted: Wednesday 29 March 2017 21:55
by 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.

Re: New "progress" theme.

Posted: Sunday 02 April 2017 20:17
by 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.

Image

If you hover over it, it expands:
Image

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

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.

Re: New "progress" theme.

Posted: Sunday 02 April 2017 21:21
by EdwinK
blauwebuis wrote:
Check the readme file inside the folder for other details.
There is no readme file in the zip. Should just copying work?

Re: New "progress" theme.

Posted: Sunday 02 April 2017 23:13
by blauwebuis
yes, sorry about that. I've updates the file to include an updated readme.txt.

Re: New "progress" theme.

Posted: Monday 03 April 2017 10:18
by 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.

Image

Re: New "progress" theme.

Posted: Monday 03 April 2017 12:40
by 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.

Re: New "progress" theme.

Posted: Monday 03 April 2017 13:14
by 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...;-)

Re: New "progress" theme.

Posted: Monday 03 April 2017 14:19
by 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.

Re: New "progress" theme.

Posted: Monday 03 April 2017 19:44
by 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.
Image

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

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.

Re: New "progress" theme.

Posted: Monday 03 April 2017 20:11
by 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....

Re: New "progress" theme.

Posted: Monday 03 April 2017 20:17
by blauwebuis
Ooh, I'll quickly look into that.

// Should be fixed. Please test.

Re: New "progress" theme.

Posted: Monday 03 April 2017 20:59
by 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
Image

Re: New "progress" theme.

Posted: Monday 03 April 2017 21:53
by 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.

Re: New "progress" theme.

Posted: Monday 03 April 2017 22:21
by EdwinK
Thanks :) Will download it again

Re: New "progress" theme.

Posted: Monday 03 April 2017 22:51
by 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
Settings Safari.png (82.42 KiB) Viewed 3652 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
Settings Chrome.png (120.89 KiB) Viewed 3652 times