SwissRailwayClock ( size )

Swiss Railway Clock

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

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

Sample input:

WebViewer with
SwissRailwayClock[200]

Sample output:

The iconic Swiss Railway Clock in a WebViewer, 200x200px

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

/*
SwissRailwayClock[size]
station-clock.js
Copyright (c) 2010 Ruediger Appel
ludi at mac dot com

Benjamin Fehr, EfficientBizz GmbH
 http://www.efficientbizz.com 
*/


"<html>
  <head>

<script language=\"javascript\" type=\"text/javascript\">
StationClock.RoundBody      = 2;

StationClock.SwissStrokeDial      = 4;

StationClock.SwissHourHand   = 3;

StationClock.SwissMinuteHand   = 3;

StationClock.SwissSecondHand         = 4;

StationClock.NoBoss     = 0;

StationClock.BouncingMinuteHand        = 1;

StationClock.OverhastySecondHand       = 3;


function StationClock(clockId) {
  this.clockId = clockId; 
  this.radius  = 0;

  this.hourOffset = 0;
  
  this.body              = StationClock.RoundBody;
  this.bodyShadowColor   = \"rgba(0,0,0,0.5)\";
  this.bodyShadowOffsetX = 0.03;
  this.bodyShadowOffsetY = 0.03;
  this.bodyShadowBlur    = 0.06;
  
  this.dial              = StationClock.GermanStrokeDial;
  this.dialColor         = 'rgb(60,60,60)';
  
  this.hourHand          = StationClock.PointedHourHand;
  this.minuteHand        = StationClock.PointedMinuteHand;
  this.secondHand        = StationClock.HoleShapedSecondHand;
  this.handShadowColor   = 'rgba(0,0,0,0.3)';
  this.handShadowOffsetX = 0.03;
  this.handShadowOffsetY = 0.03;
  this.handShadowBlur    = 0.04;
	
	this.hourHandColor     = 'rgb(0,0,0)';
	this.minuteHandColor   = 'rgb(0,0,0)';
	this.secondHandColor   = 'rgb(200,0,0)';
  
  this.boss              = StationClock.NoBoss;
  this.bossShadowColor   = \"rgba(0,0,0,0.2)\";
  this.bossShadowOffsetX = 0.02;
  this.bossShadowOffsetY = 0.02;
  this.bossShadowBlur    = 0.03;
  
  this.minuteHandBehavoir = StationClock.CreepingMinuteHand;
  this.secondHandBehavoir = StationClock.OverhastySecondHand;
  
  this.minuteHandAnimationStep = 0;
  this.secondHandAnimationStep = 0;
  this.lastMinute = 0;
  this.lastSecond = 0;
};

