html - Display 8 images using the whole page -
i have webcams, i'm trying display nicely on 1 html page. page wil used on 2 or 3 screens (using rpi or windows client). screens have different resolutions, i'm trying make view responsive display.
i'm trying display this:
currently have code:
<html> <body bgcolor=000000> <script language="javascript" type="text/javascript" > <!-- function changemedia(){ var d = new date(); var t = d.gettime(); document.getelementbyid('cam1').src = "http://10.101.4.2/image.jpg?feed=%7b66ca3fea-7841-4486-b7d2-253ebf08e852%7d&webview&quality=100&noupsample=1/"+t; document.getelementbyid('cam2').src = "http://10.101.4.2/image.jpg?feed=%7beb2548aa-3183-4fb9-bd5a-199887346827%7d&webview&quality=100&noupsample=2/"+t; document.getelementbyid('cam3').src = "http://10.101.4.2/image.jpg?feed=%7b6a3c56ce-f186-4205-9a62-7740207f8bef%7d&webview&quality=100&noupsample=2/"+t; document.getelementbyid('cam4').src = "http://10.101.4.2/image.jpg?feed=%7bab013929-4d26-4cd4-82ba-f13532d4e7ce%7d&webview&quality=100&noupsample=2/"+t; document.getelementbyid('cam5').src = "http://10.101.4.2/image.jpg?feed=%7be9fb6fcc-0748-48a5-a679-dbd875c5a651%7d&webview&quality=100&noupsample=2/"+t; document.getelementbyid('cam6').src = "http://10.101.4.2/image.jpg?feed=%7b0e5c454a-98dc-4c16-95b9-ce3b6097b2e7%7d&webview&quality=100&noupsample=2/"+t; } var reloadcam = setinterval("changemedia()",500); </script> <script type="text/javascript"> function displaytime(){ if (!document.all && !document.getelementbyid) return timeelement=document.getelementbyid? document.getelementbyid("curtime"): document.all.tick2 var currentdate=new date() var hours=currentdate.gethours() var minutes=currentdate.getminutes() var seconds=currentdate.getseconds() if (minutes<=9) minutes="0"+minutes; if (seconds<=9) seconds="0"+seconds; var currenttime=hours+":"+minutes+":"+seconds; timeelement.innerhtml="<font style='font-size:12px;font-weight:bold;'>"+currenttime+"</b>" settimeout("displaytime()",1000) } window.onload=displaytime </script> <center> <img src="" alt="loading..." name="cam" border="0" width=25% id="cam1" /> <img src="" alt="loading..." name="cam" border="0" width=25% id="cam2" /> <img src="" alt="loading..." name="cam" border="0" width=25% id="cam3" /> <img src="" alt="loading..." name="cam" border="0" width=25% id="cam4" /> <img src="" alt="loading..." name="cam" border="0" width=25% id="cam5" /> <img src="" alt="loading..." name="cam" border="0" width=25% id="cam6" /> <img src="" alt="loading..." name="cam" border="0" width=25% id="cam6" /> <br> <span style="color:white" id=curtime></span> </center> </body> </html> which results in this: 
now i'm wondering how can make work 1 pic bigger, , 3 smaller right it, , 4 smaller below. whole width should used. should use tables, still able make responsive when smaller or 4:3 screen used?
extra issue not images same size. thinking of cropping them bit using object-fit.
thanks help.
it's not ideal solution if choose use tables should work:
function changemedia(){ var d = new date(); var t = d.gettime(); document.getelementbyid('cam1').src = "http://10.101.4.2/image.jpg?feed=%7b66ca3fea-7841-4486-b7d2-253ebf08e852%7d&webview&quality=100&noupsample=1/"+t; document.getelementbyid('cam2').src = "http://10.101.4.2/image.jpg?feed=%7beb2548aa-3183-4fb9-bd5a-199887346827%7d&webview&quality=100&noupsample=2/"+t; document.getelementbyid('cam3').src = "http://10.101.4.2/image.jpg?feed=%7b6a3c56ce-f186-4205-9a62-7740207f8bef%7d&webview&quality=100&noupsample=2/"+t; document.getelementbyid('cam4').src = "http://10.101.4.2/image.jpg?feed=%7bab013929-4d26-4cd4-82ba-f13532d4e7ce%7d&webview&quality=100&noupsample=2/"+t; document.getelementbyid('cam5').src = "http://10.101.4.2/image.jpg?feed=%7be9fb6fcc-0748-48a5-a679-dbd875c5a651%7d&webview&quality=100&noupsample=2/"+t; document.getelementbyid('cam6').src = "http://10.101.4.2/image.jpg?feed=%7b0e5c454a-98dc-4c16-95b9-ce3b6097b2e7%7d&webview&quality=100&noupsample=2/"+t; } var reloadcam = setinterval("changemedia()",500); function displaytime(){ if (!document.all && !document.getelementbyid) return timeelement=document.getelementbyid? document.getelementbyid("curtime"): document.all.tick2 var currentdate=new date() var hours=currentdate.gethours() var minutes=currentdate.getminutes() var seconds=currentdate.getseconds() if (minutes<=9) minutes="0"+minutes; if (seconds<=9) seconds="0"+seconds; var currenttime=hours+":"+minutes+":"+seconds; timeelement.innerhtml="<font style='font-size:12px;font-weight:bold;'>"+currenttime+"</b>" settimeout("displaytime()",1000) } window.onload=displaytime;<table border="1"> <tr> <td rowspan="3" colspan="2"> <img src="" alt="loading..." name="cam" border="0" width=25% id="cam1" /> </td> <td> <img src="" alt="loading..." name="cam" border="0" width=25% id="cam2" /> </td> </tr> <tr> <td> <img src="" alt="loading..." name="cam" border="0" width=25% id="cam3" /> </td> </tr> <tr> <td> <img src="" alt="loading..." name="cam" border="0" width=25% id="cam4" /> </td> </tr> <tr> <td> <img src="" alt="loading..." name="cam" border="0" width=25% id="cam5" /> </td> <td> <img src="" alt="loading..." name="cam" border="0" width=25% id="cam6" /> </td> <td> <img src="" alt="loading..." name="cam" border="0" width=25% id="cam6" /> </td> </tr> </table> <br> <span style="color:white" id=curtime></span>
Comments
Post a Comment