New "progress" theme.

[htilburgs]

Your not blond....

Make sure you select the first page (https://github.com/domoticz/domoticz/tree/GuiWork)
Then you will see a green button in the right upper corner with the option Clone or Download



After you have downloaded the zip file, expand this to disk and upload the www directory (this is a subdirectory from Domoticz).
The www directory includes the modifications and the Feynman theme.

[EdwinK]

O i forgot. Never had to use an account, but guess I already was logged in those times. Did remove cookies earlier.

[htilburgs]

O i forgot. Never had to use an account, but guess I already was logged in those times. Did remove cookies earlier.

I edited my post, account is not needed....

[Bikey]

@Bikey, that's right, the custom.css is not correct. You have to edit the second line into

Code: Select all

@import url("feynman.css");  /* Don't remove this line! */

now it has @import url("classic.css"); /* Don't remove this line! */

Mmm, You mean from the Progress theme, which can only be downloaded from the first page? I have done that but that does not work.

Strange thing is, that in the "fyenman" theme I download from Github there is no reference to feynman.css

[EdwinK]

Deleted all from theme 'progress', downloaded the www folder and uploaded that to my domoticz/www folder.

Cleared cache (320mb) from within Chrome. Chose Feynman as theme, but still no change. Tried another browser (Safari) but that didn't work either. Also changed the custom.css file as in earlier post

Trying later this week

[htilburgs]

Deleted all from theme 'progress', downloaded the www folder and uploaded that to my domoticz/www folder.

Cleared cache (320mb) from within Chrome. Chose Feynman as theme, but still no change. Tried another browser (Safari) but that didn't work either. Also changed the custom.css file as in earlier post

Trying later this week

Have you looked at your custom.css in the feynman directory?
The custom.css is not correct. You have to edit the second line into

Code: Select all

@import url("feynman.css");  /* Don't remove this line! */

now it has @import url("classic.css"); /* Don't remove this line! */

[EdwinK]

Yes, that is exactly what I did.

Strange.

[Bikey]

Mmm, this is what I get with the Feynman theme downloaded from Github (and replacing everything in wwww/), and editing the custom.css as you indicated.

Feynman switches.png (109.39 KiB) Viewed 4647 times

The dashboard looks Ok, however also with a black background and no transparency.

In "private" mode, I still just get a blank screen. Indeed strange.

[htilburgs]

Looks like a cache problem....
I had the seem screen, but after doing what I descriped this was gone.
Strange....

[Bikey]

Mmm, I really tried everything clearing cache, clearing browser history, using Chrome and Safari.
Using private mode (so cache is absoluty clean) or Brave I just get this screen:

Private mode.png (150 KiB) Viewed 4649 times

I enabled transparency for the dashboard, which looks real cool, although also not perfect (lastupdate text block not transparent and sunrise/sunset font is dark against a dark background):

Dashboard.png (143.59 KiB) Viewed 4648 times

Als a strange thing: changing the dimmer by sliding it results in a flashing effect of the box during maybe 10 times, like it is stuck.

BTW: I may sound critical, but really appreciate all your hard work, keep it coming!

[blauwebuis]

I've uploaded a new version of the theme as a zipfile. I've added some fixes for the stable and beta version of Domoticz. It's not perfect, but it will have to do.

The main focus for me now is getting it into a future version of Domoticz, so the next time you get an update on the theme.. it will be because you can just select it as an option that comes with Domoticz.

[blauwebuis]

@bikey: perhaps you have damaged the permissions of the files. My advice: if you're on a Raspberry Pi, run the Domoticz installation command again, and choose 'update'. An update will reset all the permissions.

[Bikey]

@bikey: perhaps you have damaged the permissions of the files. My advice: if you're on a Raspberry Pi, run the Domoticz installation command again, and choose 'update'. An update will reset all the permissions.

Hi, I updated Domoticz and downloaded the net Progress theme from the link in the first page. Now I do have the coloured/graded background and the tranparant switches in de dashboard, yeah!

However still these issues:

• The floorpan page is empty, well it show a supersized version of the Domoticz icon...
• I still have the effect that, if I use the slider on a dimmer and actually sliding it, it flickers for about 3 to 6 times, depending how far you "slide" it. If I set it with at a level by clicking at a point in the horizontal bar, it only flashes once (on update).
  ** Edit ** The flickering is only with KlikAanKlikUit dimmers, not with ZWave dimmers

Furthermore, only the Dashboard now contains transparency, the other pages are still "legacy" style, is that correct?
Like this:

Switches.png (73.6 KiB) Viewed 4576 times

[blauwebuis]

@bikey: yes, that is correct. Only the dashboard is fancy.

The see-though option is totally 'beta' though. Neither the Classic nor the Feynman theme use it by default in the version of Domoticz that I've been working on. Although it seems to be quite popular

The super-sized Domoticz icon.. now that is weird. Let's chat on DM. Have you created a floorplan? And have you added your own images? It sounds to me like it's grabbing the wrong image file form the images folder?

And the flickering, it has always done that with me. I've looked into it in the javascript, but couldn't find the issue. I thought it was because I force the slider to be 100% width through CSS. But when I turned that off as an experiment, it still did the flickering.

[Bikey]

About the floorpan, you are right, in de process to get everything working I completely replaced the www directory and therefore deleted my floorpan images
Luckily I had a backup and now I have my floorpan back. Thanks for the pointer!

The see-through is really cool, this gives a much more modern look. I combined it with a more dark/purple/graded background which looks pretty nice.

Dashboard.png (51.38 KiB) Viewed 4528 times

With trial and error I even managed to adjust the boxes on the switches pages, except I can't seem to find how to adjust the status-bar, it still is too light-blueish I think:

switches dark.png (46.95 KiB) Viewed 4528 times

Before I - as noob - start wasting more time on this with trial and error (...), will you be working on the switches pages too? If so I'll wait on your more professional style

About the flickering, as I said I think I is based on update-events: the boxes flickr on each update (which is nice), but apparently the KlikAanKlikUit switches generate multiple update events when using the slider. If you set the slider instantly at a certain point it only flickers once. Also a strange thing: I noticed that it works fine I you first select a room (filter) at the top right of the dashboard page

[blauwebuis]

That does look really nice.

Maybe I should make see-through default on Feynman.

I can look into it for the switch pages I guess. I'll have a look.

[htilburgs]

About the floorpan, you are right, in de process to get everything working I completely replaced the www directory and therefore deleted my floorpan images
Luckily I had a backup and now I have my floorpan back. Thanks for the pointer!

The see-through is really cool, this gives a much more modern look. I combined it with a more dark/purple/graded background which looks pretty nice.
Dashboard.png
With trial and error I even managed to adjust the boxes on the switches pages, except I can't seem to find how to adjust the status-bar, it still is too light-blueish I think:
switches dark.png
Before I - as noob - start wasting more time on this with trial and error (...), will you be working on the switches pages too? If so I'll wait on your more professional style

About the flickering, as I said I think I is based on update-events: the boxes flickr on each update (which is nice), but apparently the KlikAanKlikUit switches generate multiple update events when using the slider. If you set the slider instantly at a certain point it only flickers once. Also a strange thing: I noticed that it works fine I you first select a room (filter) at the top right of the dashboard page

First of all, looks great. I also love the transparant look!
The flickering can be an option, check if it is checked (Setup - Settings - Flash sensor when an update is received)

What have you updated in the CSS for the transparancy? Can you share?

The slider part is in BASE.CSS

Code: Select all

.dimslider .ui-slider-range {
    background-color: rgba(115,182,202,0.7);
    background-image: none;
}

[Bikey]

Hi,

For the switches page I changed the following section in feynman.css into:

Code: Select all

.ui-draggable:not(.ui-dialog) table > tbody > tr{
    background-color:transparent!important;
    background: -moz-linear-gradient(to bottom, rgba(212,225,238,1) 0% ,rgba(212,225,238,1) 42px, rgba(255,255,255,1) 42px,rgba(255,255,255,0.95) 69px,rgba(255,255,255,1) 69px,rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(to bottom, rgba(212,225,238,1) 0% ,rgba(212,225,238,1) 42px, rgba(255,255,255,1) 42px,rgba(255,255,255,0.95) 69px,rgba(255,255,255,1) 69px,rgba(255,255,255,1) 100%); 
    background: linear-gradient(rgba(73, 17, 189, 1), rgba(25, 12, 98, 0.17) 26.05%, rgba(121, 89, 124, 0.42));   
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e1ee', endColorstr='#cccccccc',GradientType=0 );
    border-radius:2px!important;

But note that probably only looks good on a dark/purple background.

The flickering is indeed a setting, but for sensors I really like to have it active.

[blauwebuis]

Having some fun, experimenting with adding data visualisation.

[htilburgs]

Nice!