Page 1 of 2
Definition stationclock in css
Posted: Monday 07 December 2020 20:05
by Enz0jacco
hi guys, (Lokonli probably

)
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

)
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

Re: Definition stationclock in css
Posted: Tuesday 08 December 2020 17:17
by Lokonli

- 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 (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
