New "progress" theme.

[blauwebuis]

The past few days I've worked on creating a new theme for Domoticz.

THIS IS OUTDATED, CHECK THE NEW K-TRON THEME INSTEAD

THE THEME

The homepage, keeping it simple:


The Switches overview. Moved things around a bit.


I streamlined all the detail pages too, even moving buttons around through CSS (for now ).


The settings page moves the tabs to a vertical list if your screen is wide enough. And yes, I've totally moved everything around, I'll create a pull-request for the new setup.html file, which I've also cleaned up and standardised. It was quite messy.


As you can see I've also created new shortcuts. The end-goal is to make the complex setup-drowpdown menu a bit less full, where possible.


The hardware overview, and all similar pages, have also had some paint.


I couldn't style the event-page much, so I tried to just keep it clean and simple, and let the colorful blocks speak.



Almost all you see here is done through CSS. Only a few things few things will need a pull-request, in the form of a cleaned-up setup.html page. I'll create a pull-request for some cleanup/standardisation to the HTML. I've added things like 'related settings' shortcuts.

The additions don't break the old themes. And this new themes uses a sub-CSS page for the most obvious styling. This means that it will become an easy startingpoint for people who also want to theme Domoticz.

Here's an example of how it changes with a few lines of CSS:

[Dynamic]

It looks very good, keep up the good work!

[EdwinK]

Looks nice. Please share

[galadril]

Looks great

[zeputt]

Nice!

Looking forward to test this

[blauwebuis]

I've created a pull-request for the theme and for the new setup.html file, so hopefully it will become a part of Domoticz.

INSTALLING THE THEME
In the mean time you can do a manual install:

1. DOWNLOAD this zip file to your Domoticz server:
https://www.pineapplejazz.com/public/do ... ogress.zip

2. COPY the contents of the zip file to your styles folder. So it becomes domoticz/www/styles/progress/custom.css.

3. OPTIONAL: To get the optimal results (related options, reshuffled items), also replace your setup.html file in your www/views folder with the one I've provided. It's important to preserve permissions and rights when you do this, so my recommendation is: On your server open the original setup.html file in a text editor, and paste the contents of the provided file into that. That way all the rights should stay the same. Heads-up: this new setup.html will be replaced by the official Domoticz one when you update. Hopefully my proposed changes will have become part of Domoticz by then

(If case something unexpectedly goes wrong in that last part, start a new install of Domoticz, and choose "update" in the menu. That will always change all permissions to be ok again.)

Oh, and don't forget to clear your browser cache

[tontze]

Sweet, thnx !

[EdwinK]

Found a small problem.

windows screenshot

This two switches both have more options then are now shown

If I switch to the 'switches' tab, I can see them correct.

image upload

[blauwebuis]

Thanks, I've fixed the problem (quite beautifully I might add, using a flexbox, it will automatically change depending on the options available).

Just re-download the zip file.

I could make it wider..

v.s.

[EdwinK]

Thanks. Redownloading

[blauwebuis]

Here's an example of a simpler 'classic' subtheme (also included).

[EdwinK]

I hope they will add this to the official Domoticz release. Good job.

[blauwebuis]

Thanks!

[remb0]

much cleaner. very nice job.

[tlpeter]

I like it very much although i found something.
The slider on the bottom is cut off and the open/close for the "garagedeur" is not complete, it is missing one of the two buttons (to close the door)
Also the status is behind the stop button.
I also see that the names are cut off on the right side, could the letter type be smaller?

Keep up the good work

[blauwebuis]

Thanks for testing.

- The slider is like that on purpose.
- What button are you using for the garage door? Did you clear your browser cache? It looks very odd. Things shouldn't normally be able to overflow the button. Perhaps I missed a button type. Odd.
- The font-size is already as small as I'd like to go (to support mobile users). The thing is that I could allow the text to overflow, but then it may sometimes overlap with a sensor value. Because there is no way for me to discern the various sensor- and button types (no classes in the html), I have to create a one-size-fits-all solution.

The same thing is the source of the status being visible underneath the button. In the case of the button with multiple states I made it so that they cover up the status value, because I can't hide it any other way. I'll see if I can mask it here too.

[Awst6000]

I tested with the classic theme and the modified stylesheet.
Looks very nice and much more organized.

I also have the issue with the blinds here, like with the garage door. (I tested on Windows and an Android tablet. In both cases I cleared the browsercache first).

Question 1:
Is it possible to adjust the fontsize ourselves?
(I read your post about mobile users, but in Domoticz there already are settings for mobile users under 'interface'?)

Question 2:
Is it possible to get more items on one line?
(On a normal dashboard there are 4. On a compact dashboard there are 3, but I wish I could select 5 items per line)

Txs in advance!

[blauwebuis]

Could one of you send me/post the HTML of that garage door opener item? Because I can't test it; I can't create it as a virtual sensor.

I've also updated the design again.
- A smaller font for the name, as requested.
- The name can now stretch full width. That means you are responsible for keeping it short, otherwise name and value will start to overlap. (I tried some experiments, but none looked good).

[Awst6000]

On an Android tablet I have an issue with the background of the classic theme. (I haven't tested with other background of this theme yet)
The left side of the screen is grey and I see some sliders 'coming through' that grey.
The right side of the screen looks okee.

On Windows it looks normally.
I hope I can post a screenshot tomorrow.

About the blinds issue?
Can you please be more speciific? What exactly do you need to troubleshoot?
Txs!

[blauwebuis]

I would be really great if you could send me the HTML and CSS. To get the offending HTML, try this in Chrome:

- right mouse button on the weird part(s).
- choose 'inspect'.

You'll see a pop-up sort of thing that shows the HTML and CSS.

- Copy the entire list on the right side (styles tab) and send it my way.
- Right mouse button in the highlighted HTML element on the left side -> select copy -> copy element. And send that my way too.

A screenshot would also be very handy.

Thanks!