index list (e6ffffd2) · Commits · Elphel / x3domlet

index.html

+10 −2

Original line number	Original line	Diff line number	Diff line
	@@ -3,17 +3,25 @@
	<head>		<head>
	<meta charset="utf-8"/>		<meta charset="utf-8"/>
	<title>x3d models index</title>		<title>x3d models index</title>

	<script type='text/javascript' src='js/jquery/jquery-3.1.1.js'></script>		<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>		<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>		<link rel='stylesheet' type='text/css' href='js/index.css'></link>

	</head>		</head>
	<body>		<body>
			<div id="table_div">
	<table id='model_table'>		<table id='model_table'>
	<tr>		<tr>
	<th>Model</th>		<th></th>
			<th>Model name</th>
	<th>Versions</th>		<th>Versions</th>
	<th>Comments</th>
	</tr>		</tr>
	</table>		</table>
			</div>
			<div id="leaflet_map"></div>
	</body>		</body>
	</html>		</html>

js/index.css

+31 −1

Original line number	Original line	Diff line number	Diff line
	@@ -4,7 +4,8 @@ table{
	}		}

	tr, th, td{		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{		#model_table td{
	@@ -15,3 +16,32 @@ ul {
	margin: 0px;		margin: 0px;
	-webkit-padding-start: 20px;		-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

js/index.js

+140 −16

Original line number	Original line	Diff line number	Diff line
			var map;
			var List;

			var markers = [];

	$(function(){		$(function(){

	//init();		//init();

			init_maps();

	$.ajax({		$.ajax({

	url: "list.php",		url: "list.php",
	success: function(response){		success: function(response){

			List = response;
	parse_list(response);		parse_list(response);
			$(".arow")[0].click();

	}		}

	@@ -17,35 +26,150 @@ $(function(){

	function parse_list(res){		function parse_list(res){

			var index = 0;

	$(res).find("model").each(function(){		$(res).find("model").each(function(){

	var row = $("<tr>");		var row = $("<tr class='arow odd'>");
	var name = $(this).attr("name");		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'>–</td>");
			}

	row.append("<td valign='top'>"+name+"</td>");		row.append("<td valign='top'>"+name+"</td>");

	var vlist = "";		var vlist = "";
	var rlist = "";		$(this).find("version").each(function(i,v){
	$(this).find("version").each(function(){

	var link_url = "test.html?path="+name+"&ver="+$(this).attr("name");		var comments = $(this).find("comments").text();
	var link = "<a href='"+link_url+"'>"+$(this).attr("name")+"</a>";

	vlist += "<div>"+link+"</div>";		var link_url = "test.html?path="+name+"&ver="+$(this).attr("name");
			var link = "<a title='"+comments+"' href='"+link_url+"'>"+$(this).attr("name")+"</a>, ";

	link_url = "models/"+name+"/"+$(this).attr("name")+"/README.txt";		vlist += link;
	link = "<a href='"+link_url+"'>readme.txt</a>";

	rlist += "<div>"+link+"</div>";
	});		});

	row.append("<td valign='top'>"+vlist+"</td>");		vlist = vlist.slice(0,-7);
	row.append("<td valign='top'>"+rlist+"</td>");
			row.append("<td valign='top'><div>"+vlist+"</div></td>");

			row.attr("index",index);

			register_row_events(row);

	$("#model_table").append(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 © Esri — 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 © <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);

			}

list.php

+115 −7

Original line number	Original line	Diff line number	Diff line
	@@ -2,31 +2,53 @@

	$base = "models";		$base = "models";

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

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

	foreach($models as $model){		foreach($models as $model){

	$model_path = "$base/$model";		$model_path = "$base/$model";
			$thumb = "$model_path/$THUMBNAME";
	$res .= "<model name='$model'>\n";
	//$res .= "\t<name>$model</name>\n";

	$versions = selective_scandir($model_path);		$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){		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 .= "</model>\n";		$res .= "\t\t<comments>$comments</comments>\n";

	return_xml($res);		$res .= "\t</version>\n";

	}		}

			$res .= "</model>\n";

			}

			return_xml($res);

	//functions		//functions

	function selective_scandir($path){		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;

			}

	?>		?>

Admin message