clean up (b8639e79) · Commits · Elphel / freecad_x3d

x3d_web_viewer/help.js

0 → 100644

+100 −0

Original line number	Original line	Diff line number	Diff line
			//Requires:
			// <script src="jquery-2.1.4.min.js"></script>
			// <script src="bootstrap/js/bootstrap.min.js"></script>
			function init_help(element){
			var help_str = "\
			<table>\
			<tr>\
			<td>Display area:<td>\
			</tr>\
			<tr>\
			<td valign='top'>    <b>• left-click:</b></td>\
			<td valign='top'>select/deselect part and its copies</td>\
			</tr>\
			<tr>\
			<td valign='top'>    <b>• left-click + move:</b></td>\
			<td valign='top'>rotate</td>\
			</tr>\
			<tr>\
			<td valign='top'>    <b>• right-click:</b></td>\
			<td valign='top'>hide part and its copies</td>\
			</tr>\
			<tr>\
			<td valign='top'>    <b>• right-click + move:</b></td>\
			<td valign='top'>zoom</td>\
			</tr>\
			<tr>\
			<td valign='top'>    <b>• middle-click + move:</b></td>\
			<td valign='top'>drag</td>\
			</tr>\
			<tr>\
			<td valign='top'>    <b>• dbl-left-click:</b></td>\
			<td valign='top'>hide part and its copies, <span style='color:rgba(255,100,100,1)'><b>interferes with center of rotation</b></span></td>\
			</tr>\
			<tr>\
			<td valign='top'>    <b>• dbl-middle-click:</b></td>\
			<td valign='top'>set center of rotation</td>\
			</tr>\
			<tr>\
			<td>Side buttons (if enabled):</td>\
			</tr>\
			<tr>\
			<td>    <b>• <span style='padding:1px 5px;background:green;border-radius:2px 0px 0px 2px;'>abc</span><span style='padding:1px 5px;background:white;border-radius:0px 2px 2px 0px;color:black;'>▾</span> <b>:</b></td>\
			<td><b>abc</b> = Part Number</td>\
			</tr>\
			<tr>\
			<td>    <b>• <span style='padding:1px 5px;background:green;border-radius:2px 0px 0px 2px;'>abc</span> left-click:</b></td>\
			<td>select / single / hide / delesect</td>\
			</tr>\
			<tr>\
			<td>    <b>• dropdown</b> <span style='padding:1px 5px;background:green;border-radius:2px;'>all</span> <b>:</b></td>\
			<td>hide/show part and its copies</td>\
			</tr>\
			<tr>\
			<td>    <b>• dropdown</b> <span style='padding:1px 5px;background:green;border-radius:2px;'>1</span> <b>:</b></td>\
			<td>hide/show single part or copy</td>\
			</tr>\
			<tr>\
			<td>X3DOM controls help:</td>\
			</tr>\
			<tr>\
			<td>    <b>• <a href='http://www.x3dom.org/documentation/interaction/' style='color:white'><img src='http://www.x3dom.org/wp-content/themes/x3domnew/x3dom_logo.png' style='background:rgba(250,250,250,0.8);height:25px;padding:3px'/> www.x3dom.org</a></td>\
			</tr>\
			<tr>\
			<td>Source code:</td>\
			</tr>\
			<tr>\
			<td>    <b>• <a href='https://github.com/Elphel/freecad_x3d' style='color:white'><img src='http://blog.elphel.com/wp-content/themes/pixelgreen/images/blog-logo.png' style='height:25px;'/> Elphel <img src='https://github.com/fluidicon.png' style='height:25px;'/> github.com</a></td>\
			</tr>\
			</table>\
			";

			var hlp = $("<div>").addClass("btn btn-primary nooutline btn-sm btn-my").html("?");
			hlp.css({
			position:"absolute",
			right: "3px",
			top: "3px",
			background:"rgba(100,100,100,0.7)",
			border: "1px solid gray",
			padding: "0px 6px 0px 6px"
			});

			var hlp_text = $("<div>",{id:"help-text"}).css({
			position:"absolute",
			top:"2px",
			right:"2px",
			"border-radius":"2px",
			border: "1px solid gray",
			color:"white",
			"font-size":"1.2em",
			padding:"10px 10px 10px 10px",
			background:"rgba(50,50,50,0.9)",
			display:"none",
			"z-index":"100"
			});

			hlp_text.html(help_str);
			hlp.click(function(){hlp_text.css({display:""});});
			hlp_text.click(function(){$(this).css({display:"none"});});
			element.append(hlp).append(hlp_text);
			}
			No newline at end of file

