Place to put your Basic demos and examples

Moderator: Mmiscool

User avatar
By cicciocb
#46822 Hi all,
I prepared a little demo program showing how use the new IR functions available with the alpha 21.

The code is the following :
Code: Select allwprint |<p>Click on any key to send the code:</p>|
wprint |<img src="/file?file=nokia_rc202_2.jpg" width="343" height="788" alt="Nokia" usemap="#keymap">|
wprint |<map name="keymap">|
wprint |  <area shape="rect" coords=" 50,135,100,160" onclick="sendIR('ON')">|
wprint |  <area shape="rect" coords="180,135,225,160" onclick="sendIR('TV')">|
wprint |  <area shape="rect" coords=" 50,180,100,200" onclick="sendIR('CLOCK')">|
wprint |  <area shape="rect" coords="120,180,160,200" onclick="sendIR('1')">|
wprint |  <area shape="rect" coords="180,180,225,200" onclick="sendIR('2')">|
wprint |  <area shape="rect" coords="245,180,290,200" onclick="sendIR('3')">|
wprint |  <area shape="rect" coords=" 50,230,100,255" onclick="sendIR('TIMER')">|
wprint |  <area shape="rect" coords="120,230,160,255" onclick="sendIR('4')">|
wprint |  <area shape="rect" coords="180,230,225,255" onclick="sendIR('5')">|
wprint |  <area shape="rect" coords="245,230,290,255" onclick="sendIR('6')">|
wprint |  <area shape="rect" coords=" 50,280,100,300" onclick="sendIR('CL')">|
wprint |  <area shape="rect" coords="120,280,160,300" onclick="sendIR('7')">|
wprint |  <area shape="rect" coords="180,280,225,300" onclick="sendIR('8')">|
wprint |  <area shape="rect" coords="245,280,290,300" onclick="sendIR('9')"> |
wprint |  <area shape="rect" coords=" 50,325,100,350" onclick="sendIR('VPS')">|
wprint |  <area shape="rect" coords="120,325,160,350" onclick="sendIR('CH-')">|
wprint |  <area shape="rect" coords="180,325,225,350" onclick="sendIR('0')">|
wprint |  <area shape="rect" coords="245,325,290,350" onclick="sendIR('CH+')">|
wprint |  <area shape="rect" coords=" 50,370,100,395" onclick="sendIR('ATR')">|
wprint |  <area shape="rect" coords="120,370,160,395" onclick="sendIR('REW')"> |
wprint |  <area shape="rect" coords="180,370,225,395" onclick="sendIR('PLAY')">| 
wprint |  <area shape="rect" coords="245,370,290,395" onclick="sendIR('FF')"> |
wprint |  <area shape="rect" coords=" 50,420,100,445" onclick="sendIR('REC')">|
wprint |  <area shape="rect" coords="120,420,160,445" onclick="sendIR('REC')">|
wprint |  <area shape="rect" coords="180,420,225,445" onclick="sendIR('STOP')">|
wprint |  <area shape="rect" coords="245,420,290,445" onclick="sendIR('PAUSE')">|
wprint |  <area shape="rect" coords=" 50,470,100,495" onclick="sendIR('CODE')">|
wprint |  <area shape="rect" coords="120,470,160,495" onclick="sendIR('INDEX')">|
wprint |  <area shape="rect" coords="180,470,225,495" onclick="sendIR('COUNTER')">|
wprint |  <area shape="rect" coords="245,470,290,495" onclick="sendIR('MEMORY')">|
wprint |</map>|
wprint |<script>|
wprint |function sendIR(key)|
wprint |{|
wprint |  window.event.returnValue = false;|
wprint |  var xmlHttp = new XMLHttpRequest();|
wprint |  xmlHttp.open("GET", "msg?IR=" + key, false);|
wprint |  xmlHttp.send(null);|
wprint |  return xmlHttp.responseText;|
wprint |}|
wprint |</script>|
wprint |</body>|
wprint |</html>|

