ioBroker (Tasmota + MQTT + VIS)

This guide explains how to integrate a Tasmota-based IoT device with ioBroker using the Mosquitto MQTT broker and visualize live data using the VIS adapter.

---

Step 1: Setup ioBroker

1. Open your browser and go to:

   http://<ip>:8081

   
2. Go to the Adapters tab.
3. Search and install the Mosquitto MQTT adapter.
4. Create an instance of the MQTT adapter.

---

Step 2: Configure Mosquitto Broker

1. Go to Instances tab.
2. Click the wrench icon on the MQTT adapter instance.
3. Under Broker Configuration:
   • Set the role as Server/Broker.
   • Set up a username and password.
   • In the Server Settings and MQTT Settings, uncheck all options.
4. Click Save and Start the instance.

---

Step 3: Configure the Tasmota Device

1. Open the Tasmota web interface of your device.
2. Go to Configuration → MQTT.
3. Set the following values:
   • Host: <ioBroker IP>
   • Port: 1883
   • Username / Password: (same as Mosquitto credentials)
4. Leave all other fields as default.
5. Save and restart the device.

The Mosquitto broker will auto-discover the Tasmota device.

---

Step 4: Verify Device Data in ioBroker

1. In ioBroker , go to Objects tab.
2. Navigate to:

   mqtt.0.tele.tasmota_XXXXXX.SENSOR

3. Copy this state path for use in the script.

---

Step 5: Create JavaScript for Data Extraction

1. Go to Scripts tab in ioBroker.
2. Create a new JavaScript file.
3. Paste the following code and start the script:

// Replace this with your actual MQTT state path
const SENSOR_STATE1 = "mqtt.0.tele.tasmota_XXXXXX.SENSOR";

// Function to create or update states dynamically
function createOrUpdateState(path, value) {
  if (!existsState(path)) {
    createState(path, value, { name: path.split(".").pop() });
    log(`Created state: ${path}`, "info");
  } else {
    setState(path, value, true);
  }
}

// Watch for updates
on({ id: SENSOR_STATE1, change: "any" }, (obj) => {
  try {
    const data = JSON.parse(obj.state.val);
    for (const key in data) {
      if (key === "Time" || key === "timestamp") continue; // Skip time fields

      const section = data[key];
      if (typeof section === "object") {
        for (const field in section) {
          const value = section[field];
          const statePath = `0_userdata.0.Tasmota.${field}`;
          createOrUpdateState(statePath, value);
        }
      } else {
        const statePath = `0_userdata.0.Tasmota.${key}`;
        createOrUpdateState(statePath, data[key]);
      }
    }
  } catch (e) {
    log("JSON parse error: " + e, "warn");
  }
});

---

Step 6: Setup Visualization (VIS)

1. Go to Adapters → install the VIS (Visualization) adapter.
2. Open VIS Editor at:

   http://<ip>:8082

   
3. Choose VIS Editor 0.
4. Add Text Widgets and use the following Object IDs:
   • 0_userdata.0.Tasmota.<value_1>
   • 0_userdata.0.Tasmota.<value_2>
5. Adjust CSS, position, and append/prepend formatting as desired.
6. Similary can be done for other values too.
7. Click Close.

---

✅ Done!

Your Tasmota device is now integrated with ioBroker via MQTT.

You can now monitor real-time energy counter and power values etc directly in your browser.

---