Crazymakers
Faites-le vous même!
| ||
| SOUTENEZ-NOUS! Déjà 28 personnes nous ont soutenu. Nous vous en sommes très reconnaissants. |
RETROUVEZ NOUS SUR: |
Faites-le vous même!
|
| ||
| SOUTENEZ-NOUS! Déjà 28 personnes nous ont soutenu. Nous vous en sommes très reconnaissants. |
RETROUVEZ NOUS SUR: |
 | Arduino Ep.5 : Piloter Arduino via le Wifi... Upgrade de l'ElekstubeComment utiliser une ESP-01 (esp8266) pour piloter un micro-contrôleur via une communication série... En gros comment piloter un arduino via une page WEB!!! J'upgrade mon Elekstube afin de pouvoir l... La culture maker (de l'anglais make, lit. faiseur) est une culture (ou sous-culture) contemporaine constituant une branche de la culture Do it yourself (DIY) (qu'on peut traduire en français par « faites-le vous-même »). (Source: Wikipedia) |
Arduino
Comment utiliser une ESP-01 (esp8266) pour piloter un micro-contrôleur via une communication série...
En gros comment piloter un arduino via une page WEB!!!
J'upgrade mon Elekstube afin de pouvoir le configurer depuis un téléphone ou une tablette.
🚨Schémas,Sketch, informations sur la page du projet:🚨
http://www.crazymakers.fr/videos-youtube/arduino_ep_5_piloter_arduino_via_le_wifi-art-SaVXwNzeJU4.html
Esp-01:
https://www.ebay.fr/itm/ESP-01-ESP8266-Serial-WIFI-Wireless-Transceiver-Wireless-Module-LWIP-AP-STA/163712418096
Adaptateur Breadboard:
https://www.ebay.fr/itm/2PCS-Breadboard-Adapter-for-ESP8266-ESP-01-ESP-01S-Wifi-Transceiver-Breakout/264539325621
Ftdi Breakout:
https://www.ebay.fr/itm/FTDI-FT232RL-USB-to-Serial-IC-Basic-Breakout-Board-For-Arduino-3-3V-5-5V/202647978588
➕ INFORMATIONS: ➕
⁉️ Catégorie: Arduino.
⏰ Temps: 3 heures.
💪 Difficulté: 6/10.
⭐️ COMMENT NOUS AIDER ? ⭐️
🚨Un petit geste sur Youtip: https://www.utip.io/myprofile
❤️️ Soutenez-nous: http://www.crazymakers.fr/don-crazymakers.html
👍 Pensez à "liker" la vidéo.
🔗 Partagez nos vidéos et parlez de nous autour de vous
📡 NOUS SUIVRE OU NOUS CONTACTER: 📡
🔹Site Internet: http://www.crazymakers.fr
🔹Facebook: https://www.facebook.com/CrazyMakers/
🔹Twitter: https://twitter.com/CrazymakersF
🔹Instagram: https://www.instagram.com/crazymakers_fr/
🔹Chaine Youtube: https://www.youtube.com/c/CrazyMakersFr
Voici comment raccorder l'esp-01 au ftdi breakout
|
||
Voici le sketch à envoyer dans l'esp-01
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266HTTPClient.h>
#include <ESP8266mDNS.h>
const char* ssid = ""; // remplacer par le SSID de votre WiFi
const char* password = ""; // remplacer par le mot de passe de votre WiFi
ESP8266WebServer server(80); // on instancie un serveur ecoutant sur le port 80
//Code HTML du formulaire
String DefautForm="<html><head><meta charset=utf-8><title>Elekstube configuration</title><style>.td{text-align: center}.inp{border: 1px solid #949494;border-radius: 3px;padding: 10px;font-size: 110%;}.color-palette{height:100px;width:100px;background:red;display:none}.palette{margin-top:5px;width:270px;height:220px;background:#efefef;border:1px solid #bcbcbc;border-radius:1px;display:none;padding:1px;position:absolute;z-index:1000}.color-option{width:18px;height:18px;margin:3px;cursor:pointer;float:left}#colorPicker{border-right:10px solid #003cb3}</style></head><body><form action=setclock method=get><table width=500 border=0 cellpadding=5 cellspacing=0 align=center><tbody><tr><td colspan=6 align=center><img src='data:image/gif;base64,R0lGODlhmQAoAJEDANTU1AYGBm5ubv///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDEyMEM1NTM2QzY5MTFFQUE4NzM4QzZCMENGMzYzOTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDEyMEM1NTQ2QzY5MTFFQUE4NzM4QzZCMENGMzYzOTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEMTIwQzU1MTZDNjkxMUVBQTg3MzhDNkIwQ0YzNjM5MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEMTIwQzU1MjZDNjkxMUVBQTg3MzhDNkIwQ0YzNjM5MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAEAAAMALAAAAACZACgAQAL/nI+py+0Po5y0JhFyFgcbbWBawFnmiaYqOGzNSI4c+2Z16biWaCOwJFIpWLRh7+MqGjexUnDAw4V6RSlNNzr0eJ3j9qrzBSY8Uus4/QnX7LY7AVNL3/S6XTxOa6xgLfoOGDhBFEc4tiEy84dQBlNiuAASdpanEPREVWnpdYim5DfFFxb3uAiVJZiqitJouvoKa1I2F1trG6mGlLd32ysY14XKi/fpa3xiqEmsKOnKWJj35CBdgbosMSmUTILhQVnInON8FiyD5FcJ7SfQDdp+Woiu6xRPySVPWbMLH85AbcQsBhaByqB0G0YIU6Ym9xrB4dYECS18jpY82zUuBLuN/x1obWQ3BQEAkAY/ziGpkZEUkygNqlz5sUMEYHp0Ect2LGcbMyIAfMOpM2iglkKLvvJmNOnQekqbCmlUatdEp1QZkDLgM9/PqlwvWrtXpWLXpuZ0gVlUZqzSbbRQgc34kmNKCEgrxLREdNpUFJCs8oqitcEsdmYCCy5swZqegjXe9MUFrZ9fxuvKEcKDbkRWsfDOKn7Hz3I0zlqhLWwleZPpNKEWvAsD2si5U4oOp8OoCehCzPa6yQXhIZHhh5RttlqYTR1rcs1u13N486+zhPoupia+9wvjS0ApFlYzkM9m3GImdi9dzDCX9IuFHWllM37k5fbor4aXub0N9oGv4iv7gAN/avUCVWbkeSXggL7UQ0SANCnI1WM/BZAVhBaaVpyFCpalYYcealgAADs='> <span style='font-size:55px; font-family:Arial, Helvetica, sans-serif'>EleksTube</td></tr><tr><td colspan=2>Heures: <input type=text name=h maxlength=2 value=00 style=width:70px id=heures></td><td colspan=2>Minutes: <input type=text name=m maxlength=2 value=00 style=width:70px id=minutes></td><td colspan=2>Secondes: <input type=text name=s maxlength=2 value=00 style=width:70px id=secondes></td></tr><tr><td>Couleur1:<br><input type=text name=col1 maxlength=6 style=width:55px value=E65C00 id=chcol1></div></td><td>Couleur2:<br><input type=text name=col2 maxlength=6 style=width:55px value=E65C00 id=chcol2></div></td><td>Couleur3:<br><input type=text name=col3 maxlength=6 style=width:55px value=E65C00 id=chcol3></div></td><td>Couleur4:<br><input type=text name=col4 maxlength=6 style=width:55px value=E65C00 id=chcol4></div></td><td>Couleur5:<br><input type=text name=col5 maxlength=6 style=width:55px value=E65C00 id=chcol5></div></td><td>Couleur5:<br><input type=text name=col6 maxlength=6 style=width:55px value=E65C00 id=chcol6></div></td></tr><tr><br><td colspan=6 align=center>Choisir une couleur: <input type=text class=inp id=colorPicker><div class=palette id=colorPalette></div></td></tr><tr><br><td colspan=6 align=center><input value=Couleur1 type=button onclick=javascript:document.getElementById('chcol1').value=document.getElementById('colorPicker').value;><input value=Couleur2 type=button onclick=javascript:document.getElementById('chcol2').value=document.getElementById('colorPicker').value;><input value=Couleur3 type=button onclick=javascript:document.getElementById('chcol3').value=document.getElementById('colorPicker').value;><input value=Couleur4 type=button onclick=javascript:document.getElementById('chcol4').value=document.getElementById('colorPicker').value;><input value=Couleur5 type=button onclick=javascript:document.getElementById('chcol5').value=document.getElementById('colorPicker').value;><input value=Couleur6 type=button onclick=javascript:document.getElementById('chcol6').value=document.getElementById('colorPicker').value;></td></tr></td></tr><tr><td colspan=12 align=center><input type=submit value=Valider></td></tr></tbody></table></form><div align=center><a href=setmode?mode=1>Mode Standard</a> - <a href=setmode?mode=2>Mode RGB/Chiffres</a> - <a href=setmode?mode=3>Mode Light Fade</a> - <a href=setmode?mode=4>Mode RGB/Full</a> - <a href=setmode?mode=5>Mode Test</a></div><script>var colorInput=document.getElementById('colorPicker');var colorPalette=document.getElementById('colorPalette');colorInput.addEventListener('click',showColorPalette);colorInput.addEventListener('focusout',hideColorPalette);colorPalette.mouseIsOver=!1;colorInput.style.borderRight=`10px solid ${colorInput.value}`;colorPalette.onmouseover=()=>{colorPalette.mouseIsOver=!0};colorPalette.onmouseout=()=>{colorPalette.mouseIsOver=!1};function hideColorPalette(){if(colorPalette.mouseIsOver===!1){colorPalette.style.display='none';colorInput.style.borderRight=`10px solid #${colorInput.value}`}};function chooseColor(e){let color=rgbToHex(e.target.style.backgroundColor);colorInput.value=color;colorInput.style.borderRight=`10px solid #${color}`;colorPalette.style.display='none'};function componentToHex(c){var hex=c.toString(16);return hex.length==1?'0'+hex:hex.toUpperCase()};function rgbToHex(color){arr=color.replace('rgb','').replace('(','').replace(')','').split(',');return componentToHex(Number(arr[0]))+componentToHex(Number(arr[1]))+componentToHex(Number(arr[2]))};function showColorPalette(){colorPalette.style.display='block';var newDiv='<div class=color-option style=background-color:#000000 onclick=chooseColor(event)></div><div class=color-option style=background-color:#191919 onclick=chooseColor(event)></div><div class=color-option style=background-color:#323232 onclick=chooseColor(event)></div><div class=color-option style=background-color:#4b4b4b onclick=chooseColor(event)></div><div class=color-option style=background-color:#646464 onclick=chooseColor(event)></div><div class=color-option style=background-color:#7d7d7d onclick=chooseColor(event)></div><div class=color-option style=background-color:#969696 onclick=chooseColor(event)></div><div class=color-option style=background-color:#afafaf onclick=chooseColor(event)></div><div class=color-option style=background-color:#c8c8c8 onclick=chooseColor(event)></div><div class=color-option style=background-color:#e1e1e1 onclick=chooseColor(event)></div><div class=color-option style=background-color:#ffffff onclick=chooseColor(event)></div><div class=color-option style=background-color:#820000 onclick=chooseColor(event)></div><div class=color-option style=background-color:#9b0000 onclick=chooseColor(event)></div><div class=color-option style=background-color:#b40000 onclick=chooseColor(event)></div><div class=color-option style=background-color:#cd0000 onclick=chooseColor(event)></div><div class=color-option style=background-color:#e60000 onclick=chooseColor(event)></div><div class=color-option style=background-color:#ff0000 onclick=chooseColor(event)></div><div class=color-option style=background-color:#ff1919 onclick=chooseColor(event)></div><div class=color-option style=background-color:#ff3232 onclick=chooseColor(event)></div><div class=color-option style=background-color:#ff4b4b onclick=chooseColor(event)></div><div class=color-option style=background-color:#ff6464 onclick=chooseColor(event)></div><div class=color-option style=background-color:#ff7d7d onclick=chooseColor(event)></div><div class=color-option style=background-color:#823400 onclick=chooseColor(event)></div><div class=color-option style=background-color:#9b3e00 onclick=chooseColor(event)></div><div class=color-option style=background-color:#b44800 onclick=chooseColor(event)></div><div class=color-option style=background-color:#cd5200 onclick=chooseColor(event)></div><div class=color-option style=background-color:#e65c00 onclick=chooseColor(event)></div><div class=color-option style=background-color:#ff6600 onclick=chooseColor(event)></div><div class=color-option style=background-color:#ff7519 onclick=chooseColor(event)></div><div class=color-option style=background-color:#ff8532 onclick=chooseColor(event)></div><div class=color-option style=background-color:#ff944b onclick=chooseColor(event)></div><div class=color-option style=background-color:#ffa364 onclick=chooseColor(event)></div><div class=color-option style=background-color:#ffb27d onclick=chooseColor(event)></div><div class=color-option style=background-color:#828200 onclick=chooseColor(event)></div><div class=color-option style=background-color:#9b9b00 onclick=chooseColor(event)></div><div class=color-option style=background-color:#b4b400 onclick=chooseColor(event)></div><div class=color-option style=background-color:#cdcd00 onclick=chooseColor(event)></div><div class=color-option style=background-color:#e6e600 onclick=chooseColor(event)></div><div class=color-option style=background-color:#ffff00 onclick=chooseColor(event)></div><div class=color-option style=background-color:#ffff19 onclick=chooseColor(event)></div><div class=color-option style=background-color:#ffff32 onclick=chooseColor(event)></div><div class=color-option style=background-color:#ffff4b onclick=chooseColor(event)></div><div class=color-option style=background-color:#ffff64 onclick=chooseColor(event)></div><div class=color-option style=background-color:#ffff7d onclick=chooseColor(event)></div><div class=color-option style=background-color:#003300 onclick=chooseColor(event)></div><div class=color-option style=background-color:#004d00 onclick=chooseColor(event)></div><div class=color-option style=background-color:#008000 onclick=chooseColor(event)></div><div class=color-option style=background-color:#00b300 onclick=chooseColor(event)></div><div class=color-option style=background-color:#00cc00 onclick=chooseColor(event)></div><div class=color-option style=background-color:#00e600 onclick=chooseColor(event)></div><div class=color-option style=background-color:#1aff1a onclick=chooseColor(event)></div><div class=color-option style=background-color:#4dff4d onclick=chooseColor(event)></div><div class=color-option style=background-color:#66ff66 onclick=chooseColor(event)></div><div class=color-option style=background-color:#80ff80 onclick=chooseColor(event)></div><div class=color-option style=background-color:#b3ffb3 onclick=chooseColor(event)></div><div class=color-option style=background-color:#001a4d onclick=chooseColor(event)></div><div class=color-option style=background-color:#002b80 onclick=chooseColor(event)></div><div class=color-option style=background-color:#003cb3 onclick=chooseColor(event)></div><div class=color-option style=background-color:#004de6 onclick=chooseColor(event)></div><div class=color-option style=background-color:#0000ff onclick=chooseColor(event)></div><div class=color-option style=background-color:#0055ff onclick=chooseColor(event)></div><div class=color-option style=background-color:#3377ff onclick=chooseColor(event)></div><div class=color-option style=background-color:#4d88ff onclick=chooseColor(event)></div><div class=color-option style=background-color:#6699ff onclick=chooseColor(event)></div><div class=color-option style=background-color:#80b3ff onclick=chooseColor(event)></div><div class=color-option style=background-color:#b3d1ff onclick=chooseColor(event)></div><div class=color-option style=background-color:#003333 onclick=chooseColor(event)></div><div class=color-option style=background-color:#004d4d onclick=chooseColor(event)></div><div class=color-option style=background-color:#006666 onclick=chooseColor(event)></div><div class=color-option style=background-color:#009999 onclick=chooseColor(event)></div><div class=color-option style=background-color:#00cccc onclick=chooseColor(event)></div><div class=color-option style=background-color:#00ffff onclick=chooseColor(event)></div><div class=color-option style=background-color:#1affff onclick=chooseColor(event)></div><div class=color-option style=background-color:#33ffff onclick=chooseColor(event)></div><div class=color-option style=background-color:#4dffff onclick=chooseColor(event)></div><div class=color-option style=background-color:#80ffff onclick=chooseColor(event)></div><div class=color-option style=background-color:#b3ffff onclick=chooseColor(event)></div><div class=color-option style=background-color:#4d004d onclick=chooseColor(event)></div><div class=color-option style=background-color:#602060 onclick=chooseColor(event)></div><div class=color-option style=background-color:#660066 onclick=chooseColor(event)></div><div class=color-option style=background-color:#993399 onclick=chooseColor(event)></div><div class=color-option style=background-color:#ac39ac onclick=chooseColor(event)></div><div class=color-option style=background-color:#bf40bf onclick=chooseColor(event)></div><div class=color-option style=background-color:#c653c6 onclick=chooseColor(event)></div><div class=color-option style=background-color:#cc66cc onclick=chooseColor(event)></div><div class=color-option style=background-color:#d279d2 onclick=chooseColor(event)></div><div class=color-option style=background-color:#d98cd9 onclick=chooseColor(event)></div><div class=color-option style=background-color:#df9fdf onclick=chooseColor(event)></div><div class=color-option style=background-color:#660029 onclick=chooseColor(event)></div><div class=color-option style=background-color:#800033 onclick=chooseColor(event)></div><div class=color-option style=background-color:#b30047 onclick=chooseColor(event)></div><div class=color-option style=background-color:#cc0052 onclick=chooseColor(event)></div><div class=color-option style=background-color:#e6005c onclick=chooseColor(event)></div><div class=color-option style=background-color:#ff0066 onclick=chooseColor(event)></div><div class=color-option style=background-color:#ff1a75 onclick=chooseColor(event)></div><div class=color-option style=background-color:#ff3385 onclick=chooseColor(event)></div><div class=color-option style=background-color:#ff4d94 onclick=chooseColor(event)></div><div class=color-option style=background-color:#ff66a3 onclick=chooseColor(event)></div><div class=color-option style=background-color:#ff99c2 onclick=chooseColor(event)></div>';colorPalette.innerHTML=newDiv}</script><script>window.onload=function() {horloge();};function horloge() {function actualiser() {var ladate=new Date();document.getElementById('heures').value=('0' + ladate.getHours()).slice(-2);document.getElementById('minutes').value=('0' + ladate.getMinutes()).slice(-2);document.getElementById('secondes').value=('0' + ladate.getSeconds()).slice(-2);}actualiser();setInterval(actualiser,1000);}</script></body></html>";
void setup(void) {
Serial.begin(115200);
WiFi.hostname("EleksTube");
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
}
server.on("/setclock", []() {
String test;
if (server.hasArg("h") && server.hasArg("m") && server.hasArg("s")) {
test += server.arg("h").substring (0,1) + server.arg("col1");
test += server.arg("h").substring (1,2) + server.arg("col2");
test += server.arg("m").substring (0,1) + server.arg("col3");
test += server.arg("m").substring (1,2) + server.arg("col4");
test += server.arg("s").substring (0,1) + server.arg("col5");
test += server.arg("s").substring (1,2) + server.arg("col6");
}
Send_to_Clock("*" + test);
server.send(200, "text/html", "Heure Mise à jour!<br><a href='javascript:history.back();'>Retour</a>");
});
server.on("/", []() {
server.send(200, "text/html", DefautForm);
});
server.on("/setmode", []() {
if (server.hasArg("mode")) {
Send_to_Clock("$0" + server.arg("mode"));}
});
server.begin();
}
void Send_to_Clock(String Command)
{
delay (500);
Serial.println(Command);
server.send(200, "text/html", DefautForm);
}
void loop(void) {
// a chaque iteration, on appelle handleClient pour que les requetes soient traitees
server.handleClient();
}
Le paramétrage d'Arduino avant l'envoi...
|
||
|
||
Newsletter (Lettre d'information)Recevez nos lettres d'information dans votre boite mail. |
