doyle
Posts: 3
Joined: Thu Dec 12, 2013 7:55 pm

Re: WebIOPi : control your Pi’s GPIO with a browser

Tue Dec 17, 2013 7:56 am

trouch wrote:As it's noticed on the project page, you are welcome to use WebIOPi in the way you want !
- all bundled
- only the REST API
- though the javascript API...

check upcoming modifications on WebIOPi 0.5, you may found it use full for you !
trouch can you be a bit clear i am totally new to this

pyromagi
Posts: 9
Joined: Wed Dec 25, 2013 1:39 am

Re: WebIOPi : control your Pi’s GPIO with a browser

Fri Dec 27, 2013 12:11 pm

Hi,
I have managed to make a small index.html with 2x8 on/off buttons that works great.
but i would like to add a button that sets all other buttons (gpio pins) to "High", how do i do that?

Kind Regards

User avatar
DougieLawson
Posts: 35557
Joined: Sun Jun 16, 2013 11:19 pm
Location: Basingstoke, UK
Contact: Website Twitter

Re: WebIOPi : control your Pi’s GPIO with a browser

Fri Dec 27, 2013 12:13 pm

pyromagi wrote:Hi,
I have managed to make a small index.html with 2x8 on/off buttons that works great.
but i would like to add a button that sets all other buttons (gpio pins) to "High", how do i do that?

Kind Regards
Post your HTML here.

The answer is probably javascript to toggle the values of all of the buttons before submitting the CGI form.
Note: Having anything humorous in your signature is completely banned on this forum. Wear a tin-foil hat and you'll get a ban.

Any DMs sent on Twitter will be answered next month.

This is a doctor free zone.

pyromagi
Posts: 9
Joined: Wed Dec 25, 2013 1:39 am

Re: WebIOPi : control your Pi’s GPIO with a browser

Fri Dec 27, 2013 12:17 pm

Index.html

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>WebIOPi | Light Control</title>
 <link href="style.css" id="stylesheet" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="/webiopi.js"></script>
 <script type="text/javascript" src="buttons.js"></script>
</head>
<body>
        <table border="1">
                <tr>
                        <td id="cell1">
                        </td>
                        <td id="cell2">
                        </td>
                </tr>
                <tr>
                        <td id="cell3">
                        </td>
                        <td id="cell4">
                        </td>
                </tr>
                <tr>
                        <td id="cell5">
                        </td>
                        <td id="cell6">
                        </td>
                </tr>
                <tr>
                        <td id="cell7">
                        </td>
                        <td id="cell8">
                        </td>
                </tr>
        </table>
</body>
</html>
buttons.js

Code: Select all

webiopi().ready(function() {

        button = webiopi().createGPIOButton(2,"Que 1");
        $("#cell1").append(button);

        button = webiopi().createGPIOButton(3,"Que 2");
        $("#cell2").append(button);

        button = webiopi().createGPIOButton(4,"Que 3");
        $("#cell3").append(button);

        button = webiopi().createGPIOButton(17,"Que 4");
        $("#cell4").append(button);

        // auto refresh UI
        webiopi().refreshGPIO(true);
});

User avatar
DougieLawson
Posts: 35557
Joined: Sun Jun 16, 2013 11:19 pm
Location: Basingstoke, UK
Contact: Website Twitter

Re: WebIOPi : control your Pi’s GPIO with a browser

Fri Dec 27, 2013 1:13 pm

Is there a python script with that?
Note: Having anything humorous in your signature is completely banned on this forum. Wear a tin-foil hat and you'll get a ban.

Any DMs sent on Twitter will be answered next month.

This is a doctor free zone.

pyromagi
Posts: 9
Joined: Wed Dec 25, 2013 1:39 am

Re: WebIOPi : control your Pi’s GPIO with a browser

Fri Dec 27, 2013 8:14 pm

Not that I'm aware of.
I have not made any myself, so the SCRIPTS section of /etc/webiopi/config is default.

Kind Regards

User avatar
DougieLawson
Posts: 35557
Joined: Sun Jun 16, 2013 11:19 pm
Location: Basingstoke, UK
Contact: Website Twitter

