Bonjour à tous,

J'ai besoin de votre aide afin que vous puissiez me dire dans un premier temps si la programmation que je veux faire vous parait logique ou non et dans un deuxième temps sûrement vous demander de petit couo de main.

J'ai suivis les cours xhtml/css, il y a peu le php, et je viens de commencer le python (où je suis un peu perdu).

Avec mes faibles connaissances, j'aimerai pouvoir réaliser la chose suivante.

J'ai une domotique legrand bticino dans l'appart que je loue avec gestion des températures intérieures.

J'ai créé un site web qui en php affiche les 3 températures à l'instant T et me permet de jouer sur la température demandée au chauffage.

Ce que j'aimerai, c'est pouvoir récupérer ces températures à intervalles régulier (x minutes), les stocker dans une base de données puis les afficher sur mon site web sous forme de graphique, graphique en ligne regroupant les 3 températures, bientôt 4, et pour lequel je pourrai changer la plage affichée (heures, jour, mois).

Je pensais donc partir sur un script pyton pour la récupération des températures à intervalles régulier et leur entegistrement dans mysql sur mon NAS syno.

Puis en php récupérer ces données de ma Bdd afin d'afficher le graphique sur mon site web.

Pensez-vous que c'est la bonne méthode à suivre tant dans la logique à suivre, les languages utilisés que des compétences nécessaires ? 

Pour le moment mon script python arrive à lire via le socket les températures envoyées automatiquement par les sondes et j'arrive à les enregistrer dans un fichier texte, mais impossible de les enregistrer dans mysql via python 3.6.

Je but dès la ligne import mysqlbdd dont le module n'existe pas et que je n'arrive pas à installer. Pour info, je test les script python sur mon windows 10 python 3.6.

Voila je vais arrêter là pour le moment. Déjà qu'en pensez-vous de la démarche ? 

Merci à tous pour votre aide ou déjà de m'avoir lu 😉

Jérem

-
Edité par pdarkjeje 22 juin 2017 à 13:41:42

Bonjour,

