Led RGB

-
Bonjour,
Voici mon code qui la couleur d'une led RGB. Quand on clique sur le bouton Valider, les 3 valeurs s'affichent grâce à alert(c2). Monsouci est le suivant:
J'aimerais récuperer cette valeur pour la stocker dans un fichier .txt, j'ai lu sur internet qu'il faut passer par ajax mais je suis un débutant en javascript. J'ai fait plusieurs tests mais RIEN.
SVP est-ce que quelqu'un saurait m'aider ?
Un grand merci d'avance.

Voici mon code :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<title>LED RGB</title>
</head>
<body>
<div class="wrap">
<header>
<h1>
Vanilla Js <span>R</span><span>G</span><span>B</span> <br> Color Sliders by Gologa Virobo
</h1>
</header>
<main>
<div class="color-slider-wrap">
<div class="color-wrap">
<div id="color-display"></div>
</div>
<div class="sliders">
<div>
<label for="red">Red</label>
<input type="number" id="redNum">
<input value="0" type="range" min="0" max="255" id="red">
<!--- <button onclick="Rouge()">Click me</button> --->

<script>
function Rouge() {
var rouge = document.getElementById("red").value;
if(rouge.length == 1){
rouge = 00 + "" + rouge;
}
if(rouge.length == 2){
rouge = 0 + "" + rouge;
}
//alert(rouge);
return rouge;
}
</script>

</div>
<div>
<label for="green">Green</label>
<input type="number" id="greenNum">
<input value="0" type="range" min="0" max="255" id="green">
<!--- <button onclick="Vert()">Click me</button> --->
<script>
function Vert() {
var vert = document.getElementById("green").value;
if(vert.length == 1){
vert = 00 + "" + vert;
}
if(vert.length == 2){
vert = 0 + "" + vert;
}
//alert(vert);
return vert;
}
</script>


</div>
<div>
<label for="blue">Blue</label>
<input type="number" id="blueNum">
<input value="0" type="range" min="0" max="255" id="blue">
<!--- <button onclick="Bleu()">Click me</button> --->
<script>
function Bleu() {
var bleu = document.getElementById("blue").value;
if(bleu.length == 1){
bleu = 00 + "" + bleu;
}
if(bleu.length == 2){
bleu = 0 + "" + bleu;
}
//alert(bleu);
return bleu;
}
</script>
</div>
</div>
</div>
</main>
</div>


<footer>
<button onclick="Couleur()"> Valider </button>
<script>
function Couleur() {
var R = Rouge();
var V = Vert();
var B = Bleu();

var c1 = R.concat(V);
var c2 = c1.concat(B);
alert(c2);



}
</script>



</footer>
<!---
<footer>
<div class="icon-wrap">
<a href="https://github.com/golobro" target="_blank">
<i class="fab fa-github fa-2x"></i>
</a>
</div>
Golobro © 2019
</footer>
--->
<script src="js/main.js"></script>


</body>
</html>
Afficher la suite 

1 réponse

Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
52
0
Merci
Salut, deux technique pour faire ce fichier s'offre à toi, mais les deux neccessite php (langage de programmation côté serveur).
- Soit tu utilise ajax et alors le fichier est créé sans actualisation de la page et de manière asynchrone, possibilité d'enregistrer en temps réel.
- Soit tu utilise un simple bouton qui permet directement d'enregistrer avec une nouvelle fois ton bouton mais cette fois une redirection vers la page de traitement.
quel parametre puis-je rentrer dans la syntaxe :
<?php
echo file_put_contents();
?>
pour afficher mes 3 valeurs.
SioGabx
Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
52 > Yvano -
Du coup, tu met :

if(file_put_contents("couleur.txt","bleu:".$bleu." rouge:".$rouge." Vert:".$vert)){
echo "fichier enregistrer";
}else{
echo "echec";
}
//enregistre dans le fichier "couleur.txt" : "bleu:x rouge:x vert:x"
//ou x = les valeurs de chaque couleur
Je l'ai fait mais toujours RIEN, peut-être que je me suis trompé, voici mon code modifié :



<!DOCTYPE html>

