Invert no longer uses CSS filter. Much faster as a result.

src/css/hues-h.css

@@ -3,6 +3,9 @@
 .hues-h-text {
     color: #ff3300;
 }
+.inverted .hues-h-text {
+    color: #00ccff;
+}
 
 #preloadHelper.hues-h-text {
     background-color: black;
@@ -11,6 +14,9 @@
 .hues-h-textfade {
     color: rgba(255, 51, 0, 0.6);
 }
+.inverted .hues-h-textfade {
+    color: rgba(0, 204, 255, 0.6);
+}
 
 .hues-m-beatbar.hues-h-beatbar {
     border-style: none;
@@ -27,6 +33,9 @@
     box-shadow: none;
     padding-top: 21px;
 }
+.inverted .hues-m-beatcenter.hues-h-text {
+    background-position: -42px 0;
+}
 
 .hues-m-beatcenter.hues-h-text > span {
     font-size: 13px;
@@ -48,6 +57,13 @@
     animation-name: hues-m-beatcenter;
     animation-fill-mode: forwards;
 }
+.inverted .hues-h-eyes {
+    /* Set as important to override the other .inverted selector from modern */
+    background: none !important;
+    background-image: url('../img/skull-eyes.png') !important;
+    box-shadow: none !important;
+    background-position: -42px 0 !important;
+}
 
 .hues-h-left-hand {
     background: url('../img/left-hand.png');
@@ -65,6 +81,9 @@
     position: absolute;
     background-repeat: no-repeat;
 }
+.inverted .hues-h-left-hand, .inverted  .hues-h-right-hand {
+    background-position: -63px 0;
+}
 
 .hues-m-controls.hues-h-controls {
     background: none;
@@ -84,7 +103,10 @@
     background: none;
     border-style: solid;
     border-width: 0px 19px 0px 18px;
-    border-image: url(../img/bones.png) 0 19 0 18 fill repeat stretch;
+    border-image: url(../img/bones.png) 29 19 0 18 fill repeat stretch;
+}
+.inverted .hues-m-songtitle.hues-h-text, .inverted .hues-m-imagename.hues-h-text {
+    border-image-slice: 0 19 29 18 fill;
 }
 
 .hues-m-huename.hues-h-text {
@@ -132,39 +154,61 @@
 }
 
 .hues-h-tombstone {
-    border-style: solid;
-    border-width: 22px 40px 0px 42px;
-    border-image: url(../img/tombstone.png) 22 42 0 42 fill repeat;
     height: 36px;
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: -10;
+    
+    border-style: solid;
+    border-width: 22px 40px 0px 42px;
+    border-image: url(../img/tombstone.png) 22 42 0 fill stretch;
+}
+.inverted .hues-h-tombstone {
+    border-image: url(../img/tombstone_invert.png) 22 42 0 fill stretch;
 }
 
 .hues-h-text + input[type=range]::-webkit-slider-runnable-track {
     background: #ff3300;
 }
+.inverted .hues-h-text + input[type=range]::-webkit-slider-runnable-track {
+    background: #00ccff;
+}
 
 .hues-h-text + input[type=range]::-webkit-slider-thumb {
     background: #ff3300;
 }
+.inverted .hues-h-text + input[type=range]::-webkit-slider-thumb {
+    background: #00ccff;
+}
 
 .hues-h-text + input[type=range]::-moz-range-track {
     background: #ff3300;
 }
+.inverted .hues-h-text + input[type=range]::-moz-range-track {
+    background: #00ccff;
+}
 
 .hues-h-text + input[type=range]::-moz-range-thumb {
     background: #ff3300;
 }
+.inverted .hues-h-text + input[type=range]::-moz-range-thumb {
+    background: #00ccff;
+}
 
 .hues-h-text + input[type=range]::-ms-fill-lower {
     background: #ff3300;
 }
+.inverted .hues-h-text + input[type=range]::-ms-fill-lower {
+    background: #00ccff;
+}
 .hues-h-text + input[type=range]::-ms-thumb {
     background: #ff3300;
 }
