SwissRailwayClockDyn

Swiss Railway Clock with bouncing Minute digit

Average rating: 5.0 (3 votes) Log in to vote

Benjamin Fehr - Show more from this author
EfficientBizz GmbH
http://www.efficientbizz.com

Sample input:

WebViewer with SwissRailwayClockDyn

Sample output:

The iconic Swiss Railway Clock in a WebViewer. Automatically sized, with bouncing Minute digit

Function definition: (Copy & paste into FileMaker's Edit Custom Function window)

/*
SwissRailwayClockDyn
Otmar Kramis - Lucerne University
Benjamin Fehr, EfficientBizz GmbH
JS by Roland Ritz https://github.com/RolandR

For the resizing to work, the web viewer's object name has to be "clock" and for accessing the time set buttons, "allow interaction..." needs to be enabled...
Klick auf Uhr um Zeit zu setzen, Shift + Klick  auf "Set Time" um wieder auf Systemzeit zurückzustellen - FileMaker Implementation Otmar Kramis
*/


Let ( [

_size = 440 / 560 * Min ( GetLayoutObjectAttribute ( "clock" ; "width" )  ; GetLayoutObjectAttribute ( "clock" ; "height" ) )

; _html = "data:text/html,
<!DOCTYPE html>¶
<html>¶
	<head>¶
		<meta charset='UTF-8'>¶
		<style>¶
			*{¶
				box-sizing: border-box;¶
				margin: 0px;¶
				padding: 0px;¶
			}¶
			body{¶
				font-family: sans-serif;¶
				padding: 20px;¶
			}¶
			h1{¶
				margin: 0px 0px 20px 0px;¶
			}¶
			div{¶
				/*outline: 1px #AAAAAA solid;*/¶
			}¶
			#uhr-200px{¶
				width: 212px;¶
				height: 212px;¶
				position: absolute;¶
				top: 234px;¶
				left: 452px;¶
			}¶
			#big{¶
				width: <size>px;¶
				height: <size>px;¶
			}¶
			input{¶
				width: 100px;¶
				margin-top: 20px;¶
			}¶
			input, button{¶
				height: 30px;¶
				padding: 3px 5px;¶
				font-size: 16px;¶
				display: inline-block;¶
			}¶
		</style>	¶
	</head>¶
	<body>¶
		<!--div id='uhr-200px'>¶
		</div-->¶
		<div id='big'>¶
		</div>¶
		<br />¶
		<!—div id='debug'>¶
		</div—>¶
¶
		<input type='text' id='setTimeInput' value='10:10:00' /> <button id='setTimeButton'>Set Time</button>¶
¶
		<script>¶
		¶
¶
¶
/*  By Roland Rytz */¶
¶
¶
function Bahnhofsuhr(containerId, args){¶
¶
	if(typeof containerId != 'string' || containerId === ''){¶
		console.error('Bahnhofsuhr: No html element ID provided for container, aborting.\nUsage: Bahnhofsuhr(string containerID, optional object arguments)');¶
		return null;¶
	}¶
¶
	var container = document.getElementById(containerId);¶
¶
	if(container === null){¶
		console.error('Bahnhofsuhr: Could not find html element with id '+containerId+', aborting.\nUsage: Bahnhofsuhr(string containerID, optional object arguments)');¶
		return null;¶
	}¶
¶
	¶
¶
	args = args === undefined ? {} : args;¶
¶
	/*  RGB color of the clock face */¶
	var backgroundColor = 		args.backgroundColor 		=== undefined ? '#FAFAFA' : args.backgroundColor;¶
	¶
	/*  RGB color of the minute/hour hands and the minute indices */¶
	var foregroundColor = 		args.foregroundColor 		=== undefined ? 'rgb(62, 62, 62)' : args.foregroundColor;¶
	¶
	/*  RGB color of the seconds hand */¶
	var secondsColor = 		args.secondsColor 			=== undefined ? 'rgb(223, 62, 89)' : args.secondsColor;¶
	¶
	/*  Width of the larger indices in % of the clock diameter */¶
	var fiveMinuteStepWidth = 	args.fiveMinuteStepWidth 	=== undefined ? 3.5 : args.fiveMinuteStepWidth;¶
	¶
	/*  Width of the smaller indices in % of the clock diameter */¶
	var minuteStepWidth = 		args.minuteStepWidth 		=== undefined ? 1.4 : args.minuteStepWidth;¶
	¶
	/*  Distance of the indices to the face's outer border in % of the clock diameter */¶
	var stepPadding = 			args.stepPadding 			=== undefined ? 1.5 : args.stepPadding;¶
	¶
	/*  Length of the larger indices in % of the clock diameter */¶
	var fiveMinuteStepLength = 	args.fiveMinuteStepLength 	=== undefined ? 12 : args.fiveMinuteStepLength;¶
	¶
	/*  Length of the smaller indices in % of the clock diameter */¶
	var minuteStepLength = 		args.minuteStepLength 		=== undefined ? 3.5 : args.minuteStepLength;¶
	¶
	/*  The hour hand trapezoid's side closest to the center in % of the clock diameter */¶
	var hourHandInnerWidth = 	args.hourHandInnerWidth 	=== undefined ? 6.4 : args.hourHandInnerWidth;¶
	¶
	/*  The hour hand trapezoid's far side from the center in % of the clock diameter */¶
	var hourHandOuterWidth = 	args.hourHandOuterWidth 	=== undefined ? 5.2 : args.hourHandOuterWidth;¶
	¶
	/*  The hour hand's length in % of the clock diameter */¶
	var hourHandLength = 		args.hourHandLength 		=== undefined ? 44 : args.hourHandLength;¶
	¶
	/*  Distance from the inner end of the hour hand to the face's center */¶
	var hourHandPivot = 		args.hourHandPivot 			=== undefined ? 12 : args.hourHandPivot;¶
	¶
	/*  The minute hand trapezoid's side closest to the center in % of the clock diameter */¶
	var minuteHandInnerWidth = 	args.minuteHandInnerWidth 	=== undefined ? 5.2 : args.minuteHandInnerWidth;¶
	¶
	/*  The minute hand trapezoid's far side from the center in % of the clock diameter */¶
	var minuteHandOuterWidth = 	args.minuteHandOuterWidth 	=== undefined ? 3.6 : args.minuteHandOuterWidth;¶
	¶
	/*  Distance from the outer end of the minute hand to the face's center in % of its length */¶
	var minuteHandLength = 		args.minuteHandLength 		=== undefined ? 58 : args.minuteHandLength;¶
	¶
	/*  Distance from the inner end of the minute hand to the face's center */¶
	var minuteHandPivot = 		args.minuteHandPivot 		=== undefined ? 12 : args.minuteHandPivot;¶
	¶
	/*  Total length of the seconds hand */¶
	var secondsHandLength = 	args.secondsHandLength 		=== undefined ? 52.2 : args.secondsHandLength;¶
	¶
	/*  Width of the narrow part of the seconds hand */¶
	var secondsHandWidth = 		args.secondsHandWidth 		=== undefined ? 1.4 : args.secondsHandWidth;¶
	¶
	/*  Radius of the circle on the tip of the seconds hand */¶
	var secondsHandRadius = 	args.secondsHandRadius 		=== undefined ? 5.25 : args.secondsHandRadius;¶
	¶
	/*  Distance from the shorter end of the seconds hand to the face's center */¶
	var secondsHandPivot = 		args.secondsHandPivot 		=== undefined ? 16.5 : args.secondsHandPivot;¶
	¶
	/*  How long the seconds hand will stop at a full minute, in milliseconds */¶
	var minuteGap = 			args.minuteGap 				=== undefined ? 2000 : args.minuteGap;¶
	¶
	/*  How long it takes the minutes hand to jump to the next minute, in milliseconds */¶
	var minuteHandJumpDuration =args.minuteHandJumpDuration === undefined ? 5000 : args.minuteHandJumpDuration;¶
¶
	/*  Show shadows from hands, true or false */¶
	var showShadow =			args.showShadow 			=== undefined ? true : args.showShadow;¶
¶
	/*  X offset of the shadows, in percent of the clock diameter */¶
	var shadowXOffset =			args.shadowXOffset 			=== undefined ? 1.5 : args.shadowXOffset;¶
¶
	/*  Y offset of the shadows, in percent of the clock diameter */¶
	var shadowYOffset =			args.shadowYOffset 			=== undefined ? 2.5 : args.shadowYOffset;¶
¶
	/*  Blurring of the shadows, in percent of the clock diameter */¶
	var shadowBlur =			args.shadowBlur 			=== undefined ? 1 : args.shadowBlur;¶
¶
	/*  Shadow color */¶
	var shadowColor =			args.shadowColor 			=== undefined ? 'rgba(0, 0, 20, 0.4)' : args.shadowColor;¶
¶
	/*  Debug mode */¶
	var debugMode =				args.debugMode 				=== undefined ? false : args.debugMode;¶
¶
	/*  Show border around clock face, true or false */¶
	var showBorder =			args.showBorder 			=== undefined ? false : args.showBorder;¶
¶
	/*  Border width, in percent of clock diameter */¶
	var borderWidth =			args.borderWidth 			=== undefined ? 2.5 : args.borderWidth;¶
¶
	/*  Border color  #999999*/¶
	var borderColor =			args.borderColor 			=== undefined ? '#000000' : args.borderColor;¶
¶
	/*  Show Logo (or any image) on the clock face */¶
	var showLogo =				args.showLogo 				=== undefined ? false : args.showLogo;¶
¶
	/*  Path of Logo file */¶
	var logoPath =				args.logoPath 				=== undefined ? './mobatime-logo.svg' : args.logoPath;¶
¶
	/*  Logo position from top, in percent of clock diameter */¶
	var logoTop =				args.logoTop 				=== undefined ? 65 : args.logoTop;¶
¶
	/*  Logo width, in percent of clock diameter */¶
	var logoWidth =				args.logoWidth 				=== undefined ? 20 : args.logoWidth;¶
¶
	/*  Allow clock to be displayed in fullscreen */¶
	var fullscreenable =		args.fullscreenable 		=== undefined ? false : args.fullscreenable;¶
¶
	/*  Background color when fullscreen */¶
	var fullscreenBackground =	args.fullscreenBackground 	=== undefined ? '#FFFFFF' : args.fullscreenBackground;¶
¶
¶
	var faceCanvas = document.createElement('canvas');¶
	var handsCanvas = document.createElement('canvas');¶
	/* handsCanvas.style.willChange = 'transform'; */¶
¶
	var innerContainer = document.createElement('div');¶
	/* innerContainer.style.willChange = 'transform'; */¶
	¶
	handsCanvas.style.position = 'absolute';¶
	faceCanvas.style.position = 'absolute';¶
¶
	innerContainer.appendChild(faceCanvas);¶
¶
	var logo = document.createElement('img');¶
	if(showLogo){¶
		logo.src = logoPath;¶
		logo.style.position = 'absolute';¶
		innerContainer.appendChild(logo);¶
	}¶
¶
	innerContainer.appendChild(handsCanvas);¶
	container.appendChild(innerContainer);¶
¶
	var timeOffset = 0; /*  is changed when setTime is called */¶
¶
	var defaultSize = 100; /*  Use as reference size, then scale everything according to clockDiameter. */¶
	var center = defaultSize / 2;¶
	var clockDiameter = 0;¶
¶
	var renderBorderWidth;¶
	¶
	var handsCtx = handsCanvas.getContext('2d');¶
	var faceCtx = faceCanvas.getContext('2d');¶
	¶
	/*  Scale */¶
	var scaleFactor = 0;¶
¶
	var fullscreen = false;¶
	var defaultContainerPosition = container.style.position || 'static';¶
	var defaultWidth = container.style.width;¶
	var defaultHeight = container.style.height;¶
	var defaultBackground = container.style.backgroundColor;¶
	var defaultPaddingTop = container.style.paddingTop || '0px';¶
	var defaultPaddingLeft = container.style.paddingLeft || '0px';¶
	var defaultPaddingRight = container.style.paddingRight || '0px';¶
	var defaultPaddingBottom = container.style.paddingBottom || '0px';¶
¶
	if(fullscreenable){¶
		container.style.cursor = 'pointer';¶
		¶
		container.addEventListener('click', function(){¶
			if(!fullscreen){¶
				goFullscreen();¶
			} else {¶
				leaveFullscreen();¶
			}¶
		});¶
¶
		window.addEventListener('keydown', function(e){¶
			if(e.code == 'Escape'){¶
				leaveFullscreen();¶
			}¶
		});¶
¶
		window.addEventListener('resize', function(e){¶
			if(fullscreen){¶
				scale();¶
			}¶
		});¶
¶
		var goFullscreen = function(){¶
¶
			innerContainer.style.transitionProperty = 'margin-left';¶
			innerContainer.style.transitionDuration = '300ms';¶
			innerContainer.style.transitionFunction = 'ease-out';¶
			¶
			container.style.top = '0px';¶
			container.style.left = '0px';¶
			container.style.right = '0px';¶
			container.style.bottom = '0px';¶
			container.style.width = 'auto';¶
			container.style.height = 'auto';¶
			container.style.paddingTop = '10px';¶
			container.style.paddingLeft = '10px';¶
			container.style.paddingRight = '10px';¶
			container.style.paddingBottom = '10px';¶
			container.style.backgroundColor = fullscreenBackground;¶
			container.style.position = 'absolute';¶
			fullscreen = true;¶
			scale();¶
		}¶
¶
		var leaveFullscreen = function(){¶
			innerContainer.style.transitionProperty = 'none';¶
			innerContainer.style.transitionDuration = '0ms';¶
			¶
			container.style.position = defaultContainerPosition;¶
			container.style.width = defaultWidth;¶
			container.style.height = defaultHeight;¶
			container.style.backgroundColor = defaultBackground;¶
			container.style.paddingTop = defaultPaddingTop;¶
			container.style.paddingLeft = defaultPaddingLeft;¶
			container.style.paddingRight = defaultPaddingRight;¶
			container.style.paddingBottom = defaultPaddingBottom;¶
			fullscreen = false;¶
			scale();¶
		}¶
	}¶
	¶
	/* setTime(1530106317561); */¶
	scale();¶
	animationLoop();¶
¶
	/* Set time to be displayed, in milliseconds since January 1, 1970, 00:00:00 UTC */¶
	function setTime(newTime){¶
		var currentTime = Date.now();¶
		timeOffset = newTime - currentTime;¶
	}¶
¶
	function scale(){¶
		¶
		var containerHeight = container.clientHeight;¶
		var containerWidth = container.clientWidth;¶
		¶
		if(getComputedStyle){¶
			var computedStyle = getComputedStyle(container);¶
			containerHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);¶
			containerWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);¶
		}¶
¶
		var marginTop = 0;¶
		var marginLeft = 0;¶
		¶
		if(containerWidth > containerHeight){¶
			clockDiameter = containerHeight;¶
			marginLeft = (containerWidth - containerHeight)/2;¶
			marginTop = 0;¶
		} else {¶
			clockDiameter = containerWidth;¶
			marginTop = (containerHeight - containerWidth)/2;¶
			marginLeft = 0;¶
		}¶
¶
		innerContainer.style.marginLeft = marginLeft + 'px';¶
		innerContainer.style.marginTop = marginTop + 'px';¶
		¶
		innerContainer.style.width = (containerWidth - 2*marginLeft) + 'px';¶
		innerContainer.style.height = (containerHeight - 2*marginTop) + 'px';¶
¶
		faceCanvas.width = clockDiameter;¶
		faceCanvas.height = clockDiameter;¶
		handsCanvas.width = clockDiameter;¶
		handsCanvas.height = clockDiameter;¶
¶
		if(showLogo){¶
			var width = (logoWidth/100)*clockDiameter;¶
			logo.style.width = width +'px';¶
			logo.style.marginTop = ((logoTop/100)*clockDiameter) + 'px';¶
			logo.style.marginLeft = (clockDiameter/2 - width/2) + 'px';¶
		}¶
¶
		if(showBorder){¶
			var borderScale = clockDiameter / (clockDiameter*2*(borderWidth/100));¶
			clockDiameter -= clockDiameter / borderScale;¶
			renderBorderWidth = borderWidth + borderWidth / (borderScale - 1);¶
			center = defaultSize/2 + renderBorderWidth;¶
		}¶
¶
		scaleFactor = clockDiameter/defaultSize;¶
¶
		if(showShadow){¶
			var xOffset = (shadowXOffset / 100) * clockDiameter;¶
			var yOffset = (shadowYOffset / 100) * clockDiameter;¶
			var blur = (shadowBlur / 100) * clockDiameter;¶
			var shadow = 'drop-shadow('+xOffset+'px '+yOffset+'px '+blur+'px '+shadowColor+')';¶
			handsCanvas.style.filter = shadow;¶
			handsCanvas.style.WebkitFilter = shadow;¶
			handsCanvas.style.MozFilter = shadow;¶
		}¶
¶
		renderClockFace();¶
	}¶