x3d_web_viewer/index.html

+2 −8

Original line number	Original line	Diff line number	Diff line
	@@ -7,17 +7,11 @@
	<script src="jquery-2.1.4.min.js"></script>		<script src="jquery-2.1.4.min.js"></script>
	<!--<script type='text/javascript' src='x3dom-1.7.0/x3dom.js'> </script>-->		<!--<script type='text/javascript' src='x3dom-1.7.0/x3dom.js'> </script>-->
	<script src="bootstrap/js/bootstrap.min.js"></script>		<script src="bootstrap/js/bootstrap.min.js"></script>
			<script src="help.js"></script>
	<script src="viewmodel.js"></script>		<script src="viewmodel.js"></script>
	</head>		</head>
	<body>		<body>
	<div id='main'>		<div id='main'>
	<!-- <x3d id='x3d_canvas' width='700px' height='600px' showProgress="true" showStat="true" showLog="true">
	<scene>
	<navigationinfo id="navi" type='"examine" "any"' ></navigationinfo>
	<Viewpoint fieldOfView='0.2'></Viewpoint>
	<inline id='topinline' nameSpaceName="foo" url="models/nc393_07_flat_noassy.x3d" onLoad = "document.getElementById('x3d_canvas').runtime.showAll()"></inline>
	</scene>
	</x3d>-->
	<div id='thrd'>		<div id='thrd'>
	<div class="dropdown">		<div class="dropdown">
	<button class="btn-my dropdown-toggle btn nooutline" data-toggle="dropdown" href="#">View <span class="caret"></span></button>		<button class="btn-my dropdown-toggle btn nooutline" data-toggle="dropdown" href="#">View <span class="caret"></span></button>

x3d_web_viewer/viewmodel.js

+21 −215

