Résolu jQueryUI ColorPicker et PHP

daffyb

daffyb

-Duck Warrior-
Modérateur
Club iGen
18 Octobre 2001
14 488
1 959
Angoulême
Bonjour à tous,

Je ne suis pas le meilleur en php et encore moins en JavaScript, mais je vais vous énoncer mon 'problème'.
Pour commencer, voici ce que je voudrais faire (ce n'est peut-être pas possible)
J'affiche une page html/php avec ce ColorPicker. (ça je sais faire et ça marche)
https://jqueryui.com/slider/#colorpicker
Lorsqu'on manipule les curseurs, au relâchement de la souris, je voudrais récupérer les valeurs des couleurs dans une variable php (en fait 3 variables).
Mon fichier PHP tournant sur le serveur lance une commande exec('/usr/local/bin/RGB_led') qui commande une vraie LED RGB et qui prendrait en paramètre les couleurs RGB sélectionnées dans le ColorPicker.
Faisable ? ce que je voudrais aussi éviter, c'est d'avoir à cliquer sur un bouton 'SEND'. Je veux que ma led physique reflète au plus près les modifications faites à l'écran.

Help help :D
Merci
 
daffyb a dit:
Bonjour à tous,

Je ne suis pas le meilleur en php et encore moins en JavaScript, mais je vais vous énoncer mon 'problème'.
Pour commencer, voici ce que je voudrais faire (ce n'est peut-être pas possible)
J'affiche une page html/php avec ce ColorPicker. (ça je sais faire et ça marche)
https://jqueryui.com/slider/#colorpicker
Lorsqu'on manipule les curseurs, au relâchement de la souris, je voudrais récupérer les valeurs des couleurs dans une variable php (en fait 3 variables).
Mon fichier PHP tournant sur le serveur lance une commande exec('/usr/local/bin/RGB_led') qui commande une vraie LED RGB et qui prendrait en paramètre les couleurs RGB sélectionnées dans le ColorPicker.
Faisable ? ce que je voudrais aussi éviter, c'est d'avoir à cliquer sur un bouton 'SEND'. Je veux que ma led physique reflète au plus près les modifications faites à l'écran.

Help help :D
Merci
Cliquez pour agrandir...
Merci pour votre participation :D
Problème résolu avec de l'ajax etc.
 
momo-fr a dit:
Sympa… mais une explication serait sans doute bienvenue… sur un forum… de plus de la part d'un modo. Bref… :p :cool:
Cliquez pour agrandir...
J'y pensais bien, mais pas trop de temps pour l'instant ;-) aller, voici le code source :
index.html :
HTML: 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Slider - Colorpicker</title>
  <link rel="stylesheet" href="jquery/jquery-ui.css">
  <script src="jquery/jquery-1.10.2.js"></script>
  <script src="jquery/jquery-ui.js"></script>
  <style>
  #red, #green, #blue, #brightness {
    float: left;
    clear: left;
    width: 300px;
    margin: 15px;
  }
  #ValueRed, #ValueGreen, #ValueBlue, #ValueBrightness{
    float: left;
    clear: left;
    margin-left: 150px;
  }
  #lred, #lgreen, #lblue {
    float: left;
    clear: left;
    width: 300px;
    margin: 15px;
  }
  #lValueRed, #lValueGreen, #lValueBlue {
    float: left;
    clear: left;
    margin-left: 150px;
  }
  #swatch {
    width: 120px;
    height: 250px;
    margin-top: 18px;
    margin-left: 350px;
    margin-bottom: 35px;
    background-image: none;
  }
    #lswatch {
    width: 120px;
    height: 200px;
    margin-top: 18px;
    margin-left: 350px;
    background-image: none;
  }
  #red .ui-slider-range { background: #ef2929; }
  #red .ui-slider-handle { border-color: #ef2929; }
  #green .ui-slider-range { background: #8ae234; }
  #green .ui-slider-handle { border-color: #8ae234; }
  #blue .ui-slider-range { background: #729fcf; }
  #blue .ui-slider-handle { border-color: #729fcf; }

  #lred .ui-slider-range { background: #ef2929; }
  #lred .ui-slider-handle { border-color: #ef2929; }
  #lgreen .ui-slider-range { background: #8ae234; }
  #lgreen .ui-slider-handle { border-color: #8ae234; }
  #lblue .ui-slider-range { background: #729fcf; }
  #lblue .ui-slider-handle { border-color: #729fcf; }
  </style>
  <script>
  function hexFromRGB(r, g, b) {
    var hex = [
      r.toString( 16 ),
      g.toString( 16 ),
      b.toString( 16 )
    ];
    $.each( hex, function( nr, val ) {
      if ( val.length === 1 ) {
        hex[ nr ] = "0" + val;
      }
    });
    return hex.join( "" ).toUpperCase();
  }
  function refreshSwatch() {
    var red = $( "#red" ).slider( "value" ),
      green = $( "#green" ).slider( "value" ),
      blue = $( "#blue" ).slider( "value" ),
  
      brightness = $( "#brightness" ).slider( "value" ),
        brightness = (brightness/255),
      hex = hexFromRGB( red, green, blue ),
      lred = $( "#lred" ).slider( "value" ),
      lgreen = $( "#lgreen" ).slider( "value" ),
      lblue = $( "#lblue" ).slider( "value" ),
  
      laverage = Math.round((lred + lgreen + lblue)/3),
      lhex = hexFromRGB( laverage, laverage, laverage );
  
      $( "#lswatch" ).css( "background-color", "#" + lhex );
      $( "#swatch" ).css( "background-color", "rgb(" + Math.round(red * brightness) + "," + Math.round(green * brightness) + "," + Math.round(blue * brightness) + ")");

    $( "#lred" ).css( "background", "rgb(" + lred + "," + lred + "," + lred + ")" );
    $( "#lgreen" ).css( "background", "rgb(" + lgreen + "," + lgreen + "," + lgreen + ")" );
    $( "#lblue" ).css( "background", "rgb(" + lblue + "," + lblue + "," + lblue + ")" );
    document.getElementById('ValueRed').innerHTML = Math.round(red * brightness);
    document.getElementById('ValueGreen').innerHTML = Math.round(green * brightness);
    document.getElementById('ValueBlue').innerHTML = Math.round(blue * brightness);
    document.getElementById('ValueBrightness').innerHTML = Math.round(brightness * 100) + " %";
    document.getElementById('lValueRed').innerHTML = lred;
    document.getElementById('lValueGreen').innerHTML = lgreen;
    document.getElementById('lValueBlue').innerHTML = lblue;
    UpdateLED();
  }

  $(function() {
    $( "#red, #green, #blue, #brightness, #lred, #lgreen, #lblue" ).slider({
      orientation: "horizontal",
      range: "min",
      max: 255,
      value: 127,
      slide: refreshSwatch,
      change: refreshSwatch
    });
    $( "#red" ).slider( "value", 255 );
    $( "#green" ).slider( "value", 140 );
    $( "#blue" ).slider( "value", 60 );
    $( "#brightness" ).slider( "value", 255 );

    $( "#lred" ).slider( "value", 255 );
    $( "#lgreen" ).slider( "value", 255 );
    $( "#lblue" ).slider( "value", 255 );
  });
  </script>

  <script type="text/javascript">
      function UpdateLED() {
          JSrouge = $( "#red" ).slider( "value" );
        JSvert = $( "#green" ).slider( "value" );
        JSbleu = $( "#blue" ).slider( "value" );
    
        $.ajax({
            url: 'LEDcolor.php',
            type: 'POST',
            dataType: 'text',
            data: {ROUGE: $( "#red" ).slider( "value" ), VERT: $( "#green" ).slider( "value" ), BLEU: $( "#blue" ).slider( "value" ), LUMINOSITE: $( "#brightness" ).slider( "value" ),LROUGE: $( "#lred" ).slider( "value" ), LVERT: $( "#lgreen" ).slider( "value" ), LBLEU: $( "#lblue" ).slider( "value" )}
        })};
