fahad71
Posts: 12
Joined: Sun Mar 09, 2014 12:20 am

editing index.html in webiopi

Fri Jun 06, 2014 6:22 am

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

User avatar
elParaguayo
Posts: 1943
Joined: Wed May 16, 2012 12:46 pm
Location: London, UK

Re: editing index.html in webiopi

Fri Jun 06, 2014 8:09 am

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.
RPi Information Screen: plugin based system for displaying weather, travel information, football scores etc.

fahad71
Posts: 12
Joined: Sun Mar 09, 2014 12:20 am

Re: editing index.html in webiopi

Fri Jun 06, 2014 10:57 am

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

User avatar
elParaguayo
Posts: 1943
Joined: Wed May 16, 2012 12:46 pm
Location: London, UK

Re: editing index.html in webiopi

Fri Jun 06, 2014 11:22 am

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);
RPi Information Screen: plugin based system for displaying weather, travel information, football scores etc.

fahad71
Posts: 12
Joined: Sun Mar 09, 2014 12:20 am

Re: editing index.html in webiopi

Fri Jun 06, 2014 2:39 pm

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

fahad71
Posts: 12
Joined: Sun Mar 09, 2014 12:20 am

Re: editing index.html in webiopi

Fri Jun 06, 2014 3:21 pm

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?

User avatar
elParaguayo
Posts: 1943
Joined: Wed May 16, 2012 12:46 pm
Location: London, UK

Re: editing index.html in webiopi

Fri Jun 06, 2014 3:31 pm

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
RPi Information Screen: plugin based system for displaying weather, travel information, football scores etc.

fahad71
Posts: 12
Joined: Sun Mar 09, 2014 12:20 am

Re: editing index.html in webiopi

Sat Jun 07, 2014 12:28 am

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

User avatar
elParaguayo
Posts: 1943
Joined: Wed May 16, 2012 12:46 pm
Location: London, UK

Re: editing index.html in webiopi

Sat Jun 07, 2014 5:41 am

My pleasure. Well done for getting it to work.
RPi Information Screen: plugin based system for displaying weather, travel information, football scores etc.

karateo
Posts: 2
Joined: Mon Feb 24, 2014 12:56 pm

Re: editing index.html in webiopi

Sat Jul 19, 2014 9:00 am

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? :)

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

Re: editing index.html in webiopi

Sat Sep 06, 2014 12:12 pm

I am also having issues with the slider.

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

Return to “Python”