{"id":13588905,"url":"https://github.com/flespi-software/MQTT-Tiles","last_synced_at":"2025-04-08T06:32:57.979Z","repository":{"id":41777306,"uuid":"198625057","full_name":"flespi-software/MQTT-Tiles","owner":"flespi-software","description":"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.","archived":false,"fork":false,"pushed_at":"2024-04-15T12:10:43.000Z","size":24931,"stargazers_count":94,"open_issues_count":19,"forks_count":13,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-04-16T10:21:29.323Z","etag":null,"topics":["dashboard","iot","mqtt","mqtt-client","quasar","tiles","vue"],"latest_commit_sha":null,"homepage":"https://mqtttiles.flespi.io","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flespi-software.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-24T11:47:21.000Z","updated_at":"2024-06-02T00:36:39.586Z","dependencies_parsed_at":"2024-04-15T13:35:24.042Z","dependency_job_id":"f8449ae3-5429-47e2-89e9-753498a9569a","html_url":"https://github.com/flespi-software/MQTT-Tiles","commit_stats":null,"previous_names":[],"tags_count":124,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flespi-software%2FMQTT-Tiles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flespi-software%2FMQTT-Tiles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flespi-software%2FMQTT-Tiles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flespi-software%2FMQTT-Tiles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flespi-software","download_url":"https://codeload.github.com/flespi-software/MQTT-Tiles/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247792222,"owners_count":20996879,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dashboard","iot","mqtt","mqtt-client","quasar","tiles","vue"],"created_at":"2024-08-01T15:07:00.940Z","updated_at":"2025-04-08T06:32:52.967Z","avatar_url":"https://github.com/flespi-software.png","language":"Vue","funding_links":[],"categories":["Visualization, Dashboards","Vue"],"sub_categories":["Misc"],"readme":"# MQTTTiles\n![Logo](/misc/logo.png?raw=true \"MQTTTiles logo\")\n\u003e 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.\n\n\u003e Live version available here: [MQTTTiles](https://mqtttiles.flespi.io).\n\n![Screenshot](/misc/screenshot.png?raw=true \"MQTTTiles\")\n\n## Features\n* ES6 Javascript\n* Vue.js ([Quasar](http://quasar-framework.org))\n* Writing .vue files\n* Vuex\n* Webpack\n* Responsive layout\n* NPM ecosystems\n* Material theme\n* Dev Hot Reload\n* and many more!\n\n## Prerequisites:\n\n- [Node.js](https://nodejs.org/en/) (\u003e=6.x)\n- [Quasar](http://quasar-framework.org) (\u003e=1.5.x)\n- npm version 3+ and [Git](https://git-scm.com/).\n\n## Build Setup\n\n``` bash\n# clone the repo\n$ git clone https://github.com/flespi-software/mqtttiles.git mqtttiles\n\n# go into app's directory and install dependencies\n$ cd mqtttiles\n$ npm install\n\n# serve with hot reload at localhost:8080\n$ quasar dev\n\n# build for production with minification for flespi.io\n$ quasar build\n```\n\n## Use like component\nYou must have a Quasar-based app.\n```bash\n# install like repo\n$ npm install git+https://git.gurtam.net/flespi/frontend/MQTTTiles.git\n```\nin quasar.conf.js\n```js\nframework: {\n  components: [\n    'QIcon',\n    'QToolbar',\n    'QToolbarTitle',\n    'QModal',\n    'QModalLayout',\n    'QList',\n    'QListHeader',\n    'QItem',\n    'QItemMain',\n    'QItemSide',\n    'QItemTile',\n    'QItemSeparator',\n    'QBtn',\n    'QInput',\n    'QSelect',\n    'QCheckbox',\n    'QTooltip',\n    'QPopover',\n    'QCard',\n    'QCardTitle',\n    'QCardMain',\n    'QCardSeparator',\n    'QCardActions',\n    'QCardMedia',\n    'QToggle',\n    'QChip',\n    'QBtnToggle',\n    'QChipsInput',\n    'QField',\n    'QResizeObservable',\n    'QCollapsible',\n    'QRadio',\n    'QDialog',\n    'QProgress',\n    'QKnob',\n    'QSlider',\n    'QColorPicker',\n    'QBtnDropdown',\n    'QPagination'\n  ],\n  directives: [\n    'Ripple',\n    'CloseOverlay'\n  ],\n  plugins: [\n    'Notify',\n    'LocalStorage',\n    'SessionStorage',\n    'Dialog',\n    'Loading'\n  ]\n}\n```\n```js\nimport Dash from 'mqtttiles'\n\nexport default {\n  components: { Dash }\n}\n```\n```html\n\u003cdash\n  :clientSettings=\"clientSettings\"\n  @change:status=\"changeStatusHandler\"\n  @share=\"shareHandler\"\n  @change:title=\"t =\u003e title = t\"\n  @update:boards=\"saveBoardsToLocalStorage\"\n/\u003e\n```\nProps:\n\n| Name  | Description  | Default |\n|---|---|---|\n| clientSettings | Connection client settings | undefined |\n| initBoards | Your saved boards | undefined |\n\nclientSettings structure:\n```js\nlet clientSettings = {\n  clientName: 'New client',\n  clientId: `mqtt-tiles-${Math.random().toString(16).substr(2, 8)}`,\n  host: 'wss://mqtt.flespi.io',\n  keepalive: 60,\n  protocolVersion: 5,\n  clean: true,\n  username: 'FlespiToken XXXXXXXXXXXXXXXXXXX',\n  password: '',\n  properties: {\n    sessionExpiryInterval: undefined\n  },\n  syncToRetain: false,\n  syncNamespace: 'xflespifront/mqtttiles/boards'\n}\n```\n\nEvents:\n\n| Name  | Description  | Payload |\n|---|---|---|\n| change:status | connect client status changes | status: \u003cBoolean\u003e |\n| share | share board | \u003cShare_model\u003e |\n| change:title | generated title | `{active-board-name} - MQTT Tiles`: \u003cString\u003e |\n| update:boards | updated boards configuration | boards collection: \u003cObject\u003e |\n\nshare model structure:\n```js\nlet shareModel = {\n  boardId: \"XXXXXXX-XXXXX-XXXX-XXXX-XXXXXXXXXX\"\n  token: \"FlespiToken XXXXXXXXXXXXXXXXXXXXXXXXXXXX\"\n  topic: \"topic/to/sync/data\",\n  share: [\u003cFlespi_MQTT_ACL_instance\u003e]\n}\n```\n\n## License\n[MIT](https://github.com/flespi-software/mqtttiles/blob/master/LICENSE) license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflespi-software%2FMQTT-Tiles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflespi-software%2FMQTT-Tiles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflespi-software%2FMQTT-Tiles/lists"}