<?php
if(isset($_POST['valider'])){
$rouge=$_POST['rouge'];
$vert=$_POST['vert'];
$bleu=$_POST['bleu'];
echo $rouge;
echo $vert;
echo $bleu;
if(file_put_contents("file.txt","bleu:".$bleu." rouge:".$rouge." Vert:".$vert)){
echo "fichier enregistrer";
}else{
echo "echec";
}
}
?>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<title>LED RGB</title>
</head>
<body>
<div class="wrap">
<header>
<h1>
Vanilla Js <span>R</span><span>G</span><span>B</span> <br> Color Sliders by Gologa Virobo
</h1>
</header>
<main>
<div class="color-slider-wrap">
<div class="color-wrap">
<div id="color-display"></div>
</div>
<div class="sliders">
<div>
<label for="red">Red</label>
<input type="number" id="redNum">
<input value="0" name="rouge" type="range" min="0" max="255" id="red">
<!--- <button onclick="Rouge()">Click me</button> --->

<script>
function Rouge() {
var rouge = document.getElementById("red").value;
if(rouge.length == 1){
rouge = 00 + "" + rouge;
}
if(rouge.length == 2){
rouge = 0 + "" + rouge;
}
//alert(rouge);
return rouge;
}
</script>

</div>
<div>
<label for="green">Green</label>
<input type="number" id="greenNum">
<input value="0" name="vert" type="range" min="0" max="255" id="green">
<!--- <button onclick="Vert()">Click me</button> --->
<script>
function Vert() {
var vert = document.getElementById("green").value;
if(vert.length == 1){
vert = 00 + "" + vert;
}
if(vert.length == 2){
vert = 0 + "" + vert;
}
//alert(vert);
return vert;
}
</script>


</div>
<div>
<label for="blue">Blue</label>
<input type="number" id="blueNum">
<input value="0" name="bleu" type="range" min="0" max="255" id="blue">
<!--- <button onclick="Bleu()">Click me</button> --->
<script>
function Bleu() {
var bleu = document.getElementById("blue").value;
if(bleu.length == 1){
bleu = 00 + "" + bleu;
}
if(bleu.length == 2){
bleu = 0 + "" + bleu;
}
//alert(bleu);
return bleu;
}
</script>
</div>
</div>
</div>
</main>
</div>


<footer>

<input onclick="Couleur()" name="valider" type = "submit"/>
<script>
function Couleur() {
var R = Rouge();
var V = Vert();
var B = Bleu();

var c1 = R.concat(V);
var c2 = c1.concat(B);
alert(c2);
$.ajax({
url: "data.php",
method: "get",

xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
}
}, false);
return xhr;
}
})
}
</script>



</footer>
<!---
<footer>
<div class="icon-wrap">
<a href="https://github.com/golobro" target="_blank">
<i class="fab fa-github fa-2x"></i>
</a>
</div>
Golobro © 2019
</footer>
--->
<script src="js/main.js"></script>


</body>
</html>
SioGabx
Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
52 -
Re- essaye de mettre les balises code la prochaine fois stp

Tu n'as aucun formulaire sur ta page, il faut que tes input soit dans un élément <form action="#" method="post"> avec un bouton type submit

Suit ce tutoriel pour en savoir plus https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1607171-creez-des-formulaires
SioGabx
Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
52 -
Exemple, a toi d'adapter, tu peit l'essayer en le collant dans un fichier vide avec l'extension .php

<!DOCTYPE html>
<html>
<body>
​<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     // The request is using the POST method

$rouge=$_POST['rouge'];
$vert=$_POST['vert'];
$bleu=$_POST['bleu'];
echo $rouge;
echo $vert;
echo $bleu;
if(file_put_contents("file.txt","bleu:".$bleu." rouge:".$rouge." Vert:".$vert)){
echo "fichier enregistrer";
}else{
echo "echec";
}

}
?>
<h2>HTML Forms rgb</h2>
​
<form action="#" method="post">
  Rouge:<br>
  <input type="text" name="rouge" value="0">
  <br>
  Vert:<br>
  <input type="text" name="vert" value="50">
  <br>
Bleu:<br>
  <input type="text" name="bleu" value="100">
  <br>
<br>
  <input type="submit" value="Envoyer">
</form> 
​
​
</body>
</html>
Commenter la réponse de SioGabx