Ansab Shaikh
Published © 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.

BeginnerProtip2 hours257
Volume Control System using Bolt Wifi Module

Things used in this project

Hardware components

Male/Female Jumper Wires
Male/Female Jumper Wires
×2
Buzzer
Buzzer
×1
Bolt WiFi Module
Bolt IoT Bolt WiFi Module
×1

Software apps and online services

Bolt Cloud
Bolt IoT Bolt Cloud

Story

Read more

Schematics

Vol_control

Code

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 Using Iot Bolt</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 
        {     margin-top:30px;
               border: 2px solid #000000;
               color: black;
               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: blue;
               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

Ansab Shaikh
1 project • 0 followers

Comments