Discussion :

[dje8269]

Bonjour à tous,

Je me résigne une nouvelle fois , a appeler au secours !

Certainement dû à une overdose ou une incompréhension de ma part, mais je n'arrive pas à écrire un chiffre dans un fichier que je reçois en argument.

Pour ceux qui me suive sur les autres posts.
j'ai rajouter un potar sur ma platine ESP32.

Ce potar me sert a régler un tension qui est lue par mon ESP32 . C'est une valeur analogique ( comme un thermomètre par exemple).

Dans mon programme avec l'ESP32 je lis cette valeur je la transforme en string et je l'envoie en argument dans un GET. Exactement comme pour l'état de mes leds.
Ce qui me donne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

client.print("GET /analogique.php?V_ana=1234  HTTP/1.1")");

Sauf que cette fois-ci cette valeur( ici 1234) envoyer sous forme de string est en fait une valeur numérique que je dois décomposer.

J'ai donc créer comme pour l'état de mes led en fichier nommé : analogique.php . et dans ce fichier je récupère mon argument pour l'inscrire en dur dans mon fichier .
Ainsi mon navigateur pourra de temps en temps venir lire la valeur et mettre à jour par exemple l'aiguille un compte tour.

Fichier analogique.php actuellement :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1999  
<?php echo $_GET['V_ana'] ?>
 
 
<?php
    include("fonction.php");
 
    if($_GET['V_ana'] == '1999')
    {				
        ecrireDansFichier('analogique.php',"1999",0);
 
     }
    else {
        ecrireDansFichier('analogique.php',"pas bon ",0);
    }  
?>

la fonction ecriredansFichier est opérationnelle car je me sers ailleurs.
mais la voici quand même

Fonction.php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<?php
    // #####################################   FUNCTION    ################################################
    function ecrireDansFichier($url_fichier,$data,$position){
        $monfichier = fopen($url_fichier, 'r+'); // j'ouvre le fichier et je place le curseur au début
        fseek($monfichier, $position); // On met le curseur en position
        fputs($monfichier, $data );    // On écrit les données
        fclose($monfichier);
    }
 ?>

Donc comment faire pour convertir ma chaine de caractère reçue, l'écrire sur mon fichier analogique.php que mon index.php puisse allez a son tour la lire pour effectuer une action suivant la valeur ?

[ProgElecT]

Salut
client.print("GET /analogique.php?V_ana=1234 HTTP/1.1")");
client.print("GET /analogique.php?V_ana=1234 HTTP/1.1"); me semble t il

[dje8269]

Bonsoir ProgElecT,

Tu as raison . C'est juste une erreur de copier/coller malheureusement!

[dje8269]

Ok c'était une erreur de ma part . je n'avais pas ouvert la connexion au serveur. Du coup je voyais ma trame partir avec le port série, mais elle n’arrivai jamais ;

Je vous mets ma function javascript qui est un copié/coller des mises a jours de l'état de mes leds :

JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
			MAJLedB()  // je repete l'opération toute les 0.5 secondes
 
			/*Met à jour l'état la valeur analogique  toutes les 0.5 secondes */		
			function MAJVana() {
 
				const idVana1 = document.getElementById("id-V_ana"); // je défini l'endroit du texte que je dois remplacer par son ID
               	const requete_Vana1= new XMLHttpRequest();
				requete_Vana1.open("GET", "/analogique.php", true);
				requete_Vana1.send();
				requete_Vana1.addEventListener("load", () => {
					idVana1.textContent = requete_Vana1.responseText ;
 
					setTimeout( MAJVana, 500 )	
				})									
			}			
			MAJVana()  // je repete l'opération toute les 0.5 secondes

La page analogique.php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
1495      
 
 
 
<?php
    include("fonction.php");
	ecrireDansFichier('analogique.php',$_GET['V_ana'],0);
?>

Le html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<h1>La valeur du potar = <span id="id-V_ana">-</span></h1>

Bon rien de méchant mais le code s'allonge petit a petit.