Original line number	Original line	Diff line number	Diff line
	@@ -94,29 +94,14 @@ function prerun(){

	var x3d_cnv_trans = $("<Transform id='anima' DEF='ball'>");		var x3d_cnv_trans = $("<Transform id='anima' DEF='ball'>");

	var x3d_cnv_anim = $("\
	<timeSensor DEF='time' cycleInterval='50' loop='true'></timeSensor>\
	<orientationInterpolator DEF='move' key='0 0.5 1' keyValue='0 0 1 0 0 0 1 3.14159 0 0 1 6.28317'></orientationInterpolator>\
	<Route fromNode='time' fromField ='fraction_changed' toNode='move' toField='set_fraction'></Route>\
	<Route fromNode='move' fromField ='value_changed' toNode='ball' toField='set_rotation'></Route>\
	");

	x3d_cnv_trans.append(x3d_cnv_in);		x3d_cnv_trans.append(x3d_cnv_in);

	if (animate){
	x3d_cnv_trans.append(x3d_cnv_anim);
	}

	var scene = $("<Scene>");		var scene = $("<Scene>");
	scene.append(x3d_cnv_trans);		scene.append(x3d_cnv_trans);
	x3d_cnv.append(scene);		x3d_cnv.append(scene);

	if (animate){		if (animate){
	console.log($("#anima").find("timeSensor"));		start_animation();
	//$("#anima").find("timeSensor").attr("loop","true");
	//$("#anima").find("timeSensor").attr("enabled","true");
	//$("timeSensor").prop("loop","true");
	//$("timeSensor").prop("isActive","true");
	}		}

	//load x3dom.js		//load x3dom.js
	@@ -163,13 +148,6 @@ X3DOM Flash version is not available.<br/>\
	};		};
	});		});

	/*
	x3dom.runtime.ready = function() {
	console.log("About to render something the first time");
	console.log("Backend2: "+x3dom.X3DCanvas.backend);
	};
	*/

	var settings = $("<div>").load(settings_file,function(response,status,xhr){		var settings = $("<div>").load(settings_file,function(response,status,xhr){
	if (xhr.status==200){		if (xhr.status==200){
	var xml = $.parseXML(response);		var xml = $.parseXML(response);
	@@ -189,7 +167,6 @@ X3DOM Flash version is not available.<br/>\
	var showall = 1;		var showall = 1;
	var element = document.getElementById('x3d_canvas');		var element = document.getElementById('x3d_canvas');
	$(document).load(function(){		$(document).load(function(){

	element.runtime.enterFrame = function() {		element.runtime.enterFrame = function() {
	if (showall==1) {		if (showall==1) {
	element.runtime.examine();		element.runtime.examine();
	@@ -222,110 +199,8 @@ X3DOM Flash version is not available.<br/>\
	};		};
	});		});

	//help button		//help
	//var hlp = $("<a href='http://www.x3dom.org/documentation/interaction/'>").addClass("btn btn-primary nooutline btn-sm btn-my").html("?");		init_help($("#main"));
	var hlp = $("<div>").addClass("btn btn-primary nooutline btn-sm btn-my").html("?");
	hlp.css({
	position:"absolute",
	right: "3px",
	top: "3px",
	background:"rgba(100,100,100,0.7)",
	border: "1px solid gray",
	padding: "0px 6px 0px 6px"
	});

	var hlp_text = $("<div>",{id:"help-text"}).css({
	position:"absolute",
	top:"2px",
	right:"2px",
	// width:"800px",
	// height:"600px",
	"border-radius":"2px",
	border: "1px solid gray",
	color:"white",
	"font-size":"1.2em",
	padding:"10px 10px 10px 10px",
	background:"rgba(50,50,50,0.9)",
	display:"none"
	});

	hlp_text.html("\
	<table>\
	<tr>\
	<td>Display area:<td>\
	</tr>\
	<tr>\
	<td valign='top'>    <b>• left-click:</b></td>\
	<td valign='top'>select/deselect part and its copies</td>\
	</tr>\
	<tr>\
	<td valign='top'>    <b>• left-click + move:</b></td>\
	<td valign='top'>rotate</td>\
	</tr>\
	<tr>\
	<td valign='top'>    <b>• right-click:</b></td>\
	<td valign='top'>hide part and its copies</td>\
	</tr>\
	<tr>\
	<td valign='top'>    <b>• right-click + move:</b></td>\
	<td valign='top'>zoom</td>\
	</tr>\
	<tr>\
	<td valign='top'>    <b>• middle-click + move:</b></td>\
	<td valign='top'>drag</td>\
	</tr>\
	<tr>\
	<td valign='top'>    <b>• dbl-left-click:</b></td>\
	<td valign='top'>hide part and its copies, <span style='color:rgba(255,100,100,1)'><b>interferes with center of rotation</b></span></td>\
	</tr>\
	<tr>\
	<td valign='top'>    <b>• dbl-middle-click:</b></td>\
	<td valign='top'>set center of rotation</td>\
	</tr>\
	<tr>\
	<td>Side buttons (if enabled):</td>\
	</tr>\
	<tr>\
	<td>    <b>• <span style='padding:1px 5px;background:green;border-radius:2px 0px 0px 2px;'>abc</span><span style='padding:1px 5px;background:white;border-radius:0px 2px 2px 0px;color:black;'>▾</span> <b>:</b></td>\
	<td><b>abc</b> = Part Number</td>\
	</tr>\
	<tr>\
	<td>    <b>• <span style='padding:1px 5px;background:green;border-radius:2px 0px 0px 2px;'>abc</span> left-click:</b></td>\
	<td>select / single / hide / delesect</td>\
	</tr>\
	<tr>\
	<td>    <b>• dropdown</b> <span style='padding:1px 5px;background:green;border-radius:2px;'>all</span> <b>:</b></td>\
	<td>hide/show part and its copies</td>\
	</tr>\
	<tr>\
	<td>    <b>• dropdown</b> <span style='padding:1px 5px;background:green;border-radius:2px;'>1</span> <b>:</b></td>\
	<td>hide/show single part or copy</td>\
	</tr>\
	<tr>\
	<td>X3DOM controls help:</td>\
	</tr>\
	<tr>\
	<td>    <b>• <a href='http://www.x3dom.org/documentation/interaction/' style='color:white'><img src='http://www.x3dom.org/wp-content/themes/x3domnew/x3dom_logo.png' style='background:rgba(250,250,250,0.8);height:25px;padding:3px'/> www.x3dom.org</a></td>\
	</tr>\
	<tr>\
	<td>Source code:</td>\
	</tr>\
	<tr>\
	<td>    <b>• <a href='https://github.com/Elphel/freecad_x3d' style='color:white'><img src='http://blog.elphel.com/wp-content/themes/pixelgreen/images/blog-logo.png' style='height:25px;'/> Elphel <img src='https://github.com/fluidicon.png' style='height:25px;'/> github.com</a></td>\
	</tr>\
	</table>\
	");


	hlp.click(function(){
	hlp_text.css({display:""});
	});

	hlp_text.click(function(){
	$(this).css({display:"none"});
	});

	$("#main").append(hlp).append(hlp_text);

	//info popup		//info popup
	var info = $("<div>",{id:"info"}).css({		var info = $("<div>",{id:"info"}).css({
	@@ -389,15 +264,9 @@ X3DOM Flash version is not available.<br/>\
	}		}

	var index = model.lastIndexOf("/");		var index = model.lastIndexOf("/");
	/*
	if (index<0){
	index = 0;
	}
	*/
	var model_pn = model.substr(index+1);		var model_pn = model.substr(index+1);
	model_pn = model_pn.slice(0,-4);		model_pn = model_pn.slice(0,-4);


	var pn_title = $("<div>",{id:"title"}).css({		var pn_title = $("<div>",{id:"title"}).css({
	position:"absolute",		position:"absolute",
	"border-radius":"2px 2px 2px 2px",		"border-radius":"2px 2px 2px 2px",
	@@ -492,7 +361,6 @@ function place_camera(){
	var x3d_cnv_ni = $("NavigationInfo");		var x3d_cnv_ni = $("NavigationInfo");
	x3d_cnv_ni.prop("speed",Math.round(Math.sqrt(view_distance)/5));		x3d_cnv_ni.prop("speed",Math.round(Math.sqrt(view_distance)/5));
	console.log("speed is "+x3d_cnv_ni.prop("speed"));		console.log("speed is "+x3d_cnv_ni.prop("speed"));

	}		}
	}		}

	@@ -974,60 +842,15 @@ function inertial_rotate(){
	keyValueStr += " "+animation_array[i][1];		keyValueStr += " "+animation_array[i][1];
	}		}

	var x3d_cnv_anim = $("\		var ts = "<timeSensor DEF='time' cycleInterval='"+((animation_duration/1000))+"' loop='false' enabled='true' startTime='"+(getTimeStamp()/1000)+"'></timeSensor>\n";
	<timeSensor DEF='time' cycleInterval='"+((animation_duration/1000))+"' loop='false' enabled='true' startTime='"+(getTimeStamp()/1000)+"'></timeSensor>\		var oi = "<orientationInterpolator DEF='move' key='"+keyStr+"' keyValue='"+keyValueStr+"'></orientationInterpolator>\n";
	<orientationInterpolator DEF='move' key='"+keyStr+"' keyValue='"+keyValueStr+"'></orientationInterpolator>\		var r1 = "<Route fromNode='time' fromField ='fraction_changed' toNode='move' toField='set_fraction'></Route>\n";
	<Route fromNode='time' fromField ='fraction_changed' toNode='move' toField='set_fraction'></Route>\		var r2 = "<Route fromNode='move' fromField ='value_changed' toNode='ball' toField='set_rotation'></Route>\n";
	<Route fromNode='move' fromField ='value_changed' toNode='ball' toField='set_rotation'></Route>\
	");		var x3d_cnv_anim = $(ts+oi+r1+r2);

	$("#anima").append(x3d_cnv_anim);		$("#anima").append(x3d_cnv_anim);
	$("timeSensor").attr("enabled",true);		$("timeSensor").attr("enabled",true);
	/*
	setInterval(function(){
	console.log($("timeSensor").attr("startTime"));
	console.log($("timeSensor").attr("time"));
	},50);
	*/

	//$("#anima").prepend(ats);

	//newTime=getTimeStamp();
	//dt = newTime - lastRotatedTime;
	//lastRotatedTime = newTime;

	//inertial_rot_axis_speed[1] *= Math.exp(-dt/rotationTime);
	//console.log("inertial_rotate, velocity= "+inertial_rot_axis_speed[1]);

	//var ts=getTimeStamp();
	//var dt= (ts - last_timestamp);
	//last_timestamp = ts;

	//console.log("inertial_rotate, velocity= "+inertial_rot_axis_speed[1]);
	//q=x3dom.fields.Quaternion.axisAngle(inertial_rot_axis_speed[0], inertial_rot_axis_speed[1]*dt);
	//console.log("inertial_rotate, q= "+q.toString());
	//rm = new x3dom.fields.SFMatrix4f();
	//rm.setRotate(q);
	//console.log("rm= "+rm.toString());

	//am = document.getElementById('x3d_canvas').runtime.getCurrentTransform(document.getElementById("anima"))

	//am = am.mult(rm);
	//am = rm.mult(am);

	//var translation = new x3dom.fields.SFVec3f(0,0,0);
	//var scaleFactor = new x3dom.fields.SFVec3f(1,1,1);
	//var rotation = new x3dom.fields.Quaternion(0,0,1,0);
	//var scaleOrientation = new x3dom.fields.Quaternion(0,0,1,0);
	//am.getTransform(translation, rotation, scaleFactor, scaleOrientation);
	//aa= rotation.toAxisAngle();

	//document.getElementById("anima").setAttribute("rotation",aa[0].toString()+" "+aa[1])

	//document.getElementById('x3d_canvas').runtime.viewpoint()._viewMatrix = vm; //.mult(rm);
	//document.getElementById("viewpoint").setAttribute("rotation",aa[0].toString()+" "+aa[1])

	//aa[0].toString()
	}		}
	}		}

	@@ -1039,13 +862,11 @@ function stop_animation(){

	function start_animation(){		function start_animation(){
	console.log("restart animation");		console.log("restart animation");
	var x3d_cnv_anim = $("\		var ts = "<timeSensor DEF='time' cycleInterval='50' loop='true'></timeSensor>\n";
	<timeSensor DEF='time' cycleInterval='50' loop='true'></timeSensor>\		var oi = "<orientationInterpolator DEF='move' key='0 0.5 1' keyValue='0 0 1 0 0 0 1 3.14159 0 0 1 6.28317'></orientationInterpolator>\n";
	<orientationInterpolator DEF='move' key='0 0.5 1' keyValue='0 0 1 0 0 0 1 3.14159 0 0 1 6.28317'></orientationInterpolator>\		var r1 = "<Route fromNode='time' fromField ='fraction_changed' toNode='move' toField='set_fraction'></Route>\n";
	<Route fromNode='time' fromField ='fraction_changed' toNode='move' toField='set_fraction'></Route>\		var r2 = "<Route fromNode='move' fromField ='value_changed' toNode='ball' toField='set_rotation'></Route>\n";
	<Route fromNode='move' fromField ='value_changed' toNode='ball' toField='set_rotation'></Route>\		var x3d_cnv_anim = $(ts+oi+r1+r2);
	");

	$("#anima").append(x3d_cnv_anim);		$("#anima").append(x3d_cnv_anim);
	}		}

	@@ -1054,16 +875,6 @@ function getTimeStamp(){
	return d.getTime();		return d.getTime();
	}		}

	function blockclique(){
	blockclick = true;
	//moveTimerSet = false;
	}

	function unblockclique(){
	blockclick = false;
	//moveTimerSet = false;
	}

	function update_info(name,state,cmd){		function update_info(name,state,cmd){
	$("#info").empty().css({display:"none"});		$("#info").empty().css({display:"none"});
	switch(cmd){		switch(cmd){
	@@ -1313,11 +1124,6 @@ function model_run_cmd(name,cmd){
	}		}
	}		}

	function handleClick(event){
	console.log(event.hitPnt);
	console.log($(this));
	}

	function btn_subpart_click(subpart,sublist){		function btn_subpart_click(subpart,sublist){
	var index = subpart.attr("index");		var index = subpart.attr("index");
	var selected = subpart.attr("selected");		var selected = subpart.attr("selected");
	@@ -1402,9 +1208,9 @@ function getColorByNSN(nsn){
	}		}
	tmp_result += nsn_arr[1]*2;		tmp_result += nsn_arr[1]*2;

	var g = 100 + ((tmp_result>>6)&0x7)*20;		var g = 50 + ((tmp_result>>6)&0x7)*30;
	var b = 100 + ((tmp_result>>3)&0x7)*5;		var b = 50 + ((tmp_result>>3)&0x7)*5;
	var r = 100 + ((tmp_result>>0)&0x7)*20;		var r = 50 + ((tmp_result>>0)&0x7)*30;

	return "rgba("+r+","+g+","+b+",1)";		return "rgba("+r+","+g+","+b+",1)";
	}		}

Admin message