Published February 4, 2020 © GPL3+

Volume Control System using Bolt Wifi Module

This project demonstrates a simple, easy-to-build Volume Control System, made using the Bolt Wifi Module and a Buzzer.

BeginnerFull instructions provided2 hours421

Volume Control System using Bolt Wifi Module

Things used in this project

Hardware components

Bolt IoT Bolt WiFi Module

Buzzer

Male/Female Jumper Wires

USB-A to Micro-USB Cable

Software apps and online services

Bolt IoT Bolt Cloud

Story

1. Introduction

Sound is one of the five basic senses of a human being. What cannot be understood by looking at a picture or text can sometimes be comprehended with the help of sound or audio. The intensity of sound can vary from device to device and may end up becoming noise, i.e, an unwanted sound, if left unchecked. Therefore, to regulate the intensity or loudness of sound, we need a dedicated analog or digital system to suit our requirements.

A VolumeControlSystem does just that. Using a Volume Control System, we can adjust the loudness of sound based on our requirement. A Volume Control System is used or integrated with a variety of hardware and software applications including, but not limited to, loudspeakers, amplifiers, headphones, televisions, mobile phones, etc.

This project demonstrates a quite simple and easy-to-build Volume Control System, made using Bolt IoT Wifi Module.

2. How the project works?

The user interface of the project is a web page, which can be accessed through a web browser on a desktop/laptop, or the Bolt Mobile App on an Android or iOS mobile phone.

The web page has a slider which the user can adjust using their mouse on a desktop/laptop or using their fingers on mobile phones. The loudness of sound produced by the Buzzer depends on how far the user drags the slider. The more you drag the slider to the right, the more is the volume of the buzzer. Dragging the slider to the left will decrease the volume of the Buzzer.

The user interface also comes with an OFF button. If you want the Buzzer instantly muted, simply click or tap on the OFF button. The OFF button is right below the slider and should be visible to everyone.

However, it is to be noted that once you reach the maximum amount of API requests, the Buzzer will stop working. Bolt Cloud services a limited number of API requests for each user in a specific period of time. When an user adjusts the slider or clicks on the OFF button, an API request is sent to the Bolt Cloud, which is then accepted and an instruction is sent back to the Bolt Wifi module to change the volume of the Buzzer. If the user keeps on adjusting the slider or clicking the OFF button, they will exceed their API request quota and will be temporarily blocked from sending further requests.

3. How to build the project?

As mentioned earlier, the project can be built easily if you have access to the required hardware and software components. Simply follow the steps below and you will build your very own Volume Control System in no time.

3.1. Hardware Configuration

Assuming that you have access to all the hardware components listed in this project document, assemble them according to the steps below.

a. Take a two Male to Female connecting wires, and connect their male ports to the GND and 0 pin of the Bolt Wifi Module.

b. Connect the positive leg (the longer leg) of the Buzzer to the female port of the connecting wire, whose male port is connected to the 0 pin of the Bolt Wifi Module.

c. Connect the negative leg (the shorter leg) of the Buzzer to the female port of the other connecting wire, whose male port is connected to the GND pin of the Bolt Wifi Module.

d. Connect the mini-USB male port of the USB cable to mini-USB female socket of the Bolt Wifi module. Connect the other end of the USB cable, i.e, the USB-A male port to a desktop/laptop or a USB-A to Socket adapter.

3.2. User-Interface Configuration

Now that you've figured how the circuit connection of the project is made, it's time to develop the user interface and write the code necessary for the Volume Control System to actually work. Here's how you can do that.

a. Visit cloud.boltiot.com and log in to Bolt Cloud using your credentials.

b. You should be directed to the Device page. This page will list all the available devices connected to your Bolt Cloud account and will also indicate whether they are Online.

c. Go the Products tab by clicking on the Products icon on the left-hand side of the web page. This page will list all the available Products that you have made on the Bolt Cloud, if any.

d. Click on the Add Product button to create a new Product. This will open a Product creation menu.

