Results 1 to 4 of 4

Thread: Simple h-bridge web Server code to share

  1. #1
    Join Date
    Dec 2011
    Posts
    5,783
    Post Thanks / Like

    Default Simple h-bridge web Server code to share

    Being that I am using the Arduino Ide ,I assume this to be the correct forum .

    I have been experimenting with the nodemcu v3 and an l293d h bridge ic out of general interest .
    After much mucking about and learning I have finally got something that works reliably

    For those like me who are just learning and testing , I would like to share .

    How do I upload the code into a proper code box ?

    Thanks

  2. #2
    Join Date
    Dec 2011
    Location
    UK S80 postcode
    Posts
    1,386
    Post Thanks / Like

    Default Re: Simple h-bridge web Server code to share

    [*CODE*]

    [*/CODE*]

    Without the *

  3. #3
    Join Date
    Dec 2011
    Posts
    5,783
    Post Thanks / Like

    Default Re: Simple h-bridge web Server code to share

    Thank you Barnabybear

    Novice coding here so feel free to comment and cut my doings apart .
    This is some combined and borrowed code to control a single motor using 1/2 of the l293d ic in combination with 3 output pins of the nodemcu .
    Motor2 was just a label I used to differentiate the buttons defined .
    Have fun with this .
    Cheers




    /**
    *Credit to Idayu Sabri-MYBOTIC for their relay code .
    **/
    Code:
    #include <ESP8266WiFi.h>
    #include <WiFiClient.h>
    #include <ESP8266WebServer.h>
    #include <ESP8266mDNS.h>
    
    MDNSResponder mdns;
    
    // Replace with your network credentials
    const char* ssid = "ssid_here";
    const char* password = "password_here";
    
    ESP8266WebServer server(80);
    String webSite="";
    int ENABLE = 3;
    int DIRA = 4;
    int DIRB = 5;
    
    void setup(void){
      
      webSite +="<meta http-equiv='refresh' content='30'><title>Motor Control</title>\n";
      webSite += "<style>body{ background-color: #eccc33; font-family: Arial, Helvetica, Calibri; Color: #000033; }</style>\n";
      webSite +="<p> &nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>\n";
      webSite +="<button onclick='myFunction()'>HOME</button>";
      // Add your web server ip in place of *.*.*.* below ;)
      webSite +="<script>function myFunction() {window.location = 'http://*.*.*.*';}</script>";
      webSite +="<h1>Motor-Forward Control</h1><p>Motor 1 <a href=\"motor1on_cc\"><button>ON CC</button></a>&nbsp;<a href=\"motor1off\"><button>OFF</button></a></p>\n";
      webSite +="<h1>Motor-Reverse Control</h1><p>Motor 2 <a href=\"motor2on_ccw\"><button>ON CCW</button></a>&nbsp;<a href=\"motor2off\"><button>OFF</button></a></p>\n";
    
      
      // preparing GPIOs
      pinMode(ENABLE, OUTPUT);
      pinMode(DIRA, OUTPUT);
      pinMode(DIRB, OUTPUT);
      digitalWrite(ENABLE, LOW);
      digitalWrite(DIRA, LOW);
      digitalWrite(DIRB, LOW);
     
      
      Serial.begin(115200);
      WiFi.begin(ssid, password);
      Serial.println("");
      // Wait for connection
      while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
      }
    
      Serial.println("");
      Serial.print("Connected to ");
      Serial.println(ssid);
      Serial.print("IP address: ");
      Serial.println(WiFi.localIP());
      
     if (mdns.begin("esp8266", WiFi.localIP())) {
       Serial.println("MDNS responder started");
      }
        server.on("/", [](){
        server.send(200, "text/html", webSite);
        });
      server.on("/motor1on_cc", [](){
        server.send(200, "text/html", webSite);
        digitalWrite(ENABLE, HIGH);
        digitalWrite(DIRA, LOW);
        digitalWrite(DIRB, HIGH);
        });
      server.on("/motor1off", [](){
        server.send(200, "text/html", webSite);
        digitalWrite(ENABLE, LOW);
        digitalWrite(DIRA, LOW);
        digitalWrite(DIRB, LOW);
        });
      server.on("/motor2on_ccw", [](){
        server.send(200, "text/html", webSite);
        digitalWrite(ENABLE, HIGH);
        digitalWrite(DIRA, HIGH);
        digitalWrite(DIRB, LOW);
        });
      server.on("/motor2off", [](){
        server.send(200, "text/html", webSite);
        digitalWrite(ENABLE, LOW);
        digitalWrite(DIRA, LOW);
        digitalWrite(DIRB, LOW);
        });
        
      server.begin();
      Serial.println("HTTP server started");
    }
     
    void loop(void){
      server.handleClient();
      if(WiFi.status() != WL_CONNECTED)
      {
    
        Serial.println("");
        Serial.print("Wifi is disconnected!");
        Serial.println("");
        Serial.print("Reconnecting");
        Serial.println("");
        //WiFi.begin(ssid,password);
        
        while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
        }
    
      }
    
    }
    Last edited by angus40; 06-04-2019 at 06:02 AM.

  4. #4
    Join Date
    Dec 2011
    Posts
    5,783
    Post Thanks / Like

    Default Re: Simple h-bridge web Server code to share

    Much better motor control >>>>>

    If you are wanting to experiment with motor control , here is a sketch that I have hacked to give 2 variable pwm sliders for speed control .
    Also 2 switches for on off .
    This will enable control of a single motor in forward and reverse direction via sliders and an on/off switch for output enable .
    The extra switch I added as an aux for lights or relay etc.

    I was looking for simple motor control but could not find a sketch that did the h bridge nicely .
    Fortunately I found a pwm sketch that made sense and could be manipulated to suit .

    Here is what I hacked to work for me .
    You will need to add the new.h file for this to work .
    Cheers


    Motor control

    Code:
    
    #include <ESP8266WiFi.h>
    #include <WiFiClient.h>
    #include <ESP8266WebServer.h>
    
    
    #include "new.h" // html/web 
    
    #define STASSID "ssid_here" // name of router
    #define STAPSK  "password here" // pwd for router
    
    #define PWM_pin 5  // for variable output control
    #define PWM1_pin 13  // for variable output contro
    #define button2_pin 4 // basic on off switch
    #define button_pin 3 // basic on off switch
    
    const char* ssid = STASSID;
    const char* password = STAPSK;
    
    ESP8266WebServer server(80); // port 80 (standard)
    
    // prints out main page with pwm slider and button etc...
    
    void handle_root() {
     String root_code = html_page; // html code from .h file
     server.send(200, "text/html", root_code); // upload code to show webpage
    }
    
    // handling button press on webpage
    
    void handle_button() {
     String button_state = server.arg("button_state"); // on page ./setButton we are reading the variable 'button_state'
     
     String curr_state = "OFF"; // for sending back to the page
     if(button_state == "1")
     {
      digitalWrite(button_pin,HIGH); //LED ON
      curr_state = "ON";
     }
     else
     {
      digitalWrite(button_pin,LOW); //LED OFF
      curr_state = "OFF";  
     }
      server.send(200, "text/plane", curr_state); //Send state back to page
    }
      // handling button press on webpage
    
    void handle_button2() {
     String button2_state = server.arg("button2_state"); // on page ./setButton we are reading the variable 'button_state'
     
     String curr_state = "OFF"; // for sending back to the page
     if(button2_state == "1")
     {
      digitalWrite(button2_pin,HIGH); //LED ON
      curr_state = "ON";
     }
     else
     {
      digitalWrite(button2_pin,LOW); //LED OFF
      curr_state = "OFF";  
     }
     
     server.send(200, "text/plane", curr_state); //Send state back to page
    }
    
    // handling PWM: 
    
    void handle_pwm() {
     String pwm_val = server.arg("PWMval"); // reading from slider on html pagae
     Serial.print("slider val: ");
     Serial.println(pwm_val);
     analogWrite(PWM_pin,pwm_val.toInt()); // chaning the value on the NodeMCU board
     server.send(200,"text/plane","0"); // handling the webpage update
    }
    
    // handling PWM1: 
    
    void handle_pwm1() {
     String pwm1_val1 = server.arg("PWM1val1"); // reading from slider on html pagae
     Serial.print("slider3 val1: ");
     Serial.println(pwm1_val1);
     analogWrite(PWM1_pin,pwm1_val1.toInt()); // chaning the value on the NodeMCU board
     server.send(200,"text/plane","0"); // handling the webpage update
    }
    
    // setup for server and NodeMCU pins
    
    void setup(void){
      
      Serial.begin(115200);
      
      WiFi.begin(ssid, password);     //Connect to your WiFi router using ssid and pwd given above
      Serial.println("");
    
      // choose output for both PWM and button pins
      pinMode(PWM_pin,OUTPUT);
      pinMode(PWM1_pin,OUTPUT);
      pinMode(button_pin,OUTPUT);
      pinMode(button2_pin,OUTPUT);
    
      // Connection wait
      while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
      }
    
      // print some parameters pertaining to server IP etc.
      Serial.println("");
      Serial.print("Connected to ");
      Serial.println(ssid);
      Serial.print("IP address: ");
      Serial.println(WiFi.localIP());  // IP address given to NodeMCU
     
      server.on("/", handle_root);      // primary page where html from .h file will be shown
      server.on("/setPWM", handle_pwm); // handles the PWM values
      server.on("/setPWM1", handle_pwm1); // handles the PWM values
      server.on("/setButton", handle_button); // handles button values
      server.on("/setButton2", handle_button2); // handles button2 values
    
      server.begin();                  // begin server
      Serial.println("HTTP server started");
    }
    
    // loop for constant update of server pages
    void loop(void){
      server.handleClient();          //Handle tapping of buttons and sliders
    }

    new.h >>>>

    Code:
    const char html_page[] PROGMEM = R"=====(  
    <!DOCTYPE html>
    <html >
    <head >
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .slidecontainer {
      width: 50%;
    }
    
    .slider {
      -webkit-appearance: none;
      width: 100%;
      height: 15px;
      border-radius: 5px;
      background: #d3d3d3;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .0s;
      transition: opacity .2s;
    }
    
    .slider:hover {
      opacity: 1;
    }
    
    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #326C88;
      cursor: pointer;
    }
    
    .slider::-moz-range-thumb {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #326C88;
      cursor: pointer;
    }
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .slidecontainer {
      width: 100%;
    }
    
    .slider3 {
      -webkit-appearance: none;
      width: 100%;
      height: 15px;
      border-radius: 5px;
      background: #d3d3d3;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .0s;
      transition: opacity .2s;
    }
    
    .slider3:hover {
      opacity: 1;
    }
    
    .slider3::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #326C88;
      cursor: pointer;
    }
    
    .slider3::-moz-range-thumb {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #326C88;
      cursor: pointer;
    }
    
    /* Rounded switch 1 */
    
    .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
    }
    
    .switch input { 
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .slider1 {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
    }
    
    .slider1:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .2s;
      transition: .2s;
    }
    
    input:checked + .slider1 {
      background-color: #326C88;
    }
    
    input:focus + .slider1 {
      box-shadow: 0 0 1px #326C88;
    }
    
    input:checked + .slider1:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }
    
    .slider1.round {
      border-radius: 34px;
    }
    
    .slider1.round:before {
      border-radius: 50%;
      
    }
    
    /* Rounded switch 2 */
    
    .switch 2 {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
    }
    
    .switch 2 input { 
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .slider2 {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
    }
    
    .slider2:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .2s;
      transition: .2s;
    }
    
    input:checked + .slider2 {
      background-color: #326C88;
    }
    
    input:focus + .slider2 {
      box-shadow: 0 0 1px #326C88;
    }
    
    input:checked + .slider2:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }
    
    .slider2.round {
      border-radius: 34px;
    }
    
    .slider2.round:before {
      border-radius: 50%;
    }
    
    
    
    </style>
    </head>
    <body>
    
    <h2>Motor Control</h2>
    
    <div class="slidecontainer">
      <p>Reverse: <span id="slider1_p"></span></p>
      <input type="range" min="0" max="1023" value="0" class="slider"   id="Range">
    
     <div class="slidecontainer1">
        <p>Forward: <span id="slider3_p"></span></p>
        <input type="range" min="0" max="1023" value="0" class="slider"      id="myRange1">
    
    <p>Power: <span id="led_state">OFF</span></p> 
    <label class="switch">
      <input type="checkbox" onchange="state_change1(this)">
      <span class="slider1 round"></span>
    </label>
    </div>
    
    <p>Aux Power: <span id="led1_state">OFF</span></p> 
    <label class="switch">
      <input type="checkbox" onchange="state1_change(this)">
      <span class="slider2 round"></span>
    </label>
    </div>
    
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    
    <script>
    var slider = document.getElementById("Range");
    var output1 = document.getElementById("slider1_p");
    output1.innerHTML = slider.value ;
    
    slider.onchange = function() {
      output1.innerHTML = this.value ;
      pwm_change(this.value) ;
    }
    </script>
    
    <script>
    function pwm_change(val) {
      var xhttp = new XMLHttpRequest();
      xhttp.open("GET", "setPWM?PWMval="+val, true);
      xhttp.send();
    }
    </script>
    
    <script>
    var slider3 = document.getElementById("myRange1");
    var output = document.getElementById("slider3_p");
    output.innerHTML = slider3.value;
    
    slider3.onchange = function() {
      output.innerHTML = this.value;
      pwm1_change(this.value);
    }
    </script>
    
    <script>
    function pwm1_change(val) {
      var xhttp = new XMLHttpRequest();
      xhttp.open("GET", "setPWM1?PWM1val1="+val, true);
      xhttp.send();
    }
    </script>
    
    <script>
    function state_change1 (element) {
      var xhttp = new XMLHttpRequest();
      
      if (element.checked){
        xhttp.open("GET", "setButton?button_state=1", true);
        document.getElementById("led_state").innerHTML = "ON";
      } else if (!element.checked){
        xhttp.open("GET", "setButton?button_state=0", true);
        document.getElementById("led_state").innerHTML = "OFF";
      }
      xhttp.send();
    }
    </script>
    
    <script>
    function state1_change (element) {
      var xhttp = new XMLHttpRequest();
      
      if (element.checked){
        xhttp.open("GET", "setButton2?button2_state=1", true);
        document.getElementById("led1_state").innerHTML = "ON";
      } else if (!element.checked){
        xhttp.open("GET", "setButton2?button2_state=0", true);
        document.getElementById("led1_state").innerHTML = "OFF";
      }
      xhttp.send();
    }
    </script>
    
    </body>
    
    </html>
    )=====";
    Last edited by angus40; 06-09-2019 at 04:34 AM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •