draft 1

asset/pois.js

@@ -41,7 +41,7 @@ var poi=Object.create(poiAlpha);
     poi.x = 346;
     poi.y = 332;
     poi.id = "First One";
-    poi.type = 'I'; 
+    poi.type = 'I'; //looking for "asset/I_0.jpg"
     poi.cat = 'FF'
     pois.push(poi);
 
@@ -50,7 +50,7 @@ var poi=Object.create(poiAlpha);
     poi.x= 746;
     poi.y= 432;
     poi.id="Two";
-    poi.type = 'V'; 
+    poi.type = 'V'; //looking for "asset/V_1.mp4"
     poi.cat = 'AS'
     pois.push(poi);
 
@@ -59,7 +59,7 @@ var poi=Object.create(poiAlpha);
     poi.x= 700;
     poi.y= 402;
     poi.id="Two";
-    poi.type = 'T'; 
+    poi.type = 'T'; //looking for "asset/T_2.html"
     poi.cat = 'PR'
     pois.push(poi);
     
@@ -121,3 +121,44 @@ var poi=Object.create(poiAlpha);
     poi.cat = 'FF'
     pois.push(poi);
 
+    //10
+    poi=Object.create(poiAlpha);
+    poi.x = 876;
+    poi.y = 500;
+    poi.id = "10";
+    poi.type = 'V'; 
+    poi.cat = 'AS'
+    pois.push(poi);
+    //11
+    poi=Object.create(poiAlpha);
+    poi.x = 816;
+    poi.y = 600;
+    poi.id = "11";
+    poi.type = 'V'; 
+    poi.cat = 'AS'
+    pois.push(poi);
+    //12
+    poi=Object.create(poiAlpha);
+    poi.x = 912;
+    poi.y = 100;
+    poi.id = "12";
+    poi.type = 'I'; 
+    poi.cat = 'AS'
+    pois.push(poi);
+    //13
+    poi=Object.create(poiAlpha);
+    poi.x = 877;
+    poi.y = 432;
+    poi.id = "13";
+    poi.type = 'V'; 
+    poi.cat = 'AS'
+    pois.push(poi);
+    //14
+    poi=Object.create(poiAlpha);
+    poi.x = 876;
+    poi.y = 500;
+    poi.id = "14";
+    poi.type = 'T'; 
+    poi.cat = 'AS'
+    pois.push(poi);
+

asset/uda.css

@@ -1111,3 +1111,24 @@ object {
 li{
   margin-top: 20px;
 }
+
+.poimio{
+  visibility: hidden;
+  display: none;
+}
+.dialog-window {
+  height: 95%;
+  border: 0px black solid;
+}
+
+.scrollable-content {
+  height: 500px;
+  overflow: auto;
+  background-color: white;
+}
+.mvideo {
+  width: 500px;
+  height: 300px;
+}
+
+

asset/uda_p5.css

@@ -3,7 +3,7 @@
   display: none;
 }
 .dialog-window {
-  height: 300px;
+  height: 95%;
   border: 0px black solid;
 }
 

asset/udatinos.js

@@ -1,5 +1,40 @@
 
 var $jq = jQuery.noConflict();
