{
260 | if (isAcceptingDrop) {
261 | event.preventDefault();
262 | }
263 | }}
264 | onDragEnter={(event) => {
265 | setAcceptDrop(true);
266 | }}
267 | onDragLeave={(event) => {
268 | const el = addHostDropTarget.current;
269 | const cl = controllerList.current;
270 | if (el.contains(event.relatedTarget) && !cl.contains(event.relatedTarget)) {
271 | return;
272 | }
273 | setAcceptDrop(false);
274 | }}
275 | onDrop={(event) => {
276 | const hostMimeType = 'application/x.espwa.host';
277 | setAcceptDrop(false);
278 | const dt = event.dataTransfer;
279 | if (!dt.types.includes(hostMimeType)) {
280 | return;
281 | }
282 | const data = dt.getData(hostMimeType);
283 | insertHost(JSON.parse(data).host, null);
284 | }}
285 | >
286 | {
291 | if (confirm(`Are you sure you want to remove the host ${controller.host}?`)) {
292 | removeHost(controller.host) ;
293 | }
294 | }}
295 | />
296 | { isAcceptingDrop && }
297 |
298 |
299 |
15 | entity.toggle()} />
16 |
17 | {state.state}
22 | {buttons} 23 |
28 |
32 |
29 | {children}
30 |
31 | -
32 |
-
33 |
entity.toggle()} 36 | /> 37 |
38 | {speedInput}
39 |
61 | {ports.map((port) =>
;
67 | }
68 |
--------------------------------------------------------------------------------
/src/ui/components/entities/LightComponent.jsx:
--------------------------------------------------------------------------------
1 | import BrightnessInput from './inputs/BrightnessInput';
2 | import LightColorComponent from './LightColorComponent';
3 | import useEntityState from './useEntityState';
4 | import iif from './../../../iif';
5 |
6 | import {
7 | lightComponent,
8 | brightness,
9 | state as stateClass
10 | } from './LightComponent.module.css';
11 |
12 | export default function LightComponent({
13 | entity,
14 | }) {
15 | const state = useEntityState(entity);
16 |
17 | const buttons = <>
18 |
19 |
20 |
21 | ;
22 |
23 | let controls = null;
24 | if (state.state === 'ON') {
25 | controls = <>
26 | {iif('color' in state, {currentState}
63 | {positionControls} 64 | {buttons} 65 |No Improv detected
42 | ; 43 | } 44 | 45 | if (!initialized || provisioning) { 46 | returnProvisioning failed.
77 | )} 78 | 86 | {iif(nextUrl, 87 | 92 | 93 | 94 | )} 95 | ; 96 | } 97 | -------------------------------------------------------------------------------- /src/ui/components/DrawerCard.jsx: -------------------------------------------------------------------------------- 1 | import Drawer from '../Drawer'; 2 | 3 | import { useReducer, useState, useEffect, useCallback, useRef } from 'react'; 4 | 5 | import { drawer, card, header, title as titleClass } from './DrawerCard.module.css'; 6 | 7 | function DrawerCardHeader({title, glyph, onToggleDrawer, onMouseDown, children}) { 8 | return {
63 | setDragging(true)
64 | onDragStart(event)
65 | }}
66 | onDragEnd={(event) => {
67 | setDragging(false);
68 | onDragEnd(event)
69 | }}
70 | >
71 | setDraggable(true)}
76 | >
77 | {menu}
78 |
79 | {
83 | onDoneClosing?.();
84 | dispatch({type: 'finishClosing'});
85 | }}
86 | >
87 | {children}
88 |
89 |
;
90 | }
91 |
--------------------------------------------------------------------------------
/src/ui/Header.jsx:
--------------------------------------------------------------------------------
1 | import Icon from '@mdi/react';
2 | import Drawer from './Drawer';
3 | import SerialConnectButton from './SerialConnectButton';
4 |
5 | import { mdiPlusThick, mdiWifiPlus, mdiUsb } from '@mdi/js';
6 | import { useState, useId, useRef } from 'react';
7 | import { drawer, header, menu, menuToggle, menuToggleLabel, title as titleClass } from './Header.module.css';
8 |
9 | import { title } from '../config';
10 |
11 | function Header({onAddController, onConnectSerialPort}) {
12 | // We want the menu items to be ordered in reverse
13 | // in their grid. I.e. the logically first item
14 | // should render on the right.
15 | // I tried using flex-direction: row-reverse first
16 | // but that caused issues with the 0fr -> 1fr animation
17 | // then going from right to left, instead of left to right.
18 | const order = ((i) => () => i = i - 1)(0);
19 |
20 | const [isMenuOpen, setMenuOpen] = useState(false);
21 | const id = useId();
22 | const checkBoxRef = useRef(null);
23 |
24 | // We'll remove the menu buttons from tab order while
25 | // the menu is closed
26 | const menuButtonTabIndex = isMenuOpen ? 0 : -1;
27 |
28 | return {title}
30 | 87 |{state.state}
112 |
113 | Current Temperature
114 |
116 | {state.current_temperature}
115 |
73 | passwordRef.current.focus()}
91 | >
92 | setPassword(e.target.value)}
99 | />
100 |
101 |
102 |
115 |
122 |
123 |
124 | }
125 |
--------------------------------------------------------------------------------
/src/ui/components/useImprovSerial.js:
--------------------------------------------------------------------------------
1 | import { ImprovSerial } from 'improv-wifi-serial-sdk/src/serial';
2 |
3 | import { useRef, useReducer } from 'react';
4 |
5 | export default function useImprovSerial(port) {
6 | const improvRef = useRef(null);
7 |
8 | const [state, dispatch] = useReducer((state, action) => {
9 | console.log(action.type);
10 | switch(action.type) {
11 | case 'reset': {
12 | return {
13 | ...state,
14 | initialized: false,
15 | };
16 | }
17 | case 'initialize_start':
18 | return {
19 | ...state,
20 | error: null,
21 | initializing: true,
22 | }
23 | case 'initialize_end': {
24 | const { improvState, nextUrl, info } = action;
25 | return {
26 | ...state,
27 | ...info,
28 | provisioned: improvState === 4,
29 | nextUrl,
30 | initialized: true,
31 | initializing: false,
32 | };
33 | }
34 | case 'initialize_failed': {
35 | const { error } = action;
36 | return {
37 | ...state,
38 | initialized: false,
39 | initializing: false,
40 | error
41 | };
42 | }
43 | case 'scan_start':
44 | return { ...state, scanning: true, error: null }
45 | case 'scan_end':
46 | return { ...state, scanning: false, ssids: action.ssids }
47 | case 'provision_start':
48 | return { ...state, provisioning: true, error: null };
49 | case 'provision_end': {
50 | const { nextUrl } = action;
51 | return {
52 | ...state,
53 | nextUrl,
54 | provisioning: false,
55 | provisioned: true,
56 | };
57 | }
58 | case 'provision_failed': {
59 | const { error } = action;
60 | return {
61 | ...state,
62 | error,
63 | provisioning: false,
64 | provisioned: false,
65 | nextUrl: null,
66 | };
67 | }
68 | }
69 | throw new Error(`Invalid action ${action.type}`);
70 | }, {ssids: []});
71 |
72 | async function initialize() {
73 | function onErrorChange(event) {
74 | console.log('Improv error change', event)
75 | }
76 | function onStateChange(event) {
77 | console.log('Improv state change', event)
78 | }
79 |
80 | function onDisconnect() {
81 | cleanup();
82 | }
83 |
84 | function cleanup() {
85 | const improv = improvRef.current;
86 | if (!improv) {
87 | return;
88 | }
89 | improv.removeEventListener('disconnect', onDisconnect);
90 | improv.removeEventListener('state-changed', onStateChange);
91 | improv.removeEventListener('error-changed', onErrorChange);
92 | improvRef.current = null;
93 | }
94 |
95 | dispatch({ type: 'initialize_start' });
96 | try {
97 | if (!port.writable || !port.readable) {
98 | await port.open({baudRate: useImprovSerial.baudRate});
99 | }
100 | const improv = new ImprovSerial(port, console);
101 | improv.addEventListener('disconnect', onDisconnect, { once: true });
102 | improv.addEventListener('state-change', onStateChange);
103 | improv.addEventListener('error-change', onErrorChange);
104 | improvRef.current = improv;
105 |
106 | const info = await improv.initialize();
107 | dispatch({
108 | type: 'initialize_end',
109 | info,
110 | nextUrl: improv.nextUrl,
111 | improvState: improv.state
112 | });
113 | } catch(error) {
114 | console.error(error);
115 | cleanup();
116 | dispatch({ type: 'initialize_failed', error });
117 | }
118 | }
119 |
120 | async function withImprovInstance(fn) {
121 | const initialized = !!improvRef.current;
122 | if (!initialized) {
123 | console.log('initializing improv');
124 | await initialize();
125 | }
126 | try {
127 | console.log('executing withImprovInstance');
128 | return await fn();
129 | } finally {
130 | console.log('done');
131 | if (!initialized && improvRef.current) {
132 | console.log('cleaning up');
133 | await improvRef.current.close();
134 | }
135 | }
136 | }
137 |
138 | return [state, {
139 | async finger(options) {
140 | if (options?.reset) {
141 | dispatch({ type: 'reset' });
142 | }
143 | await withImprovInstance(async () => {});
144 | },
145 | async scan() {
146 | dispatch({ type: 'scan_start' });
147 | return withImprovInstance(async () => {
148 | const ssids = await improvRef.current.scan();
149 | dispatch({ type: 'scan_end', ssids });
150 | });
151 | },
152 | async provision(ssid, password, timeout) {
153 | dispatch({ type: 'provision_start' });
154 | return withImprovInstance(async () => {
155 | try {
156 | await improvRef.current.provision(ssid, password, timeout);
157 | } catch(error) {
158 | return dispatch({ type: 'provision_failed', error });
159 | }
160 | dispatch({
161 | type: 'provision_end',
162 | nextUrl: improvRef.current.nextUrl
163 | });
164 | });
165 | },
166 | }];
167 | }
168 |
169 | useImprovSerial.baudRate = 115200;
170 |
--------------------------------------------------------------------------------
/src/FetchEventSource.js:
--------------------------------------------------------------------------------
1 | function isComment(value) {
2 | return value.startsWith(':');
3 | }
4 |
5 | function isTermination(value) {
6 | // We split by \n, so we expect the empty line to be an empty string
7 | return value === '';
8 | }
9 |
10 | const fieldRegex = /^([a-z]+):\s?(.*)$/;
11 |
12 | function isField(value) {
13 | return !!value.match(fieldRegex);
14 | }
15 |
16 | function getFieldNameAndValue(value) {
17 | const match = value.match(fieldRegex);
18 | return [match[1], match[2]];
19 | }
20 |
21 | function createMessage() {
22 | return {
23 | data: [],
24 | event: 'message',
25 | };
26 | }
27 |
28 | const READYSTATE_CONNECTING = 0;
29 | const READYSTATE_OPEN = 1;
30 | const READYSTATE_CLOSED = 2;
31 |
32 | export default class EventSource extends EventTarget {
33 | #preventCors = true;
34 | #abortController = new AbortController();
35 | #fetch;
36 | #url;
37 | #lastEventId = '';
38 | #retryTimeout = 5000;
39 | #retryRef = 0;
40 |
41 | constructor(url, {fetch} = {}) {
42 | super();
43 | const { signal } = this.#abortController;
44 | this.#fetch = fetch || globalThis.fetch;
45 | this.#url = url;
46 | this.#connect();
47 | }
48 |
49 | #getFetchHeaders() {
50 | if (!this.#preventCors) {
51 | return {
52 | 'Last-Event-ID': this.#lastEventId,
53 | 'Accept': 'text/event-stream',
54 | };
55 | }
56 | return {};
57 | }
58 |
59 | #getFetchOptions() {
60 | const { signal } = this.#abortController;
61 | return {
62 | headers: this.#getFetchHeaders(),
63 | signal,
64 | };
65 | }
66 |
67 | #connect() {
68 | this.#cancelRetry();
69 | this.readyState = READYSTATE_CONNECTING;
70 | this.#fetch.call(undefined, this.#url, this.#getFetchOptions()).then(this.#onResponse, this.#onFetchError);
71 | }
72 |
73 | close() {
74 | this.#abortController.abort();
75 | this.#cancelRetry();
76 | }
77 |
78 | #cancelRetry() {
79 | if (!this.#retryRef) {
80 | return;
81 | }
82 | clearTimeout(this.#retryRef);
83 | this.#retryRef = 0;
84 | }
85 |
86 | #retryConnection() {
87 | this.#cancelRetry();
88 | console.log('retry connection');
89 | this.#retryRef = setTimeout(() => {
90 | this.#connect();
91 | }, this.#retryTimeout);
92 | this.readyState = READYSTATE_CONNECTING;
93 | }
94 |
95 | #closeConnection() {
96 | this.#cancelRetry();
97 | this.readyState = READYSTATE_CLOSED;
98 | }
99 |
100 | #failConnection() {
101 | this.#closeConnection();
102 | this.dispatchEvent(new Event('error'));
103 | }
104 |
105 | #onFetchError = (e) => {
106 | if (e.name === 'AbortError') {
107 | return this.#closeConnection();
108 | }
109 | this.#failConnection();
110 | }
111 |
112 | #onMessageComplete(message) {
113 | const dataField = message.data;
114 | const data = dataField.length > 0 ? dataField.join('\n') : null;
115 | const lastEventId = this.#lastEventId;
116 | const messageEvent = new MessageEvent(message.event, {data, lastEventId});
117 | this.dispatchEvent(messageEvent);
118 | }
119 |
120 | #onConnected = () => {
121 | this.readyState = READYSTATE_OPEN;
122 | this.dispatchEvent(new Event('open'));
123 | }
124 |
125 | #onResponse = async (response) => {
126 | if (!response.ok) {
127 | return this.#failConnection();
128 | }
129 |
130 | this.#onConnected();
131 |
132 | try {
133 | const stream = response.body;
134 | const textStream = stream.pipeThrough(new TextDecoderStream());
135 | const reader = textStream.getReader();
136 |
137 | let message = createMessage();
138 | do {
139 | const {done, value} = await reader.read();
140 | if (done) {
141 | break;
142 | }
143 |
144 |
145 | const normalized = value.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
146 |
147 | if (!normalized.endsWith('\n')) {
148 | console.warn('Message wasn\'t terminated by a newline character');
149 | continue;
150 | }
151 | const lines = normalized.substr(0, normalized.length - 1).split('\n');
152 |
153 | lines.forEach((line) => {
154 | if (isComment(line)) {
155 | return;
156 | }
157 |
158 | if (isField(line)) {
159 | const [fieldName, fieldValue] = getFieldNameAndValue(line);
160 |
161 | switch (fieldName) {
162 | case 'data':
163 | message.data.push(fieldValue);
164 | break;
165 | case 'id':
166 | this.#lastEventId = fieldValue;
167 | break;
168 | case 'retry':
169 | this.#retryTimeout = parseInt(fieldValue);
170 | break;
171 | case 'event':
172 | message.event = fieldValue;
173 | break;
174 | }
175 | return;
176 | }
177 |
178 | if (isTermination(line)) {
179 | this.#onMessageComplete(message);
180 | message = createMessage();
181 | return;
182 | }
183 | });
184 | } while(true);
185 | console.warn('Reached end of stream');
186 | // Only exits out of while loop if end of stream was reached.
187 | this.#retryConnection();
188 | } catch(e) {
189 | if (e.name === 'AbortError') {
190 | return this.#closeConnection();
191 | }
192 | this.#retryConnection();
193 | }
194 | }
195 | }
196 |
--------------------------------------------------------------------------------
/src/ui/components/SerialConnectionCard.jsx:
--------------------------------------------------------------------------------
1 | import Icon from '@mdi/react'
2 | import DrawerCard from './DrawerCard';
3 | import ImprovWifi from './ImprovWifi';
4 | import FirmwareFlasher from './FirmwareFlasher';
5 | import EntitySection from './EntitySection';
6 | import EntityCard from './EntityCard';
7 |
8 | import useImprovSerial from './useImprovSerial';
9 | import iif from '../../iif';
10 | import sleep from '../../sleep';
11 |
12 | import { useReducer, useEffect, useState } from 'react';
13 | import { title as appTitle } from '../../config';
14 |
15 | import { mdiUsb, mdiCloseThick } from '@mdi/js';
16 |
17 | import { closeButton } from './SerialConnectionCard.module.css';
18 | import { flex, flexFill } from '../utility.module.css';
19 |
20 | function useBetterSerialPort(port) {
21 | function initialize(port) {
22 | return {
23 | connected: port.connected,
24 | opened: port.opened,
25 | };
26 | }
27 | const [state, dispatch] = useReducer((state, action) => {
28 | switch (action.type) {
29 | case 'open':
30 | const info = port.getInfo();
31 | return {
32 | ...state,
33 | connected: true,
34 | opened: true,
35 | vendorId: info.usbVendorId,
36 | productId: info.usbProductId,
37 | };
38 | case 'close':
39 | return {
40 | ...state,
41 | opened: false,
42 | };
43 | case 'initialize':
44 | return initialize(action.port);
45 | case 'disconnect':
46 | return {
47 | ...state,
48 | opened: false,
49 | connected: false,
50 | };
51 | }
52 | }, port, initialize);
53 | useEffect(() => {
54 | function onOpen() {
55 | dispatch({ type: 'open' });
56 | }
57 | function onClose() {
58 | dispatch({ type: 'close' });
59 | }
60 | function onDisconnect() {
61 | dispatch({ type: 'disconnect' });
62 | }
63 |
64 | port.addEventListener('open', onOpen);
65 | port.addEventListener('close', onClose);
66 | port.addEventListener('disconnect', onDisconnect);
67 |
68 | dispatch({ type: 'initialize', port });
69 |
70 | return () => {
71 | port.removeEventListener('open', onOpen);
72 | port.removeEventListener('close', onClose);
73 | port.removeEventListener('disconnect', onDisconnect);
74 | };
75 | }, [port]);
76 |
77 | return state;
78 | }
79 |
80 | export default function SerialConnectionCard({port, onRemove, open}) {
81 | const {
82 | opened,
83 | connected,
84 | vendorId,
85 | productId,
86 | } = useBetterSerialPort(port);
87 | const [ improvState, improv ] = useImprovSerial(port);
88 | const [ error, setError ] = useState(null);
89 | const { name, chipFamily, firmware, version } = improvState;
90 |
91 | useEffect(() => {
92 | (async () => {
93 | if (!port.opened && !open) {
94 | // If the port isn't open yet and the card won't render
95 | // opened anyway briefly open the port to read vendorId
96 | // and productId
97 | try {
98 | await port.open({baudRate: useImprovSerial.baudRate})
99 | await port.close();
100 | } catch(error) {
101 | console.error(error);
102 | setError(error);
103 | }
104 | }
105 | })();
106 | return async () => {
107 | if (port.opened) {
108 | await port.close();
109 | }
110 | };
111 | }, [port]);
112 |
113 | const title = name || (vendorId && productId && `usb-${vendorId}-${productId}`) || 'unidentified serial device';
114 |
115 | const menu = ;
122 |
123 | let content = <>
124 | -
74 | {ssids.sort((one, two) => two.rssi - one.rssi).map(
75 | (ssid, idx) =>
-
76 |
setSsid(ssid)} /> 77 |
78 | )}
79 | {iif(
80 | ssids.length === 0,
81 | - {
82 | scanning ?
83 |
: 84 | 85 | } )}
86 |
126 | {iif(chipFamily,
127 | )}
129 | {iif(firmware,
130 | )}
132 | {iif(version,
133 | )}
135 |
)}
136 | {chipFamily}
128 |{firmware}
131 |{version}
134 |⚠ Something went wrong.
156 | ; 157 | } 158 | 159 | 160 | return
7 |
8 | ## Why Use ESPHome Web App? What Problems Does It Solve?
9 | Common questions often asked are "What problem does this solve?" or "Can't I just use Home
10 | Assistant/ESPHome?".
11 |
12 | And while ESPHome and Home Assistant are indeed powerful tools for managing ESPHome-based microcontrollers, they usually necessitate additional infrastructure like a Raspberry Pi or Home Assistant color hardware. ESPHome Web App however does not.
13 |
14 | ESPHome Web App uniquely enables provisioning, configuration, and control of ESPHome based devices in locations where such infrastructure might not be readily available, such as caravans and trailers, storage units, company offices, the coffeeshop around the corner or your parents home. There are many settings in which deploying additional hardware to manage and control ESPHome based devices is either too complicated, unsafe or simply unpractical. ESPHome Web App fills this gap and gives users a viable alternative.
15 |
16 | In addition, many "Makers", people and bussinesses that are building and deploying bespoke hardware solutions on the basis of ESPs and ESPHome, have a need for user-friendly and easily customizable user interfaces for their products. ESPHome Web App allows those Makers to deploy a customized and branded version of ESPHome Web App specficically for their users and products, allowing their users to seamlessly setup and control their ESPHome based hardware. All without having to dedicate large budgets to custom app development.
17 |
18 | ## Features
19 | - Implements all 14 entity types supported by ESPHome web_server, including lights, fans, locks, covers and climate entities.
20 | - Fully local and private. Manages and stores all connection and device information locally
21 | in your browser and never sends any of that anywhere else.
22 | - Served via an encrypted connection improving safety and security and enabling
23 | many advanced features (requires a browser with Private Network Access support).
24 | - Provisioning of Wi-Fi and flashing of firmware binaries via a USB connection.
25 | - Touch-friendly user-interface that is easy to use on mobile devices.
26 | - Fully functional and available even while offline (once cached).
27 | - Installable as a standalone app.
28 | - Accessible via keyboard controls with additional accessibility features in the
29 | works.
30 | - Graceful fallback on browsers that do not support Private Network Access.
31 |
32 |
33 | \* *Some features are only available in the most recent versions of modern browsers with Private Network Access support.*
34 |
35 | ## Getting Started
36 | To begin using ESPHome Web App, flash an ESP32 or ESP8266 microcontroller with ESPHome, including the web_server component, and connect it to Wi-Fi.
37 |
38 | ```yaml
39 | web_server:
40 | ```
41 |
42 | Then, access ESPHome Web App (an instance is hosted by me at https://esplink.app) and add your ESPHome-based device by clicking the "+" icon in the top-right corner and then the Wi-Fi icon. Enter the IP address or hostname into the input box and confirm the connection.
43 |
44 | *NOTE: If you are experincing problems connecting to your ESPHome MCU, try using
45 | the IP address instead of the hostname. ESPHomes mDNS hostname resolution can
46 | sometimes be causing intermittent problems.*
47 |
48 | ESPHome Web App will establish a connection with your ESPHome-based device, displaying all available entities and their respective states. The intuitive UI facilitates various actions, from toggling lights and switches to adjusting light color and color temperature, fan speeds, or cover positions and tilt.
49 |
50 | You can easily manage multiple devices within ESPHome Web App, as it
51 | conveniently stores a list of hosts for quick access upon your return. To change
52 | the order of stored devices, simply drag them around.
53 |
54 | ## Privacy and Security
55 | As a Progressive Web App, ESPHome Web App persists locally in your browser after the initial load, ensuring access even without an active internet connection.
56 |
57 | All data exchanged between ESPHome Web App and your ESPHome-based
58 | microcontrollers remains within your local network. The app connects directly to the microcontroller, with no data transmitted back to the servers hosting ESPHome Web App.
59 |
60 | Additionally, the list and addresses of connected devices are stored locally in your browser and are not shared with external parties.
61 |
62 | On browsers that support Private Network Access, ESPHome Web App uses an
63 | encrypted connection to the web server hosting the application. This ensures you
64 | privacy and safety while using ESPHome Web App and also enables many of the more
65 | advanced features, like offline access, USB provisioning and firmware flashing.
66 |
67 | ## Self-hosting and Branding
68 | While an instance of ESPHome Web App is hosted at https://esplink.app, the app is designed for easy self-hosting and branding.
69 |
70 | To do so, simply clone this code repository to your web server, run the build
71 | script with `npm run build` and point your document root to the generated `public/`
72 | output folder.
73 |
74 | You can customize your instance of ESPHome Web App by creating a esphome-web.json file in the project root. It can be used to override many defaults, like the color scheme, the title and much more.
75 |
76 | You can learn more about the customization and branding options including how to
77 | create fully custom setup- and workflows in the [Setup and Customize an ESPHome Web App instance](https://www.rarelyunplugged.com/posts/setup-and-customize-a-esphome-web-app-instance/) guide.
78 |
79 | Feel free to reach out to me with any questions or concerns. I'm always happy to help. In addition I can provide professional consulting and support up to and including fully hosted solutions at reasonable rates.
80 |
--------------------------------------------------------------------------------
/src/ui/components/FirmwareFlasher.jsx:
--------------------------------------------------------------------------------
1 | import Drawer from '../Drawer';
2 | import Spinner from '../Spinner';
3 | import RadialProgress from '../RadialProgress';
4 |
5 | import css from '../css';
6 |
7 | import { flexFill } from '../utility.module.css';
8 |
9 | import { useState, useEffect, useReducer, useRef } from 'react';
10 | import iif from '../../iif';
11 | import sleep from '../../sleep';
12 |
13 | import {Transport, ESPLoader} from 'esptool-js';
14 |
15 | function useEspTool(port) {
16 | const esptoolRef = useRef({});
17 |
18 | const [state, dispatch] = useReducer((state, action) => {
19 | switch (action.type) {
20 | case 'file_reading_start':
21 | return {
22 | ...state,
23 | reading: true,
24 | };
25 | case 'file_reading_complete':
26 | return {
27 | ...state,
28 | reading: false,
29 | };
30 | case 'upload_start':
31 | return {
32 | ...state,
33 | progress: 0,
34 | uploading: true,
35 | };
36 | case 'upload_progress': {
37 | const { progress } = action;
38 | return {
39 | ...state,
40 | progress,
41 | };
42 | }
43 | case 'upload_complete':
44 | return {
45 | uploading: false,
46 | progress: 1,
47 | };
48 | case 'upload_fail': {
49 | const { error } = action;
50 | return {
51 | uploading: false,
52 | error,
53 | };
54 | }
55 | case 'flashing_start': {
56 | return {
57 | ...state,
58 | flashing: true,
59 | done: false,
60 | error: null,
61 | };
62 | }
63 | case 'flashing_complete': {
64 | return {
65 | ...state,
66 | flashing: false,
67 | done: true,
68 | };
69 | }
70 | }
71 | throw new Error(`Invalid action ${action.type}`);
72 | }, {});
73 |
74 | async function readFile(file) {
75 | dispatch({ type: 'file_reading_start' });
76 | return new Promise((resolve, reject) => {
77 | const reader = new FileReader();
78 |
79 | function onError() {
80 | cleanup();
81 | reject();
82 | }
83 | function onLoad(event) {
84 | cleanup();
85 | resolve(event.target.result);
86 | }
87 | function cleanup() {
88 | reader.removeEventListener('load', onLoad);
89 | reader.removeEventListener('error', onError);
90 | }
91 |
92 | reader.addEventListener('load', onLoad);
93 | reader.addEventListener('error', onError);
94 |
95 | reader.readAsBinaryString(file)
96 | });
97 | }
98 |
99 | async function resetTransport(transport) {
100 | // ESP Web Tools Install Button does this.
101 | // Not entirely sure why, the commit adding this doens't speak
102 | // to why this needs to happen, but I've been running into
103 | // issues whith not being able to talk to Improv after flashing
104 | // an MCU. So I'll see if this helps.
105 | await transport.device.setSignals({
106 | dataTerminalReady: false,
107 | requestToSend: true,
108 | });
109 | await sleep(250);
110 | await transport.device.setSignals({
111 | dataTerminalReady: false,
112 | requestToSend: false,
113 | });
114 | await sleep(250);
115 | }
116 |
117 | return [
118 | state, {
119 | async flash(file) {
120 | const transport = new Transport(port, false);
121 |
122 | try {
123 | dispatch({ type: 'flashing_start' });
124 | const loaderOptions = {
125 | transport,
126 | baudrate: 115200,
127 | romBaudrate: 115200,
128 | };
129 |
130 | const loader = new ESPLoader(loaderOptions);
131 |
132 | await loader.main();
133 | await loader.flashId();
134 |
135 | const data = await readFile(file);
136 |
137 | const flashOptions = {
138 | fileArray: [{data, address: 0}],
139 | flashSize: "keep",
140 | flashMode: "keep",
141 | flashFreq: "keep",
142 | eraseAll: false,
143 | compress: true,
144 | reportProgress: (index, written, total) => {
145 | dispatch({ type: 'upload_progress', progress: written/total});
146 | },
147 | };
148 | dispatch({ type: 'upload_start' });
149 | await loader.writeFlash(flashOptions);
150 | await resetTransport(transport);
151 | dispatch({ type: 'upload_complete' });
152 | dispatch({ type: 'flashing_complete' });
153 | } catch(error) {
154 | await resetTransport(transport);
155 | dispatch({ type: 'upload_fail', error });
156 | console.error(error);
157 | }
158 | },
159 | },
160 | ];
161 | }
162 |
163 | async function showFilePicker(accept) {
164 | return new Promise((resolve, reject) => {
165 | const el = document.createElement('input');
166 | el.style = 'display: none;';
167 | el.type = 'file';
168 | el.accept = accept;
169 | document.body.appendChild(el);
170 |
171 | function cleanup() {
172 | el.removeEventListener('change', onChange);
173 | el.removeEventListener('cancel', cleanup);
174 | document.body.removeChild(el);
175 | }
176 | function onChange(event) {
177 | cleanup();
178 | const file = event.target.files[0];
179 | if (!file) {
180 | return resolve(null);
181 | }
182 | resolve(file);
183 | }
184 |
185 | function onCancel(event) {
186 | cleanup();
187 | resolve(null);
188 | }
189 |
190 | el.addEventListener('change', onChange);
191 | el.addEventListener('cancel', onCancel);
192 |
193 | el.click();
194 | });
195 | }
196 |
197 | const fileExtensions = '.bin,.img,.hex,.elf';
198 |
199 | export default function FirmwareFlasher({port, onFirmwareUpdateDone, label}) {
200 | const [{flashing, progress, uploading, error, done}, esptool] = useEspTool(port);
201 |
202 | return <>
203 | {iif(uploading, ⚠ Something went wrong.
)} 206 | {iif(done,Installed.
)} 207 | {iif(!flashing, )} 219 | ; 220 | } 221 | -------------------------------------------------------------------------------- /src/sw.js: -------------------------------------------------------------------------------- 1 | async function cacheResources(resources) { 2 | const cache = await caches.open('v1'); 3 | await cache.addAll(resources); 4 | } 5 | 6 | async function cacheResource(key, resource) { 7 | const cache = await caches.open('v1'); 8 | return cache.put(key, resource); 9 | } 10 | 11 | async function fetchFromCacheFirst(request) { 12 | const cachedResponse = await fetchFromCache(request); 13 | // Skip serving the cache response in DEV 14 | if (cachedResponse && !import.meta.env.DEV) { 15 | return cachedResponse; 16 | } 17 | 18 | return await fetchFromNetwork(request); 19 | } 20 | 21 | async function fetchFromNetworkFirstAndUpdateCache(request) { 22 | try { 23 | return await fetchFromNetworkAndUpdateCache(request); 24 | } catch(e) { 25 | return await fetchFromCache(request); 26 | } 27 | } 28 | 29 | async function fetchFromNetworkFirst(request) { 30 | try { 31 | return await fetchFromNetwork(request); 32 | } catch(e) { 33 | return await fetchFromCache(request); 34 | } 35 | } 36 | 37 | async function fetchFromNetwork(request) { 38 | return fetch(request); 39 | } 40 | 41 | async function fetchFromNetworkAndUpdateCache(request) { 42 | const response = await fetchFromNetwork(request); 43 | if (response.ok) { 44 | const cache = await caches.open('v1'); 45 | cache.put(request, response.clone()); 46 | return response; 47 | } 48 | return response; 49 | } 50 | 51 | async function fetchFromCache(request) { 52 | if (request.url.endsWith('/sw.js')) { 53 | // Never serve sw.js from cache to avoid locking ourselves 54 | // into a SW version 55 | return Promise.reject(); 56 | } 57 | return caches.match(request); 58 | } 59 | 60 | const pluginManifest = { 61 | url: '/manifest.json', 62 | buildResourceList: (json) => { 63 | const resources = Object.values(json).filter(v => v !== 'sw.js').map(v => `/${v}`); 64 | return resources; 65 | }, 66 | } 67 | 68 | const viteManifest = { 69 | url: '/vite-manifest.json', 70 | buildResourceList: (json) => { 71 | const resources = Object.values(json).filter(v => v !== 'sw.js').map(v => `/${v}`); 72 | }, 73 | } 74 | 75 | async function cacheManifestResources(resourceManifest) { 76 | const { isCacheCurrent, updateCache } = await fetchResourceManifest(resourceManifest); 77 | if (isCacheCurrent) { 78 | console.debug('No changes in resource manifest. Skipping update.'); 79 | return; 80 | } 81 | return await updateCache(); 82 | } 83 | 84 | function isResourceEqual(first, second) { 85 | const firstEtag = first?.headers?.get('Etag'); 86 | const secondEtag = second?.headers?.get('Etag'); 87 | 88 | return !!firstEtag && firstEtag === secondEtag; 89 | } 90 | 91 | async function fetchResourceManifest(resourceManifest) { 92 | if (import.meta.env.DEV) { 93 | // We don't have a resource manifest in DEV 94 | // See https://github.com/DanielBaulig/esphome-web-app/issues/2 95 | return { isCacheCurrent: true, updateCache: async () => {} }; 96 | } 97 | try { 98 | const [manifest, cachedManifest] = await Promise.all([ 99 | fetch(resourceManifest.url, {cache: 'no-cache'}), 100 | caches.match(resourceManifest.url), 101 | ]); 102 | const isCacheCurrent = isResourceEqual(manifest, cachedManifest); 103 | 104 | const updateCache = async () => { 105 | const json = await manifest.clone().json(); 106 | const resources = resourceManifest.buildResourceList(json); 107 | 108 | const [cache,] = await Promise.all([ 109 | caches.open('v1'), 110 | cacheResources(resources) 111 | ]); 112 | cache.put(resourceManifest.url, manifest); 113 | } 114 | 115 | return { isCacheCurrent: isCacheCurrent, updateCache: updateCache }; 116 | } catch(e) { 117 | // Network requests failed, we may be offline 118 | return { 119 | isCacheCurrent: true, 120 | updateCache: async () => {}, 121 | }; 122 | } 123 | } 124 | 125 | async function cacheAppResources() { 126 | console.debug('Updating app cache'); 127 | return Promise.all([cacheManifestResources(pluginManifest), cacheResources([ 128 | '/', 129 | '/icons/192.png', 130 | '/icons/256.png', 131 | ])]); 132 | } 133 | 134 | self.addEventListener("install", event => { 135 | event.waitUntil(cacheAppResources()); 136 | }); 137 | 138 | self.addEventListener('activate', event => { 139 | return self.clients.claim(); 140 | }); 141 | 142 | // See https://github.com/DanielBaulig/esphome-web-app/issues/1 143 | // self.addEventListener('sync', (event) => { 144 | // console.log('SW: sync event') 145 | // if (event.tag === 'update-app-cache') { 146 | // console.log('SW: update-app-cache'); 147 | // event.waitUntil(async () => { 148 | // const [updated,] = await cacheAppResources(); 149 | // if (!updated) { 150 | // console.log('SW: app-cache is up to date'); 151 | // return; 152 | // } 153 | // console.log('SW: app-cache was updated'); 154 | // const clients = await clients.matchAll(); 155 | // clients.forEach(client => client.postMessage({type: 'app-update'})); 156 | // }); 157 | // } 158 | // }); 159 | 160 | async function postMessage(clientId, message) { 161 | const client = await clients.get(clientId); 162 | client.postMessage(message); 163 | } 164 | 165 | self.addEventListener('fetch', (event) => { 166 | const request = event.request; 167 | 168 | // Avoid handling requests not going to origin 169 | if (!request.url.startsWith(location.origin)) { 170 | console.debug('Bypassing request to different origin', request); 171 | 172 | // If we see a PNA request in the ServiceWorker, then the request 173 | // was not blocked by the mixed content policy. 174 | // This holds true at least currently in Chrome, which is the only 175 | // browser implementing PNA confirmation dialogs anyway. 176 | if (request.targetAddressSpace === 'private') { 177 | postMessage(event.clientId, 'pna_confirm'); 178 | } 179 | 180 | return false; 181 | } 182 | 183 | if (request.mode === 'navigate') { 184 | console.log('Navigate request'); 185 | // We want to make sure we update the app resource cache if 186 | // we get a main resource navigation (i.e. we are loading the app).. 187 | const createNavigateResponse = async () => { 188 | const [response, {isCacheCurrent, updateCache}] = await Promise.all([ 189 | // Fetch the main resource from the network and update the cache with it 190 | // Fallback to loading from cache 191 | fetchFromNetworkFirstAndUpdateCache(request), 192 | // At the same time try loading the resource manifest 193 | // If the local cache is not up to date with the resource 194 | // manifest, we can re-cache the entire application before 195 | // continuing. 196 | fetchResourceManifest(pluginManifest) 197 | ]); 198 | 199 | if (!isCacheCurrent) { 200 | // Re-cache all resources if the resource manifest has changed 201 | // NOTE: Recaching the entire application may be slow on slower 202 | // connections, making the initial navigation to the app slow. 203 | // We can optimize this down the line. For now it's more important 204 | // that the app will work reliably even when later offline. 205 | await updateCache(); 206 | } 207 | 208 | return response; 209 | }; 210 | 211 | return event.respondWith(createNavigateResponse()); 212 | } 213 | 214 | // The entire application should be loaded in the cache and up to date. 215 | return event.respondWith(fetchFromCacheFirst(request)); 216 | }); 217 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import ControllerList from './ui/components/ControllerList.jsx'; 4 | import SerialConnectionList from './ui/components/SerialConnectionList.jsx'; 5 | import Header from './ui/Header.jsx'; 6 | import ControllerRegistry from './ControllerRegistry.js'; 7 | import Toast from './ui/Toast.jsx'; 8 | 9 | import { useState, useEffect, useRef } from 'react'; 10 | 11 | import { title, insecureOrigin, insecureOriginTemplate } from './config'; 12 | import { footer, dropTarget, dropIndicator, dropSpacer } from './main.module.css'; 13 | 14 | function privateAddressSpaceFetch(...args) { 15 | const isInsecureTarget = args[0].toString().startsWith('http:'); 16 | const usePrivateAddressSpace = globalThis.isSecureContext && isInsecureTarget; 17 | if (usePrivateAddressSpace) { 18 | if (args.length < 2) { 19 | args.push({}); 20 | } 21 | Object.assign(args[1], { 22 | targetAddressSpace: 'private', 23 | }); 24 | } 25 | 26 | return fetch(...args); 27 | } 28 | 29 | const registry = new ControllerRegistry('controllers', {fetch: privateAddressSpaceFetch}); 30 | 31 | import './main.css'; 32 | import 'virtual:custom.css'; 33 | 34 | function sw() { 35 | if (import.meta.env.DEV) { 36 | return 'src/sw.js'; 37 | } else { 38 | return '/sw.js'; 39 | } 40 | } 41 | 42 | if ('serviceWorker' in navigator) { 43 | navigator.serviceWorker.register(sw(), { scope: '/', type: 'module' }).then((registration) => { 44 | console.log(`Registration succesful ${registration}`); 45 | }); 46 | } else console.warn('ServiceWorker not supported'); 47 | 48 | function ltrim(str, ch) { 49 | // Make sure ch is a single character 50 | ch = ch.charAt(0); 51 | const rx = new RegExp(`^[${ch}]*(.*)$`); 52 | return str.match(rx)[1]; 53 | } 54 | 55 | async function waitForMessage(message, ms) { 56 | const p = new Promise((resolve, reject) => { 57 | let timeout; 58 | function cleanup() { 59 | clearTimeout(timeout); 60 | timeout = 0; 61 | navigator.serviceWorker.removeEventListener('message', handler); 62 | } 63 | function handler(event) { 64 | if (event.data === message) { 65 | if (ms !== null && !timeout) { 66 | return; 67 | } 68 | cleanup(); 69 | resolve(); 70 | } 71 | } 72 | if (ms !== null) { 73 | timeout = setTimeout(() => { 74 | cleanup(); 75 | reject(); 76 | }, ms); 77 | } 78 | navigator.serviceWorker.addEventListener('message', handler); 79 | }); 80 | return p; 81 | } 82 | 83 | let receivedPrivateNetworkAccessConfirmation = false; 84 | async function waitForPrivateNetworkAccessRequestConfirmation(ms = 1000) { 85 | if (receivedPrivateNetworkAccessConfirmation) { 86 | return true; 87 | } 88 | try { 89 | await waitForMessage('pna_confirm', ms); 90 | return receivedPrivateNetworkAccessConfirmation = true; 91 | } catch(e) { 92 | return receivedPrivateNetworkAccessConfirmation; 93 | } 94 | } 95 | 96 | // Let's montior for a PrivateNetworkAccess confirmation message 97 | waitForPrivateNetworkAccessRequestConfirmation(null); 98 | 99 | function App({controllerRegistry}) { 100 | const [mostRecentPort, setMostRecentPort] = useState(null); 101 | const [controllers, setControllers] = useState(getRegisteredControllers()); 102 | const [hasStrictMixedContent, setHasStrictMixedContent] = useState(undefined); 103 | const addHostDropTarget = useRef(null); 104 | const controllerList = useRef(null); 105 | const [isAcceptingDrop, setAcceptDrop] = useState(false); 106 | 107 | function getRegisteredControllers() { 108 | return controllerRegistry.hosts.map(host => registry.controllers[host]); 109 | } 110 | 111 | async function checkStrictMixedContent() { 112 | if (!globalThis.isSecureContext) { 113 | return; 114 | } 115 | if (hasStrictMixedContent === undefined) { 116 | setHasStrictMixedContent(!await waitForPrivateNetworkAccessRequestConfirmation(1000)); 117 | } 118 | } 119 | 120 | function interceptHashNavigation(event) { 121 | if (!event.hashChange) { 122 | return; 123 | } 124 | 125 | event.intercept({ handler() { 126 | executeHashQueryActions(event.destination.url); 127 | } }); 128 | } 129 | 130 | function clearHash() { 131 | const url = new URL(location.href); 132 | url.hash = ''; 133 | history.replaceState(null, '', url); 134 | } 135 | 136 | function executeAddHostHashAction(host) { 137 | if (!host) { 138 | return null; 139 | } 140 | 141 | if (controllerRegistry.has(host)) { 142 | return controllerRegistry.get(host).connect(); 143 | } 144 | 145 | if(!confirm(`Would you like to add the host ${host}?`)) { 146 | return; 147 | } 148 | 149 | addHost(host); 150 | } 151 | 152 | function executeHashQueryActions(str = location.href) { 153 | const url = new URL(str); 154 | const query = new URLSearchParams(ltrim(url.hash, '#')); 155 | 156 | for (const [k, v] of query) { 157 | if (k === 'addhost') { 158 | executeAddHostHashAction(v); 159 | } 160 | } 161 | 162 | clearHash(); 163 | } 164 | 165 | function insertHost(host, controller) { 166 | const connect = !controllerRegistry.has(host); 167 | controllerRegistry.insertHost(host, controller); 168 | if (connect) { 169 | controller.connect(); 170 | } 171 | setControllers(getRegisteredControllers()); 172 | } 173 | 174 | async function addHost(host) { 175 | const controller = controllerRegistry.addHost(host); 176 | controller.connect(); 177 | setControllers(getRegisteredControllers()); 178 | } 179 | 180 | function removeHost(host) { 181 | controllerRegistry.removeHost(host); 182 | setControllers(getRegisteredControllers()); 183 | } 184 | 185 | function promptAndAddHost() { 186 | const host = prompt('Host'); 187 | if (host === null) { 188 | return; 189 | } 190 | addHost(host); 191 | } 192 | 193 | useEffect(() => { 194 | function onControllerError(event) { 195 | checkStrictMixedContent(); 196 | } 197 | controllerRegistry.addEventListener('controllererror', onControllerError); 198 | 199 | return () => { 200 | controllerRegistry.removeEventListener('controllererror', onControllerError); 201 | }; 202 | }, [controllerRegistry]); 203 | 204 | useEffect(() => { 205 | executeHashQueryActions(); 206 | 207 | const navigation = globalThis.navigation; 208 | 209 | if(!navigation) { 210 | return; 211 | } 212 | 213 | navigation.addEventListener('navigate', interceptHashNavigation); 214 | 215 | return () => { 216 | navigation.removeEventListener('navigate', interceptHashNavigation); 217 | }; 218 | }, []); 219 | 220 | let href = insecureOrigin; 221 | if (!href) { 222 | const url = new URL(location.href); 223 | url.protocol = 'http'; 224 | href = url.href; 225 | } 226 | 227 | if (insecureOriginTemplate) { 228 | const url = new URL(location.href); 229 | const { hostname, port, protocol, pathname, search, hash } = url; 230 | 231 | const applyTemplate = (s, o) => { 232 | const keys = Object.keys(o); 233 | const values = Object.values(o); 234 | return new Function(...keys, `return \`${s}\`;`)(...values); 235 | }; 236 | 237 | href = applyTemplate(insecureOriginTemplate, { hostname, port, protocol, pathname, search, hash }); 238 | } 239 | 240 | 241 | const strictMixedContentWarning =
301 |
305 | {title} is Open Source
306 |
307 |
309 |
310 | );
311 | }
312 |
313 | function renderRoot() {
314 | reactRoot.render(
315 | {__COMMIT_HASH__ ? `Commit ${__COMMIT_HASH__}` : ''}
308 | No entities found
282 | ; 283 | } 284 | } 285 | 286 | if (state.error) { 287 | cardContent = <> 288 |Something went wrong
290 | ; 291 | } 292 | 293 | useEffect(() => { 294 | if (isConnected) { 295 | setDrawerOpen(true); 296 | } 297 | }, [isConnected]); 298 | 299 | const activityIcon = state.activity ? mdiWifiArrowLeftRight : mdiWifi; 300 | const lastActivity = state.lastActivity ? 301 | `Last activity at ${(new Date(state.lastActivity)).toLocaleString()}` : 302 | 'No activity yet'; 303 | const glyph =-
419 | {controllers.map(controller => {
420 | return