Puis-je imbriquer plusieurs fonctions dans la fonction de mise à jour toutes les 0.5 secondes ? Comme ca je sais que dans cette fonction je place mes données à actualiser régulièrement !
Voici le JS de la partie a imbriquer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
//-------------------------------------------------------------------------------
			/*Met à jour l'état des LEDs  toutes les 0.5 secondes */		
			function MAJLedV() {
 
				const idTextLed1 = document.getElementById("id-etat-ledv"); // je défini l'endroit du texte que je dois remplacer par son ID
               	const requete_LEDV = new XMLHttpRequest();
				requete_LEDV.open("GET", "/etatLED1.php", true);
				requete_LEDV.send();
				requete_LEDV.addEventListener("load", () => {
					idTextLed1.textContent = requete_LEDV.responseText ;
 
					if (requete_LEDV.responseText.includes("éteinte")) {
      					imageLedVon.style.display ='none';
						imageLedVoff.style.display ='inline';
					} else if (requete_LEDV.responseText.includes("allumée")) {
						imageLedVon.style.display ='inline';
						imageLedVoff.style.display ='none';
					}
				    setTimeout( MAJLedV, 500 )	
				})									
			}			
			MAJLedV()  // je repete l'opération toute les 0.5 secondes
 
			function MAJLedB() {
 
				const idTextLed2 = document.getElementById("id-etat-ledb"); // je défini l'endroirt du texte que je dois remplacer par son ID
				const requete_LEDB = new XMLHttpRequest();  // Je créer un objet de type requete
				requete_LEDB.open("GET", '/etatLED2.php', true);  // je constitue ma requete
                requete_LEDB.send();  // j'envoie ma requete		
				requete_LEDB.addEventListener("load", () => {  // à la reception de la réponse du réponse, je remplace le texte
					idTextLed2.textContent = requete_LEDB.responseText // je remplace le texte par la réponse recue dans la requete
 
					if (requete_LEDB.responseText.includes("éteinte")) {
      					imageLedBon.style.display ='none';
						imageLedBoff.style.display ='inline';
					} else if (requete_LEDB.responseText.includes("allumée")) {
						imageLedBon.style.display ='inline';
						imageLedBoff.style.display ='none';
					}
					setTimeout( MAJLedB, 500 )
				});
 
			}								
			MAJLedB()  // je repete l'opération toute les 0.5 secondes
 
			/*Met à jour l'état la valeur analogique  toutes les 0.5 secondes */		
			function MAJVana() {
 
				const idVana1 = document.getElementById("id-V_ana"); // je défini l'endroit du texte que je dois remplacer par son ID
               	const requete_Vana1= new XMLHttpRequest();
				requete_Vana1.open("GET", "/analogique.php", true);
				requete_Vana1.send();
				requete_Vana1.addEventListener("load", () => {
					idVana1.textContent = requete_Vana1.responseText ;
 
					setTimeout( MAJVana, 500 )	
				})									
			}			
			MAJVana()  // je repete l'opération toute les 0.5 secondes

Merci de m'avoir lu

[mathieu]

une amélioration que vous pouvez faire est d'utiliser une requête unique pour mettre à jour les données de la page. et pour faire cela plus efficacement sur le serveur web, vous pouvez utiliser un sgbdr (comme mysql par exemple) pour stocker les données au lieu de les enregistrer dans des fichiers texte.

dans la base de données, vous aurez une table avec les champs "code" et "valeur" par exemple et donc vous aurez un script php unique qui va enregistrer les valeurs de la carte avec des requêtes dans le genre valeur.php?code=potentiometre&valeur=129.
et pour la mise à jour de l'affichage, le javascript appellera un seul script qui retournera toutes les données au format json.

l'avantage d'un sgbdr est qu'il sera ensuite plus facile de faire évoluer tout le système. vous pourrez par exemple enregistrer la date du dernier envoi de données pour vérifier que tout fonctionne régulièrement. vous pourrez aussi classer les valeurs quand vous aurez plusieurs cartes à plusieurs endroits.