+.inverted .hues-h-text + input[type=range]::-ms-thumb {
+    background: #00ccff;
+}
 
 .hues-h-topleft, .hues-h-topright, .hues-h-bottomright {
     position: absolute;
@@ -185,12 +229,18 @@
     width: 269px;
     height: 237px;
 }
+.inverted .hues-h-topleft {
+    background-position: -269px 0;
+}
 
 .hues-h-topright {
     background-image: url("../img/web-topright.png");
     width: 215px;
     height: 220px;
 }
+.inverted .hues-h-topright {
+    background-position: -215px 0;
+}
 
 .hues-h-bottomright {
     background-image: url("../img/web-bottomright.png");
@@ -198,6 +248,9 @@
     width:358px;
     height: 284px;
 }
+.inverted .hues-h-bottomright {
+    background-position: -358px 0;
+}
 
 .hues-h-vignette {
     background-image: url("../img/vignette.png");

src/css/hues-m.css

@@ -44,6 +44,9 @@
     border-width: 0 4px 4px;
     border-style: solid;
 }
+.inverted .hues-m-beatbar {
+    border-color: rgba(255,255,255,0.5);
+}
 
 .hues-m-beatleft, .hues-m-beatright, .hues-m-songtitle, .hues-m-imagename, .hues-m-huename {
     color: white;
@@ -55,6 +58,10 @@
     white-space: nowrap;
     border-radius: 10px;
 }
+.inverted .hues-m-beatleft, .inverted .hues-m-beatright,
+.inverted .hues-m-songtitle, .inverted .hues-m-imagename, .inverted .hues-m-huename {
+    background: rgba(255,255,255,0.7);
+}
 
 .hues-m-leftinfo, .hues-m-rightinfo {
     position: absolute;
@@ -64,6 +71,9 @@
     bottom: 79px;
     width: 100px;
 }
+.inverted .hues-m-leftinfo, .inverted .hues-m-rightinfo {
+    color: rgba(0,0,0, 0.7);
+}
 
 .hues-m-leftinfo {
     left: 8px;
@@ -106,13 +116,18 @@
     height: 40px;
     width: 40px;
     color: white;
-    background: rgb(80,80,80);
+    background: #505050;
     font-size: 20px;
     line-height: 40px;
     border-radius: 20px;
     text-align: center;
     box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
 }
+.inverted .hues-m-beatcenter {
+    color: black;
+    background: #afafaf;
+    box-shadow: inset 0 0 12px rgba(255,255,255,0.5);
+}
 
 .hues-m-beatcenter > span {
     animation-duration: 150ms;
@@ -145,6 +160,10 @@
     border-width: 4px 4px 0;
     border-style: solid;
 }
+.inverted .hues-m-controls {
+    color: rgba(0,0,0,0.7);
+    border-color: rgba(255,255,255,0.5);
+}
 
 .hues-m-songtitle, .hues-m-imagename, .hues-m-huename {
     position: absolute;
@@ -224,12 +243,17 @@
 }
 
 .hues-m-prevbutton:hover, .hues-m-nextbutton:hover, .hues-m-actbutton:hover {
-    background: rgb(100,100,100);
+    background: #646464;
+}
+.inverted .hues-m-prevbutton:hover,
+.inverted .hues-m-nextbutton:hover,
+.inverted .hues-m-actbutton:hover {
+    background: #9b9b9b;
 }
 
 .hues-m-prevbutton, .hues-m-nextbutton {
     color: white;
-    background: rgb(40,40,40);
+    background: #282828;
     height: 20px;
     line-height: 20px;
     font-size: 12px;
@@ -237,6 +261,10 @@
     border-radius: 10px;
     top: 7.5px;
 }
+.inverted .hues-m-prevbutton, .inverted .hues-m-nextbutton {
+    color: black;
+    background: #D7D7D7;
+}
 
 .hues-m-prevbutton {
     padding: 0 10px 0 0;
@@ -255,13 +283,17 @@
     width: 35px;
     left: 17.5px;
     color: white;
-    background: rgb(32,32,32);
+    background: #202020;
     font-size: 20px;
     line-height: 35px;
     border-radius: 20px;
     text-align: center;
     z-index: 1;
 }
