Create a fully working clock using Cloudinary

Ever wanted to make your very own fully operational clock?

Clock

Clock

The Clock face

The Clock face

The Big hand

The Big hand
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)
by Tal Admon