Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Empty GUI (even using example) #136

Closed
enwi opened this issue Sep 5, 2021 · 26 comments
Closed

Empty GUI (even using example) #136

enwi opened this issue Sep 5, 2021 · 26 comments

Comments

@enwi
Copy link
Contributor

enwi commented Sep 5, 2021

Describe the bug
I was trying to track down a bug where the ESP8266 was resetting (due to LoadProhibited). So to confirm that it has to do with my custom code I went back and tried using the example code (this one), but noticed that no GUI is shown at all. Only the header and name as well as online are shown.

To Reproduce
Steps to reproduce the behavior:

  1. Upload example code onto ESP8266 D1 Mini
  2. Open web browser and enter IP address of ESP8266
  3. Empty GUI is shown

Expected behavior
GUI should not be empty.

Screenshots
temp

Desktop:

  • OS: Windows 10
  • Browser: Chrome
  • Version: 92.0.4515.159

Smartphone:

  • Device: OnePlus 6
  • OS: Android 10
  • Browser: Chrome
  • Version: 92.0.4515.166

Additional context
Webconsole log:

controls.js:10 websock open
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":200,\"sliderContinuous\":false,\"controls\":[{…e\":9,\"label\":\"Graph Test\",\"value\":\"\",\"color\":3}]}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 {data: "{\"type\":0,\"label\":\"ESPUI Control\"}"}
controls.js:10 {data: "{\"id\":\"1\",\"type\":4,\"label\":\"Status:\",\"value\":\"Stop\",\"color\":0}"}
controls.js:10 {data: "{\"id\":\"2\",\"type\":4,\"label\":\"Millis:\",\"value\":\"136296\",\"color\":1}"}
controls.js:10 {data: "{\"id\":\"3\",\"type\":3,\"label\":\"Push Button\",\"value\":\"Press\",\"color\":2}"}
controls.js:10 {data: "{\"id\":\"4\",\"type\":3,\"label\":\"Other Button\",\"value\":\"Press\",\"color\":3}"}
controls.js:10 {data: "{\"id\":\"5\",\"type\":2,\"label\":\"Pad with center\",\"value\":\"\",\"color\":4}"}
controls.js:10 {data: "{\"id\":\"6\",\"type\":1,\"label\":\"Pad without center\",\"value\":\"\",\"color\":5}"}
controls.js:10 {data: "{\"id\":\"7\",\"type\":5,\"label\":\"Switch one\",\"value\":\"1\",\"color\":6}"}
controls.js:10 {data: "{\"id\":\"8\",\"type\":5,\"label\":\"Switch two\",\"value\":\"1\",\"color\":255}"}
controls.js:10 {data: "{\"id\":\"9\",\"type\":6,\"label\":\"Slider one\",\"value\":\"30\",\"color\":6}"}
controls.js:10 {data: "{\"id\":\"10\",\"type\":14,\"label\":\"Slider one\",\"value\":\"0\",\"color\":255}"}
controls.js:10 {data: "{\"id\":\"11\",\"type\":15,\"label\":\"Slider one\",\"value\":\"100\",\"color\":255}"}
controls.js:10 {data: "{\"id\":\"12\",\"type\":6,\"label\":\"Slider two\",\"value\":\"100\",\"color\":255}"}
controls.js:10 {data: "{\"id\":\"13\",\"type\":14,\"label\":\"Slider two\",\"value\":\"0\",\"color\":255}"}
controls.js:10 {data: "{\"id\":\"14\",\"type\":15,\"label\":\"Slider two\",\"value\":\"100\",\"color\":255}"}
controls.js:10 {data: "{\"id\":\"15\",\"type\":8,\"label\":\"Text Test:\",\"value\":\"a Text Field\",\"color\":6}"}
controls.js:10 {data: "{\"id\":\"16\",\"type\":7,\"label\":\"Numbertest\",\"value\":\"5\",\"color\":6}"}
controls.js:10 {data: "{\"id\":\"17\",\"type\":14,\"label\":\"Numbertest\",\"value\":\"0\",\"color\":255}"}
controls.js:10 {data: "{\"id\":\"18\",\"type\":15,\"label\":\"Numbertest\",\"value\":\"10\",\"color\":255}"}
controls.js:10 {data: "{\"id\":\"19\",\"type\":9,\"label\":\"Graph Test\",\"value\":\"\",\"color\":3}"}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"141311\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":7,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"0\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"146325\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":46,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"1\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"151340\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":10,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"0\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"156355\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":41,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"1\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"161370\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":48,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"0\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"166385\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":16,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"1\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"171400\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":37,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"0\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"176415\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":29,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"1\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"181430\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":29,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"0\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"186456\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":13,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"1\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"191471\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":7,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"0\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"196485\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":12,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"1\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"201500\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":8,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"0\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"206514\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":21,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"1\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"211597\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":18,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"0\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"216612\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":11,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"1\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"221627\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":46,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"0\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"226642\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":12,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"1\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"231657\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":22,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"0\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"236672\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":48,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"1\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"241687\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":35,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"0\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"246702\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":11,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"1\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"251717\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":42,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"0\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"256732\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":39,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"1\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"261747\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":46,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"0\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"266762\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":44,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"1\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"271777\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":34,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"0\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"276792\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":47,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"1\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"281807\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":41,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"0\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":104,\"value\":\"286822\",\"id\":2,\"color\":1}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":10,\"value\":11,\"id\":19}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}
controls.js:218 Uncaught TypeError: Cannot read property 'push' of undefined
    at WebSocket.handleEvent (controls.js:218)
