More Premium Hugo Themes Premium Vue Themes

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.

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.

Author Avatar Theme by flespi-software
Github Stars Github Stars: 110
Last Commit Last Commit: Apr 15, 2024 -
First Commit Created: Aug 27, 2024 -
default image

Overview:

MQTTTilesLogoDashboard is a web dashboard based on MQTT, supporting MQTT 5.0 and 3.1.X protocols. It allows connections to multiple brokers and features multiple subscribe widgets. Users can save configurations in the browser’s local cache or in retain messages on the broker. The live version of MQTTTiles is available for exploration.

Features:

  • ES6 Javascript: Modern JavaScript syntax for efficient code.
  • Vue.js (Quasar): Utilizes the Vue.js framework with Quasar components for the frontend.
  • Writing .vue files: Supports writing components in Vue single-file components.
  • Vuex: State management pattern for Vue.js applications.
  • Webpack: Module bundler for building the application.
  • Responsive layout: Ensures the dashboard adapts to different screen sizes.
  • NPM ecosystems: Leverages NPM for managing project dependencies.
  • Material theme: Uses a material design theme for visual aesthetics.
  • Dev Hot Reload: Provides hot reloading for a smooth development experience.

Installation:

To set up MQTTTilesLogoDashboard, ensure you have Node.js (version 6.x or higher), Quasar (version 1.5.x or higher), npm version 3 or later, and Git installed on your system. Follow these steps to integrate the dashboard into your Quasar-based app:

  1. Add the MQTTTilesLogoDashboard component in your quasar.conf.js file.
  2. Define the necessary props such as clientSettings for connection settings and initBoards for the saved boards.
  3. Configure the structure of clientSettings as described in the documentation.
  4. Utilize the provided events like change:status, share, change:title, and update:boards to interact with the dashboard functionality.
  5. Ensure compliance with the MIT license for permitted use.

Summary:

MQTTTilesLogoDashboard is a versatile web dashboard solution rooted in MQTT protocols. With support for multiple brokers, ES6 JavaScript, Vue.js components, and a range of other features, it offers a comprehensive platform for managing MQTT-based data. By following the installation guide and meeting prerequisites, users can seamlessly integrate this dashboard into their Quasar applications, leveraging its capabilities for effective data visualization and management.