Hi, I need help for a project I am currently working on.
Say I have connected 2 LEDs on Arduino UNO. Now I want to control them (On/Off) through an html page.
I have went through the instructables and Bolt IoT workshop. So links to those wont be of much help.
Can anyone help me with sample codes for both Arduino and the html page?
HTML code for led on/off: (What changes should be made?)
<!DOCTYPE html>
<html>
<head>
<title>HTML Button Tag</title>
</head>
<body>
<form>
<button name="ledon" value="OK" type="button">Press to light up</button>
<button name="ledoff" value="OK" type="button">Press for light off</button>
</form>
</body>
</html>
Arduino Code for on/off: (What changes should be made?)
int led_pin=10;
void setup()
{
pinMode(led_pin,OUTPUT);
}
void loop()
{
digitalWrite(led_pin,HIGH);
digitalWrite(led_pin,LOW);
}
Hi @sayakbhar!
I’m assuming that you are using only one LED for testing purposes since your code specifies only one led.
First of all, I would suggest you connect the LED directly to the bolt, makes life much easier.
If you still want to use the Arduino UNO you can connect the BOLT to the Arduino UNO via the Tx and Rx lines. After doing so you have to read the incoming data on the UART line. After you read the data you can use an If…Else condition to turn the LED on or off. You can use the code below to get started.
int led_pin=10;
void setup() {
// initialize both serial ports:
Serial.begin(9600);
//intialize the ledpin as output
pinMode(led_pin,OUTPUT);
}
void loop() {
// read from the UART port
if (Serial.available()) {
int inByte = Serial.read();
if(inByte == 1){
digitalWrite(led_pin,HIGH);
}
else if(inByte == 0){
digitalWrite(led_pin,LOW);
}
}
}
For the HTML web page part there are two approaches:
- Follow the instructions specified by Bolt here.
- You can make your own API requests.
I would suggest you go through the tutorial once more and post your doubts regarding the design of the HTML GUI because the second method would require you to setup your own private server and execute HTTP requests from your server. Why complicate life 
1 Like
Thank you for the code.
I know how to write the html code. But what must be added to the html code so that Bolt IoT sends the serial communication to arduino to turn off the LED, ie, how will the html send the “inByte” to arduino through the html code?
@sayakbhar
Hi Sayak,
The code should be similar to the one I have shared below. Please try and let me know if it works for you as I have written it but not tried out personally so we might need to fix some issues for interfacing it smoothly.
<html>
<head>
<script type="text/javascript" src="http://cloud.boltiot.com/static/js/boltCommands.js"></script>
</head>
<body onload="serialBegin(9600)">
<script type="text/javascript">
var isOn = False;
setKey('{{ApiKey}}','{{Name}}');
setDebug(False);
function changeImage(){
if(isOn == True){
document.getElementById('myImage').src='http://www.clker.com/cliparts/0/X/y/m/X/2/grey-led-off-hi.png';
isOn = False;
}
else{
document.getElementById('myImage').src='http://www.clker.com/cliparts/5/I/2/4/C/X/red-led-off-hi.png';
isOn = True;
}
}
</script>
<center>
<button onclick="serialWrite("1"); changeImage();" style="height:50px;width:75px">ON</button>
<img id="myImage" src="http://www.clker.com/cliparts/0/X/y/m/X/2/grey-led-off-hi.png" height="200" width="200">
<button onclick="serialWrite("0"); changeImage();" style="height:50px;width:75px">OFF</button>
</center>
</body>
</html>
You need to upload this code to your cloud account and link it to the product which is associated with your Bolt device. So that this page is displayed when you click on the Bolt Device on you cloud HOME page.
Thank you for the code.
Is there a way where I directly type the html address in the web browser instead of accessing it from cloud HOME page?
@sayakbhar Hi,
Happy to help with the code. Do let me know if it works.
About directly typing the html address, you can’t have shortcuts on the cloud currently. But you can host the Webpage on your local system or a VPS and then just type the address to access the page.
@pranav.kundaikar.inv I used your html code and this arduino code:
int led_pin=10;
void setup() {
// initialize both serial ports:
Serial.begin(9600);
//intialize the ledpin as output
pinMode(led_pin,OUTPUT);
}
void loop() {
// read from the UART port
if (Serial.available()) {
int inByte = Serial.read();
if(inByte == 1){
digitalWrite(led_pin,HIGH);
}
else if(inByte == 0){
digitalWrite(led_pin,LOW);
}
}
}
But it is not working. I have set the following in product creation:
Developer console -> Add product (+ Icon) -> Default Image and default page -> Yes for hardware configuration -> UART and one Common Separated Value and choose the time interval -> Deploy Configuration
What should be the CSV variable name? Where did I go wrong?
@sayakbhar
#include <SoftwareSerial.h>
SoftwareSerial mySerial(10, 11); // RX, TX
int led_pin=13;
void setup() {
Serial.begin(9600); //Serial monitor
mySerial.begin(9600); //Bolt Rx-Tx
pinMode(led_pin, OUTPUT);
}
char x;
String cmd;
void loop() {
if (mySerial.available() > 0)
{
cmd = "";
while (mySerial.available() > 0)
{
x = mySerial.read();
Serial.println(x);
cmd += String(x);
}
cmd.trim();
cmd.toLowerCase();
Serial.println("This is the command");
Serial.println(cmd);
mySerial.print("put your data here to be sent to BOLT");
Serial.println(cmd.length());
if (cmd.equals("1"))
{
Serial.println("Glowing the led");
digitalWrite(led_pin, HIGH);
}
else if (cmd.equals("0"))
{
Serial.println("putting the led of");
digitalWrite(led_pin, LOW);
}
else {
Serial.println("Command not defined");
}
}
}
Upload the above Arduino code and make the following changes in the connection:
- We will use preconnected LED on GPIO 13
- Pin 10 will be connected to TX pin of Bolt
- Pin 11 will be connected to RX pin of Bolt
- You can connect the USB cable between arduino and laptop and open serial monitor to track the print statments executed.
Try this out and let me know if this works.
1 Like
@pranav.kundaikar.inv
Yes I have tried it but it does not work but when I press the push data button the Arduino serial monitor reads as:
R
D
This is the command
rd
2
@sayakbhar What happens when you click the the Bolt device icon on the Home page? Do you get a page with ON & OFF? Let me know what output you get on Arduino when you click on and off.
Note: You don’t need to use push data button in this case, since push data is used to collect data using Bolt. We are currently trying to send commands to another microcontroller using Bolt.
@pranav.kundaikar.inv
There is no effect on pressing the on off button. Nothing shows up on the Arduino serial monitor neither the led is lit.
Yes I know there is no need of pushing data, I just said that because the only time arduino serial monitor gives a reading is when I press the push data botton on bolt cloud. Else there is no effect.
Hi…as per my knowledge you can connect the LED directly to the bolt. If you want to use the Arduino UNO you can connect the BOLT to the Arduino UNO via the Tx and Rx lines. After doing so you have to read the incoming data on the UART line. After you read the data you can use an If-Else condition to turn the LED on or off.
pcb assembly
1 Like
Hi there!
I am facing exactly same problem with the code, as serial monitor is not able to identify the output commands given by bolt.
Please help…
Hello,
I just figured out the right code both for the arduino and HTML.
ARDUINO:---------------------------------------->>>>
int led_pin=13;
void setup() {// put your setup code here, to run once:
Serial.begin(9600); //Begin Serial at 9600
Serial.setTimeout(50); //Timeout serial if readString is unavailable
pinMode(led_pin, OUTPUT);
}
void loop() {
String cmd = "";
if (Serial.available() > 0) {
// get incoming String
cmd = Serial.readString(); //Read input string from bolt
Serial.println(cmd); //Send same string back to bolt
if (cmd.equals("1"))
{
Serial.println("Glowing the led");
digitalWrite(led_pin, HIGH);
}
else if (cmd.equals("0"))
{
Serial.println("putting the led of");
digitalWrite(led_pin, LOW);
}
else {
Serial.println("Command not defined");
}
}
}
RX of arduino to TX of the BOLT
TX of arduino to RX of the BOLT
pin no. 13 of arduino to positive end of the LED
gnd pin of arduino to the negative end of the LED
BOLT CLOUD:--------------->
<!DOCTYPE html>
<html>
<head>
<title>Bolt IoT Platform</title>
<script type="text/javascript" src="https://cloud.boltiot.com/static/js/boltComma
nds.js"></script>
<script>
setKey('008ba9c8-c2e9-4b83-ad23-6d5f878765cb','BOLT7421808');
setDebug(False);
</script>
</head>
<body onload="serialBegin(9600)">
<script>
var isOn = False;
function changeImage(){
if(isOn == True){
document.getElementById('myImage').src='http://www.clker.com/cliparts/0/X/y/m/X/2/grey-led-off-hi.png';
isOn = False;
}
else{
document.getElementById('myImage').src='http://www.clker.com/cliparts/5/I/2/4/C/X/red-led-off-hi.png';
isOn = True;
}
}
</script>
<center>
<button onclick="serialWrite('1'); changeImage()" >ON</button>
<img id="myImage" src="http://www.clker.com/cliparts/0/X/y/m/X/2/grey-led-off-hi.png" height="200" width="200">
<button onclick="serialWrite('0'); changeImage()">OFF</button>
</center>
</body>
</html>
Now, check it will work 
happy learning
1 Like