[NoSmoking]

Bonjour,

Bon rien de méchant mais le code s'allonge petit a petit.

Tu es en bonne voie pour du « code spagetti » .

Puis-je imbriquer plusieurs fonctions dans la fonction de mise à jour toutes les 0.5 secondes ?

As tu conscience que lorsque tu auras une vingtaine d’équipements connectés cela reviendra à faire 20 requêtes espacées de .5s/20, calcul très approximatif.


je retiendrais de ce qu'à écrit mathieu :

	une amélioration que vous pouvez faire est d'utiliser une requête unique pour mettre à jour les données de la page (...) et pour la mise à jour de l'affichage, le javascript appellera un seul script qui retournera toutes les données au format json.

c'est ce que je t'avais préconisé dans une autre de tes discussions : Actualiser une page à la reception d'une requête !

[dje8269]

Oui je vois le code tourné en code spaghetti !

C'est donc pour ca que je vais m’arrêter la dans les ajouts de fonction et autre joyeuseté. J'ai sauvegardé mon travail. Je suppose que vous avez aussi commencez aussi par du code spaghetti. C'est souvent incontournable pour comprendre que l'on fait mal les choses . Je pense que cela fait partis de l'apprentissage.
Maintenant que je vois les limites de ma façon de procéder je vais "arranger" un peu les choses .

Je vais recommencer avec ton exemple et essayer de le comprendre. De plus je vais voir si je me lance dans la partie gestion de base de données. cela peut être bien pour stocker des choses comme la température toute les heures etc....

Merci à tous pour vos précieux conseils.

[NoSmoking]

Je suppose que vous avez aussi commencez aussi par du code spaghetti.

Oui mais le principal est de s'arrêter avant l'indigestion

Dès que l'on écrit deux fois la même chose, ou presque, il faut se poser la question de la factorisation, il en est de même, d'ailleurs, pour tes fonctions d'envois de données, ne pas oublier que tu peux passer des paramètres à une fonction.

[dje8269]

Je viens d'effacer mon serveur pour recommencer avec vos conseils à tous , et me perfectionner !

Après avoir regarder ton code, j'ai quand même du mal a comprendre la façon de construire cette partie :

Si je peux abuser de temps pour quelques explication de ce qui fait quoi et comment
Je visualise les deux parties appui et relâche mais par exemple le (e) ca signifie quoi ca ? J'en demande peut être beaucoup. Mais je dois comprendre pour pouvoir modifier et apprendre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
const Poussoir = {
    down: (e) => {
        function _docUp() {
        console.log('ici')
        obj.classList.remove("mouse-down");
        obj.previousElementSibling.classList.remove("on");
        document.removeEventListener("pointerup", _docUp);
        }
        const obj = e.target;
        obj.classList.add("mouse-down");
        obj.previousElementSibling.classList.add("on");
    },
    up: (e) => {
        const obj = e.target;
        obj.classList.remove("mouse-down");
        obj.previousElementSibling.classList.remove("on");
    }
    };

Un grand merci par avance

[mathieu]

"e" est la variable qui va contenir l'objet "évènement" (https://developer.mozilla.org/fr/docs/Web/API/Event)
il est utilisé dans ce code pour savoir à quel élément est associé l'évènement.

[dje8269]

Bon...

Je vais être honnête, la construction de ce code n'est absolument pas naturelle pour moi.
Après avoir étudier ce script , j'entrevois dans les grandes lignes, l'ajout et la suppression des différentes classes. Mais c'est vraiment la construction qui me pose problème. Du coup j'abandonne cette idée car je serais incapable de le modifier dans quelques mois. Je suis loin d'en faire tout les jours.

Merci en tout cas. Je vais essayer de trouver une solution pour garder la logique de construction que j'ai assimilé et de l'améliorer.

[NoSmoking]

Après avoir regarder ton code...

tu devrais plutôt partir du script que j'ai donnée dans ^(*)ton autre discussion, dans celui que tu as pris le seul but était de visualiser l'utilisation des PointerEvent ou autre :active, de plus je n'ai pas franchement fait le ménage.

