Skip to content

Instantly share code, notes, and snippets.

@codekoala
Created September 12, 2018 05:46
Show Gist options
  • Save codekoala/ba289fa6479ee8cb73172a828b0eee3a to your computer and use it in GitHub Desktop.
Save codekoala/ba289fa6479ee8cb73172a828b0eee3a to your computer and use it in GitHub Desktop.
Simple userscript to make it easier to set the color for RGB bulbs using Hubitat.
// ==UserScript==
// @name Hubitat RGB Color Picker
// @namespace http://tampermonkey.net/
// @version 0.2
// @description introduce a color picker for RGB bulbs
// @author Josh VanderLinden
// @match http*://*/device/edit/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
let colorMaps = $("input[type=hidden][value=COLOR_MAP]");
// proceed no further if no color map fields are detected
if (!colorMaps.length) {
return;
}
function setColor(input) {
return (hsva, instance) => {
const h = (hsva.h / 360 * 100).toFixed();
const s = hsva.s.toFixed();
const l = (hsva.a * 100).toFixed();
const v = `[hue:${h},saturation:${s},level:${l}]`;
input.value = v;
}
}
function applyColor(tile) {
return (hsva, instance) => {
tile.click();
};
}
function addColorPickers(colorMaps) {
return () => {
colorMaps.each((idx, el) => {
const colorMap = $(el);
const input = colorMap.siblings("input[type=text]")[0];
const tile = colorMap.parents("div").siblings("div.tile")[0];
// create the color picking widget
const picker = $("<span/>").insertAfter(colorMap);
input.pickr = new Pickr({
el: picker[0],
position: 'top',
appendToBody: true,
defaultRepresentation: 'HSVA',
default: '#0090ff',
components: {
preview: true,
opacity: true,
hue: true,
interaction: {
hsva: false,
input: false,
clear: true,
save: true
}
},
onChange: setColor(input),
onSave: applyColor(tile)
});
// populate initial color map
input.pickr.options.onChange(input.pickr.getColor());
});
};
}
// inject dependencies--stylesheet must come before javascript
$("<link/>", {
rel: "stylesheet",
href: "https://cdn.jsdelivr.net/npm/pickr-widget/dist/pickr.min.css"
}).appendTo(document.head);
$.getScript(
"https://cdn.jsdelivr.net/npm/pickr-widget/dist/pickr.min.js",
addColorPickers(colorMaps)
);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment