Page 1 of 1

editing index.html in webiopi

Posted: Fri Jun 06, 2014 6:22 am
by fahad71
Hi All

I have used this index.html for webiopi

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/$
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>WebIOPi | Light Control</title>
        <script type="text/javascript" src="/webiopi.js"></script>
        <script type="text/javascript">
        webiopi().ready(function() {

                // Create a "Light" labeled button for GPIO 17
                var button = webiopi().createGPIOButton(17,"Light");

                // Append button to HTML element with ID="controls" using jQuery
                $("#controls").append(button);

                // Refresh GPIO buttons
                // pass true to refresh repeatedly of false to refresh once
                  webiopi().refreshGPIO(true);

 });

        </script>
        <style type="text/css">
                button {
                        display: block;
                        margin: 5px 5px 5px 5px;
                        width: 160px;
                        height: 45px;
                        font-size: 24pt;
                        font-weight: bold;
                        color: white;
                }

                  #gpio17.LOW {
                        background-color: Black;
                }

                  #gpio17.HIGH {
                        background-color: Blue;
                }
               
                
        </style>
</head>
<body>
        <div id="controls" align="center"></div>
</body>
</html>



I want to add more buttons for at least 8 buttons to use 8 channle relay.

I do not know much about programming but i can understand some.


Many thanks

Re: editing index.html in webiopi

Posted: Fri Jun 06, 2014 8:09 am
by elParaguayo
This seems to be the same question as your other thread in this same forum...

I've never used webiopi before. However, based on the code you posted, if I wanted to add another button, I'd be tempted to look at the lines in the code that say "Create a ... button..." and "Append button..."

Why don't you have a go at adding another button and, if it doesn't work, come back with your code and explain what the problem is. You'll learn more that way rather than just have someone give you the answer.

Re: editing index.html in webiopi

Posted: Fri Jun 06, 2014 10:57 am
by fahad71
Thank you for your encouragement

I have been trying for the hole day.

Because i do not know the functionality of java on it. I would be diffecult.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/$
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WebIOPi | Light Control</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
webiopi().ready(function() {

// Create a "Light" labeled button for GPIO 17
var button = webiopi().createGPIOButton(17,"Light");
var button = webiopi().createGPIOButton(27,"TV");

// Append button to HTML element with ID="controls" using jQuery
$("#controls").append(button);

// Refresh GPIO buttons
// pass true to refresh repeatedly of false to refresh once
webiopi().refreshGPIO(true);

});

</script>
<style type="text/css">
button {
display: block;
margin: 5px 5px 5px 5px;
width: 160px;
height: 45px;
font-size: 24pt;
font-weight: bold;
color: white;
}

#gpio17.LOW {
background-color: Black;
}

#gpio17.HIGH {
background-color: Blue;
}

#gpio27.LOW {
background-color: Black;
}
#gpio27.HIGH {
background-color: Black;
}

</style>
</head>
<body>
<div id="controls" align="center"></div>
</body>
</html>
That show no error. when restart the service and i open my browser, it show gray tv button and cant do action

Re: editing index.html in webiopi

Posted: Fri Jun 06, 2014 11:22 am
by elParaguayo
I can't help with the actions as I don't know how your GPIO pins are connected. However, I can offer some guidance in respect of your code.

Firstly, well done, you've made a sensible start!

The immediate problem I can see is here:

Code: Select all

// Create a "Light" labeled button for GPIO 17
var button = webiopi().createGPIOButton(17,"Light");
var button = webiopi().createGPIOButton(27,"TV");
You've defined "button" twice, so when you try to add it with this line:

Code: Select all

$("#controls").append(button);
you only add the last one, i.e. the TV button.

I think you'd be better off doing something like:

Code: Select all

var lightbutton = webiopi().createGPIOButton(17,"Light");
var tvbutton = webiopi().createGPIOButton(27,"TV");
$("#controls").append(lightbutton);
$("#controls").append(tvbutton);

Re: editing index.html in webiopi

Posted: Fri Jun 06, 2014 2:39 pm
by fahad71
elParaguayo wrote:I can't help with the actions as I don't know how your GPIO pins are connected. However, I can offer some guidance in respect of your code.

Firstly, well done, you've made a sensible start!

The immediate problem I can see is here:

Code: Select all

// Create a "Light" labeled button for GPIO 17
var button = webiopi().createGPIOButton(17,"Light");
var button = webiopi().createGPIOButton(27,"TV");
You've defined "button" twice, so when you try to add it with this line:

Code: Select all