(*) As tu essayé de faire tourner cet exemple ?

[dje8269]

As tu essayé de faire tourner cet exemple ?

Non je n'ai pas essayé ! Mais pour respecter le temps que tu as passé à l’écrire je vais le faire.
Je viens de le relire, et je pense que l'a aussi il y a trop de chose compliquées.

En fait, c'est marrant mais je rencontre le même problème quand les jeun's, viennent pour apprendre à programmer un microcontrôleur en "C" .
Je pars du principe qu'il faut donner le gout avant d'insister sur LA bonne façon de faire.
Si je leur dis directement de configurer les horloges du µC, de lire et les registres , programmer les fusibles de régler le watchdog, ils se perdent, n'avancent pas et renoncent.
AU départ il font clignoter leurs led et déjà ils sont super content. Ensuite il veulent acceller le clignotement, alors il change la tempo , puis après un règle l'horloge etc....
Il faut avancer lentement et améliorer les choses petit à petit disons que c'est mon point de vue.
Je comprends toutefois que cela agace de voir des aberrations, alors que nous on voudrait les donner les bonnes habitudes tout de suite, c'est humain.

Je te tiens au courant après avoir tester ton code!

[dje8269]

Re,

Je viens de le tester! ca fonctionne bien , le petit effet fondu est sympa !
J'ai également étudié le code. Pfiouuu
Vraiment désolé , c'est trop chaud pour moi .

[NoSmoking]

J'ai également étudié le code. Pfiouuu
Vraiment désolé , c'est trop chaud pour moi .

La syntaxe du JavaScript est très proche de celle du C, donc je présume que ce n'est pas cela qui te donne des bouffées de chaleurs

Concernant le code JavaScript pourrais tu nous dire ce qui te pose problème à comprendre que l'on essaie de démystifier tout cela.

Le but du code était de te montrer qu'avec 4/5 fonctions tu pouvais t'en sortir et ce quelque soit le nombre de composants à traiter.

[dje8269]

Merci NoSmoking pour tes encouragements.

Effectivement ce n'est pas dans la programmation en elle même qui me pose le plus de problème, même si il y a des notions perturbantes, la récursivité et le temps réel caché. Difficile à expliquer. Sur un µC le code se déroule ligne après ligne.

Mais si vous voulez m'aider alors c'est à moi de jouer. Je vais tenter d'écrire mes questions/interrogations sur ton code.

La première difficulté est le nombre d'objet ou de fonction qui s'imbrique. Mais surtout la façon dont cela se construit. Et cela ne s'apprend pas avec 3 copier/coller et deux lignes d'explications. Je pense qu'il faut plusieurs années.
Comme les choses sont automatisées ("factoriser"), elles sont beaucoup moins visibles et parlantes, car elles font appellent à des variables. Même bien nommées, ces variables sont compliquées à déterminers et leurs rôles mal compris. De plus ne sachant toutes les possibilités qu'on possède, on ne peut pas savoir comment faire. C’est pour cela qu'il avancer doucement.

En re-re-lisant ton code, je me rends compte que je comprends ou tu veux en venir, mais absolument pas comment c'est construit.

