link to another internal website from webiopi

Rafael

unread,

Nov 8, 2014, 10:02:51 AM11/8/14

to web...@googlegroups.com

i have a webiopi web with several buttons. One of them will be a link with another internal webpage (where i should watch the image what a webcam conmected to RPI is getting (using the motion program)). The internal IP address of webiopi is 192.168.1.38:8000 and the IP address of webcam is 192.168.1.38:8001. They run in a independent way but i want to make the link between both internal websites using a bottom of webiopi.

i have created the buttom as below:

   var camara1 = webiopi().createButton("sendButton", "ON/OFF", 1);
                // el 1 tendra que ser sustituido por una llamada a una funcion
                // que se ejecutara cuando se pulse el boton
                $("#cam1").append(camara1);

i have to write the link in stead of number "1" but, i don´t know how to do it.

When the link will run, i will have the second problem, i don´t know how to come back to webiopi from the linked website (198.168.1.38:8001).

could anybody help me?

Thank you in advance.

Toshi Bass

unread,

Nov 8, 2014, 6:11:24 PM11/8/14

to web...@googlegroups.com

Hi Rafael

Do you really want to go to this other web page to view the webcam, why not just display the image on your webiopi web page something like:

Or do you want to start the other script running from webiopi, you can do that with a macro button and a subprocess call.

Toshi

Rafael

unread,

Nov 9, 2014, 6:48:41 AM11/9/14

to web...@googlegroups.com

Thank you Toshi.

I had not thought to view the webcam image on my webiopi web. It is a good idea. I will do it as you are proposing.

I will show the webcam image at the end of muy webiopi web but, only when a buttom was clicked.

It is possible to do it with an structure like below?

var camara1 = webiopi().createButton("sendButton", "ON/OFF", 1);

$("#cam1").append(camara1);

I know i have to change the number "1" and add a function call but i don´t know how to run your suggested instructions (see below) when that button was clicked.

Could you help me?

Thank you.

Martyn Wheeler

unread,

Nov 9, 2014, 11:54:54 AM11/9/14

to web...@googlegroups.com

I am trying something similar which I asked about in another post. However, I have since discovered RPi-Cam-Web-Interface which is absolutely brilliant. I was wondering if I could put the page into my webiopi folder and run it from there - I tried and it failed. I suspect that has soemthing to do with the fact that webiopi's server is not supporting php - am I correct? If so is there away to incorporate php into my webiopi server to save having both port 80 and port 8000 open on my machine?

Thanks

Martyn

Toshi Bass

unread,

Nov 9, 2014, 1:48:21 PM11/9/14

to web...@googlegroups.com

Raphael

So if you want to use a button that when pressed shows you webcam image then then the only way I know is to hide the image fist then show after the button is pressed

Add this button to your others:

button = webiopi().createButton("macro", "", Screen_show_hide);

$("content").append(button);

Paste in this function:

function Screen_show_hide() {

// Screen show/hide

var show_hide = document.getElementById("toggleScreen");

var text = document.getElementById("displayScreen");

if(show_hide.style.display == "block") {

show_hide.style.display = "none";

Screen.innerHTML = "show";

}

else {

show_hide.style.display = "block";

Screen.innerHTML = "hide";

}

Then in <body> section add

<div id="toggleScreen" style="display: none" align="center"><h1>Hello></h1></div>

Save and test it... when you press your button Hello should appear on your web page when you press it again it should disappear

Now it's a simple case to replace Hello with the command that displays your webcam

So for me the line would look like this

I am using mjpg-streamer to stream my live video streams from rpi cam module and usb web cam so the command line to display the streams is src="http://192.168.0.40:8001/?action=stream" (8001, 8002 or whatever your using) if you are already streaming your web-cam to a different web page perhaps using some other streaming software then you need to find what the command line is and enter it in place of the above mjpg-streamer command.

Hope it helps

Toshi

Rafael

unread,

Nov 10, 2014, 5:28:01 AM11/10/14

to web...@googlegroups.com

Toshi, i am beginning with the checks and i have tryed to show the images in the easier way. I have added the below code (as you proposed) inside (at the end) the html part of webiopi .html program.

I run webiopi and motion and i can see both of them running properly if i type their ip address in my browser. However, when i look for the result of the code added en the webiopi html code, i see an box (a window) empty with the title "refresh page" in the right upper corner.

Maybe it is a problem of my browser (Mozilla) o, maybe it is a problem as Martyn says.

What is your opinion?

Thanks

Toshi Bass

unread,

Nov 10, 2014, 2:28:17 PM11/10/14

to web...@googlegroups.com

Well I never used motion however according to this site http://www.palebluedot.nl/jml/computer-stuff/33-webcam-streaming-with-raspberry-pi.html it appears that once you have set everything you get the stream much the same way as jpg-streamer, just point your browser at ***.***.*.***:8001 or 8**** whatever you set your camera host address, so when you have that working just put the code below into your webiopi index.html and it will appear on your page (the action=stream part is probably required only for mjpg-streamer)

<html>

</body>
</html>

If you see Refresh page on you webiopi web page it means the above code could not find your stream on the host address, (like the code is saying display the stream from the host address alternativly if it cannot be found print the message Refresh Page) make sure you can get the stream directly by entering the same same host address directly in the browser if this works then make sure your running motion etc before you open your webiopi web page or try refreshing your webiopi web page,

if it all works then you can add the dimension of the screen in the line like previous post.

Finally webiopi does not stream you images the streaming software does that so it does not matter were you install your webcam / raspberry pi streaming software, its just a matter of knowing the host address of the streaming software I have several pi's a couple of lap tops , phone and main computer as long as I give the correct host address I can view my camera streams on any/all of them.

Toshi

Rafael

unread,

Nov 11, 2014, 5:02:59 AM11/11/14

to web...@googlegroups.com

Ok, Toshi, I understand.

Thank you

Петър Манев

unread,

Nov 12, 2014, 8:26:32 AM11/12/14

to web...@googlegroups.com

I think this will work:

<body>

Home Alarm System Interface

</div>

<p> <w> Webcam-1 Webcam-2 </p></w>

</body>

I saw it here: http://tkmaker.blogspot.com/
Best regards.

Jolyn Lai

unread,

Jun 7, 2017, 12:08:33 PM6/7/17

to WebIOPi

hi, i faced the same problem. For the coding below which Toshi mentioned is in javascript? I tried paste the coding and save it in javascript but it can't function.

button = webiopi().createButton("macro", "", Screen_show_hide);

$("content").append(button);

Toshi Bass

unread,

Jun 8, 2017, 6:46:02 AM6/8/17

to WebIOPi

It's important to note the following line......

> Add this button to your others:

So the reply was about adding the code into an existing blocks of code

So the result would look something like the following, note you need to check the code as I am on holiday at the moment and doing this on a iPad from memory so there may be errors but you should get the idea.....

<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");

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

button = webiopi().createButton("macro","",Screen_show_hide);
$("content").append(button);

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

Reply all

Reply to author

Forward