Simple way to control Raspberry GPIO and Omxplayer with Javascript and php

22. November 2015 php, Raspberry

I was looking for an easy way to control the RaspberryPi via a web based user interface. As I’m not familar whith Python I wanted to implement this via php an Javascript/jQuery.

I also wanted to write a php script that schould be able to be reused for other projects.

After some testing and smashing my head to some walls a lot of time I developed this, in my eys, simple solution.

So what’s needed on the RaspberryPi is:

a running apache webserver with php
installed WiringPi

The Scripts

PHP: phprunner.php

The php is build to run as a webservice that consumes a simple JSON via GET.

<?php
$sProject  =  $_GET['project'];
$sCommand  =  $_GET['command'];
$sValue    =  $_GET['value'];
  
switch ($sProject){
    case "PiStarShip":
        switch ($sCommand){
            case "play":
                exec("omxplayer $sValue",$response);
                $result  =  array(status=>"playing",value=>$response);
                break;
            case "stop":
                exec("killall omxplayer & killall omxplayer.bin &",$response);
                $result  =  array(status=>"stopped",value=>$response);
                break;
            case "GPIOOut":
                $arrValue    = split(",",$sValue);
                exec("gpio -g mode $arrValue[0] out");
                exec("gpio -g write $arrValue[0] $arrValue[1]",$response);
                exec("gpio -g read $arrValue[0]",$response);
                $result  =  array(status=>"GPIO",value=>$response);
                break;
            default:
        }    
        break;
    default:
        $result  =  array(status=>"No Project defined!");
        break;
}
echo json_encode($result);
?>

I put a first switch in line 6 to seperate different projects – for later development.

Tho first running project is the “PiStarShip”. I built a woodden model of a star ship for my son, it shoul play sounds and do some light effects via the Pi and controlled via a web interface on a smartphone or tablet.

Current implemented php functions:

“play”: Play sound (mp3 file) – line 9-12

JSON:

PlayIntro        : {

    command    : "play",

    value        : "/var/www/StarShip/intro.mp3"

    },

So the command play will call the omxplayer to play the file in value.

“stop”: Stop all processes of omxlplayer

Yes, I know, this is a hard way to stop the omxplayer, but as of now, I didn’t find a smoother way. Any ideas?

JSON:

Stop        : {

    command:    "stop"
    },

“GPIOOut”: Set’s the value of a given GPIO-Port – line 17-23

JSON:

