[COMPOSITE] Horloge Analogique

[WITNicolas]

Une petite horloge personnalisable qui affiche l'heure du PC

SYNAPPS-STUDIO-COMPOSITE|{"config":{"key":"compositeClock","name":"Clock","properties":{"height":"150px","width":"150px"},"additionalDefs":{"fondCouleur":{"type":"color","label":"Fond","value":"rgba(156, 177, 113, 1)"},"tickCouleur":{"type":"color","label":"AIguille","value":"rgba(0, 0, 0, 1)"},"fondBorder":{"type":"color","label":"Bordure","value":"rgba(164, 0, 0, 1)"},"tickwidth":{"type":"size","label":"Aiguilles","value":"12px","min":2}}},"leadActor":{"type":"layout/stack","key":"stackRoot","children":[{"type":"display/html","key":"cssStyle","properties":{"content":"<style>\n.clock {\n\t border-radius: 50%;\n\t background: {{fondCouleur}};\n\t border: 5px solid {{fondBorder}};\n\t box-shadow: inset 2px 3px 8px 0 rgba(0, 0, 0, 0.1);\n}\n\n.wrap {\n\t position: relative;\n\t width: 350px;\n\t height: 350px;\n}\n\n.minute, .heure {\n\t position: absolute;\n\t height: 100px; \n   width: {{tickwidth}};\n\t margin: auto;\n\t top: -27%; left: 0;\tbottom: 0; right: 0;\n\t transform-origin: bottom center;\n\t transform: rotate(0deg);\n\t box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);\n  background: {{tickCouleur}};\n}\n\n.minute {\n\t position: absolute;\n\t height: 130px;\n\t width: {{tickwidth}};\n\t top: -38%;\n\t left: 0;\n\t box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);\n\t transform: rotate(90deg);\n}\n\n.seconde {\n\t position: absolute;\n\t height: 90px;\n\t width: 2px;\n\t margin: auto;\n\t top: -26%;\n\t left: 0;\n\t bottom: 0;\n\t right: 0;\n\t border-radius: 4px;\n\t background: #ff4b3e;\n\t transform-origin: bottom center;\n\t transform: rotate(180deg);\n}\n\n.dot {\n\t position: absolute;\n\t top: 0;\n\t left: 0;\n\t right: 0;\n\t bottom: 0;\n\t width: 16px;\n\t height: 16px;\n\t border-radius: 50%;\n\t background: white;\n\t border: 2px solid #1b1b1b;\n\t border-radius: 50%;\n\t margin: auto;\n}\n</style>"},"additionalDefs":{"fondCouleur":{"type":"color"},"tickCouleur":{"type":"color"},"fondBorder":{"type":"color"},"tickwidth":{"type":"size"}},"additionals":{"fondCouleur":"rgba(156, 177, 113, 1)","tickCouleur":"rgba(0, 0, 0, 1)","fondBorder":"rgba(164, 0, 0, 1)","tickwidth":"11px"},"bindings":{"additionals.fondCouleur":"stage@properties.fondCouleur","additionals.tickCouleur":"stage@properties.tickCouleur","additionals.fondBorder":"stage@properties.fondBorder","additionals.tickwidth":"stage@properties.tickwidth"}},{"type":"layout/view-box","key":"view-box1","children":[{"type":"display/html","key":"html1","properties":{"content":"<div class=\"clock\">\n  <div class=\"wrap\">\n    <span class=\"heure\"></span>\n    <span class=\"minute\"></span>\n    <span class=\"seconde\"></span>\n    <span class=\"dot\"></span>\n  </div>\n</div>\n\n"},"events":{"onRender":["clock();","","function clock() {","  const date = new Date();","  const hours = ((date.getHours() + 11) % 12 + 1);","  const minutes = date.getMinutes();","  const seconds = date.getSeconds();","  const hour = hours * 30;","  const minute = minutes * 6;","  const second = seconds * 6;","  ","  document.querySelector('.heure').style.transform = `rotate(${hour}deg)`;","","  document.querySelector('.minute').style.transform = `rotate(${minute}deg)`;","","  document.querySelector('.seconde').style.transform = `rotate(${second}deg)`;","}","","setInterval(clock, 1000);"]}}],"properties":{"verticalAlignment":"expand","horizontalAlignment":"expand"}}]}}