overlapping

asset/pois.js

@@ -1,26 +1,34 @@
 var poiAlpha = {
-  x: 252,
-  y: 144,
+  pin_width: 100,
   id: "Poi01",
   img: null,
   type: "GENERIC",
   cat: 'FF',
   pin: function(){
   },
-  adapt: function(){
+  isFixed: function(){
+    return (this.cat=='FI'||this.cat=='UD');
   },
-  setIcon: function(filename){
-    //small
-    // this.img=loadImage(filename,
-      // function(img){
-        // img.resize(20,20);
-      // });
-    //big
-    // this._img=loadImage(filename,
-      // function(img){
-        // img.resize(50,50);
-      // });
+  isOverlappedToPoi: function(poi){
+    var rec1 = [poi.x,poi.y,poi.x+this.pin_width,poi.y+this.pin_width];
+    var rec2 = [this.x,this.y,this.x+this.pin_width,this.y+this.pin_width];
+    return this.isOverlapped(rec1);
+  },
+  isOverlapped: function(rec1){
+    var rec2 = [this.x,this.y,this.x+this.pin_width,this.y+this.pin_width];
+  // check if either rectangle is actually a line
+        if (rec1[0] == rec1[2] || rec1[1] == rec1[3] ||
+            rec2[0] == rec2[2] || rec2[1] == rec2[3]) {
+            // the line cannot have positive overlap
+            return false;
+        }
+
+        return !(rec1[2] <= rec2[0] ||   // left
+                 rec1[3] <= rec2[1] ||   // bottom
+                 rec1[0] >= rec2[2] ||   // right
+                 rec1[1] >= rec2[3]);    // top
   }
+
 };
 
 var pois=[];
@@ -30,9 +38,11 @@ var pois=[];
 //  - "T": Testo/html
 //  - "V": Video
 
-//Cat(egoies):
-// - "FF": flora e fauna
-// - 
+//Cat(egories):
+// - "FI": FIume (Position Fixed)
+// - "FL": FLora
+// - "FI": FAuna
+// - "UD": UDatinos (Position Fixed)
 
 
 
@@ -90,60 +100,80 @@ var poi=Object.create(poiAlpha);
 //-----------
     //5
     poi=Object.create(poiAlpha);
+    poi.x = -1;
+    poi.y = -1;
     poi.id = "5";
     poi.type = 'I'; 
     poi.cat = 'FL'
     pois.push(poi);
     //6
     poi=Object.create(poiAlpha);
+    poi.x = -1;
+    poi.y = -1;
     poi.id = "6";
     poi.type = 'I'; 
     poi.cat = 'FL'
     pois.push(poi);
     //7
     poi=Object.create(poiAlpha);
+    poi.x = -1;
+    poi.y = -1;
     poi.id = "7";
     poi.type = 'I'; 
     poi.cat = 'FL'
     pois.push(poi);
     //8
     poi=Object.create(poiAlpha);
+    poi.x = -1;
+    poi.y = -1;
     poi.id = "8";
     poi.type = 'I'; 
     poi.cat = 'FL'
     pois.push(poi);
     //9
     poi=Object.create(poiAlpha);
+    poi.x = -1;
+    poi.y = -1;
     poi.id = "9";
     poi.type = 'I'; 
     poi.cat = 'FL'
     pois.push(poi);
     //10
     poi=Object.create(poiAlpha);
+    poi.x = -1;
+    poi.y = -1;
     poi.id = "10";
     poi.type = 'V'; 
     poi.cat = 'FL'
     pois.push(poi);
     //11
     poi=Object.create(poiAlpha);
+    poi.x = -1;
+    poi.y = -1;
     poi.id = "11";
     poi.type = 'V'; 
     poi.cat = 'FL'
     pois.push(poi);
     //12
     poi=Object.create(poiAlpha);
+    poi.x = -1;
+    poi.y = -1;
     poi.id = "12";
     poi.type = 'I'; 
     poi.cat = 'FL'
     pois.push(poi);
     //13
     poi=Object.create(poiAlpha);
+    poi.x = -1;
+    poi.y = -1;
     poi.id = "13";
     poi.type = 'V'; 
     poi.cat = 'FL'
     pois.push(poi);
     //14
     poi=Object.create(poiAlpha);
+    poi.x = -1;
+    poi.y = -1;
     poi.id = "14";
     poi.type = 'T'; 
     poi.cat = 'FL'
@@ -155,60 +185,80 @@ var poi=Object.create(poiAlpha);
 //-----------
     //15
     poi=Object.create(poiAlpha);
+    poi.x = -1;
+    poi.y = -1;
     poi.id = "5";
     poi.type = 'I'; 
     poi.cat = 'FA'
     pois.push(poi);
     //16
     poi=Object.create(poiAlpha);
+    poi.x = -1;
+    poi.y = -1;
     poi.id = "6";
     poi.type = 'I'; 
     poi.cat = 'FA'
     pois.push(poi);
     //17
     poi=Object.create(poiAlpha);
+    poi.x = -1;
+    poi.y = -1;
     poi.id = "7";
     poi.type = 'I'; 
     poi.cat = 'FA'
     pois.push(poi);
     //18
     poi=Object.create(poiAlpha);
+    poi.x = -1;
+    poi.y = -1;
     poi.id = "8";
     poi.type = 'I'; 
     poi.cat = 'FA'
     pois.push(poi);
     //19
     poi=Object.create(poiAlpha);
+    poi.x = -1;
+    poi.y = -1;
     poi.id = "9";
     poi.type = 'I'; 
     poi.cat = 'FA'
     pois.push(poi);
     //20
     poi=Object.create(poiAlpha);
+    poi.x = -1;
+    poi.y = -1;
     poi.id = "10";
     poi.type = 'V'; 
     poi.cat = 'FA'
     pois.push(poi);
     //21
     poi=Object.create(poiAlpha);
+    poi.x = -1;
+    poi.y = -1;
     poi.id = "11";
     poi.type = 'V'; 
     poi.cat = 'FA'
     pois.push(poi);
     //22
     poi=Object.create(poiAlpha);
+    poi.x = -1;
+    poi.y = -1;
     poi.id = "12";
     poi.type = 'I'; 
     poi.cat = 'FA'
     pois.push(poi);
     //23
     poi=Object.create(poiAlpha);
+    poi.x = -1;
+    poi.y = -1;
     poi.id = "13";
     poi.type = 'V'; 
     poi.cat = 'FA'
     pois.push(poi);
     //24
     poi=Object.create(poiAlpha);
+    poi.x = -1;
+    poi.y = -1;
     poi.id = "14";
     poi.type = 'T'; 
     poi.cat = 'FA'

asset/river.html

@@ -45,9 +45,7 @@
       <!-- <div class="mvideo"> -->
    <video width="640" height="450" controls="controls" poster="image" preload="true" class="modal" id="container_V">
      <!-- <source src="media/file_example_MOV_640_800kB.mov" type="video/mov"/> -->
-     <source src="media/file_example_MP4_640_3MG.mp4" type="video/mp4" />
      <!-- <source src="where the video is" type="video/oog" /> -->
-     Your browser does not support the video tag.
    </video>     
    <!-- </div> -->
     <!-- </div> -->

asset/scsv.html

@@ -2,7 +2,6 @@
   <source src="media/rain.mp4" type="video/mp4">
 </video>
 <div class="myVideoOverlapping, scsv" style="z-index: 501;">
-  <h1>Heading</h1>
   <p>Lorem ipsum...</p>
 </div>
 

asset/udatinos.js

@@ -15,9 +15,15 @@ jQuery.event.trigger = function( event, data, elem, onlyHandlers ) {
 }
 
 function addPin(poi,i){
-  var x=(poi.cat=='FL'||poi.cat=='FA')?Math.floor(Math.random() * 1200):poi.x;
-  var y=(poi.cat=='FL'||poi.cat=='FA')?Math.floor(Math.random() * 700):poi.y;
-  // 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;"/>');
+  if(!poi.isFixed()){
+     do{
+      // poi.x = 346;
+      // poi.y = 332;
+       poi.x=Math.floor(Math.random() * 1200);
+      poi.y=Math.floor(Math.random() * 700);
+    }while(!isFree(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" class="river" 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);
@@ -44,8 +50,8 @@ function addPin(poi,i){
 // });
   $jq('body').append( img );
   img.delay(500);
-  img.animate({top:   y + 'px'},'fast');
-  img.animate({left:  x + 'px'},'fast');
+  img.animate({top:   poi.y + 'px'},'fast');
+  img.animate({left:  poi.x + 'px'},'fast');
 
 }
 
@@ -117,6 +123,20 @@ function toRiver(){
          },'html');
  }
 
+function isFree(poi,j){
+  
+   for (let i=0; i<pois.length; i++) {
+     if(i==j){
+      continue;
+     }
+
+    if(pois[i].isOverlappedToPoi(poi)){
+      return false;
+    }
+   }
+  //[0,0,156,188] check if overlapped with checkboxes rectangle
+  return !poi.isOverlapped([0,0,156,188]);
+}
 
 $jq( document ).ready(function() {
     console.log( "ready!" );