New applications

Former-commit-id: 270928eb4e906e8fd1049cb0a3573de880f45782

public_HTTPS/uploads/apps/bounce/bounce.js

+// SAGE2 is available for use under the following license, commonly known
+//          as the 3-clause (or "modified") BSD license:
+//
+// Copyright (c) 2014, Electronic Visualization Laboratory,
+//                     University of Illinois at Chicago
+// All rights reserved.
+//
+// http://opensource.org/licenses/BSD-3-Clause
+// See included LICENSE.txt file
+
+var bounce = SAGE2_App.extend( {
+    construct: function() {
+		this.ctx     = null;
+		this.ballImg = null;
+		this.vel     = null;
+		this.pos     = null;
+		this.dir     = null;
+		this.frame   = null;
+		this.resizeEvents = "continuous";
+	},
+
+	init: function(id, width, height, resrc, date) {
+		// call super-class 'init'
+		arguments.callee.superClass.init.call(this, id, "canvas", width, height, resrc, date);
+
+		this.ctx = this.element.getContext("2d");
+		this.minDim = Math.min(this.element.width, this.element.height);
+
+		this.ballImg = new Image();
+		this.ballImg.src = this.resrcPath + "images/evllogo.png";
+		this.vel = 1;
+		this.pos = [0.5, 0.5];
+		this.dir = [0.7071, 0.7071];		
+		this.frame = 0;
+		this.timer = 0.0;
+		this.redraw = true;
+		this.minDim = Math.min(this.element.width, this.element.height);
+	},
+
+	load: function(state, date) {
+		
+	},
+
+	draw: function(date) {
+		// call super-class 'preDraw'
+		arguments.callee.superClass.preDraw.call(this, date);
+
+		this.timer = this.timer + this.dt;
+		if(this.timer >= 0.033333333) {
+			this.timer = 0.0;
+			this.redraw = true;
+		}
+		
+		if(this.redraw) {		
+			// clear canvas		
+			this.ctx.clearRect(0,0, this.element.width, this.element.height);
+			
+			this.ctx.fillStyle = "rgba(0, 0, 0, 1.0)"
+			this.ctx.fillRect(0,0, this.element.width, this.element.height)
+			
+			var wScale = 1.0;
+			var hScale = 1.0;
+			if(this.element.width < this.element.height) hScale = this.element.height / this.element.width;
+			if(this.element.height < this.element.width) wScale = this.element.width / this.element.height;
+			
+			if(this.pos[0]<0 && this.dir[0]<0) this.dir[0] = -this.dir[0];
+			if(this.pos[0]>1.0*wScale && this.dir[0]>0) this.dir[0] = -this.dir[0];
+			if(this.pos[1]<0 && this.dir[1]<0) this.dir[1] = -this.dir[1];
+			if(this.pos[1]>1.0*hScale && this.dir[1]>0) this.dir[1] = -this.dir[1];
+			
+			this.pos[0] += this.dir[0]*this.vel*this.dt;
+			this.pos[1] += this.dir[1]*this.vel*this.dt;
+			var size = 0.2*this.minDim;
+			var x = this.pos[0]*this.minDim - (size/2);
+			var y = this.pos[1]*this.minDim - (size/2);
+			this.ctx.drawImage(this.ballImg, x, y, size, size);
+			
+			this.frame++;
+			this.redraw = false;
+		}
+
+		// call super-class 'postDraw'
+		arguments.callee.superClass.postDraw.call(this, date);
+	},
+
+	resize: function(date) {
+		this.minDim = Math.min(this.element.width, this.element.height);
+		this.redraw = true;
+		
+		this.draw(date);
+	},
+	
+	event: function(eventType, userId, x, y, data, date) {
+		
+	}
+});

public_HTTPS/uploads/apps/bounce/instructions.json

+{
+	"main_script": "bounce.js",
+	"width": 400,
+	"height": 300,
+	"animation": true,
+	"resources": [
+	]
+}

public_HTTPS/uploads/apps/d3_sample/d3_sample.js

