HTML ws-boe-bot-btns-ir-speed Help required please.

SVW · 2023-02-16 13:43

Hi, I'm trying to modify the Parallax HTML example ws-boe-bot-btns-ir-speed to use with an ESP8266 and iPhone. My HTML knowledge is very limited and can't find anywhere which shows me how to have multiple sliders on a web page which is accessible by a BS2.

I would like 2 or more sliders on the page with var sent to BS2.
var speed1Str = "X" + speed1Chars; var speed2Str = "Y" + speed2Chars;

Clumsy modified code below. Where am I going wrong? Any help would be welcome.
Thanks
Stuart

<!DOCTYPE HTML>
  <html>
  <head>
    <style>
      a{
        background-color:#B22222;
        border:1px solid #006600;
        display:inline-block;
        color:white;
        font-size:18px;
        margin:20px;
        width:100px;
        height:55px;
        font-family:Arial;
        cursor:pointer;
        padding-top:37px
      }
      a:hover{background-color:white;color:#339933;}
    </style>
  </head>
  <meta name="viewport" content="width=450, height=760, initial-scale=0">
  <body bgcolor=green>
    <div align="center">
    <br>
      <font face="Arial" size=5 color="white">
        StuartControl1Test
      </font>
        <br> 

      <font face="Arial" size=2 color="white">
      <p id = "servoSpeed1"> Speed1 = 50</p>
      000
      <input type="range" id="position" 
      min="0" max="100" value="50" style="width: 280px" 
      onchange="updateSpeed1(id);">
      100
      </font>
      <br>

          <font face="Arial" size=2 color="white">
      <p id = "servoSpeed2"> Speed2 = 50</p>
      000
      <input type="range" id="position" 
      min="0" max="100" value="50" style="width: 280px" 
      onchange="updateSpeed2(id);">
      100
      </font>
      <br>

      <a onclick="navBtns('F');">Forward</a>
      <br>
      <a onclick="navBtns('L');">Left</a>

      <a onclick="navBtns('S');">Stop</a>
      <a onclick="navBtns('R');">Right</a>
     <br>
      <a onclick="navBtns('B');">Reverse</a>
      <br>

      <a onclick="navBtns('I');">On</a>
      <font face="Arial" size=2 color="white">
        Turret
      <a onclick="navBtns('O');">Off</a>

    </div>
  </body>
  <script>
    var wsURL = "ws://" + window.location.host + "/ws/a";
    var ws;

    var img = new Array();
    var idx = 3;

    window.addEventListener("load", init, false);

    function init()
    {
      ws = new WebSocket(wsURL);
      ws.onopen = onOpen;
      ws.onclose = onClose;
      ws.onmessage = function (evt) { onMessage(evt); };
      ws.onerror = onError;
    }

    function navBtns(direction) 
    {
      console.log(direction + "000");
      ws.send(direction + "000");
    }

    function updateSpeed1(sliderId) 
    {
      var displaySpeed1 = document.getElementById("servoSpeed1");
      var speed1 = document.getElementById(sliderId).value;
      var speed1Chars = ("000" + speed1).substr(-3);
      displaySpeed1.innerHTML = "Speed1 = " + speed1Chars;
      var speed1Str = "X" + speed1Chars;
      console.log(speed1Str);
      ws.send(speed1Str);
    }

    function updateSpeed2(sliderId) 
    {
      var displaySpeed2 = document.getElementById("servoSpeed2");
      var speed2 = document.getElementById(sliderId).value;
      var speed2Chars = ("000" + speed2).substr(-3);
      displaySpeed2.innerHTML = "Speed2 = " + speed2Chars;
      var speed2Str = "Y" + speed2Chars;
      console.log(speed2Str);
      ws.send(speed2Str);
    }

  </script>
<html>

SVW · 2023-02-16 13:51

    var wsURL = "ws://" + window.location.host + "/ws/a";
    var ws;

    var img = new Array();
    var idx = 3;

    window.addEventListener("load", init, false);

    function init()
    {
      ws = new WebSocket(wsURL);
      ws.onopen = onOpen;
      ws.onclose = onClose;
      ws.onmessage = function (evt) { onMessage(evt); };
      ws.onerror = onError;
    }

    function navBtns(direction) 
    {
      console.log(direction + "000");
      ws.send(direction + "000");
    }

    function updateSpeed1(sliderId) 
    {
      var displaySpeed1 = document.getElementById("servoSpeed1");
      var speed1 = document.getElementById(sliderId).value;
      var speed1Chars = ("000" + speed1).substr(-3);
      displaySpeed1.innerHTML = "Speed1 = " + speed1Chars;
      var speed1Str = "X" + speed1Chars;
      console.log(speed1Str);
      ws.send(speed1Str);
    }

    function updateSpeed2(sliderId) 
    {
      var displaySpeed2 = document.getElementById("servoSpeed2");
      var speed2 = document.getElementById(sliderId).value;
      var speed2Chars = ("000" + speed2).substr(-3);
      displaySpeed2.innerHTML = "Speed2 = " + speed2Chars;
      var speed2Str = "Y" + speed2Chars;
      console.log(speed2Str);
      ws.send(speed2Str);
    }

iseries · 2023-02-16 16:56

Your missing a slash on the last html </html>

There is no function defined for onOpen, onClose, and onError;

Do you have the unmodified code?

I get the error : WebSocket connection to 'ws://ws/a' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED

Mike

SVW · 2023-02-16 20:50

Hi Mike,
Here is the original HTML file on attached word doc. (I wasn't allowed to upload an HTML file, file format not allowed) As you can see there is only one slider for speed control.
Sending variable V var speedStr = "v" + speedChars;
I am using a modified version on my iPhone but would like to have 4 sliders ( and remove any IR detection code) .
I have spent many hours Googling this and trying various things but to no avail.
Thanks for your help.
Stuart

iseries · 2023-02-16 22:42

Looks like everything is there and should work. You need to add the open, close, and error functions along with onMessage events.

Here is the code I used. I don't have the bs2 code though.

What are you using for a web browser to test this?

<html>
  <head>
    <style>
      a{
        background-color:#B22222;
        border:1px solid #006600;
        display:inline-block;
        color:white;
        font-size:18px;
        margin:20px;
        width:100px;
        height:55px;
        font-family:Arial;
        cursor:pointer;
        padding-top:37px
      }
      a:hover{background-color:white;color:#339933;}
    </style>
  </head>
  <meta name="viewport" content="width=450, height=760, initial-scale=0">
  <body bgcolor=green>
    <div align="center">
    <br>
      <font face="Arial" size=5 color="white">
        StuartControl1Test
      </font>
        <br> 

      <font face="Arial" size=2 color="white">
      <p id = "servoSpeed1"> Speed1 = 50</p>
      000
      <input type="range" id="position" 
      min="0" max="100" value="50" style="width: 280px" 
      onchange="updateSpeed1(id);">
      100
      </font>
      <br>

          <font face="Arial" size=2 color="white">
      <p id = "servoSpeed2"> Speed2 = 50</p>
      000
      <input type="range" id="position" 
      min="0" max="100" value="50" style="width: 280px" 
      onchange="updateSpeed2(id);">
      100
      </font>
      <br>

      <a onclick="navBtns('F');">Forward</a>
      <br>
      <a onclick="navBtns('L');">Left</a>

      <a onclick="navBtns('S');">Stop</a>
      <a onclick="navBtns('R');">Right</a>
     <br>
      <a onclick="navBtns('B');">Reverse</a>
      <br>

      <a onclick="navBtns('I');">On</a>
      <font face="Arial" size=2 color="white">
        Turret
      <a onclick="navBtns('O');">Off</a>

    </div>
  </body>
  <script>
    var wsURL = "ws://" + window.location.host + "/ws/a";
    var ws;

    var img = new Array();
    var idx = 3;

    window.addEventListener("load", init, false);

    function init()
    {
      ws = new WebSocket(wsURL);
      ws.onopen = onOpen;
      ws.onclose = onClose;
      ws.onmessage = function (evt) { onMessage(evt); };
      ws.onerror = onError;
    }

    function navBtns(direction) 
    {
      console.log(direction + "000");
      ws.send(direction + "000");
    }

    function updateSpeed1(sliderId) 
    {
      var displaySpeed1 = document.getElementById("servoSpeed1");
      var speed1 = document.getElementById(sliderId).value;
      var speed1Chars = ("000" + speed1).substr(-3);
      displaySpeed1.innerHTML = "Speed1 = " + speed1Chars;
      var speed1Str = "X" + speed1Chars;
      console.log(speed1Str);
      ws.send(speed1Str);
    }

    function updateSpeed2(sliderId) 
    {
      var displaySpeed2 = document.getElementById("servoSpeed2");
      var speed2 = document.getElementById(sliderId).value;
      var speed2Chars = ("000" + speed2).substr(-3);
      displaySpeed2.innerHTML = "Speed2 = " + speed2Chars;
      var speed2Str = "Y" + speed2Chars;
      console.log(speed2Str);
      ws.send(speed2Str);
    }
    function onMessage(evt)
    {
        var msg = evt.data;
        console.log(msg);
        //useMcuReply(msg);
    }
    function onOpen()
    {
      console.log("Connection Open!");
    }

    function onClose()
    {
      console.log("Connection was closed!");
    }

    function onError()
    {
      console.log("Connection Error!");
    }
  </script>
</html>

Mike

SVW · 2023-02-17 12:02

Hi Mike,
Thanks for looking at this.
The slider problem still exists. The attached word doc (screen shot) shows that the first slider X works fine but when the Y slider is moved it has the same value as the X. The Y value is not updating? This is on the HTML page as well as the Debug page. (I did add the open, close, and error functions but had to use the original Boe bot html)
The attached BS2 code still needs modified later to process 4 slider values.
I'm using Chrome for testing.
Hopefully updating the Y var is a simple fix.
Regards
Stuart

iseries · 2023-02-17 16:47

Ok, in this code you need to change > position> to > position2>

Having two elements with the same id is bad.

      <font face="Arial" size=2 color="white">
      <p id = "servoSpeed2"> Speed2 = 50</p>
      000
      <input type="range" id="position2" 
      min="0" max="100" value="50" style="width: 280px" 
      onchange="updateSpeed2(id);">
      100
      </font>

I have attached the html page I used. Change the extension to .html from .txt.

Test Page

I am using windows with Microsoft Edge with the debug window turned on so I can see the console logs used on the page. The websocket errors are because the page is running on my desktop and not on the Wifi card.

Mike

SVW · 2023-02-18 10:48

Hi Mike,
Thanks very much for spotting that id error. I had looked at that code for a long time but with my very limited HTML knowledge presumed it was a problem further down.
Doc attached showing it working.

Thanks again, much appreciated.
Stuart

iseries · 2023-02-18 17:42

Glad you got it working. HTML is not easy to write by hand.

Mike

HTML ws-boe-bot-btns-ir-speed Help required please.

Comments