From 0b22591547cbf2266a08663b6af09245f13b3da3 Mon Sep 17 00:00:00 2001 From: Jeff Jassky Date: Sat, 12 Nov 2016 15:25:54 -0500 Subject: [PATCH] Added front-end for editing config --- .bowerrc | 3 ++ .gitignore | 2 +- Brobot/brobot.js | 15 +----- Brobot/config-controller.js | 25 +++++++++ Brobot/config.js | 48 +---------------- app.js | 9 ---- bower.json | 23 ++++++++ package.json | 3 +- public/css/style.css | 37 +++++++++++++ public/index.html | 26 +++++++++ public/js/App.js | 13 +++++ .../ControlPanel/ControlPanelController.js | 12 +++++ public/js/Apps/Instruments/InstrumentViews.js | 54 +++++++++++++++++++ .../Instrument/InstrumentCollection.js | 27 ++++++++++ .../js/Entities/Instrument/InstrumentModel.js | 8 +++ server.js | 30 +++++++++++ 16 files changed, 263 insertions(+), 72 deletions(-) create mode 100644 .bowerrc create mode 100644 Brobot/config-controller.js delete mode 100755 app.js create mode 100644 bower.json create mode 100644 public/css/style.css create mode 100644 public/index.html create mode 100644 public/js/App.js create mode 100644 public/js/Apps/ControlPanel/ControlPanelController.js create mode 100644 public/js/Apps/Instruments/InstrumentViews.js create mode 100644 public/js/Entities/Instrument/InstrumentCollection.js create mode 100644 public/js/Entities/Instrument/InstrumentModel.js create mode 100755 server.js diff --git a/.bowerrc b/.bowerrc new file mode 100644 index 0000000..3a3c3f0 --- /dev/null +++ b/.bowerrc @@ -0,0 +1,3 @@ +{ + "directory" : "public/js/vendor" +} \ No newline at end of file diff --git a/.gitignore b/.gitignore index cb4fdde..fd50f8f 100644 --- 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 index 55c0c73..23c78a5 100644 --- 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 new file mode 100644 index 0000000..e004334 --- /dev/null +++ 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); + } +}; \ No newline at end of file diff --git a/Brobot/config.js b/Brobot/config.js index 73145da..012f72c 100644 --- a/Brobot/config.js +++ b/Brobot/config.js @@ -1,47 +1 @@ -var config = { - instruments: [ - { - name: "(electric) Snare", - note: 40, - pinNumber: 9, - latency: 8 // tested - }, - { - name: "(electric) Kick", - note: 36, - pinNumber: 5, - latency: 16 // tested - }, - { - name: "(closed) Hat", - note: 42, - pinNumber: 10, - latency: 15 // tested - }, - { - name: "Crash (cymbal 1)", - note: 49, - pinNumber: 11, - latency: 15 // tested - }, - { - name: "Floor Tom (low)", - note: 41, - pinNumber: 6, - latency: 9 // tested - }, - { - name: "Low Tom", - note: 45, - pinNumber: 7, - latency: 9 // tested - } -// { -// name: "Ride", -// note: 51, -// pinNumber: 10, -// softLatencyAbsolute: 8 -// } - ] -} -module.exports = config; +var config = {"instruments":[{"name":"(electric) Snare","note":40,"pinNumber":9,"latency":8,"relativeOffset":8},{"name":"(electric) Kick","note":36,"pinNumber":5,"latency":16,"relativeOffset":0},{"name":"(closed) Hat","note":42,"pinNumber":10,"latency":15,"relativeOffset":1},{"name":"Crash (cymbal 1)","note":49,"pinNumber":11,"latency":15,"relativeOffset":1},{"name":"Floor Tom (low)","note":"41","pinNumber":"6","latency":"9","relativeOffset":7},{"name":"Low Tom","note":"45","pinNumber":"7","latency":"9","relativeOffset":7}]}; module.exports = config; \ No newline at end of file diff --git a/app.js b/app.js deleted file mode 100755 index ecd7d9d..0000000 --- a/app.js +++ /dev/null @@ -1,9 +0,0 @@ -var express = require('express'), -app = express(), -server = require('http').Server(app), -brobot = require('./Brobot/brobot').initialize(); - -app.use(express.static('public')); -server.listen(3000, function(){ - console.log('Server running'); -}); \ No newline at end of file diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..b671a29 --- /dev/null +++ b/bower.json @@ -0,0 +1,23 @@ +{ + "name": "Brobot", + "homepage": "https://github.com/JeffJassky/Brobot", + "authors": [ + "Jeff Jassky " + ], + "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 index 53a287a..974f6d8 100644 --- 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 new file mode 100644 index 0000000..3347bb0 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..ba96e6e --- /dev/null +++ b/public/index.html @@ -0,0 +1,26 @@ + + + + + +
+
+
+ + + + + + + + + + + + + + + + diff --git a/public/js/App.js b/public/js/App.js new file mode 100644 index 0000000..cd3661d --- /dev/null +++ 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(); + } +}); \ No newline at end of file diff --git a/public/js/Apps/ControlPanel/ControlPanelController.js b/public/js/Apps/ControlPanel/ControlPanelController.js new file mode 100644 index 0000000..5bcf35b --- /dev/null +++ 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 + })); + } + }; + +}); \ No newline at end of file diff --git a/public/js/Apps/Instruments/InstrumentViews.js b/public/js/Apps/Instruments/InstrumentViews.js new file mode 100644 index 0000000..f11810a --- /dev/null +++ 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( + '
' + + '
' + + '
' + + '' + + '
' + + '
' + + '' + + '' + + '
' + + '
' + + '' + + '' + + '
' + + '
' + + '' + + '' + + '
' + + '
' + + '' + + '-{{relativeOffset}}' + + '
' + + '
' + + '
' + )(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 + }); + +}); \ No newline at end of file diff --git a/public/js/Entities/Instrument/InstrumentCollection.js b/public/js/Entities/Instrument/InstrumentCollection.js new file mode 100644 index 0000000..e254bcd --- /dev/null +++ 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()); + } + }); + +}); \ No newline at end of file diff --git a/public/js/Entities/Instrument/InstrumentModel.js b/public/js/Entities/Instrument/InstrumentModel.js new file mode 100644 index 0000000..40e3626 --- /dev/null +++ b/public/js/Entities/Instrument/InstrumentModel.js @@ -0,0 +1,8 @@ +App.module('Entities.Instrument', function(Instrument){ + 'use strict'; + + Instrument.InstrumentModel = Backbone.Model.extend({ + + }); + +}); \ No newline at end of file diff --git a/server.js b/server.js new file mode 100755 index 0000000..387b85c --- /dev/null +++ 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')); + }); + }); +}); \ No newline at end of file