msgbranch [message]

'set infrared transmitter
ir.send.init(15) 'nota: this command will be renamed to ir.send.setup() in next version


ir.recv.init(5) 'nota: this command will be renamed to ir.recv.setup() in next version
irbranch [ircode]
wait

[message]
msgget "IR" k
'uncomment this line to see the IR controller key pressed
serialprintln k
if k = "1" then ir.send.nec("8c7320df",32)
if k = "2" then ir.send.nec("8c73a05f",32)
if k = "3" then ir.send.nec("8c73609f",32)
if k = "4" then ir.send.nec("8c73e01f",32)
if k = "5" then ir.send.nec("8c7330cf",32)
if k = "6" then ir.send.nec("8c73b04f",32)
if k = "7" then ir.send.nec("8c73708f",32)
if k = "8" then ir.send.nec("8c73f00f",32)
if k = "9" then ir.send.nec("8c7338c7",32)
if k = "0" then ir.send.nec("8c73b847",32)

if k = "REW" then ir.send.nec("8c7348b7",32)
if k = "PLAY" then ir.send.nec("8c7328d7",32)
if k = "FF" then ir.send.nec("8c73c837",32)
if k = "STOP" then ir.send.nec("8c7308f7",32)
if k = "PAUSE" then ir.send.nec("8c738877",32)

wait

[ircode]
r = ir.recv.get()
'this will print the IR code received
serialprintln r
return


To make it works properly, you must download the image attached and upload it in the ESP module using the [FILE MANAGER].
The demo works with a IR led connected on the pin 15 and, optionally, an IR receiver connected on the pin 5.

Running the program you'll be able to click any key on the remote controller and the corresponding NEC code will be sent through the LED; optionally, if an IR receiver is connected, the code sent will be echoed as it will be received at the same time.
This demo code is very simple and shows also how create many buttons simply using one image and a little bit of HTML (and also a very little bit of javascript).

Hope this will illuminate the dark side of the ESP (with infrared light).

PS : I tested with chrome, could not work with firefox BUT works great on Iphone! Try it.

CiccioCB
You do not have the required permissions to view the files attached to this post.
User avatar
By Electroguard
#46824 Did you go to Hogwarts?
Excellent cicciocb.
Was able to fully try it cos using firefox, but uploaded your script and the pic (which was a first time for me) and can clearly see that the skies the limit.
Very good job, and give my regards to Haggred!
User avatar
By viscomjim
#46825 This is amazing! Just tried this with no ir led, just the code and the image. Using an image is a new one on me, but nice to see how this works just using the serial! IR led next.

cicciocb - AMAZING!!! THANKS!!! It is nice to see working code to get great examples of syntax etc. This type of stuff is invaluable for a noob like me and helps things make sense.

Keep up the GREAT work! A big thanks to Mike also for making this all happen!
User avatar
By Mmiscool
#46828 This is an excellent demo.

Image maps can be very useful.

Some thing that can be done when making fancy user interfaces like this one is to upload the html file for the interface though the file manager

