Page 6 of 7

Re: New "progress" theme.

Posted: Wednesday 12 April 2017 21:29
by htilburgs
:D 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

Image

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.

Re: New "progress" theme.

Posted: Wednesday 12 April 2017 21:30
by EdwinK
O i forgot. Never had to use an account, but guess I already was logged in those times. Did remove cookies earlier.

Re: New "progress" theme.

Posted: Wednesday 12 April 2017 21:31
by htilburgs
EdKo66 wrote: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....

Re: New "progress" theme.

Posted: Wednesday 12 April 2017 21:32
by Bikey
htilburgs wrote: @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

Re: New "progress" theme.

Posted: Wednesday 12 April 2017 21:44
by 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

Re: New "progress" theme.

Posted: Wednesday 12 April 2017 21:50
by htilburgs
EdKo66 wrote: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! */

Re: New "progress" theme.

Posted: Wednesday 12 April 2017 22:08
by EdwinK
Yes, that is exactly what I did.

Strange.

Re: New "progress" theme.

Posted: Wednesday 12 April 2017 22:30
by 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
Feynman switches.png (109.39 KiB) Viewed 4822 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.

Re: New "progress" theme.

Posted: Wednesday 12 April 2017 22:34
by htilburgs
Looks like a cache problem....
I had the seem screen, but after doing what I descriped this was gone.
Strange....

Re: New "progress" theme.

Posted: Wednesday 12 April 2017 22:46
by 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
Private mode.png (150 KiB) Viewed 4824 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
Dashboard.png (143.59 KiB) Viewed 4823 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!

Re: New "progress" theme.

Posted: Thursday 13 April 2017 21:06
by 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.

Re: New "progress" theme.

Posted: Thursday 13 April 2017 23:26
by 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.

Re: New "progress" theme.

Posted: Friday 14 April 2017 16:23
by Bikey
blauwebuis wrote:@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
Switches.png (73.6 KiB) Viewed 4751 times

Re: New "progress" theme.

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

Re: New "progress" theme.

Posted: Sunday 16 April 2017 17:53
by 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
Dashboard.png (51.38 KiB) Viewed 4703 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
switches dark.png (46.95 KiB) Viewed 4703 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 :?

Re: New "progress" theme.

Posted: Sunday 16 April 2017 19:36
by 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.

Re: New "progress" theme.

Posted: Sunday 16 April 2017 20:04
by htilburgs
Bikey wrote: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;
}

Re: New "progress" theme.

Posted: Monday 17 April 2017 13:13
by 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.

Re: New "progress" theme.

Posted: Monday 17 April 2017 23:18
by blauwebuis
Having some fun, experimenting with adding data visualisation.

Image

Re: New "progress" theme.

Posted: Tuesday 18 April 2017 12:48
by htilburgs
Nice!