-->
Page 1 of 1

ESP8266 Micropython webserver Android problem

PostPosted: Fri Jan 05, 2018 1:02 pm
by Svec52
Hello,
i have RC car project with ESP8266 12e running Micropython. ESP is in AP mode and it hosts HTML page that contains two sliders (one for steering and one for drive speed). Values of both sliders are sent by AJAX request every 200 milliseconds. When controlling with my laptop, everything works fine, on my old Android phone (HTC Desire 200, Android 4.0) it runs great too.
But, when I want to control the car with my current phone (Huawei P8 lite, Android 6.0), it runs for about 2 minutes and then it just stops working. With Xiaomi Redmi 4x it didn't even load the HTML page.
Can you tell me, where might be the problem please?

Thanks for replies.

here is the python code:

Code: Select allimport socket
import machine

f = open('html.html')
html = f.read()
f.close()

servo = machine.PWM(machine.Pin(4), freq=50)
fwd = machine.PWM(machine.Pin(12), freq=50)
bwd = machine.PWM(machine.Pin(14), freq=50)

def speed(i):
    if i > 300:
        i = i-300
        fwd.duty(i)
        bwd.duty(0)
    elif i < -300:
        i = i*(-1)
        i = i-300
        fwd.duty(0)
        bwd.duty(i)
    else:
        fwd.duty(0)
        bwd.duty(0)

addr = socket.getaddrinfo('0.0.0.0', 80)[0][-1]

s = socket.socket()
s.bind(addr)
s.listen(1)

while True:
    conn, addr = s.accept()
    request = conn.recv(1024)
    conn.sendall('HTTP/1.1 200 OK\nConnection: close\nContent-Type:text/html\n\n')
    request = str(request)
    ix = request.find('X')
    iy = request.find('Y')
    iz = request.find('Z')
    if ix > 0 :
        ie = request.find(' ', ix)
        ValX = int(request[ix+1:iy])
        ValY = int(request[iy+1:iz])
        servo.duty(ValX)
        speed(ValY)           
    else:
        conn.sendall(html)
    conn.sendall('\n')
    conn.close()


and the HTML:

Code: Select all<!DOCTYPE html>
<html>
  <head>
    <meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;' name='viewport'/>
    <title>Ferrari F430</title>
    <style>
       
    input[type=range]::-moz-range-thumb {
    width: 40px;
    height: 40px;
    background: black;
    }
   
    input[type=range] {
    -webkit-appearance: none;
    height: 5px;
    background: lightgrey;
    outline: none;
    position:absolute;
    }
   
    input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background: black;
    }
    </style>
  </head>
  <body>       
    <input type='range' ontouchend='resetX()' onmouseup='resetX()' min='61' max='101' value='81' id='sliderX' style='width:50%; left:5%; top:50%;'>
    <input type='range' ontouchend='resetY()' onmouseup='resetY()' min='-1323' max='1323' value='0' id='sliderY' style='width:40%; -webkit-transform:rotate(270deg); left:60%; top:50%;'>
      <script>
     
      function myFunction(){
        var x = document.getElementById("sliderX").value;
        var y = document.getElementById("sliderY").value;
        var xmlhttp=new XMLHttpRequest();
        xmlhttp.open("POST","Val=X" + x + "Y" + y + "Z",true);
        xmlhttp.send();
      }
      setInterval(myFunction, 200);
     
      function resetX(){
        document.getElementById("sliderX").value = 81; 
      }
     
      function resetY(){
        document.getElementById("sliderY").value = 0; 
      }
      </script>
  </body>
</html>