3 servos + html

working with 1 servo this html and this code:

Photon:

Servo serv;
int pos = 0;

void setup() {
    serv.attach(D0);
    Spark.function("setpos", setPos);
    Spark.variable("getpos", &pos, INT);
}

void loop() {
}

int setPos(String pstn) {
    pos = pstn.toInt();
    serv.write(pos);
    return pos;
}

HTML code:

<html>
  <head>
    <style>
    body {
      margin: 1em auto;
      max-width: 45em;
      padding: 0.8em;
      background: white;
    }
    </style>
  </head>
  <body>
    <h1>Photon servo control</h1>
    <input type="range" min="0" max="180" value="0" onchange="showValue(this.value)"/>
    <span id="range">0</span>
    <script type="text/javascript">
    function showValue(newValue) {
      document.getElementById("range").innerHTML=newValue;
      var request = new XMLHttpRequest();
      var dev_id = '<your device id here>';
      var access = '<your access token here>';
      var data = 'params='+newValue+'&access_token='+access;
      var url = 'https://api.particle.io/v1/devices/'+dev_id+'/setpos/';
      request.open('POST', url, true);
      request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
      request.send(data);
    }
    </script>
  </body>
</html>

but when i try 2 servos i dont know how to do it like this html:

<html>
  <head>
    <style>
    body {
      margin: 1em auto;
      max-width: 45em;
      padding: 0.8em;
      background: white;
    }
    </style>
  </head>
  <body>
    <h1>Photon servo control</h1>
    <input type="range" min="0" max="180" value="0" onchange="showValue(this.value)"/>
    <span id="range">0</span>
    <script type="text/javascript">
    function showValue(newValue) {
      document.getElementById("range").innerHTML=newValue;
      var request = new XMLHttpRequest();
      var dev_id = '<your device id here>';
          var access = '<your access token here>';
      var data = 'params='+newValue+'&access_token='+access;
      var url = 'https://api.particle.io/v1/devices/'+dev_id+'/setpos/';
      request.open('POST', url, true);
      request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
      request.send(data);
    }
    </script>

    <h1>Photon servo control</h1>
    <input type="range" min="0" max="180" value="0" onchange="showValue1(this.value)"/>
    <span id="range1">0</span>
    <script type="text/javascript">
    function showValue1(newValue2) {
      document.getElementById("range1").innerHTML=newValue2;
      var request1 = new XMLHttpRequest();
     var dev_id = '<your device id here>';
          var access = '<your access token here>';
      var data1 = 'params='+newValue2+'&access_token='+access1;
      var url1 = 'https://api.particle.io/v1/devices/'+dev_id1+'/setpos1/';
      request1.open('POST', url1, true);
      request1.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
      request1.send(data1);
    }
    </script>


  </body>
</html>

don´t work and i dont know how to use the code on photon either… any advice/help?

this problem is solved thanks

Mind sharing how, so others can benefit as well?

1 Like

Hi all i have done some work on servos and html, but now i want to go ahead one more time, i want to do some input values like in this:

(ScruffR: Next but one post, due to forum decluttering)

but i dont want that bars but yes some tables where i can use input for the 3 servos at the same time like
input angle for 1st servo
input angle for 2nd servo
input angle for 3rd servo
"submit"
and the servos do it 3 times, any one have done this already? i didnt find any one…
i will share the code and give credits for it, thanks again

There is no need to open several threads all dealing with the same things.
I’ve moved your post from the other thread and closed/hidden the others to unclutter the forum.

1 Like

hi i have asking for some help some days ago and i have working with some already done code,
you can see the original code here
AGAIN NOT MY CODE I ONLY EDITED, DONT WANT CREDITS
NOTE: you can control from several Computers.

So, in my photon the code i used was on the link on the top but its only for 1 servo, but i need 3 servos, so i edited and see the result:

    // PARTICLE DONT NEED #INCLUUDE <servo.h>
    Servo serv;
    Servo serv1;
    Servo serv2;
    int pos = 0;
    
    int pos1 = 0;
    int pos2=0;
    
    void setup() {
        
        serv.attach(D2);
        Spark.function("setpos", setPos);
        Spark.variable("getpos", &pos, INT);
        
        serv1.attach(D0);
        Spark.function("setpos1", setPos1);
        Spark.variable("getpos1", &pos1, INT);
        
            serv2.attach(D3);
        Spark.function("setpos2", setPos2);
        Spark.variable("getpos2", &pos2, INT);
    }
    
    void loop() {
    }
    
    int setPos(String pstn) {
        pos = pstn.toInt();
        serv.write(pos);
        return pos;
    }
    
    int setPos1(String pstn1) {
        pos1 = pstn1.toInt();
        serv1.write(pos1);
        return pos1;
    }
    
    int setPos2(String pstn2) {
        pos2 = pstn2.toInt();
        serv2.write(pos2);
        return pos2;
    }

and the HTML will look like this:

    <html>
      <head>
        <style>
        body {
          margin: 1em auto;
          max-width: 45em;
          padding: 0.8em;
          background: white;
        }
        </style>
      </head>
      <body>
        <h1>Braço Esquerdo</h1>
        <input type="range" min="0" max="180" value="0" onchange="showValue(this.value)"/>
        <span id="range">0</span>
        <script type="text/javascript">
        function showValue(newValue) {
          document.getElementById("range").innerHTML=newValue;
          var request = new XMLHttpRequest();
         var dev_id = 'YOUR ID';
          var access = 'YOUR TOKEN';
          var data = 'params='+newValue+'&access_token='+access;
          var url = 'https://api.particle.io/v1/devices/'+dev_id+'/setpos/';
          request.open('POST', url, true);
          request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
          request.send(data);
        }
        </script>
    
        <h1>Braço Direito</h1>
        <input type="range" min="0" max="180" value="0" onchange="showValue1(this.value)"/>
        <span id="range1">0</span>
        <script type="text/javascript">
        function showValue1(newValue2) {
          document.getElementById("range1").innerHTML=newValue2;
          var request1 = new XMLHttpRequest();
          var dev_id1 = 'YOUR ID';
          var access1 = 'YOUR TOKEN';
          var data1 = 'params='+newValue2+'&access_token='+access1;
          var url1 = 'https://api.particle.io/v1/devices/'+dev_id1+'/setpos1/';
          request1.open('POST', url1, true);
          request1.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
          request1.send(data1);
        }
        </script>
    
    <h1>Tronco</h1>
        <input type="range" min="0" max="180" value="0" onchange="showValue2(this.value)"/>
        <span id="range2">0</span>
        <script type="text/javascript">
        function showValue2(newValue3) {
          document.getElementById("range2").innerHTML=newValue3;
          var request2 = new XMLHttpRequest();
          var dev_id2 = 'YOUR ID';
          var access2 = 'YOUR TOKEN';
          var data2 = 'params='+newValue3+'&access_token='+access2;
          var url2 = 'https://api.particle.io/v1/devices/'+dev_id2+'/setpos2/';
          request2.open('POST', url2, true);
          request2.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
          request2.send(data2);
        }
        </script>
    
    
      </body>
    </html>

this have taken me 4 hours to do it and now i have shared to you, make a good use of it. and thanks the developer on HERE