How to change HTML page width for yawcam

Questions? Suggestions? Need help? Talk about anything related to Yawcam...
z3r0c00l12
Moderator
Posts: 1210
Joined: Wed Jan 14, 2009 3:50 am

How to change HTML page width for yawcam

Post by z3r0c00l12 »

Ok, so the problem I just ran in, I got myself a 3rd webcam, set it up with yawcam, modified my html page to accomodate the third webcam, but ran into a very small problem, actually, not even a problem, I'm just picky on how it looks. Anyways the thing is, by setting 3 IFRAMES side-by-side (33%,34%,33%), the two side frames, the one set to 33% have horizontal scroll bars when viewed on my monitor that's set to 1280x1024 resolution.

Here is an example : Link Removed
New LINK : http://z3r0c00l12.com/yawcam/index.html

This is an example page, so the webcams will all show as offline, but the size is the same, the refresh buttons are for when the stream show offline, I can refresh only the selected camera to come back online, otherwise each camera refreshes automatically every 30 secs.

If you view this page with a resolution of 1280x1024 or smaller, you will see what I mean.

What I wanted to know was how to change the page width so that it fits the stream only, so that all I need is a 320x240 frame for each camera, since I am thinking about purchasing a fourth webcam in the near future, I would like to have this setup so that 4 webcams could fit, all squished together, side by side, since 4x320 is 1280, it should fit perfectly if they are all the exact size.

Can anybody help with this?

thanks,
z3r0c00l12
Last edited by z3r0c00l12 on Mon Feb 22, 2010 6:19 am, edited 1 time in total.
Laura Boivin
Posts: 107
Joined: Mon Jun 01, 2009 1:06 am

Re: How to change HTML page width for yawcam

Post by Laura Boivin »

z3r0c00l12 wrote:Ok, so the problem I just ran in, I got myself a 3rd webcam, set it up with yawcam, modified my html page to accomodate the third webcam, but ran into a very small problem, actually, not even a problem, I'm just picky on how it looks. Anyways the thing is, by setting 3 IFRAMES side-by-side (33%,34%,33%), the two side frames, the one set to 33% have horizontal scroll bars when viewed on my monitor that's set to 1280x1024 resolution.

Here is an example : http://z3r0c00l12.com/yawcam.html

This is an example page, so the webcams will all show as offline, but the size is the same, the refresh buttons are for when the stream show offline, I can refresh only the selected camera to come back online, otherwise each camera refreshes automatically every 30 secs.

If you view this page with a resolution of 1280x1024 or smaller, you will see what I mean.

What I wanted to know was how to change the page width so that it fits the stream only, so that all I need is a 320x240 frame for each camera, since I am thinking about purchasing a fourth webcam in the near future, I would like to have this setup so that 4 webcams could fit, all squished together, side by side, since 4x320 is 1280, it should fit perfectly if they are all the exact size.

Can anybody help with this?

thanks,
z3r0c00l12
try this

<td width="320px"><iframe id="frame1" src="http://z3r0c00l12.com/cam.html" width="320" height="240" style='border:none;' frameborder='0'></iframe></td>
<td width="320px"><iframe id="frame2" src="http://z3r0c00l12.com/cam.html" width="320" height="240" style='border:none;' frameborder='0'></iframe></td>
<td width="320px"><iframe id="frame3" src="http://z3r0c00l12.com/cam.html" width="320" height="240" style='border:none;' frameborder='0'></iframe></td>

that will leave room for your 4th webcam
z3r0c00l12
Moderator
Posts: 1210
Joined: Wed Jan 14, 2009 3:50 am

Post by z3r0c00l12 »

Ok, so I changed the table width to 1280px and set it to center.

Changed the table cells to 320px (I saw you had a typo and fixed it).

Added 4th webcam to the page for testing purposes...

Now, in the actual camera page (the iframe basically), I changed the css styles to set borders and padding to 0px.

Modified the width of thie line from 400px to 320px :
<div align="center"><br /><div align="left" style="width: 320px;" class="text"><p></p></div></div>