handleEvent @ controls.js:218
controls.js:10 MessageEvent {isTrusted: true, data: "{\"type\":105,\"value\":\"1\",\"id\":7,\"color\":6}", origin: "ws://192.168.2.117", lastEventId: "", source: null, …}

ESP8266 log:

Try to connect to existing network.......

WiFi parameters:
Mode: Client
IP address: 192.168.2.117
UI Initialized
{"type":104,"value":"5001","id":2,"color":1}
TextAll
{"type":10,"value":28,"id":19}
{"type":105,"value":"1","id":7,"color":6}
TextAll
{"type":104,"value":"10014","id":2,"color":1}
TextAll
{"type":10,"value":22,"id":19}
{"type":105,"value":"0","id":7,"color":6}
TextAll
@Smartdatalog
Copy link

Smartdatalog commented Oct 5, 2021

I experience the same problem with an ESP32 target. Only the header and name are shown in the GUI. The ESP32 resets after refeshing the page :

Guru Meditation Error: Core  1 panic'ed (LoadProhibited). Exception was unhandled.
Core 1 register dump:
PC      : 0x4014dd5f  PS      : 0x00060230  A0      : 0x800dc12b  A1      : 0x3ffcfdb0
A2      : 0x0000000c  A3      : 0x0000000a  A4      : 0x3ffcfe2c  A5      : 0x3ffd3224  
A6      : 0x3174704f  A7      : 0x00000000  A8      : 0x00000000  A9      : 0x00000000
A10     : 0x3ffd3224  A11     : 0xffffffff  A12     : 0x00000004  A13     : 0x0000ff00  
A14     : 0x00ff0000  A15     : 0xff000000  SAR     : 0x0000000a  EXCCAUSE: 0x0000001c
EXCVADDR: 0x00000014  LBEG    : 0x4000c2e0  LEND    : 0x4000c2f6  LCOUNT  : 0xffffffff  

ELF file SHA256: 0000000000000000

Backtrace: 0x4014dd5f:0x3ffcfdb0 0x400dc128:0x3ffcfdd0 0x400d24cd:0x3ffcfdf0 0x400d2829:0x3ffcfea0 0x4014d6ab:0x3ffcff20 0x4014da96:0x3ffcff40 0x400d4c03:0x3ffcff90 0x400d4c79:0x3ffcffd0 0x4014db4e:0x3ffcfff0 0x400d5e6d:0x3ffd0010 0x40145347:0x3ffd0030 0x401454b0:0x3ffd0060 0x40145af1:0x3ffd0080 0x400897ee:0x3ffd00b0

