My cameras scene

Discussions about Mainlobby running on Apple mobile devices.
rileydog
Expert
Expert
Posts: 667
Joined: Wed Jun 02, 2004 12:25 am
Location: Kalamazoo, Michigan
Contact:

My cameras scene

Postby rileydog » Sun Sep 26, 2010 10:29 pm

I thought I would share my latest cameras scene - what I did was added the ability for the images to automatically refresh every second without reloading the page - so, it is like a steaming camera image. I had to hardcode refreshing all 5 cameras every second - not ideal, if someone can let me know how to only refresh the selected camera, I would appreciate it!

Also, I would LOVE to be able to toggle the pan/tilt buttons to be only visible on my pan/tilt cameras (only camera 4/5 are pan tilt cameras, 1-3 are fixed).

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
<link href="css/styles.css" rel="stylesheet" media="screen" type="text/css" />
<script src="javascript/functions.js" type="text/javascript"></script>
<script src="javascript/iPhone.js" type="text/javascript"></script>
<title>Security-Cameras</title>
<script>
   function StartupMacro() {
      doCommand('MLConditional|IsEqual##{{{{clientname}}_cameras_init}}##0##Macro|' +
              'SetVariableFast|mlipcamera_active_id~1!' +
              'SetVariableFast|{{clientname}}_cameras_init~1##');
      var CamNum = "{{{{clientname}}_cameras_init}}"
      switch(CamNum)
      {
         case '':
            document.getElementById('__camera1').style.visibility='visible';
            document.getElementById('__camera2').style.visibility='hidden';
            document.getElementById('__camera3').style.visibility='hidden';
            document.getElementById('__camera4').style.visibility='hidden';
            document.getElementById('__camera5').style.visibility='hidden';
            break;
         case '1':
            document.getElementById('__camera1').style.visibility='visible';
            document.getElementById('__camera2').style.visibility='hidden';
            document.getElementById('__camera3').style.visibility='hidden';
            document.getElementById('__camera4').style.visibility='hidden';
            document.getElementById('__camera5').style.visibility='hidden';
            break;
         case '2':
            document.getElementById('__camera1').style.visibility='hidden';
            document.getElementById('__camera2').style.visibility='visible';
            document.getElementById('__camera3').style.visibility='hidden';
            document.getElementById('__camera4').style.visibility='hidden';
            document.getElementById('__camera5').style.visibility='hidden';
            break;
         case '3':
            document.getElementById('__camera1').style.visibility='hidden';
            document.getElementById('__camera2').style.visibility='hidden';
            document.getElementById('__camera3').style.visibility='visible';
            document.getElementById('__camera4').style.visibility='hidden';
            document.getElementById('__camera5').style.visibility='hidden';
            break;
         case '4':
            document.getElementById('__camera1').style.visibility='hidden';
            document.getElementById('__camera2').style.visibility='hidden';
            document.getElementById('__camera3').style.visibility='hidden';
            document.getElementById('__camera4').style.visibility='visible';
            document.getElementById('__camera5').style.visibility='hidden';
            break;
         case '5':
            document.getElementById('__camera1').style.visibility='hidden';
            document.getElementById('__camera2').style.visibility='hidden';
            document.getElementById('__camera3').style.visibility='hidden';
            document.getElementById('__camera4').style.visibility='hidden';
            document.getElementById('__camera5').style.visibility='visible';
            break;
      }
   }
   document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

   function timedRefresh(timeoutPeriod) {
      setTimeout("location.reload(true);",timeoutPeriod);
   }

   function reloadImg()  {
      
       uniq = new Date();
      uniq = "?"+uniq.getTime();
      
      var i = 0
      
      for (i=1;i<=5;i++) {
        newImage = document.images['imgToLoad'+i].src;
        index = newImage.indexOf("?", 0);
        if(index > 0){
           newImage = newImage.substr(0, index);
        }
        document.images['imgToLoad'+i].src = newImage+uniq;
      }
   
      setTimeout('reloadImg()', 600);
   }
   
   function Camera(CamNum) {
      doCommand("SetVariableFast|mlipcamera_active_id~" + CamNum);
      doCommand("SetVariableFast|{{clientname}}_cameras_init~" + CamNum);
         
      switch(CamNum)
      {
         case '1':
            document.getElementById('__camera1').style.visibility='visible';
            document.getElementById('__camera2').style.visibility='hidden';
            document.getElementById('__camera3').style.visibility='hidden';
            document.getElementById('__camera4').style.visibility='hidden';
            document.getElementById('__camera5').style.visibility='hidden';
            break;
         case '2':
            document.getElementById('__camera1').style.visibility='hidden';
            document.getElementById('__camera2').style.visibility='visible';
            document.getElementById('__camera3').style.visibility='hidden';
            document.getElementById('__camera4').style.visibility='hidden';
            document.getElementById('__camera5').style.visibility='hidden';
            break;
         case '3':
            document.getElementById('__camera1').style.visibility='hidden';
            document.getElementById('__camera2').style.visibility='hidden';
            document.getElementById('__camera3').style.visibility='visible';
            document.getElementById('__camera4').style.visibility='hidden';
            document.getElementById('__camera5').style.visibility='hidden';
            break;
         case '4':
            document.getElementById('__camera1').style.visibility='hidden';
            document.getElementById('__camera2').style.visibility='hidden';
            document.getElementById('__camera3').style.visibility='hidden';
            document.getElementById('__camera4').style.visibility='visible';
            document.getElementById('__camera5').style.visibility='hidden';
         break;
         case '5':
            document.getElementById('__camera1').style.visibility='hidden';
            document.getElementById('__camera2').style.visibility='hidden';
            document.getElementById('__camera3').style.visibility='hidden';
            document.getElementById('__camera4').style.visibility='hidden';
            document.getElementById('__camera5').style.visibility='visible';
         break;
      }
   }
