initial view stuff

This commit is contained in:
Peter Cottle 2012-08-20 16:23:50 -07:00
parent 3bf34850ac
commit 78d0aa5b55
4 changed files with 38 additions and 9 deletions

View file

@ -4,15 +4,25 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>The Art of Presence</title> <title>Learn Git Branching</title>
<meta name="author" content="Christian Swinehart And Peter Cottle"> <meta name="author" content="Peter Cottle">
<link rel="stylesheet" href="style/main.css" type="text/css" charset="utf-8"> <link rel="stylesheet" href="style/main.css" type="text/css" charset="utf-8">
</head> </head>
<body> <body>
<canvas id="viewport" width="800" height="600"></canvas> <canvas id="viewport" width="800" height="600"></canvas>
<div id="controls">
<div id="commandLineBar">
<form id="commandForm">
<input id="commandTextField" type="text"></input>
</form>
</div>
</div>
<script src="../lib/jquery-1.8.0.min.js"></script> <script src="../lib/jquery-1.8.0.min.js"></script>
<!-- Include the individual source files so we can extend--> <!-- Include the individual arbor source files so we can extend-->
<script src="../arbor_src/etc.js"></script> <script src="../arbor_src/etc.js"></script>
<script src="../arbor_src/kernel.js"></script> <script src="../arbor_src/kernel.js"></script>
<script src="../arbor_src/graphics/colors.js"></script> <script src="../arbor_src/graphics/colors.js"></script>
@ -28,15 +38,16 @@
<script src="../lib/Tween.js"></script> <script src="../lib/Tween.js"></script>
<script src="../lib/rgbcolor.js"></script> <script src="../lib/rgbcolor.js"></script>
<script src="../lib/EventEmitter.min.js"></script>
<script src="../lib/underscore-min.js"></script> <script src="../lib/underscore-min.js"></script>
<script src="../lib/backbone-min.js"></script> <script src="../lib/backbone-min.js"></script>
<!-- My files! -->
<script src="async.js"></script> <script src="async.js"></script>
<script src="mine.js"></script> <script src="mine.js"></script>
<script src="constants.js"></script> <script src="constants.js"></script>
<script src="legacy.js"></script> <script src="legacy.js"></script>
<script src="git.js"></script> <script src="git.js"></script>
<script src="commandline.js"></script> <script src="commandline.js"></script>
<script src="views.js"></script>
</body> </body>
</html> </html>

View file

@ -1,3 +1,8 @@
/*
* this code is adapted from the excellent ArborJS tutorial by
* Samizdat Drafting Co
*/
Renderer = function(canvas) { Renderer = function(canvas) {
canvas = $(canvas).get(0); canvas = $(canvas).get(0);
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
@ -37,8 +42,8 @@ Renderer = function(canvas) {
}, },
resize: function(){ resize: function(){
var w = $(window).width(), var w = $(canvas).width(),
h = $(window).height(); h = $(canvas).height();
// resize the canvas element to fill the screen TODO -- fix this // resize the canvas element to fill the screen TODO -- fix this
canvas.width = w; canvas.height = h; canvas.width = w; canvas.height = h;
// inform the system so it can map coords for us // inform the system so it can map coords for us

View file

@ -1,16 +1,18 @@
/** /**
* Globals * Globals
*/ */
var ee = null; var events = _.clone(Backbone.Events);
var sys = null; var sys = null;
var graphicsEffects = {}; var graphicsEffects = {};
var gitEngine = null; var gitEngine = null;
$(document).ready(function(){ $(document).ready(function(){
ee = new EventEmitter();
sys = arbor.ParticleSystem(4000, 500, 0.5, false, 55, 0.005, 'verlet'); sys = arbor.ParticleSystem(4000, 500, 0.5, false, 55, 0.005, 'verlet');
sys.renderer = Renderer('#viewport'); sys.renderer = Renderer('#viewport');
new CommandLineView({
el: $('#commandLineBar')
});
gitEngine = new GitEngine(); gitEngine = new GitEngine();
var repulsionBreathe = function(r) { var repulsionBreathe = function(r) {

View file

@ -14,6 +14,17 @@ html,body {
letter-spacing: -0.02em; letter-spacing: -0.02em;
color: #eee; color: #eee;
} }
#controls {
position: absolute;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
-webkit-box-orientation: vertical;
}
#commandTextField {
width: 100%;
}