Re: WebIOPi : control your Pi’s GPIO with a browser

Fri Dec 27, 2013 9:26 pm

pyromagi wrote:Not that I'm aware of.
I have not made any myself, so the SCRIPTS section of /etc/webiopi/config is default.

Kind Regards
I that case I can't help because I don't know how you've got your original code to work.
Note: Having anything humorous in your signature is completely banned on this forum. Wear a tin-foil hat and you'll get a ban.

Any DMs sent on Twitter will be answered next month.

This is a doctor free zone.

pyromagi
Posts: 9
Joined: Wed Dec 25, 2013 1:39 am

Re: WebIOPi : control your Pi’s GPIO with a browser

Fri Dec 27, 2013 9:39 pm

My guess is that I'm using the REST API, i have more or less done what the basic tutorial on the webiopi site is showing.
Would be nice with a "reset all pins (to high/low) button" :D

Kind Regards

xyboox
Posts: 10
Joined: Fri Feb 08, 2013 3:05 pm

Re: WebIOPi : control your Pi’s GPIO with a browser

Wed Jan 01, 2014 3:18 pm

Hi guys,

so I'm trying to make a small simple app to control the GPIO of my Pi using webiopi REST API. I want to use this because I need a client side as html5 ( to be packed as an Android/iOS app using phonegap ). All works great, untill I try to make AJAX POST calls to the API and then I get this problem with crossdomain requests policy. Error is "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://some-domain-here.com' is therefore not allowed access. " Is there a way to make these POST requests from another domain?

Thanks!

Phenom55
Posts: 43
Joined: Fri Jan 03, 2014 2:54 pm

Re: WebIOPi : control your Pi’s GPIO with a browser

Tue Jan 28, 2014 2:59 am

Does anyone know if I can connect to my RPi with Mosync using WebIOPi http requests?

tafelrunde
Posts: 1
Joined: Tue Apr 01, 2014 8:59 pm

Re: WebIOPi : control your Pi’s GPIO with a browser

Tue Apr 01, 2014 9:02 pm

I came over this thread recently.
@xyboox: did you whitlisted the domain you want to access?

greetings

jneha
Posts: 8
Joined: Sat May 24, 2014 7:26 am

Re: WebIOPi : control your Pi’s GPIO with a browser

Fri Jun 13, 2014 7:54 am