</script>
</head>

<body onload="reloadImg()">
<div id="topbar" class="black">
   <div id="blueleftbutton"><a href="Index.html">Home</a></div>
   <div id="title">Cameras</div>
</div>

<img id="__camera1" src="{{mlipcamera_image_001}}" name="imgToLoad1" style="visibility:visible;z-index:3;position:absolute;top:-55px;left:-180px;-webkit-transform:scale(0.48);" />
<img id="__camera2" src="{{mlipcamera_image_002}}" name="imgToLoad2" style="visibility:hidden;z-index:3;position:absolute;top:-55px;left:-180px;-webkit-transform:scale(0.48);" />
<img id="__camera3" src="{{mlipcamera_image_003}}" name="imgToLoad3" style="visibility:hidden;z-index:3;position:absolute;top:-55px;left:-180px;-webkit-transform:scale(0.48);" />
<img id="__camera4" src="{{mlipcamera_image_004}}" name="imgToLoad4" style="visibility:hidden;z-index:3;position:absolute;top:-55px;left:-180px;-webkit-transform:scale(0.48);" />
<img id="__camera5" src="{{mlipcamera_image_005}}" name="imgToLoad5" style="visibility:hidden;z-index:3;position:absolute;top:-55px;left:-180px;-webkit-transform:scale(0.48);" />

<div onclick="Camera('1');" style="font:normal 16px/20px Helvetica;color:rgba(255, 255, 255, 1.0);text-align:center;position:absolute;top:340px;left:10px;width:50px;line-height:30px;height:30px;-webkit-border-image:url('images/navbuttonblue.png') 0 5 0 5;border-width:0 5px;-webkit-border-radius:6px;">Door</div>
<div onclick="Camera('2');" style="font:normal 16px/20px Helvetica;color:rgba(255, 255, 255, 1.0);text-align:center;position:absolute;top:340px;left:70px;width:50px;line-height:30px;height:30px;-webkit-border-image:url('images/navbuttonblue.png') 0 5 0 5;border-width:0 5px;-webkit-border-radius:6px;">Back</div>
<div onclick="Camera('3');" style="font:normal 16px/20px Helvetica;color:rgba(255, 255, 255, 1.0);text-align:center;position:absolute;top:340px;left:130px;width:50px;line-height:30px;height:30px;-webkit-border-image:url('images/navbuttonblue.png') 0 5 0 5;border-width:0 5px;-webkit-border-radius:6px;">Drive</div>
<div onclick="Camera('4');" style="font:normal 16px/20px Helvetica;color:rgba(255, 255, 255, 1.0);text-align:center;position:absolute;top:340px;left:190px;width:50px;line-height:30px;height:30px;-webkit-border-image:url('images/navbuttonblue.png') 0 5 0 5;border-width:0 5px;-webkit-border-radius:6px;">Playrm</div>
<div onclick="Camera('5');" style="font:normal 16px/20px Helvetica;color:rgba(255, 255, 255, 1.0);text-align:center;position:absolute;top:340px;left:250px;width:50px;line-height:30px;height:30px;-webkit-border-image:url('images/navbuttonblue.png') 0 5 0 5;border-width:0 5px;-webkit-border-radius:6px;">Entrce</div>

