Introduction: Bluetooth Communication Between LCD and HTML App

By https://www.behance.net/ErnestW
About: I'm interaction designer and lecturer with multidisciplinary skills in tangible and graphic interfaces. Most of my projects are related to coexistence of virtual and real world, thinking how they shape our min…

This tutorial is outdated and depreciated because of many changes in framework and switching to node-webkit.

It's been a while since first tutorial about my own project - Involt. This framework is something which connects HTML and CSS coding to physical world with devices like Arduino. It's similar to coding with responsive design frameworks like Bootstrap or Foundation. Involt is easy to use and great for prototyping purpose especially for designers. For example: instead of programming you can write CSS classes to define what each UI element will do with arduino, check the getting started page for quick overview.

After gathering feedback and fixing a lot of issues (If you read my previous tutorial earlier I can assure that port connection problems are fixed) I've added many improvements - one of them is classic Bluetooth support described in this tutorial.

Step 1: Requirements:

Hardware parts:

  1. Arduino UNO or other version.
  2. LCD display (WC1602A0, compatibile with LiquidCrystal library).
  3. 10k Potentiometer to adjust screen contrast.
  4. HC-05 Bluetooth module (or HC-06, will probably work fine).
  5. Breadboard and cables
  6. 220 Ohm resistor for connecting LCD backlight but this is not required

Software - Involt.

The Involt must be installed as Chrome Packaged App inside Google Chrome.

How to install?

  1. Download Involt (github link)
  2. In Chrome, open settings and go to extensions.
  3. Toggle developer mode on
  4. Press the "load unpacked extension" and select the www folder.

Now you can open the app in extensions list or with chrome app launcher. You can also create shortcut on desktop. The app opens the loader screen on startup, at this moment you cant't do anything with.it

According to Chrome API which is currently the base of Involt it is not working on Linux (also you can do this tutorial with serial communication without the bluetooth part).

Opening the index.html in browser will not work.

Step 2: HC-05 Bluetooth Configuration

I suggest to config the HC-05 with AT-MODE before wiring the circuit. There are many articles about configuring Bluetooth so I will focus only on important commands.

The easiest way to run AT is to connect HC-05 and arduino RX->RX and TX->TX and 3.3V to KEY pins. Then upload empty sketch to communicate with HC-05 directly in serial monitor. The HC-05 works in 3.3V logic, as far as I know the adapter is 5V tolerant and has resistors on RX/TX pins.

Change the connection baudrate to 38400 and turn "Both NL & CR" in serial monitor. If everything is correct after typing "AT" you should receive "OK" from the device. (if ERROR:(0) then type AT again). If everything is correct everything you send to device is confirmed with "OK".

Now write:

To change the speed (in the whole circuit I'm not going to use software serial so this speed should work fine):

AT+UART=57600,0,0

Set to slave mode:

AT+ROLE=0

To change the name of the device (not required but it's easier to find when multiple BT devices are discovered):

AT+NAME=INVOLT

To check the device address you can write this (not required because it's possible inside Involt app):

AT+ADDR

After that disconnect the device from AT mode. If everything is done you should be able to pair the device with your system (default HC-05 password is: 1234).

Step 3: Involt Bluetooth Configuration

It's time to configure Involt from software side for bluetooth communication.

For serial communication you don't have to configure anything. To make the framework work in Bluetooth mode there are some simple changes to do. First of all open the settings.js and change:

var isSerial = false;
var isBluetooth = true;

It's nice to know that the same app and sketch will work with default Serial communication.

Now pair the device. I'm using Windows 10 and I can only attach screenshots for this system. The HC-05 default password is 1234 - type this and wait for pairing. However, the device is paired but the connection inside app will not work at this moment. The app requires the UUID and address of the device.

Open the Chrome console to get the address (if you didn't use the AT mode) and UUID. To do this - launch the app, right click on the window and click to inspect the element. Now you should see (as in attached picture) the device list. The console gives you all necessary informations about devices.

Now open again the core/involt.js file and paste them to:

//These are my HC-05 settings, paste the values you got from the console.

var defaultBtAddress = "98:D3:31:90:4C:66";
var uuid = "00001101-0000-1000-8000-00805f9b34fb";

Then open the manifest.json and paste the UUID to "uuids". 

"uuids": [ "00001101-0000-1000-8000-00805f9b34fb" ],

Changes in manifest files requires reloading the app in Chrome extensions menu.

Step 4: Circuit

Now we have HC-05 configured for Involt. It's time to wire the circuit. Connect everything similarly to this scheme. I'm not using the SoftwareSerial library due to errors it can cause in transmitting data. HC-05 is connected directly to Arduino serial (after uploading the sketch you don't need to communicate via cable). Just remember to disconnect the RX/TX pins before uploading the sketch.

Keep in mind that there are different pin configuration for different hc-05 devices. I use CZ-HC-05 gamcu and it has different pinout.

If you want to turn on the backlight you can connect the first two pins from the right of lcd screens to 5V with 220 ohm resistor (second from right) and GND (first from right) but this is not required.

Step 5: Arduino Code

Involt from hardware point of view communicates with the app by transfering the variables in prepared sketch (in Involt/arduino folder). It's easy because it requires usually one line of arduino code per one line of HTML code. The numeric values are stored in involtDigital array and strings in receivedString array. The array index is the "pin" number which is actually used to have common number in software and hardware so you can easily access the same values. You will see how it works in "HTML input" step.

Because we want to send string from app to LCD, the data received is stored in receivedString array. For this tutorial this is the only thing to know about Involt arduino sketch. For liquidCrystal library read the documentation. More details about Involt arduino sketch are included on this site.

The final sketch will look like the attached file. Remember about disconnecting RX/TX before uploading sketch.

Attachments

Step 6: HTML Input

Syntax

Involt is really fast in HTML prototyping and it doesn't require any programming skills. There is CSS syntax that translates the UI element for communication with Arduino - each UI element classes will look like this:

<div class="ard [element] [pin] [value] [parameters]"></div>

You can read more about Syntax or check what UI elements are included in framework.

Input for LCD text

To create HTML input just write in index.html this single line of code:

<input class="ard input-write S0" placeholder="Type something">

The data will be sent on unclicking or hitting enter. The [pin] S0 defines where the string will go inside arduino sketch. The S0 value is same as receivedString0] in arduino sketch. The same is for example P6 value will be stored in involtDigital[6].

To create Submit button similar to HTML form button write this code. Let's create two inputs to display user name and surename:

<form>
	<p style="margin:20px">Please introduce yourself: </p>

	<input class="ard input-write S0" placeholder="Name"> 
	<input class="ard input-write S1" placeholder="Surename">

	<button type="button" class="ard submit-button">Submit</button>
</form>

If you have time you can play with CSS styles in core/framework.css. You can download the project files on next step.

Step 7: Results

I took a picture of working project to prove that Involt works fine. Now you know how to create simple HTML Chrome app with bluetooth connection. For not absolute beginners this tutorial should take no more than 30-40 minutes. I also uploaded the project files, remember about installing the project. Keep in mind that it's constantly updates so some changes may occur.

Feel free to ask about the project @: ernestwarzocha@gmail.com

If you have any suggestions for next tutorial on instructables send me a message.

Project website: involt.github.io

Github page: https://github.com/Involt/Involt

UPDATE

Thanks to Phonegap support you can use the same code, same arduino sketch and use it with android device - check Mobile Support Page. (You need to use most recent version of framework),

Attachments