index list

e6ffffd2 · Oleg Dzhimiev · bdc1185e · e6ffffd2 · e6ffffd2 · e6ffffd2
Commit e6ffffd2 authored Jun 08, 2017 by Oleg Dzhimiev
Hide whitespace changes
Inline Side-by-side

Showing with 296 additions and 26 deletions

index.html index.html +10 -2

index.css js/index.css +31 -1

index.js js/index.js +140 -16

list.php list.php +115 -7

No files found.
--- a/index.html
+++ b/index.html
@@ -3,17 +3,25 @@
  <head>
    <meta charset="utf-8"/>
    <title>x3d models index</title>
+    
    <script type='text/javascript' src='js/jquery/jquery-3.1.1.js'></script>
+    <script type='text/javascript' src='js/leaflet/leaflet-src.js'></script>
    <script type='text/javascript' src='js/index.js'></script>
+    
+    <link rel='stylesheet' type='text/css' href='js/leaflet/leaflet.css'></link>
    <link rel='stylesheet' type='text/css' href='js/index.css'></link>
+    
  </head>
  <body>
+  <div id="table_div">
    <table id='model_table'>
        <tr>
-            <th>Model</th>
+            <th></th>
+            <th>Model name</th>
            <th>Versions</th>
-            <th>Comments</th>
        </tr>
    </table>
+  </div>
+  <div id="leaflet_map"></div>
  </body>
 </html>
--- a/js/index.css
+++ b/js/index.css
@@ -4,7 +4,8 @@ table{
 }

 tr, th, td{
-    border: 1px solid rgba(220,220,220,1);
+    border: 0px solid rgba(220,220,220,1);
+    min-width: 80px;
 }

 #model_table td{
@@ -14,4 +15,33 @@ tr, th, td{
 ul {
    margin: 0px;
    -webkit-padding-start: 20px;
+}
+
+body {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    padding: 0;
+    margin: 0;
+}
+
+#leaflet_map{
+    position:absolute;
+    top:0px;
+    left:0px;
+    height: 100vh;
+    width: 100vw;
+}
+
+#table_div{
+    position:absolute;
+    top:2px;
+    left:2px;
+    z-index:1000;
+    background:white;
+    border-radius: 3px;
+    overflow:hidden;
+    padding:2px;
+}
+
+.odd{
+    background:rgba(120,120,220,1);
 }