<span id="tabbar" style="visibility:visible;">
   <img src="images/tabbar.png" style="z-index:100;position:absolute;top:412px;left:0px;" />
   <img onclick="doCommand('MLIPCamera|Control~{'+'{mlipcamera_active_id}'+'}~TiltUp','Security-Cameras.html');" src="images/tUpArrow.png" style="z-index:101;position:absolute;top:410px;left:0px;" />
   <span style="z-index:102;position:absolute;top:444px;left:0px;width:80px;height:20px;padding:0px;border:0px;margin:0px;overflow:hidden;text-overflow:clip;text-align:center;font:normal 13px/20px Helvetica;color:rgba(255, 255, 255, 1.0);">Up</span>
   <img onclick="doCommand('MLIPCamera|Control~{'+'{mlipcamera_active_id}'+'}~PanLeft','Security-Cameras.html');" src="images/tLeftArrow.png" style="z-index:101;position:absolute;top:410px;left:80px;" />
   <span style="z-index:102;position:absolute;top:444px;left:80px;width:80px;height:20px;padding:0px;border:0px;margin:0px;overflow:hidden;text-overflow:clip;text-align:center;font:normal 13px/20px Helvetica;color:rgba(255, 255, 255, 1.0);">Left</span>
   <img onclick="doCommand('MLIPCamera|Control~{'+'{mlipcamera_active_id}'+'}~PanRight','Security-Cameras.html');" src="images/tRightArrow.png" style="z-index:101;position:absolute;top:410px;left:160px;" />
   <span style="z-index:102;position:absolute;top:444px;left:160px;width:80px;height:20px;padding:0px;border:0px;margin:0px;overflow:hidden;text-overflow:clip;text-align:center;font:normal 13px/20px Helvetica;color:rgba(255, 255, 255, 1.0);">Right</span>
   <img onclick="doCommand('MLIPCamera|Control~{'+'{mlipcamera_active_id}'+'}~TiltDown','Security-Cameras.html');" src="images/tDownArrow.png" style="z-index:101;position:absolute;top:410px;left:240px;" />
   <span style="z-index:102;position:absolute;top:444px;left:240px;width:80px;height:20px;padding:0px;border:0px;margin:0px;overflow:hidden;text-overflow:clip;text-align:center;font:normal 13px/20px Helvetica;color:rgba(255, 255, 255, 1.0);">Down</span>
</span>

<script language="javascript">
   autoupdate = false;
   pagevars = getvars();
   StartupMacro();
   UpdateVariables();
</script>
</body>
</html>
You do not have the required permissions to view the files attached to this post.

User avatar
CinemarDave
Site Admin
Site Admin
Posts: 10535
Joined: Fri Feb 07, 2003 8:56 am
Location: Planet Earth
Contact:

Re: My cameras scene

Postby CinemarDave » Mon Sep 27, 2010 5:25 pm

Add a document.getElementById('tabbar').style.visibility='hidden'; to the case statements in the 1,2,3 and sections of the Camera routine and a document.getElementById('tabbar').style.visibility='visible'; to the 4 and 5 sections.

rileydog
Expert
Expert
Posts: 667
Joined: Wed Jun 02, 2004 12:25 am
Location: Kalamazoo, Michigan
Contact:

Re: My cameras scene

Postby rileydog » Mon Oct 04, 2010 9:19 pm

Works perfect - thanks again!


Return to “MainLobby on iPhone, iPod Touch”

Who is online

Users browsing this forum: No registered users and 1 guest