Led RGB

Yvano -  
SioGabx Messages postés 265 Date d'inscription   Statut Membre Dernière intervention   -
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>

1 réponse

Réponse 1 / 1
SioGabx Messages postés 265 Date d'inscription   Statut Membre Dernière intervention   100
 
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.
0
SioGabx Messages postés 265 Date d'inscription   Statut Membre Dernière intervention   100
 
Bien sur la 2ème technique est plus facile que la 1er
0
Yvano
 
Ouais j'avoue mais comment m'y prendre stp ? As-tu stp des exemples ?
0
SioGabx Messages postés 265 Date d'inscription   Statut Membre Dernière intervention   100 > Yvano
 
Le formulaire ou les input sont rempli par ton javascript par les couleur rgb
https://sylvie-vauthier.developpez.com/tutoriels/php/grand-debutant/?page=formulaires

Enregistrer les données php dans un fichier txt
https://www.w3schools.com/php/func_filesystem_file_put_contents.asp
0
Yvano
 
Ok merci, je le teste tout de suite.
0
Yvano
 
Hey, je ne comprends pas bien la syntaxe : file_put_contents(filename, data, mode, context)

PAr contre j'ai déjà fait le code php sur ma page. il me reste juste le code php pour recuperer les 3 valeurs.


Voici le code que j'ai modifié :
<!DOCTYPE html>

<?php
if(isset($_POST['valider'])){
$rouge=$_POST['rouge'];
$vert=$_POST['vert'];
$bleu=$_POST['bleu'];
echo $rouge;
echo $vert;
echo $bleu;
}
?>
<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>
0

Discussions similaires

Interprétation des LED EZ Debug sur carte mère MSI
alain_1949 -
alain_1949 -

3 réponses
Coût réparation retro-eclairage TV Led TCL
GB -
jag72 -

1 réponse
Led VGA rouge carte mère
F0UF -
F0UF -

25 réponses
Cout reparation retro-eclairage ecran LCD?
tdlf -
Ahmed -

22 réponses
Led vga allumé sur carte mère
Karmadtr -
Karmadtr -

7 réponses