WEB Another javascript/jquery questions.. arrays of arrays?

Discussion in 'OT Technology' started by Insert Tokens, Feb 20, 2009.

  1. Insert Tokens

    Insert Tokens Making Cancer My Bitch OT Supporter

    Joined:
    Jan 12, 2006
    Messages:
    8,330
    Likes Received:
    76
    Location:
    Tasmania
    Hai guys..

    I'm making this little online viewer for a bunch of traffic webcams we have at work (to monitor truck queues at our docks).. the cameras are basic webcams on the mobile phone network that upload images every few seconds to our webserver.

    The viewer is pretty basic.. made with jquery, it just pulls the image and refreshes the image source every few seconds.

    There's 3 images for each camera (now, 15mins ago, 30mins ago), that are stored in a javascript array to then be dislpayed in sequence..

    Then, there's multiple cameras (8 all up).. so there's 8 arrays of 3 URLs in each array..

    Example of it as I have it now: http://11ty.net/sen/

    Example of the code, with 2 cameras:


    Code:
    <script type="text/javascript">
    
    var node1cam1 = new Array(3);
        node1cam1[0] = "http://www.orionintegration.com.au/SydneyPorts/Node1Cam1.jpg";
        node1cam1[1] = "http://www.orionintegration.com.au/SydneyPorts/Node1Cam115Mins.jpg";
        node1cam1[2] = "http://www.orionintegration.com.au/SydneyPorts/Node1Cam130Mins.jpg";
    
    var node1cam2 = new Array(3);
        node1cam2[0] = "http://www.orionintegration.com.au/SydneyPorts/Node1Cam2.jpg";
        node1cam2[1] = "http://www.orionintegration.com.au/SydneyPorts/Node1Cam215Mins.jpg";
        node1cam2[2] = "http://www.orionintegration.com.au/SydneyPorts/Node1Cam230Mins.jpg";
    
            
    // Populate the image fields with the image stream URLs..
    function initStreams(){
            $("img.thumb-current").attr("src",node1cam1[0]);
            $("img.thumb-15mins").attr("src",node1cam1[1]);
            $("img.thumb-30mins").attr("src",node1cam1[2]);    
            
            $("#truckcams-viewer img").attr("src",node1cam1[0]);        
     }
    
    function refreshAll(){
        $(".refreshme").attr("src", 
                   function(){
                     var src = $(this).attr("src");
                     var baseSrc = src;
                     if(src.indexOf('?') > 0){
                         baseSrc = src.substring(0, src.indexOf('?'));
                     }
                      return baseSrc +"?"+ Math.random()
                    });
        // Refresh the images every 'x' thousands of a second (eg 5000 = 5 seconds)..
        setTimeout("refreshAll()", 5000);
     }
    
    // When the rest of the document has finished loading, run everything..
    $(document).ready(function() {
        initStreams();
        refreshAll();
        
        // Watch for clicks on the thumbnails..
        $(".truckcams-thumb").click(function(){
            // When they click, send the image to the main viewer..
            var fullsrc = $(this).attr("src");
            $("#truckcams-viewer img").attr("src",fullsrc);
            
            // And the alt-text to the "Currently viewing" box..
            var altSrc = $(this).attr("alt");
            $("#currently-viewing").text(altSrc);
            $(".truckcams-thumb").css('border','3px solid #fff');
            $(this).css('border','3px solid #ffa12d');
        });    
     });
    </script>
    
    The HTML is like so:

    Code:
        <h3>Click a thumb to send it to the viewer</h3>
        <div id="truckcams-thumbs">
            <img class="refreshme truckcams-thumb thumb-current" alt="Current Stream" />
            <img class="refreshme truckcams-thumb thumb-15mins" alt="15 Minutes Ago"/>
            <img class="refreshme truckcams-thumb thumb-30mins" alt="30 Minutes Ago" />
        </div>
    
        <h3>Viewing: <span id="currently-viewing">Current Stream</span></h3>
        <div id="truckcams-viewer"><img class="refreshme" width="550" height="410" /></div>
    
    What I want to do, is to add links to the other cameras through a javascript function.. eg changeCam(node1cam2); and it finds that array of URLs and puts them into the spots using a function similar to my initStreams() function.

    Plz halp! I've gotten this far figuring it out as I go along (never done javascript arrays etc) but i'm well and truly stumped how to add this..
     
  2. intrktevo

    intrktevo New Member

    Joined:
    Oct 18, 2004
    Messages:
    5,781
    Likes Received:
    0
    Location:
    UCF
    way to do it idea..could use some cleaning up

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>TruckCams</title> 
     
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
     
    <script type="text/javascript"> 
     
    // Set the image stream URLs in some variables so we can re-use this script..
    
    var cameras = new Array();
    
    cameras[0] = new Array("http://www.orionintegration.com.au/SydneyPorts/Node1Cam1.jpg",
    						"http://www.orionintegration.com.au/SydneyPorts/Node1Cam115Mins.jpg",
    						"http://www.orionintegration.com.au/SydneyPorts/Node1Cam130Mins.jpg"
    					);
    
    cameras[1] = new Array("http://www.elated.com/res/Image/articles/graphics/photoshop/photoshop-layers-bible/book-cover.jpg",
    						"http://www.elated.com/res/Image/articles/graphics/photoshop/photoshop-layers-bible/book-cover.jpg",
    						"http://www.elated.com/res/Image/articles/graphics/photoshop/photoshop-layers-bible/book-cover.jpg"
    	);
     
     		
    // Populate the image fields with the image stream URLs..
    function initStreams(){		
    	streamLoader(0);
     }
    
    function streamLoader(stream){
    	// Set the thumbnails first..
    	$("img.thumb-current").attr("src",cameras[stream][0]);
    	$("img.thumb-15mins").attr("src",cameras[stream][1]);
    	$("img.thumb-30mins").attr("src",cameras[stream][2]);	
    	
    	// Now set the main viewer window the "Current" stream..
    	$("#truckcams-viewer img").attr("src",cameras[stream][0]);
    }
    
    // Build the function that will regularly refresh any image with the class "refreshme"..
    function refreshAll(){
        $(".refreshme").attr("src", 
                   function(){
                     var src = $(this).attr("src");
                     var baseSrc = src;
                     if(src.indexOf('?') > 0){
                         baseSrc = src.substring(0, src.indexOf('?'));
                     }
                      return baseSrc +"?"+ Math.random()
                    });
    	// Refresh the images every 'x' thousands of a second (eg 5000 = 5 seconds)..
        setTimeout("refreshAll()", 5000);
     }
     
    function changeCam(whichCam){
    	streamLoader(whichCam);
    }
     
     
     
     
    // When the rest of the document has finished loading, run everything..
    $(document).ready(function() {
    	
    	// Run the 2 above functions first to get everything going..
    	initStreams();
        refreshAll();
    	
    	// Watch for clicks on the thumbnails..
    	$(".truckcams-thumb").click(function(){
    		// When they click, send the image to the main viewer..
    		var fullsrc = $(this).attr("src");
    		$("#truckcams-viewer img").attr("src",fullsrc);
    		
    		// And the alt-text to the "Currently viewing" box..
    		var altSrc = $(this).attr("alt");
    		$("#currently-viewing").text(altSrc);
    		$(".truckcams-thumb").css('border','3px solid #fff');
    		$(this).css('border','3px solid #ffa12d');
    	});	
     });
    </script> 
     
    <style type="text/css"> 
    body {
    	font-family: "Gill Sans MT", arial;
    	background-color: #eee;
    }
    h1 {
    	font: 3em Calibri, Arial;
    	background-color: #ddd;
    	padding: 10px;
    	text-align: center;
    	border: 1px solid #ccc;
    }
     
    #truckcams-viewer-wrap {
    	width: 600px;
    	height: auto;
    	background-color: white;
    	border: 1px solid black;
    	margin: 0 auto;
    	padding: 10px
    }
    #truckcams-thumbs {
    	text-align: center;
    	width: auto;
    }
     
    .truckcams-thumb {
    	width: 180px;
    	height: 147px;
    	cursor: hand;
    	background: url(loading.gif) no-repeat 50% 50%;	
    	border: 3px solid #fff;
    }
    #truckcams-viewer {
    	width: 550px;
    	height: 410px;
    	overflow: hidden;
    	border: 1px solid black;
    	margin: 0 auto;
    	background: url(loading.gif) no-repeat 50% 50%;
    }
    .thumb-current {
    	border: 3px solid #ffa12d;
    }
    </style> 
    </head> 
     
    <body> 
     
    <div id="truckcams-viewer-wrap"> 
    	<h1>TruckCams<sup style="color:#fff">BETA</sup></h1> 
    	<h3>Select a camera to view (soon)</h3> 
    	<a href="javascript:changeCam('0');">Camera 1</a> | <a href="javascript:changeCam('1');">Camera 2</a> | 
    	
    	<h3>Click a thumb to send it to the viewer</h3> 
    	<div id="truckcams-thumbs"> 
    		<img class="refreshme truckcams-thumb thumb-current" alt="Current Stream" /> 
    		<img class="refreshme truckcams-thumb thumb-15mins" alt="15 Minutes Ago"/> 
    		<img class="refreshme truckcams-thumb thumb-30mins" alt="30 Minutes Ago" /> 
    	</div> 
     
    	<h3>Viewing: <span id="currently-viewing">Current Stream</span></h3> 
    	<div id="truckcams-viewer"><img class="refreshme" width="550" height="410" /></div> 
    	
    	<p align="center">Copyright 2009 - Sydney Ports Corporation<br /></p> 
    	
    </div> 
     
    </body> 
    </html> 
    
     
    Last edited: Feb 20, 2009
  3. intrktevo

    intrktevo New Member

    Joined:
    Oct 18, 2004
    Messages:
    5,781
    Likes Received:
    0
    Location:
    UCF
    some cleaning up, and uses the your original camera naming scheme

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>TruckCams</title> 
     
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
     
    <script type="text/javascript"> 
     
    // Set the image stream URLs in some variables so we can re-use this script..
    
    var cameras = new Array();
    
    cameras['node1cam1'] = new Array("http://www.orionintegration.com.au/SydneyPorts/Node1Cam1.jpg",
    						"http://www.orionintegration.com.au/SydneyPorts/Node1Cam115Mins.jpg",
    						"http://www.orionintegration.com.au/SydneyPorts/Node1Cam130Mins.jpg"
    					);
    
    cameras['node1cam2'] = new Array("http://www.elated.com/res/Image/articles/graphics/photoshop/photoshop-layers-bible/book-cover.jpg",
    						"http://www.elated.com/res/Image/articles/graphics/photoshop/photoshop-layers-bible/book-cover.jpg",
    						"http://www.elated.com/res/Image/articles/graphics/photoshop/photoshop-layers-bible/book-cover.jpg"
    	);
     
     		
    // Populate the image fields with the image stream URLs..
    function initStreams(){		
    	streamLoader('node1cam1');
     }
    
    function streamLoader(stream){
    	// Set the thumbnails first..
    	$("img.thumb-current").attr("src",cameras[stream][0]);
    	$("img.thumb-15mins").attr("src",cameras[stream][1]);
    	$("img.thumb-30mins").attr("src",cameras[stream][2]);	
    	
    	// Now set the main viewer window the "Current" stream..
    	$("#truckcams-viewer img").attr("src",cameras[stream][0]);
    }
    
    // Build the function that will regularly refresh any image with the class "refreshme"..
    function refreshAll(){
        $(".refreshme").attr("src", 
                   function(){
                     var src = $(this).attr("src");
                     var baseSrc = src;
                     if(src.indexOf('?') > 0){
                         baseSrc = src.substring(0, src.indexOf('?'));
                     }
                      return baseSrc +"?"+ Math.random()
                    });
    	// Refresh the images every 'x' thousands of a second (eg 5000 = 5 seconds)..
        setTimeout("refreshAll()", 5000);
     }
     
    function changeCam(whichCam){
    	streamLoader(whichCam);
    }
     
     
     
     
    // When the rest of the document has finished loading, run everything..
    $(document).ready(function() {
    	
    	// Run the 2 above functions first to get everything going..
    	initStreams();
        refreshAll();
    	
    	// Watch for clicks on the thumbnails..
    	$(".truckcams-thumb").click(function(){
    		// When they click, send the image to the main viewer..
    		var fullsrc = $(this).attr("src");
    		$("#truckcams-viewer img").attr("src",fullsrc);
    		
    		// And the alt-text to the "Currently viewing" box..
    		var altSrc = $(this).attr("alt");
    		$("#currently-viewing").text(altSrc);
    		$(".truckcams-thumb").css('border','3px solid #fff');
    		$(this).css('border','3px solid #ffa12d');
    	});	
     });
    </script> 
     
    <style type="text/css"> 
    body {
    	font-family: "Gill Sans MT", arial;
    	background-color: #eee;
    }
    h1 {
    	font: 3em Calibri, Arial;
    	background-color: #ddd;
    	padding: 10px;
    	text-align: center;
    	border: 1px solid #ccc;
    }
     
    #truckcams-viewer-wrap {
    	width: 600px;
    	height: auto;
    	background-color: white;
    	border: 1px solid black;
    	margin: 0 auto;
    	padding: 10px
    }
    #truckcams-thumbs {
    	text-align: center;
    	width: auto;
    }
     
    .truckcams-thumb {
    	width: 180px;
    	height: 147px;
    	cursor: hand;
    	background: url(loading.gif) no-repeat 50% 50%;	
    	border: 3px solid #fff;
    }
    #truckcams-viewer {
    	width: 550px;
    	height: 410px;
    	overflow: hidden;
    	border: 1px solid black;
    	margin: 0 auto;
    	background: url(loading.gif) no-repeat 50% 50%;
    }
    .thumb-current {
    	border: 3px solid #ffa12d;
    }
    </style> 
    </head> 
     
    <body> 
     
    <div id="truckcams-viewer-wrap"> 
    	<h1>TruckCams<sup style="color:#fff">BETA</sup></h1> 
    	<h3>Select a camera to view (soon)</h3> 
    	<a href="javascript:changeCam('node1cam1');">Camera 1</a> | <a href="javascript:changeCam('node1cam2');">Camera 2</a> | 
    	
    	<h3>Click a thumb to send it to the viewer</h3> 
    	<div id="truckcams-thumbs"> 
    		<img class="refreshme truckcams-thumb thumb-current" alt="Current Stream" /> 
    		<img class="refreshme truckcams-thumb thumb-15mins" alt="15 Minutes Ago"/> 
    		<img class="refreshme truckcams-thumb thumb-30mins" alt="30 Minutes Ago" /> 
    	</div> 
     
    	<h3>Viewing: <span id="currently-viewing">Current Stream</span></h3> 
    	<div id="truckcams-viewer"><img class="refreshme" width="550" height="410" /></div> 
    	
    	<p align="center">Copyright 2009 - Sydney Ports Corporation<br /></p> 
    	
    </div> 
     
    </body> 
    </html> 
    
     
  4. Insert Tokens

    Insert Tokens Making Cancer My Bitch OT Supporter

    Joined:
    Jan 12, 2006
    Messages:
    8,330
    Likes Received:
    76
    Location:
    Tasmania
    :bowdown: Thank you SO much..

    I had no idea you could do that with arrays.. seems so obvious now that I look at it..
     
  5. intrktevo

    intrktevo New Member

    Joined:
    Oct 18, 2004
    Messages:
    5,781
    Likes Received:
    0
    Location:
    UCF
    no prob. their called nested arrays if you want to look into them
     
  6. Insert Tokens

    Insert Tokens Making Cancer My Bitch OT Supporter

    Joined:
    Jan 12, 2006
    Messages:
    8,330
    Likes Received:
    76
    Location:
    Tasmania
    Got it all working now at http://11ty.net/sen/ for testing..

    Just have to add in a better "You are viewing" that shows which camera, and which timeframe.. and it's pretty much done.

    A good learning experiment overall :)
     
  7. intrktevo

    intrktevo New Member

    Joined:
    Oct 18, 2004
    Messages:
    5,781
    Likes Received:
    0
    Location:
    UCF
    might be better usability if you put the cameras in select drop box
     
  8. Insert Tokens

    Insert Tokens Making Cancer My Bitch OT Supporter

    Joined:
    Jan 12, 2006
    Messages:
    8,330
    Likes Received:
    76
    Location:
    Tasmania
    Yeah that's the final goal, saving that layout stuff til last. :)

    Going to have a drop-box that when you select it, loads up a description of the camera's location next to it then loads the images..
     

Share This Page