I tried removing the <br /> in the line above, trying to get rid of the top padding, but it didn't help.

Tested this in both IE and firefox, seems firefox handles the Iframes differently and giving them a bit less space, which is what I'm looking for, but with 4 Iframes side-by-side and reducing the height from 400px to 240px, I now have horizontal and vertical scroll bars.

It seems like when I use this page in IE, there is an additionnal padding on each side of the stream...

I've looked through the code but can't seem to find where the padding is coming from.

EDIT : I added "Scroll="no"" in the <body> argumet of the iframe, it gives alot more space but still has a problem with padding, some parts of the stream are hidden...

Thank you Laura, hopefully you can help me solve this.
z3r0c00l12
Laura Boivin
Posts: 107
Joined: Mon Jun 01, 2009 1:06 am

Post by Laura Boivin »

I'm going to try something & get back to you
z3r0c00l12
Moderator
Posts: 1210
Joined: Wed Jan 14, 2009 3:50 am

Post by z3r0c00l12 »

Thank you Laura,

And just for your information, which may help a bit, I am currently running the page on IE and will most likely run it on IE in the future aswell, but I'd like for it to be Firefox compatible if possible.

z3r0c00l12
Laura Boivin
Posts: 107
Joined: Mon Jun 01, 2009 1:06 am

Post by Laura Boivin »

z3r0c00l12 wrote:Ok, so I changed the table width to 1280px and set it to center.

Changed the table cells to 320px (I saw you had a typo and fixed it).

Added 4th webcam to the page for testing purposes...

Now, in the actual camera page (the iframe basically), I changed the css styles to set borders and padding to 0px.

Modified the width of thie line from 400px to 320px :
<div align="center"><br /><div align="left" style="width: 320px;" class="text"><p></p></div></div>

I tried removing the <br /> in the line above, trying to get rid of the top padding, but it didn't help.

Tested this in both IE and firefox, seems firefox handles the Iframes differently and giving them a bit less space, which is what I'm looking for, but with 4 Iframes side-by-side and reducing the height from 400px to 240px, I now have horizontal and vertical scroll bars.

It seems like when I use this page in IE, there is an additionnal padding on each side of the stream...

I've looked through the code but can't seem to find where the padding is coming from.

EDIT : I added "Scroll="no"" in the <body> argumet of the iframe, it gives alot more space but still has a problem with padding, some parts of the stream are hidden...

Thank you Laura, hopefully you can help me solve this.
z3r0c00l12

Not sure if this is where the issue is, but if you look at where I change align"left" to "center"


<div align="center"><br /><div align="center" style="width: 320px;" class="text"><p></p></div></div>

Also changed your table to 100%

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%">

that should get rid of the cellpadding...I hope...give it a shot & we'll have another look.

Above your table, you should have the tag <center>
z3r0c00l12
Moderator
Posts: 1210
Joined: Wed Jan 14, 2009 3:50 am

Post by z3r0c00l12 »

I made the modifications you requested, but it doesn't appear to have made any changes.

Maybe I should try setting you up with an ftp account so you can make changes and test them live?

Thanks again Laura,
z3r0c00l12
Laura Boivin
Posts: 107
Joined: Mon Jun 01, 2009 1:06 am

Post by Laura Boivin »

z3r0c00l12 wrote:I made the modifications you requested, but it doesn't appear to have made any changes.

Maybe I should try setting you up with an ftp account so you can make changes and test them live?

Thanks again Laura,
z3r0c00l12
I have an FTP account....if you send me the link to the actually site, I can save it & see if I can fix it....would also need your css file though.

You can PM the info.
z3r0c00l12
Moderator
Posts: 1210
Joined: Wed Jan 14, 2009 3:50 am

Post by z3r0c00l12 »

Hi Laura,

I setup an FTP account for you, PMed you the credentials and info.

so basically, I changed the example page we were using for testing to http://z3r0c00l12.com/yawcam/index.html