I had this probleme with my own program and with the tabbedGui example.
Tested on Windows 10 with Chrome and MicrosoftEdge browser.

@hwplanting
Copy link

hwplanting commented Oct 10, 2021

Having the same issue as @enwi reported with following setup:

Board: ESP-WROOM-32 (ESP32DevModule)
ESPUI version 2.0.2
ArduinoJson version 6.10.0
ESPAsyncWebServer version 1.2.3
AsyncTCP version 1.1.1

Windows 10
Browser: Chrome 94.0.4606.71

@enwi
Copy link
Contributor Author

enwi commented Oct 10, 2021

Going back to an older commit it works fine. I don't know which commit breaks it though, haven't had the time to go through the latest commits to figure it out.

@hwplanting
Copy link

I tried version 1.6.3 (with arduinojson version 5.13.4) and that works fine.

@misterm15
Copy link

It seems that #131 causes the issue. I experienced the same when I was trying to use this newly implemented feature. Have no clue about Javascript and have not dived deeper in it..
Marcus

@s00500
Copy link
Owner

s00500 commented Oct 29, 2021

Hey everyone, this kind of slipped through, it should now be fixed on master

@ROSW6341
Copy link

Still there. Downloaded 2.0.2 on 11/15. Compiled the gui example for ESP32.

@trigrab
Copy link

trigrab commented Nov 16, 2021

I have the same issue. I figured out, that the json coming from the websocket is missing the attribute visible which should be true. Otherwise the elements are not rendered in the DOM.

This patch fixes it for me. But I have not enough insights to this project to know if this is a sufficient solution or a dirty hack 🤷‍♂️

diff --git a/src/ESPUI.cpp b/src/ESPUI.cpp
index afd8032..325c23f 100644
--- a/src/ESPUI.cpp
+++ b/src/ESPUI.cpp
@@ -969,6 +969,7 @@ void ESPUIClass::jsonDom(AsyncWebSocketClient* client)
         item["label"] = control->label;
         item["value"] = String(control->value);
         item["color"] = (int)control->color;
