Link a python script to javascript on raspberry pi with webiopi

4.5k views Asked by At

Hi im trying to control some solenoid valves via a raspberry pi, relays and external power supply. I have written a script in python below that works fine, for changing the value of the physical buttons but want to be able to also control it from a web browser. Ive been using webiopi and have got that working as i can now turn the relay on and off. My problem is that when i start the python script the buttons i have set as outputs work fine, but when i press the on/off button on the javascript the physical buttons no longer work. I presume the problem is that i need to get the python script to "talk" to the javascript? to update the value of the output when pressed? however im not sure how to do this? below are my two seperate codes.

Python.

import RPi.GPIO as GPIO
import time


GPIO.setmode(GPIO.BOARD)

GPIO.setup(10, GPIO.IN) ## Setup GPIO Pin 10 to IN
GPIO.setup(22, GPIO.IN) ## Setup GPIO Pin 22 to IN
GPIO.setup(13, GPIO.OUT) ## Setup GPIO Pin 13 to OUT



#############################################

# All buttons wired to provide High input when pressed.

#############################################
# Cleanroom = 0 #sets a variable that will never be meet so while loop will continue       for ever or if power is interupted.

Cleanroom = 0
while True:


#########################################################################
# below is code for opening cryo, it includes button debouncing 
    cryo_open = 0
    while True:
    #take a reading
    on = GPIO.input(22)
    GPIO.output(13, False)
    #if the last reading was low and this one high, print
    if ((not cryo_open) and on):
        print("Cryo Open")
        #update previous input
        cryo_open = on
        #slight pause to debounce
        time.sleep(0.05)
        break


#########################################################################
# below is code for closing cryo, it includes button debouce
    cryo_close = 0
    while True:
        #take a reading
        on = GPIO.input(10)
        GPIO.output(13, True)
        #if the last reading was low and this one high, print
        if ((not cryo_close) and on):
            print("Cryo Close")
            #update previous input
            cryo_close = on
            #slight pause to debounce
            time.sleep(0.05)
            break




GPIO.cleanup(13)
GPIO.cleanup(22)   
GPIO.cleanup(10)  

Java script

<!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>WebIOPi | Demo</title>
    <script type="text/javascript" src="/webiopi.js"></script>
    <script type="text/javascript">
    webiopi().ready(function() {

           webiopi().setFunction(25,"out");
           webiopi().setFunction(15,"out");

                var content, button;
                content = $("#content");

                // create a "SWITCH" labeled cryo for GPIO 25
                button = webiopi().createGPIOButton(25, "Cryo");
                content.append(button); // append button to content div

                 // create a button that output a single pulse
                button = webiopi().createPulseButton("pulse", "Cryo Open 2", 25);
                content.append(button); // append button to content div

                 // create a button that output a single pulse
                button = webiopi().createPulseButton("pulse", "Cryo Close 2", 15);
                content.append(button); // append button to content div







        });

        </script>
        <h1 style = "text-align:center; font-family: Arial; font-size:15px">Clean Room Pneumatic Valve Control</h1>
        <style type="text/css">
                button {
                        display: block;
                        background-color: rgb(202, 60, 60);
                        margin: 15px 5px 5px 5px;
                        width: 300px;
                        height: 100px;
                        color: rgb(202, 60, 60);
                        color: rgb(202, 60, 60);
                        font-size: 15pt;
                        font-weight: block;
                        color: white;
                        border-radius: 20px;
                        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
                        outline: none;
                }

                //input[type="range"] {
                        color: rgb(202, 60, 60);
                        display: block;
                        width: 160px;
                        height: 45px;//
                }



                #gpio25.HIGH {
                        background-color: rgb(28, 184, 65); /* this is a green */
                }


                #gpio15.LOW {
                        background-color: rgb(202, 60, 60); /* this is a maroon */
                }


        </style>
    </head>
    <body>
        <div id="content" align="center"></div>
    </body>
    </html>
0

There are 0 answers