+// SAGE2 is available for use under the following license, commonly known
+//          as the 3-clause (or "modified") BSD license:
+//
+// Copyright (c) 2014, Electronic Visualization Laboratory,
+//                     University of Illinois at Chicago
+// All rights reserved.
+//
+// http://opensource.org/licenses/BSD-3-Clause
+// See included LICENSE.txt file
+
+
+function addCSS( url, callback ) {
+    var fileref = document.createElement("link")
+	if( callback ) fileref.onload = callback;
+    fileref.setAttribute("rel", "stylesheet")
+    fileref.setAttribute("type", "text/css")
+    fileref.setAttribute("href", url)
+	document.head.appendChild( fileref );
+}
+
+
+var d3_sample = SAGE2_App.extend( {
+	construct: function() {
+		this.resizeEvents = "continuous"; //"onfinish";
+
+		this.vertices = null;
+		this.voronoi  = null;
+		this.svg      = null;
+		this.path     = null;
+	},
+
+
+	init: function(id, width, height, resrc, date) {
+		// call super-class 'init'
+		arguments.callee.superClass.init.call(this, id, "div", width, height, resrc, date);
+
+		// Get width height from the supporting div		
+		var width  = this.element.clientWidth;
+		var height = this.element.clientHeight;
+
+		this.element.id = "div" + id;
+
+		// Load the CSS file
+		addCSS(this.resrcPath + "scripts/style.css", null);
+
+		// from voronoi example
+		this.vertices = d3.range(100).map(function(d) {
+		  return [Math.random() * width, Math.random() * height];
+		});
+		this.voronoi = d3.geom.voronoi().clipExtent([[0, 0], [width, height]]);
+
+		// backup of the context
+		var self = this;
+		// attach the SVG into the this.element node provided to us
+		var box="0,0,"+width+","+height;
+		this.svg = d3.select(this.element).append("svg")
+		    .attr("width",   width)
+		    .attr("height",  height)
+		    .attr("viewBox", box);
+		  	//.on("mousemove", function() { self.vertices[0] = d3.mouse(this); self.draw_d3(); });
+
+		this.path = this.svg.append("g").selectAll("path");
+
+		this.svg.selectAll("circle")
+		    .data(this.vertices.slice(1))
+		  	.enter().append("circle")
+		    .attr("transform", function(d) { return "translate(" + d + ")"; })
+		    .attr("r", 1.5);
+
+		this.draw_d3(date);
+	},
+
+	load: function(state, date) {
+		
+	},
+
+	draw_d3: function(date) {
+		var p = this.path.data(this.voronoi(this.vertices), polygon);
+
+		p.exit().remove();
+
+		p.enter().append("path")
+			.attr("class", function(d, i) { return "q" + (i % 9) + "-9"; })
+			.attr("d", polygon);
+
+		p.order();
+	},
+	
+	draw: function(date) {
+		// call super-class 'preDraw'
+		arguments.callee.superClass.preDraw.call(this, date);
+
+
+		// call super-class 'postDraw'
+		arguments.callee.superClass.postDraw.call(this, date);
+	},
+
+
+	resize: function(date) {
+		this.svg.attr('width' , this.element.clientWidth  +"px");
+		this.svg.attr('height' , this.element.clientHeight  +"px");
+		this.draw(date);
+	},
+	
+	event: function(eventType, userId, x, y, data, date) {
+		if (eventType === "pointerPress" && (data.button === "left") ) {
+		}
+		if (eventType === "pointerMove" ) {
+			// seems slow
+			//this.vertices[0] = [x,y];
+			//this.draw_d3();
+		}
+		if (eventType === "pointerRelease" && (data.button === "left") ) {
+		}		
+	}
+
+});
+
+
+function polygon(d) {
+  return "M" + d.join("L") + "Z";
+}

public_HTTPS/uploads/apps/d3_sample/instructions.json

+{
+	"main_script": "d3_sample.js",
+	"width": 800,
+	"height": 600,
+	"resources": [
+		"scripts/d3.v3.min.js"
+	]
+}

public_HTTPS/uploads/apps/d3_sample/scripts/style.css

+
+path {
+  stroke: #fff;
+}
+
+path:first-child {
+  fill: yellow !important;
+}
+
+circle {
+  fill: #000;
+  pointer-events: none;
+}
+
+.q0-9 { fill: rgb(197,27,125); }
+.q1-9 { fill: rgb(222,119,174); }
+.q2-9 { fill: rgb(241,182,218); }
+.q3-9 { fill: rgb(253,224,239); }
+.q4-9 { fill: rgb(247,247,247); }
+.q5-9 { fill: rgb(230,245,208); }
+.q6-9 { fill: rgb(184,225,134); }
+.q7-9 { fill: rgb(127,188,65); }
+.q8-9 { fill: rgb(77,146,33); }

public_HTTPS/uploads/apps/googlemaps/googlemaps.js

