From 2854b598269d3aed56474eed3456aa3e128a9d18 Mon Sep 17 00:00:00 2001 From: Alejandro Gallardo Escobar Date: Fri, 1 Mar 2019 11:21:42 +0100 Subject: [PATCH] Visual Console Client: fixed the analogic clock hand angles Former-commit-id: 04390b4a2fde0f635035946981a05d4b880f364b --- visual_console/src/index.ts | 63 ++++++++++++++++++++++++++++--- visual_console/src/items/Clock.ts | 55 ++++++++++++++++++--------- 2 files changed, 96 insertions(+), 22 deletions(-) diff --git a/visual_console/src/index.ts b/visual_console/src/index.ts index 55e8ce9551..db442ebb99 100644 --- a/visual_console/src/index.ts +++ b/visual_console/src/index.ts @@ -92,11 +92,35 @@ if (container != null) { parentId: null, aclGroupId: null, // Position props. - x: 500, - y: 100, + x: 60, + y: 150, // Size props. - width: 200, - height: 100, + width: 300, + 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) { diff --git a/visual_console/src/items/Clock.ts b/visual_console/src/items/Clock.ts index c6cc600698..eb96815dd9 100644 --- a/visual_console/src/items/Clock.ts +++ b/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 { svg.setAttribute("viewBox", "0 0 100 100"); // Clock face. - const clockFace = document.createElementNS(svgNS, "circle"); - clockFace.setAttribute("cx", "50"); - clockFace.setAttribute("cy", "50"); - clockFace.setAttribute("r", "48"); - clockFace.setAttribute("fill", colors.watchFace); - clockFace.setAttribute("stroke", colors.watchFaceBorder); - clockFace.setAttribute("stroke-width", "2"); - clockFace.setAttribute("stroke-linecap", "round"); + const clockFace = document.createElementNS(svgNS, "g"); + clockFace.setAttribute("class", "clockface"); + const clockFaceBackground = document.createElementNS(svgNS, "circle"); + clockFaceBackground.setAttribute("cx", "50"); + clockFaceBackground.setAttribute("cy", "50"); + clockFaceBackground.setAttribute("r", "48"); + clockFaceBackground.setAttribute("fill", colors.watchFace); + 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 { 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 minuteAngle = (360 * date.getMinutes()) / 60; - const secAngle = (360 * date.getSeconds()) / 60; - + const seconds = date.getSeconds(); + const minutes = date.getMinutes(); + 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 { 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 { 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 { 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); }