From 787ec126c56e9dd0f9a7b3168486aa7429cff21d Mon Sep 17 00:00:00 2001 From: Adam Goldsmith Date: Thu, 4 Nov 2021 23:28:21 -0400 Subject: [PATCH] Add a "settings" message to send header colors and webcam transform This should ideally be in 3 commits, but oh well. --- server/src/OctoPrintConnection.ts | 38 ++++++++++------ server/src/server.ts | 4 +- src/App.vue | 41 +++++++++--------- src/PrinterCard.vue | 72 ++++++++++++++++++++++++++++--- types/messages.d.ts | 29 +++++++++++-- 5 files changed, 139 insertions(+), 45 deletions(-) diff --git a/server/src/OctoPrintConnection.ts b/server/src/OctoPrintConnection.ts index 4f74503..abf9618 100644 --- a/server/src/OctoPrintConnection.ts +++ b/server/src/OctoPrintConnection.ts @@ -3,7 +3,7 @@ import fetch from 'node-fetch'; /// import { MjpegProxy } from 'mjpeg-proxy'; -import {ExtendedMessage} from '../../types/messages'; +import {Message, StatusMessage, SettingsMessage} from '../../types/messages'; import * as octoprint from '../../types/octoprint'; const PING_TIME = 10000; @@ -13,13 +13,14 @@ type Timeout = ReturnType; export default class OctoprintConnection { public name?: string; public webcamProxy?: MjpegProxy; - protected lastStatus?: ExtendedMessage; + protected lastStatus?: StatusMessage; + protected settingsMessage?: SettingsMessage; constructor( public slug: string, public address: string, protected apikey: string, - protected broadcast: (msg: ExtendedMessage) => void + protected broadcast: (msg: Message) => void ) { this.try_connect_websocket(); } @@ -41,7 +42,18 @@ export default class OctoprintConnection { if (this.webcamProxy === undefined) { this.webcamProxy = new MjpegProxy(webcamURL.toString()); } - this.name = settings.appearance.name; + this.settingsMessage = { + kind: "settings", + printer: this.slug, + name: settings.appearance.name, + color: settings.appearance.color, + webcam: { + flipH: settings.webcam.flipH, + flipV: settings.webcam.flipV, + rotate90: settings.webcam.rotate90, + } + } + this.broadcast(this.settingsMessage); // do passive login to get a session key from the API key const login: octoprint.LoginResponse = await this.api_post('login', { @@ -66,10 +78,10 @@ export default class OctoprintConnection { .on('message', (data: WebSocket.Data) => { const event: octoprint.Message = JSON.parse(data as string); - let ext_event: ExtendedMessage = { - ...event, + let ext_event: StatusMessage = { + kind: "status", printer: this.slug, - name: this.name, + msg: event, }; this.broadcast(ext_event); @@ -120,12 +132,12 @@ export default class OctoprintConnection { } send_init(ws: WebSocket) { - let payload: ExtendedMessage; - if (this.lastStatus) { - payload = this.lastStatus; - } else { - payload = { init: null, printer: this.slug, name: this.name }; + if (this.settingsMessage) { + ws.send(JSON.stringify(this.settingsMessage)); + + if (this.lastStatus) { + ws.send(JSON.stringify(this.lastStatus)); + } } - ws.send(JSON.stringify(payload)); } } diff --git a/server/src/server.ts b/server/src/server.ts index 46d2bf1..de9ef55 100644 --- a/server/src/server.ts +++ b/server/src/server.ts @@ -5,7 +5,7 @@ import * as yaml from 'js-yaml'; import * as expressWs from 'express-ws'; import * as WebSocket from 'ws'; -import { ExtendedMessage } from '../../types/messages'; +import { Message } from '../../types/messages'; import OctoPrintConnection from './OctoPrintConnection'; const PORT = process.env.PORT || 1234; @@ -31,7 +31,7 @@ function broadcast(data: WebSocket.Data) { }); } -function broadcastPayload(payload: ExtendedMessage) { +function broadcastPayload(payload: Message) { broadcast(JSON.stringify(payload)); } diff --git a/src/App.vue b/src/App.vue index ec0935c..70af18b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -29,17 +29,10 @@ + + diff --git a/types/messages.d.ts b/types/messages.d.ts index 32f211c..9dcc9a7 100644 --- a/types/messages.d.ts +++ b/types/messages.d.ts @@ -1,6 +1,27 @@ -import { Message } from './octoprint'; +import { Message as OctoprintMessage } from './octoprint'; -export type ExtendedMessage = (Message | { init?: null }) & { +interface BaseMessage { printer: string; - name?: string; -}; +} + +export interface StatusMessage extends BaseMessage { + kind: 'status'; + msg: OctoprintMessage; +} + +export interface WebcamSettings { + flipH: boolean; + flipV: boolean; + rotate90: boolean; +} + +export type OctoprintColor = 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'violet' | 'black' | 'white' | 'default'; + +export interface SettingsMessage extends BaseMessage { + kind: 'settings'; + name: string; + webcam: WebcamSettings; + color: OctoprintColor; +} + +export type Message = StatusMessage | SettingsMessage;