¶
	function renderClockFace(){¶
		faceCtx.fillStyle = foregroundColor;¶
		faceCtx.scale(scaleFactor, scaleFactor);¶
		faceCtx.save();¶
		¶
		renderClockCircle();¶
		renderFiveMinuteSteps();¶
		renderMinuteSteps();¶
	}¶
		¶
	/*  Render basic circle */¶
	function renderClockCircle(){¶
		faceCtx.save();¶
		faceCtx.beginPath();¶
		¶
		faceCtx.fillStyle = backgroundColor;¶
		¶
		if(showBorder){¶
			faceCtx.beginPath();¶
			faceCtx.arc(¶
				center,¶
				center,¶
				defaultSize/2 + renderBorderWidth/2,¶
				0,¶
				2 * Math.PI,¶
				false¶
			);¶
			faceCtx.strokeStyle = borderColor;¶
			faceCtx.lineWidth = renderBorderWidth;¶
			faceCtx.fill();¶
			faceCtx.stroke();¶
			¶
		} else {¶
			faceCtx.arc(¶
				center,¶
				center,¶
				defaultSize/2,¶
				0,¶
				2 * Math.PI,¶
				false¶
			);¶
			faceCtx.fill();¶
		}¶
		¶
		faceCtx.restore();¶
	}¶
		¶
	/*  Render five minute steps */¶
	function renderFiveMinuteSteps(){¶
		faceCtx.translate(¶
			center,¶
			center¶
		);¶
		¶
		for(var i = 0; i < 12; i++){¶
			faceCtx.save();¶
			faceCtx.translate(¶
				defaultSize/2 - fiveMinuteStepLength/2 - stepPadding,¶
				0¶
			);¶
			¶
			faceCtx.fillRect(¶
				0-fiveMinuteStepLength/2,¶
				0-fiveMinuteStepWidth/2,¶
				fiveMinuteStepLength,¶
				fiveMinuteStepWidth¶
			);¶
			faceCtx.restore();¶
	  ¶
			faceCtx.rotate(Math.PI / 6);¶
		}¶
	}¶
		¶
	/*  Render minute steps */¶
	function renderMinuteSteps(){¶
		for(var i = 0; i < 60; i++){¶
			if(i%5 != 0){¶
				faceCtx.save();¶
				faceCtx.translate(¶
					defaultSize/2 - minuteStepLength/2 - stepPadding,¶
					0¶
				);¶
				¶
				faceCtx.fillRect(¶
					0-minuteStepLength/2,¶
					0-minuteStepWidth/2,¶
					minuteStepLength,¶
					minuteStepWidth¶
				);¶
				faceCtx.restore();¶
			}¶
			faceCtx.rotate(Math.PI / 30);¶
		}¶
	}¶
		¶
	/*  Display on visible canvas */¶
	function render(){¶
		¶
		var currentdate = new Date(Date.now() + timeOffset); ¶
		var currentMinute = currentdate.getMinutes();¶
		var currentSecond = currentdate.getSeconds();¶
		var currentMillisecond = currentSecond*1000 + currentdate.getMilliseconds() + (performance.now()%1);¶
		var currentHour = currentdate.getHours()*3600 + currentMinute*60 + currentSecond;¶
		¶
		handsCtx.clearRect(0, 0, handsCanvas.width, handsCanvas.height);¶
		¶
		handsCtx.save();¶
		handsCtx.scale(scaleFactor, scaleFactor);¶
		handsCtx.translate(center, center);¶
		¶
		handsCtx.lineWidth = 1/scaleFactor;¶
		¶
		renderHourHand();¶
		renderMinutesHand();¶
		renderSecondsHand();¶
		¶
		handsCtx.restore();¶
		¶
		function renderSecondsHand(){¶
			handsCtx.save();¶
		¶
			var secondsDegree = (currentMillisecond/(60000 - minuteGap)) * 2 * Math.PI;¶
			if(secondsDegree > 2*Math.PI){¶
				secondsDegree = 2*Math.PI;¶
			}¶
			¶
			handsCtx.rotate(secondsDegree + 1.5*Math.PI);¶
		¶
			handsCtx.fillStyle = secondsColor;¶
			¶
			handsCtx.beginPath();¶
			¶
			handsCtx.rect(¶
				-secondsHandPivot,¶
				-secondsHandWidth/2,¶
				 secondsHandLength-secondsHandRadius,¶
				 secondsHandWidth¶
			);¶
			¶
			handsCtx.moveTo(¶
				secondsHandLength - secondsHandPivot,¶
				0¶
			);¶
			handsCtx.arc(¶
				secondsHandLength - secondsHandRadius - secondsHandPivot,¶
				0,¶
				secondsHandRadius,¶
				0,¶
				2 * Math.PI,¶
				false¶
			);¶
			handsCtx.fill();¶
			handsCtx.restore();¶
		}¶
		¶
		function renderMinutesHand(){¶
			handsCtx.save();¶
			¶
			var minutesDegree = currentMinute/60 * 2*Math.PI;¶
¶
			if(currentMillisecond < minuteHandJumpDuration){¶
				minutesDegree = minutesDegree¶
					- (1/60*2*Math.PI)¶
					+ (1/60*2*Math.PI)¶
					*(¶
						1 - Math.pow(¶
							(0-currentMillisecond+minuteHandJumpDuration)¶
							/minuteHandJumpDuration¶
						, 20)¶
						*Math.cos(currentMillisecond*(0.03))¶
				);¶
			}¶
			¶
			handsCtx.rotate(minutesDegree + 1.5*Math.PI);¶
			¶
			handsCtx.fillStyle = foregroundColor;¶
			handsCtx.beginPath();¶
			handsCtx.moveTo(¶
				-minuteHandPivot,¶
				-minuteHandInnerWidth/2¶
			);¶
			handsCtx.lineTo(¶
				minuteHandLength - minuteHandPivot,¶
				-minuteHandOuterWidth/2¶
			);¶
			handsCtx.lineTo(¶
				minuteHandLength - minuteHandPivot,¶
				minuteHandOuterWidth/2¶
			);¶
			handsCtx.lineTo(¶
				-minuteHandPivot,¶
				minuteHandInnerWidth/2¶
			);¶
			handsCtx.closePath();¶
			¶
			handsCtx.fill();¶
			¶
			handsCtx.restore();¶
		}¶
		¶
		function renderHourHand(){¶
			handsCtx.save();¶
			¶
			var hoursDegree = currentHour/(12*3600) * 2*Math.PI;¶
			¶
			handsCtx.rotate(hoursDegree + 1.5*Math.PI);¶
			¶
			handsCtx.fillStyle = foregroundColor;¶
			handsCtx.beginPath();¶
			handsCtx.moveTo(¶
				-hourHandPivot,¶
				-hourHandInnerWidth/2¶
			);¶
			handsCtx.lineTo(¶
				hourHandLength - hourHandPivot,¶
				-hourHandOuterWidth/2¶
			);¶
			handsCtx.lineTo(¶
				hourHandLength - hourHandPivot,¶
				hourHandOuterWidth/2¶
			);¶
			handsCtx.lineTo(¶
				-hourHandPivot,¶
				hourHandInnerWidth/2¶
			);¶
			handsCtx.closePath();¶
			¶
			handsCtx.fill();¶
			¶
			handsCtx.restore();¶
		}¶
¶
	}¶
	¶
	function animationLoop(){¶
		render();¶
		requestAnimationFrame(animationLoop);¶
	};¶
