GPIOson – Raspberry GPIO’s über php, javascript und jQuery steuern

29. Januar 2015 php, Raspberry

Der Weihnachtsmann brachte diese Jahr einen Raspberry PI mit diversen LED’s, Schaltern und Kabeln. Der Elektroniker in mir wurde wieder wach. Schnell fand ich Anleitungen im Web per console und php dieses tolle Teil unter Kontrolle zu bringen.

Relativ schnell konnte ich die ersten LED’s über die Konsole aufleuchten lassen – auch wenn es meine Tochter nur wenig begeisterte das mir auch mal ein Licht aufging…

In Zeiten von HTML5, jQuery und Mobile First wollte ich nun über das Smartphone auch die Lampen leuchten lassen und den Schalter abfragen, ohne ständig die php Datei neu aufzurufen.

Folgende Lösung ist dabei endstanden:
Es gibt 3 Komponenten, eine Webseite (index.html) welche die Buttons rendert und die Bibliotheken zusammenführt. Eine javascript Datei (GPIOson.js) welche die Logik auswertet und dafür sorgt das die php Datei (gpio.php) aufruft um die GPIO’s zu setzten bzw. abzufragen.

Index.html:

<html>
<head>
    <title>Pi Hunter - GPIOson</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script type='text/javascript' src='/jquery-1.11.1.min.js'></script>   1:
  <script type='text/javascript' src='/jquery.mobile-1.4.5.js'>
</script>
  <link href="/jquery.mobile-1.4.5.css" rel="stylesheet" />
  <script type='text/javascript' src='GPIOson.js'></script>

    <style type="text/css">
    </style>
</head>
<body>
    <h1>Pi Hunter - GPIOson</h1>
  <fieldset>
    <div data-role="fieldcontain" onclick="switchValue(17)">
      <label for="checkbox-based-flipswitch">GPIO 17:</label>
      <input type="checkbox" id="GPIO17" data-role="flipswitch"  >
    </div>
  </fieldset>

  <fieldset>
    <div data-role="fieldcontain" onclick="switchValue(27)">
      <label for="checkbox-based-flipswitch">GPIO 27:</label>
      <input type="checkbox" id="GPIO27" data-role="flipswitch"  >
    </div>
  </fieldset>

  <fieldset >
  <div data-role="fieldcontain" onclick="autoRefresh()" >
  <label for="AutoRefresh">Auto Refresh:</label>
    <select name="flip-select" id="AutoRefresh" data-role="flipswitch"  >
        <option selected="">Off</option>
        <option >On</option>
    </select>
    </div>
  </fieldset>

  <div id='UpdateResult' ><div>
    <p>Created by eta-arts - Dirk Huntemann</p>

</body>
</html>

Wichtig sind hier die onclick events. Diese rufen die Javascript Funktionen in der GPIOson.js auf

Aufbau GPIOson.js :

var g_GpioPins = [
    {
        gpio: '17', mode: 'out', value: 0
    },
    {
        gpio: '24', mode: 'in', value: 0
    },
    {
        gpio: '27', mode: 'out', value: 0
    }
];

var g_RefreshTimer = null;

function getSetPin(pinData) {
    $.ajax({
        url: 'gpio.php',
        type: 'post',
        datatype: 'json',
        data: pinData,
        success: function(data) {
            // Do something with data that came back.  
            var objData = jQuery.parseJSON(data);
            $('#UpdateResult').html(objData.status);
        }
    });
}

function switchValue(gpio) {
    for (var i_Pin in g_GpioPins) {
        if (g_GpioPins[i_Pin].gpio == gpio) {
            switch (g_GpioPins[i_Pin].mode) {
                case 'out':
                    switch (g_GpioPins[i_Pin].value) {
                        case 0:
                            g_GpioPins[i_Pin].value = 1;
                            break;
                        case 1:
                            g_GpioPins[i_Pin].value = 0;
                            break;
                    }
                    break;
                case 'in':
                    console.log('auslesen' + g_GpioPins[i_Pin].gpio);
                    break;
            }
            getSetPin(g_GpioPins[i_Pin]);
            break;
        }
    }
}

function autoRefresh() {
    //console.log($('#AutoRefresh').val());
    if ($('#AutoRefresh').val() == 'On') {
        autoRefreshStart();
    }
    else {
        autoRefreshStop();
    }
}

function autoRefreshStop() {
    //console.log('Auto OFF!');
    clearInterval(g_RefreshTimer);
    g_RefreshTimer = null;
}

function autoRefreshStart() {
    //console.log('Auto On!');
    g_RefreshTimer = setInterval('getSetPin(g_GpioPins[1])', 100);
    getSetPin(g_GpioPins[1]);
}

In Zeile 1-11 werden die Startzustände der GPIO’d definiert.

function getSetPin(pinData) macht den Json call an die gpio.php

gpio.php

if(count($_POST) > 0){
  $gpiocmd = '/usr/local/bin/gpio -g ';
  //echo $gpiocmd; 
  $result=array();
  switch ($_POST['mode']){
    case 'out':
     exec($gpiocmd . 'mode ' . $_POST['gpio'] . ' out');
     exec($gpiocmd . 'write ' . $_POST['gpio'] . ' ' . $_POST['value'],$gpioValue);
     //$result ='Success: Pin ' . $_POST['gpio'];
     $result['value'] = ($gpioValue[0]);
     break;
    case 'in':
     exec($gpiocmd . 'mode ' . $_POST['gpio'] . ' in');
     exec($gpiocmd . 'read ' . $_POST['gpio'],$gpioValue);
     //$result['value'] = ($gpioValue[0]);
     $result=array('status' => $gpioValue[0],'gpio'=>$_POST['gpio']);
     break;
    default:
      $result='Error:wrong mode';
  }
}
else{
  $result='Error:';
  }
echo json_encode($result);

Auch die gpio.php ist recht übersichtlich. Hier wird das Json ausgewertet und anschließen über php exec der

Konsolenbefehl (“Licht an oder Aus”, “Was macht der Schalter?” ) aufgerufen.

Durch einbinden von jQueryMobile und jQuery Mobile sieht das Ganze dann im Browser so aus:

GPIOson – Raspberry GPIO’s über php, javascript und jQuery steuern

Teilen mit: