Page 1 of 2

Definition stationclock in css

Posted: Monday 07 December 2020 20:05
by Enz0jacco
hi guys, (Lokonli probably :P)

I'm trying to make the stationclock bigger on the standby screen.
all I manage to do now is center the clock within the screen but i'm unable to make the clock bigger.
this is what i tried:

.standby .stationclock {
display: flex !important;
justify-content: center !important;
align-items: center !important;
height: 800px !important; }

it seems that the container in which the clock exists is getting bigger but not the clock itself.
am I forgetting something behind the .stationclock?

thnx again!

Re: Definition stationclock in css

Posted: Monday 07 December 2020 21:47
by Lokonli
Enz0jacco wrote: Monday 07 December 2020 20:05 hi guys, (Lokonli probably :P)

I'm trying to make the stationclock bigger on the standby screen.
all I manage to do now is center the clock within the screen but i'm unable to make the clock bigger.
this is what i tried:

.standby .stationclock {
display: flex !important;
justify-content: center !important;
align-items: center !important;
height: 800px !important; }

it seems that the container in which the clock exists is getting bigger but not the clock itself.
am I forgetting something behind the .stationclock?

thnx again!
Challenge accepted :)

It was not possible to set the size of the station clock.

I've changed that in latest beta.

By default the size of the stationclock will be the block width.
If needed, you can overrule the size by setting the block parameter 'size' of the station clock block.

Code: Select all

blocks['stationclock'] = {
  size: 100,
  width: 6
}

Re: Definition stationclock in css

Posted: Tuesday 08 December 2020 15:59
by Enz0jacco
thnx for the quick reply (as always) !

unfortunately this doesn't work.
just to be sure, this code is for the config.js right?

i deleted everything in css and just put your code in config.js.

Re: Definition stationclock in css

Posted: Tuesday 08 December 2020 16:54
by Lokonli
Did you update your Dashticz version?
(git pull)

Re: Definition stationclock in css

Posted: Tuesday 08 December 2020 17:06
by Enz0jacco
oops :P

Re: Definition stationclock in css

Posted: Tuesday 08 December 2020 17:17
by Lokonli
clocks.jpg
clocks.jpg (159.83 KiB) Viewed 1185 times
Spoiler: show

Code: Select all

blocks['stationclock'] = {
  width: 1,
};
blocks['stationclock2'] = {
  type: 'stationclock',
  width: 2,
};
blocks['stationclock3'] = {
  type: 'stationclock',
  width: 3,
};
blocks['stationclock6'] = {
  type: 'stationclock',
  width: 6,
};
blocks['stationclock12'] = {
  type: 'stationclock',
  width: 12,
};


var columns = {};

columns[1] = {};
columns[1]['blocks'] = [

  'stationclock',
  'stationclock2',
  'stationclock3',
  'stationclock6',
  {type: 'stationclock', width: 12, size: 50},
  {type: 'stationclock', width: 12, size: 250}
];
columns[1]['width'] = 6;

columns[2] = {};
columns[2]['blocks'] = ['stationclock12'];
columns[2]['width'] = 6;

Re: Definition stationclock in css

Posted: Tuesday 08 December 2020 17:27
by Lokonli
Fun fact:
As you can see the station clock is 2 seconds ahead of the digital time in the top bar.

The reason is:
The red second dial of the station clock will make a round in 58 seconds. At the whole minute it will wait two seconds to 'synchronize' the time again. :)

Re: Definition stationclock in css

Posted: Wednesday 09 December 2020 13:30
by Enz0jacco
Haha didn’t notice that one. But I use it on the standby screen anyway. Are there are other layout clocks available as well? The boss doesn’t think this clock is tastefull with the rest of the interior...


Sent from my iPad using Tapatalk

Re: Definition stationclock in css

Posted: Wednesday 09 December 2020 19:26
by HansieNL
Enz0jacco wrote: Wednesday 09 December 2020 13:30 Haha didn’t notice that one. But I use it on the standby screen anyway. Are there are other layout clocks available as well? The boss doesn’t think this clock is tastefull with the rest of the interior...


Sent from my iPad using Tapatalk
There's also a flipclock. You can add it by adding 'flipclock' to a column.

Re: Definition stationclock in css

Posted: Wednesday 09 December 2020 20:03
by madpatrick

Re: Definition stationclock in css

Posted: Wednesday 09 December 2020 20:55
by Lokonli
That's indeed the station clock that is used at the moment. I can make available the configuration parameters.

One of the following could also be implemented:
https://freefrontend.com/css-clocks/

Re: Definition stationclock in css

Posted: Wednesday 09 December 2020 21:14
by madpatrick
Those are real cool. !!
Great for the standby screen !

Re: Definition stationclock in css

Posted: Wednesday 09 December 2020 22:03
by Lokonli
ok, can I have your votes please :)

Re: Definition stationclock in css

Posted: Wednesday 09 December 2020 22:16
by madpatrick
I think these are the names as mentioned on the site
- WALL CLOCK
- SLIDE CLOCK
- CSS VARIABLE-POWERED CLOCK

Re: Definition stationclock in css

Posted: Thursday 10 December 2020 14:17
by HansieNL
I vote for these ones:
- CSS Clock by Nils Rasmusson
- Apple Watch Clock by Malik Dellidj
- CSS Variable-Powered Clock by Emily Hayman

Re: Definition stationclock in css

Posted: Thursday 10 December 2020 19:42
by Lokonli
Current set of clocks as of beta 3.6.9
clocks.jpg
clocks.jpg (68.78 KiB) Viewed 1104 times
Spoiler: show

Code: Select all

blocks['stationclock'] = {
  width: 3,
};
blocks['stationclock2'] = {
  type: 'stationclock',
  width: 3,
  boss: 'NoBoss',
  body: 4,
  secondhand: 0
};
blocks['stationclock3'] = {
  type: 'stationclock',
  width: 3,
  body: 0,
  dial: 0,
  secondhand: 1
};
blocks['stationclock4'] = {
  type: 'stationclock',
  width: 3,
  body: 3,
  dial: 1,
  boss: 'ViennaBoss',
  secondhandbehavior: 2
};
blocks['stationclock5'] = {
  type: 'stationclock',
  width: 3,
  boss: 'RedBoss' 
};

blocks['clock'] = {
    width: 4
}

blocks['flipclock'] = {
    width: 8
}

blocks['miniclock'] = {
  width: 4
}

var columns = {};

columns[1] = {};
columns[1]['blocks'] = [
  'stationclock',
  'stationclock2',
  'stationclock3',
  'stationclock4',
  'clock',
  'flipclock',
  'miniclock',

];

Next addition will be - CSS Variable-Powered Clock by Emily Hayman (2 votes)

Re: Definition stationclock in css

Posted: Thursday 10 December 2020 19:48
by Lokonli

Re: Definition stationclock in css

Posted: Friday 11 December 2020 13:09
by Chris12
Nice aditions!

I realy like the:
- The QLOCKTWO
- SVG Clock UI
- CSS Rotary Clock
- Analog Digital Clock

Re: Definition stationclock in css

Posted: Friday 11 December 2020 13:21
by Lokonli
An additional clock requires at least two votes.

Sent from my SM-A320FL using Tapatalk


Re: Definition stationclock in css

Posted: Friday 11 December 2020 13:28
by Enz0jacco
I like the following 2:

12. SVG Clock UI
13. CSS Clock

:D