+.inverted .hues-m-actbutton {
+    color: black;
+    background: #DFDFDF;
+}
 
 .hues-m-huename {
     bottom: 5px;
@@ -299,10 +331,16 @@
     border-top-right-radius: 100px;
     cursor: pointer;
 }
+.inverted .hues-m-hiderestore {
+    background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.2));
+}
 
 .hues-m-hiderestore:hover {
     background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.4));
 }
+.inverted .hues-m-hiderestore:hover {
+background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.4));
+}
 
 .hues-m-hiderestore.hidden {
     display: block;
@@ -374,6 +412,9 @@ input[type=range]::-webkit-slider-runnable-track {
     border: none;
     border-radius: 0;
 }
+.inverted input[type=range]::-webkit-slider-runnable-track {
+    background: rgba(0,0,0,0.7);
+}
 
 input[type=range]::-webkit-slider-thumb {
     -webkit-appearance: none;
@@ -382,9 +423,12 @@ input[type=range]::-webkit-slider-thumb {
     height: 12px;
     width: 4px;
     border-radius: 0;
-    background: rgb(255,255,255);
+    background: white;
     margin-top: -4px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
 }
+.inverted input[type=range]::-webkit-slider-thumb {
+    background: white;
+}
 
 input[type=range]::-moz-range-track {
     width: 100%;
@@ -393,6 +437,9 @@ input[type=range]::-moz-range-track {
     border: none;
     border-radius: 0;
 }
+.inverted input[type=range]::-moz-range-track {
+    background: rgba(0,0,0,0.7);
+}
 
 input[type=range]::-moz-range-thumb {
     box-shadow: none;
@@ -400,7 +447,10 @@ input[type=range]::-moz-range-thumb {
     height: 12px;
     width: 4px;
     border-radius: 0;
-    background: rgb(255,255,255);
+    background: white;
+}
+.inverted input[type=range]::-moz-range-thumb {
+    background: black;
 }
 
 input[type=range]::-ms-track {
@@ -415,9 +465,15 @@ input[type=range]::-ms-track {
 input[type=range]::-ms-fill-lower {
     background: rgba(255,255,255,0.7);
 }
+.inverted input[type=range]::-ms-fill-lower {
+    background: rgba(0,0,0,0.7);
+}
 input[type=range]::-ms-fill-upper {
     background: rgba(0,0,0,0.7);
 }
+.inverted input[type=range]::-ms-fill-upper {
+    background: rgba(255,255,255,0.7);
+}
 
 input[type=range]::-ms-thumb {
     box-shadow: none;
@@ -425,7 +481,10 @@ input[type=range]::-ms-thumb {
     height: 12px;
     width: 4px;
     border-radius: 0;
-    background: rgb(255,255,255);
+    background: white;
+}
+.inverted input[type=range]::-ms-thumb {
+    background: black;
 }
 
 @media (min-width: 768px) {

src/css/hues-r.css

@@ -1,5 +1,9 @@
 /* RetroUI */
 
+.RetroUI.inverted {
+    color: white;
+}
+
 .hues-r-container {
     position: absolute;
     bottom: 0px;

src/css/hues-w.css

@@ -1,5 +1,9 @@
 /* WeedUI */
 
+.WeedUI.inverted {
+    color: white;
+}
+
 .hues-w-controls {
     display:flex;
     align-items:center;
@@ -72,6 +76,9 @@
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     animation-duration: 0.5s;
 }
+.inverted .hues-w-beataccent{
+    text-shadow: -2px 2px 0px #999;
+}
 
 @keyframes fallspin {
     from {transform: rotate(0deg) translate(0px, 0px);

src/css/hues-x.css

@@ -27,8 +27,12 @@
     height: 113px;
     transform-origin: 32px 69px;
     background-image: url("../img/lightbase.png");
+    background-position: 0 0;
     background-repeat: no-repeat;
 }
+.inverted .hues-x-light {
+    background-position: -68px 0;
+}
 
 .hues-x-fade{
     transition: opacity 0.1s linear;
@@ -47,11 +51,17 @@
     opacity: 1;
     background-image: url("../img/lighton.png");
 }
+.inverted .hues-x-lighton {
+    background-image: url("../img/lighton_inverted.png");
+}
 
 .hues-x-lightoff {
     opacity: 0;
     background-image: url("../img/lightoff.png");
 }
+.inverted .hues-x-lightoff {
+    background-image: url("../img/lightoff_inverted.png");
+}
 
 .hues-x-lighton.off{
     opacity: 0;
@@ -65,24 +75,42 @@
     position: absolute;
     background-repeat: no-repeat;
 }
+.hues-x-wiresleft::before, .hues-x-wiresbottom::before, .hues-x-wiresright::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+}
 
 .hues-x-wiresleft, .hues-x-wiresright {
     height: 100%;
+    width: 200px;
     top: 0px;
     overflow: hidden;
 }
 
 .hues-x-wiresleft {
-    width: 200px;
     left: 0px;
+}
+.hues-x-wiresleft::before {
+    width: 60px;
+    height: 1435px;
     background-image: url("../img/wiresleft.png");
 }
+.inverted .hues-x-wiresleft::before {
+    background-position: -60px 0;
+}
 
 .hues-x-wiresright {
-    width: 200px;
     right: 0px;
+}
+.hues-x-wiresright::before {
+    right: 0;
+    width: 58px;
+    height: 1261px;
     background-image: url("../img/wiresright.png");
-    background-position: 141px 0px;
+}
+.inverted .hues-x-wiresright::before {
+    background-position: 58px 0px;
 }
 
 .hues-x-wiresbottomhelper {
@@ -95,13 +123,21 @@
 
 .hues-x-wiresbottom {
     height: 200px;
-    width:2889px;
-    background-image: url("../img/wiresbottom.png");
-    background-position: 0px 144px;
+    width:2621px;
     left:50%;
-    margin-left: -1444.5px;
+    margin-left: -1310.5px;
     overflow: hidden;
 }
+.hues-x-wiresbottom::before {
+    bottom: 0;
+    width: 2621px;
+    height: 49px;
+    background-image: url("../img/wiresbottom.png");
+    background-position: 127px 49px;
+}
+.inverted .hues-x-wiresbottom::before {
+    background-position: 127px 0px;
+}
 
 .hues-x-visualisercontainer {
     transform: scaleY(-1);

src/js/HuesCanvas.js

@@ -30,6 +30,7 @@ function HuesCanvas(element, audioContext, core) {
     core.addEventListener("newimage", this.setImage.bind(this));
     core.addEventListener("newcolour", this.setColour.bind(this));
     core.addEventListener("beat", this.beat.bind(this));
+    core.addEventListener("invert", this.setInvert.bind(this));
     core.addEventListener("settingsupdated", this.settingsUpdated.bind(this));
     this.core = core;
 
@@ -63,6 +64,8 @@ function HuesCanvas(element, audioContext, core) {
     this.blackout = false;
     this.blackoutColour = "#000"; // for the whiteout case we must store this
     this.blackoutTimeout = null;
+    
+    this.invert = false;
 
     this.colourFade = false;
     this.colourFadeStart=0;
@@ -98,6 +101,11 @@ function HuesCanvas(element, audioContext, core) {
     requestAnimationFrame(this.animationLoop.bind(this));
 }
 
+HuesCanvas.prototype.setInvert = function(invert) {
+    this.invert = invert;
+    this.needsRedraw = true;
+}
+
 HuesCanvas.prototype.settingsUpdated = function() {
     this.setSmartAlign(localStorage["smartAlign"]);
     this.setBlurAmount(localStorage["blurAmount"]);
@@ -133,6 +141,7 @@ HuesCanvas.prototype.redraw = function() {
             this.context.fillStyle = this.blackoutColour;
             this.context.fillRect(0,0,width,720);
             this.needsRedraw = false;
+            this.drawInvert();
             return;
         }
     } else {
@@ -230,8 +239,18 @@ HuesCanvas.prototype.redraw = function() {
     } else {
         this.needsRedraw = false;
     }
+    this.drawInvert();
 };
 
+HuesCanvas.prototype.drawInvert = function() {
+    if(this.invert) {
+        this.context.globalAlpha = 1;
+        this.context.globalCompositeOperation = "difference";
+        this.context.fillStyle = "#FFF";
+        this.context.fillRect(0,0,this.canvas.width,720);
+    }
+}
+
 /* Second fastest method from
  http://stackoverflow.com/questions/10073699/pad-a-number-with-leading-zeros-in-javascript
  It stil does millions of ops per second, and isn't ugly like the integer if/else */
@@ -515,7 +534,11 @@ HuesCanvas.prototype.drawSnow = function() {
     let delta = this.lastSnow - this.audio.currentTime;
     this.snowContext.clearRect(0, 0, width, height);
 
-    this.snowContext.fillStyle = "rgba(255, 255, 255, 0.8)";
+    if(this.invert) {
+        this.snowContext.fillStyle = "rgba(0, 0, 0, 0.8)";
+    } else {
+        this.snowContext.fillStyle = "rgba(255, 255, 255, 0.8)";
+    }
     this.snowContext.beginPath();
     for(let i = 0; i < this.maxSnow; i++) {
         let flake = this.snowflakes[i];

src/js/HuesCore.js

@@ -727,13 +727,6 @@ HuesCore.prototype.toggleFullAuto = function() {
 
 HuesCore.prototype.setInvert = function(invert) {
     this.invert = invert;
-    if(invert) {
-        document.documentElement.style.filter = "invert(100%)";
-        document.documentElement.style.webkitFilter = "invert(100%)";
-    } else {
-        document.documentElement.style.filter = "";
-        document.documentElement.style.webkitFilter = "";
-    }
     this.callEventListeners("invert", invert);
 };
 
@@ -758,6 +751,7 @@ HuesCore.prototype.changeUI = function(index) {
         this.callEventListeners("newimage", this.currentImage);
         this.callEventListeners("newcolour", this.colours[this.colourIndex], false);
         this.callEventListeners("beat", this.getBeatString(), this.getBeatIndex());
+        this.callEventListeners("invert", this.invert);
     }
 };
 

src/js/HuesSettings.js

@@ -263,7 +263,6 @@ function HuesSettings(defaults) {
 
 HuesSettings.prototype.connectCore = function(core) {
     this.core = core;
-    core.addEventListener("invert", this.onInvert.bind(this));
     core.settingsUpdated();
 };
 
@@ -309,17 +308,6 @@ HuesSettings.prototype.showInfo = function() {
     document.getElementById("tab-info").click();
 };
 
-// We don't want the settings window inverted, it makes editing annoying
-HuesSettings.prototype.onInvert = function(invert) {
-    if(invert) {
-        this.window.style.filter = "invert(100%)";
-        this.window.style.webkitFilter = "invert(100%)";
-    } else {
-        this.window.style.filter = "";
-        this.window.style.webkitFilter = "";
-    }
-};
-
 HuesSettings.prototype.initUI = function() {
     let doc = this.root.ownerDocument;
         

src/js/HuesUI.js

@@ -27,12 +27,12 @@
     to put all your own elements under, but make a div
     underneath so it can be entirely hidden.
 */
-function HuesUI(parent) {
+function HuesUI(parent, name) {
     if(!parent) {
         parent = document.getElementById("huesUI");
     }
     this.root = document.createElement("div");
-    this.root.className = this.constructor.name;
+    this.root.className = name ? name : this.constructor.name;
     parent.appendChild(this.root);
     this.root.style.display = "none";
 
@@ -159,6 +159,7 @@ HuesUI.prototype.initUI = function() {
     this.addCoreCallback("newcolour", this.newColour.bind(this));
     this.addCoreCallback("blurupdate", this.blurUpdated.bind(this));
     this.addCoreCallback("time", this.updateTime.bind(this));
+    this.addCoreCallback("invert", this.invert.bind(this));
     this.resizeHandler = this.resize.bind(this);
 };
 
@@ -259,11 +260,19 @@ HuesUI.prototype.intToHex = function(num, pad) {
     return prefix + "0x" + str;
 };
 
+HuesUI.prototype.invert = function(invert) {
+    if (invert) {
+        this.root.classList.add("inverted");
+    } else {
+        this.root.classList.remove("inverted");
+    }
+}
+
 /*
  Individual UIs ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
 
-function RetroUI() {
+function RetroUI(parent, name) {
     this.container = null;
     this.mode = null;
     this.beatBar = null;
@@ -273,7 +282,7 @@ function RetroUI() {
     this.imageModeAuto = null;
     this.subControls = null;
 
-    HuesUI.call(this);
+    HuesUI.call(this, parent, name ? name : "RetroUI");
 }
 
 RetroUI.prototype = Object.create(HuesUI.prototype);
@@ -422,8 +431,8 @@ RetroUI.prototype.resize = function() {
     this.core.resizeVisualiser();
 };
 
-function WeedUI() {
-    RetroUI.call(this);
+function WeedUI(parent, name) {
+    RetroUI.call(this, parent, name ? name : "WeedUI");
 
     this.xVariance = 10;
     this.yVariance = 20;
@@ -502,7 +511,7 @@ WeedUI.prototype.removeBeat = function(element) {
     this.root.removeChild(element);
 };
 
-function ModernUI() {
+function ModernUI(parent, name) {
     this.beatBar = null;
     this.beatLeft = null;
     this.beatRight = null;
@@ -518,7 +527,7 @@ function ModernUI() {
 
     this.currentBeat = ".";
 
-    HuesUI.call(this);
+    HuesUI.call(this, parent, name ? name : "ModernUI");
 
     this.hidden = 0; // we have a 3 stage hide
 }
@@ -787,9 +796,11 @@ ModernUI.prototype.newImage = function(image) {
     this.resizeImage();
 };
 
-function XmasUI() {
-    ModernUI.call(this);
-
+function XmasUI(parent, name) {
+    ModernUI.call(this, parent, name ? name : "XmasUI");
+     // This will cache our inverted lights images
+    this.invert(true);
+    
     this.controls.removeChild(this.leftBox);
     this.controls.removeChild(this.rightBox);
     this.controls.removeChild(this.rightInfo);
@@ -883,8 +894,8 @@ XmasUI.prototype.lightFadeOut = function(light) {
 
 XmasUI.prototype.lightRecolour = function(light) {
     let hue = Math.floor(Math.random() * 7) * -56;
-    light.on.style.backgroundPosition = hue + "px, 0, center";
-    light.off.style.backgroundPosition = hue + "px, 0, center";
+    light.on.style.backgroundPosition = hue + "px 0";
+    light.off.style.backgroundPosition = hue + "px 0";
 };
 
 XmasUI.prototype.randomLight = function(light) {
@@ -936,8 +947,10 @@ XmasUI.prototype.newColour = function(colour) {};
 XmasUI.prototype.blurUpdated = function(x, y) {};
 XmasUI.prototype.updateTime = function(time) {};
 
-function HalloweenUI() {
-    ModernUI.call(this);
+function HalloweenUI(parent, name) {
+    ModernUI.call(this, parent, name ? name : "HalloweenUI");
+    // This will cache our inverted tombstone image
+    this.invert(true);
 }
 
 HalloweenUI.prototype = Object.create(ModernUI.prototype);
@@ -1010,8 +1023,6 @@ HalloweenUI.prototype.initUI = function() {
     this.vignette = document.createElement("div");
     this.vignette.className = "hues-h-vignette";
     this.root.appendChild(this.vignette);
-    
-    this.addCoreCallback("invert", this.invert.bind(this));
 };
 
 HalloweenUI.prototype.beat = function(beats, index) {
@@ -1024,16 +1035,6 @@ HalloweenUI.prototype.beat = function(beats, index) {
     }
 };
 
-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 = "";
-    }
-};
-
 HalloweenUI.prototype.connectCore = function(core) {
     ModernUI.prototype.connectCore.call(this, core);