How to change HTML page width for yawcam

Post by **bben95** » Tue Feb 23, 2010 1:13 am

the only way I know to do that is using http and just having 4 images on a page with meta tag reload set to 1 second. is that good enough?

Post by **z3r0c00l12** » Tue Feb 23, 2010 1:25 am

I was hoping to actually have each of them stream, I was mostly wondering what in the cam.html page causes it to have spacing on the sides.

I used the template for the javascript "Own_server_example.html" page and changed the fps, in the variables and added an auto-refresh every 30 secs. Since this page was coded by Malun, I was hoping he could help me out, I've managed to edit the template even further, as to remove padding and borders, but this didn't resolve the few pixels on each side of the stream.
I am wondering if this would be possible by having all 4 streams on the same page, but then again, Malun would have to help on this one because I don't know how his script works.

There must be a way to do this though, but the problem lies within the cam.html file...

z3r0c00l12

Laura Boivin · Post by **Laura Boivin** » Tue Feb 23, 2010 4:47 am

If you go into your Stream - Page Designer - & check to see what color is checked for the Border Color.

According to what I'm looking at, you have to choose a border color, so change it to something like Red & then you will see if it is the border that is causing the space.

Then, if that is the case, I think that maybe Malun could tell you how to adjust the code so that you can override the border.

Know what I mean?

buntay · Post by **buntay** » Tue Feb 23, 2010 5:05 am

hey there not sure but would this help
http://www.yawcam.com/forum/viewtopic.php?t=839

It is for my software Jamcam4, and might be an option.

Buntay

Post by **z3r0c00l12** » Wed Feb 24, 2010 10:26 pm

Unfortunately, I am looking to have control over the page i make myself, it gives me the flexibility I want, with the use of JAMCAM, I'd be limited in a very near future to 4 webcams, considering I am using yawcam as a house surveillance system, I consider security as a valuable asset. I am planning to get myself a set of 4 cameras for outdoor, and use these with yawcam, this would mean i would have 8 webcams streaming to one page. Hence the reason I am trying to fit 4 side-by-side, so I can fit all 8 in a security monitor way, like 2 rows of 4 cameras...

buntay · Post by **buntay** » Thu Feb 25, 2010 1:29 am

Jamcam4 version 2 will be released soon. It has the ability to handle 12 cameras divided into 3 zones, inport video from remote sever and save locally. If it is something you may be interested in let me know and I will add you to the list of bata testers. If not I wish you well with what you ARE trying to do.

Post by **z3r0c00l12** » Sat Feb 27, 2010 12:13 am

Yet again, I'd rather have control over my page, I'll wait for some input from Malun, he usually logs in on weekends, so I should hear from him soon.

Thomas Acid · Post by **Thomas Acid** » Sat Feb 27, 2010 4:23 pm

Try this:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Yawcam</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{
background-color:#000000;
}
#container{
width:321px;
height:242px;
border:0px;
overflow:hidden;
position: absolute;
margin-left:-10px;
margin-top:-9px;
}

#container iframe {
width:340px;
height:280px;
margin-left:-11px;
margin-top:-18px;
border:0px;
}

#container1{
width:321px;
height:242px;
border:0px;
overflow:hidden;
position: absolute;
margin-left:310px;
margin-top:-9px;
}

#container1 iframe {
width:340px;
height:280px;
margin-left:-11px;
margin-top:-18px;
border:0px;
}

#container2{
width:321px;
height:242px;
border:0px;
overflow:hidden;
position: absolute;
margin-left:630px;
margin-top:-9px;
}

#container2 iframe {
width:340px;
height:280px;
margin-left:-11px;
margin-top:-18px;
border:0px;
}

#container3{
width:321px;
height:242px;
border:0px;
overflow:hidden;
position: absolute;
margin-left:950px;
margin-top:-9px;
}

#container3 iframe {
width:340px;
height:280px;
margin-left:-11px;
margin-top:-18px;
border:0px;
}

</style>
</head>
<body>
<div id="container">
<iframe src="http://localhost:8081" scrolling="no"></iframe>
</div>

<div id="container1">
<iframe src="http://localhost:8081" scrolling="no"></iframe>
</div>

<div id="container2">
<iframe src="http://localhost:8081" scrolling="no"></iframe>
</div>

<div id="container3">
<iframe src="http://localhost:8081" scrolling="no"></iframe>
</div>
</body>
</html>



Note:
I'm a "just-for-fun" web designer, so this code isn't "smart", but this document was successfully checked as HTML 4.01 Transitional. !http://validator.w3.org/
This code don't use Tables, and work for me in IE8, with default template_js.html.
About "refresh buttom", bben95 suggestion is good

Post by **z3r0c00l12** » Sat Feb 27, 2010 7:33 pm

Wow, thomas, I made this page out of the code you gave me : http://z3r0c00l12.com/yawcam/thomas.html and thomas2.html

I made the thomas2.html to remove the white gaps between the frames without losing your original code.

This fits perfectly on the page, I just added scroll="no" in the <body> to remove the scroll bars and it worked just fine, now, can you explain to me what the code does, so that I can either put my refresh button in, or you can copy the script from the index page.