¶
	return {¶
		/* Fit clock to container size */¶
		scale: scale¶
¶
		/* Set time to be displayed, in milliseconds since January 1, 1970, 00:00:00 UTC */¶
		,setTime: setTime¶
	};¶
	¶
}¶
		</script>¶
		<script type='text/javascript'>¶
			/*var uhr = new Bahnhofsuhr('uhr-200px', {debugMode: false});*/¶
			var uhr2 = new Bahnhofsuhr('big', {debugMode: false, showBorder: true, showLogo: false, fullscreenable: true});¶
¶
			var setTimeInput = document.getElementById('setTimeInput');¶
			var setTimeButton = document.getElementById('setTimeButton');¶
¶
			setTimeInput.oninput = function(e){¶
				¶
				if(!checkDate(setTimeInput.value)){¶
					setTimeButton.disabled = true;¶
				} else {¶
					setTimeButton.disabled = false;¶
				}¶
			}¶
¶
			setTimeInput.onkeypress = function(e){¶
				if(e.code == 'Enter'){¶
					setTimeButton.onclick(e);¶
				}¶
			}¶
¶
			setTimeButton.onclick = function(e){¶
				¶
				if (e.shiftKey) {¶
					var date = new Date();¶
				} else {¶
					var date = checkDate(setTimeInput.value);¶
				}¶
¶
				if(date){¶
					/*uhr.setTime(date);*/¶
					uhr2.setTime(date);¶
				}¶
			}¶
