From cdfa877e78a0b816a5539b6860ac372ccf7fb400 Mon Sep 17 00:00:00 2001 From: Will Toohey Date: Wed, 23 Sep 2015 15:39:45 +1000 Subject: [PATCH] Settings now have a nice UI, modern ui improvements --- css/hues-m.css | 37 ++++++++++++++++--- css/style.css | 52 ++++++++++++++++++++++++--- index.html | 6 +++- js/HuesCanvas.js | 8 +++-- js/HuesCore.js | 31 ++++++++-------- js/HuesSettings.js | 79 ++++++++++++++++++++++++++++++++++++++-- js/HuesUI.js | 90 ++++++++++++++++++++++++++-------------------- 7 files changed, 235 insertions(+), 68 deletions(-) diff --git a/css/hues-m.css b/css/hues-m.css index 42e62d6..477bd26 100644 --- a/css/hues-m.css +++ b/css/hues-m.css @@ -32,6 +32,23 @@ border-radius: 10px; } +.hues-m-leftinfo, .hues-m-rightinfo { + position: absolute; + font-size: 10px; + text-align: center; + color: rgba(255,255,255, 0.7); + bottom: 29px; + width: 100px; +} + +.hues-m-leftinfo { + left: 8px; +} + +.hues-m-rightinfo { + right: 8px; +} + .hues-m-huename { font-size: 8px; height: 12px; @@ -137,16 +154,18 @@ .hues-m-songtitle, .hues-m-imagename, .hues-m-huename { position: absolute; - left: 8px; - right: 8px; text-align: center; padding: 0 4px; + left: 8px; + right: 8px; } .hues-m-songtitle { bottom: 5px; } .hues-m-imagename { bottom: 29px; + left: 108px; + right: 108px; } .hues-m-songtitle > a:link, .hues-m-songtitle > a:visited, .hues-m-imagename > a:link, .hues-m-imagename > a:visited { @@ -292,10 +311,20 @@ input[type=range]::-ms-thumb { .hues-m-controls { height: 54px; } - .hues-m-songtitle, .hues-m-imagename { + .hues-m-imagename { + left: 300px; + right: 300px; + } + .hues-m-songtitle { left: 192px; right: 192px; - } + } + .hues-m-leftinfo { + left: 200px; + } + .hues-m-rightinfo { + right: 200px; + } .hues-m-leftbox { bottom: 0; left: 0; diff --git a/css/style.css b/css/style.css index 98da097..5c64efd 100644 --- a/css/style.css +++ b/css/style.css @@ -57,11 +57,55 @@ html, body { font-size: 12pt; } -#huesSettings { - background: rgba(127,127,127,0.5); - border-color: rgba(0,0,0,0.5); - border-width: 4px; +#settingsHelper { + display:flex; + justify-content:center; + align-items:center; + position: absolute; + top: 0; + left: 0; + width:100%; + height:100%; +} + +#settingsWindow { + background: rgba(200,200,200, 0.7); + border-color: "black"; + border-width: 2px; + border-style: solid; + font-family: 'PetMe64Web'; + padding: 5px; +} + +.settings-category { + font-size: 10pt; +} + +.settings-individual{ + font-size: 8px; +} + +.settings-buttons{ + margin: 10px 2px 10px 0px; +} + +.settings-checkbox{ + display: none; +} + +input[type="radio"]:checked + label { + background: rgba(255,255,255, 0.5); +} + +.settings-label { + font-size: 8px; + margin: 10px 2px; + padding: 3px; + background: rgba(127,127,127, 0.5); + border-color: rgb(0,0,0); + border-width: 1px; border-style: solid; + cursor: pointer; } @keyframes fadeout { diff --git a/index.html b/index.html index a932087..997a7e2 100644 --- a/index.html +++ b/index.html @@ -38,7 +38,11 @@
-
TODO
+
+
+
+
+
diff --git a/js/HuesCanvas.js b/js/HuesCanvas.js index c0eeb7f..9cd0d32 100644 --- a/js/HuesCanvas.js +++ b/js/HuesCanvas.js @@ -85,7 +85,7 @@ HuesCanvas.prototype.redraw = function() { this.canvas.fillRect(0,0,width,720); } - if(this.image) { + if(this.image && (this.image.bitmap || this.image.bitmaps)) { var bitmap = this.image.animated ? this.image.bitmaps[this.animFrame] : this.image.bitmap; if(this.smartAlign) { @@ -105,8 +105,6 @@ HuesCanvas.prototype.redraw = function() { } if(this.xBlur || this.yBlur) { this.canvas.globalAlpha = this.blurAlpha; - var delta = cTime - this.blurStart; - this.blurDistance = this.blurAmount * Math.exp(-this.blurDecay * delta); } if(this.xBlur) { for(var i=this.blurMin; i<=this.blurMax; i+= this.blurDelta) { @@ -171,6 +169,10 @@ HuesCanvas.prototype.animationLoop = function() { this.needsRedraw = true; } if(this.blurStart) { + var delta = this.aContext.currentTime - this.blurStart; + this.blurDistance = this.blurAmount * Math.exp(-this.blurDecay * delta); + + // Update UI var dist = this.blurDistance / this.blurAmount; if(this.xBlur) this.core.blurUpdated(dist, 0); diff --git a/js/HuesCore.js b/js/HuesCore.js index cbef55c..9a22a2a 100644 --- a/js/HuesCore.js +++ b/js/HuesCore.js @@ -32,7 +32,6 @@ HuesCore = function(defaults) { this.renderer = new HuesCanvas("waifu", this.soundManager.context, this); this.uiArray.push(new RetroUI(), new WeedUI(), new ModernUI(), new XmasUI()); - this.changeUI(1); this.settings.connectCore(this); var that = this; @@ -60,6 +59,10 @@ HuesCore = function(defaults) { document.onkeydown = function(e){ e = e || window.event; + // Ignore modifiers so we don't steal other events + if (e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) { + return true; + } var key = e.keyCode || e.which; return that.keyHandler(key); }; @@ -218,7 +221,6 @@ HuesCore.prototype.songDataUpdated = function() { if (this.currentSong) { this.beatLength = 0; this.userInterface.updateLists(); - this.userInterface.updateTexts(); this.userInterface.setSongText(); this.userInterface.setImageText(); } else { @@ -447,7 +449,6 @@ HuesCore.prototype.changeUI = function(index) { this.userInterface = this.uiArray[index]; this.userInterface.connectCore(this); this.userInterface.updateLists(); - this.userInterface.updateTexts(); this.userInterface.setSongText(); this.userInterface.setImageText(); this.userInterface.setColourText(this.colourIndex); @@ -464,7 +465,7 @@ HuesCore.prototype.settingsUpdated = function() { case "retro": this.changeUI(0); break; - case "weed": + case "v4.20": this.changeUI(1); break; case "modern": @@ -481,7 +482,7 @@ HuesCore.prototype.settingsUpdated = function() { case "pastel": this.colours = this.pastelColours; break; - case "gp": + case "v4.20": this.colours = this.weedColours; break; } @@ -561,28 +562,28 @@ HuesCore.prototype.keyHandler = function(key) { this.userInterface.toggleHide(); break; case 82: // R - this.window.showRespacks(); + this.settings.showRespacks(); break; - case 69: // E + /*case 69: // E this.window.showEditor(); - break; + break;*/ case 79: // O - this.window.showOptions(); + this.settings.showOptions(); break; case 73: // I - this.window.showInfo(); + this.settings.showInfo(); break; case 49: // NUMBER_1 - this.changeUI(0); + this.settings.set("currentUI", "retro"); break; case 50: // NUMBER_2 - this.changeUI(1); + this.settings.set("currentUI", "v4.20"); break; case 51: // NUMBER_3 - this.changeUI(2); + this.settings.set("currentUI", "modern"); break; case 52: // NUMBER_4 - this.changeUI(3); + this.settings.set("currentUI", "xmas"); break; case 76: // L this.loadLocal(); @@ -594,7 +595,7 @@ HuesCore.prototype.keyHandler = function(key) { this.toggleSongList(); break; case 87: // W - this.toggleSettingsWindow(); + this.settings.toggle(); break; case 16: // SHIFT this.randomSong(); diff --git a/js/HuesSettings.js b/js/HuesSettings.js index a1b2826..c66a64c 100644 --- a/js/HuesSettings.js +++ b/js/HuesSettings.js @@ -44,7 +44,7 @@ HuesSettings.prototype.settingsOptions = { }, blurAmount : { name : "Blur Amount", - options : ["low", "med", "high"] + options : ["low", "medium", "high"] }, blurDecay : { name : "Blur Decay", @@ -56,11 +56,11 @@ HuesSettings.prototype.settingsOptions = { }, currentUI : { name : "User Interface", - options : ["retro", "weed", "modern", "xmas"] + options : ["retro", "v4.20", "modern", "xmas"] }, colourSet : { name : "Colour Set", - options : ["normal", "pastel", "420"] + options : ["normal", "pastel", "v4.20"] }, blackoutUI : { name : "Blackout affects UI", @@ -75,6 +75,9 @@ HuesSettings.prototype.settingsOptions = { function HuesSettings(defaults) { this.core = null; + this.root = document.getElementById("huesSettings"); + this.window = document.getElementById("settingsWindow"); + this.show(); // TODO hide for(var attr in this.defaultSettings) { if(attr == "respacks") { @@ -92,6 +95,8 @@ function HuesSettings(defaults) { } this.defaults = defaults; + + this.initUI(); } HuesSettings.prototype.connectCore = function(core) { @@ -99,13 +104,81 @@ HuesSettings.prototype.connectCore = function(core) { core.settingsUpdated(); }; +HuesSettings.prototype.show = function() { + this.window.style.display = "block"; +} + +HuesSettings.prototype.hide = function() { + this.window.style.display = "none"; +} + +HuesSettings.prototype.toggle = function() { + if(this.window.style.display == "none") { + this.window.style.display = "block"; + } else { + this.window.style.display = "none"; + } +} + +HuesSettings.prototype.initUI = function() { + var doc = this.root.ownerDocument; + + // To order things nicely + for(cat in this.settingsCategories) { + var catContainer = doc.createElement("div"); + catContainer.textContent = cat; + catContainer.className = "settings-category"; + var cats = this.settingsCategories[cat]; + for(var i = 0; i < cats.length; i++) { + var setName = cats[i]; + var setContainer = doc.createElement("div"); + var setting = this.settingsOptions[setName]; + setContainer.textContent = setting.name; + setContainer.className = "settings-individual"; + var buttonContainer = doc.createElement("div"); + buttonContainer.className = "settings-buttons"; + for(var j = 0; j < setting.options.length; j++) { + var option = setting.options[j]; + var checkbox = doc.createElement("input"); + checkbox.className = "settings-checkbox"; + checkbox.type = "radio"; + checkbox.name = setName; + checkbox.value = option; + checkbox.id = setName + "-" + option; + if(localStorage[setName] == option) { + checkbox.checked = true; + } + var that = this; + checkbox.onclick = function() { + that.set(this.name, this.value); + } + buttonContainer.appendChild(checkbox); + // So we can style this nicely + var label = doc.createElement("label"); + label.className = "settings-label"; + label.htmlFor = checkbox.id; + label.textContent = option.toUpperCase(); + buttonContainer.appendChild(label); + } + setContainer.appendChild(buttonContainer); + catContainer.appendChild(setContainer); + } + this.root.appendChild(catContainer); + } +} + // Set a named index to its named value, returns false if name doesn't exist HuesSettings.prototype.set = function(setting, value) { value = value.toLowerCase(); var opt = this.settingsOptions[setting]; if(!opt || opt.options.indexOf(value) == -1) { + console.log(value, "is not a valid value for", setting); return false; } + // for updating the UI selection + try { + document.getElementById(setting + "-" + value).checked = true; + } catch(e) {} localStorage[setting] = value; core.settingsUpdated(); return true; diff --git a/js/HuesUI.js b/js/HuesUI.js index 810f080..d0fb63e 100644 --- a/js/HuesUI.js +++ b/js/HuesUI.js @@ -25,6 +25,11 @@ function HuesUI(parent) { this.volInput = null; this.volLabel = null; + this.beatCount = null; + this.timer = null; + this.xBlur = null; + this.yBlur = null; + this.initUI(); } @@ -47,6 +52,18 @@ HuesUI.prototype.initUI = function() { var hueName = doc.createElement("div"); this.hueName = hueName; + + this.timer = doc.createElement("div"); + this.timer.textContent = "T=$0x0000"; + + this.beatCount = doc.createElement("div"); + this.beatCount.textContent = "B=$0x00"; + + this.xBlur = doc.createElement("div"); + this.xBlur.textContent = "X=$0x00"; + + this.yBlur = doc.createElement("div"); + this.yBlur.textContent = "Y=$0x00"; //this.setupVolume(leftBox) } @@ -73,8 +90,6 @@ HuesUI.prototype.hide = function() { HuesUI.prototype.resize = function() {} HuesUI.prototype.modeUpdated = function() {} HuesUI.prototype.beat = function() {} -HuesUI.prototype.updateTime = function() {} -HuesUI.prototype.blurUpdated = function(x, y) {} HuesUI.prototype.setSongText = function() { var song = this.core.currentSong; @@ -93,7 +108,7 @@ HuesUI.prototype.setImageText = function() { return; this.imageLink.textContent = image.fullname.toUpperCase(); - this.imageLink.href = image.source; + this.imageLink.href = image.source ? image.source : ""; } HuesUI.prototype.setColourText = function(colour) { @@ -108,8 +123,24 @@ HuesUI.prototype.updateLists = function() { // TODO display this } -HuesUI.prototype.updateTexts = function() { - // Timer, beat counter +HuesUI.prototype.blurUpdated = function(x, y) { + x = Math.floor(x * 0xFF); + y = Math.floor(y * 0xFF);; + this.xBlur.textContent = "X=" + this.intToHex2(x); + this.yBlur.textContent = "Y=" + this.intToHex2(y); +} + +HuesUI.prototype.updateTime = function(time) { + time = Math.floor(time * 1000); + this.timer.textContent = "T=" + this.intToHex4(time); +} + +HuesUI.prototype.intToHex2 = function(num) { + return '$0x' + ("00"+num.toString(16)).slice(-2); +} + +HuesUI.prototype.intToHex4 = function(num) { + return '$0x' + ("0000"+num.toString(16)).slice(-4); } /* @@ -120,8 +151,6 @@ function RetroUI() { this.container = null; this.mode = null; this.beatBar = null; - this.beatCount = null; - this.timer = null; this.colourIndex = null; this.version = null; HuesUI.call(this); @@ -142,21 +171,9 @@ RetroUI.prototype.initUI = function() { this.mode = doc.createElement("div"); container.appendChild(this.mode); container.appendChild(this.imageName); - - this.timer = doc.createElement("div"); - this.timer.textContent = "T=$0x0000"; container.appendChild(this.timer); - - this.beatCount = doc.createElement("div"); - this.beatCount.textContent = "B=$0x00"; container.appendChild(this.beatCount); - - this.xBlur = doc.createElement("div"); - this.xBlur.textContent = "X=$0x00"; container.appendChild(this.xBlur); - - this.yBlur = doc.createElement("div"); - this.yBlur.textContent = "Y=$0x00"; container.appendChild(this.yBlur); this.colourIndex = doc.createElement("div"); @@ -184,13 +201,6 @@ RetroUI.prototype.modeUpdated = function() { this.mode.textContent = "M=" + this.core.getCurrentMode(); } -RetroUI.prototype.blurUpdated = function(x, y) { - x = Math.floor(x * 0xFF); - y = Math.floor(y * 0xFF);; - this.xBlur.textContent = "X=" + this.intToHex2(x); - this.yBlur.textContent = "Y=" + this.intToHex2(y); -} - RetroUI.prototype.setImageText = function() { var image = this.core.currentImage; @@ -216,18 +226,6 @@ RetroUI.prototype.beat = function() { this.beatCount.textContent = "B=" + this.intToHex2(this.core.getSafeBeatIndex()); } -RetroUI.prototype.updateTime = function(time) { - time = Math.floor(time * 1000); - this.timer.textContent = "T=" + this.intToHex4(time); -} - -RetroUI.prototype.intToHex2 = function(num) { - return '$0x' + ("00"+num.toString(16)).slice(-2); -} -RetroUI.prototype.intToHex4 = function(num) { - return '$0x' + ("0000"+num.toString(16)).slice(-4); -} - function ModernUI() { this.beatBar = null; this.beatLeft = null; @@ -235,6 +233,8 @@ function ModernUI() { this.beatCenter = null; this.rightBox = null; this.leftBox = null; + this.rightInfo = null; + this.leftInfo = null; this.controls = null; HuesUI.call(this); @@ -270,6 +270,19 @@ ModernUI.prototype.initUI = function() { rightBox.className = "hues-m-rightbox"; controls.appendChild(rightBox); this.rightBox = rightBox; + + //TODO add stuff to right box + + var leftInfo = doc.createElement("div"); + leftInfo.className = "hues-m-leftinfo"; + var rightInfo = doc.createElement("div"); + rightInfo.className = "hues-m-rightinfo"; + leftInfo.appendChild(this.xBlur); + leftInfo.appendChild(this.yBlur); + rightInfo.appendChild(this.timer); + rightInfo.appendChild(this.beatCount); + controls.appendChild(leftInfo); + controls.appendChild(rightInfo); var beatBar = doc.createElement("div"); beatBar.className = "hues-m-beatbar"; @@ -310,6 +323,7 @@ ModernUI.prototype.beat = function() { span.textContent = current; this.beatCenter.appendChild(span); } + this.beatCount.textContent = "B=" + this.intToHex4(this.core.getSafeBeatIndex()); } ModernUI.prototype.setSongText = function() {