How to change HTML page width for yawcam
-
- Moderator
- Posts: 1210
- Joined: Wed Jan 14, 2009 3:50 am
How to change HTML page width for yawcam
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
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.
-
- Posts: 107
- Joined: Mon Jun 01, 2009 1:06 am
Re: How to change HTML page width for yawcam
try thisz3r0c00l12 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
<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
-
- Moderator
- Posts: 1210
- Joined: Wed Jan 14, 2009 3:50 am
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
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
-
- Posts: 107
- Joined: Mon Jun 01, 2009 1:06 am
-
- Moderator
- Posts: 1210
- Joined: Wed Jan 14, 2009 3:50 am
-
- Posts: 107
- Joined: Mon Jun 01, 2009 1:06 am
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>
-
- Moderator
- Posts: 1210
- Joined: Wed Jan 14, 2009 3:50 am
-
- Posts: 107
- Joined: Mon Jun 01, 2009 1:06 am
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.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
You can PM the info.
-
- Moderator
- Posts: 1210
- Joined: Wed Jan 14, 2009 3:50 am
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
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
-
- Posts: 107
- Joined: Mon Jun 01, 2009 1:06 am
-
- Moderator
- Posts: 1210
- Joined: Wed Jan 14, 2009 3:50 am
is this what you want?:
http://benellis.info/example.html
or maybe like this using framesets?:
http://benellis.info/example2.html
http://benellis.info/example.html
or maybe like this using framesets?:
http://benellis.info/example2.html
-
- Moderator
- Posts: 1210
- Joined: Wed Jan 14, 2009 3:50 am
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
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
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/
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.
-
- Moderator
- Posts: 1210
- Joined: Wed Jan 14, 2009 3:50 am
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 :
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 :