Vue Experiments - How I'm Learning Vue My Arduino Way

VueJS 2.0 Logo

In a previous post I mentioned how I’d setup a repo called “arduino-experiments” to learn Arduino better and eventually to move onto ESP32 and ESP8266 chips. The repo was set up with a directory structure with a general set of rules and I’d have all my experiments in different directories. With each experiment getting more and more difficult. As this has gone on I’ve learnt far better, easier and faster with practical examples and its given me much more focus and motivation in my learning. Even producing actual production items such as my LCD displaying temp/hum sensor unit.

So I decided why not do the same for VueJS

I’ve tried learning VueJS a few times and failed miserably due to having little structure and using multiple courses with no solid line guiding me., But as I’d found success in thre Arduino way I decided to buckle up and use the same method.

Gitlab Logo

So say hello to VueJS2.0 Experiments

This repo is hosted on Gitlab (my preffered choice for work and ‘proper’ projects due to its free nature and CI/CD features).

You can check out the repo and whats going on at any time at the link above.

My first port of call with this has been to use a Udemy course by Maximilian Schwarzmüller which has a 4.7 rating and if not at time of blog I’ve picked up for $10. Its a fantastically detailed look into Vue and I’ve started it form the beginning and I’m just getting into doing the basic getting it working in JSFiddle and moving onto doing full Single Page apps late rin the course.

Arduino Experiments


I’ve recently begun creating a repo under my account with a range of related sensor-based experiments. These all have a final goal in mind.

However as I planned to build a multitude of static LCD displaying sensors around the home I came across chips called the ESP8266 and ESP32. They seemed to be cut-down Arduino’s with WiFi. The absolute panacea people had been waiting for to develop the perfect IoT devices.

But before I could run with these devices dealing with Wi-Fi conectivity and this acronym I kept hearing (MQTT) which seemed to make ESPXX solution sound more complicted I ewanted to conquer Arduino sensing and displaying first.

So that’s what I did and that’s what the repo is for. To first master the arduino then moive onto the ESP.

At first each room will have an Arduino showing one or more of the following:

  • Temperature ©
  • Relative Humidity
  • Light (LDR)
  • Microphone (either actual sound or just the sound level in decibels which can be worked out using formulae).
  • Barometric pressure (maybe redundant in multiple rooms of a home).
  • Carbon Monoxide levels
  • Cardon Dioxide levels
  • Other gases (check out the sheer number of MQ sensors!)
  • Dust levels (courtesy of a rather expensive Sharp Electronics dust sensor).

All of the above will then be put up on a dashboard. So far I’m unsure whether to keep it local and build my own Flask API or use one of the many IoT services out there.

Hang on I thought you said “Arduino”, what’s this ESP-whatsit?

Great question no one asked but I’m pretending you did! The ESP8266 & upgraded ESP32 are a group of chips developed by a company called Espressif Systems as a low cost Wi-Fi chip with full TCP/IP capability. I describe them to people as “chopped down Wi-Fi Arduinos the size of a chunky nano version”.

So it has digital inputs, runs at 3.3v (which can be a bugger as most sensors can be 5v). It has WiFi obviously and a number of inputs and outputs including CLK digital 1 analog GPIO pins and others depending on the specific brand. Some of the more popular ones are:

All of them offering something a bit different but still a spin on the basic chip design of the ESP8266/ESP32.

ESP8266 Example Pinout

ESP8266 Pinout

ESP32 Example Pinout

ESP32 Pinout

The Future

So what happens when I feel happy I’ve conquered the various sensors, displays and experiments with the Arduino? Build them in ESP32 and ESP8266 versions of course and use one of the serviucres mentioned in another post or my own local Flask dashboard and API. Here’s to an exciting IoT future.

15 IoT Dashboards To Display Your Data


Eveyone loves a list and this list covers IoT dashboard and services for hackers and makers that can use it for their IoT devices such as their ESP8266 or sensor connected Raspberry Pi.

  1. - no prices displayed which is always a red flag for me but this is a self install system anyway. A bit like Gitlab as opposed to GitHub. One thing they offer is a Community Edition (free) and a Professional Edition with value added features (paid). As an installable service this would most likely end up on one of my home mini computers such as the Banana or Orange Pi.
  2. - a not-so-generous free edition allows you to hook up 2 devices for free so you can at least get a very basic feel of what a dashboard of sensors in your home would look like. To be fair they do have a more reasonable Maker price range for just $3.95 at time of writing which enables connecting up to 20 devices. But if you check out my next article on the sorts of data you can collate then you will soon fill that quota and be needing the moire expensive range.
  3. Samsung ARTIK - I didn’t havre greatr success with this the first time I tried using it with my Amazon Alexa Echo Plus which seeemed capable of detecting a few YeeLights then doing nothing with them. But since then I’ve decided to take another look and they seem to offer a generous package. 100k messages (sensor updates) per month and 30 day retention. The retention period is shortish but it seems pretty good from the outside and I look forward to making this one of the services I check out first.
  4. - NOT actually FREE!. They have prices ranbging from $12 up and I have no idea why they keep their existing name because I don’t even see a way of downloading a community edition for local install. This is definitely a service I wouldn’t recommend or use.
  5. - A service that likes the idea of hiding pricing and offering free trials and free this and free that then right at the bottom “Pricing”…$29 p/m for the lowest offering.