+        item["visible"] = control->visible;
 
         if (control->parentControl != Control::noParent)
         {

I hope this helps someone to create a good PR 👍

@ericBcreator
Copy link
Contributor

ericBcreator commented Nov 19, 2021

I also have the (occasional) empty GUI problem for quite some time, also see this issue I started: #92
It didn't happen with ESP32's but with ESP8266's and, seemingly, too many controls - although still randomly.

It would be great if @trigrab's visible attribute solved the problems, I'll give it a try.

@ROSW6341
Copy link

Using the modifications posted by trigrab cleared my problem.

@misterm15
Copy link

just tried the fix mentioned by @trigrab on a ESP8266 / NodeMCU Board with the tabbed GUI example. With and without fix i´m getting "Exception(28) upon browsing to the site.
Browser shows "Control" "Connected" but ESP is going to list a "Exception Stack" and then reboots.
Did you guys just tried this with the current masterbranch and an example or your own written code? (shouldn´t matter at all..)

@ROSW6341
Copy link

ROSW6341 commented Nov 19, 2021 via email

@misterm15
Copy link

checked this out also on an ESP32. Tabbed Gui is causing trouble.
The standard GUI is booting and working.
Strange..
I´ll post my "UART Log below from the ESP32 with the tabbed Gui example hooked up to my private network and trying to connect to the site. Fix was implemente
ESP_crash_tabbed_gui.txt
d.

@ROSW6341
Copy link

ROSW6341 commented Nov 19, 2021 via email

@ROSW6341
Copy link

Similar results with gui-generic-api

@ericBcreator
Copy link
Contributor

OK, I tested adding:

item["visible"] = control->visible;

This doesn't work, the 'control' class does not have property 'visible'.
Also, changing item["visible"] to true (a guess though) doesn't help either.

BTW: tabbed GUI is working fine for me on my ESP32 project. Project is here (https://www.hackster.io/ericBcreator/alarm-clock-with-web-interface-wake-up-light-temp-more-75dc6a).

@ericBcreator
Copy link
Contributor

ericBcreator commented Nov 19, 2021

A 'nice' empty GUI, as I posted over a year ago already:

Naamloos

@ericBcreator
Copy link
Contributor

ericBcreator commented Nov 19, 2021

For reference: here is the GUI of the project with an ESP32:

Naamloos

On the ESP32, it always displays without problems. There is an issue with ESP8266 / ESPUI or dependend libraries.

@iangray001
Copy link
Collaborator

iangray001 commented Jan 1, 2022

I've had more thoughts on this issue. I was trying to implement some other feature but kept getting hit by this issue (despite my claim that my commit above fixes it ;). I therefore had to investigate this to get anything else done.

I've built a very large GUI on the 8266 and it seems that past a certain size the UI_INITIAL_GUI message is failing to make it through the websocket layer (even if jsonInitialDocumentSize is increased). This is why the GUI is appearing as empty, because once the websocket connects, no UI elements are transmitted. I suspect this is simply down to some hard limit somewhere in the ESP websocket layers.

I reworked the websocket communication to include a new message type, UI_EXTEND_GUI which does exactly the same as UI_INITIAL_GUI (add elements to the DOM) but doesn't clear the DOM first. I then reworked ESPUIClass::prepareJSONChunk to chunk the entire GUI into smaller messages, send the first as a UI_INITIAL_GUI and subsequent messages as UI_EXTEND_GUI, and this seems to work fine. My previously failing large GUI is now working.

You can see what I've done in this test branch: iangray001@78317ce

Before I wrap this up as a proper PR, @s00500 your comments reference "a change in the ESPAsyncWebserver library this had to be changed to be sent as one blob at the beginning". What is this referring to? Is this something that would prevent this fix from working?

@s00500
Copy link
Owner

s00500 commented Jan 3, 2022

Hi all, sorry for the trouble, I have actually fixed this but did not push the commit,
I think that this issue for most of you happens because of the missing visibility flag, please test the master version pushed today, for me the gui example works fine with this on an ESP8266

@iangray001 as for your issue: Yes, we do have an issue with the initial data about the page, and I was already thinking about chunking it up... but I never got to it, a PR that does that would be very welcome! As for my comments about ESPAsyncTCP, I cant really remember that, can you point me to the place where I made them ?

In general, as you all may have noticed I do not have a lot of time to spend on this project, and I am also not using it actively in my own projects at the moment. Therefore if anyone of you is interested in helping maintain and extend it I am open to adding new maintainers to the project, @iangray001 you seem like a good candidate ;-)

@iangray001
Copy link
Collaborator

The flag being missing is a problem, but I can verify that for larger GUIs the initial message fails entirely, visibility notwithstanding.

The comment about ESPAsyncTCP is here.

Sure, add me as a maintainer.

@s00500
Copy link
Owner

s00500 commented Jan 3, 2022

This should now definitly be fixed on master

@iangray001 Hm... I somehow think I know what that was about, back then elements where sent indifidually... but with you chunking of 10 elements it should be fine... at least for the short term ...

@misterm15
Copy link

Downloaded the current master branch to check @iangray001´s work but there seems to be a function not existing anymore:
grafik
Is this expected ? How can i fix this?
Thanks for your work! appreciate it :)

@iangray001
Copy link
Collaborator

Maybe you have an out of date version of the ArduinoJSON library installed? That function is in the current release.

Try a pio lib update?

@misterm15
Copy link

Awesome! This issue goes on me :D
Your fix is working! All my objects are now shown :) Thanks man ! Have a good day

@thomastech
Copy link

Working for me too. Thank you @iangray001 & @s00500.

  • Thomas

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

10 participants