18041 sujets

Questions générales et questions de débutants

Besoin d'aide

Bonjour,

Je suis débutant en HTML, je vous explique mon projet. J’essaie de piloter une rampe led pour un aquarium
Niveau Hardware j'utilise un arduino uno et un esp8266.
Le but héberger un site web html avec
8 boites de saisies pour saisir les heures
8 boites de saisies pour saisir le %de puissance.
à l'appuie sur un bouton envoyer je voudrais que le contenu des 16 boites de saisies soit envoyé dans l'url afin que le soft qui tourne dans le uno les décodes et c'est la qu'arrive mon souci car je ne comprend pas comment fonctionnement de la méthode get Smiley ohwell
Pourriez vous me mettre sur la voie
Je me doute bien que pour des pointures du html vous allez rigoler

Merci
Je pense que tes poissons doivent être morts de rire
Je suppose que le ESP8266 fait serveur HTTP via wifi.
S'il tourne avec NodeMCU et Lua , je peux t'aider sinon il va falloir trouver une autre pointure.
Comment communiquent le ESP8266 et l'Arduino.

Note qu'ici il n'y a pas trop de hackers pour faire du DIY. On ne parle pas couramment le Arduino.
Merci pour ta réponse, mon souci est vraiment html.
Je ne comprend pas comment renvoyer toutes les boîtes de saisies sur l’url De mon serveur http
Pour répondre à la question non l’esp8266 n’est pas en node mcu car celui ci n’a pas assez de gpio
Mais comme je le dit au dessus mon problème c’est le code html qui me cause du souci
Il faut envoyer au navigateur des headers HTTP, une ligne vide, puis la page html.
Il y a un petit problème à régler. Avant d'envoyer la page, il faut connaitre le nombre de caractères de la page et le préciser dans le header Content-Length.

Il faut envoyer la page en 3 parties
partie fixe pour le début :
<!DOCTYPE html>
<html><head>
<meta charset="us-ascii" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aquarium</title>
<style>
body { font: 12pt 'Noto Sans', Droid, Sans-Serif; }
.text-center { text-align: center; }
</style>
</head><body>
<h1>LEDS</h1>
<form>
<table><thead>
<tr><th>Led</th><th>Horaire</th><th>Puiss.</th></tr>
</thead><tbody>

partie variable pour chaque led :
pour chaque led, il faut envoyer la ligne suivante en substituant {A}, {N}, {H}, et {P} par le nom de la led, l'heure et la puissance. Ces valeurs sont à mémoriser sur l'arduino. Il faut stocker le résultat de la substitution dans un tableau ou une chaine de caractères car il faut connaitre le nombre de caractères.
<tr><td>{A}</td><td><input type="time" name="horaire-{N}" value="{H}" /></td><td><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</td></tr>

partie fixe pour la fin :
<tr><td colspan="3" class="text-center"><input type="submit" /></td></tr>
</tbody></table>
</form>
</body></html>

Note que les sauts de ligne n'ont aucun intérêt en html.
il faut additionner le nombre de caractères des parties fixes et de la partie variable des leds. On suppose qu'on obtient par exemple la valeur 666.

Envoyer les headers :
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 666
Cache-Control: no-cache, no-store, must-revalidate
Remplacer 666 par la valeur adéquate. Impératif: la dernière ligne doit être vide.
Chaque ligne doit se terminer par les caractère '\r\n' (protocole HTTP 1.1)
Envoyer ensuite toutes les parties à la queue leu-leu. Inutile de concaténer. Envoyer directement sur la sortie de l'arduino.
Lorsque le formulaire sera rempli et posté, tu vas recevoir une chaine de caractères qui sera par exemple pour 2 leds:
horaire-1=10:22&puiss-1=45&horaire-2=22:45&puiss-2=15

Il te reste à tronçonner la chaine (split) avec le caractère '&' pour mettre toutes les entrées dans un tableau.

Pour rester poli, tu retourneras les headers au navigateur comme quoi t'as bien reçu la requête et tu renvoies la page précèdente après avoir modifié toutes les valeurs.

Si tu as un souci, je t'enverrai le programme en LUA qui tourne sur un ESP8266. Je n'ai pas d'arduino sous la main.
Modifié par bazooka07 (04 Sep 2018 - 09:16)
Merci pour cette réponse qui est carrément top. j'ai essayé de rajouter sa 
 
 <tr>
<button onclick="location.href='/WManu'" type='button'>  BLANC ON/OFF  </button>
<button onclick="location.href='/BManu'" type='button'>  BLEU ON/OFF  </button>
</tr>