I am trying to run the Simple LED program through web(https://code.google.com/p/webiopi/wiki/Tutorial_Basis )
I am unable to create a GPIO button through webiopi using the function:
webiopi.createGPIOButton(17, "string");

Although the html page executes the python script fine, yet I am unable to view the GPIO button. Is it something related with the webiopi javascript file(webiopi.js)? Please help

User avatar
wallarug
Posts: 460
Joined: Mon May 14, 2012 8:21 am
Location: Sydney, Australia

Re: WebIOPi : control your Pi’s GPIO with a browser

Wed Sep 03, 2014 11:17 am

Hey guys,

I can't get slider control to work in Google Chrome or anything else.

I press the slider, the light flickers on for a fraction of a second, then turns off.

Can someone help me?

Code:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content = "height = device-height, width = 420, user-scalable = no" /> 
        <title>Hot Box Control</title>
        <script type="text/javascript" src="/webiopi.js"></script>
	 <script type="text/javascript" src="/jquery-1.11.1.min.js"></script>
	 <script type="text/javascript" src="/jquery.mobile-1.4.3.min.js"></script>
	 <link rel="stylesheet" href="/jquery.mobile.icons.min.css" />
	 <link rel="stylesheet" href="/jquery.mobile.structure-1.4.3.min.css" />
	 <link rel="stylesheet" href="/jquery.mobile-1.4.3.min.css" />
        <script type="text/javascript">
       var current = "off"; 
	webiopi().ready(function() {
                var content, button, contentA, masters;
		  
                contentA = $("#contentA");
		  content = $("#content");
		  masters = $("#masters");
              
//webiopi().updateFunction(4,"PWM");   
//webiopi().enablePWM(4);
//alert(webiopi().getFunction(4));    
                
		// Gertboard Buffers Section --> GPIOs 2,3,4,7,8,9,10,11 and 22,23,24,25
		// create a "SWITCH" labeled button for Buffer
                button = webiopi().createGPIOButton(2, "GPIO 2");
                contentA.append(button); // append button to content div
		// create a "SWITCH" labeled button for Buffer
                button = webiopi().createGPIOButton(3, "GPIO 3");
                contentA.append(button); // append button to content div
		// create a "SWITCH" labeled button for Buffer
                button = webiopi().createGPIOButton(4, "GPIO 4");
                contentA.append(button); // append button to content div
		// create a "SWITCH" labeled button for Buffer
                button = webiopi().createGPIOButton(7, "GPIO 7");
                contentA.append(button); // append button to content div
		// create a "SWITCH" labeled button for Buffer
                button = webiopi().createGPIOButton(8, "GPIO 8");
                contentA.append(button); // append button to content div
		// create a "SWITCH" labeled button for Buffer
                button = webiopi().createGPIOButton(9, "GPIO 9");
                contentA.append(button); // append button to content div
		// create a "SWITCH" labeled button for Buffer
                button = webiopi().createGPIOButton(10, "GPIO 10");
                contentA.append(button); // append button to content div
		// create a "SWITCH" labeled button for Buffer
                button = webiopi().createGPIOButton(11, "GPIO 11");
                contentA.append(button); // append button to content div
		// create a "SWITCH" labeled button for Buffer
                button = webiopi().createGPIOButton(22, "GPIO 22");
                contentA.append(button); // append button to content div
		// create a "SWITCH" labeled button for Buffer
                button = webiopi().createGPIOButton(23, "GPIO 23");
                contentA.append(button); // append button to content div
		// create a "SWITCH" labeled button for Buffer
                button = webiopi().createGPIOButton(24, "GPIO 24");
                contentA.append(button); // append button to content div
		// create a "SWITCH" labeled button for Buffer
                button = webiopi().createGPIOButton(25, "GPIO 25");
                contentA.append(button); // append button to content div
		// MASTER SWITCHES ----
		// Button HOLD MASTER  
		  button = webiopi().createButton("hold", "HOLD_ALL", mousedownMaster, mouseupMaster);
		  masters.append(button);
		// Button MASTER ON/OFF
		  button = webiopi().createButton("onoff","ON_OFF", onoffMaster);
		  masters.append(button);



		// HOT BOX CENTRAL CONTROL / LAYOUT


             
                // create a "LED" labelled button for GPIO 7
                button = webiopi().createGPIOButton(7, "LED");
                content.append(button); // append button to content div
                       
                // create a button that output a single pulse
                button = webiopi().createPulseButton("pulse", "Pulse", 7);
                content.append(button); // append button to content div
                
                // create a button which output a bit sequence on GPIO 7 with a 100ms period 
                button = webiopi().createSequenceButton("sos", "S.O.S 1", 7, 100, "01010100110011001100101010");
                content.append(button); // append button to content div
                       
                // the previous button will always output the same sequence
                // you can also create a simple button with your own function 
                button = webiopi().createButton("sos2", "S.O.S 2", outputSequence);
                content.append(button); // append button to content div
                
                // you can also create a button which calls a different function for mouse down and up events
                //button = webiopi().createButton("hold", "Hold", mousedown, mouseup);
                //content.append(button);
                
                // Only for Chrome and Safari, create a slider that pulse out a 0-100% duty cycle ratio on GPIO 8
                button = webiopi().createRatioSlider(4);
		  webiopi().pulseRatio(4,0.5);
                content.append(button);
                       
                // Only for Chrome and Safari, create a slider that pulse out a -45 to +45° angle on GPIO 9
                button = webiopi().createAngleSlider(9);
                content.append(button);
        });
                
 
	function mousedownMaster() {
              webiopi().digitalWrite(2, 1);
              webiopi().digitalWrite(3, 1);
              webiopi().digitalWrite(4, 1);
              webiopi().digitalWrite(7, 1);
              webiopi().digitalWrite(8, 1);
              webiopi().digitalWrite(9, 1);
              webiopi().digitalWrite(10, 1);
              webiopi().digitalWrite(11, 1);
              webiopi().digitalWrite(22, 1);
              webiopi().digitalWrite(23, 1);
              webiopi().digitalWrite(24, 1);
              webiopi().digitalWrite(25, 1);		
		
        }
        
        function mouseupMaster() {
              webiopi().digitalWrite(2, 0);
              webiopi().digitalWrite(3, 0);
              webiopi().digitalWrite(4, 0);
              webiopi().digitalWrite(7, 0);
              webiopi().digitalWrite(8, 0);
              webiopi().digitalWrite(9, 0);
              webiopi().digitalWrite(10, 0);
              webiopi().digitalWrite(11, 0);
              webiopi().digitalWrite(22, 0);
              webiopi().digitalWrite(23, 0);
              webiopi().digitalWrite(24, 0);
              webiopi().digitalWrite(25, 0);
        }
        
	function onoffMaster() {
              if(current=="off"){
		webiopi().digitalWrite(2, 1);
              webiopi().digitalWrite(3, 1);
              webiopi().digitalWrite(4, 1);
              webiopi().digitalWrite(7, 1);
              webiopi().digitalWrite(8, 1);
              webiopi().digitalWrite(9, 1);
              webiopi().digitalWrite(10, 1);
              webiopi().digitalWrite(11, 1);
              webiopi().digitalWrite(22, 1);
              webiopi().digitalWrite(23, 1);
              webiopi().digitalWrite(24, 1);
              webiopi().digitalWrite(25, 1);
		current = "on";		
		}else{
		webiopi().digitalWrite(2, 0);
              webiopi().digitalWrite(3, 0);
              webiopi().digitalWrite(4, 0);
              webiopi().digitalWrite(7, 0);
              webiopi().digitalWrite(8, 0);
              webiopi().digitalWrite(9, 0);
              webiopi().digitalWrite(10, 0);
              webiopi().digitalWrite(11, 0);
              webiopi().digitalWrite(22, 0);
              webiopi().digitalWrite(23, 0);
              webiopi().digitalWrite(24, 0);
              webiopi().digitalWrite(25, 0);
		current = "off";
		}
		
        }

        function outputSequence() {
                var sequence = "01010100110011001100101010" // S.O.S. morse code or whatever you want
                // output sequence on gpio 7 with a 100ms period
                webiopi().outputSequence(7, 100, sequence, sequenceCallback);
        }
        
        function sequenceCallback(gpio, data) {
                alert("sequence on " + gpio + " finished with " + data);
        }
        
        function callMacro() {
                var args = [4,2,3] // or whatever you want
                // call myMacroWithArgs(arg)
                webiopi().callMacro("myMacroWithArgs", args, macroCallback);
        }
        
        function macroCallback(macro, args, data) {
                alert(macro + " returned with " + data);
        }
        
        </script>
        <style type="text/css">
                button {
                        display: block;
                        margin: 5px 5px 5px 5px;
                        width: 160px;
                        height: 45px;
                        font-size: 16pt;
                        font-weight: bold;
                        color: black;
                }
                custom_button {
                        display: block;
                        margin: 5px 5px 5px 5px;
                        width: 160px;
                        height: 45px;
                        font-size: 24pt;
                        font-weight: bold;
                        color: black;
                }
                
                input[type="range"] {
                        display: block;
                        width: 160px;
                        height: 45px;
                }
                
                #gpio2.LOW {
                        background-color: White;
                }
                
                #gpio2.HIGH {
                        background-color: Red;
                }
                #gpio3.LOW {
                        background-color: White;
                }
                
                #gpio3.HIGH {
                        background-color: Red;
                }
                #gpio4.LOW {
                        background-color: White;
                }
                
                #gpio4.HIGH {
                        background-color: Red;
                }
                #gpio7.LOW {
                        background-color: White;
                }
                
                #gpio7.HIGH {
                        background-color: Red;
                }
                #gpio8.LOW {
                        background-color: White;
                }
                
                #gpio8.HIGH {
                        background-color: Red;
                }
                #gpio9.LOW {
                        background-color: White;
                }
                
                #gpio9.HIGH {
                        background-color: Red;
                }
                #gpio10.LOW {
                        background-color: White;
                }
                
                #gpio10.HIGH {
                        background-color: Red;
                }
                #gpio11.LOW {
                        background-color: White;
                }
                
                #gpio11.HIGH {
                        background-color: Red;
                }
                #gpio22.LOW {
                        background-color: White;
                }
                
                #gpio22.HIGH {
                        background-color: Red;
                }
                #gpio23.LOW {
                        background-color: White;
                }
                
                #gpio23.HIGH {
                        background-color: Red;
                }
                #gpio24.LOW {
                        background-color: White;
                }
                
                #gpio24.HIGH {
                        background-color: Red;
                }
                #gpio25.LOW {
                        background-color: White;
                }
                
                #gpio25.HIGH {
                        background-color: Red;
                }






        </style>
