Mon premier site domotique

Animation lumières

3 avril 2020 à 18:32:47

Bonjour,

Durant cette période de temps libre à la maison je me suis lancé dans un petit site web hébergé sur mon NAS pour la domotique de la maison.

Première étape pour moi, les lumières. J'arrive donc a communiquer avec l'API HUE, je récupère l'état de mes lumières, j'arrive à changer d'état mes lumières, je stocke tout ça dans une base de données, tout est parfait.

J'ai réussi à faire tout ça en m'aidant de votre site et de google mais maintenant j'aimerais animer mon site pour voir la différence avec une lumière allumée et une éteinte. Et la je bloque, je ne sais pas quoi chercher.

Pouvez-vous me donner une piste de recherche pour faire ceci ?

A partir du moment ou j'ai l'info dans ma BDD SQL je pense que ça ne doit pas être si complexe de le faire.

-
Edité par darkewne 3 avril 2020 à 18:35:57

Lartak

3 avril 2020 à 18:35:21

Bonjour.

Et donc ?

Sois plus précis sur ta demande, c'est trop vague là.

-
Edité par Lartak 3 avril 2020 à 18:36:15

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

darkewne

3 avril 2020 à 18:37:54

Pour le moment j'ai fait un bouton en HTML/CSS avec une image venant du CSS, une image "verte". J'ai fait une autre image "grise" pour l'état éteint. Mais je ne sais pas comment switcher entre ces deux images.

-
Edité par darkewne 3 avril 2020 à 18:42:20

Lartak

3 avril 2020 à 18:40:39

Présentes ton code HTML et CSS, sans base sur lesquelles s'appuyer, ça va nous être difficile de t'aider.

Penses à utiliser la balise appropriée pour présenter les deux codes.

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

darkewne

3 avril 2020 à 18:46:46

Alors l'extrait de mon code HTML

<!DOCTYPE html>
<html>
<header><title>Domo House</title></header>
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="stylesheet.css">
</head>
<body>
<!-- Ajout de Jquery   -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  

<div id="BP">
	<div class="BP_L" id='BP'><input class="BP_LUM" type="button" id='BPscriptSalon' value='Salon')></div>
	<div class="BP_L" id='BP'><input class="BP_LUM" type="button" id='BPscriptCuisine' value='Cuisine')></div>
	<div class="BP_L" id='BP'><input class="BP_LUM" type="button" id='BPscriptBureau' value='Bureau')></div>
	<div class="BP_L" id='BP'><input class="BP_LUM" type="button" id='BPscriptEscalier' value='Escalier')></div>
	<div class="BP_L" id='BP'><input class="BP_LUM" type="button" id='BPscriptEntree' value='Entrée')></div>
</div>

</body>
</html>

et le CSS

body {
  background-image: url("image/BG.jpg");
  background-size: cover;
}

#BP
{
    display: flex;
    justify-content: space-around;
	margin-top: 30px;
}

.BP_LUM {
    border: 0;
	line-height: 2.5;
	height: 65px;
	width: 205px;
	font-size: 22px;
	text-align: left;
	padding-left: 50px;
	color: #444;
	text-shadow: 1px 1px 1px #999;
	outline: none;
	border-radius: 40px;
	background-image: url("image/BP_vert.png");
	background-size: cover;
	background-color: rgba(0, 0, 0, 0);
	
}

.BP_LUM:hover {
	background-color: rgba(100, 100, 100, 0);
}

.BP_LUM:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
				inset 2px 2px 3px rgba(0, 0, 0, .6);
}

Donc voila pour le moment l'image est écrite en dur dans le CSS et je ne sais pas vraiment faire pour faire ce basculement d'image (HTML ? CSS ? JAVA ? PHP ?)

-
Edité par darkewne 3 avril 2020 à 18:47:56

Lartak

3 avril 2020 à 18:50:24

La balise header, n'a rien à faire au sein de la balise head.

La valeur de l'attribut id doit être unique sur une page, ce qui n'est pas le cas dans ton code (ligne 12 à 17).

À quoi servent les fermetures de parenthèses à tes input ?

