diff --git a/css/hues-h.css b/css/hues-h.css index 9ea5d51..3afd205 100644 --- a/css/hues-h.css +++ b/css/hues-h.css @@ -196,4 +196,12 @@ bottom: 0px; width:358px; height: 284px; +} + +.hues-h-vignette { + background-image: url("../img/vignette.png"); + background-size: 100% 100%; + width: 100%; + height: 100%; + position: absolute; } \ No newline at end of file diff --git a/img/vignette.png b/img/vignette.png new file mode 100644 index 0000000..e697d8a Binary files /dev/null and b/img/vignette.png differ diff --git a/js/HuesCore.js b/js/HuesCore.js index 2bb87eb..e628652 100644 --- a/js/HuesCore.js +++ b/js/HuesCore.js @@ -460,6 +460,7 @@ HuesCore.prototype.setInvert = function(invert) { document.documentElement.style.filter = ""; document.documentElement.style.webkitFilter = ""; } + this.userInterface.invert(invert); } HuesCore.prototype.toggleInvert = function() { diff --git a/js/HuesUI.js b/js/HuesUI.js index 2ef361f..1804872 100644 --- a/js/HuesUI.js +++ b/js/HuesUI.js @@ -188,6 +188,7 @@ HuesUI.prototype.resize = function() {}; HuesUI.prototype.modeUpdated = function() {}; HuesUI.prototype.beat = function() {}; HuesUI.prototype.updateVolume = function(vol) {}; +HuesUI.prototype.invert = function(invert) {}; HuesUI.prototype.setSongText = function() { var song = this.core.currentSong; @@ -979,6 +980,10 @@ HalloweenUI.prototype.initUI = function() { var rightHand = document.createElement("div"); rightHand.className = "hues-h-right-hand"; this.beatBar.appendChild(rightHand); + + this.vignette = document.createElement("div"); + this.vignette.className = "hues-h-vignette"; + this.root.appendChild(this.vignette); } HalloweenUI.prototype.beat = function() { @@ -991,6 +996,16 @@ HalloweenUI.prototype.beat = function() { } } +HalloweenUI.prototype.invert = function(invert) { + if(invert) { + this.vignette.style.filter = "invert(100%)"; + this.vignette.style.webkitFilter = "invert(100%)"; + } else { + this.vignette.style.filter = ""; + this.vignette.style.webkitFilter = ""; + } +}; + // Positions and angles for the Xmas lights var xleft = [ {"angle": 122.529582194, "x": 19.4, "y": -19.35},