</head>
<body>
  <div data-role="page" id='home' data-theme='a' data-content='a'>
    <div data-role="header" data-theme="a">
      <h1>Hot Box Central Control</h1>
   </div>
    <div data-role="content">
        <div class='ui-grid-b'>
           <div class='ui-block-a' style='text-align:center;'>
		<div data-role='header' data-theme='b'><h2> Gertboard Buffers </h2></div>
		<br />
		<table>
		<tr><th>Overrides</th><th>MASTERS</th></tr>
		<tr>
		<td><div id="contentA" align="center"></div></td>
		<td><div id="masters" align="center"></div></td>
		</tr>
		</table>
		
	    </div>
	    <div class='ui-block-b'>
		
		<div id="HotBox"></div>
	    </div>
	    <div class='ui-block-c'>
		<div id="content" align="center"></div>
	    </div>

    </div>
    <!-- /content -->

        
</body>
</html>


Thanks

User avatar
wallarug
Posts: 460
Joined: Mon May 14, 2012 8:21 am
Location: Sydney, Australia

Re: WebIOPi : control your Pi’s GPIO with a browser

Sat Sep 06, 2014 12:09 pm

Guys,

I am still having the same problem? Can someone please help?

Started a thread with all the code: http://www.raspberrypi.org/forums/viewt ... 76#p608576

