Skip to content

Web Decks are designed with simple standard web features, are rendered on an HTML Canvas, uses standard events to report interaction through basic JavaScript functions.
The application that serves them is a very simple Flask application with Ninja2 templates. The Flask application also runs the WebSocket proxy.

webdecks.svg

Web Deck Messages

Cockpitdecks to Web Deck Messages

Send code

{
    "code": code,
    "deck": name,
    "meta": {
        "ts": datetime.now().timestamp()
    }
}

Code is interpreted by the deck. Codes are:

  • 0: Display (attached) image on deck/key
  • 1: Reload yourself (deck)
  • 2: Emit (attached) sound for deck

meta data is a python dictionary serialized into JSON (mostly name, value pairs). It can contain any arbitrary serialisable items.

Send Image

It can be a key image, or a «hardware» image.

{
    "code": 0,
    "deck": name,
    "key": key,
    "image": base64.encodebytes(content).decode("ascii"),
    "meta": {
        "ts": datetime.now().timestamp()
    }
}

Send Sound

It can be a key image, or a «hardware» image.

{
    "code": 2,
    "deck": name,
    "sound": base64.encodebytes(content).decode("ascii"),
    "type": "wav",
    "meta": {
        "ts": datetime.now().timestamp()
    }
}

Web Decks to Cockpitdecks Messages

Send code

{
    "code": code,
    "deck": name,
}

Code values:

  • 0: Report event (see below)
  • 1: New deck, expect reload/refresh data

Send Event

{
	"code": 0,
	"deck": deck,
	"key": key,
	"event": value,
	"data": data
}

Web Deck Drawing

Technically speaking, web decks are very simple browser entities. The web representation is an HTML Canvas. The background image of the deck is laid out as the background image of the canvas. Deck icons are images laid over the background image at precise size and positions. Nothing less, nothing more.

Another special kind of icon images can be generated by Cockpitdecks especially for web decks. They are called hardware representations. They behave exactly like other representations, but they only exists for web decks. They usually have particular sizes and positions, and their drawing is sometimes complex.

Web decks communicate with Cockpitdecks through standard WebSocket.

The connection is established or re-established on startup of Cockpitdecks. Cockpitdecks is aware of the web decks connected to it and only update web decks when necessary. There should never be a need to refresh a web page containing a web deck.