Add hiding for UI, optimise CSS some

serial
William Toohey 10 years ago
parent aba89f91c1
commit f85b644506
  1. 54
      css/hues-m.css
  2. 89
      css/hues-r.css
  3. 53
      css/hues-w.css
  4. 25
      css/hues-x.css
  5. 30
      css/style.css
  6. 13
      index.html
  7. 17
      js/HuesCore.js
  8. 17
      js/HuesSettings.js
  9. 269
      js/HuesUI.js
  10. 6
      js/ResourcePack.js
  11. 18
      js/SoundManager.js

@ -5,6 +5,30 @@
font-family: 'PetMe64Web'; font-family: 'PetMe64Web';
} }
.hues-m-beatbar, .hues-m-beatcenter{
transform: translateY(0px);
-webkit-transform: translateY(0px);
transition: transform 1s linear;
-webkit-transition: transform 1s linear;
}
.hues-m-controls {
transform: translateY(0px);
-webkit-transform: translateY(0px);
transition: transform 1s linear;
-webkit-transition: transform 1s linear;
}
.hues-m-beatbar.hidden, .hues-m-beatcenter.hidden{
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
}
.hues-m-controls.hidden {
transform: translateY(104px);
-webkit-transform: translateY(104px);
}
.hues-m-beatbar { .hues-m-beatbar {
position: absolute; position: absolute;
top: 0; top: 0;
@ -198,7 +222,7 @@
} }
.hues-m-controlblock { .hues-m-controlblock {
/* It gets selected by accident somehow */ /* Don't want double click to select */
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-khtml-user-select: none; -khtml-user-select: none;
@ -229,7 +253,7 @@
.hues-m-prevbutton, .hues-m-nextbutton { .hues-m-prevbutton, .hues-m-nextbutton {
color: white; color: white;
background: rgba(0,0,0,0.7); background: rgb(32,32,32);
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
font-size: 12px; font-size: 12px;
@ -255,7 +279,7 @@
width: 40px; width: 40px;
left: 15px; left: 15px;
color: white; color: white;
background: rgb(64,64,64); background: rgb(32,32,32);
font-size: 20px; font-size: 20px;
line-height: 40px; line-height: 40px;
border-radius: 20px; border-radius: 20px;
@ -267,15 +291,33 @@
bottom: 5px; bottom: 5px;
} }
.hues-m-question, .hues-m-cog {
cursor: pointer;
}
.hues-m-cog {
position: absolute;
left: 8px;
top: 5px;
font-size: 25px;
}
.hues-m-question {
position: absolute;
right: 8px;
top: 8px;
font-size: 25px;
}
.hues-m-vol-bar { .hues-m-vol-bar {
position: absolute; position: absolute;
height: 20px; height: 20px;
bottom: 21px; bottom: 21px;
left: 32px; left: 40px;
right: 32px; right: 40px;
} }
.hues-m-vol-bar > button { .hues-m-vol-label {
display: block; display: block;
position: absolute; position: absolute;
left: 0; left: 0;

@ -1,14 +1,13 @@
/* TODO: Fix scrollbar */ /* TODO: Fix scrollbar */
.RetroUI { .RetroUI {
font-family: 'PetMe64Web';
} }
.hues-r-container { .hues-r-container {
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
white-space: nowrap; white-space: nowrap;
font-family: 'PetMe64Web';
font-size: 5pt; font-size: 5pt;
} }
@ -17,4 +16,90 @@
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
overflow: hidden; overflow: hidden;
}
.hues-r-controls {
display:flex;
align-items:center;
position: absolute;
right: 0px;
bottom: 10px;
font-size: 30px;
}
.hues-r-button {
float: left;
cursor: pointer;
text-align: center;
opacity: 0.5;
}
.hues-r-button:hover {
opacity: 1;
}
.hues-r-songs {
font-size: 13px;
margin: 0px -8px;
}
.hues-r-manualmode, .hues-r-automode {
float: none;
clear: both;
}
.hues-r-manualmode {
font-size: 15px;
}
.hues-r-automode {
font-size: 10px;
}
.hues-r-subcontrols {
position: absolute;
right: 0px;
bottom: 40px;
font-size: 25px;
text-align: center;
}
.hues-r-subcontrols > div{
margin: 3px;
cursor: pointer;
opacity: 0.5;
}
.hues-r-subcontrols > div:hover {
opacity: 1;
}
.hues-r-hiderestore {
position: absolute;
bottom: 5px;
right: 5px;
display: none;
font-size: 25px;
cursor: pointer;
opacity: 0.5;
}
.hues-r-hiderestore.hidden {
display: block;
}
.hues-r-hiderestore:hover {
opacity: 1;
}
.hues-r-container, .hues-r-controls, .hues-r-subcontrols {
transform: translateY(0px);
-webkit-transform: translateY(0px);
transition: transform 1s linear;
-webkit-transition: transform 1s linear;
}
.hues-r-container.hidden, .hues-r-controls.hidden, .hues-r-subcontrols.hidden {
transform: translateY(200px);
-webkit-transform: translateY(200px);
} }

@ -1,9 +1,58 @@
/* TODO: Fix scrollbar */
.WeedUI { .WeedUI {
font-family: 'PetMe64Web'; font-family: 'PetMe64Web';
} }
.hues-w-controls {
display:flex;
align-items:center;
position: absolute;
right: 0px;
bottom: 0px;
font-size: 30px;
}
.hues-w-subcontrols {
position: absolute;
right: 0px;
bottom: 30px;
font-size: 25px;
text-align: center;
}
.hues-w-subcontrols > div{
margin: 3px;
cursor: pointer;
opacity: 0.5;
}
.hues-w-subcontrols > div:hover {
opacity: 1;
}
.hues-w-controls, .hues-w-subcontrols {
transform: translateY(0px);
-webkit-transform: translateY(0px);
transition: transform 1s linear;
-webkit-transition: transform 1s linear;
}
.hues-w-controls.hidden, .hues-w-subcontrols.hidden {
transform: translateY(200px);
-webkit-transform: translateY(200px);
}
.hues-w-beatbar {
transform: translateY(0px);
-webkit-transform: translateY(0px);
transition: transform 1s linear;
-webkit-transition: transform 1s linear;
}
.hues-w-beatbar.hidden {
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
}
.hues-w-beatleft, .hues-w-beatright { .hues-w-beatleft, .hues-w-beatright {
font-size: 13px; font-size: 13px;
position: absolute; position: absolute;

@ -27,4 +27,29 @@
left: 8px; left: 8px;
right: 8px; right: 8px;
color: white; color: white;
}
.hues-x-beatbar{
transform: translateY(0px);
-webkit-transform: translateY(0px);
transition: transform 1s linear;
-webkit-transition: transform 1s linear;
}
.hues-x-controls {
transform: translateY(0px);
-webkit-transform: translateY(0px);
transition: transform 1s linear;
-webkit-transition: transform 1s linear;
}
.hues-x-beatbar.hidden{
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
}
.hues-x-controls.hidden {
transform: translateY(104px);
-webkit-transform: translateY(104px);
} }

@ -86,14 +86,13 @@ h1, h2, h3 {
top: 0; top: 0;
left: 0; left: 0;
z-index: 10; z-index: 10;
opacity: 1;
transition: opacity 2s linear;
-webkit-transition: opacity 2s linear;
} }
#preloadHelper.loaded { #preloadHelper.loaded {
opacity: 0; opacity: 0;
animation-name: fadeout;
animation-duration: 1s;
-webkit-animation-name: fadeout;
-webkit-animation-duration: 3s;
} }
#preloader { #preloader {
@ -159,13 +158,6 @@ input.tab-input[type="radio"]:checked + label {
border-width: 2px; border-width: 2px;
border-style: solid; border-style: solid;
font-family: 'PetMe64Web'; font-family: 'PetMe64Web';
/* It gets selected by accident somehow */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} }
#huesSettings { #huesSettings {
@ -182,6 +174,13 @@ input.tab-input[type="radio"]:checked + label {
.settings-buttons{ .settings-buttons{
margin: 10px 2px 10px 0px; margin: 10px 2px 10px 0px;
/* Don't want double click to select */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} }
.settings-checkbox{ .settings-checkbox{
@ -205,13 +204,4 @@ label.settings-label:hover {
#huesSettings input[type="radio"]:checked + label { #huesSettings input[type="radio"]:checked + label {
background: rgba(255,255,255, 0.5); background: rgba(255,255,255, 0.5);
}
@keyframes fadeout {
from {opacity: 1;}
to {opacity: 0;}
}
@-webkit-keyframes fadeout {
from {opacity: 1;}
to {opacity: 0;}
} }

@ -22,9 +22,10 @@
window.onload = function() { window.onload = function() {
zip.workerScriptsPath = "js/lib/"; zip.workerScriptsPath = "js/lib/";
var defaults = { var defaults = {
respacks : ["./respacks/Defaults_v5.0.zip", respacks : [//"./respacks/Defaults_v5.0.zip",
"./respacks/CharPackagev0.03.zip", "./respacks/CharPackagev0.03.zip",
"./respacks/HuesMixA.zip"], //"./respacks/HuesMixB.zip",
"./respacks/PackShit.zip"],
load : false, //debug load : false, //debug
autoplay : false // debug autoplay : false // debug
}; };
@ -44,10 +45,10 @@
<div id="tabs"> <div id="tabs">
<input class="tab-input" type="radio" name="tabs" id="tab1"> <input class="tab-input" type="radio" name="tabs" id="tab1">
<label class="tab-label" for="tab1">RESOURCES</label> <label class="tab-label" for="tab1">RESOURCES</label>
<input class="tab-input" type="radio" name="tabs" id="tab2" > <input class="tab-input" type="radio" name="tabs" id="tab2" checked>
<label class="tab-label" for="tab2">OPTIONS</label> <label class="tab-label" for="tab2">OPTIONS</label>
<input class="tab-input" type="radio" name="tabs" id="tab3" checked> <input class="tab-input" type="radio" name="tabs" id="tab3">
<label class="tab-label" for="tab3">ABOUT</label> <label class="tab-label" for="tab3">INFO</label>
<div id="tab1-content" class="tab-content"> <div id="tab1-content" class="tab-content">
Soon Soon
</div> </div>
@ -77,7 +78,6 @@
<li>O Horizontal blur only</li> <li>O Horizontal blur only</li>
<li>~ Fade color</li> <li>~ Fade color</li>
<li>= Fade and change image</li> <li>= Fade and change image</li>
<li>¤ Whiteout</li>
</ul> </ul>
</div> </div>
@ -95,7 +95,6 @@
<li>[S] Song list</li> <li>[S] Song list</li>
<li>[W] Toggle window</li> <li>[W] Toggle window</li>
<li>[R] Resource packs</li> <li>[R] Resource packs</li>
<li>[E] Editor</li>
<li>[O] Options</li> <li>[O] Options</li>
<li>[I] Information</li> <li>[I] Information</li>
<li>[1-4] Change UI</li> <li>[1-4] Change UI</li>

@ -16,6 +16,13 @@ HuesCore = function(defaults) {
this.doBuildup=true; this.doBuildup=true;
this.userInterface = null; this.userInterface = null;
var that = this;
window.onerror = function(msg, url, line, col, error) {
that.error(msg);
// Get more info in console
return false;
};
console.log("0x40 Hues - start your engines!"); console.log("0x40 Hues - start your engines!");
this.colours = this.oldColours; this.colours = this.oldColours;
this.uiArray = []; this.uiArray = [];
@ -24,7 +31,7 @@ HuesCore = function(defaults) {
this.settings = new HuesSettings(defaults); this.settings = new HuesSettings(defaults);
//this.autoSong = this.settings.autosong; //this.autoSong = this.settings.autosong;
this.resourceManager = new Resources(); this.resourceManager = new Resources();
this.soundManager = new SoundManager(); this.soundManager = new SoundManager(this);
if(!this.soundManager.canUse) { if(!this.soundManager.canUse) {
this.error("Web Audio API not supported in this browser."); this.error("Web Audio API not supported in this browser.");
return; return;
@ -34,7 +41,6 @@ HuesCore = function(defaults) {
this.uiArray.push(new RetroUI(), new WeedUI(), new ModernUI(), new XmasUI()); this.uiArray.push(new RetroUI(), new WeedUI(), new ModernUI(), new XmasUI());
this.settings.connectCore(this); this.settings.connectCore(this);
var that = this;
if(defaults.load) { if(defaults.load) {
this.resourceManager.addAll(defaults.respacks, function() { this.resourceManager.addAll(defaults.respacks, function() {
document.getElementById("preloadHelper").className = "loaded"; document.getElementById("preloadHelper").className = "loaded";
@ -68,13 +74,6 @@ HuesCore = function(defaults) {
return that.keyHandler(key); return that.keyHandler(key);
}; };
window.onerror = function(msg, url, line, col, error) {
that.error(msg);
// Get more info in console
return false;
};
this.animationLoop(); this.animationLoop();
} }

@ -11,7 +11,7 @@ HuesSettings.prototype.defaultSettings = {
smartAlign: "on", smartAlign: "on",
blurAmount: "medium", blurAmount: "medium",
blurDecay: "fast", blurDecay: "fast",
blurQuality: "high", blurQuality: "medium",
currentUI: "modern", currentUI: "modern",
colourSet: "normal", colourSet: "normal",
blackoutUI: "off", blackoutUI: "off",
@ -120,6 +120,21 @@ HuesSettings.prototype.toggle = function() {
} }
} }
HuesSettings.prototype.showRespacks = function() {
this.show();
document.getElementById("tab1").checked = true;
}
HuesSettings.prototype.showOptions = function() {
this.show();
document.getElementById("tab2").checked = true;
}
HuesSettings.prototype.showInfo = function() {
this.show();
document.getElementById("tab3").checked = true;
}
HuesSettings.prototype.initUI = function() { HuesSettings.prototype.initUI = function() {
var doc = this.root.ownerDocument; var doc = this.root.ownerDocument;

@ -22,6 +22,11 @@ function HuesUI(parent) {
this.hueName = null; this.hueName = null;
this.imagePrev = null;
this.imageNext = null;
this.songPrev = null;
this.songNext = null;
this.volInput = null; this.volInput = null;
this.volLabel = null; this.volLabel = null;
@ -30,11 +35,17 @@ function HuesUI(parent) {
this.xBlur = null; this.xBlur = null;
this.yBlur = null; this.yBlur = null;
this.settingsToggle = null;
this.hideToggle = null;
this.hidden = false;
this.initUI(); this.initUI();
} }
HuesUI.prototype.initUI = function() { HuesUI.prototype.initUI = function() {
var doc = this.root.ownerDocument var doc = this.root.ownerDocument
var that = this;
// Major info, image, song names // Major info, image, song names
var imageName = doc.createElement("div"); var imageName = doc.createElement("div");
@ -54,6 +65,33 @@ HuesUI.prototype.initUI = function() {
var hueName = doc.createElement("div"); var hueName = doc.createElement("div");
this.hueName = hueName; this.hueName = hueName;
// Prev/next controls
var imagePrev = doc.createElement("div");
imagePrev.textContent = "<";
imagePrev.onclick = function() {that.core.previousImage();};
this.imagePrev = imagePrev;
var imageNext = doc.createElement("div");
imageNext.textContent = ">";
imageNext.onclick = function() {that.core.nextImage();};
this.imageNext = imageNext;
var songPrev = doc.createElement("div");
songPrev.textContent = "<";
this.songPrev = songPrev;
songPrev.onclick = function() {that.core.previousSong();};
var songNext = doc.createElement("div");
songNext.textContent = ">";
songNext.onclick = function() {that.core.nextSong();};
this.songNext = songNext;
var songList = document.createElement("div");
songList.textContent = "SONGS";
songList.onclick = function() {that.core.toggleSongList()};
this.songList = songList;
var imageList = document.createElement("div");
imageList.textContent = "IMAGES";
imageList.onclick = function() {that.core.toggleImageList()};
this.imageList = imageList;
// Beat timer, x and y blur, millis timer // Beat timer, x and y blur, millis timer
this.timer = doc.createElement("div"); this.timer = doc.createElement("div");
this.timer.textContent = "T=$0x0000"; this.timer.textContent = "T=$0x0000";
@ -66,8 +104,19 @@ HuesUI.prototype.initUI = function() {
this.yBlur = doc.createElement("div"); this.yBlur = doc.createElement("div");
this.yBlur.textContent = "Y=$0x00"; this.yBlur.textContent = "Y=$0x00";
//this.setupVolume(leftBox) // Config stuff
this.settingsToggle = doc.createElement("div");
this.settingsToggle.innerHTML = '<i class="fa fa-cog"></i>';
this.settingsToggle.onclick = function() {
that.core.settings.toggle();
}
this.hideToggle = doc.createElement("div");
this.hideToggle.innerHTML = "&#x25BC;";
this.hideToggle.onclick = function() {
that.toggleHide();
}
} }
HuesUI.prototype.connectCore = function(core) { HuesUI.prototype.connectCore = function(core) {
@ -80,18 +129,30 @@ HuesUI.prototype.disconnect = function() {
this.root.style.display = "none"; this.root.style.display = "none";
} }
// ONLY FOR CHANGING UI, NOT FOR "HIDE" FEATURE
HuesUI.prototype.show = function() { HuesUI.prototype.show = function() {
this.root.style.display = "block"; this.root.style.display = "block";
} }
// ONLY FOR CHANGING UI, NOT FOR "HIDE" FEATURE
HuesUI.prototype.hide = function() { HuesUI.prototype.hide = function() {
this.root.style.display = "none"; this.root.style.display = "none";
} }
HuesUI.prototype.toggleHide = function() {
this.hidden = !this.hidden;
if(this.hidden) {
this.root.className = this.constructor.name + " hidden";
} else {
this.root.className = this.constructor.name;
}
}
// May do nothing, may scale elements if needed etc etc // May do nothing, may scale elements if needed etc etc
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.updateVolume = function(vol) {}
HuesUI.prototype.setSongText = function() { HuesUI.prototype.setSongText = function() {
var song = this.core.currentSong; var song = this.core.currentSong;
@ -108,8 +169,10 @@ HuesUI.prototype.setImageText = function() {
if(!image) if(!image)
return; return;
var name = image.fullname ? image.fullname : image.name;
this.imageLink.textContent = image.fullname.toUpperCase(); this.imageLink.textContent = name.toUpperCase();
this.imageLink.href = image.source ? image.source : ""; this.imageLink.href = image.source ? image.source : "";
} }
@ -155,6 +218,10 @@ function RetroUI() {
this.beatBar = null; this.beatBar = null;
this.colourIndex = null; this.colourIndex = null;
this.version = null; this.version = null;
this.imageModeAuto = null;
this.imageModeAuto = null;
this.subControls = null;
HuesUI.call(this); HuesUI.call(this);
} }
RetroUI.prototype = Object.create(HuesUI.prototype); RetroUI.prototype = Object.create(HuesUI.prototype);
@ -164,6 +231,7 @@ RetroUI.prototype.initUI = function() {
HuesUI.prototype.initUI.call(this); HuesUI.prototype.initUI.call(this);
var doc = this.root.ownerDocument; var doc = this.root.ownerDocument;
var that = this;
var container = doc.createElement("div"); var container = doc.createElement("div");
container.className = "hues-r-container"; container.className = "hues-r-container";
@ -190,6 +258,70 @@ RetroUI.prototype.initUI = function() {
this.beatBar = doc.createElement("div"); this.beatBar = doc.createElement("div");
container.appendChild(this.beatBar); container.appendChild(this.beatBar);
this.controls = doc.createElement("div");
this.controls.className = "hues-r-controls";
var imageMode = doc.createElement("div");
this.imageModeManual = doc.createElement("div");
this.imageModeManual.textContent = "NORMAL";
this.imageModeManual.onclick = function() {that.core.setIsFullAuto(false);};
this.imageModeManual.className = "hues-r-manualmode hues-r-button";
this.imageModeAuto = doc.createElement("div");
this.imageModeAuto.textContent = "FULL AUTO";
this.imageModeAuto.onclick = function() {that.core.setIsFullAuto(true);};
this.imageModeAuto.className = "hues-r-automode hues-r-button";
imageMode.appendChild(this.imageModeManual);
imageMode.appendChild(this.imageModeAuto);
this.imagePrev.className = "hues-r-button";
this.imageNext.className = "hues-r-button";
this.songPrev.className = "hues-r-button";
this.songNext.className = "hues-r-button";
this.controls.appendChild(this.imagePrev);
this.controls.appendChild(imageMode);
this.controls.appendChild(this.imageNext);
this.songList.className = "hues-r-songs hues-r-button";
this.controls.appendChild(this.songPrev);
this.controls.appendChild(this.songList);
this.controls.appendChild(this.songNext);
this.root.appendChild(this.controls);
var subControl = doc.createElement("div");
subControl.className = "hues-r-subcontrols";
subControl.appendChild(this.settingsToggle);
this.imageList.textContent = "C";
subControl.appendChild(this.imageList);
subControl.appendChild(this.hideToggle);
this.subControls = subControl;
this.root.appendChild(subControl);
this.hideRestore = doc.createElement("div");
this.hideRestore.className = "hues-r-hiderestore";
this.hideRestore.innerHTML = "&#x25B2;";
this.hideRestore.onclick = function() {
that.toggleHide();
}
this.root.appendChild(this.hideRestore);
}
RetroUI.prototype.toggleHide = function(stylename) {
stylename = stylename ? stylename : 'r';
if(this.hidden) {
this.subControls.className = "hues-" + stylename + "-subcontrols";
this.controls.className = "hues-" + stylename + "-controls";
this.container.className = "hues-r-container";
this.hideRestore.className = "hues-r-hiderestore";
} else {
this.subControls.className = "hues-" + stylename + "-subcontrols hidden";
this.controls.className = "hues-" + stylename + "-controls hidden";
this.container.className = "hues-r-container hidden";
this.hideRestore.className = "hues-r-hiderestore hidden";
}
this.hidden = !this.hidden;
} }
RetroUI.prototype.connectCore = function(core) { RetroUI.prototype.connectCore = function(core) {
@ -238,8 +370,11 @@ function ModernUI() {
this.rightInfo = null; this.rightInfo = null;
this.leftInfo = null; this.leftInfo = null;
this.controls = null; this.controls = null;
this.volInput = null;
HuesUI.call(this); HuesUI.call(this);
this.hidden = 0; // we have a 3 stage hide
} }
ModernUI.prototype = Object.create(HuesUI.prototype); ModernUI.prototype = Object.create(HuesUI.prototype);
ModernUI.prototype.constructor = ModernUI; ModernUI.prototype.constructor = ModernUI;
@ -269,6 +404,41 @@ ModernUI.prototype.initUI = function() {
this.hueName.className = "hues-m-huename"; this.hueName.className = "hues-m-huename";
leftBox.appendChild(this.hueName); leftBox.appendChild(this.hueName);
var volCluster = doc.createElement("div");
volCluster.className = "hues-m-vol-cluster";
leftBox.appendChild(volCluster);
this.settingsToggle.className = "hues-m-cog";
volCluster.appendChild(this.settingsToggle);
var volBar = doc.createElement("div");
volBar.className = "hues-m-vol-bar";
volCluster.appendChild(volBar);
var label = doc.createElement("div");
label.textContent = "VOL";
label.className = "hues-m-vol-label";
volBar.appendChild(label);
var infoToggle = doc.createElement("div");
infoToggle.innerHTML = '?';
infoToggle.className = "hues-m-question";
infoToggle.onclick = function() {
that.core.settings.showInfo();
}
volCluster.appendChild(infoToggle);
var input = doc.createElement("input");
input.type = "range";
input.min = 0;
input.max = 1;
input.step = 0.1;
volBar.appendChild(input);
this.volInput = input;
input.oninput = function() {
that.core.soundManager.setVolume(parseFloat(input.value));
}
var rightBox = doc.createElement("div"); var rightBox = doc.createElement("div");
rightBox.className = "hues-m-rightbox"; rightBox.className = "hues-m-rightbox";
controls.appendChild(rightBox); controls.appendChild(rightBox);
@ -277,28 +447,20 @@ ModernUI.prototype.initUI = function() {
//Song/image controls //Song/image controls
var songs = doc.createElement("div"); var songs = doc.createElement("div");
songs.className = "hues-m-controlblock"; songs.className = "hues-m-controlblock";
var songList = document.createElement("div"); this.songList.className = "hues-m-songbutton";
songList.textContent = "SONGS";
songList.className = "hues-m-songbutton";
var songControls = doc.createElement("div"); var songControls = doc.createElement("div");
songControls.className = "hues-m-controlbuttons"; songControls.className = "hues-m-controlbuttons";
var songLeft = doc.createElement("div"); this.songPrev.className = "hues-m-prevbutton"
songLeft.textContent = "<"; this.songNext.className = "hues-m-nextbutton"
songLeft.className = "hues-m-prevbutton"
songLeft.onclick = function() {that.core.previousSong();};
var songRight = doc.createElement("div");
songRight.textContent = ">";
songRight.className = "hues-m-nextbutton"
songRight.onclick = function() {that.core.nextSong();};
var songShuffle = doc.createElement("div"); var songShuffle = doc.createElement("div");
songShuffle.innerHTML = '<i class="fa fa-random"></i>'; songShuffle.innerHTML = '<i class="fa fa-random"></i>';
songShuffle.className = "hues-m-actbutton"; songShuffle.className = "hues-m-actbutton";
songShuffle.onclick = function() {that.core.randomSong();}; songShuffle.onclick = function() {that.core.randomSong();};
songs.appendChild(songList); songs.appendChild(this.songList);
songControls.appendChild(songLeft); songControls.appendChild(this.songPrev);
songControls.appendChild(songShuffle); songControls.appendChild(songShuffle);
songControls.appendChild(songRight); songControls.appendChild(this.songNext);
songs.appendChild(songControls); songs.appendChild(songControls);
rightBox.appendChild(songs); rightBox.appendChild(songs);
@ -310,22 +472,17 @@ ModernUI.prototype.initUI = function() {
var imageControls = doc.createElement("div"); var imageControls = doc.createElement("div");
imageControls.className = "hues-m-controlbuttons"; imageControls.className = "hues-m-controlbuttons";
var imageLeft = doc.createElement("div");
imageLeft.textContent = "<";
imageLeft.className = "hues-m-prevbutton"
imageLeft.onclick = function() {that.core.previousImage();};
var imageRight = doc.createElement("div");
imageRight.textContent = ">";
imageRight.className = "hues-m-nextbutton"
imageRight.onclick = function() {that.core.nextImage();};
this.imageMode = doc.createElement("div"); this.imageMode = doc.createElement("div");
this.imageMode.innerHTML = "&#9654;"; // PLAY this.imageMode.innerHTML = "&#9654;"; // PLAY
this.imageMode.className = "hues-m-actbutton"; this.imageMode.className = "hues-m-actbutton";
this.imageMode.onclick = function() {that.core.toggleFullAuto();}; this.imageMode.onclick = function() {that.core.toggleFullAuto();};
this.imagePrev.className = "hues-m-prevbutton";
this.imageNext.className = "hues-m-nextbutton";
images.appendChild(imageList); images.appendChild(imageList);
imageControls.appendChild(imageLeft); imageControls.appendChild(this.imagePrev);
imageControls.appendChild(this.imageMode); imageControls.appendChild(this.imageMode);
imageControls.appendChild(imageRight); imageControls.appendChild(this.imageNext);
images.appendChild(imageControls); images.appendChild(imageControls);
rightBox.appendChild(images); rightBox.appendChild(images);
@ -337,6 +494,8 @@ ModernUI.prototype.initUI = function() {
leftInfo.appendChild(this.yBlur); leftInfo.appendChild(this.yBlur);
rightInfo.appendChild(this.timer); rightInfo.appendChild(this.timer);
rightInfo.appendChild(this.beatCount); rightInfo.appendChild(this.beatCount);
this.rightInfo = rightInfo
this.leftInfo = leftInfo;
controls.appendChild(leftInfo); controls.appendChild(leftInfo);
controls.appendChild(rightInfo); controls.appendChild(rightInfo);
@ -361,6 +520,24 @@ ModernUI.prototype.initUI = function() {
this.beatCenter = beatCenter; this.beatCenter = beatCenter;
} }
ModernUI.prototype.toggleHide = function() {
this.beatBar.className = "hues-m-beatbar";
this.beatCenter.className = "hues-m-beatcenter";
this.controls.className = "hues-m-controls";
switch(this.hidden) {
case 1:
this.beatBar.className = "hues-m-beatbar hidden";
this.beatCenter.className = "hues-m-beatcenter hidden";
case 0:
this.controls.className = "hues-m-controls hidden";
}
this.hidden = (this.hidden+1) % 3;
}
ModernUI.prototype.updateVolume = function(vol) {
this.volInput.value = vol;
}
ModernUI.prototype.modeUpdated = function() { ModernUI.prototype.modeUpdated = function() {
if(this.core.isFullAuto) { if(this.core.isFullAuto) {
this.imageMode.innerHTML = '<i class="fa fa-pause"></i>'; // PAUSE; this.imageMode.innerHTML = '<i class="fa fa-pause"></i>'; // PAUSE;
@ -439,6 +616,9 @@ WeedUI.prototype.initUI = function() {
this.container.removeChild(this.beatBar) this.container.removeChild(this.beatBar)
var doc = this.root.ownerDocument; var doc = this.root.ownerDocument;
this.controls.className = "hues-w-controls";
this.subControls.className = "hues-w-subcontrols";
var beatBar = doc.createElement("div"); var beatBar = doc.createElement("div");
beatBar.className = "hues-w-beatbar"; beatBar.className = "hues-w-beatbar";
this.root.appendChild(beatBar); this.root.appendChild(beatBar);
@ -453,6 +633,18 @@ WeedUI.prototype.initUI = function() {
beatRight.className = "hues-w-beatright"; beatRight.className = "hues-w-beatright";
beatBar.appendChild(beatRight); beatBar.appendChild(beatRight);
this.beatRight = beatRight; this.beatRight = beatRight;
this.imageModeManual.textContent = "ONE";
this.imageModeAuto.textContent = "MANY";
}
WeedUI.prototype.toggleHide = function() {
if(this.hidden) {
this.beatBar.className = "hues-w-beatbar";
} else {
this.beatBar.className = "hues-w-beatbar hidden";
}
RetroUI.prototype.toggleHide.call(this, 'w');
} }
WeedUI.prototype.beat = function() { WeedUI.prototype.beat = function() {
@ -497,8 +689,11 @@ function XmasUI() {
this.controls.removeChild(this.leftBox); this.controls.removeChild(this.leftBox);
this.controls.removeChild(this.rightBox); this.controls.removeChild(this.rightBox);
this.controls.removeChild(this.rightInfo);
this.controls.removeChild(this.leftInfo);
this.leftBox = this.rightBox = this.hueName = null; this.leftBox = this.rightBox = this.hueName = this.xBlur = this.yBlur
= this.timer = null;
this.controls.className = "hues-x-controls"; this.controls.className = "hues-x-controls";
this.beatBar.className = "hues-x-beatbar"; this.beatBar.className = "hues-x-beatbar";
@ -506,4 +701,20 @@ function XmasUI() {
XmasUI.prototype = Object.create(ModernUI.prototype); XmasUI.prototype = Object.create(ModernUI.prototype);
XmasUI.prototype.constructor = XmasUI; XmasUI.prototype.constructor = XmasUI;
XmasUI.prototype.setColourText = function(colour) {}; XmasUI.prototype.toggleHide = function() {
this.beatBar.className = "hues-x-beatbar";
this.beatCenter.className = "hues-m-beatcenter";
this.controls.className = "hues-x-controls";
switch(this.hidden) {
case 1:
this.beatBar.className = "hues-x-beatbar hidden";
this.beatCenter.className = "hues-m-beatcenter hidden";
case 0:
this.controls.className = "hues-x-controls hidden";
}
this.hidden = (this.hidden+1) % 3;
}
XmasUI.prototype.setColourText = function(colour) {};
XmasUI.prototype.blurUpdated = function(x, y) {};
XmasUI.prototype.updateTime = function(time) {};

@ -158,7 +158,7 @@ Respack.prototype.parseXML = function() {
if (this._songFile) { if (this._songFile) {
this._songFile.getText(function(text) { this._songFile.getText(function(text) {
//XML parser will complain about a bare '&' //XML parser will complain about a bare '&'
text = text.replace(/&/g, '&amp;amp;'); text = text.replace(/&/g, '&amp;');
that.parseSongFile(text); that.parseSongFile(text);
// Go to next in series // Go to next in series
that._songFile = null; that._songFile = null;
@ -173,7 +173,7 @@ Respack.prototype.parseXML = function() {
} }
if (this.images.length > 0 && this._imageFile) { if (this.images.length > 0 && this._imageFile) {
this._imageFile.getText(function(text) { this._imageFile.getText(function(text) {
text = text.replace(/&/g, '&amp;amp;'); text = text.replace(/&/g, '&amp;');
that.parseImageFile(text); that.parseImageFile(text);
that._imageFile = null; that._imageFile = null;
that.parseXML(); that.parseXML();
@ -182,7 +182,7 @@ Respack.prototype.parseXML = function() {
} }
if (this._infoFile) { if (this._infoFile) {
this._infoFile.getText(function(text) { this._infoFile.getText(function(text) {
text = text.replace(/&/g, '&amp;amp;'); text = text.replace(/&/g, '&amp;');
that.parseInfoFile(text); that.parseInfoFile(text);
that._infoFile = null; that._infoFile = null;
that.parseXML(); that.parseXML();

@ -1,7 +1,8 @@
var LAME_DELAY_START = 2258; var LAME_DELAY_START = 2258;
var LAME_DELAY_END = 1000; var LAME_DELAY_END = 1000;
function SoundManager() { function SoundManager(core) {
this.core = core;
this.playing = false; this.playing = false;
this.song = null; this.song = null;
@ -39,7 +40,7 @@ function SoundManager() {
} }
var that = this; var that = this;
window.addEventListener('touchstart', function() { window.addEventListener('touchend', function() {
// create empty buffer // create empty buffer
var buffer = that.context.createBuffer(1, 1, 22050); var buffer = that.context.createBuffer(1, 1, 22050);
@ -193,11 +194,11 @@ SoundManager.prototype.onSongLoad = function(song) {
// because MP3 is bad, we nuke silence // because MP3 is bad, we nuke silence
SoundManager.prototype.trimMP3 = function(buffer) { SoundManager.prototype.trimMP3 = function(buffer) {
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; /*var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
if(!isFirefox) { if(!isFirefox) {
// Webkit is better than Gecko, clearly // Webkit is better than Gecko, clearly
return buffer; return buffer;
} }*/
var ret = this.context.createBuffer(buffer.numberOfChannels, var ret = this.context.createBuffer(buffer.numberOfChannels,
buffer.length - LAME_DELAY_START - LAME_DELAY_END, buffer.sampleRate); buffer.length - LAME_DELAY_START - LAME_DELAY_END, buffer.sampleRate);
for(var i=0; i<buffer.numberOfChannels; i++) { for(var i=0; i<buffer.numberOfChannels; i++) {
@ -211,7 +212,6 @@ SoundManager.prototype.trimMP3 = function(buffer) {
} }
// This wouldn't be required if Web Audio could do gapless playback properly // This wouldn't be required if Web Audio could do gapless playback properly
// Looking at you, Firefox
SoundManager.prototype.concatenateAudioBuffers = function(buffer1, buffer2) { SoundManager.prototype.concatenateAudioBuffers = function(buffer1, buffer2) {
if (!buffer1 || !buffer2) { if (!buffer1 || !buffer2) {
console.log("no buffers!"); console.log("no buffers!");
@ -246,6 +246,7 @@ SoundManager.prototype.setMute = function(mute) {
} else if(this.mute && !mute) { // unmuting } else if(this.mute && !mute) { // unmuting
this.gainNode.gain.value = this.lastVol; this.gainNode.gain.value = this.lastVol;
} }
this.core.userInterface.updateVolume(this.gainNode.gain.value);
this.mute = mute; this.mute = mute;
} }
@ -257,10 +258,17 @@ SoundManager.prototype.decreaseVolume = function() {
this.setMute(false); this.setMute(false);
val = Math.max(this.gainNode.gain.value - 0.1, 0); val = Math.max(this.gainNode.gain.value - 0.1, 0);
this.gainNode.gain.value = val; this.gainNode.gain.value = val;
this.core.userInterface.updateVolume(val);
} }
SoundManager.prototype.increaseVolume = function() { SoundManager.prototype.increaseVolume = function() {
this.setMute(false); this.setMute(false);
val = Math.min(this.gainNode.gain.value + 0.1, 1); val = Math.min(this.gainNode.gain.value + 0.1, 1);
this.gainNode.gain.value = val; this.gainNode.gain.value = val;
this.core.userInterface.updateVolume(val);
}
SoundManager.prototype.setVolume = function(vol) {
this.gainNode.gain.value = vol;
this.core.userInterface.updateVolume(vol);
} }
Loading…
Cancel
Save