srahmati
Posts: 26
Joined: Sat Oct 04, 2014 6:40 pm

Re: WebIOPi : control your Pi’s GPIO with a browser

Thu Dec 11, 2014 9:21 am

Hi I downloaded webiopi-0.5.3 from google code and installed it.my pi is connected to my laptop and share wifi over it.my webiopi runs successfully in the terminal.but I can access to it just with my laptop that it is connected to it.cant access with my HTC one or other laptop browser.any suggestions?

User avatar
KnightOfPi
Posts: 49
Joined: Sun Dec 28, 2014 12:57 pm
Location: Vienna - Austria
Contact: Website

Re: WebIOPi : control your Pi’s GPIO with a browser

Thu Jul 23, 2015 9:48 am

Cancelor wrote:I've got WebIOPi working, no problem, but I want to integrate a DHT11 humidity sensor. Can this be done by a novice with no programming skills?
Yes, with the Adafruit_DHT driver updated for python3:
http://www.knight-of-pi.org/measure-tem ... 22-am2302/
Check out www.knight-of-pi.org for many beginner-friendly tutorials!

restomaguio
Posts: 14
Joined: Sat Apr 27, 2013 8:53 pm

Re: WebIOPi : control your Pi’s GPIO with a browser

Sat May 21, 2016 11:26 am

Your work is really great! I have done many modifications on the menu apps side by forcing myself to learn html, java and css scripts. I have now several modified buttons and background (green PCB layout) I preferred. It was entirely different from your six buttons example. Many many thanks for your detailed unselfish guides and honest instructions. It works fine upon boot on Raspberry Pi Model B and I am controlling now my modified Stryder Robot using my smartphone or laptop.

I hope you upgrade it in order to work for Pi 2. Even the Filezilla was not connecting and can't find the server.

Thanks very much again for your marvelous and great contribution to Raspberry Pi communities.

Rolly

Return to “Interfacing (DSI, CSI, I2C, etc.)”