+
+function addPin(poi,i){
+
+  // var img = $jq('<img id="pin_'+i+'" src="asset/i_'+poi.cat+'_48.png" style="position:absolute;left:'+Math.floor(Math.random() * 1200)+'px;top:'+Math.floor(Math.random() * 700)+'px; display: block;visibility: visible;"/>');
+  var img = $jq('<img id="pin_'+i+'" src="asset/i_'+poi.cat+'_48.png" style="position:absolute;left:'+Math.floor($jq(window).width()/2)+'px;top:'+Math.floor($jq(window).height()/2)+'px; display: block;visibility: visible;"/>'); 
+  img.click(function(){ // handle click
+    var c = $jq("#container_" + poi.type);
+
+    if(poi.type=='T'){ //contenuto testuale
+      $jq.get("contents/"+poi.type+"_"+i+".html", function(html_string)
+         {
+            c.html('<div class="scrollable-content" id="sub_v">' + html_string + '</div>'); 
+         },'html');
+    }else if(poi.type=='V'){//contenuto video 
+      c.html('<source src="contents/'+poi.type+'_'+i+'.mp4" type="video/mp4" />');  
+      c.attr('currentTime',"0");
+      c.trigger('load');
+      c.trigger('play');
+    }else{//è un'immagine
+      c.html('<img src="contents/'+poi.type+'_'+i+'.jpg"/>');  
+    }
+    c.modal();
+  }); 
+//          $jq('body').delay(Math.floor(Math.random() * 1001)).append( img );
+// $jq('body').append('').delay(2000).queue(function (next) {
+    // $jq(this).append(img);
+    // next();
+// });
+  $jq('body').append( img );
+  img.delay(500);
+  img.animate({top: poi.y + 'px'},'fast');
+  img.animate({left:poi.x + 'px'},'fast');
+
+}
+
 $jq( document ).ready(function() {
     console.log( "ready!" );
     var b = $jq("body"); 
@@ -35,31 +70,7 @@ $jq( document ).ready(function() {
 
         var img = null;
         if(this.id == pois[i].cat){
-          //var img = $jq('<img id="pin_'+i+'" src="asset/i_'+pois[i].cat+'_48.png" style="position:absolute;left:'+pois[i].x+'px;top:'+pois[i].y+'px; display: block;visibility: visible;"/>');
-          var img = $jq('<img id="pin_'+i+'" src="asset/i_'+pois[i].cat+'_48.png" style="position:absolute;left:'+Math.floor(Math.random() * 1000)+'px;top:'+Math.floor(Math.random() * 1000)+'px; display: block;visibility: visible;"/>'); 
-          img.click(function(){ // handle click
-            var c = $jq("#container_" + pois[i].type);
-
-            if(pois[i].type=='T'){ //contenuto testuale
-              $jq.get("contents/"+pois[i].type+"_"+i+".html", function(html_string)
-                 {
-                    c.html('<div class="scrollable-content" id="sub_v">' + html_string + '</div>'); 
-                 },'html');
-            }else if(pois[i].type=='V'){//contenuto video 
-              c.html('<source src="contents/'+pois[i].type+'_'+i+'.mp4" type="video/mp4" />');  
-            }else{//è un'immagine
-              c.html('<img src="contents/'+pois[i].type+'_'+i+'.jpg"/>');  
-            }
-            c.modal();
-          }); 
-//          $jq('body').delay(Math.floor(Math.random() * 1001)).append( img );
-          // $jq('body').append('').delay(2000).queue(function (next) {
-              // $jq(this).append(img);
-              // next();
-          // });
-          $jq('body').append( img );
-          img.animate({top: pois[i].y + 'px'});
-          img.animate({left:pois[i].x + 'px'});
+          addPin(pois[i],i);
         }
       }
       //qui ci va un foreach suoi poi 
@@ -77,10 +88,14 @@ $jq( document ).ready(function() {
     $jq( "[id^='container_']" ).on($jq.modal.AFTER_CLOSE, function(event, modal) {
       modal.$elm.html('');
     });
-
+     for (let i=0; i<pois.length; i++) {
+       if($jq('#' + pois[i].cat).is(":checked")) {
+        addPin(pois[i],i);
+       }
+     }
     // $jq('#container_T').on($jq.modal.AFTER_CLOSE, function(event, modal) {
       // modal.$elm.html('');
     // });
-     
 });
 
+

index.html

@@ -2,7 +2,7 @@
 <html lang="it-IT">
 <head>
 	<meta charset="UTF-8">
-<link rel='stylesheet' id='uda-css'  href='asset/uda_p5.css' type='text/css' media='all' />
+<!-- <link rel='stylesheet' id='uda-css'  href='asset/uda_p5.css' type='text/css' media='all' /> -->
     <link rel="stylesheet" href="asset/jquery.modal.css" />
     <link href="asset/skins/line/_all.css" rel="stylesheet">
     <link rel='stylesheet' id='u5datinos-style-css'  href='asset/uda.css' type='text/css' media='all' />
@@ -46,19 +46,19 @@
 	<div id="primary" class="content-area">
   <ul style="list-style-type:none;">
     <li>
-      <input type="checkbox" id="FF">
+      <input type="checkbox" id="FF" checked="false">
       <label>Fauna e flora</label>
     </li>
     <li>
-      <input type="checkbox" id="PR">
+      <input type="checkbox" id="PR" checked="false">
       <label>Scout</label>
     </li>
     <li>
-      <input type="checkbox" id="AS">
+      <input type="checkbox" id="AS" checked="false">
       <label>Categoria 3</label>
     </li>
     <li>
-      <input type="checkbox" id="C4">
+      <input type="checkbox" id="C4" checked="false">
       <label>Categoria 4</label>
     </li>
 
@@ -90,10 +90,8 @@
     </div>
   </div>
 
-  <div id="container_I" class="dialog-window, modal" style="height: initial; max-height: 90%; max-width: 90%; width: initial;">
-    <div class="scrollable-content" id="sub_div">
+  <div id="container_I" class="modal" style="">
       <img src="contents/I_15.jpeg"/> 
-    </div>
   </div>