But wow, this is great thomas,

Thank you,
z3r0c00l12

Thomas Acid · Post by **Thomas Acid** » Sun Feb 28, 2010 11:26 am

z3r0c00l12 wrote:... now, can you explain to me what the code does...

A very basic human-understandable explanation
(If you don't understand me, blame google translator)

In HTML, you can define the elements (images, texts, frames, etc) positions using Tables or CSS.
Tables will divide the screen in small areas and you can create your layout inserting the page elements inside
this areas. The elements positions will be relatives to table where you allocate it.
Using CSS, you define the elements positions specifying "x,y" coordinates. The elements positions will be relative to
entirely screen, where "top=0","left=0" will be the upper-left corner.
Look at code below:
#Container1 define where your first Iframe will be displayed.
#Container1 iframe define what portion of your Template_js.html will be displayed in your iframe.

That's it.

Note: The example below works in IE8 with default (non edited) template_js.html and use
page refresh link in plain text. (This code is the same in previous post. I just add the refresh link.)

<-- Stars code -->

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Yawcam</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{
background-color:#7d7d7d;
}
#container1{
width:321px;
height:300px;
border:0px;
overflow:hidden;
position: absolute;
margin-left:-10px;
margin-top:-9px;
}

#container1 iframe {
width:340px;
height:262px;
margin-left:-11px;
margin-top:-18px;
border:0px;
}

#container2{
width:321px;
height:300px;
border:0px;
overflow:hidden;
position: absolute;
margin-left:310px;
margin-top:-9px;
}

#container2 iframe {
width:340px;
height:262px;
margin-left:-11px;
margin-top:-18px;
border:0px;
}

#container3{
width:321px;
height:300px;
border:0px;
overflow:hidden;
position: absolute;
margin-left:630px;
margin-top:-9px;
}

#container3 iframe {
width:340px;
height:262px;
margin-left:-11px;
margin-top:-18px;
border:0px;
}

#container4{
width:321px;
height:300px;
border:0px;
overflow:hidden;
position: absolute;
margin-left:950px;
margin-top:-9px;
}

#container4 iframe {
width:340px;
height:262px;
margin-left:-11px;
margin-top:-18px;
border:0px;
}

</style>
</head>
<body>
<div id="container1">
<iframe src="http://localhost:8081" scrolling="no" name="cam1"></iframe>
<p align="center"><a href="http://localhost:8081" target="cam1">Refresh cam1</a></p>
</div>

<div id="container2">
<iframe src="http://localhost:8081" scrolling="no" name="cam2"></iframe>
<p align="center"><a href="http://localhost:8081" target="cam2">Refresh cam2</a></p>
</div>

<div id="container3">
<iframe src="http://localhost:8081" scrolling="no" name="cam3"></iframe>
<p align="center"><a href="http://localhost:8081" target="cam3">Refresh cam3</a></p>
</div>

<div id="container4">
<iframe src="http://localhost:8081" scrolling="no" name="cam4"></iframe>
<p align="center"><a href="http://localhost:8081" target="cam4">Refresh cam4</a>
</p>
</div>

</body>
</html>

<-- End code -->

Thomas Acid · Post by **Thomas Acid** » Sun Feb 28, 2010 1:07 pm

If you want to edit and use your own refresh button codes, open thomas2.htmland add this script before </style> tag:

Code: Select all

#refresh {
position:absolute;
width: 100%;
height: 50px;
margin-top: 220px;
}

...and add this code before <table width="1280"> tag:

Code: Select all

<div id="refresh">

...and close the div after </table> tag.

hint:to see what's happen to your page, use IE8 developers tool. http://techie-buzz.com/ie8/ie8-includes ... tools.html
If you already have IE8, just hit F12 and CTRL+B. Move your mouse over your page and you will see the page layout.

Laura Boivin · Post by **Laura Boivin** » Sun Feb 28, 2010 5:11 pm

Thomas, I think you're a genius

Sample of your code

My webcam settings are 640x480, so only a part of the image shows on that webpage; but I did test it with a smaller view & works great on all.

I just thought you might like to see a real view.

Thomas Acid · Post by **Thomas Acid** » Sun Feb 28, 2010 7:06 pm

Laura Boivin wrote:...I think you're a genius...

Definetly, no! I said that it's not a "smart" code. An real web designer can do this with a half-sized code.
Look at my code: I have used the same commands several times, and it's not smart. And the "pixels" values are roughly "aproximated values" (means the "DIVs" are displayed in "cascade", one over others. I think some elements atributes are unnecessary too... But it's work!

My only contribution to this post is the advise about how to define the Template_js.html portion's that's will be displayed inside the IFrame, using negative values to margin-left and margin-top.

Post by **z3r0c00l12** » Sun Feb 28, 2010 7:10 pm

I've tried the code and it works great, I have my refresh button now and all 4 cams are one beside an other. This is exactly what I was looking for.

Thank you.

How to change HTML page width for yawcam

Tables

Magic