ESP8266 Community Forum

Posted: **Fri Apr 21, 2017 5:11 am**

Stolen bits from everywhere to build this but it works! You can move the slide on the screen and it will instantly change the light level (PWM) on an LED on GPIO5.

BASIC

Code: Select all

msgbranch [mybranch]
print "You can send msgs to the esp and do things based on accessing a URL"
wait
[mybranch]
MyReturnMsg = "Not a valid msg received"

pinStatus = val(msgget("stat"))
   io(pwo,5,pinStatus)
   MyReturnMsg = "200"

msgreturn MyReturnMsg
wait

HTML/Javascript [upload to esp as index.htm]

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>toggle test</title>
<script src="http://192.168.4.1/file?file=jquery.js"></script>
<script type="text/javascript">
var dimmer
window.onload = function() {
var dimmer = 1024,
    html = '<li>Dimmer Value: \
<input type="range"  min="0" max="' + dimmer + '" value="'+dimmer+'" name="dimmer_value" id="dimmer_value" />\
 <span>' + dimmer + '</span>\
</li>';

$("body").append(html);

$('#dimmer_value').on("input change", function() {
    $(this).next().html($(this).val());
    dimmer = "http://192.168.4.1/msg?stat=" + $(this).val();
    console.log(dimmer);
    $.ajax({
    url: dimmer,
    async: false }).done(function( data ) {
        console.log(data); //or whatever
    })
});
}
</script>
</head>

<body>
</body>
</html>

Just browse to ESP_!P_ADDR/file?file=index.htm

I copied jquery onto the esp, not necessary if you don't intend to run the ESP in AP mode. I had to add a callback to the javascript otherwise the ESP gets inundated with request's and crashes. I tried to use multiple variables i.e wget "http://192.168.4.1/msg?pin=2&stat=1&action=po" -q -O - but again the ESP could not keep up and crashed. With one variable I could move the slider as much and as fast as I could.

I am making a RC car based off ESP8266 BASIC you can follow my progress here https://www.youtube.com/channel/UCXsnD8s75AEswtePX7EJmRA NOT MONETIZED This project is under Multi Episode Projects (wifi anything)

Posted: **Fri Apr 21, 2017 8:08 am**

Very nice, If you wanted to provide a javascript code integration example.
Otherelse, you can have a slider directly in ESPBasic, no need for extra things like javascript & stuff:

Code: Select all

cls 
let xpv = 0
let PWMpin = 5 
slider x,150,900
timer 500, [set.dimmer]
wprint "<br><br>"
button " Exit ", [TestExit] 

wait

[set.dimmer]
 if x <> xpv then 
   io(pwo,PWMpin,x)
   xpv = x
 end if
wait

[TestExit] 
wprint |<a href="./edit"> Edit</a>|
end

The power of ESPBasic! I am using the above code with the MPDMv4 AC Dimmer board and it's working very smooth.

Code and original articles, as usual at: http://www.esp8266-projects.com/2017/04/espbasic-series-web-interface-slider.html

Posted: **Fri Apr 21, 2017 3:50 pm**

As TJ points out, Esp_Basic already has a useful SLIDER control included in its WEB INTERFACE COMMANDS, so you don't need to unnecessarilly re-invent that wheel.
However, you'll possibly also be wanting a simple 2-state On/Off toggle switch web component (headlights?), but that's something that is noticably absent in Esp_Basic.

Webland can create nice 2-state switches (toggles, rockers, sliders) using CSS with checkboxes or radio-buttons, but Esp_Basic doesn't have those components either.
So although Esp_Basic can render them ok, it can't interact with them via the check-box or radio-button web hooks. I suspect somebody with sufficient webby skills should be able to create a 2-state webpage toggle switch using CSS and perhaps javascript without too much problem, but I'm not aware of anything yet published for Esp_Basic which offers 'flicker-free' 2-state feedback to a web page without 're-painting' the entire page and all components.

B.T.W. if your car project has room for a 20mm x 9mm micro servo it might be possible to modify it's full-lock steering to be progressive:
https://youtu.be/yEK-KfUBNUc
Incidentally, I'm waiting to see if your part 2 motor control might be suitable for a single-axis camera gimbal for my Hubsan H501S quadcopter.

Posted: **Sat Apr 22, 2017 1:10 am**

As TJ points out, Esp_Basic already has a useful SLIDER control included in its WEB INTERFACE COMMANDS, so you don't need to unnecessarilly re-invent that wheel.

This is my first crack at it, the reason I used Javascript is because i am not sure how much control you have over the DOM. I am using my code to control an RC car. I need the slider to return to 0 if the mouse or finger is released from the slider/screen. I can kill this with two lines in javascript whereas I am not even sure this is possible in BASIC?

Code: Select all

$('#dimmer_value').on("mouseup", function(){
$("#dimmer_value").val(0);

ESP8266 Community Forum

AJAX Light dimmer

AJAX Light dimmer

Re: AJAX Light dimmer

Re: AJAX Light dimmer

Re: AJAX Light dimmer