Added front-end for editing config

JeffJassky · Nov 12, 2016 · 0b22591 · 0b22591
1 parent 7ad61de
commit 0b22591
Show file tree

Hide file tree

Showing 16 changed files with 263 additions and 72 deletions.
diff --git a/.bowerrc b/.bowerrc
@@ -0,0 +1,3 @@
+{
+  "directory" : "public/js/vendor"
+}
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,4 @@
 node_modules
-public/bower_components
+public/js/vendor
 .AppleDouble
 .DS_Store
diff --git a/Brobot/brobot.js b/Brobot/brobot.js
@@ -11,6 +11,7 @@ module.exports = {
 	// INIT
 	// =====================
 	initialize: function(){
+
 		// Calculate maximum latency
 		var slowestInstrument = _.max(config.instruments, function(instrument){
 			return instrument.latency;
@@ -24,7 +25,6 @@ module.exports = {
 		});
 		this.initializeArduino();
 		this.initializeMidi();
-		// this.warmUp();
 	},
 	initializeArduino: function(){
 		board.on("ready", function() {
@@ -39,19 +39,6 @@ module.exports = {
 		midi.openVirtualPort("Brobie Node");
 		midi.on('message', this.onMidiMessage.bind(this));
 	},
-	warmUp: function(){
-		console.log('Warming Up');
-		var timeout = 0;
-		for(var velocity = 0; velocity <= 127; velocity++){
-			_.each(instruments, function(instrument){
-				setTimeout(function(){
-					instrument.queue(velocity);
-				}, timeout)
-				timeout += 150;
-			});
-		}
-		console.log('Warmup Complete');
-	},
 
 	// =====================
 	// Event Manager

diff --git a/Brobot/config-controller.js b/Brobot/config-controller.js
@@ -0,0 +1,25 @@
+var config = require('./config'),
+	fs = require('fs');
+
+function saveFile(){
+	// build file contents
+	var contents = 'var config = ' +
+		JSON.stringify(config) +
+		'; module.exports = config;';
+
+	// write file contents
+	fs.writeFile(__dirname + '/config.js', contents, function (err) {
+		if (err) return console.log(err);
+		console.log('Settings file saved');
+	});
+}
+
+module.exports = {
+	get: function(key){
+		return config[key];
+	},
+	save: function(key, data){
+		config[key] = data;
+		saveFile(callback);
+	}
+};
diff --git a/Brobot/config.js b/Brobot/config.js
diff --git a/app.js b/app.js
diff --git a/bower.json b/bower.json
@@ -0,0 +1,23 @@
+{
+  "name": "Brobot",
+  "homepage": "https://github.com/JeffJassky/Brobot",
+  "authors": [
+    "Jeff Jassky <jeff@jeffjassky.com>"
+  ],
+  "description": "Web gui for Brobot",
+  "main": "/js/bootstrap.js",
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "handlebars": "~4.0.5",
+    "marionette": "~2.4.4",
+    "jquery": "^3.1.1",
+    "socket.io-client": "^1.5.1"
+  }
+}
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "ableton-listener",
+  "name": "Brobot",
   "version": "0.0.1",
   "private": true,
   "dependencies": {
@@ -11,6 +11,7 @@
     "moment": "^2.15.0",
     "node-pre-gyp": "^0.6.30",
     "serialport": "^2.1.2",
+    "socket.io": "^1.5.1",
     "underscore": "^1.8.3"
   },
   "devDependencies": {

diff --git a/public/css/style.css b/public/css/style.css
@@ -0,0 +1,37 @@
+body{
+	font-family: "myriad pro";
+	background :#333;
+	color: #ccc;
+}
+
+.channel-strip-container{
+
+}
+.channel-strip{
+	width: 150px;
+	float: left;
+}
+
+.channel-strip-cell{
+	background: #444;
+	margin:2px;
+	padding:5px 10px;
+}
+
+.channel-strip label{
+	font-size: .8em;
+	text-transform: uppercase;
+	color: #bbb;
+}
+
+.channel-strip-name input[type=text]{
+	font-size: 1em;
+}
+input[type=text]{
+	background: transparent;
+	color: #ccc;
+	border:0px;
+	font-size: 2em;
+	width:100%;
+	text-align: center;
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,26 @@
+<html>
+<head>
+	<link rel="stylesheet" type="text/css" href="/css/style.css">
+</head>
+<body>
+	<div id="body">
+		<main id="js-channel-strips-region"></main>
+	</div>
+	<script src="/js/vendor/handlebars/handlebars.js"></script>
+	<script src="/js/vendor/jquery/dist/jquery.js"></script>
+	<script src="/js/vendor/underscore/underscore.js"></script>
+	<script src="/js/vendor/backbone/backbone.js"></script>
+	<script src="/js/vendor/marionette/lib/backbone.marionette.js"></script>
+	<script src="/js/vendor/socket.io-client/socket.io.js"></script>
+	<script src="/js/App.js"></script>
+	<script src="/js/Entities/Instrument/InstrumentModel.js"></script>
+	<script src="/js/Entities/Instrument/InstrumentCollection.js"></script>
+	<script src="/js/Apps/ControlPanel/ControlPanelController.js"></script>
+	<script src="/js/Apps/Instruments/InstrumentViews.js"></script>
+	<script>
+		App.start();
+	</script>
+</body>
+</html>
+
+
diff --git a/public/js/App.js b/public/js/App.js
@@ -0,0 +1,13 @@
+var App = new Backbone.Marionette.Application({
+	socket: null,
+    regions: {
+        channelStrips: 'main#js-channel-strips-region'
+    },
+    onBeforeStart: function(){
+    	this.socket = io.connect(window.document.location.origin);
+    	this.instruments = new App.Entities.Instrument.InstrumentCollection();
+    },
+    onStart: function(){
+    	App.ControlPanel.Controller.show();
+    }
+});
diff --git a/public/js/Apps/ControlPanel/ControlPanelController.js b/public/js/Apps/ControlPanel/ControlPanelController.js
@@ -0,0 +1,12 @@
+App.module('ControlPanel', function(ControlPanel){
+    'use strict';
+
+    ControlPanel.Controller = {
+        show: function(){
+            App.channelStrips.show(new App.Instruments.Views.ChannelStripCollectionView({
+                collection: App.instruments
+            }));
+        }
+    };
+
+});
diff --git a/public/js/Apps/Instruments/InstrumentViews.js b/public/js/Apps/Instruments/InstrumentViews.js
@@ -0,0 +1,54 @@
+App.module('Instruments.Views', function(Views, App){
+    'use strict';
+
+    Views.ChannelStripView = Backbone.Marionette.ItemView.extend({
+        className: 'channel-strip',
+		template: function(data){
+			return Handlebars.compile(
+                '<form>' +
+                    '<div class="channel-strip">' +
+                        '<div class="channel-strip-cell channel-strip-name">' +
+                            '<input type="text" name="name" value="{{name}}">' + 
+                        '</div>' +
+                        '<div class="channel-strip-cell">' +
+                            '<label>MIDI Note</label>' +
+                            '<input type="text" name="note" value="{{note}}">' + 
+                        '</div>' +
+                        '<div class="channel-strip-cell">' +
+                            '<label>Arduino Pin</label>' +
+                            '<input type="text" name="pinNumber" value="{{pinNumber}}">' + 
+                        '</div>' +
+                        '<div class="channel-strip-cell">' +
+                            '<label>Physical Latency</label>' +
+                            '<input type="text" name="latency" value="{{latency}}">' + 
+                        '</div>' +
+                        '<div class="channel-strip-cell">' +
+                            '<label>Relative Offset</label>' +
+                            '-{{relativeOffset}}' + 
+                        '</div>' +
+                    '</div>' +
+                '</form>'
+			)(data);
+		},
+        ui: {
+            form: 'form',
+            inputs: 'input'
+        },
+      	events: {
+          'change @ui.inputs': 'updateModel'
+        },
+        updateModel: function(){
+            var data = {};
+            _.each(this.ui.form.serializeArray(), function(input){
+                data[input.name] = input.value;
+            });
+            this.model.set(data);
+        }
+    });
+
+    Views.ChannelStripCollectionView = Backbone.Marionette.CollectionView.extend({
+    	className: 'channel-strip-container',
+    	childView: Views.ChannelStripView
+    });
+
+});
diff --git a/public/js/Entities/Instrument/InstrumentCollection.js b/public/js/Entities/Instrument/InstrumentCollection.js
@@ -0,0 +1,27 @@
+App.module('Entities.Instrument', function(Instrument, App){
+    'use strict';
+
+    Instrument.InstrumentCollection = Backbone.Collection.extend({
+		model: Instrument.InstrumentModel,
+		socketResourceId: 'instruments',
+		initialize: function(){
+			var collection = this;
+		    App.socket.on(this.socketResourceId, function (data) {
+				collection.set(collection.parse(data));
+			});
+			this.fetch();
+			this.listenTo(this, 'change', this.save);
+		},
+		beginListening: function(){
+			this.listenTo(this, 'change', this.save);
+		},
+		fetch: function(){
+			App.socket.emit('get:'+this.socketResourceId);
+		},
+		save: function(){
+			console.log('Saving instruments collection...');
+			App.socket.emit('post:'+this.socketResourceId, this.toJSON());
+		}
+    });
+
+});
diff --git a/public/js/Entities/Instrument/InstrumentModel.js b/public/js/Entities/Instrument/InstrumentModel.js
@@ -0,0 +1,8 @@
+App.module('Entities.Instrument', function(Instrument){
+  'use strict';
+
+	Instrument.InstrumentModel = Backbone.Model.extend({
+
+	});
+
+});
diff --git a/server.js b/server.js
@@ -0,0 +1,30 @@
+var express = require('express'),
+	app 	= express(),
+	server 	= require('http').Server(app),
+	io 		= require('socket.io')(server),
+	config = require('./Brobot/config-controller');
+
+var brobot	= require('./Brobot/brobot').initialize();
+
+app.use(express.static('public'));
+
+server.listen(80, function(){
+	console.log('Server running');
+});
+
+io.on('connection', function (socket) {
+	// GET INSTRUMENTS
+	socket.on('get:instruments', function(){
+		// emit the new data
+		socket.emit('instruments', config.get('instruments'));
+	});
+
+	// POST INSTRUMENTS
+	socket.on('post:instruments', function (data) {
+		// save the data
+		config.save('instruments', data, function(){
+			// emit the new data
+			// socket.emit('instruments', config.get('instruments'));
+		});
+	});
+});