e. Give any name of your choosing. Make sure there are no spaces if you're using more than one word. You can use underscores(_) instead of spaces. After filling in the name, upload a picture. If you can't think of one, simply take a picture of your circuit and upload it. Since we are using a Buzzer, which is an output device, select the radio button beside "Output devices". Select GPIO as we will be using a GPIO pin to connect the Buzzer to the Bolt Wifi module. Click on Done after filling in all the details. Click on Yes when a confirmation dialog box appears.

f. You should be now in your Product's page. Click on the Link icon near the top-right side of the page.

g. A dialog box will appear listing all the Bolt devices connected to your Bolt Cloud account. Select the device of your choice to link the Product to your hardware.

h. Now, click on the configure icon near the top-right side of the page.

i. Since we are not taking any input from the Buzzer as it is an output device, we do not need to assign variables to any pin in the Bolt Wifi Module. Click on the Code button on the top of the page.

j. You should be now in the Code page. Here's where we'll write the actual code for our project and develop the user-interface, which in this case is a web page.

k. Give an appropriate name to the file and choose the file extension as html as we will be writing an HTML code to develop our web page. In the black coding window, type your code. The code for this project is given in this documentation. Once you're done writing the code, click on the Save icon on the top-right hand side of the page. Agree to any confirmation message, then click on the Exit icon on the top-right hand side of the window, just beside the Save icon.

l. You should be re-directed to the Products page of the Volume Control System. Now that you have done everything, all is left for you is to finally run your IoT project. Click on the View icon and the web page shall open up for you. Details about how the project works is give in Section 2 of this guide.

vol_control.html

<!DOCTYPE html>
<html>
    <head>
        <title>Volume Control System</title>
        <script type="text/javascript" src="https://cloud.boltiot.com/static/js/boltCommands.js"></script>
        <script>
        setKey('{{ApiKey}}','{{Name}}');
        </script>
    </head>
    <body bgcolor="#1BEDF3" text="000000">
        <center>
           <h1><b><u>Volume Control System</u></b></h1>
           <div><button class="button buttonoff" onclick="digitalWrite(0, 'LOW');">OFF</button></div>
           <div><input class="slider" type="range" min="0" max="255" value="0" onchange="analogWrite(0,this.value);
           console.log('this.value');"></div>
           <style type="text/css">
            .button 
          {
               border: 2px solid #000000;
               color: white;
               padding: 40px;
               text-align: center;
               text-decoration: none;
               display: inline-block;
               font-size: 40px;
               font-family: Arial, Helvetica, sans-serif;
               box-shadow: 1px 1px 6px 0px black;
          }
             .buttonoff 
          {
               background-color: #E92C49;
               position: absolute;
               border-radius: 50%;
               top: 15%;
               left:45%;
          }
            .buttonoff:hover 
          {
               background-color: #B7031E
          }
           .buttonoff:active 
          {
               background-color: #B7031E;
               box-shadow: 0 5px #666;
               transform: translateY(4px);
          }
           .slider 
          {
               -webkit-appearance: none;
               width: 50%;
               height: 15px;
               border-radius: 5px;
               background: #4CAF50;
               outline: none;
               opacity: 0.7;
               -webkit-transition: .2s;
               transition: opacity .2s;
          }
           .slider:hover 
          {
               opacity: 1;
          }
           .slider::-webkit-slider-thumb 
          {
               -webkit-appearance: none;
               appearance: none;
               width: 25px;
               height: 25px;
               border-radius: 50%;
               background: #E54F40;
               cursor: pointer;
          }
           .slider::-moz-range-thumb 
          {
               width: 25px;
               height: 25px;
               border-radius: 50%;
               background: #E54F40;
               cursor: pointer;
          }
           </style>
        </center>
    </body>
</html>

Credits

Riko Banerjee

1 project • 0 followers

Embed the widget on your own site

Volume Control System using Bolt Wifi Module

Volume Control System using Bolt Wifi Module

Things used in this project

Hardware components

Software apps and online services

Story

1. Introduction

2. How the project works?

3. How to build the project?

3.1. Hardware Configuration

3.2. User-Interface Configuration

Code

vol_control.html

Credits

Riko Banerjee

Comments

Related channels and tags