Results 1 to 7 of 7

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Joined
    Sep 2007
    Location
    Hamilton, New Zealand
    Posts
    465

    Raspberry Pi Javascript function help

    Hi guys,

    I have built a web interface to control my garage door remote via a GPIO pin on my Raspberry Pi 3 following instructions from this forum post. WebIOPi is a framework in Python that controls GPIO pins. On top of this is a javascript script and a CSS style fed into an HTML page.
    Note I needed to patch the WebIOPi python script from here to make it compatible with the Pi 3.

    This works great, but now I want to add a magnetic reed switch to the door so that I can tell if the door is already open or not.

    I built a pull-down circuit for the magnetic reed switch copying this post.

    This is the current hardware setup (except the blue JD-VCC to VCC jumper is removed):



    I found a javascript from here that will read the GPIO pin and send raise it as an alert (pop-up box when the page is loaded/refreshed), and that works too, sending back '1' or a '0' depending on if the magnet is present. But I would prefer the notification just be a area on the screen that says 'open' or 'closed'.

    Can someone please help me with a bit of javascript that would enable this?
    Last edited by djotter; 03-17-2017 at 03:54 PM.

  2. #2
    Joined
    Oct 2001
    Location
    Southern Ontario
    Age
    43
    Posts
    13,194

    Re: Raspberry Pi Javascript function help

    Can you paste a copy of the relevant code?

    Looks like a cool project. I've played with a few Arduinos but never got my hands on a Rasp. Pi yet. I'd be interested in learning more.

    As for the javascript, you'll probably want to look at playing with some div id's and then doing some document.getElementById("xxx").innerHTML to alter the page as required. This same technique is often used as part of webpages that utilize AJAX techniques.

  3. #3
    Joined
    Sep 2007
    Location
    Hamilton, New Zealand
    Posts
    465

    Re: Raspberry Pi Javascript function help

    This is the entire project



    javascript
    Code:
    webiopi().ready(function() {
            		webiopi().setFunction(17,"out");
    			webiopi().setFunction(27,"in");
            		
            		var content, button;
            		content = $("#content");
            		
            		button = webiopi().createSequenceButton("Garage Door","Garage Door",17,500,"01");
            		content.append(button);
            		
    			lastKnowValue = webiopi().digitalRead(27, gpioReadCallback);
    			
    			function gpioReadCallback(gpio, value) {
    			  alert("server returned " + value + " for gpio " + gpio);
    }
    
            });
    css. I tried to add a style for GPIO pin 27 in preparation of getting this to work I copied this from the original tutorial, so only mostly understand it
    Code:
    body {
    			background-color:#000000;
    			background-image:url('/img/doge.png');
    			background-repeat:no-repeat;
    			background-position:center;
    			background-size:contain;
    			font: bold 18px/25px Arial, sans-serif;
    			color:LightGray;
    			}
            
    button {
            		display: block;
            		position: relative;
            		margin: 10px;
            		padding: 0 10px;
            		text-align: center;
            		text-decoration: none;
            		width: 150px;
            		height: 60px;
            		font: bold 18px/25px Arial, sans-serif;    				
            		color: black;
            				
            	        text-shadow: 1px 1px 1px rgba(255,255,255, .22);
            		-webkit-border-radius: 30px;
       			-moz-border-radius: 30px;
        			border-radius: 30px;
     
        			-webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
        			-moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
        			box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
     
        			-webkit-transition: all 0.15s ease;
        			-moz-transition: all 0.15s ease;
        			-o-transition: all 0.15s ease;
        			-ms-transition: all 0.15s ease;
        			transition: all 0.15s ease;
            		}
            		
    input[type="range"] {
            		display: block;
            		width: 160px;
            		height: 45px;
            		}
            		
    #gpio17.LOW {
            		background-color: Gray;
            		color: Black;
            		}
            		
    #gpio17.HIGH {
            		background-color: Blue;
            		color: LightGray;
            		}
    
    #gpio27.LOW {
            		background-color: Red;
            		color: Orange;
            		}
            		
    #gpio27.HIGH {
            		background-color: Yellow;
            		color: Green;
            		}
    html
    Code:
    <!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="mobile-web-app-capable" content="yes">
            <meta name="viewport" content = "height = device-height, width = device-width, user-scalable = no" /> 
            <title>Garage Door</title>
            <script type="text/javascript" src="/webiopi.js"></script>
            <script type="text/javascript" src="/scripts/garage.js"></script>
            <link rel="stylesheet" type="text/css" href="/styles/garage.css">
            <link rel="shortcut icon" href="/img/doge.ico" />
    
    </head>
    <body>
    		</br>
    		</br>
    		</br>
    		</br>
    		</br>
    		</br>
    		</br>
    		</br>		
    		<div id="content" align="center"></div>
    		<p align="center"></p>
    		</br>
    		</br>
    </body>
    </html>
    This is how it looks on my phone

    Last edited by djotter; 03-17-2017 at 03:50 PM.

  4. #4
    Joined
    Oct 2001
    Location
    Southern Ontario
    Age
    43
    Posts
    13,194

    Re: Raspberry Pi Javascript function help

    I have been trying to find examples of using Inputs with WebIO and haven't found any that I like. And the code that you've posted doesn't make sense to me. I don't see where the value of 'value' is being sent to the function 'gpioReadCallback'. But if it works, it works. It must be part of the WebIO framework.

    garage.js
    Code:
    webiopi().ready(function() {
    	webiopi().setFunction(17,"out");
    	webiopi().setFunction(27,"in");
    	
    	var content, button;
    	content = $("#content");
    	
    	button = webiopi().createSequenceButton("Garage Door","Garage Door",17,500,"01");
    	content.append(button);
    	
    	lastKnowValue = webiopi().digitalRead(27, gpioReadCallback);
    	
    	function gpioReadCallback(gpio, value) {
    		if(value=="1"){
    			Response="Door is Open</br>";
    		} else {
    			Response="Door is Closed</br>";
    		}
    		document.getElementById("doorswitch").innerHTML=Response;
    	}
    
    });
    index.html
    Code:
    <!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="mobile-web-app-capable" content="yes">
            <meta name="viewport" content = "height = device-height, width = device-width, user-scalable = no" /> 
            <title>Garage Door</title>
            <script type="text/javascript" src="/webiopi.js"></script>
            <script type="text/javascript" src="/scripts/garage.js"></script>
            <link rel="stylesheet" type="text/css" href="/styles/garage.css">
            <link rel="shortcut icon" href="/img/doge.ico" />
    
    </head>
    <body>
    		</br>
    		</br>
    		</br>
    		</br>
    		</br>
    		<div id="doorswitch" align="center"></br></div>
    		</br>
    		</br>
    		<div id="content" align="center"></div>
    		<p align="center"></p>
    		</br>
    		</br>
    </body>
    </html>
    You will have to play with the positioning and text so it appears how you want it. I may also have the responses backwards (depending on how you set things up mechanically), but this should get you going.

    You could have used jQuery to update the text within the doorswitch divs in stead of the document.getElementById("doorswitch").innerHTML command since jQuery is a part of WebIO. But I haven't used jQuery too much and I find using standard JavaScript commands is easier to read.

    My only other concern getting the WebIO functions to call repeatedly to tell you if the door position has changed while you are looking at the web interface on your phone.

    Hmmm, now that I've seen this I may just have to get myself a Pi. I could have fun with this.
    Last edited by Spankin Partier; 03-19-2017 at 11:24 AM. Reason: Added jQuery paragraph

  5. #5
    Joined
    Oct 2001
    Location
    Southern Ontario
    Age
    43
    Posts
    13,194

    Re: Raspberry Pi Javascript function help

    The hunger was just too great. Bought a Pi today.

    How did this go? Did it work? I've installed WebIOPI and am currently going through the documentation. And from what I've read so far, it looks like I was right and you'll have to refresh your browser to see if the status of the switch has changed since you opened the page. I'm sure a simple loop with a sleep command will fix that up (if that's an issue for you).

  6. #6
    Joined
    Sep 2007
    Location
    Hamilton, New Zealand
    Posts
    465

    Re: Raspberry Pi Javascript function help

    Quote Originally Posted by Spankin Partier View Post
    The hunger was just too great. Bought a Pi today.

    How did this go? Did it work? I've installed WebIOPI and am currently going through the documentation. And from what I've read so far, it looks like I was right and you'll have to refresh your browser to see if the status of the switch has changed since you opened the page. I'm sure a simple loop with a sleep command will fix that up (if that's an issue for you).
    Works perfect! Door status updates with page refresh. Thank you very much for your help!

    One note, in the WebIOPi config file, (/etc/webiopi/config) I changed to the following, which I think sets the GPIO pin status on boot, otherwise the GPIO pin would cycle HIGH on boot which meant if there was a power cut or if I reboot the pi, the garage door would open . . .

    Code:
    [GPIO]
    # Initialize following GPIOs with given function and optional value
    # This is used during WebIOPi start process
    #21 = IN
    #23 = OUT 0
    #24 = OUT 0
    #25 = OUT 1
    17 = OUT 1
    27 = IN
    No I just need a box and a mini breadboard to tidy this up . . .




    What are you planning to do with your one?
    Last edited by djotter; 03-21-2017 at 04:41 AM. Reason: improper image link

  7. #7
    Joined
    Oct 2001
    Location
    Southern Ontario
    Age
    43
    Posts
    13,194

    Re: Raspberry Pi Javascript function help

    Quote Originally Posted by djotter View Post
    Works perfect! Door status updates with page refresh. Thank you very much for your help!
    Good to hear!

    One note, in the WebIOPi config file, (/etc/webiopi/config) I changed to the following, which I think sets the GPIO pin status on boot, otherwise the GPIO pin would cycle HIGH on boot which meant if there was a power cut or if I reboot the pi, the garage door would open . . .
    Yes, from what I read that could happen. I've heard of other systems Mesa boards (often used with CNCLinux) can suffer from situations like that. I think that's one reason why Arduinos have a special set up section within its programming language that's ran as soon as it boots.

    No I just need a box and a mini breadboard to tidy this up . . .
    Looks good so far! Just I wouldn't use a breadboard for anything other then prototyping. Nothing beats good old soldering or screw terminals when it comes to longevity. I made a data logger for my Dad's sunroom (measures the sunlight, and temperature for his plants and stores it on an SD card so he can import the data into an Excel spreadsheet). I created a prototype of the project using a breadboard and was starting to build the 'real' thing. But he took the prototype cause he figured it was good enough. After about a year, it started to give write errors on the SD card. I figure we started to have some bad connections due to corrosion.

    What are you planning to do with your one?
    Not sure yet. Probably just for experimenting and learning. Like I said, I've played with Arduinos in the past, and they were great for a lot of projects, but become limited when you want to interface with them via a web browser. I found C cumbersome to deal with text and can quickly eat up valuable memory.

    Some of my Arduino projects I've done in the past include:
    • an 8 channel Christmas light synchronisation project
    • the sunroom datalogger mentioned earlier
    • an advanced datalogger with display and humidity sensing
    • Capacitor tester
    • ESR tester for capacitors (failed, never worked right)
    • DNC master for an industrial CNC machine (it drip feeds very large programs from an SD card to the CNC machine via a serial port connetion)


    With the exception of the two testers, I did all the programming myself. I enjoyed learning a bit C.

    I always wanted to learn more about microprocessors and the Arduino really opened the door up for me. Now lets see where the Raspberry Pi will take me.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •