diff --git a/docs/dashboard/README.md b/docs/dashboard/README.md new file mode 100644 index 0000000..4773f43 --- /dev/null +++ b/docs/dashboard/README.md @@ -0,0 +1,38 @@ +# Grafana + +Grafana is an open source analytics and interactive visualization tool. It provides charts, graphs, and alerts for the web when connected to supported data sources. + +As a visualization tool, Grafana is a popular component in monitoring stacks, often used in combination with time series databases such as InfluxDB. + +## Connection + +To connect Grafana to our Influx-DB, you have to create a data source. + +The `URL`of our InfluxDB is `http://influxdb:8086`. + +In InfluxDB you have to create a `token` to connect: [Load Data -> API Tokens](http://localhost:8086/orgs/721027680173bf2f/load-data/tokens). + +![Influx Create Token](../flow/docs/images/influx-create-token.png) + +You can use this token to [create a connection from Grafana to Influx-DB](http://localhost:3000/datasources/). + +![Connection](./docs/images/database-connection.png) + +After having a connection to a database you can easily create an own dashboard in Grafana. + +Here's the demo snippet (directly copyied from Influx Data Explorer) and the screen shot. + +``` +from(bucket: "test") + |> range(start: v.timeRangeStart, stop: v.timeRangeStop) + |> filter(fn: (r) => r["_measurement"] == "msg") + |> filter(fn: (r) => r["_field"] == "value") + |> aggregateWindow(every: v.windowPeriod, fn: mean, createEmpty: false) + |> yield(name: "mean") +``` + +![Example Dashboard](./docs/images/grafana-example-dashboard.png) + +## CSV Import + +See [CSV Import](./docs/csv-import.md). diff --git a/docs/dashboard/docs/csv-import.md b/docs/dashboard/docs/csv-import.md new file mode 100644 index 0000000..f484442 --- /dev/null +++ b/docs/dashboard/docs/csv-import.md @@ -0,0 +1,30 @@ +# CSV Import + +## Grafana + +In Grafana there is a [csv-datasource plugin](https://grafana.github.io/grafana-csv-datasource/). This plug lets you visualize data from any URL that returns CSV data, such as REST APIs or static file servers. You can even load data from a local file path. But it is *not* importing CSV from Grafana into a data source (like InfluxDB) or uploading CSV data to a local file system. + +> For visualizing CSV data this is enough. Why should you duplicate data if the true data source is a CSV file located somewhere in the internet. If the CSV is not online, this might be another story. + +I added this plugin to our Grafana installation, so it's ready to be used. + +> I just mounted the whole [Grafana directory](../grafana/) into our Docker-Compose setup. Maybe we have to come up with a better solution. + +![Mounted directory](./images/mounted-grafana-directory.png) + +Garafana is running on [localhost on port 3000 with credentials admin:admin](http://localhost:3000). So let's get there to add the CSV file as a usable data source. + +> I added the CSV file to this repository and mounted it into our Docker-Compose setup. So the CSV file is also available in Grafana. Maybe we have to come up with a better solution.. + +As the CSV is reachable by Grafana, you can create a data source, there. + +![Mounting a CSV file](./images/grafana-csv-data-source.png) + +> grafana.ini is also mounted from [this repository](../grafana.ini). So local data mode is enabled. + +Whith Grafana having access to data in the CSV file, it's easy to access this data to create a dashboard. + +![Using CSV data](./images/grafana-csv-data.png) +![Defining types](./images/grafana-csv-data-type.png) +![Two boards in Grafana](./images/grafana-two-boards.png) + diff --git a/docs/dashboard/docs/images/database-connection.png b/docs/dashboard/docs/images/database-connection.png new file mode 100644 index 0000000..4e6117c Binary files /dev/null and b/docs/dashboard/docs/images/database-connection.png differ diff --git a/docs/dashboard/docs/images/grafana-csv-data-source.png b/docs/dashboard/docs/images/grafana-csv-data-source.png new file mode 100644 index 0000000..23b0cc8 Binary files /dev/null and b/docs/dashboard/docs/images/grafana-csv-data-source.png differ diff --git a/docs/dashboard/docs/images/grafana-csv-data-type.png b/docs/dashboard/docs/images/grafana-csv-data-type.png new file mode 100644 index 0000000..c243520 Binary files /dev/null and b/docs/dashboard/docs/images/grafana-csv-data-type.png differ diff --git a/docs/dashboard/docs/images/grafana-csv-data.png b/docs/dashboard/docs/images/grafana-csv-data.png new file mode 100644 index 0000000..ff51459 Binary files /dev/null and b/docs/dashboard/docs/images/grafana-csv-data.png differ diff --git a/docs/dashboard/docs/images/grafana-example-dashboard.png b/docs/dashboard/docs/images/grafana-example-dashboard.png new file mode 100644 index 0000000..cac204f Binary files /dev/null and b/docs/dashboard/docs/images/grafana-example-dashboard.png differ diff --git a/docs/dashboard/docs/images/grafana-two-boards.png b/docs/dashboard/docs/images/grafana-two-boards.png new file mode 100644 index 0000000..102d6e5 Binary files /dev/null and b/docs/dashboard/docs/images/grafana-two-boards.png differ diff --git a/docs/dashboard/docs/images/mounted-grafana-directory.png b/docs/dashboard/docs/images/mounted-grafana-directory.png new file mode 100644 index 0000000..61693da Binary files /dev/null and b/docs/dashboard/docs/images/mounted-grafana-directory.png differ diff --git a/docs/flow/README.md b/docs/flow/README.md new file mode 100644 index 0000000..19acbf5 --- /dev/null +++ b/docs/flow/README.md @@ -0,0 +1,109 @@ +# About + +> This folder will be mounted into the Node-RED runtime. So be careful. + +# Node-RED + +If you boot up our tech stack using `docker-compose` you already have a Node-RED instance running on [your local machine](http://localhost:1880/). + +Node-RED is an open-source, low-code, visual programming tool based on the concept of flow-based development. The idea behind it is to make it very easy to connect APIs, hardware devices, and anything else accessible over some type of network connection. + +## Core Concepts + +Nodes are the important part of Node-Red. They are the building blocks when working with Node-Red. Nodes are triggered by either receiving a message object from a previous node or an external event like an MQTT event. The node processes the message or event and then passes it on to the next node. + +A node can: +* Inject: Starts a flow by injecting a message or a payload. +* Change: Here you can do basic transformation or modification on the message object. +* Debug: Can be used to help developing flows by sending messages to the side bar. +* Switch: Here you can add logic (like sending the message to different nodes). +* Function: Add custom JavaScript for uses cases where simple nodes do not do the trick. + +Flows are an organized sequence of nodes. Let's do the "first steps" by creating a simple flow. + +## Plugins + +> The plugin folder is pushed into this Git repository and is mounted in Docker. Maybe we should use an own Docker file, instead. + +Node-RED uses plugins (e.g. for InfluxDB or own Dashboard capabilites). + +You can access the plugins in the right burger menu. + +![Plugins](./docs/images/node-red-plugins.png) + +## First steps + +For debuging I already added Node-RED's own dashboard (sure, we are going to use Grafana, later). + +![Overview](./docs/images/1-overview.png) + +The dashboard should be visible on the righmost menu item in Node-RED. + +![Dashboard item](./docs/images/dashboard.png) + +In Node-RED you can add a MQQT node to receive values from the power monitor. As we run in `docker-compose`you don't have to use the IP address of our Eclipse Mosquitto sever, but you can simply use `mosquitto` as the host nome. + +![MQTT Node](./docs/images/2-mqtt-node.png)git a + +To simply display the values in a gauge (or chart) you can hook it up to a gauge node. + + ![Gauge Node](./docs/images/3-gauge-node.png) + +In the dasboard section you have to create a tab. Inside this tab you have to create a group. + +![Dashboard Settings](./docs/images/4-dashboard-node.png) + +The tricky part is putting the gauges in the group. This is done in the gauge's settings (not in the dashboard's settings). + +![Gauge Node](./docs/images/3-gauge-node.png) + +You can view the dashboard in an (also mobile) web browser. + +![Mobile view](./docs/images/5-dashboard.png) + +Have a look at the flow also in [this repository](./00-dashboard-example/dashboard.json). + +## InfluxDB + +Already added to this project is [node-red-contrib-influxdb](https://flows.nodered.org/node/node-red-contrib-influxdb). You can use it's nodes to write and query data from an InfluxDB time series database. These nodes support both InfluxDB 1.x and InfluxDb 2.0 databases. At the time of this writing we are using [version 2.6 of InfluxDB on port 8086](http://admin:adminadmin@localhost:8086). + +In Node-RED we will be passing the power consumption number through MQTT. + +![Overview](./docs/images/influx-flow.png) + +By default this will be passed as a string, so we need to create a function to convert it into a Number before storing it in InfluxDB. + +Add a function node to the page and put the following code into the node: + +```JavaScript +msg.payload = Number(msg.payload) +return msg; +``` + +![Function](./docs/images/influx-function.png) + +You can forward this message to InfluxDB. + +![Influx Node](./docs/images/influx-node.png) + +The `URL`of our InfluxDB is `http://influxdb:8086`. In InfluxDB you have to create a `token` to connect: [Load Data -> API Tokens](http://localhost:8086/orgs/721027680173bf2f/load-data/tokens). + +![Influx Create Token](./docs/images/influx-create-token.png) + +You can use this `token` to create a connection in Node-RED. + +![Influx Connection](./docs/images/influx-connection.png) + +Then the measurements should be visible in [Influx Data Explorer](http://localhost:8086/orgs/721027680173bf2f/data-explorer?bucket=test). + +![Influx Data Explorer](./docs/images/influx-data-explorer.png) + +As the data is now stored in Influx, [let's create a dashboard in Grafana](../dashboard/README.md). + +# Links + +* [IoT Made Easy with Node-RED and InfluxDB](https://www.influxdata.com/blog/iot-easy-node-red-influxdb/) +* A great tutorial can be found at [microcontrollerlab.com](https://microcontrollerslab.com/esp32-mqtt-publish-multiple-sensor-readings-node-red/) + + + diff --git a/docs/flow/docs/images/1-overview.png b/docs/flow/docs/images/1-overview.png new file mode 100644 index 0000000..32c5fe8 Binary files /dev/null and b/docs/flow/docs/images/1-overview.png differ diff --git a/docs/flow/docs/images/2-mqtt-node.png b/docs/flow/docs/images/2-mqtt-node.png new file mode 100644 index 0000000..1b4955b Binary files /dev/null and b/docs/flow/docs/images/2-mqtt-node.png differ diff --git a/docs/flow/docs/images/3-gauge-node.png b/docs/flow/docs/images/3-gauge-node.png new file mode 100644 index 0000000..60c7f65 Binary files /dev/null and b/docs/flow/docs/images/3-gauge-node.png differ diff --git a/docs/flow/docs/images/4-dashboard-node.png b/docs/flow/docs/images/4-dashboard-node.png new file mode 100644 index 0000000..31bb1af Binary files /dev/null and b/docs/flow/docs/images/4-dashboard-node.png differ diff --git a/docs/flow/docs/images/5-dashboard.png b/docs/flow/docs/images/5-dashboard.png new file mode 100644 index 0000000..220db2f Binary files /dev/null and b/docs/flow/docs/images/5-dashboard.png differ diff --git a/docs/flow/docs/images/dashboard.png b/docs/flow/docs/images/dashboard.png new file mode 100644 index 0000000..9ee599c Binary files /dev/null and b/docs/flow/docs/images/dashboard.png differ diff --git a/docs/flow/docs/images/influx-connection.png b/docs/flow/docs/images/influx-connection.png new file mode 100644 index 0000000..60a8ba1 Binary files /dev/null and b/docs/flow/docs/images/influx-connection.png differ diff --git a/docs/flow/docs/images/influx-create-token.png b/docs/flow/docs/images/influx-create-token.png new file mode 100644 index 0000000..65e58d2 Binary files /dev/null and b/docs/flow/docs/images/influx-create-token.png differ diff --git a/docs/flow/docs/images/influx-data-explorer.png b/docs/flow/docs/images/influx-data-explorer.png new file mode 100644 index 0000000..a3dcc5f Binary files /dev/null and b/docs/flow/docs/images/influx-data-explorer.png differ diff --git a/docs/flow/docs/images/influx-flow.png b/docs/flow/docs/images/influx-flow.png new file mode 100644 index 0000000..c2a5e61 Binary files /dev/null and b/docs/flow/docs/images/influx-flow.png differ diff --git a/docs/flow/docs/images/influx-function.png b/docs/flow/docs/images/influx-function.png new file mode 100644 index 0000000..a961a80 Binary files /dev/null and b/docs/flow/docs/images/influx-function.png differ diff --git a/docs/flow/docs/images/influx-node.png b/docs/flow/docs/images/influx-node.png new file mode 100644 index 0000000..caa8f9b Binary files /dev/null and b/docs/flow/docs/images/influx-node.png differ diff --git a/docs/flow/docs/images/node-red-plugins.png b/docs/flow/docs/images/node-red-plugins.png new file mode 100644 index 0000000..62a84ef Binary files /dev/null and b/docs/flow/docs/images/node-red-plugins.png differ