Blank screen after starting the docker image on port 8080

[fokcuk]

Hello I get a blank image when I try to access the url This is what is in the source, but all that comes up is just a background colour `

  |

-- | --

`

[sclaflin]

Hmm, the source should be a little bit more than just a script tag. The web UI was written against the most updated versions of Firefox & Chrome. I'd check to make sure your browser is up to date and if it is, check the console for any errors.

[fokcuk]

Yeah, fair bit in the console log. Also during the install I got these: npm WARN deprecated har-validator@5.1.5: this library is no longer supported npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated node-pre-gyp@0.11.0: Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the future npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

DevTools failed to load source map: Could not load content for chrome-extension://hnmpcagpplmpfojmgmnngilcnanddlhb/browser-polyfill.min.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME index.ts:12 The main 'lit-element' module entrypoint is deprecated. Please update your imports to use the 'lit' package: 'lit' and 'lit/decorators.ts' or import from 'lit-element/lit-element.ts'. See https://lit.dev/msg/deprecated-import-path for more information. (anonymous) @ index.ts:12 ConfigOption.js:7 Uncaught TypeError: Cannot assign to read only property 'name' of function 'class ne extends X{static name="ConfigOption";static properties={label:{},name:{},value:{}};static styles=[ee,n......}}' at Function. (ConfigOption.js:7:16) at ConfigOption.js:6:43

And in FF: The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. 192.168.1.112:8080 Uncaught SyntaxError: private fields are not currently supported index.6d84bb1f.js:136:5

[sclaflin]

Docker logs in your first part are related to the SQLite3 library which has some dependencies that need patching. I'm hopeful those maintainers will update their dependencies soon.

The browser console errors you are seeing are most likely that your browser is out of date.

Uncaught SyntaxError: private fields are not currently supported index.6d84bb1f.js:136:5

Your browser doesn't support private fields in objects. I would consider updating it.

[fokcuk]

hm... Updated FF and Chrome to the latest. Chrome still gives an erorr: index.ts:12 The main 'lit-element' module entrypoint is deprecated. Please update your imports to use the 'lit' package: 'lit' and 'lit/decorators.ts' or import from 'lit-element/lit-element.ts'. See https://lit.dev/msg/deprecated-import-path for more information. (anonymous) @ index.ts:12 ConfigOption.js:7 Uncaught TypeError: Cannot assign to read only property 'name' of function 'class ne extends X{static name="ConfigOption";static properties={label:{},name:{},value:{}};static styles=[ee,n......}}' at Function. (ConfigOption.js:7:16) at ConfigOption.js:6:43

FF loads =) Had an issue with cross origin, but that was due to URL was left as default. Needs a bit more documenting what that is for =)

[sclaflin]

Thanks for the feedback. I believe all of the errors/warnings you mentioned above to be resolved. If you could be so kind, please pull down sclaflin/plate-minder-web:latest to validate? Both Chrome & Firefox should be working correctly.

Regarding the cross origin issue, the following wasn't sufficient?

    # By default, Web UI looks for plate-minder's REST service at
    # http://localhost:4000. You can override this by setting a PLATE_MINDER_URL
    # environment variable
    environment:
      - PLATE_MINDER_URL=http://localhost:4000

Would you be willing to create a pull request or suggest some other means of making this more clear?

[fokcuk]

For PLATE_MINDER_URL=http://localhost:4000 - no, it did not work, as host name/IP must match that of where you access on port 8080

[sclaflin]

For PLATE_MINDER_URL=http://localhost:4000 - no, it did not work, as host name/IP must match that of where you access on port 8080

The default configuration assumes docker is running on the same machine you're viewing the web UI with. If you're accessing the service from a different computer, you should set the PLATE_MINDER_URL to whatever host & port Plate-Minder is accessible from.

[fokcuk]

just was not very clear. I run it on the same machine as HA, but manage it from my computer, that is different