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 overlays and powerful user variables which allows it to show an accurate hour based on the actual time.
This clock is compiled of three individual layers - one layer for the clock face and two for the hands. The hands' angles are determined by the hour and minute variables.
This is how the end result would look like for 1:50:
URL:
Ruby:
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:
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:
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:
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:
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:
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:
$.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:
<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:
<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:
<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:
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:
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:
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)
The requirements are 3 images of the same size (550px in this example) - for the clock face and both hands. Note that the hands need to have a transparent background and point to upwards to 12 o'clock.
The Clock face:
The big Hand:
The small hand:
The url gets two variables - one representing the hours and one for the minutes. Then, these variables will get translated into 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, and we apply automatic quality enhancement to the entire image
URL:
Ruby:
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:
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:
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:
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:
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:
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:
$.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:
<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:
<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:
<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:
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:
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:
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)