+// SAGE2 is available for use under the following license, commonly known
+//          as the 3-clause (or "modified") BSD license:
+//
+// Copyright (c) 2014, Electronic Visualization Laboratory,
+//                     University of Illinois at Chicago
+// All rights reserved.
+//
+// http://opensource.org/licenses/BSD-3-Clause
+// See included LICENSE.txt file
+
+
+function addScript( url, callback ) {
+	var script = document.createElement( 'script' );
+	if( callback ) script.onload = callback;
+	script.type = 'text/javascript';
+	script.src = url;
+	document.body.appendChild( script );  
+}
+
+
+var googlemaps = SAGE2_App.extend( {
+	construct: function() {
+		this.resizeEvents = "continuous"; // "onfinish";
+
+		this.map      = null;
+		this.mapType  = null;
+		this.lastZoom = null;
+		this.dragging = null;
+		this.position = null;
+		this.APIKEY   = null;  // google maps developer API key
+	},
+
+	init: function(id, width, height, resrc, date) {
+		// call super-class 'init'
+		arguments.callee.superClass.init.call(this, id, "div", width, height, resrc, date);
+
+		// application specific 'init'
+		this.element.id = "div" + id;
+
+		this.lastZoom = date;
+		this.dragging = false;
+		this.position = {x:0,y:0};
+
+		// need a global handler for the callback (i.e. scope pollution)
+		googlemaps_self = this;
+		this.APIKEY = "XXXXXX PUT your API KEY XXXXX";
+		// load google maps
+		addScript('https://maps.googleapis.com/maps/api/js?key=' + this.APIKEY + '&sensor=false&libraries=weather&callback=googlemaps_self.initialize');
+	},
+
+
+	initialize: function() {
+		this.mapType = google.maps.MapTypeId.HYBRID;
+
+		// Enable the visual refresh
+		google.maps.visualRefresh = true;
+
+		var chicago = new google.maps.LatLng(41.850033, -87.6500523);
+		var styles = [
+		{
+			stylers: [
+			{ hue: "#00ffe6" },
+			{ saturation: -20 }
+			]
+		},{
+			featureType: "road",
+			elementType: "geometry",
+			stylers: [
+			{ lightness: 100 },
+			{ visibility: "simplified" }
+			]
+		},{
+			featureType: "road",
+			elementType: "labels",
+			stylers: [
+			{ visibility: "off" }
+			]
+		}
+		];
+		var mapOptions = {
+			center: chicago,
+			zoom: 8,
+			mapTypeId: this.mapType,
+			disableDefaultUI: true,
+				zoomControl: false,
+				scaleControl: false,
+				scrollwheel: false
+		};
+		this.map = new google.maps.Map(this.element, mapOptions);
+		this.map.setTilt(45);
+		this.map.setOptions({styles: styles});
+
+		//
+		// StreetView API test
+		//
+		 //var fenway = new google.maps.LatLng(42.345573,-71.098326);
+		 //var panoramaOptions = {
+		   //position: fenway,
+		   //pov: {
+		     //heading: 34,
+		     //pitch: 10
+		   //}
+		 //};
+		 //var panorama = new  google.maps.StreetViewPanorama(this.element, panoramaOptions);
+		 //this.map.setStreetView(panorama);
+
+		//
+		// Extra layers
+		//
+		this.trafficLayer = new google.maps.TrafficLayer();
+		this.weatherLayer = new google.maps.weather.WeatherLayer({
+			temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
+		});
+
+	},
+
+	load: function(state, date) {
+
+	},
+
+	draw: function(date) {
+		// call super-class 'preDraw'
+		arguments.callee.superClass.preDraw.call(this, date);
+
+		// Custom draw code
+
+		// call super-class 'postDraw'
+		arguments.callee.superClass.postDraw.call(this, date);
+	},
+
+	resize: function(date) {
+		google.maps.event.trigger(this.map, 'resize');
+		this.draw(date);
+	},
+
+	event: function(eventType, user_id, itemX, itemY, data, date) {
+		//console.log("div event", eventType, user_id, itemX, itemY, data, date);
+
+		if (eventType === "pointerPress" && (data.button === "left") ) {
+			this.dragging = true;
+			this.position.x = itemX;
+			this.position.y = itemY;
+		}
+		if (eventType === "pointerMove" && this.dragging ) {
+			this.map.panBy(this.position.x-itemX, this.position.y-itemY);
+			this.position.x = itemX;
+			this.position.y = itemY;
+		}
+		if (eventType === "pointerRelease" && (data.button === "left") ) {
+			this.dragging = false;
+			this.position.x = itemX;
+			this.position.y = itemY;
+		}
+
+		// Scroll events for zoom
+		if (eventType === "pointerScroll") {
+			var amount = data.wheelDelta;
+			var diff = date - this.lastZoom;
+			if (amount >= 3 && (diff>300)) {
+				// zoom in
+				var z = this.map.getZoom();
+				this.map.setZoom(z+1);
+				this.lastZoom = date;
+			}
+			else if (amount <= -3 && (diff>300)) {
+				// zoom out
+				var z = this.map.getZoom();
+				this.map.setZoom(z-1);
+				this.lastZoom = date;
+			}
+		}
+
+		if (eventType == "keyboard" && data.code == 109 && data.state == "down") {
+			// m key down
+			// change map type
+			if (this.mapType == google.maps.MapTypeId.TERRAIN)
+				this.mapType = google.maps.MapTypeId.ROADMAP;
+			else if (this.mapType == google.maps.MapTypeId.ROADMAP)
+				this.mapType = google.maps.MapTypeId.SATELLITE;
+			else if (this.mapType == google.maps.MapTypeId.SATELLITE)
+				this.mapType = google.maps.MapTypeId.HYBRID;
+			else if (this.mapType == google.maps.MapTypeId.HYBRID)
+				this.mapType = google.maps.MapTypeId.TERRAIN;
+			else 
+				this.mapType = google.maps.MapTypeId.HYBRID;
+			this.map.setMapTypeId(this.mapType);
+		}
+		if (eventType == "keyboard" && data.code == 116 && data.state == "down") {
+			// t key down
+			// add/remove traffic layer
+			if (this.trafficLayer.getMap() == null) {
+				console.log("Setting traffic");
+				this.trafficLayer.setMap(this.map);
+			}
+			else {
+				console.log("Removing traffic");
+				this.trafficLayer.setMap(null);
+			}
+		}
+		if (eventType == "keyboard" && data.code == 119 && data.state == "down") {
+			// w key down
+			// add/remove weather layer
+			if (this.weatherLayer.getMap() == null)
+				this.weatherLayer.setMap(this.map);
+			else
+				this.weatherLayer.setMap(null);
+		}
+
+		else if (eventType == "specialKey" && data.code == 16 && data.state == "down") {
+			// shift down
+			// zoom in
+			var z = this.map.getZoom();
+			this.map.setZoom(z+1);
+		}
+		else if (eventType == "specialKey" && data.code == 17 && data.state == "down") {
+			// control down
+			// zoom out
+			var z = this.map.getZoom();
+			this.map.setZoom(z-1);
+		}
+		else if (eventType == "specialKey" && data.code == 37 && data.state == "down") {
+			// left
+			this.map.panBy(-100,0);
+		}
+		else if (eventType == "specialKey" && data.code == 38 && data.state == "down") {
+			// up
+			this.map.panBy(0,-100);
+		}
+		else if (eventType == "specialKey" && data.code == 39 && data.state == "down") {
+			// right
+			this.map.panBy(100,0);
+		}
+		else if (eventType == "specialKey" && data.code == 40 && data.state == "down") {
+			// down
+			this.map.panBy(0,100);
+		}
+		this.draw(date);
+	}
+
+});

