Create a fully working clock using Cloudinary

Ever wanted to make your very own fully operational clock? This recipe would show how to create a dynamic clock in one URL. You could then insert the URL anywhere you want and have a fully working clock image that dynamically changes with the time. This clock leverages cloudinary's Overlay and powerful user variables which allows it to show an accurate hour based on the actual time.

for a dynamic analog clock, generated with Cloudinary transformations. This clock is compiled by three individual layers - one clock face two hands. The hands angles are determined by the hour and minute variables.

Ruby:
Copy to clipboard
cl_image_tag("clock_example/clock.png", :variables=>[["$minute", "50"], ["$hour", "1"], ["$ma", "$minute / 60 * 360"], ["$ha", "$hour / 12 * 360"]], :transformation=>[
  {:overlay=>"clock_example:small"},
  {:angle=>"$ha_add_$ma_div_12"},
  {:flags=>"layer_apply"},
  {:overlay=>"clock_example:big"},
  {:angle=>"$ma"},
  {:flags=>"layer_apply"},
  {:width=>550, :height=>550, :crop=>"crop"},
  {:quality=>"auto"}
  ])
PHP:
Copy to clipboard
cl_image_tag("clock_example/clock.png", array("variables"=>array("$minute"=>"50", "$hour"=>"1", "$ma"=>"$minute / 60 * 360", "$ha"=>"$hour / 12 * 360"), "transformation"=>array(
  array("overlay"=>"clock_example:small"),
  array("angle"=>"$ha_add_$ma_div_12"),
  array("flags"=>"layer_apply"),
  array("overlay"=>"clock_example:big"),
  array("angle"=>"$ma"),
  array("flags"=>"layer_apply"),
  array("width"=>550, "height"=>550, "crop"=>"crop"),
  array("quality"=>"auto")
  )))