Le chargement des fichiers, est à placer de préférence, soit au sein de la balise head, soit juste avant la fermeture de la balise body.

Commences déjà par corriger tout ça.

-
Edité par Lartak 3 avril 2020 à 18:53:12

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

darkewne

3 avril 2020 à 18:56:23

Merci pour cette petite remise en conformité, le voila propre :

<!DOCTYPE html>
<html>
<head>
<title>Domo House</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<!-- Ajout de Jquery   -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
</head>
<body>

<div id="BP">
	<div class="BP_L" id='BP1'><input class="BP_LUM" type="button" id='BPscriptSalon' value='Salon'></div>
	<div class="BP_L" id='BP2'><input class="BP_LUM" type="button" id='BPscriptCuisine' value='Cuisine'></div>
	<div class="BP_L" id='BP3'><input class="BP_LUM" type="button" id='BPscriptBureau' value='Bureau'></div>
	<div class="BP_L" id='BP4'><input class="BP_LUM" type="button" id='BPscriptEscalier' value='Escalier'></div>
	<div class="BP_L" id='BP5'><input class="BP_LUM" type="button" id='BPscriptEntree' value='Entrée'></div>
</div>
</body>
</html>

Des idées pour mon problème de switch d'image suivant une valeur dans une base de données ?

Du genre "IF lumière éteinte then image grise else image verte"

-
Edité par darkewne 3 avril 2020 à 19:16:50

Lartak

3 avril 2020 à 19:17:26

darkewne a écrit:

Pour le moment j'ai fait un bouton en HTML/CSS avec une image venant du CSS, une image "verte". J'ai fait une autre image "grise" pour l'état éteint. Mais je ne sais pas comment switcher entre ces deux images.

Un input de type checkbox par exemple, serait peut-être le mieux à utiliser pour le contexte, selon si l'input est sélectionné ou non (soit checked), tu lui donne une apparence différente.

darkewne a écrit:

Des idées pour mon problème de switch d'image suivant une valeur dans une base de données ?

Du genre "IF lumière éteinte then image grise else image verte"

Pour ce qui est du langage à utiliser niveau serveur par rapport aux données récupérées et donc modifier le statut de l'élément HTML, c'est à toi de voir selon ce que tu connais déjà par exemple.

-
Edité par Lartak 3 avril 2020 à 19:20:37

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

darkewne

3 avril 2020 à 19:24:56

Ok c'est une bonne piste je vais me lancer la dedans ! merci.

-
Edité par darkewne 3 avril 2020 à 19:26:12

Lartak

3 avril 2020 à 19:27:37

Oui, mais ce n'est pas avec la base de données que tu vas changer la valeur/le statut de l'input, mais via le langage niveau serveur qui doit justement communiquer avec la base de données pour récupérer les données nécessaires.

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

darkewne

3 avril 2020 à 19:30:48

il faut qu'un script tourne sur mon serveur pour récupérer la valeur et modifier le visuel de l'input.

J'ai commencé à trouver des petites chose en js, mettre pour le coup de pouce. Je reviendrai quand ça marchera (ou pas...)

darkewne

9 avril 2020 à 4:00:43

Bonjour,

Et voila réponse la réponse en Java :

<script type="text/javascript">



	function SwitchLum(id){

		var source = document.getElementById('BPscript'+id);

		if(source.src.match("Off")){

			document.getElementById('BPscript'+id).src = "image/BP_On_" + id + ".png";

		}else{

			document.getElementById('BPscript'+id).src = "image/BP_Off_" + id + ".png";

		}

		return false;

	}

</script>

<div class="GROUP">
	<div><img class="BP_IMG" src="" id="BPscriptSalon" onclick="SwitchLum('Salon')"></div>
	<div><img class="BP_IMG" src="" id="BPscriptCuisine" onclick="SwitchLum('Cuisine')"></div>
	<div><img class="BP_IMG" src="" id="BPscriptBureau" onclick="SwitchLum('Bureau')"></div>
</div>

Sujet résolu !

-
Edité par darkewne 9 avril 2020 à 4:06:00