\r\n 
\r\n
;\r\n }\r\n}","import React, {Component} from \"react\";\r\nimport {FloatMenuItem, ListMenuItem, MenuItem, Rgb32MenuItem, SubMenuItem} from \"./api/MenuItem\";\r\nimport {ControllerState, MenuComponent, MenuController} from \"./api/MenuController\";\r\nimport {formatForDisplay, formatStringToWire} from \"./api/MenuItemFormatter\";\r\nimport {AckStatus, isAckStatusError} from \"./api/protocol/TagValEnums\";\r\nimport {PairingPanel} from \"./PairingPanel\";\r\n\r\nenum MenuUIState { READY, PENDING_UPDATE, RECENT_UPDATE, UPDATE_ERROR }\r\nconst UPDATE_HIGHLIGHT_TIME = 1000;\r\nconst MAXIMUM_WAIT_FOR_CORRELATION = 3000;\r\n\r\nexport class BaseMenuUI extends Component<{ itemId: string, controller: MenuController }, { value: string }> implements MenuComponent {\r\n protected itemName: string = \"\";\r\n protected itemId: string = \"\";\r\n protected readOnly: boolean = false;\r\n protected lastUpdate: number = Date.now();\r\n protected itemState: MenuUIState = MenuUIState.READY;\r\n protected outstandingCorrelation: number = 0;\r\n\r\n constructor(props: { itemId: string, controller: MenuController }) {\r\n super(props);\r\n this.bindAllControls();\r\n }\r\n\r\n componentDidMount() {\r\n this.updateItem();\r\n }\r\n\r\n private updateItem() {\r\n let item = this.props.controller.getTree().getMenuItemFor(this.props.itemId);\r\n if (item) {\r\n this.props.controller.putMenuComponent(item.getMenuId(), this);\r\n if(this.itemState === MenuUIState.READY) this.itemState = MenuUIState.RECENT_UPDATE;\r\n this.lastUpdate = Date.now();\r\n this.internalUpdateItem(item);\r\n }\r\n }\r\n\r\n ackReceived(correlationId: number, ackStatus: AckStatus) {\r\n if(correlationId === this.outstandingCorrelation) {\r\n this.outstandingCorrelation = 0;\r\n this.itemState = isAckStatusError(ackStatus) ? MenuUIState.UPDATE_ERROR : MenuUIState.RECENT_UPDATE;\r\n this.forceUpdate();\r\n }\r\n }\r\n\r\n tick(timeNow: number): void {\r\n const ticks = timeNow - this.lastUpdate;\r\n if(this.itemState === MenuUIState.PENDING_UPDATE) {\r\n if(ticks > MAXIMUM_WAIT_FOR_CORRELATION) {\r\n this.itemState = MenuUIState.UPDATE_ERROR;\r\n this.outstandingCorrelation = 0;\r\n this.lastUpdate = Date.now();\r\n this.forceUpdate();\r\n }\r\n }\r\n else if(this.itemState !== MenuUIState.READY && ticks > UPDATE_HIGHLIGHT_TIME) {\r\n this.itemState = MenuUIState.READY;\r\n this.forceUpdate();\r\n }\r\n }\r\n\r\n calculatedClass(baseClass: string): string {\r\n switch(this.itemState) {\r\n case MenuUIState.PENDING_UPDATE: return baseClass + \" pendingUpdate\";\r\n case MenuUIState.RECENT_UPDATE: return baseClass + \" itemHasUpdated\";\r\n case MenuUIState.UPDATE_ERROR: return baseClass + \" errorDuringUpdate\";\r\n default: return baseClass;\r\n }\r\n }\r\n\r\n internalUpdateItem(item: MenuItemDevice requires pairing
\r\nThis device only allows authorized connections, you need to pair with the device in order to monitor and\r\n control it. Make sure that the device is within reach as you will need to press 'Accept' on the device itself.
\r\nAn example of how the pairing screen will look is presented above, pressing accept gives this connection complete\r\n control of the device. Ensure you only ever press accept when you are pairing yourself.
\r\n\r\n \r\n
\r\n \r\n
\r\n }\r\n}\r\n\r\nexport class RootSubMenuUI extends SubMenuUI {\r\n private pairingMode: boolean = false;\r\n\r\n bindAllControls() {\r\n this.props.controller.registerStateListener((state: ControllerState) => {\r\n if (state === ControllerState.FAILED_AUTHENTICATION) {\r\n this.pairingMode = true;\r\n }\r\n this.itemHasUpdated();\r\n });\r\n }\r\n\r\n render() {\r\n if (this.pairingMode) {\r\n return \r\n
\r\n \r\n \r\n {this.itemName}\r\n
\r\n{listItems}
\r\n \r\n \r\n \r\n {this.itemName}: {this.state?.value}\r\n
\r\n }\r\n}\r\n\r\nexport class TextBasedMenuUI extends BaseMenuUI {\r\n private editingMode:boolean = false;\r\n private rollbackValue:string = \"\";\r\n\r\n bindAllControls() {\r\n this.startEditing = this.startEditing.bind(this);\r\n this.cancelPressed = this.cancelPressed.bind(this);\r\n this.submitPressed = this.submitPressed.bind(this);\r\n this.textHasChanged = this.textHasChanged.bind(this);\r\n }\r\n\r\n startEditing() {\r\n this.editingMode = true;\r\n this.itemHasUpdated();\r\n this.rollbackValue = this.state.value;\r\n }\r\n\r\n cancelPressed() {\r\n this.editingMode = false;\r\n this.setState({ value: this.rollbackValue });\r\n this.itemHasUpdated();\r\n }\r\n\r\n submitPressed() {\r\n try {\r\n this.editingMode = false;\r\n let item = this.props.controller.getTree().getMenuItemFor(this.props.itemId);\r\n const correlation = this.props.controller.sendAbsoluteUpdate(this.props.itemId, formatStringToWire(item, this.state.value));\r\n this.markRecentlyUpdated(correlation);\r\n }\r\n catch(e) {\r\n alert(\"Problem submitting value: \" + e);\r\n console.error(\"Problem during submit of value\");\r\n console.error(e);\r\n }\r\n }\r\n\r\n textHasChanged(event: React.FormEvent\r\n \r\n \r\n \r\n
\r\n } else {\r\n return \r\n \r\n
\r\n }\r\n }\r\n}\r\n\r\nexport class ListItemRowUI extends Component<{itemId: string, row: number, text: string, controller: MenuController}, any> {\r\n\r\n render() {\r\n return ;\r\n }\r\n}\r\n\r\nexport class ListMenuItemUI extends BaseMenuUI {\r\n private itemList = Array{this.itemName}: {this.state?.value}
\r\n \r\n
;\r\n }\r\n}\r\n\r\nexport class ActionableTextMenuItem extends BaseMenuUI {\r\n\r\n bindAllControls() {\r\n this.buttonPressed = this.buttonPressed.bind(this);\r\n }\r\n\r\n internalUpdateItem(item: MenuItem{this.itemName}
\r\n- \r\n {listItems}\r\n
\r\n \r\n \r\n
\r\n } else {\r\n return \r\n \r\n
\r\n }\r\n }\r\n}","import {APIConnectionListener, APIConnector, APIMessageHandler} from \"../MenuController\";\r\nimport {PROTOCOL_TAG_VAL, TAG_END_OF_MSG, TAG_START_OF_MSG} from \"../protocol/TagValProtocol\";\r\n\r\nenum CurrentSocketState {\r\n DISCONNECTED, CONNECTING, CONNECTED, STOPPED\r\n}\r\n\r\nexport class WebSocketConnector implements APIConnector {\r\n url: string;\r\n connectionListener: APIConnectionListener|undefined = undefined;\r\n messageHandler: APIMessageHandler|undefined = undefined;\r\n socket: WebSocket|undefined = undefined;\r\n state: CurrentSocketState = CurrentSocketState.DISCONNECTED;\r\n lastDisconnect: number = 0;\r\n currentData: string = \"\";\r\n\r\n constructor(url: string) {\r\n this.url = url;\r\n }\r\n\r\n start(): void {\r\n if(this.state === CurrentSocketState.CONNECTING) return;\r\n console.info(`Start connection to ${this.getName()}`);\r\n this.state = CurrentSocketState.CONNECTING;\r\n this.socket = new WebSocket(this.url);\r\n this.lastDisconnect = 0;\r\n\r\n this.socket.onclose = (evt) => {\r\n console.info(`Connection reported onClose ${this.getName()}`);\r\n if(this.connectionListener) this.connectionListener(false, evt.reason + \" - \" + evt.code);\r\n\r\n this.lastDisconnect = Date.now();\r\n this.state = CurrentSocketState.DISCONNECTED;\r\n this.socket = undefined;\r\n this.currentData = \"\";\r\n }\r\n\r\n this.socket.onopen = ev => {\r\n console.info(`Connection reports onOpen ${this.getName()}`);\r\n this.state = CurrentSocketState.CONNECTED;\r\n if(this.connectionListener) this.connectionListener(true, \"\");\r\n };\r\n\r\n this.socket.onmessage = ev => {\r\n this.currentData += ev.data;\r\n let possibleMessage = this.getPossibleMessage(PROTOCOL_TAG_VAL);\r\n while(possibleMessage && this.messageHandler) {\r\n try {\r\n console.debug(`Message received on ${this.getName()} was ${possibleMessage}`);\r\n this.messageHandler(PROTOCOL_TAG_VAL, possibleMessage);\r\n }\r\n catch(e) {\r\n console.log(\"Unexpected error in message processing\");\r\n console.log(e);\r\n }\r\n possibleMessage = this.getPossibleMessage(PROTOCOL_TAG_VAL); // check if there's a tag val message\r\n }\r\n };\r\n }\r\n\r\n lastDisconnectTime(): number {\r\n return this.lastDisconnect;\r\n }\r\n\r\n getPossibleMessage(protocol: number): string|undefined {\r\n if (this.state !== CurrentSocketState.CONNECTED || !this.currentData) return undefined;\r\n let position = 0;\r\n\r\n while(position < this.currentData.length && this.currentData.charCodeAt(position) !== TAG_START_OF_MSG) position++;\r\n position++; // skip message start\r\n if(position >= this.currentData.length || this.currentData.charCodeAt(position) !== protocol) return undefined;\r\n let msgStart = position + 1;\r\n while(position < this.currentData.length && this.currentData.charCodeAt(position) !== TAG_END_OF_MSG) position++;\r\n if(this.currentData.charCodeAt(position) !== TAG_END_OF_MSG) return undefined;\r\n let retVal = this.currentData.substring(msgStart, position);\r\n this.currentData = this.currentData.substring(position + 1);\r\n return retVal;\r\n }\r\n\r\n stop(): void {\r\n this.state = CurrentSocketState.STOPPED;\r\n this.socket?.close();\r\n }\r\n\r\n closeConnection(): void {\r\n console.info(`closeConnection on ${this.getName()}`);\r\n this.state = CurrentSocketState.DISCONNECTED;\r\n this.socket?.close();\r\n }\r\n\r\n getName(): string {\r\n return `WebSocket(${this.url})`;\r\n }\r\n\r\n isConnected(): boolean {\r\n return this.socket?.readyState === WebSocket.OPEN;\r\n }\r\n\r\n registerConnectionListener(connectionListener: APIConnectionListener): void {\r\n this.connectionListener = connectionListener;\r\n connectionListener(this.socket?.readyState === WebSocket.OPEN, \"\");\r\n }\r\n\r\n registerMessageHandler(messageHandler: APIMessageHandler): void {\r\n this.messageHandler = messageHandler;\r\n }\r\n\r\n sendMessage(rawMessage: string): void {\r\n this.socket?.send(rawMessage);\r\n }\r\n}","import {AppInfo, MenuController} from \"./api/MenuController\";\r\nimport { v4 as uuidv4 } from 'uuid';\r\nimport React, {Component, FormEvent} from \"react\";\r\n\r\nexport class GlobalAppSettings implements AppInfo {\r\n private readonly SETTINGS_APP_NAME = \"settings_appName\";\r\n private readonly SETTINGS_APP_UUID = \"settings_appUUID\";\r\n private readonly SETTINGS_WEBSOCKET_EXT = \"settings_webSocketExt\";\r\n\r\n private uuid: string = uuidv4();\r\n private appName: string = \"Untitled\";\r\n private webSocketExtension: string = \"\";\r\n\r\n constructor() {\r\n if(doesCookieExist(this.SETTINGS_APP_NAME) && doesCookieExist(this.SETTINGS_APP_UUID)) {\r\n this.appName = getCookieOrDefault(this.SETTINGS_APP_NAME) ?? \"Undefined\";\r\n this.uuid = getCookieOrDefault(this.SETTINGS_APP_UUID) ?? \"Undefined\";\r\n this.webSocketExtension = getCookieOrDefault(this.SETTINGS_WEBSOCKET_EXT) ?? \"\";\r\n } else {\r\n // we must save out the UUID on first run because otherwise we'd get a new one every time around\r\n // and if authentication is enabled on device, we'd not be able to connect without pairing each time.\r\n setCookie(this.SETTINGS_APP_UUID, this.uuid);\r\n setCookie(this.SETTINGS_APP_NAME, this.appName);\r\n setCookie(this.SETTINGS_WEBSOCKET_EXT, this.webSocketExtension);\r\n setCookie(\"settings_appName\", \"Untitled\");\r\n }\r\n }\r\n\r\n getAppName(): string {\r\n return this.appName;\r\n }\r\n\r\n getAppUuid(): string {\r\n return this.uuid;\r\n }\r\n\r\n getWebSocketExtension(): string {\r\n return this.webSocketExtension;\r\n }\r\n\r\n setAppName(appName: string): void {\r\n this.appName = appName;\r\n setCookie(this.SETTINGS_APP_NAME, appName);\r\n }\r\n\r\n setAppUuid(appUuid: string): void {\r\n this.uuid = appUuid;\r\n setCookie(this.SETTINGS_APP_UUID, appUuid);\r\n }\r\n\r\n setWebSocketExtension(wsExtension: string) {\r\n this.webSocketExtension = wsExtension;\r\n setCookie(this.SETTINGS_WEBSOCKET_EXT, wsExtension);\r\n }\r\n}\r\n\r\nexport class GlobalSettingsPanel extends Component<{settings: GlobalAppSettings, controller: MenuController}, string> {\r\n constructor(props: {settings: GlobalAppSettings, controller: MenuController}) {\r\n super(props);\r\n this.appNameHasChanged = this.appNameHasChanged.bind(this);\r\n this.appUuidHasChanged = this.appUuidHasChanged.bind(this);\r\n this.webSocketHasChanged = this.webSocketHasChanged.bind(this);\r\n this.formSubmitPrevention = this.formSubmitPrevention.bind(this);\r\n }\r\n\r\n public appNameHasChanged(event: React.FormEvent{this.state?.value}
\r\n \r\n
;\r\n }\r\n}\r\n\r\nexport function setCookie(key: string, value: string) {\r\n const expires = new Date();\r\n expires.setTime(expires.getTime() + (365 * 24 * 60 * 60 * 1000));\r\n document.cookie = key + '=' + value + ';path=/;expires=' + expires.toUTCString();\r\n}\r\n\r\nexport function getCookieOrDefault(name: string, def: string|undefined = undefined) : string|undefined {\r\n const nameLenPlus = (name.length + 1);\r\n return document.cookie\r\n .split(';')\r\n .map(c => c.trim())\r\n .filter(cookie => { return cookie.substring(0, nameLenPlus) === `${name}=`; })\r\n .map(cookie => { return decodeURIComponent(cookie.substring(nameLenPlus)); })[0] || def;\r\n}\r\n\r\nexport function doesCookieExist(name: string): boolean {\r\n return getCookieOrDefault(name) !== undefined;\r\n}\r\n","import React, {Component} from 'react';\r\nimport logo from './img/large_icon.webp';\r\nimport './App.css';\r\nimport {MenuController} from \"./api/MenuController\";\r\nimport {RootSubMenuUI} from \"./MenuUI\"\r\nimport {WebSocketConnector} from \"./api/remote/WebSocketConnector\";\r\nimport {ButtonType} from \"./api/protocol/TagValEnums\";\r\nimport {GlobalAppSettings, GlobalSettingsPanel} from \"./GlobalSettings\";\r\n\r\nclass App extends ComponentGlobal Settings
\r\n \r\n{process.env.REACT_APP_NAME} Version {process.env.REACT_APP_VERSION}
\r\n\r\n \r\n \r\n 
\r\n \r\n \r\n
\r\n\r\n } \r\n return (\r\n \r\n App Settings\r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\ninterface DialogState {\r\n shown: boolean;\r\n title: string;\r\n content: string;\r\n button1: ButtonType;\r\n button2: ButtonType;\r\n}\r\n\r\nclass DialogItemUI extends Component<{ controller: MenuController}, DialogState> {\r\n\r\n constructor(props: {controller: MenuController}) {\r\n super(props);\r\n props.controller.registerDialogListener((shown: boolean, title: string, content: string, btn1: ButtonType, btn2: ButtonType) => {\r\n this.setState({title: title, content: content, button1: btn1, button2: btn2, shown: shown});\r\n });\r\n this.button1Clicked = this.button1Clicked.bind(this);\r\n this.button2Clicked = this.button2Clicked.bind(this);\r\n }\r\n\r\n textFromBtnType(btn: ButtonType) {\r\n switch(btn) {\r\n case ButtonType.ACCEPT: return \"Accept\";\r\n case ButtonType.CANCEL: return \"Cancel\";\r\n case ButtonType.OK: return \"OK\";\r\n case ButtonType.CLOSE: return \"Close\";\r\n default: return \"\";\r\n }\r\n }\r\n\r\n button1Clicked() {\r\n this.props.controller.sendDialogAction(this.state.button1);\r\n }\r\n\r\n button2Clicked() {\r\n this.props.controller.sendDialogAction(this.state.button2);\r\n }\r\n\r\n render() {\r\n const dialogClasses = this.state?.shown ? \"dialogShown\" : \"dialogHidden\"\r\n if (!this.state) return \r\n\r\n return embedCONTROL {process.env.REACT_APP_VERSION}
\r\n\r\n
\r\n }\r\n}\r\n\r\nexport default App;\r\n","import { ReportHandler } from 'web-vitals';\r\n\r\nconst reportWebVitals = (onPerfEntry?: ReportHandler) => {\r\n if (onPerfEntry && onPerfEntry instanceof Function) {\r\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\r\n getCLS(onPerfEntry);\r\n getFID(onPerfEntry);\r\n getFCP(onPerfEntry);\r\n getLCP(onPerfEntry);\r\n getTTFB(onPerfEntry);\r\n });\r\n }\r\n};\r\n\r\nexport default reportWebVitals;\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport './index.css';\r\nimport App from './App';\r\nimport reportWebVitals from './reportWebVitals';\r\n\r\nReactDOM.render(\r\n {this.state.title}
\r\n{this.state.content}
\r\n\r\n \r\n \r\n
\r\n