Je vais prendre une fonction qui à elle seule montrera la difficulté de compréhension.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function handleFormChange(e) {
  e.preventDefault();
  const data = {};
  data[e.target.name] = e.target.checked ? "1" : "0";
  sendAjaxData("LED-write-config.php", data, showResult);
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

function handleFormChange(e) {

Ici tu crée une fonction, qui sera appelée quand une valeur dans le formulaire va changer.
Le "(e)" signifie event il me semble, signifiant qua la fonction reçoit un argument "e" qu doit être le code de l’événement qui vient d'arriver. mais que contient réellement ce "e" ? contient-il l'ID du bouton checked qui à été appuyé? seulement le fait qu'un élément check à été lancé ?
Donc en gros, si le form composé de bouton checked à reçu une modif on va exécuter cette fonction.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

e.preventDefault();

Ici il faut allez regarder ce que signifie "preventDefault"
Je pense que ceci est une option. même l'explication en français n'est pas clair ! lol
Passons car je pense que cette ligne n'est pas essentiel, mais peut être que je me trompe.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

const data = {};

Alors ici, on créer une constante avec le mot "const" qui s’appelle data et qui vaut "{}" ???? pourquoi des accolades vides ? que vaut data a ce stade ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

data[e.target.name] = e.target.checked ? "1" : "0";

Cette ligne m'a fait saigner des yeux !

Ici on se trouve en plein dans les problèmes de construction et d'association incompréhensible pour un novice.
Donc notre objet data qui était construit avec des accolades vides, se retrouve avec des crochets ( qui ont une signification) je suppose. A l’intérieur de ces crochets, on associe notre événement "e" par un point"." au mot target, qui en traduction littérale signifie cible, donc je suppose que l'on vise le bouton qu i a déclenché l’événement, associé encore par un point "." à "name" qui devrait être le nom du bouton cible d’où survient l’événement.
Je résume, "data" dont je ne sais pas ce que c'est , fait référence à un événement survenu par exemple sur la cible bouton led_1 .

Cette valeur "data" est donc égale "=" à 1 ou 0 d’après ce que je devine. l’événement "e.target.checked" prends la valeur soit 1 ou 0 . la aussi la construction ne s'invente pas, il faut la connaitre avec le "?" et les ":" .

Cette ligne est vraiment la moins compréhensible pour moi.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

sendAjaxData("LED-write-config.php", data, showResult);

celle parait bien simple face à la précédente.
Ici tu envois la donnée par ajax, ca reste flou mais je comprends que tu va envoyer "data" ( creer juste au dessus) au fichier entre guillemets, et ensuite tu va exécuter le fonction "showResult" . déjà pourquoi ne pas l'écrire "showResult()" comme c'est une fonction.


Voila en gros. J’espère que cela vous montrera, la vrai problématique de compréhension. Car c'est en connaissant l'endroit où les personnes bloquent, qu'on peut améliorer ses explications.

je résume :

En lisant cette fonction, je vois qu'elle est appelée a chaque fois qu'un changement dans le formulaire apparait. Docn a chaque fois qu'un bouton ckecked est appuyé.
Cette fonction écrit sur le fichier "LED-write-config.php" le nom du bouton qui à été appuyé ainsi que son état "1" ou "0" .

Le HIC c'est que c'est pareil pour toutes les autres fonctions.

[mathieu]

j'ai ajouté des informations dans les commentaires du code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
// une fois cette fonction associée à un évènement, javascript va appeler cette fonction lors de l'évènement concerné en envoyant un objet "évènement" (https://developer.mozilla.org/fr/docs/Web/API/Event) dans l'argument e.
// donc cet objet "e" contient par exemple les informations de l'objet qui a lancé l'évènement dans "e.target". et un peu plus loin dans le code il y a "e.target.name" qui contient le nom de la case à cocher et "e.target.checked" qui indique si la case est cochée ou non
// vous pouvez voir tout cela en ajoutant "console.log(e);" au début de la fonction et vous regardez le résultat dans la console
 
function handleFormChange(e) {
 
  console.log(e); // débugage
 
  e.preventDefault(); // annule l'effet par défaut. ici l'évènement est de cocher une case donc un clic sur la case ne va pas modifier cette case. c'est un autre morceau de javascript qui va cocher la case plus tard quand le serveur aura répondu qu'il a allumé la diode
 
  const data = {}; // construction d'un objet "data" vide
 
  data[e.target.name] = e.target.checked ? "1" : "0"; // maintenant data contient par exemple {"diode_2" : "1"}
 
  sendAjaxData("LED-write-config.php", data, showResult); // si on utilise "showResult()" ici, cela va appeler immédiatement la fonction et ça mettra le résultat dans le 3e argument de "sendAjaxData". donc on met une référence à cette fonction qui sera appelée plus tard lors de la réponse du serveur
 
}