Switchable Dark Theme - Attempt 2 - Ongoing

IDE/dist/IDESettings.js

@@ -168,6 +168,7 @@ function default_IDE_settings() {
         'cpuMonitoring': 1,
         'cpuMonitoringVerbose': 0,
         'consoleDelete': 0,
-        'viewHiddenFiles': 0
+        'viewHiddenFiles': 0,
+        'darkTheme': 0
     };
 }

IDE/frontend-dev/gulpfile.js

@@ -132,7 +132,6 @@ gulp.task('scope-browserify', () => {
         .on('error', function(error){
     		console.error(error);
     		this.emit('end');
-			exit(1);
     	})
         .pipe(source('bundle.js'))
         .pipe(buffer())
@@ -150,7 +149,7 @@ gulp.task('sass', () => {
 });
 
 gulp.task('watch-local', () => {
-	//livereload.listen();
+	livereload.listen();
 	// when the browser js changes, browserify it
 	gulp.watch(['./src/**'], ['browserify']);
 	// when the scope browser js changes, browserify it

IDE/frontend-dev/scope-src/BackgroundView.js

@@ -5,6 +5,8 @@ class BackgroundView extends View{
 
 	constructor(className, models, renderer){
 		super(className, models);
+		this.darkMode = models[1].getKey('darkMode');
+		this.showLabels = models[1].getKey('showLabels');
 		var saveCanvas =  document.getElementById('saveCanvas');
 		this.canvas = document.getElementById('scopeBG');
 		saveCanvas.addEventListener('click', () => {
@@ -20,7 +22,7 @@ class BackgroundView extends View{
 		canvas.height = window.innerHeight;
 		var ctx = canvas.getContext('2d');
 		ctx.rect(0, 0, canvas.width, canvas.height);
-		ctx.fillStyle="white";
+		ctx.fillStyle = this.darkMode ? "black" : "white";
 		ctx.fill();
 		//ctx.clearRect(0, 0, canvas.width, canvas.height);
 
@@ -36,21 +38,31 @@ class BackgroundView extends View{
 		//console.log(xTime);
 
 		//faint lines
-		ctx.strokeStyle = '#000000';
-		ctx.fillStyle="grey";
+		ctx.strokeStyle = this.darkMode ? '#fff' : '#000';
+		ctx.fillStyle= this.darkMode ? '#fff' : '#000';
 		ctx.font = "14px inconsolata";
 		ctx.textAlign = "center";
-		ctx.lineWidth = 0.2;
+		ctx.lineWidth = this.darkMode ? 1 : 0.2;
 		ctx.setLineDash([]);
 		ctx.beginPath();
-		ctx.fillText(0, canvas.width/2, canvas.height/2+11);
+		if(this.showLabels)
+			ctx.fillText(0, canvas.width/2, canvas.height/2+11);
 		for (var i=1; i<numVLines; i++){
 			ctx.moveTo(canvas.width/2 + i*xPixels, 0);
 			ctx.lineTo(canvas.width/2 + i*xPixels, canvas.height);
-			ctx.fillText((i*mspersample).toPrecision(2), canvas.width/2 + i*xPixels, canvas.height/2+11);
+			let val = (i * mspersample);
+			if(val < 10)
+				val = val.toFixed(2);
+			else if(val < 100)
+				val = val.toFixed(1);
+			else
+				val = val.toFixed(0);
+			if(this.showLabels)
+				ctx.fillText(val, canvas.width/2 + i*xPixels, canvas.height/2+11);
 			ctx.moveTo(canvas.width/2 - i*xPixels, 0);
 			ctx.lineTo(canvas.width/2 - i*xPixels, canvas.height);
-			ctx.fillText((-i*mspersample).toPrecision(2), canvas.width/2 - i*xPixels, canvas.height/2+11);
+			if(this.showLabels)
+				ctx.fillText("-" + val, canvas.width/2 - i*xPixels, canvas.height/2+11);
 		}
 
 		var numHLines = 6;
@@ -95,6 +107,7 @@ class BackgroundView extends View{
 		//dashed lines
 		ctx.beginPath();
 		ctx.setLineDash([2, 5]);
+		ctx.lineWidth = this.darkMode ? 0.5 : 0.2;
 
 		ctx.moveTo(0, canvas.height*3/4);
 		ctx.lineTo(canvas.width, canvas.height*3/4);
@@ -135,7 +148,7 @@ class BackgroundView extends View{
 		var numVlines = 10;
 
 		//faint lines
-		ctx.strokeStyle = '#000000';
+		ctx.strokeStyle = this.darkMode ? '#fff' : '#000';
 		ctx.fillStyle="grey";
 		ctx.font = "14px inconsolata";
 		ctx.textAlign = "center";
@@ -155,7 +168,8 @@ class BackgroundView extends View{
 					val = (Math.pow(Math.E, -(Math.log(1/window.innerWidth))*i/numVlines) * (this.models[0].getKey('sampleRate')/(2*window.innerWidth)) * (data.upSampling/data.downSampling)).toFixed(0);
 				}
 
-				ctx.fillText(val, i*window.innerWidth/numVlines, canvas.height-2);
+				if(this.showLabels)
+					ctx.fillText(val, i*window.innerWidth/numVlines, canvas.height-2);
 			}
 		}
 
@@ -180,6 +194,16 @@ class BackgroundView extends View{
 		ctx.stroke();
 	}
 
+	_showLabels(value, data){
+		this.showLabels = value;
+		this.repaintBG(this.models[0].getKey('xTimeBase'), this.models[0]._getData());
+	}
+
+	_darkMode(value, data) {
+		this.darkMode = value;
+		this.repaintBG(this.models[0].getKey('xTimeBase'), this.models[0]._getData());
+	}
+
 	__xTimeBase(value, data){
 		//console.log(value);
 		this.repaintBG(value, data);

IDE/frontend-dev/scope-src/ChannelView.js

@@ -5,12 +5,11 @@ function ChannelConfig(){
   this.yAmplitude = 1;
   this.yOffset = 0;
   this.color = '0xff0000';
-  this.lineWeight = 1.5;
+  this.lineWeight = 5;
   this.enabled = 1;
 }
 
-var channelConfig = [new ChannelConfig()];
-var colours = ['0xff0000', '0x0000ff', '0x00ff00', '0xff8800', '0xff00ff', '0x00ffff', '0x888800', '0xff8888'];
+var channelConfig = [];
 
 var tdGainVal = 1, tdOffsetVal = 0, tdGainMin = 0.5, tdGainMax = 2, tdOffsetMin = -5, tdOffsetMax = 5;
 var FFTNGainVal = 1, FFTNOffsetVal = -0.005, FFTNGainMin = 0.5, FFTNGainMax = 2, FFTNOffsetMin = -1, FFTNOffsetMax = 1;
@@ -22,6 +21,17 @@ class ChannelView extends View{
 
   constructor(className, models){
     super(className, models);
+    this.darkMode = this.models[1].getKey('darkMode');
+    this.colors = [
+      '0xff0000',
+      '0x94d6ff',
+      '0x00ff00',
+      '0xff8800',
+      '0xff00ff',
+      '0x00ffff',
+      '0x888800',
+      '0xff8888'
+    ];
   }
 
   // UI events
@@ -82,6 +92,10 @@ class ChannelView extends View{
     }
   }
 
+  _darkMode(val){
+    this.darkMode = val;
+  }
+
   _numChannels(val){
     var numChannels = val;
     if (numChannels < channelConfig.length){
@@ -91,17 +105,25 @@ class ChannelView extends View{
       }
     } else if (numChannels > channelConfig.length){
       while(numChannels > channelConfig.length){
-        channelConfig.push(new ChannelConfig());
-        channelConfig[channelConfig.length-1].color = colours[(channelConfig.length-1)%colours.length];
-        var el = $('.channel-view-0')
+        let cf = new ChannelConfig();
+        channelConfig.push(cf);
+        cf.color = this.colors[(channelConfig.length - 1) % this.colors.length];
+        var el = $('.channel-view-template')
           .clone(true)
           .prop('class', 'channel-view-'+(channelConfig.length))
+          .prop('style', '') // remove display: none
           .appendTo($('.control-section.channel'));
         el.find('[data-channel-name]').html('Channel ' + channelConfig.length);
         el.find('input').each(function(){
           $(this).data('channel', channelConfig.length-1)
         });
-        el.find('input[type=color]').val(colours[(channelConfig.length-1)%colours.length].replace('0x', '#'));
+        for(let key in cf) {
+          let prop = el.find('input[data-key=' + key + ']');
+          if('color' === key)
+            prop.val(cf.color.replace('0x', '#'));
+          else
+            prop.val(cf[key]);
+        }
       }
     }
     this.emit('channelConfig', channelConfig);

IDE/frontend-dev/scope-src/ControlView.js

@@ -9,19 +9,22 @@ class ControlView extends View{
     super(className, models);
     $('#controlsButton, .overlay').on('click', () => this.toggleControls());
     $('body').on('keydown', (e) => this.keyHandler(e));
+    this.addGenericHandlers();
   }
 
-  toggleControls(){
-    if (controls) {
-      controls = false;
-      $('#control-panel').addClass('hidden');
-      $('.overlay').removeClass('active');
-    } else {
-      controls = true;
+  controlsVisibility(show) {
+    controls = show;
+    if(show) {
       $('#control-panel').removeClass('hidden');
       $('.overlay').addClass('active');
+    } else {
+      $('#control-panel').addClass('hidden');
+      $('.overlay').removeClass('active');
     }
   }
+  toggleControls(){
+    this.controlsVisibility(!controls);
+  }
 
   keyHandler(e){
     if (e.key === 'Escape') {
@@ -46,19 +49,22 @@ class ControlView extends View{
   buttonClicked($element, e){
     if ($element.data().key === 'upSampling'){
       if (downSampling > 1){
-        downSampling -= 1;
+        downSampling /= 2;
         this.emit('settings-event', 'downSampling', downSampling);
       } else {
-        upSampling += 1;
-        this.emit('settings-event', 'upSampling', upSampling);
+        if(upSampling < 64) {
+          // an arbitrary limit: higher than this and pileups start happening
+          upSampling *= 2;
+          this.emit('settings-event', 'upSampling', upSampling);
+        }
       }
       // this._upSampling();
     } else if ($element.data().key === 'downSampling'){
       if (upSampling > 1){
-        upSampling -= 1;
+        upSampling /= 2;
         this.emit('settings-event', 'upSampling', upSampling);
       } else {
-        downSampling += 1;
+        downSampling *= 2;
         this.emit('settings-event', 'downSampling', downSampling);
       }
       // this._downSampling();
@@ -84,43 +90,58 @@ class ControlView extends View{
     }
   }
 
+  msDiv() {
+    let time = (xTime * downSampling/upSampling);
+    if(time < 10)
+      time = time.toFixed(2);
+    else if (time < 100)
+      time = time.toFixed(1);
+    else
+      time = time.toFixed(0);
+    return time;
+  }
+
+  hzDiv() {
+    let hz = (sampleRate/20 * upSampling/downSampling);
+    return hz.toFixed(0);
+  }
+
+  updateUnitDisplay(data) {
+    let unitDisplay;
+    if (data.plotMode == 0){
+      unitDisplay = this.msDiv();
+    } else if (data.plotMode == 1){
+      unitDisplay = this.hzDiv();
+    }
+    $('.xUnit-display').html(unitDisplay);
+  }
+
   plotMode(val, data){
     this.emit('plotMode', val, data);
     if (val == 0){
       if ($('#control-underlay').hasClass('')) $('#control-underlay').addClass('hidden');
       if ($('#triggerControls').hasClass('hidden')) $('#triggerControls').removeClass('hidden');
       if (!$('#FFTControls').hasClass('hidden')) $('#FFTControls').addClass('hidden');
-      $('.xAxisUnits').html('<p>ms</p>');
-      $('.xUnit-display').html('<p>'+ (xTime * downSampling/upSampling).toPrecision(2) +'</p>');
-      $('#zoomUp').html('Zoom in');
-      $('#zoomDown').html('Zoom out');
+      $('.xAxisUnits').html("ms");
     } else if (val == 1){
       if ($('#control-underlay').hasClass('hidden')) $('#control-underlay').removeClass('hidden');
       if (!$('#trigger-controls').hasClass('hidden')) $('#triggerControls').addClass('hidden');
       if ($('#FFTControls').hasClass('hidden')) $('#FFTControls').removeClass('hidden');
-      $('.xAxisUnits').html('Hz');
-      $('.xUnit-display').html((sampleRate/20 * upSampling/downSampling));
-      $('#zoomUp').html('Zoom out');
-      $('#zoomDown').html('Zoom in');
+      $('.xAxisUnits').html("Hz");
     }
+    this.updateUnitDisplay(data);
+    $('#zoomUp').html('Zoom in');
+    $('#zoomDown').html('Zoom out');
   }
 
   _upSampling(value, data){
     upSampling = value;
-    if (data.plotMode == 0){
-      $('.xUnit-display').html('<p>'+ (xTime * downSampling/upSampling).toPrecision(2) +'</p>');
-    } else if (data.plotMode == 1){
-      $('.xUnit-display').html((data.sampleRate/20 * data.upSampling/data.downSampling));
-    }
+    this.updateUnitDisplay(data);
     $('.zoom-display').html((100*upSampling/downSampling).toPrecision(4)+'%');
   }
   _downSampling(value, data){
     downSampling = value;
-    if (data.plotMode == 0){
-      $('.xUnit-display').html('<p>'+ (xTime * downSampling/upSampling).toPrecision(2) +'</p>');
-    } else if (data.plotMode == 1){
-      $('.xUnit-display').html('<p>'+ (xTime * downSampling/upSampling).toPrecision(2) +'</p>');
-    }
+    this.updateUnitDisplay(data);
   }
   _xTimeBase(value, data){
     xTime = data.xTimeBase;
@@ -139,20 +160,39 @@ class ControlView extends View{
     }
   }
 
-  _triggerMode(value){
-    this.$elements.filterByData('key', 'triggerMode').val(value);
+  addGenericHandlers() {
+    let genericHandlers = [
+      "triggerMode",
+      "triggerChannel",
+      "triggerDir",
+      "triggerLevel",
+      "xAxisBehaviour",
+      "holdOff",
+      "xOffset",
+      "interpolation",
+    ];
+    for(let n = 0; n < genericHandlers.length; ++n) {
+      let h = genericHandlers[n];
+      this["_" + h] = (value) => {
+        this.$elements.filterByData('key', h).val(value);
+      }
+    }
+  }
+
+  _xAxisBehaviour(value){
+    this.$elements.filterByData('key', 'xAxisBehaviour').val(value);
   }
 
-  _triggerChannel(value){
-    this.$elements.filterByData('key', 'triggerChannel').val(value);
+  _holdOff(value){
+    this.$elements.filterByData('key', 'holdOff').val(value);
   }
 
-  _triggerDir(value){
-    this.$elements.filterByData('key', 'triggerDir').val(value);
+  _xOffset(value){
+    this.$elements.filterByData('key', 'xOffset').val(value);
   }
 
-  _triggerLevel(value){
-    this.$elements.filterByData('key', 'triggerLevel').val(value);
+  _interpolation(value){
+    this.$elements.filterByData('key', 'interpolation').val(value);
   }
 }