I really wish services wouldn't hde their pricing. I don't care how good a service is - if it isn't straight and upfront with its pricing I don't care how good it is - I'm not interested.
5. [Maniflux]( - A free downloadable and also hostable solution that seems to have some great features. It's a shame its not as popular as some of the other snazzier platforms out there and if you wanted to get involved in the development of it checkout their [GitHub](

The Others to Follow Shortly

Due to unforseen circumstances the rest will follow in a day or two.

Installing Arduino's Online IDE Create on Arch Linux

Arduino Create is the online sketch editor available for writing you sketches online for uploading to whatever Arduino tech you may have. Your sketches are kept safely in the cloud acessible form anywhere you have a PC and an Arduino. Once you get used to the workflow its handy to be able to keep a dev board handy on you and login in whjen you have 5 mins during a lunch break to fiddle with your sketch after having an idea or two.

It does all this by installing a plugin dependent on the OS you’re runnning. They support Windows, OSX, Linux & ChromeOS.

In this blog I’ll concentrate on Arch Linux. As it’s got a reputation for being prickly and I did have a couple of errors on install so I thought I’d share the soilutions so you can get the benefits of using Arduino Create on your Arch install like I am.

All in all the Arduino people have done a great job of making this plugin and incredibly easy piece of kit to get running. But as wiuth everything Linux its hard to cover every base.

So lets get started and by the end you should have a working Arduino Create account thgat can iupload sketches to your board.

If you have any problems feel free to leave a comment with your problem and I’ll see what I can do.

1. Install Dependencies

These are Arch-sepcific and were the first hurdle I hit when I simply followed the instructions. Be sure to run the following:

yaourt -S lib32-libindicator-gtk3 lib32-libappindicator-sharp lib32-libindicator-gtk2 libindicator-gtk2 libindicator-gtk3 libindicator-sharp python-libindicator

2. Setup Arduino Create Account

Follow the online instrucvtions to setup your account and after confirming your email at the end you’ll be given a download file in tar.gz format containing a single .run file. At the time of writing my archive contained the file: This file should already have its permissions set to be able to run but if not then siple chmod +x [FILENAME] then run it on the terminal as so ./ - don’t forget your filename will be different so don’t just copy/paste mine verbatim.

3. Complete Installation

Once the installation is complete you can either continue form here or shutdown the installation file (this required me to manually kill the process). To later launch the client for future use you will run the Arduino_Create_Bridge executable file from the installation directory you chose upon install. This defaults to something like ~/ArduinoCreateAgent-1.1/Arduino_Create_Bridge.

When you run this and visit the Arduino Create online editor its advisable to follow the on-screen tour to get a feel for whats available and how to manage libraries and examples.

Creating a Breathalyzer with an Arduino and MQ-3 Gas Sensor

I got this idea after seeing all the available MQ-sensors at which each promised to detect a different gas.

Some Sensors Avilable

  • MQ-2 - Smoke Gas and LPG/Butane
  • MQ-3 - Alcohol/Ethanol. As mentioned in the datashseet to properlky calibrate these sensors you would need to be able to properly isolate the sensor in an area with an exact level of the gas you wish to sense for.So for alcohol have th sensor isolated in 0.4mg/l to gain a baseline. Fo rthis experiment the calibration was more ad-hoc.
  • MQ-6 - Made for domestic detection of Liquefied Petroleum Gas (LPG) or Liquefied Natural Gas (LNG).
  • MQ-7 - Carbon Monoxide detector (the one I thought could be used most usefully).
  • MQ-8 - Specifically designed to detect hydrogen leaks in the area of the sesor.
  • MQ-9 - Fo rtestiung for the presence of Carbon Monoxide (CO) and I had the idea later of trying to create an example carbon monoxide detector.
  • MQ-135 - This is a multi-purpose gas sensor capable of detecting gases including CO2, Alcohol, Benzene, Nitrogen Oxide, Ammonia (NH3), etc. You should be mindful of the attached callibration pot on the snsor and the datasheet when deciding what to calibrate for specifically.

Caveat and Warning

Though obviously none of the detectors I or any othe rmaker may build using these sensors has likely passed the stringent safety checked required to go to market they make for interested testing and calibrating of the sensor with your Arduino setup.


The setup was pretty simple and my fiurst decision was to use an Arduino Nano over the Uno as I didn’t need anywhere near the pins required of a full board.

See the Fritzig image below to see the wire up. You may notice a difference in the coloutr of the sires betwen mine and the diagram. Thats because I changed my mind during the diagram.

NOTE: Not all MQ sensors come with the same PCB breakout board pinouts. Be sure to double check the pins before hookup

Circuit Diagram

Here’s a link to the Fritzing file: /2018/02/Creating-a-Breathalyzer-with-an-Arduino-and-MQ-3-Gas-Sensor/circuit-design.fzz

Wiring Instructions

On the MQ-3 breakout board the pins are as follows (as it faces you):

  1. Vcc (+5V)
  2. Ground (GND)
  3. D0 (Digital)
  4. A0 (Analog)

Each connects into corresponding pins into the Arduino Nano. If the diagram isn’t clear then:

  • MQ-3 Pin 1 -> 5V Pin on Arduino
  • MQ-3 Pin 2 -> GND on Arduino
  • MQ-3 Pin 3 -> Digital 8 pin on Arduino
  • MQ-4 Pin 4 -> Analog 0 pin on Arduino

The LED lights up when ethanol/acohol is detected in the air. At base vcalibration this stayed unlit until I placed Bonjela and Alcohol hand wash near the sensor at which point the LED lights up.

Watching the serial monitor als shows the Analog reading coming from D8 increases at the presence of the alcohol sources. The biuggest imcrease was seen by being placed near Bonjela. Contrary to my original hypothesis.

Starting analog readouts are around 1-200. When alcohol is introduced this increases to around 7-800.

Arduino Source

The source was written usining PlatformIO whose source is saved in *.cpp files. They have a single header at the top


All Photos Of Project As Finished

See the photos with the semi-completed projct in this Google Album Link:

Or check out thesre one or two to see how they turn out: