Permalink
Browse files

Another new UI, inspired by mooey's planet simulator.

  • Loading branch information...
1 parent 2553316 commit d5e19ace834288b3825721a0955a1dc2b3ce43a4 @capnrefsmmat capnrefsmmat committed Jan 21, 2012
Showing with 158 additions and 70 deletions.
  1. +37 −6 relativity/js/interface.js
  2. +12 −12 relativity/js/scene.js
  3. +66 −16 relativity/relativity.css
  4. +43 −36 relativity/relativity.html
View
43 relativity/js/interface.js
@@ -396,6 +396,25 @@ function showHelp(event) {
}
/**
+ * We support three views: "2D", "3D", and "minkowski". This produces a
+ * callback which toggles which is visible.
+ */
+function switchToView(view) {
+ return function() {
+ $("#canvas-minkowski").hide();
+ $('#canvas-2d').hide();
+ $('#canvas-3d').hide();
+
+ $('#canvas-' + view).show();
+
+ $('#view-2d').removeClass('nav-active');
+ $('#view-3d').removeClass('nav-active');
+ $('#view-minkowski').removeClass('nav-active');
+ $('#view-' + view).addClass('nav-active');
+ };
+}
+
+/**
* Do not quite comprehend what this does, copypasta from Paul Irish's tutorial
* requestAnim shim layer by Paul Irish
*/
@@ -413,9 +432,9 @@ window.requestAnimFrame = (function(){
// Use JQuery to wait for document load
$(document).ready(function() {
var viewportWidth = $('body').width() - 16;
- $("#canvas").attr('width', viewportWidth);
- $("#minkowski").attr('width', viewportWidth);
- $("#3DCanvas").attr('width', viewportWidth);
+ $("#canvas-2d").attr('width', viewportWidth);
+ $("#canvas-minkowski").attr('width', viewportWidth);
+ $("#canvas-3d").attr('width', viewportWidth);
$('#help-screen').hide();
var scene = new Scene();
@@ -450,6 +469,18 @@ $(document).ready(function() {
$("#slowDown").click(slowDown(scene));
$("#speedUp").click(speedUp(scene));
+ $('#demo-chooser-activate').click(function() {
+ $('#demo-chooser').toggle();
+ });
+
+ $('#settings-activate').click(function() {
+ $("#settings").toggle();
+ });
+
+ $("#view-minkowski").click(switchToView('minkowski'));
+ $("#view-2d").click(switchToView('2d'));
+ $("#view-3d").click(switchToView('3d'));
+
// Capture back/forward events and take them to the corresponding demo,
// if they've viewed more than one.
window.onpopstate = function(e) {
@@ -469,9 +500,9 @@ $(document).ready(function() {
return function(event) {
if (typeof FlashCanvas === "undefined") {
var viewportWidth = $('body').width() - 16;
- $("#canvas").attr('width', viewportWidth);
- $("#minkowski").attr('width', viewportWidth);
- $("#3DCanvas").attr('width', viewportWidth);
+ $("#canvas-2d").attr('width', viewportWidth);
+ $("#canvas-minkowski").attr('width', viewportWidth);
+ $("#canvas-3d").attr('width', viewportWidth);
scene.setSize();
}
};
View
24 relativity/js/scene.js
@@ -15,14 +15,14 @@ function Scene() {
this.initialTime = new Date().getTime();
if (typeof FlashCanvas != "undefined") {
- FlashCanvas.initElement($('#canvas')[0]);
- FlashCanvas.initElement($('#minkowski')[0]);
- FlashCanvas.initElement($('#3DCanvas')[0]);
+ FlashCanvas.initElement($('#canvas-2d')[0]);
+ FlashCanvas.initElement($('#canvas-minkowski')[0]);
+ FlashCanvas.initElement($('#canvas-3d')[0]);
}
var defFont = "0.8em Helvetiker, helvetica, arial, sans-serif";
- this.g = $('#canvas')[0].getContext("2d");
- this.h = $('#minkowski')[0].getContext("2d");
- this.TDC = $('#3DCanvas')[0].getContext("2d");
+ this.g = $('#canvas-2d')[0].getContext("2d");
+ this.h = $('#canvas-minkowski')[0].getContext("2d");
+ this.TDC = $('#canvas-3d')[0].getContext("2d");
this.g.font = defFont;
this.h.font = defFont;
this.loaded = false;
@@ -418,12 +418,12 @@ Scene.prototype = {
* cone canvas. Set the location of the origin of our reference frame.
*/
setSize: function () {
- this.width = $("#canvas").width();
- this.height = $("#canvas").height();
- this.mWidth = $("#minkowski").width();
- this.mHeight = $("#minkowski").height();
- this.tWidth = $("#3DCanvas").width();
- this.tHeight = $("#3DCanvas").height();
+ this.width = $("#canvas-2d").width();
+ this.height = $("#canvas-2d").height();
+ this.mWidth = $("#canvas-minkowski").width();
+ this.mHeight = $("#canvas-minkowski").height();
+ this.tWidth = $("#canvas-3d").width();
+ this.tHeight = $("#canvas-3d").height();
this.lightConeCanvas.width = this.mWidth;
this.lightConeCanvas.height = this.mHeight;
this.hwidth = this.width / 2;
View
82 relativity/relativity.css
@@ -2,11 +2,62 @@ body {
color: #ccc;
font-family: sans-serif;
background-color: #000000;
+ margin: 0;
}
-#zoom {
+/** Navigation bar **/
+header {
+ height: 3em;
+ background-color: #212121;
+}
+
+header ul {
+ margin: 0 0.5em;
+ padding: 0 0 0 2em;
+}
+
+header ul li {
+ list-style-type: none;
+ display: inline-block;
+ color: #B7B7B7;
+ margin-right: 1em;
+ padding: 1em;
+ cursor: pointer;
+}
+
+header ul li:hover, li.nav-active {
+ background-color: #333333;
+}
+
+#tools {
+ float: right
+}
+
+#views {
+ float: left;
+}
+
+/** Settings menu **/
+#settings {
position: absolute;
top: 3em;
+ right: 0;
+ background-color: #212121;
+ color: #aaa;
+ z-index: 10;
+ padding: 0.25em 1em;
+ display: none;
+}
+
+#settings select, #settings label {
+ font-size: 0.75em;
+}
+
+/** Zoom controls **/
+
+#zoom {
+ position: absolute;
+ top: 7em;
right: 0.5em;
width: 20px;
font-size: 9pt;
@@ -24,6 +75,8 @@ body {
color: #ccc;
}
+/** Animation control panel **/
+
#controls {
position: absolute;
left: 0;
@@ -77,32 +130,25 @@ body {
display: inline-block;
}
-#more {
- padding: 0.5em;
- float: left;
-}
-
-#more a {
- text-decoration: none;
- color: #aaa;
+/** Canvases **/
+#canvas-minkowski {
+ display: none;
}
-#advancedOpts {
+#canvas-3d {
display: none;
- float: left;
- clear: left;
- padding: 0.5em;
- color: #aaa;
}
+/** Demo chooser **/
+
#demo-chooser {
position: absolute;
opacity: 0.8;
background-color: #333;
width: 300px;
left: 50%;
margin-left: -150px;
- top: 50px;
+ top: 6em;
padding: 1em;
}
@@ -123,21 +169,25 @@ body {
margin: 0;
}
+/** Help **/
+
#help-screen {
position: absolute;
opacity: 0.8;
background-color: #333;
width: 400px;
left: 50%;
margin-left: -200px;
- top: 50px;
+ top: 6em;
padding: 1em;
}
#help-screen a {
color: #fff;
}
+/** Step controls **/
+
#steps {
position: absolute;
top: 0;
View
79 relativity/relativity.html
@@ -29,39 +29,55 @@
</head>
<body>
+ <header>
+ <ul id="views">
+ <li id="view-2d" class="nav-active">2D</li>
+ <li id="view-minkowski">Minkowski</li>
+ <li id="view-3d">3D</li>
+ </ul>
+ <ul id="tools">
+ <li id="demo-chooser-activate">Choose new demo</li>
+ <li id="settings-activate">Settings</li>
+ <li id="help">Help</li>
+ </ul>
+ </header>
+ <div id="settings">
+ <label for="doppler">Doppler:</label>
+ <select id="doppler">
+ <option value="default" selected="selected">Use default</option>
+ <option value="always">Always on</option>
+ <option value="never">Always off</option>
+ </select>
+ <label for="framePos">Absolute positions:</label>
+ <select id="framePos">
+ <option value="default" selected="selected">Use default</option>
+ <option value="always">Always on</option>
+ <option value="never">Always off</option>
+ </select>
+ <label for="vPos">Apparent positions:</label>
+ <select id="vPos">
+ <option value="default" selected="selected">Use default</option>
+ <option value="always">Always on</option>
+ <option value="never">Always off</option>
+ </select>
+ <label for="debug">Debug mode:</label>
+ <input id="debug" type="checkbox" />
+ </div>
+
<div style="position:relative">
- <canvas id="canvas" height="500"><p>You need a browser that supports canvas to view this simulation.</p>
- <p>Firefox 3.6+, a recent version of Google Chrome, Safari 4+ or Opera 10+ are recommended.</p>
- <p>Firefox 2+, any version of Google Chrome, Safari 3.2+, Opera 9+ and IE8 should work with some missing features.</p></canvas>
+ <canvas id="canvas-2d" height="500">
+ <p>You need a browser that supports canvas to view this simulation.</p>
+ <p>Firefox 3.6+, a recent version of Google Chrome, Safari 4+ or Opera 10+ are recommended.</p>
+ <p>Firefox 2+, any version of Google Chrome, Safari 3.2+, Opera 9+ and IE8 should work with some missing features.</p>
+ </canvas>
+ <canvas id="canvas-minkowski" height="500"></canvas>
+ <canvas id="canvas-3d" height="500"></canvas>
<!--[if IE 8]>
<div style="width:1000px;height:500px;position:absolute;float:left;z-index:6000;" onclick="clickHandler(event)">&nbsp;</div>
<![endif]-->
<div id="controls">
<button id="pause" class="button-highlight">Play</button><button id="replayStep">Replay</button>
<div id="speed">Speed: <span id="curSpeed"></span><div><a href="#" id="slowDown">-</a><div id="speed-slider"></div><a href="#" id="speedUp">+</a></div></div>
- <div id="more"><a href="#" onclick="$('#advancedOpts').toggle(200); return false;">More &raquo;</a></div>
- <div id="advancedOpts">
- <label for="doppler">Doppler:</label>
- <select id="doppler">
- <option value="default" selected="selected">Use default</option>
- <option value="always">Always on</option>
- <option value="never">Always off</option>
- </select>
- <label for="framePos">Absolute positions:</label>
- <select id="framePos">
- <option value="default" selected="selected">Use default</option>
- <option value="always">Always on</option>
- <option value="never">Always off</option>
- </select>
- <label for="vPos">Apparent positions:</label>
- <select id="vPos">
- <option value="default" selected="selected">Use default</option>
- <option value="always">Always on</option>
- <option value="never">Always off</option>
- </select>
- <label for="debug">Debug mode:</label>
- <input id="debug" type="checkbox" />
- </div>
</div>
</div>
<div id="demo-chooser">
@@ -91,23 +107,14 @@
<div id="steps">
<button id="nextStep">Next &raquo;</button><br/>
<button id="prevStep">&laquo; Previous</button><br/>
- <button onclick="$('#demo-chooser').show();">Choose new demo</button><br/>
- <button id="help">Help</button>
</div>
<div id="caption">
<p id="caption-text">Welcome to the jsphys relativity simulator. Choose a demonstration to start with and hit Play.</p>
</div>
</div>
-
- <div style="position:relative;clear:both">
- <canvas id="minkowski" height="500"></canvas>
- </div>
- <div style="position:relative">
- <canvas id="3DCanvas" height="500"></canvas>
- </div>
<script type="text/javascript">
/* load canvas.text.js only when needed */
- if($('#canvas')[0].getContext && !$('#canvas')[0].getContext("2d").fillText) {
+ if($('#canvas-2d')[0].getContext && !$('#canvas-2d')[0].getContext("2d").fillText) {
document.write('<script src="../lib/canvas-text/canvas.text.js" type="text/javascript"></s' + 'cript>');
document.write('<script src="../lib/canvas-text/faces/helvetiker-normal-normal.js" type="text/javascript"></s' + 'cript>');
document.write('<script src="../lib/canvas-text/faces/optimer-normal-normal.js" type="text/javascript"></s' + 'cript>');

0 comments on commit d5e19ac

Please sign in to comment.