demo.htm
Code: Select all<p>Click on any key to send the code:</p><img src="/file?file=nokia_rc202_2.jpg" width="343" height="788" alt="Nokia" usemap="#keymap"><map name="keymap">  <area shape="rect" coords=" 50,135,100,160" onclick="sendIR('ON')">  <area shape="rect" coords="180,135,225,160" onclick="sendIR('TV')">  <area shape="rect" coords=" 50,180,100,200" onclick="sendIR('CLOCK')">  <area shape="rect" coords="120,180,160,200" onclick="sendIR('1')">  <area shape="rect" coords="180,180,225,200" onclick="sendIR('2')">  <area shape="rect" coords="245,180,290,200" onclick="sendIR('3')">  <area shape="rect" coords=" 50,230,100,255" onclick="sendIR('TIMER')">  <area shape="rect" coords="120,230,160,255" onclick="sendIR('4')">  <area shape="rect" coords="180,230,225,255" onclick="sendIR('5')">  <area shape="rect" coords="245,230,290,255" onclick="sendIR('6')">  <area shape="rect" coords=" 50,280,100,300" onclick="sendIR('CL')">  <area shape="rect" coords="120,280,160,300" onclick="sendIR('7')">  <area shape="rect" coords="180,280,225,300" onclick="sendIR('8')">  <area shape="rect" coords="245,280,290,300" onclick="sendIR('9')">   <area shape="rect" coords=" 50,325,100,350" onclick="sendIR('VPS')">  <area shape="rect" coords="120,325,160,350" onclick="sendIR('CH-')">  <area shape="rect" coords="180,325,225,350" onclick="sendIR('0')">  <area shape="rect" coords="245,325,290,350" onclick="sendIR('CH+')">  <area shape="rect" coords=" 50,370,100,395" onclick="sendIR('ATR')">  <area shape="rect" coords="120,370,160,395" onclick="sendIR('REW')">   <area shape="rect" coords="180,370,225,395" onclick="sendIR('PLAY')">  <area shape="rect" coords="245,370,290,395" onclick="sendIR('FF')">   <area shape="rect" coords=" 50,420,100,445" onclick="sendIR('REC')">  <area shape="rect" coords="120,420,160,445" onclick="sendIR('REC')">  <area shape="rect" coords="180,420,225,445" onclick="sendIR('STOP')">  <area shape="rect" coords="245,420,290,445" onclick="sendIR('PAUSE')">  <area shape="rect" coords=" 50,470,100,495" onclick="sendIR('CODE')">  <area shape="rect" coords="120,470,160,495" onclick="sendIR('INDEX')">  <area shape="rect" coords="180,470,225,495" onclick="sendIR('COUNTER')">  <area shape="rect" coords="245,470,290,495" onclick="sendIR('MEMORY')"></map><script>function sendIR(key){  window.event.returnValue = false;  var xmlHttp = new XMLHttpRequest();  xmlHttp.open("GET", "msg?IR=" + key, false);  xmlHttp.send(null);  return xmlHttp.responseText;}</script></body></html>


And use this code for the program.

Code: Select all'set infrared transmitter
ir.send.init(15) 'nota: this command will be renamed to ir.send.setup() in next version


ir.recv.init(5) 'nota: this command will be renamed to ir.recv.setup() in next version
irbranch [ircode]

'This will auto redirect the browser to the demo.htm uploaded in the file manager.
wprint "<meta http-equiv='refresh' content='1;URL=/file?file=demo.htm'>"
msgbranch [message]
wait

[message]
msgget "IR" k
'uncomment this line to see the IR controller key pressed
serialprintln k
if k = "1" then ir.send.nec("8c7320df",32)
if k = "2" then ir.send.nec("8c73a05f",32)
if k = "3" then ir.send.nec("8c73609f",32)
if k = "4" then ir.send.nec("8c73e01f",32)
if k = "5" then ir.send.nec("8c7330cf",32)
if k = "6" then ir.send.nec("8c73b04f",32)
if k = "7" then ir.send.nec("8c73708f",32)
if k = "8" then ir.send.nec("8c73f00f",32)
if k = "9" then ir.send.nec("8c7338c7",32)
if k = "0" then ir.send.nec("8c73b847",32)

if k = "REW" then ir.send.nec("8c7348b7",32)
if k = "PLAY" then ir.send.nec("8c7328d7",32)
if k = "FF" then ir.send.nec("8c73c837",32)
if k = "STOP" then ir.send.nec("8c7308f7",32)
if k = "PAUSE" then ir.send.nec("8c738877",32)

wait

[ircode]
r = ir.recv.get()
'this will print the IR code received
serialprintln r
return