Comment récupères-tu les infos pour le site actuellement ? Peux-tu pas directement stocker dans la BDD via PHP (pour recup les données toutes les x minutes, tu peux faire une page PHP juste pour recup l'info et la stocker sur MySQL et appeler cette pages toutes les 3 minutes via des taches Cron) ? Biensur tu peux coder en PHP un webservices et l'appeler ou poster des datas dessus avec le module requests de python mais je ne comprends pas pourquoi faire comme ca. 

Si tu veux le faire en python car tu sais déjà récupérer les valeurs, tu peux surement regarder du coté de https://pypi.python.org/pypi/mysqlclient

Ca permet de se connecter en python a MySQL et faire des requests dessus.

Bon courage,

Coni

Salut Coni,

Je te remercie pour ta réponse.

Actuellement, je récupère les températures via php en envoyant une commande openwebnet via une connexion au socket.

Je pourrai les enregistrer dans mysql sans soucis je pense, mon problème était de pouvoir le faire à intervalles régulier sans action de ma part.

Je vais regarder cette histoire de cron, pour voir si c'est plus simple à faire. Car c'est sûr que faire une page spécial en php de connexion au socket et d'enregistrement dans mysql me parait bien plus simple que coder en pyton. Puis une page en php pour sortir le graph, là ça va se compliquer mais je ne désespère pas

Mon 2ème soucis, c'est que le script de connexion au socket en php m'a été donné et que je ne le comprends pas. Et quand je cherche à en faire un plus simple, ou utiliser celui d'un ami plus simple que lui je comprends et qui fonctionne chez lui, ça ne fonctionne pas chez moi.

Le problème de ce script c'est qu'il m'affiche le retour du socket mais quand le socket renvoi plusieurs retour d'affilé, il ne m'affiche que le premier. Et je ne comprends pas du tout comment il a créé on script et donc comment faire une boucle,...

Merci en tout cas pour ton idée du cron

Pas de soucis, peux tu copier le code pour jeter un oeil ?

Cron en fait est une tache géré par un site, tu peux lui dire d'ouvrir telle ou telle url avec tel data etc a interval souhaité. Si tu veux ca toutes les 3 min par contre, il faudra surement s'orienté sur une version payant de cron (de mémoire j'ouvrais toutes les heures un url qui mettait 30s a retourner l'info et c'etait deja tres limite en gratuit :s (voila le site pour info https://www.easycron.com/user/login)

Pour le graph, evite de le faire en PHP, tu vas donner du travail au serveur au lieu du navigateur. oriente toi plutot vers des libs javascript comme celle presentes ici https://www.sitepoint.com/15-best-javascript-charting-libraries/ (a toi de fouiller pour voir ce qui te plait :p). T'auras juste a retourner les valeurs soit par une requete soit directement lors de l'ouverture de la page dans un div que tu caches par exemple. Apres tu parses les données en js.

Et si tu veux aller plus loin, tu peux utiliser Django pour coder le site en python, les graph en js et la BDD en PHP

-
Edité par coni63 22 juin 2017 à 23:31:13

Merci pour toute ses infos.

J'ai réussi à créer mon script php mysql qui récupère donc les 3 températures et les enregistre dans une table température (Id, Pièce, Date, Température).

J'ai vu ou créer une tâche planifiée dans le DSM 6 de mon synology. Je la répète toute les 15 mn.

Par contre pour le moment elle ne fonctionne pas, j'ai un retour d'erreur : could not find driver.

En cherchant rapidement il semblerait que DSM 6 impose PHP 5.6 pour fonctionner mais en passant de PHP 7 à 5.6 ça ne fonctionne toujours pas. Je chercherai ce week-end.

Merci pour ta proposition de lire mon script php, je vais te le copier sous peu.

Je vais regarder pour le graph en javascript, j'avis en effet vue rapidement cette problématique de ressource serveur.

Il faudra que je regarde quand même cette histoire de python/mysql car j'ai une commande de ma domotique qui permet d'écouter tout ce qui se passe sur le bus de la domotique et j'ai réussi à faire un script en python qui tourne h24 pour enregistrer (pour le moment dans un simple fichier txt), tout ce qui se passe sur le bus et je ne sais pas si on peut avoir un script php qui tourne h24 en mode écoute, et encore plus avec mon problème de code qui me renvoi que le premier retour du socket,...

A terme j'aimerai enregistrer via ce script d'écoute, l'ensemble des requêtes d'ouverture fermeture de volet roulant afin d'enregistrer les commandes avec leur timing pour ensuite via un calcul de timing, savoir de combien de cm ou % est ouvert le volet. Ce qui me permettrait ensuite de demander l'ouverture du volet de x%, de juste l'interstice des volets,...

Merci coni63, je reviens vers toi rapidement avec le bout de code php

Le cron fonctionne merci coni !

Voici le script que j'utilise pour me connecter au webserveur bticino et lui envoyer des commandes OpenWebNet.

Le principe est d'ouvrir le socket, on récupère un ACK (une confirmation de bonne connexion),

On envoi alors une commande *99*9## pour préparer le webserveur à recevoir nos commandes d'action, on reçoit en retour un ACK,

Puis on envoi la ou les commandes dans la foulée exemple : *#4*1*0##

Mes soucis :

- c'est que le code qu'il a créé a 3 fonctions et que je ne peux pas lire mes variables d'une fonction a une autre, donc je ne peux pas garder le retour d'une commande pour l'utiliser dans un autre script php que j'aurai mis à la suite. Mes script php d'utilisation des retours du webserveur doivent être intercalé au milieu du code (je t'ai mis l'indication de la zone). Donc ça complique un peu les choses, mais ça fonctionne.

- Le 2ème soucis, c'est que je ne reçois qu'un seul retour du webserveur par commande, alors qu'il existe des commandes qui permettent des retours multiples. Par exemple je demande la conso électrique de la journée, le webserveur doit me retourner 25 retour les uns à la suite des autres (1 par heure et le cumul), or là je n'ai que le 1er retour correspondant à la 1ère heure.

La personne ayant fait le script m'a dit qu'il était pas très doué en php et qu'il suffisait de faire une boucle.

Si jamais tu y comprends quelques choses et peut m'apporter tes lumières ce serait super.

<?php
function read($socket){
$out = $recv = '';
$buffersize = 1460;
do {
if ($out != '' && $recv != '') break;
$recv = '';
$recv = socket_read($socket,$buffersize);
if ($recv != '') $out .= $recv;

} while (strlen($recv)==$buffersize);

//C'est ici que j'insert mon code php pour traiter les retours du serveur
   
	echo $recv; //Le retour me donne le 1er ACK figurant dans le buffer, correspondant
				//à la connexion au webserveur, puis le 2ème suite à la commande *99*9##,
				//puis le retour du serveur relatif à ma commande *#1*22##

return $out;
}
function write($socket,$txt){
socket_write( $socket, $txt);
return read($socket);
}

function sendCde($cde) {
$hostname = "192.168.1.32";
$port = 20000;
$ACK = '*#*1##';
$NACK = '*#*0##';

$socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
if ($socket === false) echo "socket_create() a échoué : raison : " . socket_strerror(socket_last_error()) . "\n";

$result = socket_connect($socket, $hostname, $port);
if ($result === false) echo "socket_connect() a échoué : raison : ($result) " . socket_strerror(socket_last_error($socket)) . "\n";

if(read($socket)==$ACK){//1er ACK de connexion
if(write($socket, '*99*9##')==$ACK){ //Login accepté
return write($socket, $cde);//On balance la commande au socket
}else{
echo "Pb login\n";
}
};
echo "Fermeture du socket...\n";
socket_close($socket);
}
sendCde("*#1*22##"); //Numéro de la lampe à modifier !!!
?>

Merci pour ton aide

-
Edité par pdarkjeje 23 juin 2017 à 20:07:00

Je me suis permis de le remettre en page car le code actuelle était difficile a lire (l'habitude de python )

<?php
	function read($socket){
		$out = '';
		$recv = '';
		$buffersize = 1460;
		do {
			if ($out != '' && $recv != '') {
				break;
			} else {
				$recv = socket_read($socket, $buffersize);
			}
			if ($recv != ''){
				$out .= $recv; // equivaut a +=
			}
		} while ( strlen($recv) == $buffersize );
 
		//C'est ici que j'insert mon code php pour traiter les retours du serveur
    
		echo $recv; //Le retour me donne le 1er ACK figurant dans le buffer, correspondant
					//à la connexion au webserveur, puis le 2ème suite à la commande *99*9##,
					//puis le retour du serveur relatif à ma commande *#1*22##
	 
		return $out;
	}
	
	function write($socket,$txt){
		socket_write( $socket, $txt);
		return read($socket);
	}
 
	function sendCde($cde) {
		$hostname = "192.168.1.32";
		$port = 20000;
		$ACK = '*#*1##';
		$NACK = '*#*0##';
		 
		$socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
		
		if ($socket === false){ /* si la creation du socket a echoué */
			echo "socket_create() a échoué : raison : " . socket_strerror(socket_last_error()) . "\n";
		} else {  /* si le socket est crée, on cree la connexion */
			$result = socket_connect($socket, $hostname, $port);
		
			if ($result === false) { /* verification de la bonne connexion */
				echo "socket_connect() a échoué : raison : ($result) " . socket_strerror(socket_last_error($socket)) . "\n";
			} else {
				if(read($socket)==$ACK){ //1er ACK de connexion
					if(write($socket, '*99*9##')==$ACK){ //Login accepté
						return write($socket, $cde);//On balance la commande au socket
					}else{
						echo "Pb login\n";
					}
				};
			}
			echo "Fermeture du socket...\n";
			socket_close($socket);
		}
	}
	
	sendCde("*#1*22##"); //Numéro de la lampe à modifier !!!
?>

Ou as tu trouvé les infos sur l'API (le systeme de login (ACK, NACK), les codes *#X*Y##) car en faite le code ne fait qu'envoyer les commandes a l'API et lire la réponse via un systeme de buffer (via la fonction read). Le seul truc c'est que sans info sur l'API il sera difficile d'adapter le code :s

Il faudrait peut etre pour deplacer aussi le topic dans PHP du coup ^_^, je ne sais pas si l'auteur peut le faire.

NB : de ce que j'ai lu ici, la doc est dispo quand tu est enregistré sur le site avec ton appareil domotique. Si tu peux partager la doc, ca aiderait bien

-
Edité par coni63 23 juin 2017 à 22:13:41

C'est ce lien qui m'a permis d'envisager concrètement de pouvoir connaitre la position des volets roulants

Je t'envoi un PM.

Merci pour la Doc, l'API offerte est incroyablement complète, tu peux tout faire avec c'est fou ^_^

Par contre je ne comprends pas trop comment ton code *#1*22## te retourne la température ... D'apres l'exemple donnée page 14 de l'intro tu as :

*#4*1*0##           Request temperature in the zone 1 of the thermoregulation function. 
*#4*1*0*0215*3##    The reply message includes the temperature value 21,5° written in  the first parameter. 

Tu devrais envoyer #4*22## pour demander la température de la zone 22

Encore d'apres la doc #1 signifie que tu demande la valeur de l'eclairage 22 (Comme montré page 13 de l'intro aussi)

*#1*12##             Request status light 12

Pareil dans ton code PHP on ne voit pas le parsing du retour d'info. Echo te retourne quoi exactement (quelque chose comme ca *#1*22*0*0215*3## qui t'indique qu'il fait 21.5) ? 

Il faudrait peut etre que tu jette un oeil au document "WHO_4" qui peut surement de fournir des info encore plus utilie sur ton site que juste la température.

En tout cas c'est pas simple a comprendre toute la doc :s

C'est de ma faute, je ne pensais pas que tu pousserais jusqu'à regarder et comprendre l'OpenWebNet.

Je ne t'ai en effet pas mis le code de la température mais celui demandant l'état de la lampe 22. Est elle allumée ou éteinte ?

Et la réponse est un ACK de connexion, un ACK pour *99*9## et la réponse si la lampe est allumée à savoir, OUI : *1*1*15## et NON : *1*0*15##

C'est aussi ce même code qui te permet d'allumer ou éteindre la lampe 15.

Pour la température actuel de la pièce 1 , j'envoi *#4*1*0## et je reçois après les ACK, *#4*1*0*0290## ce qui se traduit par la température (#4) pour la pièce 1 (*1*0*) est de 29,0 °C (0290).

Mon retour d'état de la lampe dans le script que je t'ai envoyé est donc *#*1##*#*1##*1*0*22##

Si j'envoie le même code mais avec la commande de température à savoir *#4*1*0##, j'obtiens la réponse *#*1##*#*1##*#4*1*0*0282##

Excuse moi, de t'avoir induit en erreur avec une commande de lumière.

OpenWebNet est pas mal du tout, je peux allumer/éteindre et voir l'état de la lampe.

Ouvrir/fermer/arrêter un volet (mais il ne mémorise pas le pourcentage d'ouverture/fermeture du volet),

Obtenir la température d'une pièce, la température demandée sur la centrale chauffage, changer cette température, obtenir la température demandée dans chaque pièce, obtenir le différentiel de température demandé entre la centrale et la pièce car chaque pièce peut demander via une molette/interrupteur de couper son chauffage, demander +3 à + 3°C au dessus de la centrale.

Je peux obtenir la conso électrique instantanée de la maison, et la conso d'une des journée des 365 derniers jours (c'est ça qui ne fonctionne pas avec mon script.

Bref, c'est très sympas.

Ah ok je comprends un peu mieux

Pour la température j'ai comme un doute que tu puisse demander un recap, tu as ça pour la partie énergétique qui te retourne soit :

- la conso /h pendant 1j 

- la conso /j pendant 1 mois

- la conso /mois entre l'année en cours et la précédente

Mais je n'ai pas trouvé d’équivalent pour la température ou un allumage de lampe... Auquel cas, la routine cron reste le plus simple. Si tu héberges ton site sur un serveur local, tu peux directement installer cron dessus et tant que le serveur sera en marche, alors ca récupéreras les données toutes les X minutes.

En tout cas merci pour cette découverte car je connaissais pas du tout ces possibilités ^_^

Excuse moi je pense qu'on c'est mal compris.

Je ne souhaite pas avoir de récap pour autre chose que la conso.

Mon soucis c'est que le script php pour la conso ne me retourne que le premier retour.

J'envoie la commande *#18*51*511#6#23## qui demande la conso de la journée du 23 du mois 6 et je ne récupère que *#*1##*#*1##*#18*51*511#6#23*1*535##

Qui s'analyse en ACK ACK conso demandée pour le mois 6 du jour 23 de la première heure 535 Wh.

Or je devrais avoir :

*#*1##*#*1##*#18*51*511#6#23*1*535##

*#*1##*#*1##*#18*51*511#6#23*2*xxx##

*#*1##*#*1##*#18*51*511#6#23*3*xxx##

*#*1##*#*1##*#18*51*511#6#23*4*xxx##

*#*1##*#*1##*#18*51*511#6#23*5*xxx##

*#*1##*#*1##*#18*51*511#6#23*6*xxx##

*#*1##*#*1##*#18*51*511#6#23*7*xxx##

*#*1##*#*1##*#18*51*511#6#23*8*xxx##

*#*1##*#*1##*#18*51*511#6#23*9*xxx##

*#*1##*#*1##*#18*51*511#6#23*10*xxx##

*#*1##*#*1##*#18*51*511#6#23*11*xxx##

,...

Sous une connexion via Putty ou via Python j'arrive à avoir cette réponse mais pas sous php. Car sous php dès que j'ai un retour d'une commande elle est mise dans le buffer puis restitue le buffer alors que le serveur lui répond en 25 fois, donc le buffer devrait attendre qu'il n'y ait plus de retour avant de fournir la réponse.

Mais je ne comprends pas comment a été fait le script php, donc je ne comprends pas comment changer cela

Ah ok, je suis un peu perdu car dans le poste de base tu parlais de température Mais a ce que je vois, le soucis ne vient pas de la commande car tu maitrise mieux ce sujet que moi

Pour ce qui est du code en faite tout se fait dans la fonction read. Elle recupere du socket une partie des donnees de la taille du buffer 1460 octets je suppose. Il boucle tant que le socket reponds avec 1460 octets. Si c'est moins alors il considere que le retour est terminé. Or peut etre que pour separer chaque retour, le socket renvoie qqch de plus leger de 1460 octets. 

Je te propose d'essayer ses 2 solutions :

1ere solution : au lieu de boucler tant que la reponse a la taille du buffer, on boucle tant que la reponse arrive (risque de boucle infini peut etre ...).

    function read($socket){
        $out = '';
        $recv = '';
        $buffersize = 1460;
        do {
            if ($out != '' && $recv != '') {
                break;
            } else {
                $recv = socket_read($socket, $buffersize);
            }
            if ($recv != ''){
                $out .= $recv; 
            }
        } while ($recv != '');
  
        //C'est ici que j'insert mon code php pour traiter les retours du serveur
     
        echo $recv; 
      
        return $out;
    }

Ou alors, sachant que tu as 24h a recuperer tu peux boucler 12 fois et stocker dans le $out chaque valeur:

function read($socket){
        $out = array();
        $temp = '';
        $recv = '';
        $buffersize = 1460;
        for ($i = 0 ; $i < 24 ; $i++){
            do {
                if ($out != '' && $recv != '') {
                    break;
                } else {
                    $recv = socket_read($socket, $buffersize);
                }
                if ($recv != ''){
                    $temp .= $recv; // equivaut a +=
                }
            } while ( strlen($recv) == $buffersize );
            $out->append($temp); // comme tu as ton retour complet, tu le stockes dans un array
        }
  
        //C'est ici que j'insert mon code php pour traiter les retours du serveur
     
        echo $recv; //Le retour me donne le 1er ACK figurant dans le buffer, correspondant
                    //à la connexion au webserveur, puis le 2ème suite à la commande *99*9##,
                    //puis le retour du serveur relatif à ma commande *#1*22##
      
        return $out;
    }

En esperant que l'une des solutions marche

Merci coni pour tes 2 propositions, malheureusement aucune des deux ne fonctionne.

Pour la 1ère j'ai bien un retour, mais c'est le même qu'avec le script initial.

Pour le 2ème script j'ai l'erreur suivante : Fatal error: Call to a member function append() on array in /volume1/web/Test2.php on line 18 Call Stack: 0.0283 134640 1. {main}() /volume1/web/Test2.php:0 0.0284 134712 2. sendCde() /volume1/web/Test2.php:64 0.0290 135032 3. read() /volume1/web/Test2.php:51

La ligne 18 étant la 17 pour toi vue que j'ai ma ligne 1 = à <?php

Désolé pour la confusion du dessus. Je veux modifier le script php pour la partie conso.

Et d'un autre côté j'aimerai stocker les retours de température qui fonctionne déjà avec le script afin de les stocker dans une Bdd (tout cela fonctionne maintenant) pour ensuite les restituer sous forme de graphique interractif (cette partie je lutte pour le moment, n'arrivant pas du tout à avoir un semblant de graph avec Highcharts-5.0.12 mais je ne désespère pas )

Merci beaucoup pour ton aide !!!

PS petite précision, mon script de retour de la conso, comme ton premier script ne me renvoi qu'une ligne de conso comme je te disais. Mais si j'actualise la page il peut me renvoyer une autre heure de manière aléatoire, mais toujours qu'une seule heure. Si jamais ça peut t'aider à comprendre le fonctionnement.

-
Edité par pdarkjeje 25 juin 2017 à 8:45:10

Arf, la je seche un peu, l'erreur je ne vois pas trop ce que ca peut etre :s

Par contre pour highchart je peux t'aider car j'ai fait un truc similaire sur un site dont voila le code (bon c'est peut être pas le plus élégant par contre mais bref) :

Partie PHP, je request mes variables a la base SQL et je les mets juste dans un div caché (chaque ligne est séparé par , et la fin de ligne par ; pour le parsing mais tu mets ce que tu veux).

// recup en php de ma requete dans la variable $result     
<div id="csv"  style="display:none">
    <?php
        while ($data = $result->fetch_assoc()){
            echo $data['Day'].','.$data['V1'].','.$data['V2'].';';
        }
    ?>
</div>

Ensuite en javascript, je les recups apres la fin du loading de page

$(function(){
        
    var arr = [[null], ["V1"], ["V2"]]; // mon csv a 3colonnes dont je cree une matrice de 3 colonnes

    var csv = $.trim($("#csv").text()).slice(0, -1); //recup des valeurs du bloc csv (par contre le slice je ne me souviens plus, ca vire juste le dernier 

    var lines = csv.split(';');
    var items;

    $.each(lines, function(index, line){ // remplissage des arrays
        items = line.split(',');
        arr[0].push(items[0]);
        arr[1].push(parseInt(items[1]));
        arr[2].push(parseInt(items[2]));
    });

    Highcharts.chart('container', {

        chart: {
            type: 'column' // a toi de voir si c'est ce que tu veux
        },

        data: {
            columns: arr
        },

        title: {
            text: 'Daily reports of Bar'
        },

        subtitle: {
            text: 'Source: Foo'
        },

        plotOptions: {
            series: {
                pointStart: Date.UTC(Date.now() - 5*24*3600*1000 ), // historique de 30 j
                pointInterval: 1 * 24 * 3600 * 1000, // step de 1j
                groupPadding: 0,    // deco
                pointPadding: 0.1,  // deco
                pointWidth: 10      // deco
            },
            column: {
                stacking: 'normal'
            }
        },

        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },

        tooltip: {
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },

        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats : {
                day: '%e. %b'
            }
        },

        yAxis: {
            title: {
                text: 'Number of Bar'
            },
            min: 0,
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        }

    }); //end of chart
});

Bon le site n’étant pas fonctionnel depuis plus de 30j, ca ne montrerai rien mais en gros j'ai sur 30j 2 colonnes avec les valeurs de V1 et V2 avec en haut un label avec les valeurs.

NB : il te faut JQuery aussi, voila mes script dans mon cas

<script src="../static/js/jquery-3.1.1.min.js"></script>           // obligatoire, par contre quelle version mini ??
<script src="../static/js/bootstrap.min.js"></script>              // tres utile pour la deco mais pas obligatoire
<script src="../static/js/highcharts/highcharts.js"></script>
<script src="../static/js/highcharts/modules/data.js"></script>
<script src="../static/js/highcharts/modules/exporting.js"></script>
<script src="../static/js/custom/stat.js"></script>                // le script js du dessus avec d'autres trucs aussi dedans

-
Edité par coni63 25 juin 2017 à 10:00:05

Merci pour ton aide.

Mais je me demande si je n'ai pas un soucis au niveau de l'installation de highcharts et de JQuery car j'ai une page qui reste blanche quand j'utilise un script que j'ai fait ou un autre tout prêt trouvé sur Internet.

J'ai téléchargé highcharts et JQuery que j'ai dézipé dans un dossier dans lequel figure la page web, mais je me demande si c'est ça qu'il fallait faire et si j'ai mis les bons liens dans <script src="../static/js/jquery-3.1.1.min.js"></script>

tu peux juste creer une page blanche et tester comme ceci :

<html>
    <head>
        <title>Foo</title>
        <script src="../static/js/jquery-3.1.1.min.js"></script>
        <script src="../static/js/highcharts/highcharts.js"></script>
        <script src="../static/js/highcharts/modules/data.js"></script>
        <script src="../static/js/highcharts/modules/exporting.js"></script>
    </head>

    <body>
    </body>

    <script>
        $(function() {
            alert( "ready!" );
        });
    </script>
</html>

Si quand tu ouvres la page tu as le alert, ca veut dire que c'est bien chargé, sinon c'est que ton url est pas bonne.

Ma page reste en effet blanche quand je la lance.

Je suis un peu perdu.

J'ai créé la page suivante :

<!doctype html>
<html lang="fr">
<head>
		<meta charset="utf-8">
        <title>Foo</title>
        <link rel="stylesheet" media="screen" type="text/css" title="Mise en forme" href="style.css"/> 
			<script src="https://code.highcharts.com/highcharts.js"></script>
			<script src="https://code.highcharts.com/modules/exporting.js"></script>
	<script>
Highcharts.chart('container', {

    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            pointStart: 2010
        }
    },

    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }]

});
    </script>
    </head>
    <body>
<div id="container"></div>
    </body>
</html>

Qui est la copie sauf erreur de ma part de l'exemple donné sur ce site https://www.highcharts.com/demo/line-basic

Et pourtant ma page reste blanche.

Je ne comprends donc pas ce qui est faut.

Je fais appel au site web pour les scripts donc pas de soucis d'adresse selon moi.

L'erreur est que tu n'importe pas Jquery et que tu n'attends pas la page d'etre chargé avant de tourner le js (ton div est declaré dans le head). 

Comme ça, ça marche :

<!doctype html>
<html lang="fr">
<head>
        <meta charset="utf-8">
        <title>Foo</title>
        <link rel="stylesheet" media="screen" type="text/css" title="Mise en forme" href="style.css"/>
		<script src="https://code.jquery.com/jquery-3.2.1.js"></script> // Nouveau
		<script src="https://code.highcharts.com/highcharts.js"></script>
		<script src="https://code.highcharts.com/modules/exporting.js"></script>
		
    <script>
		$(function() { // nouveau
			Highcharts.chart('container', {
			 
				title: {
					text: 'Solar Employment Growth by Sector, 2010-2016'
				},
			 
				subtitle: {
					text: 'Source: thesolarfoundation.com'
				},
			 
				yAxis: {
					title: {
						text: 'Number of Employees'
					}
				},
				legend: {
					layout: 'vertical',
					align: 'right',
					verticalAlign: 'middle'
				},
			 
				plotOptions: {
					series: {
						pointStart: 2010
					}
				},
			 
				series: [{
					name: 'Installation',
					data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
				}, {
					name: 'Manufacturing',
					data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
				}, {
					name: 'Sales & Distribution',
					data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
				}, {
					name: 'Project Development',
					data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
				}, {
					name: 'Other',
					data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
				}]
			 
			});
		}); // nouveau
    </script>
    </head>
    <body>
	<div id="container"></div>
    </body>
</html>

Je t'ai mis un commentaire a coté des nouveaux element (le gras ne marche pas)

-
Edité par coni63 25 juin 2017 à 19:27:35

Bon j'ai finalement réussi à faire fonctionner ton script avec les liens suivants :

        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/modules/data.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>

Je suis parti un bon moment sur la bibliothèque charts.js car j'arrivais à faire fonctionner leur graphique mais je n'arrive pas à mettre mes données issues de ma Bdd à la place des données entrées en dur dans leur exemple. Je n'arrive pas à faire non plus plusieurs lignes de données.

Mon script :

<?php
try
{
	$bdd = new PDO('mysql:host=192.168.1.6;dbname=domotique;charset=utf8', 'xxxxx', 'xxxxx');	// On se connecte à MySQL
}
catch(Exception $e)
{
        die('Erreur : '.$e->getMessage());  // En cas d'erreur, on affiche un message et on arrête tout
}

// Si tout va bien, on peut continuer,
$reponse = $bdd->query('SELECT pièce, mesure, DATE_FORMAT (date_releve, "%d/%m/%Y %Hh%imin") AS date_releve FROM température WHERE pièce = "Salon" AND date_releve BETWEEN "2017-06-25 15:45:04" AND now() ORDER BY 1') or die(print_r($bdd->errorInfo()));
// On affiche chaque entrée une à une
while ($donnees = $reponse->fetch())
{
// On crée notre array $temperature
$temperature = array (
    'pièce' => $donnees['pièce'],
    'date_releve' => $donnees['date_releve'],
    'mesure' => $donnees['mesure']);

echo '<pre>';
print_r($temperature);
echo '</pre>';


}
$reponse->closeCursor(); // Termine le traitement de la requête
?>
<html>
    <head>
        <title>Foo</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
		<link rel="stylesheet" media="screen" type="text/css" title="Mise en forme" href="style.css"/> 
    </head>
    <body>
		<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>
    </body>
</html>

J'ai été sur de très nombreux sites pour comprendre le passage de php à Javascript mais sans résulta, ni sans comprendre où sa bloque.

Tu arrives à voir le graphique en ligne avec le code de mon précédent message ?

Merci pour ton aide !

--------------------------------------------------------------------------------

Oups je viens de voir que tu avais répondu entre temps.

Merci beaucoup, je comprends beaucoup mieux pourquoi ça ne fonctionnait pas.

Tu aurais un lien clair ou une explication sur comment passer d'un résultat de ma base de donnée sous cette forme :

Pièces / Date / Température

Array
(
    [pièce] => Salon
    [date_releve] => 25/06/2017 16h00min
    [mesure] => 27.5
)
Array
(
    [pièce] => Salon
    [date_releve] => 25/06/2017 16h15min
    [mesure] => 27.5
)
Array
(
    [pièce] => Salon
    [date_releve] => 25/06/2017 16h30min
    [mesure] => 27.6
)
Array
(
    [pièce] => Salon
    [date_releve] => 25/06/2017 16h45min
    [mesure] => 27.6
)

Afin d'avoir 3 courbes (Salon, Chambre, Bureau), avec les températures en ordonnées et les dates en abscisse ?

-
Edité par pdarkjeje 25 juin 2017 à 19:50:15

En fait tu ne peux pas si simplement faire le passage de php a javascript. PHP genere ta page HTML et js execute du code une fois la page faite.

Tu devrais pouvoir fournir directement les infos en entrée du script lors de l'ecriture mais le plus simple est d'ecrire toutes tes valeurs dans un div caché et ensuite tout parser en js. C'est ce que j'ai fait sur un site (cf 7 postes plus haut). Il faut faire pareil mais en reajustant les variables au tiennes

Le soucis c'est que je ne comprends pas ton code n'ayant pas suivi de cours javascript.

Donc si je comprends bien que tu affiches le retour dans un div pour t'en servir ultérieurement, je ne vois pas comment ensuite le faire figurer dans mon script javascript ne maîtrisant pas ce language.

Par contre, avec le script suivant le graph m'affiche bien les valeurs contenues dans $test, donc c'est que javascript arrive bien à lire les données venant de php.

Par contre quand j'utilise la variable $mesure comme actuellement sur le script, alors là je n'ai qu'une seule donnée affichée sur le graph, celle de la dernière valeur donnée par le script php, donc la dernière température mesurée.

Il faudrait donc que les x données "mesure" extrait de ma Bdd soit stockées sous la forme d'une chaîne, puis soit transmise dans un echo dans le javascript.

Ou alors si tu peux m'aider à comprendre ton script je suis preneur.

Voici mon script et ce que j'obtiens :

$reponse = $bdd->query('SELECT pièce, mesure, DATE_FORMAT (date_releve, "%d/%m/%Y %Hh%imin") AS date_releve FROM température WHERE pièce = "Salon" AND date_releve BETWEEN "2017-06-25 18:45:04" AND now() ORDER BY 1') or die(print_r($bdd->errorInfo()));
// On affiche chaque entrée une à une

while ($donnees = $reponse->fetch())
{
// On crée notre array $temperature
$temperature = array (
    'pièce' => $donnees['pièce'],
    'date_releve' => $donnees['date_releve'],
    'mesure' => $donnees['mesure']);

/*echo '<pre>';
print_r($temperature[mesure]);
echo '</pre>';
*/

$test = "15.1,17.5,18.4,19,17,18,17"; // J'ai testé d'intégrer directement $test dans le dat faisant actuellement référence à $mesure et cela fonctionne
$mesure = $temperature['mesure'].', ';
echo $mesure;
    ?>
<div id="csv"  style="display:none">
    <?php
            echo $mesure;
        
    ?>
</div>
    <?php
}
$reponse->closeCursor(); // Termine le traitement de la requête
?>

<!doctype html>
<html lang="fr">
<head>
        <meta charset="utf-8">
        <title>Highcharts</title>
        <link rel="stylesheet" media="screen" type="text/css" title="Mise en forme" href="style.css"/>
        <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/modules/exporting.js"></script>

    </head>
    <body>
	   <script>
        $(function() {
            Highcharts.chart('container', {
              
                title: {
                    text: 'Température des différentes pièces'
                },
              
                subtitle: {
                    text: 'Source : Relevé domotique Bticino'
                },
              
                yAxis: {
                    title: {
                        text: 'Degré Celsius'
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },
              
                plotOptions: {
                    series: {
                        pointStart: 2010
                    }
                },
              
                series: [{
                    name: 'Salon',
                    data: [<?php echo $mesure; ?>]
                }, {
                    name: 'Chambre',
                    data: [24, 24, 29, 29, 32, 30, 38, 40]
                }, {
                    name: 'Bureau',
                    data: [11, 17, 16, 19, 20, 24, 32, 29]
                }]
              
            });
        }); // nouveau
    </script>

    <div id="container"></div>
    </body>
</html>

Moi le soucis c'est que PHP ca date un peu et je n'ai pas trop utilisé de array

Engros ce que je fais en PHP :

J'ecris tous mes resultats dans un div que je n'affiche pas (ca me sert que pour le script).

Ses données sont séparés dans mon cas par des , et un ; pour chaque entrée.

Dans ton cas, PHP doit te generer qqchose comme :

<div id="data" display = "none">
"Salon",20,"26/06/17";"Cahmbre",24,"26/06/17";"Bureau",11,"26/06/17"; etc...
</div>

Ensuite en js je recupere le contenu du div par l'id (dans ce cas data), et je stocke les temperatures dans des array distincts par pieces. Je lui fourni ensuite les arrays comme valeurs d'entrée

$(function(){   // pour lancer le script une fois la page chargée completement
         
    var temp_Salon = [];
    var temp_Chambre = [];
    var temp_bureau = [];
 
    var data = $.trim($("#data").text()).slice(0, -1); //recup le contenu du bloc data (slice retire le dernier ; pour la suite)
 
    var lines = data.split(';'); // decoupe le contenu de ton div par ";" une ligne est donc 1 fetch de ta request
    var items;
 
    $.each(lines, function(index, line){            // pour chaque lignes de tes data
        items = line.split(',');                    // je decoupe chaque entrée séparées par des ,
        if (items[0] == "Salon"){                   // recuperation de la piece concernée dans items[0]
            temp_Salon.push(parseInt(items[1]))     // stockage de la temperature (itmes[1]) sous forme de int (si tu veux un Float c'est parseFloat)
        } else if () {
            //a faire pour chaque piece
        }
        ...
    });
 
    Highcharts.chart('container', {
 
        chart: {
            type: 'column' // a toi de voir si c'est ce que tu veux
        },
        series: [{
            name: 'Salon',
            data: temp_Salon 
        }, {
            name: 'Chambre',
            data: temp_Chambre
        }, {
            name: 'Bureau',
            data: temp_Bureau
        }]
 
        title: {
            text: 'Daily reports of Bar'
        },
 
        subtitle: {
            text: 'Source: Foo'
        },
 
        plotOptions: {
            series: {
                pointStart: Date.UTC(Date.now() - 5*24*3600*1000 ), // historique de 30 j
                pointInterval: 1 * 24 * 3600 * 1000, // step de 1j
                groupPadding: 0,    // deco
                pointPadding: 0.1,  // deco
                pointWidth: 10      // deco
            },
            column: {
                stacking: 'normal'
            }
        },
 
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
 
        tooltip: {
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
 
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats : {
                day: '%e. %b'
            }
        },
 
        yAxis: {
            title: {
                text: 'Number of Bar'
            },
            min: 0,
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        }
 
    }); //end of chart
});

La le soucis sera peut etre pour la gestion des abscisses... comme c'est pas date c'est pas tj simple a mettre en place

-
Edité par coni63 26 juin 2017 à 16:02:00

Merci beaucoup pour ton script et les explications de chaque ligne.

J'espère que je vais y arriver en tout cas je n'ai plus aucune excuse vue le temps que tu m'accordes !!!

Vraiment merci coni

Pas de soucis, j'esperes que tu arriveras a ton but En tout cas le projet est sympa

Bon courage

C'est gentil.

Malheureusement je n'arrive à rien.

Rien ne s'affiche avec ton script et je dois avoir un problème dans la logique php car quand j'utilise mon script php il affiche bien le retour des température via echo mais quand je regarde le code de la page avec "afficher le code source de la page" je n'ai que le dernier retour qui apparaît:

27.9<div id="data" display = "none">27.9</div>
27.9<div id="data" display = "none">27.9</div>
28<div id="data" display = "none">28</div>

<!doctype html>
<html lang="fr">
<head>
        <meta charset="utf-8">
        <title>Highcharts</title>
        <link rel="stylesheet" media="screen" type="text/css" title="Mise en forme" href="style.css"/>
        <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/modules/exporting.js"></script>
    </head>
    <body>
	   <script>
        $(function() {
			var temp_Salon = $.trim($("#mesure").text()).slice(0, -1);
            Highcharts.chart('container', {
              
                title: {
                    text: 'Température des différentes pièces'
                },
              
                subtitle: {
                    text: 'Source : Relevé domotique Bticino'
                },
              
                yAxis: {
                    title: {
                        text: 'Degré Celsius'
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },
              
                plotOptions: {
                    series: {
                        pointStart: 2010
                    }
                },
              
                series: [{
                    name: 'Salon',
                    data: temp_Salon
                }, {
                    name: 'Chambre',
                    data: [24, 24, 29, 29, 32, 30, 38, 40]
                }, {
                    name: 'Bureau',
                    data: [11, 17, 16, 19, 20, 24, 32, 29]
                }]
              
            });
        }); // nouveau
    </script>

    <div id="container"></div>
    </body>
</html>

Je suis complètement perdu et je comprends vraiment pas ce que je dois faire.

Encore merci pour ton aide mais je pense que cela dépasse mes compétences.

Tu as bien les valeurs dans ton div :

27.9<div id="data" display = "none">27.9</div>
27.9<div id="data" display = "none">27.9</div>
28<div id="data" display = "none">28</div>

1ere erreur, il ne faut jamais 2 balises avec le meme ID, crée la div avant la boucle for ou while en php.

Ensuite tu ne le vois pas car tu mets le display = "none" ce qui signifie que toute cette balise ne sera pas affichée. Pour le debug, enleve la et tu verras tes valeurs.

Vu ce que tu me montres ce dessus, tu devrais avoir :

<div id="data">27.9,27.9,28</div>

Ah super merci.

Oui j'avais compris pour le display="non", le problème c'est que n'ayant pas d'erreur visible dans mon script Javascript contrairement à php, je ne vois pas où cela bug et je me met à chercher partout (php, mysql, javascript,...).

Je vais tester avec le div avant la boucle, ce qui si je comprends bien devrai me permettre d'avoir un seul div contenant toutes mes températures et donc pouvoir les récupérer dans javascript.

Merci encore !!!

tu peux voir les erreurs des js aussi dans la console 

Ctrl + Shift + J sur Chrome

Ctrl + Maj + K sur Firefox et faut aller dans Console