¶
			function checkDate(dateString){¶
				var date = new Date();¶
				var time = dateString.split(':');¶
				¶
				date.setHours(time[0]*1);¶
				¶
				if(time[1]){¶
					date.setMinutes(time[1]*1);¶
				} else {¶
					date.setMinutes(0);¶
				}¶
				¶
				if(time[2]){¶
					date.setSeconds(time[2]*1);¶
				} else {¶
					date.setSeconds(0);¶
				}¶
¶
				if(time[3]){¶
					date.setMilliseconds(time[3]*1);¶
				} else {¶
					date.setMilliseconds(0);¶
				}¶
				¶
				if(!isNaN(date)){¶
					return date;¶
				} else {¶
					return false;¶
				}¶
			}¶
			¶
			function setFullScreen(){¶
				document.getElementById('big').click();¶
			};¶
			document.onload=setFullScreen();¶
		</script>¶
	</body>¶
</html>
"
] ;

Substitute ( _html 
; ["<size>" ; _size]
; ["¶" ; Char(13)] 
)

)

This is a refinement of the
SwissRailwayClock ( size )
https://www.briandunning.com/cf/2242
with a authentically bouncing Minute digit.

Main credits go to Otmar Kramis - Lucerne University.
https://community.filemaker.com/s/profile/0050H00000Bq8cVQAR
and
Roland Ritz (JavaScript)
https://github.com/RolandR