</script>

</head>
<body class="ui-widget-content" style="border:0;">
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
  <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
  RGB Selector
</p>

<div id="ValueRed"></div>
<div id="red"></div>

<div id="ValueGreen"></div>
<div id="green"></div>

<div id="ValueBlue"></div>
<div id="blue"></div>

<div id="ValueBrightness"></div>
<div id="brightness"></div>
<div id="swatch" class="ui-widget-content ui-corner-all"></div>

<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
  <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
  RGB Balancing
</p>

<div id="lValueRed"></div>
<div id="lred"></div>

<div id="lValueGreen"></div>
<div id="lgreen"></div>

<div id="lValueBlue"></div>
<div id="lblue"></div>
<div id="lswatch" class="ui-widget-content ui-corner-all"></div>

</body>
</html>

LEDcolor.php :
PHP: 
<!doctype html>
<html lang="en">
<head>
</head>
<body>
    <?php
        $luminosite = (($_POST['LUMINOSITE'])/255);
        $rouge = round($_POST['ROUGE']*$luminosite,0);
        $vert = round($_POST['VERT']*$luminosite,0);
        $bleu = round($_POST['BLEU']*$luminosite,0);

        $rouge = round(($_POST['LROUGE']/255)*$rouge,0);
        $vert = round(($_POST['LVERT']/255)*$vert,0);
        $bleu = round(($_POST['LBLEU']/255)*$bleu,0);

        $command = 'sudo nice -n -20 RGB_LED_main '.$rouge.' '.$vert.' '.$bleu;
    
        exec ($command);
    ?>
</body>
</html>

Précision, ya des trucs pas terribles, mais je ne sais pas faire autrement (genre les variables, j'ai du mal).

Sinon, la commande RGB_LED_main est un code C compilé qui commande un driver de LED RGB 8bits, tout ça sur un Raspberry Pi ;)

Ça fait le job, comme on dit
 
Dernière édition:

Sujets similaires

I
[PHP/HTML] Envoyer un formulaire par mail en HTML
Réponses
13
Affichages
7K
Développement web
p4bl0
p4bl0
Haut Bas