StationClock.prototype.draw = function() {
  var clock = document.getElementById(this.clockId);
  if (clock) {
    var context = clock.getContext('2d');
    if (context) {
      this.radius = 0.75 * (Math.min(clock.width, clock.height) / 2);
      
      context.clearRect(0, 0, clock.width, clock.height);
      context.save();
      context.translate(clock.width / 2, clock.height / 2);
      
      if (this.body != StationClock.NoStrokeBody) {
        context.save();
        switch (this.body) {
    		  case StationClock.SmallWhiteBody:
    		    this.fillCircle(context, \"rgb(255,255,255)\", 0, 0, 1);
    		    break;
          case StationClock.RoundBody:
            this.fillCircle(context, \"rgb(255,255,255)\", 0, 0, 1.1);
            context.save();
            this.setShadow(context, this.bodyShadowColor, this.bodyShadowOffsetX, this.bodyShadowOffsetY, this.bodyShadowBlur);
            this.strokeCircle(context, \"rgb(0,0,0)\", 0, 0, 1.1, 0.07);
            context.restore();
            break;
          case StationClock.RoundGreenBody:
            this.fillCircle(context, \"rgb(235,236,212)\", 0, 0, 1.1);
            context.save();
            this.setShadow(context, this.bodyShadowColor, this.bodyShadowOffsetX, this.bodyShadowOffsetY, this.bodyShadowBlur);
            this.strokeCircle(context, \"rgb(180,180,180)\", 0, 0, 1.1, 0.2);
            context.restore();
            this.strokeCircle(context, \"rgb(29,84,31)\", 0, 0, 1.15, 0.1);
            context.save();
            this.setShadow(context, \"rgba(235,236,212,100)\", -0.02, -0.02, 0.09);
            this.strokeCircle(context, 'rgb(76,128,110)', 0, 0, 1.1, 0.08);
            context.restore();
            break;
    		  case StationClock.SquareBody:
            context.save();
            this.setShadow(context, this.bodyShadowColor, this.bodyShadowOffsetX, this.bodyShadowOffsetY, this.bodyShadowBlur);
            this.fillSquare(context, 'rgb(237,235,226)', 0, 0, 2.4);
            this.strokeSquare(context, 'rgb(38,106,186)', 0, 0, 2.32, 0.16);
            context.restore();
      			context.save();
      			this.setShadow(context, this.bodyShadowColor, this.bodyShadowOffsetX, this.bodyShadowOffsetY, this.bodyShadowBlur);
            this.strokeSquare(context, 'rgb(42,119,208)', 0, 0, 2.24, 0.08);
      			context.restore();
      			break;
          case StationClock.ViennaBody:
            context.save();
            this.fillSymmetricPolygon(context, 'rgb(156,156,156)', [[-1.2,1.2],[-1.2,-1.2]],0.1);
            this.fillPolygon(context, 'rgb(156,156,156)', 0,1.2 , 1.2,1.2 , 1.2,0);
            this.fillCircle(context, 'rgb(255,255,255)', 0, 0, 1.05, 0.08);
            this.strokeCircle(context, 'rgb(0,0,0)', 0, 0, 1.05, 0.01);
            this.strokeCircle(context, 'rgb(100,100,100)', 0, 0, 1.1, 0.01);
            this.fillPolygon(context, 'rgb(100,100,100)', 0.45,1.2 , 1.2,1.2 , 1.2,0.45);
            this.fillPolygon(context, 'rgb(170,170,170)', 0.45,-1.2 , 1.2,-1.2 , 1.2,-0.45);
            this.fillPolygon(context, 'rgb(120,120,120)', -0.45,1.2 , -1.2,1.2 , -1.2,0.45);
            this.fillPolygon(context, 'rgb(200,200,200)', -0.45,-1.2 , -1.2,-1.2 , -1.2,-0.45);
            this.strokeSymmetricPolygon(context, 'rgb(156,156,156)', [[-1.2,1.2],[-1.2,-1.2]],0.01);
            this.fillPolygon(context, 'rgb(255,0,0)', 0.05,-0.6 , 0.15,-0.6 , 0.15,-0.45 , 0.05,-0.45);
            this.fillPolygon(context, 'rgb(255,0,0)', -0.05,-0.6 , -0.15,-0.6 , -0.15,-0.45 , -0.05,-0.45);
            this.fillPolygon(context, 'rgb(255,0,0)', 0.05,-0.35 , 0.15,-0.35 , 0.15,-0.30 ,  0.10,-0.20 , 0.05,-0.20);
            this.fillPolygon(context, 'rgb(255,0,0)', -0.05,-0.35 , -0.15,-0.35 , -0.15,-0.30 ,  -0.10,-0.20 , -0.05,-0.20);
            context.restore();
            break;
            }
          context.restore();
      }
      
      for (var i = 0; i < 60; i++) {
        context.save();
        context.rotate(i * Math.PI / 30);
        switch (this.dial) {
          case StationClock.SwissStrokeDial:
            if ((i % 5) == 0) {
              this.strokeLine(context, this.dialColor, 0.0, -1.0, 0.0, -0.75, 0.07);
            } else {
              this.strokeLine(context, this.dialColor, 0.0, -1.0, 0.0, -0.92, 0.026);
            }
            break;
          case StationClock.AustriaStrokeDial:
            if ((i % 5) == 0) {
              this.fillPolygon(context, this.dialColor, -0.04, -1.0, 0.04, -1.0, 0.03, -0.78, -0.03, -0.78);
            } else {
              this.strokeLine(context, this.dialColor, 0.0, -1.0, 0.0, -0.94, 0.02);
            }
            break;
          case StationClock.GermanStrokeDial:
          	if ((i % 15) == 0) {
              this.strokeLine(context, this.dialColor, 0.0, -1.0, 0.0, -0.70, 0.08);
          	} else if ((i % 5) == 0) {
              this.strokeLine(context, this.dialColor, 0.0, -1.0, 0.0, -0.76, 0.08);
          	} else {
          	  this.strokeLine(context, this.dialColor, 0.0, -1.0, 0.0, -0.92, 0.036);
          	}
          	break;
          case StationClock.GermanHourStrokeDial:
          	if ((i % 15) == 0) {
              this.strokeLine(context, this.dialColor, 0.0, -1.0, 0.0, -0.70, 0.10);
          	} else if ((i % 5) == 0) {
              this.strokeLine(context, this.dialColor, 0.0, -1.0, 0.0, -0.74, 0.08);
          	}
          	break;
         case StationClock.ViennaStrokeDial:
            if ((i % 15) == 0) {
              this.fillPolygon(context, this.dialColor, 0.7,-0.1, 0.6,0, 0.7,0.1,  1,0.03,  1,-0.03);
            } else if ((i % 5) == 0) {
              this.fillPolygon(context, this.dialColor, 0.85,-0.06, 0.78,0, 0.85,0.06,  1,0.03,  1,-0.03);
            }
            this.fillCircle(context, this.dialColor, 0.0, -1.0, 0.03);
            break;
        }
        context.restore();
      }

      var time    = new Date();
      var millis  = time.getMilliseconds() / 1000.0;
      var seconds = time.getSeconds();
      var minutes = time.getMinutes();
      var hours   = time.getHours() + this.hourOffset;

      context.save();
      context.rotate(hours * Math.PI / 6 + minutes * Math.PI / 360);
      this.setShadow(context, this.handShadowColor, this.handShadowOffsetX, this.handShadowOffsetY, this.handShadowBlur);
      switch (this.hourHand) {
        case StationClock.BarHourHand:
          this.fillPolygon(context, this.hourHandColor, -0.05, -0.6, 0.05, -0.6, 0.05, 0.15, -0.05, 0.15);
      	  break;
        case StationClock.PointedHourHand:
          this.fillPolygon(context, this.hourHandColor, 0.0, -0.6,  0.065, -0.53, 0.065, 0.19, -0.065, 0.19, -0.065, -0.53);
          break;
        case StationClock.SwissHourHand:
          this.fillPolygon(context, this.hourHandColor, -0.05, -0.6, 0.05, -0.6, 0.065, 0.26, -0.065, 0.26);
          break;
        case StationClock.ViennaHourHand:
          this.fillSymmetricPolygon(context, this.hourHandColor, [[-0.02,-0.72],[-0.08,-0.56],[-0.15,-0.45],[-0.06,-0.30],[-0.03,0],[-0.1,0.2],[-0.05,0.23],[-0.03,0.2]]);
      }
      context.restore();
      
      context.save();
      switch (this.minuteHandBehavoir) {
        case StationClock.CreepingMinuteHand:
          context.rotate((minutes + seconds / 60) * Math.PI / 30);
  	      break;
        case StationClock.BouncingMinuteHand:
          context.rotate(minutes * Math.PI / 30);
  	      break;
        case StationClock.ElasticBouncingMinuteHand:
          if (this.lastMinute != minutes) {
            this.minuteHandAnimationStep = 3;
            this.lastMinute = minutes;
          }
          context.rotate((minutes + this.getAnimationOffset(this.minuteHandAnimationStep)) * Math.PI / 30);
          this.minuteHandAnimationStep--;
          break;
      }
      this.setShadow(context, this.handShadowColor, this.handShadowOffsetX, this.handShadowOffsetY, this.handShadowBlur);
      switch (this.minuteHand) {
        case StationClock.BarMinuteHand:
          this.fillPolygon(context, this.minuteHandColor, -0.05, -0.9, 0.035, -0.9, 0.035, 0.23, -0.05, 0.23);
      	  break;
        case StationClock.PointedMinuteHand:
          this.fillPolygon(context, this.minuteHandColor, 0.0, -0.93,  0.045, -0.885, 0.045, 0.23, -0.045, 0.23, -0.045, -0.885);
        	break;
        case StationClock.SwissMinuteHand:
        	this.fillPolygon(context, this.minuteHandColor, -0.035, -0.93, 0.035, -0.93, 0.05, 0.25, -0.05, 0.25);
        	break;
        case StationClock.ViennaMinuteHand:
          this.fillSymmetricPolygon(context, this.minuteHandColor, [[-0.02,-0.98],[-0.09,-0.7],[-0.03,0],[-0.05,0.2],[-0.01,0.4]]);
      }
      context.restore();
      
      context.save();
      switch (this.secondHandBehavoir) {
        case StationClock.OverhastySecondHand:
          context.rotate(Math.min((seconds + millis) * (60.0 / 58.5), 60.0) * Math.PI / 30);
          break;
        case StationClock.CreepingSecondHand:
          context.rotate((seconds + millis) * Math.PI / 30);
          break;
        case StationClock.BouncingSecondHand:
          context.rotate(seconds * Math.PI / 30);
          break;
        case StationClock.ElasticBouncingSecondHand:
          if (this.lastSecond != seconds) {
            this.secondHandAnimationStep = 3;
            this.lastSecond = seconds;
          }
          context.rotate((seconds + this.getAnimationOffset(this.secondHandAnimationStep)) * Math.PI / 30);
          this.secondHandAnimationStep--;
          break;
      }
      this.setShadow(context, this.handShadowColor, this.handShadowOffsetX, this.handShadowOffsetY, this.handShadowBlur);
      switch (this.secondHand) {
        case StationClock.BarSecondHand:
      	  this.fillPolygon(context, this.secondHandColor, -0.006, -0.92, 0.006, -0.92, 0.028, 0.23, -0.028, 0.23);
      	  break;
        case StationClock.HoleShapedSecondHand:
          this.fillPolygon(context, this.secondHandColor, 0.0, -0.9, 0.011, -0.889, 0.01875, -0.6, -0.01875, -0.6, -0.011, -0.889);
          this.fillPolygon(context, this.secondHandColor, 0.02, -0.4, 0.025, 0.22, -0.025, 0.22, -0.02, -0.4);
          this.strokeCircle(context, this.secondHandColor, 0, -0.5, 0.083, 0.066);
      	  break;
        case StationClock.NewHoleShapedSecondHand:
          this.fillPolygon(context, this.secondHandColor, 0.0, -0.95, 0.015, -0.935, 0.0187, -0.65, -0.0187, -0.65, -0.015, -0.935);
          this.fillPolygon(context, this.secondHandColor, 0.022, -0.45, 0.03, 0.27, -0.03, 0.27, -0.022, -0.45);
          this.strokeCircle(context, this.secondHandColor, 0, -0.55, 0.085, 0.07);
      	  break;
        case StationClock.SwissSecondHand:
      	  this.strokeLine(context, this.secondHandColor, 0.0, -0.6, 0.0, 0.35, 0.026);
      	  this.fillCircle(context, this.secondHandColor, 0, -0.64, 0.1);
          break;
        case StationClock.ViennaSecondHand:
          this.strokeLine(context, this.secondHandColor, 0.0, -0.6, 0.0, 0.35, 0.026);
          this.fillCircle(context, this.secondHandColor, 0, -0.64, 0.1);
          break;
      }
      context.restore();
      
      if (this.boss != StationClock.NoBoss) {
        context.save();
        this.setShadow(context, this.bossShadowColor, this.bossShadowOffsetX, this.bossShadowOffsetY, this.bossShadowBlur);
        switch (this.boss) {
    		  case StationClock.BlackBoss:
    		    this.fillCircle(context, 'rgb(0,0,0)', 0, 0, 0.1);
    		    break;
    		  case StationClock.RedBoss:
    		    this.fillCircle(context, 'rgb(220,0,0)', 0, 0, 0.06);
    		    break;
          case StationClock.ViennaBoss:
            this.fillCircle(context, 'rgb(0,0,0)', 0, 0, 0.07);
            break;
        }
        context.restore();
      }
      
      context.restore();
    }
  }
};

StationClock.prototype.getAnimationOffset = function(animationStep) {
  switch (animationStep) {
    case 3: return  0.2;
    case 2: return -0.1;
    case 1: return  0.05;
  }
  return 0;
};

StationClock.prototype.setShadow = function(context, color, offsetX, offsetY, blur) {
  if (color) {
  	context.shadowColor   = color;
  	context.shadowOffsetX = this.radius * offsetX;
  	context.shadowOffsetY = this.radius * offsetY;
  	context.shadowBlur    = this.radius * blur;
  }
};

StationClock.prototype.fillCircle = function(context, color, x, y, radius) {
  if (color) {
    context.beginPath();
    context.fillStyle = color;
    context.arc(x * this.radius, y * this.radius, radius * this.radius, 0, 2 * Math.PI, true);
    context.fill();
  }
};

StationClock.prototype.strokeCircle = function(context, color, x, y, radius, lineWidth) {
  if (color) {
    context.beginPath();
    context.strokeStyle = color;
    context.lineWidth = lineWidth * this.radius;
    context.arc(x * this.radius, y * this.radius, radius * this.radius, 0, 2 * Math.PI, true);
    context.stroke();
  }
};

StationClock.prototype.fillSquare = function(context, color, x, y, size) {
  if (color) {
    context.fillStyle = color;
    context.fillRect((x - size / 2) * this.radius, (y -size / 2) * this.radius, size * this.radius, size * this.radius);
  }
};

StationClock.prototype.strokeSquare = function(context, color, x, y, size, lineWidth) {
  if (color) {
    context.strokeStyle = color;
    context.lineWidth = lineWidth * this.radius;
    context.strokeRect((x - size / 2) * this.radius, (y -size / 2) * this.radius, size * this.radius, size * this.radius);
  }
};

StationClock.prototype.strokeLine = function(context, color, x1, y1, x2, y2, width) {
  if (color) {
	  context.beginPath();
	  context.strokeStyle = color;
	  context.moveTo(x1 * this.radius, y1 * this.radius);
	  context.lineTo(x2 * this.radius, y2 * this.radius);
	  context.lineWidth = width * this.radius;
	  context.stroke();
  }
};

StationClock.prototype.fillPolygon = function(context, color, x1, y1, x2, y2, x3, y3, x4, y4, x5, y5) {
  if (color) {
	  context.beginPath();
	  context.fillStyle = color;
	  context.moveTo(x1 * this.radius, y1 * this.radius);
	  context.lineTo(x2 * this.radius, y2 * this.radius);
	  context.lineTo(x3 * this.radius, y3 * this.radius);
	  context.lineTo(x4 * this.radius, y4 * this.radius);
	  if ((x5 != undefined) && (y5 != undefined)) {
	    context.lineTo(x5 * this.radius, y5 * this.radius);
	  }
	  context.lineTo(x1 * this.radius, y1 * this.radius);
	  context.fill();
  }
};

StationClock.prototype.fillSymmetricPolygon = function(context, color, points) {
    context.beginPath();
    context.fillStyle = color;
    context.moveTo(points[0][0] * this.radius, points[0][1] * this.radius);
    for (var i = 1; i < points.length; i++) {
      context.lineTo(points[i][0] * this.radius, points[i][1] * this.radius);
    }
    for (var i = points.length - 1; i >= 0; i--) {
      context.lineTo(0 - points[i][0] * this.radius, points[i][1] * this.radius);
    }
    context.lineTo(points[0][0] * this.radius, points[0][1] * this.radius);
    context.fill();
};

StationClock.prototype.strokeSymmetricPolygon = function(context, color, points, width) {
    context.beginPath();
    context.strokeStyle = color;
    context.moveTo(points[0][0] * this.radius, points[0][1] * this.radius);
    for (var i = 1; i < points.length; i++) {
      context.lineTo(points[i][0] * this.radius, points[i][1] * this.radius);
    }
    for (var i = points.length - 1; i >= 0; i--) {
      context.lineTo(0 - points[i][0] * this.radius, points[i][1] * this.radius);
    }
    context.lineTo(points[0][0] * this.radius, points[0][1] * this.radius);
    context.lineWidth = width * this.radius;
    context.stroke();
};

      var clock = new StationClock(\"clock\");
      clock.body = StationClock.RoundBody;
      clock.dial = StationClock.SwissStrokeDial;
      clock.hourHand = StationClock.SwissHourHand;
      clock.minuteHand = StationClock.SwissMinuteHand;
      clock.secondHand = StationClock.SwissSecondHand;
      clock.boss = StationClock.NoBoss;
      clock.minuteHandBehavoir = StationClock.BouncingMinuteHand;
      clock.secondHandBehavoir = StationClock.OverhastySecondHand;

      animate();

      function animate() {
        clock.draw();
        window.setTimeout(\"animate()\", 50);
      }

    </script>
	
  </head>
  
  <body>
    <div style=\"text-align: center; padding-top: 5px\">
      <canvas id=\"clock\" width=\"" & size & "\" height=\"" & size & "\">
        Fehlermeldung       
      </canvas>
    </div>
  </body>
  
</html>"

Find a nice description about history and function on Wikipedia:
https://en.wikipedia.org/wiki/Swiss_railway_clock

Comments

		Emmeuno May 20, 2019
Hi, i'm beginning Filemaker user, can you please explain how parse size parameter? Regards

		Benjamin Fehr, EfficientBizz GmbH May 20, 2019
as you see in my sample input "SwissRailwayClock[200]" This will size the clock with width AND height of 200 Pixels. Place a WV on your Layout and paste the cf as above into formula editor to get a 200x200px clock

		Emmeuno May 20, 2019
Hi Benjamin, thanks for answering. Can i change the WV in transparent background and alignment?

		Emmeuno May 20, 2019
Hi Benjamin, thanks for answering. Can i change the WV in transparent background and alignment?

		Benjamin Fehr, EfficientBizz GmbH May 20, 2019
No. This is html which wouldn't support transparent background at all. You should also know that a WV in FM is always predominant. Layering WV over other objects won't wrk. A WV stays always on top of all. If you want your SwissClock to adjust to your layouts background color, you have to get into the cf and change its dedicated attribute. There should be a attribute "Background color" somewhere in the JavaScript. At the end, you'll find the Tag with attributes for 'align' and 'padding'.

		Jason Maskell May 20, 2019
Very nice

		Benjamin Fehr, EfficientBizz GmbH May 21, 2019
When one developer challenges another: Otmar Kramis did some refinement with a JS by Roland Ritz https://github.com/RolandR. The clock will auto resize according to the size of the WV. No size-parameter needed. Also the bouncing Minute digit at every full minute makes you believe your standing at the gate of Zurich Central Station. SwissRailwayClockDyn https://www.briandunning.com/cf/2243 Don't miss other great contributions by Otmar such as the 'Resource-Calendar'. https://community.filemaker.com/s/profile/0050H00000Bq8cVQAR

		Benjamin Fehr, EfficientBizz GmbH May 21, 2019
check a dynamic version refined by Otmar Kramis: SwissRailwayClockDyn https://www.briandunning.com/cf/2243

		Fabrice Ricker, Kultur und Computer May 21, 2019
I really luv thisclock too! And it reminds me on my student years in ZÃ¼rich :-)

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

SwissRailwayClock ( size )

Comments

Support this website.

Support this website.