Menu
▾
▴
Re: [Motion-user] Multi Camera Setup On Single Page - Fixed
|
From: Anthony G. <neu...@gm...> - 2012-08-26 18:17:00
|
still doesn't work for me because the images disappear below the
window baseline when the window goes wide. On a more humorous note,
this code below shows the cam image as the page background, with text
that always floats in the middle. OT I know but made me laugh...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>
<meta http-equiv="content-type"
content="text/html;charset=ISO-8859-1"><title>Dead Centre</title>
<style type="text/css" media="screen"><!--
body
{
color: white;
margin: 0px
}
#horizon
{
color: white;
background-color: transparent;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: transparent;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
visibility: visible
}
.bodytext
{
font-size: 32px
}
.headline
{
font-weight: bold;
font-size: 24px
}
#footer
{
font-size: 11px;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 20px;
visibility: visible;
display: block
}
a:link, a:visited
{
color: #06f;
text-decoration: none
}
a:hover
{
color: red;
text-decoration: none
}
--></style>
<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page
takes up full screen height */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to
appear in front of the background image. Must have a higher z-index
value than the background image. Also add some padding to compensate
for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1; padding:10px;}
body,td,th {
color: #FF9;
}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address
this, we use a conditional comment to specify an alternative style
sheet for IE 6 -->
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="page-background"><img src=http://192.168.1.15:8081 border="0"
width="100%" height="100%" alt="cam"></div>
<div id="horizon" id="content" class="bodytext">
whatta you lookin' at?</div>
</body></html>
On 8/26/12, Anthony Griffiths <neu...@gm...> wrote:
> this code works nicely but once again if the window goes wide the
> lower images disappear below the baseline and a scroll bar appears.
> I've been trying to work out how to keep the images in the window
> regardless of width or height but so far no luck.
> correction: I can get all the images to stay in the window but the
> aspect ratio of the images distorts to the window format.
>
> On 8/26/12, Jason Sauders <jas...@gm...> wrote:
>> I made some link changes. They seem to work really well. Adjust your
>> IP/port accordingly and see if this works for you. Keep in mind there's a
>> 32% entry above. If you want to add more cameras (there's 9 examples in
>> there now) then you should be able to span them accordingly.
>>
>> I.E. - if you want 16 cams, that means you're talking a 4x4 grid. If you
>> get the 32% spanning to 24% (that way it's 1/4 of the screen, but there's
>> a
>> slight gap in between each feed), it and add enough lines to equate 16,
>> it
>> should span to a 4x4 grid automagically. It doesn't really fix the fact
>> you'll be scrolling down to see other cams that can't fit on your screen,
>> but if anybody has any idea on how this can be adjusted to work with
>> that,
>> I'd LOVE to hear it.
>>
>>
>>
>> <!DOCTYPE html>
>>
>> <html>
>>
>> <head>
>>
>> <style type="text/css">
>>
>> .container {
>>
>> background: #000000;
>>
>> width:100%;
>>
>> }
>>
>> .motion {
>>
>> border: 0;
>>
>> width: 32%;
>>
>> height: auto;
>>
>> }
>>
>> .clear {
>>
>> clear:both;
>>
>> }
>>
>> </style>
>>
>> </head>
>>
>> <body>
>>
>> <a href="http://192.168.1.15:8081"><img class="motion" src="
>> http://192.168.1.15:8081" /></a>
>>
>> <a href="http://192.168.1.15:8081"><img class="motion" src="
>> http://192.168.1.15:8081" /></a>
>>
>> <a href="http://192.168.1.15:8081"><img class="motion" src="
>> http://192.168.1.15:8081" /></a>
>>
>> <a href="http://192.168.1.15:8081"><img class="motion" src="
>> http://192.168.1.15:8081" /></a>
>>
>> <a href="http://192.168.1.15:8081"><img class="motion" src="
>> http://192.168.1.15:8081" /></a>
>>
>> <a href="http://192.168.1.15:8081"><img class="motion" src="
>> http://192.168.1.15:8081" /></a>
>>
>> <a href="http://192.168.1.15:8081"><img class="motion" src="
>> http://192.168.1.15:8081" /></a>
>>
>> <a href="http://192.168.1.15:8081"><img class="motion" src="
>> http://192.168.1.15:8081" /></a>
>>
>> <a href="http://192.168.1.15:8081"><img class="motion" src="
>> http://192.168.1.15:8081" /></a>
>>
>> </body>
>>
>> </html>
>>
>>
>>
>> Again, I haven't used CSS or HTML in almost a decade, so I'm trying to
>> relearn this on the fly. So far it works moderately well here...
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>> On Sun, Aug 26, 2012 at 12:57 PM, Jason Sauders <jas...@gm...>
>> wrote:
>>
>>> I'm still trying to figure this stuff out... I haven't done any sort of
>>> HTML or CSS in years. Luckily a buddy helped me get started. Right now
>>> I'm
>>> just tinkering with more things until I get something that works.
>>>
>>> Here's where I'm currently at with the CSS route:
>>>
>>>
>>> <!DOCTYPE html>
>>>
>>> <html>
>>>
>>> <head>
>>>
>>> <style type="text/css">
>>>
>>> .container {
>>>
>>> background: #000000;
>>>
>>> width:100%;
>>>
>>> }
>>>
>>> .motion {
>>>
>>> border: 0;
>>>
>>> width: 32%;
>>>
>>> height: auto;
>>>
>>> }
>>>
>>> .clear {
>>>
>>> clear:both;
>>>
>>> }
>>>
>>> </style>
>>>
>>> </head>
>>>
>>> <body>
>>>
>>>
>>> <img class="motion" src="http://192.168.1.15:8081" />
>>>
>>> <img class="motion" src="http://192.168.1.15:8081" />
>>>
>>> <img class="motion" src="http://192.168.1.15:8081" />
>>>
>>> <img class="motion" src="http://192.168.1.15:8081" />
>>>
>>> <img class="motion" src="http://192.168.1.15:8081" />
>>>
>>> <img class="motion" src="http://192.168.1.15:8081" />
>>>
>>> <img class="motion" src="http://192.168.1.15:8081" />
>>>
>>> <img class="motion" src="http://192.168.1.15:8081" />
>>>
>>> <img class="motion" src="http://192.168.1.15:8081" />
>>>
>>> </body>
>>>
>>> </html>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>> On Sun, Aug 26, 2012 at 12:40 PM, Anthony Griffiths
>>> <neu...@gm...>wrote:
>>>
>>>> that code looked good until I went in really narrow on the width and
>>>> then the images began piling on top of one another and a scroll bar
>>>> appeared. Having the images simply reduce in size and keep the format
>>>> the same would be the ideal.
>>>>
>>>> On 8/26/12, Jason Sauders <jas...@gm...> wrote:
>>>> > I've been tinkering around with that all morning, but I'm still
>>>> > trying
>>>> to
>>>> > figure out what the best combo is. In fact right now I'm tinkering
>>>> > with
>>>> > doing it on the CSS side of things to see if there's any sort of
>>>> benefits.
>>>> >
>>>> > I did have some degree of success with this sort of entry in a 3x3 (9
>>>> cam)
>>>> > setup:
>>>> >
>>>> > <html>
>>>> > <body bgcolor="#000000">
>>>> > <center>
>>>> > <a href="http://192.168.1.15:8081"> <img
>>>> > src=http://192.168.1.15:8081border="0" style="height:32%;
>>>> > width:auto"></a>
>>>> > <a href="http://192.168.1.15:8081"> <img
>>>> > src=http://192.168.1.15:8081border="0" style="height:32%;
>>>> > width:auto"></a>
>>>> > <a href="http://192.168.1.15:8081"> <img
>>>> > src=http://192.168.1.15:8081border="0" style="height:32%;
>>>> > width:auto"></a>
>>>> > <br>
>>>> > <a href="http://192.168.1.15:8081"> <img
>>>> > src=http://192.168.1.15:8081border="0" style="height:32%;
>>>> > width:auto"></a>
>>>> > <a href="http://192.168.1.15:8081"> <img
>>>> > src=http://192.168.1.15:8081border="0" style="height:32%;
>>>> > width:auto"></a>
>>>> > <a href="http://192.168.1.15:8081"> <img
>>>> > src=http://192.168.1.15:8081border="0" style="height:32%;
>>>> > width:auto"></a>
>>>> > <br>
>>>> > <a href="http://192.168.1.15:8081"> <img
>>>> > src=http://192.168.1.15:8081border="0" style="height:32%;
>>>> > width:auto"></a>
>>>> > <a href="http://192.168.1.15:8081"> <img
>>>> > src=http://192.168.1.15:8081border="0" style="height:32%;
>>>> > width:auto"></a>
>>>> > <a href="http://192.168.1.15:8081"> <img
>>>> > src=http://192.168.1.15:8081border="0" style="height:32%;
>>>> > width:auto"></a>
>>>> > </body>
>>>> > </html>
>>>> >
>>>> > I'm trying to spin off similar results using CSS so things are a bit
>>>> more
>>>> > "updated" (even though functionally speaking, this presentational
>>>> > HTML
>>>> does
>>>> > fine). Potentially more to come...
>>>> >
>>>> >
>>>> >
>>>> > On Sun, Aug 26, 2012 at 12:21 PM, Anthony Griffiths
>>>> > <neu...@gm...>wrote:
>>>> >
>>>> >> > <html>
>>>> >> >
>>>> >> > <body bgcolor="#000000">
>>>> >> >
>>>> >> > <center>
>>>> >> >
>>>> >> > <a href="http://192.168.1.15:9001"> <img
>>>> >> > src=http://192.168.1.15:9001border="0" width=49%></a>
>>>> >> >
>>>> >> > <a href="http://192.168.1.15:9002"> <img
>>>> >> > src=http://192.168.1.15:9002border="0" width=49%></a>
>>>> >> >
>>>> >> > <br>
>>>> >> >
>>>> >> > <a href="http://192.168.1.15:9003"> <img
>>>> >> > src=http://192.168.1.15:9003border="0" width=49%></a>
>>>> >> >
>>>> >> > <a href="http://192.168.1.15:9004"> <img
>>>> >> > src=http://192.168.1.15:9004border="0" width=49%></a>
>>>> >> >
>>>> >> > </body>
>>>> >> >
>>>> >> > </html>
>>>> >> >
>>>> >> this code is nice in that it auto-sizes the images width-wise on the
>>>> >> screen, but not horizontally. If the page is too wide the images
>>>> >> disappear below the window base line and a scroll bar appears. What
>>>> >> would be good is code that autosizes the images to both window width
>>>> >> and in height and keeps the aspect ration of the images correct too.
>>>> >> I
>>>> >> haven;t been able to work this out. Has anyone?
>>>> >>
>>>> >>
>>>> >>
>>>> ------------------------------------------------------------------------------
>>>> >> Live Security Virtual Conference
>>>> >> Exclusive live event will cover all the ways today's security and
>>>> >> threat landscape has changed and how IT managers can respond.
>>>> Discussions
>>>> >> will include endpoint security, mobile security and the latest in
>>>> malware
>>>> >> threats. http://www.accelacomm.com/jaw/sfrnl04242012/114/50122263/
>>>> >> _______________________________________________
>>>> >> Motion-user mailing list
>>>> >> Mot...@li...
>>>> >> https://lists.sourceforge.net/lists/listinfo/motion-user
>>>> >> http://www.lavrsen.dk/twiki/bin/view/Motion/WebHome
>>>> >>
>>>> >
>>>>
>>>>
>>>> ------------------------------------------------------------------------------
>>>> Live Security Virtual Conference
>>>> Exclusive live event will cover all the ways today's security and
>>>> threat landscape has changed and how IT managers can respond.
>>>> Discussions
>>>> will include endpoint security, mobile security and the latest in
>>>> malware
>>>> threats. http://www.accelacomm.com/jaw/sfrnl04242012/114/50122263/
>>>> _______________________________________________
>>>> Motion-user mailing list
>>>> Mot...@li...
>>>> https://lists.sourceforge.net/lists/listinfo/motion-user
>>>> http://www.lavrsen.dk/twiki/bin/view/Motion/WebHome
>>>>
>>>
>>>
>>
>
|