Use any web browser as an IoT-connected display.

You'll need an MQTT broker configured to use websockets. See mosquitto.conf for an example of a very minimal mosquitto configuration that works. For local development a broker has been included (see Develop it). Encrypted websockets are not currently supported.

MQ-Display is a frontend-only application. Build the frontend then serve it statically. Once it's running somewhere, simply go to a URL like:

http://localhost?host=192.168.1.110

This would be load MQ-Display hosted at localhost then direct the webpage to connect to the MQTT server at 192.168.1.110.

There are additional URL parameters to configure the connection:

Remember to use URL-escaped characters when specifying a topic.

MQ-Display expects payloads in JSON format with a particular schema.

Here's an example:

{
  "brightness": 100,
  "title": "Title",
  "message": "Contents go here",
  "duration": 1000
}

The following command will build the bundle to the ./dist directory.

yarn build

Then serve the ./dist directory.

Alternatively clone and build with Docker or Docker Compose:

• Docker

  docker build -t mq-display .
  docker run -p 8080:80 mq-display

• Compose

  docker-compose up --build mq-display

Now go to a URL like http://localhost:8080?host=192.168.1.110

Running as a dev server is best for development. The following command will get it running on port 4000 with hot reloading:

yarn dev

A mosquitto container is configured in docker-compose.yaml:

docker-compose up mosquitto

Publish a basic retained (i.e. no duration) message with the following:

docker exec -t mosquitto mosquitto_pub -h localhost -t "virtual/screen/1" -m "{\"brightness\":\"100\",\"message\":\"Fun times\"}" -r

Then go to https://localhost:4000?host=localhost:9001.

This application lives entirely in the browser. In this context, MQTT connections are done over websockets. This means that to serve MQ-Display over HTTPS, your server will need to be configured with TLS support wss:// protocol as opposed to ws://.