In this tutorial we will use NodeMCU Mini, IR sensor and Visuino to send data to web analytics every time the IR sensor detects something. Watch a demonstration video.
Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.
Step 1: What You Will Need
Step 2: The Circuit
Connect GND from NodeMCU to breadboard pin (gnd)
Connect 5V pin from NodeMCU to breadboard pin (positive)
Connect Digital pin (3) to IR sensor pin (D0)
Connect IR sensor pin (VCC) to breadboard pin (positive)
Connect IR sensor pin (GND) to breadboard pin (GND)
Step 3: Start Visuino, and Select the NodeMCU ESP-12
To start programming the Arduino, you will need to have the Arduino IDE installed from here: http://www.arduino.cc/.
Please be aware that there are some critical bugs in Arduino IDE 1.6.6. Make sure that you install 1.6.7 or higher, otherwise this Instructable will not work! If you have not done follow the steps in this Instructable to setup the Arduino IDE to program ESP 8266!
The Visuino also needs to be installed. Start Visuino as shown in the first picture Click on the "Tools" button on the Arduino component (Picture 1) in Visuino When the dialog appears, select "NodeMCU ESP-12" as shown on Picture 2
Step 4: WiFi Setup
- Select NodeMCU ESP-12 and in the editor Modules>WiFi>Access Points, click on [...] button, so that "Access points " window will open.
In this editor drag the WiFi access point to the left side.
- Under "SSID" put the name of your WiFi Network
- Under "Password" put the access password for your WiFi network
Close the "Access points" window
On the left in editor select Modules>Wifi>Sockets, click on [...] button, so that "Sockets" window will open
Drag the TCP Client from right to the left side
Under Properties window set port: 80
Step 5: In Visuino Add Components
- Add Obstacle Avoidance component
- Add Formatted Text component
In Formatted Text put this under "text" value:
GET http://yourdomain.com/stat/piwik.php?idsite=2&action_name=VISITING-KITCHEN&uid=ARDUINO-ROBOT&rec=1&new_visit=1 HTTP/1.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 Accept-Charset: *.* Accept-Language: en-US,en;q=0.7
Step 6: In Visuino: Connecting Components
- Connect NodeMCU ESP-12 > Modules WiFi Sockets TCP Client1> Pin[Out] to NodeMCU ESP-12 Serial  pin [In]
- Connect FormattedText1 pin [Out] to NodeMCU ESP-12> Modules WiFi Sockets TCP Client1> Pin[In]
- Connect NodeMCU ESP-12 Digital Button 3 pin[Out to ObstacleAvoidance1 pin [In]
- Connect ObstacleAvoidance1 pin [Out] to NodeMCU ESP-12 Digital (TX1)(LED2)
- Connect ObstacleAvoidance1 pin [Out] to FormattedText1 pin [Clock]
Step 7: Understanding Piwik-Matomo Analytics
You can get Piwik-Matomo analytics here for free https://matomo.org/
You can read more about Image Tracking here: https://developer.matomo.org/api-reference/trackin...
- Getting the url for Visuino "FormattedText1" component:
- Go to Piwik-Matomo Analytics Dashboard
- In your Dashboard under Settings>Websites>Tracking Code
- Go to the "Image Tracking Link" section, there you will see a link that you will use for your tracking
something like this:
img src="http://yourdomain.com/stat/piwik.php?idsite=1&rec=1" style="border:0" alt="" /
Use the link: http ://yourdomain.com/stat/piwik.php?idsite=1&rec=1 and modify it by adding at the end this text:
-&action_name=VISITING-KITCHEN change "VISITING-KITCHEN" to something you prefer like "Doors opened"
-uid=ARDUINO-ROBOT change "ARDUINO-ROBOT" to something you will name your device like "Visuino-Device"
- Once you have the URL, put it to FormattedText1 component in Visuino (see the picture)
Step 8: Generate, Compile, and Upload the Arduino Code
In Visuino, Press F9 or click on the button shown on Picture 1 to generate the Arduino code, and open the Arduino IDE
In the Arduino IDE, click on the Upload button, to compile and upload the code (Picture 2)
Step 9: Play
If you power the NodeMCU module, and open your Piwik-Matomo dashboard on the web, every time a IR sensor detects an obstacle, you should see a new "Visitor" on the dashboard of your analytics
Congratulations! You have completed your Web Analytics project with Visuino. Also attached is the Visuino project, that I created for this Instructable. You can download and open it in Visuino: Download link