Hi
I have been using the dashboard colour picker but thought I'd have a go at getting a different one to work.
I threw this together thought I would share it since I spent a while looking for one but couldn't find one.
You'll need the js script which is available on github and is referenced in the template notes
This is the first java and template I have played with so I'm sure someone could improve it
<html>
<head><script src="/js/iro.min.js"></script></head>
<div class="colorPicker"></div>
<script type="text/javascript">
// create color picker in display range.
var colorPicker = new iro.ColorPicker(".colorPicker", {
// color picker options
// Option guide: https://iro.js.org/guide.html#color-picker-options
width: 280,
color: "rgb(255, 0, 0)",
borderWidth: 1,
borderColor: "#fff",
});
//Since the scope function is used within a function declare it here:
var theScope = scope;
var values = document.getElementById("values");
// read color value
colorPicker.on(["color:init", "color:change"], function(color){
theScope.send({payload:color.hexString});
values.innerHTML = [
"hex: " + color.hexString,
//"rgb: " + color.rgbString,
//"hsl: " + color.hslString,
].join("<br>");
});
</script>
<div id="values"></div>
</html>