Skip to content
Use any web browser as an IoT-connected display
TypeScript CSS JavaScript HTML Dockerfile
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
src
static
.dockerignore
.gitignore
Dockerfile
README.md
docker-compose.yaml
mosquitto.conf
netlify.toml
package-lock.json
package.json
tsconfig.json
webpack.config.js

README.md

MQ-Display

Netlify Status

Use any web browser as an IoT-connected display.

Photo of mq-display

Pre-requisites

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.

Run it

Simply add to an exising docker-compose file with a remote build target. No prior clone required!

version: "2.4"
services:
  ...
  mq-display:
      container_name: mq-display
      build: https://github.com/albertnis/mq-display.git#master
      ports:
        - 8080:80

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

Once it's up and running, go to the host and specify the MQTT host as a URL parameter. For example if I was running mq-display at localhost and connecting to a broker at 192.168.1.110 I would go to the following address:

http://localhost?host=192.168.1.110

Query string parameters

Parameter key Description Default
host MQTT broker host name [required]
port MQTT websockets port 9001
topic Topic to subscribe to virtual/screen/#

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

Build it

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

npm run build

Then serve the ./static directory.

Develop it

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

npm run dev-server

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

docker-compose up mosquitto

Publish a basic retained 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.

You can’t perform that action at this time.