tyler.durden
/
pandorafms
mirror of https://github.com/pandorafms/pandorafms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Visual Console Client: fixed the analogic clock hand angles 

Former-commit-id: 04390b4a2fde0f635035946981a05d4b880f364b
This commit is contained in:
Alejandro Gallardo Escobar 2019-03-01 11:21:42 +01:00
parent 2ab938ded5
commit 2854b59826
2 changed files with 96 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
visual_console/src/index.ts
View File

@ -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) {

55
visual_console/src/items/Clock.ts
View File

@ -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");
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<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 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<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);
}