Demonic69
Posts: 21
Joined: Wed May 30, 2012 3:00 pm

Javascript/HTML Buttons... Help!

Fri Jan 18, 2013 9:37 am

Hi All
I've currently got RaspBMC and WebioPi running great thanks to Trouch.
I'm trying to get a page setup that will read the status of some GPIO pins, display that with the relevant colour/image, and allow me to switch one GPIO pin on/off. This should allow me to turn on/off my 360 via a webpage so I can FTP to it.
All I get is this http://demonic69.no-ip.org/index3.html
This code has some rubbish that needs removing, I'm just playing with a working demo page at the minute,

Any help appreciated

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>WebIOPi | Demo</title>

<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
webiopi().ready(function() {
var content, button;
content = $("#content");

//button up left
button = webiopi().createGPIOButton(7,"TL");
$("#cell1").append(button1);

//button up right
button = webiopi().createGPIOButton(8,"TR");
$("#cell3").append(button);

//button middle
button = webiopi().createGPIOButton(9,"BL");
$("#cell5").append(button);

//button bottom left
button = webiopi().createGPIOButton(10,"BR");
$("#cell7").append(button);

//button bottom right
button = webiopi().createGPIOButton(10,"BR");
$("#cell7").append(button);

});
function mousedown() {
webiopi().setValue(7, 1);
}
function mouseup() {
webiopi().setValue(7, 0);
}
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 = [1,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: 1px 1px 1px 1px;
width: 130px;
height: 130px;
font-size: 24pt;
font-weight: bold;
color: black;
border-style: none
}
input[type="range"] {
display: block;
width: 160px;
height: 45px;
}
#gpio7.LOW {
background:url(360pow.jpg) no-repeat;
}
#gpio7.HIGH {
background-color: Red;
}
</style>
</head>
<body>
<table border="1">
   <tr>
    <td id="cell1">
    </td>
      <td id="cell2">
      </td>
      <td id="cell3">
      </td>
   </tr>
   <tr>
      <td id="cell4">
      </td>
      <td id="cell5">
      </td>
      <td id="cell6">
      </td>
   </tr>
      <tr>
      <td id="cell7">
      </td>
      <td id="cell8">
      </td>
      <td id="cell9">
      </td>
   </tr>
</table>
<div id="content" align="center">
</div>
</body></html>

trouch
Posts: 310
Joined: Fri Aug 03, 2012 7:24 pm
Location: France
Contact: Website

Re: Javascript/HTML Buttons... Help!

Fri Jan 18, 2013 2:42 pm

I'm sorry but... Wrong section, Java and Javascript are totally different things !
Your error, which is not present on your post, but we can see looking source code of given url :

Code: Select all

<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript" src="/webiopi.js">
webiopi().ready(function() {
var content, button;
content = $("#content");
...
you have to remove src attribute of the second script tag !

WebIOPi - Raspberry Pi REST Framework to control your Pi from the web
http://store.raspberrypi.com/projects/webiopi
http://code.google.com/p/webiopi/
http://trouch.com

Demonic69
Posts: 21
Joined: Wed May 30, 2012 3:00 pm

Re: Javascript/HTML Buttons... Help!

Fri Jan 18, 2013 3:26 pm

Hi Trouch :D
Dammit! Why must they confuse me so! Give me a soldering iron and some transistors any day :D
My code originally had that src missing, I added it as I was testing to see if I'd missed it :D Removed again, still no luck :(

trouch
Posts: 310
Joined: Fri Aug 03, 2012 7:24 pm
Location: France
Contact: Website

Re: Javascript/HTML Buttons... Help!

Fri Jan 18, 2013 3:36 pm

it work better without the src attribute, the Javascript console now throw error :
"Uncaught ReferenceError: button1 is not defined"

replace

Code: Select all

$("#cell1").append(button1);
with

Code: Select all

$("#cell1").append(button);
also add before </script> :

Code: Select all

};

WebIOPi - Raspberry Pi REST Framework to control your Pi from the web
http://store.raspberrypi.com/projects/webiopi
http://code.google.com/p/webiopi/
http://trouch.com

Demonic69
Posts: 21
Joined: Wed May 30, 2012 3:00 pm

Re: Javascript/HTML Buttons... Help!

Fri Jan 18, 2013 3:57 pm

Beautiful! Looking much better now thanks. I thought I'd got a debugger but it's playing up, any recommendations on one for dummies like me?
Also, am I better using a button or something else to display inputs instead of setting outputs?

Thanks so much for your help.

Return to “Java”

Who is online

Users browsing this forum: No registered users and 2 guests