Python:
Copy to clipboard
CloudinaryImage("clock_example/clock.png").image(variables={"$minute": "50", "$hour": "1", "$ma": "$minute / 60 * 360", "$ha": "$hour / 12 * 360"}, transformation=[
  {'overlay': "clock_example:small"},
  {'angle': "$ha_add_$ma_div_12"},
  {'flags': "layer_apply"},
  {'overlay': "clock_example:big"},
  {'angle': "$ma"},
  {'flags': "layer_apply"},
  {'width': 550, 'height': 550, 'crop': "crop"},
  {'quality': "auto"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("clock_example/clock.png", {variables: [["$minute", "50"], ["$hour", "1"], ["$ma", "$minute / 60 * 360"], ["$ha", "$hour / 12 * 360"]], transformation: [
  {overlay: "clock_example:small"},
  {angle: "$ha_add_$ma_div_12"},
  {flags: "layer_apply"},
  {overlay: "clock_example:big"},
  {angle: "$ma"},
  {flags: "layer_apply"},
  {width: 550, height: 550, crop: "crop"},
  {quality: "auto"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
.variables(variable("$minute","50"),variable("$hour","1"),variable("$ma","$minute / 60 * 360"),variable("$ha","$hour / 12 * 360")).chain()
  .overlay(new Layer().publicId("clock_example:small")).chain()
  .angle("$ha + $ma / 12").chain()
  .flags("layer_apply").chain()
  .overlay(new Layer().publicId("clock_example:big")).chain()
  .angle("$ma").chain()
  .flags("layer_apply").chain()
  .width(550).height(550).crop("crop").chain()
  .quality("auto")).imageTag("clock_example/clock.png");
JS:
Copy to clipboard
cloudinary.imageTag('clock_example/clock.png', {variables: [["$minute", "50"], ["$hour", "1"], ["$ma", "$minute / 60 * 360"], ["$ha", "$hour / 12 * 360"]], transformation: [
  {overlay: new cloudinary.Layer().publicId("clock_example:small")},
  {angle: "$ha_add_$ma_div_12"},
  {flags: "layer_apply"},
  {overlay: new cloudinary.Layer().publicId("clock_example:big")},
  {angle: "$ma"},
  {flags: "layer_apply"},
  {width: 550, height: 550, crop: "crop"},
  {quality: "auto"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("clock_example/clock.png", {variables: [["$minute", "50"], ["$hour", "1"], ["$ma", "$minute / 60 * 360"], ["$ha", "$hour / 12 * 360"]], transformation: [
  {overlay: new cloudinary.Layer().publicId("clock_example:small")},
  {angle: "$ha_add_$ma_div_12"},
  {flags: "layer_apply"},
  {overlay: new cloudinary.Layer().publicId("clock_example:big")},
  {angle: "$ma"},
  {flags: "layer_apply"},
  {width: 550, height: 550, crop: "crop"},
  {quality: "auto"}
  ]})
React:
Copy to clipboard
<Image publicId="clock_example/clock.png" >
  <Transformation overlay="clock_example:small" />
  <Transformation angle="$ha + $ma / 12" />
  <Transformation flags="layer_apply" />
  <Transformation overlay="clock_example:big" />
  <Transformation angle="$ma" />
  <Transformation flags="layer_apply" />
  <Transformation width="550" height="550" crop="crop" />
  <Transformation quality="auto" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="clock_example/clock.png" >
  <cld-transformation overlay="clock_example:small" />
  <cld-transformation angle="$ha + $ma / 12" />
  <cld-transformation flags="layer_apply" />
  <cld-transformation overlay="clock_example:big" />
  <cld-transformation angle="$ma" />
  <cld-transformation flags="layer_apply" />
  <cld-transformation width="550" height="550" crop="crop" />
  <cld-transformation quality="auto" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="clock_example/clock.png" >
  <cl-transformation overlay="clock_example:small">
  </cl-transformation>
  <cl-transformation angle="$ha + $ma / 12">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
  <cl-transformation overlay="clock_example:big">
  </cl-transformation>
  <cl-transformation angle="$ma">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
  <cl-transformation width="550" height="550" crop="crop">
  </cl-transformation>
  <cl-transformation quality="auto">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("clock_example:small")).Chain()
  .Angle("$ha + $ma / 12").Chain()
  .Flags("layer_apply").Chain()
  .Overlay(new Layer().PublicId("clock_example:big")).Chain()
  .Angle("$ma").Chain()
  .Flags("layer_apply").Chain()
  .Width(550).Height(550).Crop("crop").Chain()
  .Quality("auto")).BuildImageTag("clock_example/clock.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$minute","50"),variable("$hour","1"),variable("$ma","$minute / 60 * 360"),variable("$ha","$hour / 12 * 360")).chain()
  .overlay(new Layer().publicId("clock_example:small")).chain()
  .angle("$ha + $ma / 12").chain()
  .flags("layer_apply").chain()
  .overlay(new Layer().publicId("clock_example:big")).chain()
  .angle("$ma").chain()
  .flags("layer_apply").chain()
  .width(550).height(550).crop("crop").chain()
  .quality("auto")).generate("clock_example/clock.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("clock_example:small").chain()
  .setAngle("$ha + $ma / 12").chain()
  .setFlags("layer_apply").chain()
  .setOverlay("clock_example:big").chain()
  .setAngle("$ma").chain()
  .setFlags("layer_apply").chain()
  .setWidth(550).setHeight(550).setCrop("crop").chain()
  .setQuality("auto")).generate("clock_example/clock.png")!, cloudinary: cloudinary)
Clock

The requirements are 3 images of the same size (550px in my example) - for the clock face and both hands. Note that the hands need to have a transparent background and point to 12 o'clock.

The Clock face:

Ruby:
Copy to clipboard
cl_image_tag("clock_example/clock.png")
PHP:
Copy to clipboard
cl_image_tag("clock_example/clock.png")
Python:
Copy to clipboard
CloudinaryImage("clock_example/clock.png").image()
Node.js:
Copy to clipboard
cloudinary.image("clock_example/clock.png")
Java:
Copy to clipboard
cloudinary.url().imageTag("clock_example/clock.png");
JS:
Copy to clipboard
cloudinary.imageTag('clock_example/clock.png').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("clock_example/clock.png")
React:
Copy to clipboard
<Image publicId="clock_example/clock.png" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="clock_example/clock.png" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="clock_example/clock.png" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("clock_example/clock.png")
Android:
Copy to clipboard
MediaManager.get().url().generate("clock_example/clock.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("clock_example/clock.png")!, cloudinary: cloudinary)
The Clock face

The big Hand:

Ruby:
Copy to clipboard
cl_image_tag("clock_example/big.png")
PHP:
Copy to clipboard
cl_image_tag("clock_example/big.png")
Python:
Copy to clipboard
CloudinaryImage("clock_example/big.png").image()
Node.js:
Copy to clipboard
cloudinary.image("clock_example/big.png")
Java:
Copy to clipboard
cloudinary.url().imageTag("clock_example/big.png");
JS:
Copy to clipboard
cloudinary.imageTag('clock_example/big.png').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("clock_example/big.png")
React:
Copy to clipboard
<Image publicId="clock_example/big.png" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="clock_example/big.png" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="clock_example/big.png" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("clock_example/big.png")
Android:
Copy to clipboard
MediaManager.get().url().generate("clock_example/big.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("clock_example/big.png")!, cloudinary: cloudinary)
The Big hand

The small hand:

Ruby:
Copy to clipboard
cl_image_tag("clock_example/small.png")
PHP:
Copy to clipboard
cl_image_tag("clock_example/small.png")
Python:
Copy to clipboard
CloudinaryImage("clock_example/small.png").image()
Node.js:
Copy to clipboard
cloudinary.image("clock_example/small.png")
Java:
Copy to clipboard
cloudinary.url().imageTag("clock_example/small.png");
JS:
Copy to clipboard
cloudinary.imageTag('clock_example/small.png').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("clock_example/small.png")
React:
Copy to clipboard
<Image publicId="clock_example/small.png" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="clock_example/small.png" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="clock_example/small.png" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("clock_example/small.png")
Android:
Copy to clipboard
MediaManager.get().url().generate("clock_example/small.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("clock_example/small.png")!, cloudinary: cloudinary)
The Small hand

It gets two variables - for hours and minutes. Then, these variables will get translated to angles for the two hands. Once the hand layers are placed on top of the clock face, the end result is cropped to 550px again.

Ruby:
Copy to clipboard
cl_image_tag("clock_example/clock.png", :variables=>[["$minute", "50"], ["$hour", "1"], ["$ma", "$minute / 60 * 360"], ["$ha", "$hour / 12 * 360"]], :transformation=>[
  {:overlay=>"clock_example:small"},
  {:angle=>"$ha_add_$ma_div_12"},
  {:flags=>"layer_apply"},
  {:overlay=>"clock_example:big"},
  {:angle=>"$ma"},
  {:flags=>"layer_apply"},
  {:width=>550, :height=>550, :crop=>"crop"},
  {:quality=>"auto"}
  ])
PHP:
Copy to clipboard
cl_image_tag("clock_example/clock.png", array("variables"=>array("$minute"=>"50", "$hour"=>"1", "$ma"=>"$minute / 60 * 360", "$ha"=>"$hour / 12 * 360"), "transformation"=>array(
  array("overlay"=>"clock_example:small"),
  array("angle"=>"$ha_add_$ma_div_12"),
  array("flags"=>"layer_apply"),
  array("overlay"=>"clock_example:big"),
  array("angle"=>"$ma"),
  array("flags"=>"layer_apply"),
  array("width"=>550, "height"=>550, "crop"=>"crop"),
  array("quality"=>"auto")
  )))
Python:
Copy to clipboard
CloudinaryImage("clock_example/clock.png").image(variables={"$minute": "50", "$hour": "1", "$ma": "$minute / 60 * 360", "$ha": "$hour / 12 * 360"}, transformation=[
  {'overlay': "clock_example:small"},
  {'angle': "$ha_add_$ma_div_12"},
  {'flags': "layer_apply"},
  {'overlay': "clock_example:big"},
  {'angle': "$ma"},
  {'flags': "layer_apply"},
  {'width': 550, 'height': 550, 'crop': "crop"},
  {'quality': "auto"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("clock_example/clock.png", {variables: [["$minute", "50"], ["$hour", "1"], ["$ma", "$minute / 60 * 360"], ["$ha", "$hour / 12 * 360"]], transformation: [
  {overlay: "clock_example:small"},
  {angle: "$ha_add_$ma_div_12"},
  {flags: "layer_apply"},
  {overlay: "clock_example:big"},
  {angle: "$ma"},
  {flags: "layer_apply"},
  {width: 550, height: 550, crop: "crop"},
  {quality: "auto"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
.variables(variable("$minute","50"),variable("$hour","1"),variable("$ma","$minute / 60 * 360"),variable("$ha","$hour / 12 * 360")).chain()
  .overlay(new Layer().publicId("clock_example:small")).chain()
  .angle("$ha + $ma / 12").chain()
  .flags("layer_apply").chain()
  .overlay(new Layer().publicId("clock_example:big")).chain()
  .angle("$ma").chain()
  .flags("layer_apply").chain()
  .width(550).height(550).crop("crop").chain()
  .quality("auto")).imageTag("clock_example/clock.png");
JS:
Copy to clipboard
cloudinary.imageTag('clock_example/clock.png', {variables: [["$minute", "50"], ["$hour", "1"], ["$ma", "$minute / 60 * 360"], ["$ha", "$hour / 12 * 360"]], transformation: [
  {overlay: new cloudinary.Layer().publicId("clock_example:small")},
  {angle: "$ha_add_$ma_div_12"},
  {flags: "layer_apply"},
  {overlay: new cloudinary.Layer().publicId("clock_example:big")},
  {angle: "$ma"},
  {flags: "layer_apply"},
  {width: 550, height: 550, crop: "crop"},
  {quality: "auto"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("clock_example/clock.png", {variables: [["$minute", "50"], ["$hour", "1"], ["$ma", "$minute / 60 * 360"], ["$ha", "$hour / 12 * 360"]], transformation: [
  {overlay: new cloudinary.Layer().publicId("clock_example:small")},
  {angle: "$ha_add_$ma_div_12"},
  {flags: "layer_apply"},
  {overlay: new cloudinary.Layer().publicId("clock_example:big")},
  {angle: "$ma"},
  {flags: "layer_apply"},
  {width: 550, height: 550, crop: "crop"},
  {quality: "auto"}
  ]})
React:
Copy to clipboard
<Image publicId="clock_example/clock.png" >
  <Transformation overlay="clock_example:small" />
  <Transformation angle="$ha + $ma / 12" />
  <Transformation flags="layer_apply" />
  <Transformation overlay="clock_example:big" />
  <Transformation angle="$ma" />
  <Transformation flags="layer_apply" />
  <Transformation width="550" height="550" crop="crop" />
  <Transformation quality="auto" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="clock_example/clock.png" >
  <cld-transformation overlay="clock_example:small" />
  <cld-transformation angle="$ha + $ma / 12" />
  <cld-transformation flags="layer_apply" />
  <cld-transformation overlay="clock_example:big" />
  <cld-transformation angle="$ma" />
  <cld-transformation flags="layer_apply" />
  <cld-transformation width="550" height="550" crop="crop" />
  <cld-transformation quality="auto" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="clock_example/clock.png" >
  <cl-transformation overlay="clock_example:small">
  </cl-transformation>
  <cl-transformation angle="$ha + $ma / 12">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
  <cl-transformation overlay="clock_example:big">
  </cl-transformation>
  <cl-transformation angle="$ma">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
  <cl-transformation width="550" height="550" crop="crop">
  </cl-transformation>
  <cl-transformation quality="auto">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("clock_example:small")).Chain()
  .Angle("$ha + $ma / 12").Chain()
  .Flags("layer_apply").Chain()
  .Overlay(new Layer().PublicId("clock_example:big")).Chain()
  .Angle("$ma").Chain()
  .Flags("layer_apply").Chain()
  .Width(550).Height(550).Crop("crop").Chain()
  .Quality("auto")).BuildImageTag("clock_example/clock.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$minute","50"),variable("$hour","1"),variable("$ma","$minute / 60 * 360"),variable("$ha","$hour / 12 * 360")).chain()
  .overlay(new Layer().publicId("clock_example:small")).chain()
  .angle("$ha + $ma / 12").chain()
  .flags("layer_apply").chain()
  .overlay(new Layer().publicId("clock_example:big")).chain()
  .angle("$ma").chain()
  .flags("layer_apply").chain()
  .width(550).height(550).crop("crop").chain()
  .quality("auto")).generate("clock_example/clock.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("clock_example:small").chain()
  .setAngle("$ha + $ma / 12").chain()
  .setFlags("layer_apply").chain()
  .setOverlay("clock_example:big").chain()
  .setAngle("$ma").chain()
  .setFlags("layer_apply").chain()
  .setWidth(550).setHeight(550).setCrop("crop").chain()
  .setQuality("auto")).generate("clock_example/clock.png")!, cloudinary: cloudinary)
Clock

by Tal Admon