When you log in to the FTP, you will be able to all files within this folder, which are used by yawcam to function properly. The Index.html page is the one containing the Iframes. Cam.html is the page displayed in the Iframe, an edited copy of the javascript template page from yawcam. you may edit these files all you want to test, just remember to refresh your browser everytime you make a change.

I'll check now and then to see if anything has changed.

Thank you,
z3r0c00l12
Laura Boivin
Posts: 107
Joined: Mon Jun 01, 2009 1:06 am

Post by Laura Boivin »

I've tried every way that I know how to get it so that here is no space between the cameras & can't do it.
I've left the Index the way I sent it to you.
The settings could also be in your Yawcam settings.
I'll be interested in knowing if Malun can do anything about this.
z3r0c00l12
Moderator
Posts: 1210
Joined: Wed Jan 14, 2009 3:50 am

Post by z3r0c00l12 »

I guess I'll have to wait for some input from Malun or try to make a stream page from scratch, I wanted to replace the menu and set the settings permanently, and set an OnMouseClick to refresh the stream, instead of having a button.

Thanks for your help Laura.
z3r0c00l12
bben95
Moderator
Posts: 39
Joined: Thu Feb 04, 2010 2:40 pm

Post by bben95 »

is this what you want?:
http://benellis.info/example.html
or maybe like this using framesets?:
http://benellis.info/example2.html
z3r0c00l12
Moderator
Posts: 1210
Joined: Wed Jan 14, 2009 3:50 am

Post by z3r0c00l12 »

The frame set looks great, can you set this in a table, set to center with a width of 1280px, remove the adjusting bars in between the framesets? and make the stream borderless.

Here is a clearer picture of what I am looking for, I forgot to post it here, but had PMed it to Laura.

What I am trying to accomplish is fit all 4 webcams side-by-side without any white space between them. The reason for that is that each webcam is 320 pixels wide, all four webcams together equals to one very panoramic view of 1280x240 pixels. My computer screen can handle up to 1280x1024 resolution, meaning that I need to be able to make a page that stream all four webcams with no space between them what so ever, I even have to remove the borders around the stream, but more importantly, the white space padding on the sides of the stream.

This would make it look like that all four webcams are is only 1 wide stream.

I believe, since the IFrames are all in the right shape, that the white space problem is in the cam.html file, but I can't seem to find why the stream requires so much white area around it.

Using the framesets, is it still possible to have a refresh button under each respective stream, like I had before?

thanks,
z3r0c00l12
bben95
Moderator
Posts: 39
Joined: Thu Feb 04, 2010 2:40 pm

Post by bben95 »

I don't really understand what you mean by "set this in a table" but I have managed to remove the bars. And you can have the refresh button underneath each one by editing the page referenced to for each webcam and putting it in there. I have uploaded the edit here:
http://benellis.info/examples/example3.html

What does the script you are using on cam.html actually do though?
Edit: Sorry, I just realised that its the JavaScript stream. DOH!

And would it be easier to just have four of the applets from own_server_example.html in the yawam/stream folder put together like here:
http://benellis.info/examples/own_server_example.html

By the way, I have moved all of the examples into a folder on my website called examples:
http://benellis.info/examples/
Last edited by bben95 on Tue Feb 23, 2010 12:30 am, edited 1 time in total.
z3r0c00l12
Moderator
Posts: 1210
Joined: Wed Jan 14, 2009 3:50 am

Post by z3r0c00l12 »

The script on cam.html is a modified template of the javascript html page found in yawcam, basically, this is the page produced by yawcam, but in order to edit this page and insert my own refresh script in it, I have to host this file as well, if you look through the code, you can see the "baseurl=" this is the variable that says where the stream is. The cam.html file is editable.

I was trying to put the frameset in a table to be able to align it to the center of the page with a width of 1280 pixels.

I modified the cam.html just now to remove the black border around the stream to be able to allow this type of setup. Would you like to be able to access the FTP, so you can test?

I would like the finish page to look like this :
Image
Post Reply