Skip to content
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.
Vue JavaScript Other
Branch: master
Clone or download
scarry1992 v.1.5.12.1
[fix] iframe show mode validations
Latest commit 7e6fba8 Aug 23, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
misc v.1.1.5 Mar 22, 2019
src-pwa v.1.0.8 Feb 18, 2019
src v.1.5.12.1 Aug 23, 2019
.babelrc init Dec 26, 2018
.editorconfig init Dec 26, 2018
.eslintignore init Dec 26, 2018
.eslintrc.js init Dec 26, 2018
.gitignore v.1.2.0 Apr 3, 2019
.postcssrc.js init Dec 26, 2018
.stylintrc init Dec 26, 2018
LICENSE init Dec 26, 2018
README.md v.1.4.6 Jul 24, 2019
index.js
package-lock.json v.1.5.3 Jul 31, 2019
package.json v.1.5.12 Aug 23, 2019
quasar.conf.js v.1.5.0 Jul 26, 2019

README.md

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.

Screenshot

Features

  • ES6 Javascript
  • Vue.js (Quasar)
  • Writing .vue files
  • Vuex
  • Webpack
  • Responsive layout
  • NPM ecosystems
  • Material theme
  • Dev Hot Reload
  • and many more!

Prerequisites:

Build Setup

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

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

in quasar.conf.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'
  ],
  directives: [
    'Ripple',
    'CloseOverlay'
  ],
  plugins: [
    'Notify',
    'LocalStorage',
    'SessionStorage',
    'Dialog',
    'Loading'
  ]
}
import Dash from 'mqtttiles'

export default {
  components: { Dash }
}
<dash :clientSettings="clientSettings" @change:status="changeStatusHandler" @share="shareHandler"/>

Props:

Name Description Default
clientSettings Connection client settings undefined

clientSettings structure:

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

share model structure:

let shareModel = {
  boardId: "XXXXXXX-XXXXX-XXXX-XXXX-XXXXXXXXXX"
  token: "FlespiToken XXXXXXXXXXXXXXXXXXXXXXXXXXXX"
  topic: "topic/to/sync/data",
  share: [<Flespi_MQTT_ACL_instance>]
}

License

MIT license.

You can’t perform that action at this time.