public_HTTPS/uploads/apps/googlemaps/instructions.json

+{
+	"main_script": "googlemaps.js",
+	"width": 1400,
+	"height": 400,
+	"resources": [
+	]
+}

public_HTTPS/uploads/apps/kinetic_animation/instructions.json

+{
+	"main_script": "kinetic_animation.js",
+	"width": 500,
+	"height": 300,
+	"animation": true,
+	"resources": [
+		"scripts/kinetic-v5.1.0.min.js"
+	]
+}

public_HTTPS/uploads/apps/kinetic_animation/kinetic_animation.js

+// SAGE2 is available for use under the following license, commonly known
+//          as the 3-clause (or "modified") BSD license:
+//
+// Copyright (c) 2014, Electronic Visualization Laboratory,
+//                     University of Illinois at Chicago
+// All rights reserved.
+//
+// http://opensource.org/licenses/BSD-3-Clause
+// See included LICENSE.txt file
+
+var kinetic_animation = SAGE2_App.extend( {
+	construct: function() {
+		this.minDim = null;
+		this.timer  = null;
+		this.redraw = null;
+		this.stage  = null;
+		this.layer1 = null;
+		this.frame  = null;
+		this.width  = null;
+		this.height = null;
+		this.resizeEvents = "continuous";
+	},
+
+	init: function(id, width, height, resrc, date) {
+		// call super-class 'init'
+		arguments.callee.superClass.init.call(this, id, "div", width, height, resrc, date);
+
+		this.element.id = "div" + id;
+		this.frame  = 0;