$("#controls").append(button);
you only add the last one, i.e. the TV button.

I think you'd be better off doing something like:

Code: Select all

var lightbutton = webiopi().createGPIOButton(17,"Light");
var tvbutton = webiopi().createGPIOButton(27,"TV");
$("#controls").append(lightbutton);
$("#controls").append(tvbutton);
Thank you very much for your support
The buttons has been showed on the browser with gray colore.
but i can not use them. relay does not poen when i press the button
Also when i put

Code: Select all

webiopi().refreshGPIO(true);
It just make the buttons blue

Re: editing index.html in webiopi

Posted: Fri Jun 06, 2014 3:21 pm
by fahad71
I found another way to control the gpio

see the code below

Code: Select all

webiopi().ready(function() {
                    webiopi().setFunction(17,"out");
                    webiopi().setFunction(18,"out");
                 
                    var content, button;
                    content = $("#content");


                    button = webiopi().createGPIOButton(17, "LIGHT");
                    content.append(button);

                    button = webiopi().createGPIOButton(18, "TV");
                    content.append(button);

                    webiopi().refreshGPIO(true);
            });


Now it works very will but, this is a small problem

When i reboot my rpi, after login to webiopi page, it run all the apps, then i have to turn it off all

Now how im going to disable this ?

I am sure because i use

Code: Select all

webiopi().setFunction(17,"out")
it make it out when login
Is there any way so make it something else instead of out?

Re: editing index.html in webiopi

Posted: Fri Jun 06, 2014 3:31 pm
by elParaguayo
I think the "out" means you want to be able to to control the state of the pin, rather than read it as an input.

The issue is whether you want the pin to be initially set high or low. It looks like you can do this by editing the webiopi config file: https://code.google.com/p/webiopi/wiki/ ... GPIO_setup

Re: editing index.html in webiopi

Posted: Sat Jun 07, 2014 12:28 am
by fahad71
elParaguayo wrote:I think the "out" means you want to be able to to control the state of the pin, rather than read it as an input.

The issue is whether you want the pin to be initially set high or low. It looks like you can do this by editing the webiopi config file: https://code.google.com/p/webiopi/wiki/ ... GPIO_setup

Code: Select all

OUT 1 
is the solution

Thank you so much for you support
I really appreciated

Re: editing index.html in webiopi

Posted: Sat Jun 07, 2014 5:41 am
by elParaguayo
My pleasure. Well done for getting it to work.

Re: editing index.html in webiopi

Posted: Sat Jul 19, 2014 9:00 am
by karateo
I am using a 8-relay sainsmart board and I want to create a simple page with the following features:

On/Off for each relay and a slider to adjust time for On function (for each relay).
I have also included a Turn all off button.

I have created the On/Off buttons with this page

Code: Select all

<script type="text/javascript">
webiopi().ready(function() {
                var controls, button;
                controls = $("#content");
                
                var button = webiopi().createGPIOButton(2, "Valve 1");
                $("#controls").append(button);
                var button = webiopi().createGPIOButton(3, "Valve 2");
                $("#controls").append(button);
                var button = webiopi().createGPIOButton(7, "Valve 3");
                $("#controls").append(button);
                var button = webiopi().createGPIOButton(8, "Valve 4");
                $("#controls").append(button);
                var button = webiopi().createGPIOButton(9, "Valve 5");
                $("#controls").append(button);
                var button = webiopi().createGPIOButton(10, "Valve 6");
                $("#controls").append(button);
                var button = webiopi().createGPIOButton(11, "Valve 7");
                $("#controls").append(button);
                var button = webiopi().createGPIOButton(18, "Valve 8");
                $("#controls").append(button);
                var button = webiopi().createButton(turnalloff, "Turn all the valves off", turnalloff);
                $("#controls").append(button);
                webiopi().refreshGPIO(true);
})
</script>
As I like to find/learn/test on my own I don't ask for the final solution but a hint for my next step!

How can I add next to each button a slider?
I will use this slider
http://refreshless.com/nouislider/slider-options#start
But I don't know how to add it RIGHT to my buttons.

I could create a table and insert in each box the buttons I need but I am looking for a smarter solution!

My attempt is hosted here
https://github.com/teodorch85/teir

I am a COMPLETE noob with html/python/javascript/Jquery.
But I like learning new things! That's the purpose of Raspberry Pi, right? :)

Re: editing index.html in webiopi

Posted: Sat Sep 06, 2014 12:12 pm
by wallarug
I am also having issues with the slider.

http://www.raspberrypi.org/forums/viewt ... 76#p608576