https://github.com/flespi-software/MQTT-Tiles

Open-source MQTT-based IoT dashboard visualization tool. Has full MQTT 5.0 support. Allows easy dashboards sharing. Works with any MQTT broker supporting the WSS protocol.
https://github.com/flespi-software/MQTT-Tiles

dashboard iot mqtt mqtt-client quasar tiles vue

Last synced: about 2 months ago
JSON representation

Open-source MQTT-based IoT dashboard visualization tool. Has full MQTT 5.0 support. Allows easy dashboards sharing. Works with any MQTT broker supporting the WSS protocol.

• Host: GitHub
• URL: https://github.com/flespi-software/MQTT-Tiles
• Owner: flespi-software
• License: mit
• Created: 2019-07-24T11:47:21.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-04-15T12:10:43.000Z (5 months ago)
• Last Synced: 2024-04-16T10:21:29.323Z (5 months ago)
• Topics: dashboard, iot, mqtt, mqtt-client, quasar, tiles, vue
• Language: Vue
• Homepage: https://mqtttiles.flespi.io
• Size: 23.8 MB
• Stars: 94
• Watchers: 9
• Forks: 13
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# MQTTTiles

![Logo](/misc/logo.png?raw=true "MQTTTiles logo")

> Dashboard based on MQTT. Supports MQTT 5.0 and 3.1.X protocols, connections to multiple brokers, multiple subscribe widgets. Saves configuration in browser's local cache or in retain message on broker.

> Live version available here: [MQTTTiles](https://mqtttiles.flespi.io).

![Screenshot](/misc/screenshot.png?raw=true "MQTTTiles")

## Features

* ES6 Javascript

* Vue.js ([Quasar](http://quasar-framework.org))

* Writing .vue files

* Vuex

* Webpack

* Responsive layout

* NPM ecosystems

* Material theme

* Dev Hot Reload

* and many more!

## Prerequisites:

- [Node.js](https://nodejs.org/en/) (>=6.x)

- [Quasar](http://quasar-framework.org) (>=1.5.x)

- npm version 3+ and [Git](https://git-scm.com/).

## Build Setup

``` bash

# clone the repo

$ git clone https://github.com/flespi-software/mqtttiles.git mqtttiles

# go into app's directory and install dependencies

$ cd mqtttiles

$ npm install

# serve with hot reload at localhost:8080

$ quasar dev

# build for production with minification for flespi.io

$ quasar build

```

## Use like component

You must have a Quasar-based app.

```bash

# install like repo

$ npm install git+https://git.gurtam.net/flespi/frontend/MQTTTiles.git

```

in quasar.conf.js

```js

framework: {

  components: [

    'QIcon',

    'QToolbar',

    'QToolbarTitle',

    'QModal',

    'QModalLayout',

    'QList',

    'QListHeader',

    'QItem',

    'QItemMain',

    'QItemSide',

    'QItemTile',

    'QItemSeparator',

    'QBtn',

    'QInput',

    'QSelect',

    'QCheckbox',

    'QTooltip',

    'QPopover',

    'QCard',

    'QCardTitle',

    'QCardMain',

    'QCardSeparator',

    'QCardActions',

    'QCardMedia',

    'QToggle',

    'QChip',

    'QBtnToggle',

    'QChipsInput',

    'QField',

    'QResizeObservable',

    'QCollapsible',

    'QRadio',

    'QDialog',

    'QProgress',

    'QKnob',

    'QSlider',

    'QColorPicker',

    'QBtnDropdown',

    'QPagination'

  ],

  directives: [

    'Ripple',

    'CloseOverlay'

  ],

  plugins: [

    'Notify',

    'LocalStorage',

    'SessionStorage',

    'Dialog',

    'Loading'

  ]

}

```

```js

import Dash from 'mqtttiles'

export default {

  components: { Dash }

}

```

```html

 title = t"

  @update:boards="saveBoardsToLocalStorage"

/>

```

Props:

| Name  | Description  | Default |

|---|---|---|

| clientSettings | Connection client settings | undefined |

| initBoards | Your saved boards | undefined |

clientSettings structure:

```js

let clientSettings = {

  clientName: 'New client',

  clientId: `mqtt-tiles-${Math.random().toString(16).substr(2, 8)}`,

  host: 'wss://mqtt.flespi.io',

  keepalive: 60,

  protocolVersion: 5,

  clean: true,

  username: 'FlespiToken XXXXXXXXXXXXXXXXXXX',

  password: '',

  properties: {

    sessionExpiryInterval: undefined

  },

  syncToRetain: false,

  syncNamespace: 'xflespifront/mqtttiles/boards'

}

```

Events:

| Name  | Description  | Payload |

|---|---|---|

| change:status | connect client status changes | status:  |

| share | share board |  |

| change:title | generated title | `{active-board-name} - MQTT Tiles`:  |

| update:boards | updated boards configuration | boards collection:  |

share model structure:

```js

let shareModel = {

  boardId: "XXXXXXX-XXXXX-XXXX-XXXX-XXXXXXXXXX"

  token: "FlespiToken XXXXXXXXXXXXXXXXXXXXXXXXXXXX"

  topic: "topic/to/sync/data",

  share: []

}

```

## License

[MIT](https://github.com/flespi-software/mqtttiles/blob/master/LICENSE) license.