Clock
Create a fully working clock using Cloudinary
Ever wanted to make your very own fully operational clock?
The Clock face
The Big hand
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)