-->
Page 1 of 1

Need help with using html slider control to return data

PostPosted: Tue Dec 01, 2015 8:21 pm
by Trickuncle
I found some web server code that allows me to turn ESP8266 port lines on and off and it works fine.
Now I'm trying to add HTML code to it to display slider controls and return the value they represent. When I run this code, the result is:
> PANIC: unprotected error in call to Lua API (init.lua:27: attempt to call local 'range' (a string value))

Clearly, I don't know what I'm doing. I don't really know HTML and have only scratched the surface of Lua. None the less, I think what I'm trying to do should be fairly simple... (famous last words)

I have marked the line below that causes the problem. If I enter it in a HTML test window by itself, it makes a slider control pop up. But here, no joy.

If anyone has a suggestion, I would love to hear it. Thanks!!!

Code: Select all 
wifi.setmode(wifi.STATION)
wifi.sta.config("xxx","yyy")
print(wifi.sta.getip())
led1 = 3
led2 = 4
gpio.mode(led1, gpio.OUTPUT)
gpio.mode(led2, gpio.OUTPUT)
srv=net.createServer(net.TCP)
srv:listen(80,function(conn)
    conn:on("receive", function(client,request)
        local buf = "";
        local _, _, method, path, vars = string.find(request, "([A-Z]+) (.+)?(.+) HTTP");
        if(method == nil)then
            _, _, method, path = string.find(request, "([A-Z]+) (.+) HTTP");
        end
        local _GET = {}
        if (vars ~= nil)then
            for k, v in string.gmatch(vars, "(%w+)=(%w+)&*") do
                _GET[k] = v
            end
        end
        buf = buf.."<h1> ESP8266 Web Server</h1>";
        buf = buf.."<p>GPIO0 <a href=\"?pin=ON1\"><button>ON</button></a>&nbsp;<a href=\"?pin=OFF1\"><button>OFF</button></a></p>";
        buf = buf.."<p>GPIO2 <a href=\"?pin=ON2\"><button>ON</button></a>&nbsp;<a href=\"?pin=OFF2\"><button>OFF</button></a></p>";

--this line is the problem:       
      buf = buf.."<input type="range" min=0 max=100 step=20 value=50>";
--without it everything works      
        local _on,_off = "",""
        if(_GET.pin == "OFF1")then
            gpio.write(led1, gpio.HIGH);
        elseif(_GET.pin == "ON1")then
            gpio.write(led1, gpio.LOW);
        elseif(_GET.pin == "OFF2")then
            gpio.write(led2, gpio.HIGH);
        elseif(_GET.pin == "ON2")then
            gpio.write(led2, gpio.LOW);
        end
        client:send(buf);
        client:close();
        collectgarbage();
    end)
end)

Re: Need help with using html slider control to return data

PostPosted: Wed Dec 02, 2015 12:51 am
by JeremiahLandi
Trickuncle,

I have the same question! I was wondering how to declare a GPIO to be dimmable (aka range input).

If you are looking to control one GPIO I would recommend using the conn:send version to reverse engineer. It does use HTML4 wheras buf.. = buf.. uses html5 for it's commands. Conn:Send is alos very slow to load a styled page; however, you can just store the webpage on the local machine and send the commands back to the ESP8266.

It is because if you look at the code section:

Code: Select alllocal _on,_off = "",""
        if(_GET.pin == "OFF1")then
            gpio.write(led1, gpio.HIGH);
        elseif(_GET.pin == "ON1")then
            gpio.write(led1, gpio.LOW);
        elseif(_GET.pin == "OFF2")then
            gpio.write(led2, gpio.HIGH);
        elseif(_GET.pin == "ON2")then
            gpio.write(led2, gpio.LOW);
        end


If you look at the code what is happening is when you push the following button:

Code: Select all<p>GPIO0 <a href=\"?pin=ON1\"><button>ON</button></a>&nbsp;<a href=\"?pin=OFF1\"><button>OFF</button></a></p>";


It is sending the command with a number and then parsing it. If you are just using a range, what is happening (I believe) is it is just changing the slider and sending a raw number. I am assuming you would have to have the range slider send the % and the number 1 or 2 after it for the code to read it right and modify the elseif statments to accept it as well.

I will allow someone else to chime in too. Let me know if this gets you any farther...

Also, may I ask what you are trying to do?

Re: Need help with using html slider control to return data

PostPosted: Wed Dec 02, 2015 1:20 am
by trackerj
You can find a working HTML Slider in the MAINS Dimmer web interface example. Just take the Web Server code and adapt it for your needs.

Re: Need help with using html slider control to return data

PostPosted: Wed Dec 02, 2015 4:19 pm
by Trickuncle
@trackerj - thanks! There's a lot for me to learn from that example

@JeremiahLandi - also thanks for your explanation; I'm slowly starting to learn.

I have a small motor controller made from a PIC16 and some slide pots that works ok. Then suddenly the ESP8266 appears before me and says "throw it away and do it all on the ESP8266 plus now it's wireless!" I've wanted to learn more about networking, wifi and HTML since forever so now is my chance. I used Lua before with the Canon CHDK on a glider for camera control so this looked like a good next step.

The user input will be via an LG smartphone using wifi. I've managed to connect them using example code and now am going to the next level putting some sliders on the phone browser display to allow the user to change the motor control settings.

Thanks for all the help!