Led RGB

Fermé

Yvano - Modifié le 29 août 2019 à 13:26
SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 - 29 août 2019 à 17:39

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">


<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">

<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">

<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>

<script src="js/main.js"></script>

</body>
</html>

A voir également:

1 réponse

Réponse 1 / 1

SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 100
29 août 2019 à 13:30

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.

SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 100
29 août 2019 à 13:30

Bien sur la 2ème technique est plus facile que la 1er

Yvano
29 août 2019 à 13:53

Ouais j'avoue mais comment m'y prendre stp ? As-tu stp des exemples ?

SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 100 > Yvano
29 août 2019 à 14:11

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

Yvano
29 août 2019 à 14:49

Ok merci, je le teste tout de suite.

Yvano
29 août 2019 à 15:09

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">


<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">

<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">

<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>

<script src="js/main.js"></script>

</body>
</html>

Discussions similaires

Dram led rouge fixe

Led VGA rouge carte mère

Coût réparation retro-eclairage TV Led TCL

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

Ventilateurs ne s'allume pas en rgb

Discussions similaires

Newsletters