Le but serait de forcer une variable pour faire un mode manuel. hormis le fait que j'ai comme l'impression que les boutons ce mettent cote à cote car j'imagine il faut que je rajoute <tr></tr> autour de chaque bouton...
Mon souci c'est qu'avec les boutons j'ai pas la même réaction des boutons. tu pourrais m'expliquer pourquoi ?
Merci d'avance
Modifié par EricRecifal33480 (04 Sep 2018 - 19:39)
J'ai encore bossé sur la structure que tu m'as donnée, me reste que mon problème de bouton
Voici le code tel que je suis arrivé à le structurer
Quand je clique sur les deux boutons du bas j'ai pas de paramètre dans l'url et je comprend pas pourquoi
Pouvez vous m'aider
Tout le reste fonctionne

<!DOCTYPE html>
<html><head>
<meta charset="us-ascii" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aquarium</title>
<style>
body { font: 12pt 'Noto Sans', Droid, Sans-Serif; }
.text-center { text-align: center; }
</style>
<BODY BGCOLOR="#2ECCFA">
</head>

<body>
<h1>Mode Programmation</h1>
<form>

<table BORDER>
<thead>
<TR><TH COLSPAN=1> </TH><TH COLSPAN=2>Voie 1</TH><TH COLSPAN=2>Voie 2</TH></TR>
<TR><TH>Palier</TH> <TH>Horaire</TH> <TH>Puiss.%</TH> <TH>Horaire</TH> <TH>Puiss.%</TH></TR>
<TR><TD>1</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD></TR>
<TR><TD>2</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD></TR>
<TR><TD>3</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD></TR>
<TR><TD>4</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD></TR>
<TR><TD>5</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD></TR>
<TR><TD>6</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD></TR>
<TR><TD>7</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD></TR>
<TR><TD>8</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD></TR>
<tr><td colspan="5" class="text-center"><input type="submit" /></td></tr>
</tbody>
</table>



</form>
<h1>Mode Manuel</h1>
<form>
<table BORDER>
<thead>
<TR><TH COLSPAN=1>Commande Voie 1</TH><TD><button type="button" name="V1-{x}" value="ON/OFF" /></TD></TR>
<TR><TH COLSPAN=1>Commande Voie 2</TH><TD><button type="button" name="V2-{x}" value="ON/OFF" /></TD></TR>
</form>
</body>
</html>
Comme je ne reussissait pas avec le bouton, j'ai reussi à contourner le problème avec une liste déroulante. Oui je suis un tricheur Smiley lol 


<!DOCTYPE html>
<html><head>
<meta charset="us-ascii" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aquarium</title>
<style>
body { font: 12pt 'Noto Sans', Droid, Sans-Serif; }
.text-center { text-align: center; }
</style>
<BODY BGCOLOR="#2ECCFA">
</head>
<body>
<h1>Mode Programmation</h1>
<form>
<table>
<thead>
<TR><TH COLSPAN=1> </TH><TH COLSPAN=2>Voie 1</TH><TH COLSPAN=2>Voie 2</TH></TR>
<TR><TH>Palier</TH> <TH>Horaire</TH> <TH>Puiss.%</TH> <TH>Horaire</TH> <TH>Puiss.%</TH></TR>
<TR><TD>1</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD></TR>
<TR><TD>2</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD></TR>
<TR><TD>3</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD></TR>
<TR><TD>4</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD></TR>
<TR><TD>5</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD></TR>
<TR><TD>6</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD></TR>
<TR><TD>7</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD></TR>
<TR><TD>8</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD><TD><input type="time" name="horaire-{N}" value="{H}" /></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD></TR>
<tr><td colspan="5" class="text-center"><input type="submit" /></td></tr>
</tbody>
</table>
</form>
<h1>Mode Manuel</h1>
<form>
<table>
<thead>
<TR><TH COLSPAN=1>Commande Voie 1</TH><TD><SELECT name="ON/OFF" size="1"><OPTION>ON<OPTION>OFF</SELECT></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD></TR>
<TR><TH COLSPAN=1>Commande Voie 2</TH><TD><SELECT name="ON/OFF" size="1"><OPTION>ON<OPTION>OFF</SELECT></TD><TD><input type="number" name="puiss-{N}" value="{P}" inputmode="numeric" min="0" max="100" />%</TD></TR>
<tr><td COLSPAN="3" class="text-center"><input type="submit" /></td></tr>
</form>
</body>
</html>
Sujet clos
Aller à