Commit c3ae63c8 authored by Luc Remambot's avatar Luc Remambot

New applications


Former-commit-id: 270928eb4e906e8fd1049cb0a3573de880f45782
parent d45a4cb9
// 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) {
}
});
{
"main_script": "bounce.js",
"width": 400,
"height": 300,
"animation": true,
"resources": [
]
}
// 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";
}
{
"main_script": "d3_sample.js",
"width": 800,
"height": 600,
"resources": [
"scripts/d3.v3.min.js"
]
}
This diff is collapsed.
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); }
// 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);
}
});
{
"main_script": "googlemaps.js",
"width": 1400,
"height": 400,
"resources": [
]
}
{
"main_script": "kinetic_animation.js",
"width": 500,
"height": 300,
"animation": true,
"resources": [
"scripts/kinetic-v5.1.0.min.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;