Settings now have a nice UI, modern ui improvements

serial
Will Toohey 10 years ago
parent 9791338196
commit cdfa877e78
  1. 35
      css/hues-m.css
  2. 50
      css/style.css
  3. 6
      index.html
  4. 8
      js/HuesCanvas.js
  5. 31
      js/HuesCore.js
  6. 79
      js/HuesSettings.js
  7. 90
      js/HuesUI.js

@ -32,6 +32,23 @@
border-radius: 10px; 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 { .hues-m-huename {
font-size: 8px; font-size: 8px;
height: 12px; height: 12px;
@ -137,16 +154,18 @@
.hues-m-songtitle, .hues-m-imagename, .hues-m-huename { .hues-m-songtitle, .hues-m-imagename, .hues-m-huename {
position: absolute; position: absolute;
left: 8px;
right: 8px;
text-align: center; text-align: center;
padding: 0 4px; padding: 0 4px;
left: 8px;
right: 8px;
} }
.hues-m-songtitle { .hues-m-songtitle {
bottom: 5px; bottom: 5px;
} }
.hues-m-imagename { .hues-m-imagename {
bottom: 29px; 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 { .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 { .hues-m-controls {
height: 54px; height: 54px;
} }
.hues-m-songtitle, .hues-m-imagename { .hues-m-imagename {
left: 300px;
right: 300px;
}
.hues-m-songtitle {
left: 192px; left: 192px;
right: 192px; right: 192px;
} }
.hues-m-leftinfo {
left: 200px;
}
.hues-m-rightinfo {
right: 200px;
}
.hues-m-leftbox { .hues-m-leftbox {
bottom: 0; bottom: 0;
left: 0; left: 0;

@ -57,11 +57,55 @@ html, body {
font-size: 12pt; font-size: 12pt;
} }
#huesSettings { #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); background: rgba(127,127,127, 0.5);
border-color: rgba(0,0,0,0.5); border-color: rgb(0,0,0);
border-width: 4px; border-width: 1px;
border-style: solid; border-style: solid;
cursor: pointer;
} }
@keyframes fadeout { @keyframes fadeout {

@ -38,7 +38,11 @@
<div id="preSub"></div> <div id="preSub"></div>
</div> </div>
</div> </div>
<div id="huesSettings">TODO</div> <div id="settingsHelper">
<div id="settingsWindow">
<div class="content" id="huesSettings"></div>
</div>
</div>
<div id="huesUI"></div> <div id="huesUI"></div>
<canvas id="waifu" width="1280" height="720"></canvas> <canvas id="waifu" width="1280" height="720"></canvas>
</body> </body>

@ -85,7 +85,7 @@ HuesCanvas.prototype.redraw = function() {
this.canvas.fillRect(0,0,width,720); this.canvas.fillRect(0,0,width,720);
} }
if(this.image) { if(this.image && (this.image.bitmap || this.image.bitmaps)) {
var bitmap = this.image.animated ? var bitmap = this.image.animated ?
this.image.bitmaps[this.animFrame] : this.image.bitmap; this.image.bitmaps[this.animFrame] : this.image.bitmap;
if(this.smartAlign) { if(this.smartAlign) {
@ -105,8 +105,6 @@ HuesCanvas.prototype.redraw = function() {
} }
if(this.xBlur || this.yBlur) { if(this.xBlur || this.yBlur) {
this.canvas.globalAlpha = this.blurAlpha; this.canvas.globalAlpha = this.blurAlpha;
var delta = cTime - this.blurStart;
this.blurDistance = this.blurAmount * Math.exp(-this.blurDecay * delta);
} }
if(this.xBlur) { if(this.xBlur) {
for(var i=this.blurMin; i<=this.blurMax; i+= this.blurDelta) { for(var i=this.blurMin; i<=this.blurMax; i+= this.blurDelta) {
@ -171,6 +169,10 @@ HuesCanvas.prototype.animationLoop = function() {
this.needsRedraw = true; this.needsRedraw = true;
} }
if(this.blurStart) { 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; var dist = this.blurDistance / this.blurAmount;
if(this.xBlur) if(this.xBlur)
this.core.blurUpdated(dist, 0); this.core.blurUpdated(dist, 0);

@ -32,7 +32,6 @@ HuesCore = function(defaults) {
this.renderer = new HuesCanvas("waifu", this.soundManager.context, this); this.renderer = new HuesCanvas("waifu", this.soundManager.context, this);
this.uiArray.push(new RetroUI(), new WeedUI(), new ModernUI(), new XmasUI()); this.uiArray.push(new RetroUI(), new WeedUI(), new ModernUI(), new XmasUI());
this.changeUI(1);
this.settings.connectCore(this); this.settings.connectCore(this);
var that = this; var that = this;
@ -60,6 +59,10 @@ HuesCore = function(defaults) {
document.onkeydown = function(e){ document.onkeydown = function(e){
e = e || window.event; 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; var key = e.keyCode || e.which;
return that.keyHandler(key); return that.keyHandler(key);
}; };
@ -218,7 +221,6 @@ HuesCore.prototype.songDataUpdated = function() {
if (this.currentSong) { if (this.currentSong) {
this.beatLength = 0; this.beatLength = 0;
this.userInterface.updateLists(); this.userInterface.updateLists();
this.userInterface.updateTexts();
this.userInterface.setSongText(); this.userInterface.setSongText();
this.userInterface.setImageText(); this.userInterface.setImageText();
} else { } else {
@ -447,7 +449,6 @@ HuesCore.prototype.changeUI = function(index) {
this.userInterface = this.uiArray[index]; this.userInterface = this.uiArray[index];
this.userInterface.connectCore(this); this.userInterface.connectCore(this);
this.userInterface.updateLists(); this.userInterface.updateLists();
this.userInterface.updateTexts();
this.userInterface.setSongText(); this.userInterface.setSongText();
this.userInterface.setImageText(); this.userInterface.setImageText();
this.userInterface.setColourText(this.colourIndex); this.userInterface.setColourText(this.colourIndex);
@ -464,7 +465,7 @@ HuesCore.prototype.settingsUpdated = function() {
case "retro": case "retro":
this.changeUI(0); this.changeUI(0);
break; break;
case "weed": case "v4.20":
this.changeUI(1); this.changeUI(1);
break; break;
case "modern": case "modern":
@ -481,7 +482,7 @@ HuesCore.prototype.settingsUpdated = function() {
case "pastel": case "pastel":
this.colours = this.pastelColours; this.colours = this.pastelColours;
break; break;
case "gp": case "v4.20":
this.colours = this.weedColours; this.colours = this.weedColours;
break; break;
} }
@ -561,28 +562,28 @@ HuesCore.prototype.keyHandler = function(key) {
this.userInterface.toggleHide(); this.userInterface.toggleHide();
break; break;
case 82: // R case 82: // R
this.window.showRespacks(); this.settings.showRespacks();
break; break;
case 69: // E /*case 69: // E
this.window.showEditor(); this.window.showEditor();
break; break;*/
case 79: // O case 79: // O
this.window.showOptions(); this.settings.showOptions();
break; break;
case 73: // I case 73: // I
this.window.showInfo(); this.settings.showInfo();
break; break;
case 49: // NUMBER_1 case 49: // NUMBER_1
this.changeUI(0); this.settings.set("currentUI", "retro");
break; break;
case 50: // NUMBER_2 case 50: // NUMBER_2
this.changeUI(1); this.settings.set("currentUI", "v4.20");
break; break;
case 51: // NUMBER_3 case 51: // NUMBER_3
this.changeUI(2); this.settings.set("currentUI", "modern");
break; break;
case 52: // NUMBER_4 case 52: // NUMBER_4
this.changeUI(3); this.settings.set("currentUI", "xmas");
break; break;
case 76: // L case 76: // L
this.loadLocal(); this.loadLocal();
@ -594,7 +595,7 @@ HuesCore.prototype.keyHandler = function(key) {
this.toggleSongList(); this.toggleSongList();
break; break;
case 87: // W case 87: // W
this.toggleSettingsWindow(); this.settings.toggle();
break; break;
case 16: // SHIFT case 16: // SHIFT
this.randomSong(); this.randomSong();

@ -44,7 +44,7 @@ HuesSettings.prototype.settingsOptions = {
}, },
blurAmount : { blurAmount : {
name : "Blur Amount", name : "Blur Amount",
options : ["low", "med", "high"] options : ["low", "medium", "high"]
}, },
blurDecay : { blurDecay : {
name : "Blur Decay", name : "Blur Decay",
@ -56,11 +56,11 @@ HuesSettings.prototype.settingsOptions = {
}, },
currentUI : { currentUI : {
name : "User Interface", name : "User Interface",
options : ["retro", "weed", "modern", "xmas"] options : ["retro", "v4.20", "modern", "xmas"]
}, },
colourSet : { colourSet : {
name : "Colour Set", name : "Colour Set",
options : ["normal", "pastel", "420"] options : ["normal", "pastel", "v4.20"]
}, },
blackoutUI : { blackoutUI : {
name : "Blackout affects UI", name : "Blackout affects UI",
@ -75,6 +75,9 @@ HuesSettings.prototype.settingsOptions = {
function HuesSettings(defaults) { function HuesSettings(defaults) {
this.core = null; this.core = null;
this.root = document.getElementById("huesSettings");
this.window = document.getElementById("settingsWindow");
this.show(); // TODO hide
for(var attr in this.defaultSettings) { for(var attr in this.defaultSettings) {
if(attr == "respacks") { if(attr == "respacks") {
@ -92,6 +95,8 @@ function HuesSettings(defaults) {
} }
this.defaults = defaults; this.defaults = defaults;
this.initUI();
} }
HuesSettings.prototype.connectCore = function(core) { HuesSettings.prototype.connectCore = function(core) {
@ -99,13 +104,81 @@ HuesSettings.prototype.connectCore = function(core) {
core.settingsUpdated(); 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 // Set a named index to its named value, returns false if name doesn't exist
HuesSettings.prototype.set = function(setting, value) { HuesSettings.prototype.set = function(setting, value) {
value = value.toLowerCase(); value = value.toLowerCase();
var opt = this.settingsOptions[setting]; var opt = this.settingsOptions[setting];
if(!opt || opt.options.indexOf(value) == -1) { if(!opt || opt.options.indexOf(value) == -1) {
console.log(value, "is not a valid value for", setting);
return false; return false;
} }
// for updating the UI selection
try {
document.getElementById(setting + "-" + value).checked = true;
} catch(e) {}
localStorage[setting] = value; localStorage[setting] = value;
core.settingsUpdated(); core.settingsUpdated();
return true; return true;

@ -25,6 +25,11 @@ function HuesUI(parent) {
this.volInput = null; this.volInput = null;
this.volLabel = null; this.volLabel = null;
this.beatCount = null;
this.timer = null;
this.xBlur = null;
this.yBlur = null;
this.initUI(); this.initUI();
} }
@ -48,6 +53,18 @@ HuesUI.prototype.initUI = function() {
var hueName = doc.createElement("div"); var hueName = doc.createElement("div");
this.hueName = hueName; 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) //this.setupVolume(leftBox)
} }
@ -73,8 +90,6 @@ HuesUI.prototype.hide = function() {
HuesUI.prototype.resize = function() {} HuesUI.prototype.resize = function() {}
HuesUI.prototype.modeUpdated = function() {} HuesUI.prototype.modeUpdated = function() {}
HuesUI.prototype.beat = function() {} HuesUI.prototype.beat = function() {}
HuesUI.prototype.updateTime = function() {}
HuesUI.prototype.blurUpdated = function(x, y) {}
HuesUI.prototype.setSongText = function() { HuesUI.prototype.setSongText = function() {
var song = this.core.currentSong; var song = this.core.currentSong;
@ -93,7 +108,7 @@ HuesUI.prototype.setImageText = function() {
return; return;
this.imageLink.textContent = image.fullname.toUpperCase(); this.imageLink.textContent = image.fullname.toUpperCase();
this.imageLink.href = image.source; this.imageLink.href = image.source ? image.source : "";
} }
HuesUI.prototype.setColourText = function(colour) { HuesUI.prototype.setColourText = function(colour) {
@ -108,8 +123,24 @@ HuesUI.prototype.updateLists = function() {
// TODO display this // TODO display this
} }
HuesUI.prototype.updateTexts = function() { HuesUI.prototype.blurUpdated = function(x, y) {
// Timer, beat counter 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.container = null;
this.mode = null; this.mode = null;
this.beatBar = null; this.beatBar = null;
this.beatCount = null;
this.timer = null;
this.colourIndex = null; this.colourIndex = null;
this.version = null; this.version = null;
HuesUI.call(this); HuesUI.call(this);
@ -142,21 +171,9 @@ RetroUI.prototype.initUI = function() {
this.mode = doc.createElement("div"); this.mode = doc.createElement("div");
container.appendChild(this.mode); container.appendChild(this.mode);
container.appendChild(this.imageName); container.appendChild(this.imageName);
this.timer = doc.createElement("div");
this.timer.textContent = "T=$0x0000";
container.appendChild(this.timer); container.appendChild(this.timer);
this.beatCount = doc.createElement("div");
this.beatCount.textContent = "B=$0x00";
container.appendChild(this.beatCount); container.appendChild(this.beatCount);
this.xBlur = doc.createElement("div");
this.xBlur.textContent = "X=$0x00";
container.appendChild(this.xBlur); container.appendChild(this.xBlur);
this.yBlur = doc.createElement("div");
this.yBlur.textContent = "Y=$0x00";
container.appendChild(this.yBlur); container.appendChild(this.yBlur);
this.colourIndex = doc.createElement("div"); this.colourIndex = doc.createElement("div");
@ -184,13 +201,6 @@ RetroUI.prototype.modeUpdated = function() {
this.mode.textContent = "M=" + this.core.getCurrentMode(); 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() { RetroUI.prototype.setImageText = function() {
var image = this.core.currentImage; var image = this.core.currentImage;
@ -216,18 +226,6 @@ RetroUI.prototype.beat = function() {
this.beatCount.textContent = "B=" + this.intToHex2(this.core.getSafeBeatIndex()); 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() { function ModernUI() {
this.beatBar = null; this.beatBar = null;
this.beatLeft = null; this.beatLeft = null;
@ -235,6 +233,8 @@ function ModernUI() {
this.beatCenter = null; this.beatCenter = null;
this.rightBox = null; this.rightBox = null;
this.leftBox = null; this.leftBox = null;
this.rightInfo = null;
this.leftInfo = null;
this.controls = null; this.controls = null;
HuesUI.call(this); HuesUI.call(this);
@ -271,6 +271,19 @@ ModernUI.prototype.initUI = function() {
controls.appendChild(rightBox); controls.appendChild(rightBox);
this.rightBox = 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"); var beatBar = doc.createElement("div");
beatBar.className = "hues-m-beatbar"; beatBar.className = "hues-m-beatbar";
this.root.appendChild(beatBar); this.root.appendChild(beatBar);
@ -310,6 +323,7 @@ ModernUI.prototype.beat = function() {
span.textContent = current; span.textContent = current;
this.beatCenter.appendChild(span); this.beatCenter.appendChild(span);
} }
this.beatCount.textContent = "B=" + this.intToHex4(this.core.getSafeBeatIndex());
} }
ModernUI.prototype.setSongText = function() { ModernUI.prototype.setSongText = function() {

Loading…
Cancel
Save