Clocks

Station Clock

This is an ‘old fashioned’ station clock. http://www.3quarks.com/en/StationClock

You can add the station clock to a column with:

columns[1]['blocks'] = ['stationclock'];

Block parameter

Parameter	Description
size	Size of the stationclock in pixels. The default size of the station clock is the column width. `200` The clock will have a width and height of 200 pixels
scale	Scale factor for the width of the clock. Should be smaller than 1 `0.75`: Scales the clock down to 75% (default `1` = 100%).
body	clock body (Uhrgehäuse)
dial	stroke dial (Zifferblatt)
hourhand	clock hour hand (Stundenzeiger)
minutehand	clock minute hand (Minutenzeiger)
secondhand	clock second hand (Sekundenzeiger)
boss	clock boss (Zeigerabdeckung)
minutehandbehavior	minute hand behavior
secondhandbehavior	second hand behavior

The value for all the configuration parameters can be found in the code block below:

// clock body (Uhrgehäuse)
StationClock.NoBody         = 0;
StationClock.SmallWhiteBody = 1;
StationClock.RoundBody      = 2;
StationClock.RoundGreenBody = 3;
StationClock.SquareBody     = 4;
StationClock.ViennaBody     = 5;

// stroke dial (Zifferblatt)
StationClock.NoDial               = 0;
StationClock.GermanHourStrokeDial = 1;
StationClock.GermanStrokeDial     = 2;
StationClock.AustriaStrokeDial    = 3;
StationClock.SwissStrokeDial      = 4;
StationClock.ViennaStrokeDial     = 5;

//clock hour hand (Stundenzeiger)
StationClock.PointedHourHand = 1;
StationClock.BarHourHand     = 2;
StationClock.SwissHourHand   = 3;
StationClock.ViennaHourHand  = 4;

//clock minute hand (Minutenzeiger)
StationClock.PointedMinuteHand = 1;
StationClock.BarMinuteHand     = 2;
StationClock.SwissMinuteHand   = 3;
StationClock.ViennaMinuteHand  = 4;

//clock second hand (Sekundenzeiger)
StationClock.NoSecondHand            = 0;
StationClock.BarSecondHand           = 1;
StationClock.HoleShapedSecondHand    = 2;
StationClock.NewHoleShapedSecondHand = 3;
StationClock.SwissSecondHand         = 4;

// clock boss (Zeigerabdeckung)
StationClock.NoBoss     = 0;
StationClock.BlackBoss  = 1;
StationClock.RedBoss    = 2;
StationClock.ViennaBoss = 3;

// minute hand behavoir
StationClock.CreepingMinuteHand        = 0;
StationClock.BouncingMinuteHand        = 1;
StationClock.ElasticBouncingMinuteHand = 2;

// second hand behavoir
StationClock.CreepingSecondHand        = 0;
StationClock.BouncingSecondHand        = 1;
StationClock.ElasticBouncingSecondHand = 2;
StationClock.OverhastySecondHand       = 3;

Config settings

To maintain backwards compatibility the station clock defaults can be set with the following config settings:

Settings	Description
boss_stationclock	shows hands red axis cover `'RedBoss'` `'NoBoss'` `'BlackBoss'` `'RedBoss'` `'ViennaBoss'`
hide_seconds_stationclock	`true` Hides second hand `false` Default. Show second hand.

Basic clock

This is the standard clock. You can add this clock to a column with:

columns[1]['blocks'] = ['basicclock'];

Or define a custom block as follows:

blocks['myclock'] = {
       type: 'basicclock'
}

columns[1]['blocks'] = ['myclock'];

Block parameter

Parameter	Description
width	block width `1 .. 12`: (default `12`).
size	Size of the basic clock in pixels. The default size of the basic clock is the column width. `200` The clock will have a width of 200 pixels
scale	Scale factor for the width of the clock. Should be smaller than 1 `0.75`: Scales the clock down to 75% (default `1` = 100%).

Flipclock

You can add the flipclock to a column with:

columns[1]['blocks'] = ['flipclock'];

Or define a custom block as follows:

blocks['myclock'] = {
       type: 'flipclock'
}

columns[1]['blocks'] = ['myclock'];

Block parameter

Parameter	Description
width	block width `1 .. 12`: (default `12`).
size	Size of the flipclock in pixels. The default size of the flip clock is the column width. `200` The clock will have a width of 200 pixels
scale	Scale factor for the width of the clock. Should be smaller than 1 `0.75`: Scales the clock down to 75% (default `1` = 100%).
showSeconds	`true`: (=default) Show seconds `false`: Hide seconds
clockFace	`24`: 24 hour clock `12`: 12 hour clock

Hayman clock

Clock by Emily Hayman. Design based off: https://dribbble.com/shots/2271565-Day-095-Time-is-Money

You can add the Hayman clock to a column with:

columns[1]['blocks'] = ['haymanclock'];

Or define a custom block as follows:

blocks['myclock'] = {
       type: 'haymanclock'
}

columns[1]['blocks'] = ['myclock'];

Block parameter

Parameter	Description
width	block width `1 .. 12`: (default `12`).
size	Size of the Hayman clock in pixels. The default size of the Hayman clock is the column width. `200` The clock will have a width of 200 pixels
scale	Scale factor for the width of the clock. Should be smaller than 1 `0.75`: Scales the clock down to 75% (default `1` = 100%).

Miniclock

You can add the miniclock to a column with:

columns[1]['blocks'] = ['miniclock'];

Usage

The clock types dtclock, stationclock and flipclock are responsive, meaning they will adapt the size to the block width.

Example code for the several clocks:

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' //'RedBoss' 'NoBoss' 'BlackBoss' 'RedBoss' 'ViennaBoss'
};

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',
];