\ No newline at end of file
--- a/js/index.js
+++ b/js/index.js
+var map;
+var List;
+
+var markers = [];
+
 $(function(){

    //init();
    
+    init_maps();
+    
    $.ajax({
        
        url: "list.php",
        success: function(response){
-            
+
+            List = response;
            parse_list(response);
+            $(".arow")[0].click();
            
        }
        
@@ -17,35 +26,150 @@ $(function(){

 function parse_list(res){
    
+    var index = 0;
+    
    $(res).find("model").each(function(){
-        
-        var row = $("<tr>");
+
+        var row = $("<tr class='arow odd'>");
        var name = $(this).attr("name");
-        
+        var thumb = $(this).attr("thumb");
+
+        if (thumb.length!=""){
+            row.append("<td valign='top'><img alt='n/a' src='models/"+name+"/thumb.jpeg'></img></td>");
+        }else{
+            row.append("<td valign='top' align='center'>&ndash;</td>");
+        }
+
        row.append("<td valign='top'>"+name+"</td>");
-        
+
        var vlist = "";
-        var rlist = "";
-        $(this).find("version").each(function(){
-            
-            var link_url = "test.html?path="+name+"&ver="+$(this).attr("name");
-            var link = "<a href='"+link_url+"'>"+$(this).attr("name")+"</a>";
+        $(this).find("version").each(function(i,v){
            
-            vlist += "<div>"+link+"</div>";
+            var comments = $(this).find("comments").text();
            
-            link_url = "models/"+name+"/"+$(this).attr("name")+"/README.txt";
-            link = "<a href='"+link_url+"'>readme.txt</a>";
+            var link_url = "test.html?path="+name+"&ver="+$(this).attr("name");
+            var link = "<a title='"+comments+"' href='"+link_url+"'>"+$(this).attr("name")+"</a>,&nbsp;";
            
-            rlist += "<div>"+link+"</div>";
+            vlist += link;
+
        });
        
-        row.append("<td valign='top'>"+vlist+"</td>");
-        row.append("<td valign='top'>"+rlist+"</td>");
+        vlist = vlist.slice(0,-7);
+        
+        row.append("<td valign='top'><div>"+vlist+"</div></td>");
+        
+        row.attr("index",index);
+        
+        register_row_events(row);
        
        $("#model_table").append(row);
        
+        //place markers
+        $(this).find("Camera").each(function(){
+            
+            var lat = $(this).find("latitude").text();
+            var lng = $(this).find("longitude").text();
+            
+            if (markers[lat+lng]==undefined){
+
+                var marker = L.marker([lat, lng]).addTo(map);
+                marker.bindPopup(name+": "+vlist,{
+                    direction:"top",
+                });
+            
+                markers[lat+lng] = marker;
+                
+            }else{
+                
+                console.log(markers[lat+lng]);
+                
+                var content = markers[lat+lng]._popup.getContent();
+                markers[lat+lng]._popup.setContent(content+"<br/>"+name+": "+vlist);
+
+            }
+            
+        });
+        
+        
+        index++;
    });
    
+}
+
+function register_row_events(elem){
    
+    $(elem).on("click",function(){
+
+        $(".arow").css({
+            background: "white"
+        });
+        //center map;
+        $(this).css({
+            background: "rgba(100,200,255,0.7)"
+        });
+        
+        var index = $(this).attr("index");
+        var list = $(List).find("model");
+        var item = list[index];
+        
+        var lat = $($(item).find("latitude")[0]).text();
+        var lng = $($(item).find("longitude")[0]).text();
+        
+        map.panTo(new L.LatLng(lat, lng));
+        
+    });
    
 }
+
+// maps
+function init_maps(){
+  
+  // https: also suppported.
+  var Esri_WorldImagery = L.tileLayer(
+    'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', 
+    {
+      maxZoom: 21,
+      attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
+    }
+  );
+
+  var googleSat = L.tileLayer(
+    'https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
+    {
+      maxZoom: 21,
+      attribution: 'Many thanks to Google for our happy childhood',
+      subdomains:['mt0','mt1','mt2','mt3'],
+    }
+  );
+  
+  var OSMTiles = L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png', 
+    {
+      maxZoom: 21,
+      attribution: 'Map data and images &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
+    }
+  );
+  
+  map = L.map('leaflet_map',{
+    layers:[googleSat],
+    zoomControl:false,
+  }).setView([40.7233861, -111.9328843], 13);
+
+  new L.Control.Zoom({ position: 'topright' }).addTo(map);
+  
+  var baseMaps = {
+    "Esri world imagery": Esri_WorldImagery,
+    "Google": googleSat,
+    "Open Street Map": OSMTiles
+  };
+  
+  //Esri_WorldImagery.addTo(map);
+  //googleSat.addTo(map);
+  
+  //custom control:
+  //http://www.coffeegnome.net/control-button-leaflet/
+  
+  L.control.layers(baseMaps).addTo(map);
+  
+}
+
+
--- a/list.php
+++ b/list.php
@@ -2,31 +2,53 @@

 $base = "models";

-$models = selective_scandir($base);
+$THUMBNAME = "thumb.jpeg";
+$READMENAME = "README.txt";

+$models = selective_scandir($base);
 $res = "";

 foreach($models as $model){

    $model_path = "$base/$model";
-    
-    $res .= "<model name='$model'>\n";
-    //$res .= "\t<name>$model</name>\n";
+    $thumb = "$model_path/$THUMBNAME";
    
    $versions = selective_scandir($model_path);
    
+    // create thumb
+    create_thumbnail($model_path,$versions,$thumb);
+    
+    if (!is_file($thumb)){
+        $thumb="";
+    }
+    
+    $res .= "<model name='$model' thumb='$thumb'>\n";
+    
+    // read kml
+    $res .= "\t<map>\n".parse_kml("$base/$model/$model.kml")."\t</map>\n";
+    
    foreach($versions as $version){
        
-        $res .= "\t\t<version name='$version'></version>";
+        $res .= "\t<version name='$version'>\n";
+        
+        $comments = "-";
+        $readme = "$model_path/$version/$READMENAME";
+        if (is_file($readme)){
+            $comments = trim(file_get_contents($readme),"\t\n\r");
+        }
+        
+        $res .= "\t\t<comments>$comments</comments>\n";
+        
+        $res .= "\t</version>\n";

    }

    $res .= "</model>\n";
-
-    return_xml($res);
    
 }

+return_xml($res);
+
 //functions

 function selective_scandir($path){
@@ -56,4 +78,90 @@ function return_xml($str){

 }

+function create_thumbnail($path,$vpaths,$thumbname){
+
+    if (!is_file($thumbname)){
+    
+        if (count($vpaths)>=1){
+        
+            $srcpath = "$path/{$vpaths[0]}";
+            
+            $files = scandir($srcpath);
+            foreach($files as $file){
+            
+                $test = preg_match('/(texture-bgnd-ext)/',$file);
+            
+                if ($test){
+                    $file = "$srcpath/$file";
+                    
+                    if (extension_loaded('imagick')){
+                        
+                        $imagick = new Imagick($file);
+                        
+                        $imagick->trimImage(0);
+                        
+                        $w = $imagick->getImageWidth();
+                        $h = $imagick->getImageHeight();
+                        
+                        $imagick->borderImage('black', 100, 100);
+                        
+                        //$imagick->cropImage($w/2, $h/4, $w/4, $h/4);
+                        
+                        $imagick->thumbnailImage(200, 100, true, true);
+                        
+                        $imagick->writeImage($thumbname);
+                        
+                    }
+                    break;
+                }
+                
+                /*
+                $pinfo = pathinfo("$srcpath/$file");
+                if ($pinfo['extension']=="jpeg"){
+                    $file = "$srcpath/$file";
+                    echo "go-go-go with $file";
+                    break;
+                }
+                */
+            }
+    
+        }
+    
+    }
+    
+    return 0;
+
+}
+
+function parse_kml($file){
+
+    $res = "";
+
+    if (is_file($file)){
+    
+        $xml = simplexml_load_file($file);
+        
+        $recs = $xml->Document->children();
+        
+        foreach($recs as $rec){
+            $res .= "\t".$rec->Camera->asXML()."\n";
+        }
+        
+    }else{
+        $res = <<<TEXT
+<Camera>
+    <longitude>-111.9328843</longitude>
+    <latitude>40.7233861</latitude>
+    <altitude>1305.1</altitude>
+    <heading>0</heading>
+    <tilt>90</tilt>
+    <roll>00</roll>
+</Camera>
+TEXT;
+    }
+
+    return $res;
+    
+}
+
 ?>