conversions between feet/meters/pixels

8 files changed, 123 insertions, 32 deletions

diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js
index 0b441c7..1419d1d 100644
--- a/public/assets/javascripts/app.js
+++ b/public/assets/javascripts/app.js
@@ -17,8 +17,6 @@ else {
 
 var scene, cam, map;
 
-var viewHeight = window.viewHeight || 186
-
 var app = new function(){}
 
 app.mode = { editor: false, builder: false }
@@ -99,4 +97,11 @@ app.position = function(obj){
 	return pos
 }
 
+app.defaults = {
+	viewHeight: window.viewHeight = 186,
+	units: app.units = "ft",
+	footResolution: 36,
+	meterResolution: 100,
+}
+
 document.addEventListener('DOMContentLoaded', app.init)
diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index f176e8b..191088f 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -1,6 +1,6 @@
 
 
-MX.Movements = function (cam, viewHeight) {
+MX.Movements = function (cam) {
 
 	var moveForward,
 			moveLeft,
diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js
index 53a122d..9bbd385 100644
--- a/public/assets/javascripts/ui/builder/BuilderInfo.js
+++ b/public/assets/javascripts/ui/builder/BuilderInfo.js
@@ -5,28 +5,35 @@ var BuilderInfo = View.extend({
 	events: {
 		"keydown": 'stopPropagation',
 		"change [name=x]": 'changePosition',
-		"change [name=z]": 'changePosition',
+		"change [name=y]": 'changePosition',
 		"change [name=width]": 'changeDimensions',
 		"change [name=depth]": 'changeDimensions',
 		"change [name=height]": 'changeDimensions',
 		"change [name=units]": 'changeUnits',
 		"change [name=resolution]": 'changeResolution',
-		"change [name=camera-height]": 'changeCameraHeight',
+		"change [name=viewHeight]": 'changeViewHeight',
 	},
 	
 	initialize: function(opt){
 		this.parent = opt.parent
 		this.$x = this.$("[name=x]")
-		this.$z = this.$("[name=z]")
+		this.$y = this.$("[name=y]")
 		this.$width = this.$("[name=width]")
 		this.$depth = this.$("[name=depth]")
 		this.$height = this.$("[name=height]")
 		this.$units = this.$("[name=units]")
-		this.$resolution = this.$("[name=resolution]")
-		this.$cameraHeight = this.$("[name=camera-height]")
+		this.$viewHeight = this.$("[name=viewHeight]")
+		this.$unitName = this.$(".unitName")
 		app.on("builder-pick-room", this.pick.bind(this))
 		app.on("builder-destroy-room", this.destroy.bind(this))
 	},
+	
+	load: function(data){
+		this.$viewHeight.unitVal( data.viewHeight || app.defaults.viewHeight )
+		this.$units.val( "ft" )
+		this.$unitName.html( "ft" )
+		this.$resolution.val( app.defaults.footResolution )
+	},
 
 	toggle: function(state){
 		this.$el.toggleClass("active", state)
@@ -44,11 +51,11 @@ var BuilderInfo = View.extend({
 	
 	pick: function(room){
 		this.room = room
-		this.$width.val( room.rect.x.length() )
-		this.$depth.val( room.rect.y.length() )
-		this.$height.val( room.height )
-		this.$x.val( room.rect.x.a )
-		this.$z.val( room.rect.y.a )
+		this.$width.unitVal( room.rect.x.length() )
+		this.$depth.unitVal( room.rect.y.length() )
+		this.$height.unitVal( room.height )
+		this.$x.unitVal( room.rect.x.a )
+		this.$y.unitVal( room.rect.y.a )
 
 		console.log(room)
 	},
@@ -59,12 +66,95 @@ var BuilderInfo = View.extend({
 	},
 	
 	changeDimensions: function(){
+// 		this.$width.unitVal( room.rect.x.length() )
+// 		this.$depth.unitVal( room.rect.y.length() )
+// 		this.$height.unitVal( room.height )
 	},
 	
 	changeUnits: function(){
+		app.units = this.$units.val()
+		this.$('.units').resetUnitVal()
 	},
 	
-	changeCameraHeight: function(){
+	changeViewHeight: function(){
+ 		window.viewHeight = this.$viewHeight.unitVal( )
 	},
 
 })
+
+$.fn.resetUnitVal = function(){
+	this.each(function(){
+		var n = $(this).data("px")
+		$(this).unitVal(n)
+	});
+}
+
+$.fn.unitVal = function(n){
+	var s
+	if (typeof n === "undefined") {
+		s = $(this).val()
+		n = stringToMeasurement( s )
+	}
+	s = measurementToString( n )
+	$(this).val( s ).data("px", n)
+	return n
+}
+
+function measurementToString( n ) {
+	var s, ft, inch
+	switch (app.units) {
+		case 'm':
+			s = round(n/36 * 0.3048 * 100) / 100 + " m"
+			break
+		case 'ft':
+			ft = floor(n / 36)
+			inch = abs(round((n % 36) / 3))
+			s = ft + "'"
+			if (inch > 0) {
+				s += " " + inch + '"'
+			}
+			break
+		case 'px':
+		default:
+			s = round(n) + " px"
+			break
+	}
+	return s
+}
+function stringToMeasurement( s ) {
+	var ft, inch, ft_in, type
+	if (s.indexOf("'") !== -1 || s.indexOf('"') !== -1 || s.indexOf('ft') !== -1) {
+		ft_in = s.match(/[0-9.]+/g)
+		if (ft_in.length >= 2) {
+			ft = parseFloat( ft_in[0] )
+			inch = parseFloat( ft_in[1] )
+		}
+		else if (ft_in.length == 1) {
+			if (s.indexOf('"') !== -1) {
+				ft = 0
+				inch = parseFloat( ft_in[0] )
+			}
+			else {
+				ft = parseFloat( ft_in[0] )
+				inch = 0
+			}
+		}
+		else {
+			ft = inch = 0
+		}
+		n = ft * 36 + inch * 3
+	}
+	else if (type === "m") {
+		n = parseFloat(s.match(/[0-9.]+/)) * 36 / 0.3048
+	}
+	else if (s.indexOf("px") !== -1) {
+		n = parseFloat(s.match(/[0-9.]+/))
+	}
+	else {
+		n = abs( stringToMeasurement( s + app.units ) )
+	}
+	if (s.indexOf('-') !== -1) {
+		n *= -1
+	}
+	return n
+}
\ No newline at end of file
diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js
index 7a92738..555cd58 100644
--- a/public/assets/javascripts/ui/builder/BuilderView.js
+++ b/public/assets/javascripts/ui/builder/BuilderView.js
@@ -26,6 +26,7 @@ var BuilderView = View.extend({
 	
 	ready: function(data){
 		this.settings.load(data)
+		this.info.load(data)
 	},
 	
 	hideExtras: function(){
diff --git a/public/assets/javascripts/util.js b/public/assets/javascripts/util.js
index b58da1f..58dcc3a 100644
--- a/public/assets/javascripts/util.js
+++ b/public/assets/javascripts/util.js
@@ -176,4 +176,3 @@ function bitcount(v) {
   v = (v & 0x33333333) + ((v >>> 2) & 0x33333333);
   return ((v + (v >>> 4) & 0xF0F0F0F) * 0x1010101) >>> 24;
 }
-
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 3e6dced..61a4fa9 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1252,10 +1252,11 @@ input[type="range"]::-webkit-slider-thumb {
 }
 .setting.number.halflines input[type=text] {
 	float: left;
-	width: 50px;
+	width: 60px;
 }
 .setting.number.halflines label:nth-of-type(2) {
 	text-align: center;
+	width: 30px;
 }
 
 .setting.number input[type=text] {
diff --git a/server/lib/schemas/Layout.js b/server/lib/schemas/Layout.js
index 33a5262..e3f2616 100644
--- a/server/lib/schemas/Layout.js
+++ b/server/lib/schemas/Layout.js
@@ -25,7 +25,7 @@ var LayoutSchema = new mongoose.Schema({
 	},
 	rooms: [mongoose.Schema.Types.Mixed],
 	startPosition: mongoose.Schema.Types.Mixed,
-	cameraHeight: { type: Number, default: 180 },
+	viewHeight: { type: Number },
 	user_id: { type: mongoose.Schema.ObjectId, index: true },
 	created_at: { type: Date },
 	updated_at: { type: Date },
diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs
index 2cc8132..d92d34c 100644
--- a/views/controls/builder/info.ejs
+++ b/views/controls/builder/info.ejs
@@ -1,40 +1,35 @@
 <div class="vvbox active settings info active" id="builderInfo">
 	<div class="setting number">
 		<label for="room-width">width</label>
-		<input type="text" name="width" id="room-width">
+		<input type="text" class="units" name="width" id="room-width">
 	</div>
 	<div class="setting number">
 		<label for="room-depth">depth</label>
-		<input type="text" name="depth" id="room-depth">
+		<input type="text" class="units" name="depth" id="room-depth">
 	</div>
 	<div class="setting number twoline">
 		<label for="room-height">ceiling height</label>
-		<input type="text" name="height" id="room-height">
+		<input type="text" class="units" name="height" id="room-height">
 	</div>
 	<div class="setting number halflines">
 		<label for="room-x">x</label>
-		<input type="text" name="x" id="room-x">
-		<label for="room-z">z</label>
-		<input type="text" name="z" id="room-z">
+		<input type="text" class="units" name="x" id="room-x">
+		<label for="room-y">y</label>
+		<input type="text" class="units" name="y" id="room-y">
 	</div>
 
 	<div class="setting number twoline">
 		<label for="builder-units">units</label>
 		<select id="builder-units" name="units">
 			<option value="px">pixels</option>
-			<option value="foot">foot</option>
-			<option value="meter">meter</option>
+			<option value="ft">foot</option>
+			<option value="m">meter</option>
 		</select>
 	</div>
 
-	<div class="setting number">
-		<label for="builder-resolution">px/<span class="unitName"></span></label>
-		<input type="text" name="resolution" id="builder-resolution">
-	</div>
-
 	<div class="setting number twoline">
-		<label for="camera-height">camera height</label>
-		<input type="text" name="camera-height" id="camera-height">
+		<label for="viewHeight">camera height</label>
+		<input type="text" class="units" name="viewHeight" id="viewHeight">
 	</div>
 
 </div>