GPIOOut17 : {

command : "GPIOOut",

value : "17,1"

The “GPIOOut”command puts the GPIO Port in the “out”mode – line 19

The value is split into the portnumber and the GPIO value. Line 20 calls gpio to switch the port to the given value. In this case GPIO 17 will be switched on.

After that the port will be read to get the current value (line 21) and will return the result in a JSON again.

Javascript

To call the php function I implemented a global JSON variable and an Ajax call. So this is my JSON:

var g_arrPHPJob;
    g_arrPHPJob = {
            project    : "PiStarShip",
            Stop        : {
                command:    "stop"    
                },
            PlayIntro        : {
                command    : "play",
                value        : "/var/www/StarShip/intro.mp3"
                },
            PlaySound01        : {
                command    : "play",
                value        : "/var/www/StarShip/sounds/LaserShotII.mp3"
                },    
            PlaySound02        : {
                command    : "play",
                value        : "/var/www/StarShip/sounds/LaserShot01.mp3"
                },    
            GPIOOut17    :    {
                command    : "GPIOOut",
                value        :    "17,1"
            },
        };

The JSON includes the commands and the defalut values to call run the ajax calls.

The ajax call “F_PHPRunnerDoJob” itselfes looks like this:

function F_PHPRunnerDoJob(sProject,objJobData) {
        var arrPHPJob = {
            project : sProject,
            command : objJobData.command,
            value        : objJobData.value,
        };
        
    $.ajax({ 
        url: '/core/phprunner.php', 
        type: 'get',
        datatype: 'json',
        data: arrPHPJob,
        success: function(data) { 
            // // Do something with data that came back.  
            // var objData = jQuery.parseJSON(data);
                         console.log("Success");
        },
        error:function(exception){
          console.log(exception);
        }
    });
}

To impelment this in an HTML file I put a button on the page that has an onclick event:

onclick="F_PHPRunnerDoJob(g_arrPHPJob.project, g_arrPHPJob.PlayIntro)"

That’s it.

Complete HTML page:

<!DOCTYPE html>
<html lang="de">
  <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta http-equiv="expires" content="0" />
        <meta http-equiv="cache-control" content="no-cache" />
        <meta http-equiv="pragma" content="no-cache" />
                
    <title>RasPi-Wars (c) by PiHunter</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="apple-touch-icon" sizes="144x144" href="iOsIcon114.png" />
  
        <link href="/core/pi.css" rel="stylesheet" /> 
    <link href="/jquery.mobile-1.4.5.css" rel="stylesheet" />
<scripttype='text/javascript'src='/jquery-1.11.3.js'></script>   1:     
        <script type='text/javascript' src='/jquery.mobile-1.4.5.js'>
</script>        
      <script type='text/javascript' src='/core/phprunner.js'>
</script>
        <script type='text/javascript' src='effects.js'></script>

  </head>
  <body>
    <div id="ContentContainer">
                <div id="ContentHeader">RasPi-Wars (c) by PiHunter
                </div>
                <div id="Content">
        <fieldset>
                    <div data-role="fieldcontain" onclick="F_PHPRunnerDoJob(g_arrPHPJob.project, g_arrPHPJob.PlayIntro)">
                    <a class="ui-btn ui-btn-inline ui-icon-audio ui-btn-icon-right" href="#">Start Intro</a>
          </div>
          <div data-role="fieldcontain" onclick="F_PHPRunnerDoJob(g_arrPHPJob.project, g_arrPHPJob.PlaySound01)">
                    <a class="ui-btn ui-btn-inline ui-icon-audio ui-btn-icon-right" href="#">Laser Shot II</a>
          </div>
          <div data-role="fieldcontain" onclick="F_PHPRunnerDoJob(g_arrPHPJob.project, g_arrPHPJob.PlaySound02);F_LaserFlash(50)">
                    <a class="ui-btn ui-btn-inline ui-icon-audio ui-btn-icon-right" href="#">Laser mit LED</a>
          </div>
        </fieldset>
        <fieldset>
          <div data-role="fieldcontain" onclick="F_PHPRunnerDoJob(g_arrPHPJob.project, g_arrPHPJob.Stop)">
                    <a class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-right" href="#">Stop</a>
         </div>
        </fieldset>
          <br>
          </div>
          (c) by <a href="http://eta-arts.de" target="_blank">eta-arts.de</a>
    </div>
  </body>
</html>

Complete Javascript functions:

var g_FlashTimer;
var g_arrPHPJob;
    g_arrPHPJob = {
            project    : "PiStarShip",
            Stop        : {
                command:    "stop"    
                },
            PlayIntro        : {
                command    : "play",
                value        : "/var/www/StarShip/intro.mp3"
                },
            PlaySound01        : {
                command    : "play",
                value        : "/var/www/StarShip/sounds/LaserShotII.mp3"
                },    
            PlaySound02        : {
                command    : "play",
                value        : "/var/www/StarShip/sounds/LaserShot01.mp3"
                },    
            GPIOOut17    :    {
                command    : "GPIOOut",
                value        :    "17,1"
            },
        };
        
  
function F_LaserLEDOn(iTimer){
    var objJobData = {
        command    : "GPIOOut",
        value        :    "17,1"
    };
    F_PHPRunnerDoJob(g_arrPHPJob.project,objJobData);
    if(iTimer>0){
        var result = setTimeout(F_LaserLEDOff, iTimer);
    }
}
  
function F_LaserLEDOff(){
    var objJobData = {
        command    : "GPIOOut",
        value        :    "17,0"
    };
    F_PHPRunnerDoJob(g_arrPHPJob.project,objJobData);
    //clearInterval(g_FlashTimer);
}
  
function F_LaserFlash(iTimer){
    intrvl=0;
    for(nTimes=0;nTimes<iTimer;nTimes++){
        intrvl += 100;
        setTimeout(F_LaserLEDOn(),intrvl);
        intrvl += 100;
        setTimeout(F_LaserLEDOff(),intrvl);
  }
    F_LaserLEDOff();
}

Simple way to control Raspberry GPIO and Omxplayer with Javascript and php

The Scripts

PHP: phprunner.php

Current implemented php functions:

“play”: Play sound (mp3 file) – line 9-12 JSON: PlayIntro : { command : "play", value : "/var/www/StarShip/intro.mp3" }, So the command play will call the omxplayer to play the file in value.

“GPIOOut”: Set’s the value of a given GPIO-Port – line 17-23

Javascript

Teilen mit:

“play”: Play sound (mp3 file) – line 9-12

JSON:

PlayIntro : {

command : "play",

value : "/var/www/StarShip/intro.mp3"

},

So the command play will call the omxplayer to play the file in value.