Implemented userconfig, and the ability to flip up/down counting dire…

…ction of pages. Closing #29 and #56

app.js

@@ -65,21 +65,22 @@ system.on('skeleton-bind-port', function(port) {
 
 system.on('skeleton-ready', function() {
 
-	var http     = require('./lib/http')(system);
-	var io       = require('./lib/io')(system, http);
-	var log      = require('./lib/log')(system,io);
-	var db       = require('./lib/db')(system,cfgDir);
-	var appRoot  = require('app-root-path');
-	var express  = require('express');
-	var bank     = require('./lib/bank')(system);
-	var elgatoDM = require('./lib/elgato_dm')(system);
-	var preview  = require('./lib/preview')(system);
-	var action   = require('./lib/action')(system);
-	var instance = require('./lib/instance')(system);
-	var variable = require('./lib/variable')(system);
-	var osc      = require('./lib/osc')(system);
-	var rest     = require('./lib/rest')(system);
-	var udp      = require('./lib/udp')(system);
+	var http       = require('./lib/http')(system);
+	var io         = require('./lib/io')(system, http);
+	var log        = require('./lib/log')(system,io);
+	var db         = require('./lib/db')(system,cfgDir);
+	var userconfig = require('./lib/userconfig')(system)
+	var appRoot    = require('app-root-path');
+	var express    = require('express');
+	var bank       = require('./lib/bank')(system);
+	var elgatoDM   = require('./lib/elgato_dm')(system);
+	var preview    = require('./lib/preview')(system);
+	var action     = require('./lib/action')(system);
+	var instance   = require('./lib/instance')(system);
+	var variable   = require('./lib/variable')(system);
+	var osc        = require('./lib/osc')(system);
+	var rest       = require('./lib/rest')(system);
+	var udp        = require('./lib/udp')(system);
 
 	system.on('exit', function() {
 		elgatoDM.quit();

lib/action.js

@@ -18,7 +18,6 @@ function action(system) {
 	self.system.on('action_save', function() {
 		self.system.emit('db_set', 'bank_actions', self.bank_actions);
 		self.system.emit('db_save');
-
 		debug('saving');
 	});
 

lib/db.js

@@ -34,8 +34,27 @@ function db(system,cfgDir) {
 
 		self.db = JSON.parse(data);
 		debug('db loaded');
+
+		var changed_after_load = false;
+		// db defaults
+		if (self.db.userconfig === undefined) {
+			self.db.userconfig = {};
+			changed_after_load = true;
+		}
+
+		// is page up 1->2 or 2->1?
+		if (self.db.userconfig.page_direction_flipped === undefined) {
+			self.db.userconfig.page_direction_flipped = false;
+			changed_after_load = true;
+		}
+
 		system.emit('db_loaded', self.db);
 
+		if (changed_after_load === true) {
+			debug('config changed by default values after load, saving.');
+			system.emit('db_save');
+		}
+
 	} catch (err) {
 
 		if (err.code == 'ENOENT') {

lib/device.js

@@ -22,6 +22,12 @@ function device(_system, panel) {
 	self.devicepath = panel.devicepath;
 	self.page = 1;
 	self.config = {};
+	self.userconfig = {};
+
+	// get userconfig object
+	system.emit('get_userconfig', function(userconfig) {
+		self.userconfig = userconfig;
+	});
 
 	graphics = new require('./graphics')(system);
 
@@ -53,7 +59,7 @@ function device(_system, panel) {
 
 		if (state == true) {
 
-			if (key == 0) {
+			if (key == (self.userconfig.page_direction_flipped === true ? 10 : 0)) {
 				self.page++;
 				if (self.page == 100) { self.page = 1; }
 				self.updatePagedevice();
@@ -65,7 +71,7 @@ function device(_system, panel) {
 				}, 400);
 			}
 
-			if (key == 10) {
+			if (key == (self.userconfig.page_direction_flipped === true ? 0 : 10)) {
 				self.page--;
 				if (self.page == 0) { self.page = 99; }
 				self.updatePagedevice();

lib/graphics.js

@@ -13,10 +13,23 @@ function graphics(_system) {
 	system = _system;
 
 	self.pushed = {};
+	self.userconfig = {};
 
 	system.on('graphics_invalidate_bank', self.invalidateBank.bind(self));
 	system.on('graphics_indicate_push', self.indicatePush.bind(self));
 
+	// get userconfig object
+	system.emit('get_userconfig', function(userconfig) {
+		self.userconfig = userconfig;
+	});
+
+	// if settings are changed, draw new up/down buttons
+	system.on('set_userconfig_key', function(key,val) {
+		if (key == 'page_direction_flipped') {
+			self.drawControls();
+		}
+	});
+
 	self.drawControls();
 
 	system.once('bank-update', function(config) {
@@ -136,6 +149,10 @@ graphics.prototype.drawPage = function(page) {
 };
 
 
+// (self.userconfig.page_direction_flipped should maybe flip up/down as well?!
+// just need some clarification from #29. drawControls() gets called again when
+// it gets flipped in config.
+
 graphics.prototype.drawControls = function() {
 	var self = this;
 
@@ -150,6 +167,10 @@ graphics.prototype.drawControls = function() {
 	img.backgroundColor(img.rgb(15,15,15));
 	img.drawLetter(26,40,'arrow_down',img.rgb(255,255,255),'icon');
 	img.drawText(5,25,"PAGE DOWN",img.rgb(255,198,0),0);
+
+	// we should probably invalidate the graphics or something here? or, maybe
+	// something underlying does that. håkon?
+
 }
 
 graphics.prototype.getImagesForPage = function(page) {

lib/userconfig.js

@@ -0,0 +1,51 @@
+var debug   = require('debug')('lib/userconfig');
+var system;
+
+function userconfig(system) {
+	var self = this;
+
+	self.userconfig = {};
+
+	system.emit('db_get', 'userconfig', function(config) {
+		self.userconfig = config;
+		for (var key in config) {
+			system.emit('userconfig_update', key, config[key]);
+		}
+	});
+
+	system.on('get_userconfig', function(cb) {
+		cb(self.userconfig);
+	});
+
+	system.emit('io_get', function (io) {
+
+		io.on('connect', function (socket) {
+
+			debug('socket ' + socket.id + ' connected');
+
+			socket.on('set_userconfig_key', function(key,value) {
+				self.userconfig[key] = value;
+				debug('-------------- set_userconfig_key', key, value);
+				socket.broadcast.emit('set_userconfig_key', key, value);
+				system.emit('userconfig_update', key, value);
+				system.emit('db_save');
+			});
+
+			socket.on('get_userconfig_all', function() {
+				socket.emit('get_userconfig_all', self.userconfig);
+			});
+
+
+
+			socket.on('disconnect', function () {
+				debug('socket ' + socket.id + ' disconnected');
+			});
+
+		});
+	});
+
+}
+
+module.exports = function (system) {
+	return new userconfig(system);
+};

public/index.html

@@ -223,6 +223,11 @@ <h4 class="pt-3">Houston, we have a problem!</h4>
 											<i class="icon-calculator"></i> Devices</a>
 									</li>
 
+									<li class="nav-item">
+										<a class="nav-link" data-toggle="tab" href="#userconfig" role="tab" aria-controls="userconfig">
+											<i class="icon-calculator"></i> User Config</a>
+									</li>
+
 								</ul>
 
 								<div class="tab-content padbottom">
@@ -250,9 +255,8 @@ <h4 class="pt-3">Houston, we have a problem!</h4>
 											</div>
 										</div>
 										 <p></p>
-										<p><b>Hint:</b> Instances are the connections companion makes to other devices in order to
-										discover button actions.</p>
-
+										<b>Hint:</b> Instances are the connections companion makes to other devices in order to
+										discover button actions.
 
 									</div>
 
@@ -302,7 +306,7 @@ <h4></h4>
 										</div>
 
 										<p></p>
-										<p><b>Hint:</b> Click on the the button you like to de# the list above</p>
+										<b>Hint:</b> Click on the the button you like to de# the list above
 
 
 									</div>
@@ -334,6 +338,36 @@ <h4></h4>
 										</p>
 									</div>
 
+									<div class="tab-pane" id="userconfig" role="tabpanel">
+										<table class='table'>
+											<thead>
+												<tr>
+													<th>User configuration</th>
+													<th>Value</th>
+												</tr>
+											</thead>
+											<tbody>
+
+
+												<!-- flip page up/down -->
+												<tr>
+													<td>Flip counting direction on page up/down</td>
+													<td>
+														<div class="form-check form-check-inline mr-1">
+															<input class="form-check-input" type="checkbox" id="userconfig_page_direction_flipped" value="1">
+															<label class="form-check-label" for="userconfig_page_direction_flipped">Enabled</label>
+														</div>
+													</td>
+												</tr>
+
+
+
+											</tbody>
+										</table>
+
+										<b>Settings</b> applies instantaneously, don't worry about it!
+
+									</div>
 								</div>
 							</div>
 							<!--/.col-->
@@ -389,6 +423,7 @@ <h4></h4>
 		<script src="js/moment/min/moment-with-locales.min.js"></script>
 		<script src="js/preview.js"></script>
 		<script src="bank.js"></script>
+		<script src="userconfig.js"></script>
 		<script src="instance.js"></script>
 		<script src="action.js"></script>
 		<script src="devices.js"></script>

public/userconfig.js

@@ -0,0 +1,53 @@
+var userconfig = {};
+
+$(function() {
+
+
+	var userConfigUpdate = function() {
+
+		// set the page direction flipped option
+		var state = userconfig.page_direction_flipped;
+		var $cb = $('#userconfig_page_direction_flipped');
+
+		if (state === true) {
+			$cb.prop('checked', true);
+		} else {
+			$cb.prop('checked', false);
+		}
+
+	};
+
+	// when userconfig is changed from the userconfig tab
+	$('#userconfig_page_direction_flipped').click(function() {
+		console.log('clicked', $(this).prop('checked') );
+		if ($(this).prop('checked') == true) {
+			socket.emit('set_userconfig_key', 'page_direction_flipped', true);
+		} else {
+			socket.emit('set_userconfig_key', 'page_direction_flipped', false);
+		}
+	});
+
+
+
+
+
+
+
+	// when server updates the entire config array
+	socket.on('get_userconfig_all', function(config) {
+		console.log('updating entire userconfig:', config)
+		userconfig = config;
+		userConfigUpdate();
+	});
+
+	// when other browsers update userconfig
+	socket.on('set_userconfig_key', function(key, value) {
+		userconfig[key]=value;
+		userConfigUpdate();
+	});
+
+	// ask for the entire config
+	socket.emit('get_userconfig_all');
+
+
+});