Visual Console Client: fixed the analogic clock hand angles

Former-commit-id: 04390b4a2fde0f635035946981a05d4b880f364b

visual_console/src/index.ts

@@ -92,11 +92,35 @@ if (container != null) {
     parentId: null,
     aclGroupId: null,
     // Position props.
-    x: 500,
+    x: 60,
-    y: 100,
+    y: 150,
     // Size props.
-    width: 200,
+    width: 300,
-    height: 100,
+    height: 150,
+    // Custom props.
+    clockType: "digital",
+    clockFormat: "datetime",
+    clockTimezone: "Madrid",
+    clockTimezoneOffset: 60,
+    showClockTimezone: true,
+    color: "white"
+  };
+
+  const digitalClockRawProps2 = {
+    // Generic props.
+    id: 4,
+    type: 19, // Clock = 19
+    label: null,
+    isLinkEnabled: false,
+    isOnTop: false,
+    parentId: null,
+    aclGroupId: null,
+    // Position props.
+    x: 10,
+    y: 250,
+    // Size props.
+    width: 100,
+    height: 50,
     // Custom props.
     clockType: "digital",
     clockFormat: "datetime",
@@ -106,11 +130,40 @@ if (container != null) {
     color: "#82B92E"
   };
 
+  const analogicClockRawProps = {
+    // Generic props.
+    id: 5,
+    type: 19, // Clock = 19
+    label: null,
+    isLinkEnabled: false,
+    isOnTop: false,
+    parentId: null,
+    aclGroupId: null,
+    // Position props.
+    x: 500,
+    y: 50,
+    // Size props.
+    width: 200,
+    height: 200,
+    // Custom props.
+    clockType: "analogic",
+    clockFormat: "datetime",
+    clockTimezone: "Copenhagen",
+    clockTimezoneOffset: 60,
+    showClockTimezone: true
+  };
+
   try {
     const visualConsole = new VisualConsole(
       container,
       visualConsolePropsDecoder(rawProps),
-      [staticGraphRawProps, colorCloudRawProps, digitalClockRawProps]
+      [
+        staticGraphRawProps,
+        colorCloudRawProps,
+        digitalClockRawProps,
+        digitalClockRawProps2,
+        analogicClockRawProps
+      ]
     );
     console.log(visualConsole);
   } catch (error) {

visual_console/src/items/Clock.ts

@@ -20,7 +20,7 @@ export type ClockProps = {
   clockTimezone: string;
   clockTimezoneOffset: number; // Offset of the timezone to UTC in seconds.
   showClockTimezone: boolean;
-  color: string | null;
+  color?: string | null;
 } & VisualConsoleItemProps &
   LinkedVisualConsoleProps;
 
@@ -222,14 +222,32 @@ export default class Clock extends VisualConsoleItem<ClockProps> {
     svg.setAttribute("viewBox", "0 0 100 100");
 
     // Clock face.
-    const clockFace = document.createElementNS(svgNS, "circle");
+    const clockFace = document.createElementNS(svgNS, "g");
-    clockFace.setAttribute("cx", "50");
+    clockFace.setAttribute("class", "clockface");
-    clockFace.setAttribute("cy", "50");
+    const clockFaceBackground = document.createElementNS(svgNS, "circle");
-    clockFace.setAttribute("r", "48");
+    clockFaceBackground.setAttribute("cx", "50");
-    clockFace.setAttribute("fill", colors.watchFace);
+    clockFaceBackground.setAttribute("cy", "50");
-    clockFace.setAttribute("stroke", colors.watchFaceBorder);
+    clockFaceBackground.setAttribute("r", "48");
-    clockFace.setAttribute("stroke-width", "2");
+    clockFaceBackground.setAttribute("fill", colors.watchFace);
-    clockFace.setAttribute("stroke-linecap", "round");
+    clockFaceBackground.setAttribute("stroke", colors.watchFaceBorder);
+    clockFaceBackground.setAttribute("stroke-width", "2");
+    clockFaceBackground.setAttribute("stroke-linecap", "round");
+    // Insert the clockface background into the clockface group.
+    clockFace.append(clockFaceBackground);
+
+    // Timezone complication.
+    if (this.props.showClockTimezone) {
+      const timezoneComplication = document.createElementNS(svgNS, "text");
+      timezoneComplication.setAttribute("text-anchor", "middle");
+      timezoneComplication.setAttribute("font-size", "8");
+      timezoneComplication.setAttribute(
+        "transform",
+        "translate(30 50) rotate(90)" // Rotate to counter the clock rotation.
+      );
+      timezoneComplication.setAttribute("fill", colors.mark);
+      timezoneComplication.textContent = this.props.clockTimezone;
+      clockFace.append(timezoneComplication);
+    }
 
     // Marks group.
     const marksGroup = document.createElementNS(svgNS, "g");
@@ -362,12 +380,15 @@ export default class Clock extends VisualConsoleItem<ClockProps> {
     pin.setAttribute("r", "0.3");
     pin.setAttribute("fill", colors.handDark);
 
-    // Set clock time.
+    // Get the hand angles.
     const date = this.getDate();
-    const hourAngle = (360 * date.getHours()) / 12 + date.getMinutes() / 2;
+    const seconds = date.getSeconds();
-    const minuteAngle = (360 * date.getMinutes()) / 60;
+    const minutes = date.getMinutes();
-    const secAngle = (360 * date.getSeconds()) / 60;
+    const hours = date.getHours();
-
+    const secAngle = (360 / 60) * seconds;
+    const minuteAngle = (360 / 60) * minutes + (360 / 60) * (seconds / 60);
+    const hourAngle = (360 / 12) * hours + (360 / 12) * (minutes / 60);
+    // Set the clock time by moving the hands.
     hourHand.setAttribute("transform", `translate(50 50) rotate(${hourAngle})`);
     minuteHand.setAttribute(
       "transform",
@@ -456,7 +477,7 @@ export default class Clock extends VisualConsoleItem<ClockProps> {
       dateElem.className = "date";
       dateElem.textContent = this.getDigitalDate();
       dateElem.style.fontSize = `${dateFontSize}px`;
-      dateElem.style.color = this.props.color;
+      if (this.props.color) dateElem.style.color = this.props.color;
       element.append(dateElem);
     }
 
@@ -465,7 +486,7 @@ export default class Clock extends VisualConsoleItem<ClockProps> {
     timeElem.className = "time";
     timeElem.textContent = this.getDigitalTime();
     timeElem.style.fontSize = `${timeFontSize}px`;
-    timeElem.style.color = this.props.color;
+    if (this.props.color) timeElem.style.color = this.props.color;
     element.append(timeElem);
 
     // Timezone name.
@@ -474,7 +495,7 @@ export default class Clock extends VisualConsoleItem<ClockProps> {
       tzElem.className = "timezone";
       tzElem.textContent = this.props.clockTimezone;
       tzElem.style.fontSize = `${tzFontSize}px`;
-      tzElem.style.color = this.props.color;
+      if (this.props.color) tzElem.style.color = this.props.color;
       element.append(tzElem);
     }