Comments

		MrWatson, www.fmworkmate.com May 21, 2019
You're mad - completely MAD! ...but it is SOOOO beautiful! :D

		MrWatson, www.fmworkmate.com May 21, 2019
I've always admired swiss railway clocks .. but wondered about the maths of them ... Do they do 360Â° in 59 seconds and then take a second to shift the minute hand?

		Benjamin Fehr, EfficientBizz GmbH May 21, 2019
You're right with your assumption: The speed is supposed to be 58,5 seconds per Round. see the Wiki: https://de.wikipedia.org/wiki/Schweizer_Bahnhofsuhr (german) Keep on mind that this clock was created back in 1944! As described, the Seconds digit runs faster than 1 round per minute, then rests until it gets a "sync" impulse from a central master-clock. Though the power supply in Switzerland runs on 50Hz. With a AC electric motor, this already makes it as precisely as the 50Hz are stable. You should also know that the power companies uses the power grid to attach some dedicated control signals for various purposes by frequency- (FM) OR Amplitude-Modulation (AM). So that's presumably the way the railway clocks get their sync-control. Back in 1944! As I mentioned before: When the SBB announces the departure Zurich - Berne for 9 past 10, it is 10:09h sharp. They really mean it! ;-) PS: Major credits go to Otmar Kramis and Roland Ritz! I'm just the guy who glued things together as a cf.

		Menno van Beek, Van Beek Zakelijke Software May 21, 2019
Awesome! The Dutch railways have a similar clock and always wanted one in my timecards. Thank you Otmar, Roland and Benjamin!

		Benjamin Fehr, EfficientBizz GmbH May 21, 2019
well, you know ;-) https://www.youtube.com/watch?v=XJMR4AlUYNc

		Otmar Kramis May 21, 2019
Thanks goes primarily to Roland Rytz https://github.com/RolandR, I've only done some work to make it play nicely with FileMakers web viewer, open maximised and scale on size change. The code can also be pasted direct to the web viewers url-calc-field. For the resizing to work, the web viewer's object name has to be "clock" and for accessing the time set buttons, "allow interaction..." needs to be enabled...

Note: these functions are not guaranteed or supported by BrianDunning.com. Please contact the individual developer with any questions or problems.

SwissRailwayClockDyn

Comments

Support this website.

Support this website.