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.
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.