A different colour picker for the dashboard? my first attempt

Dashboard
1

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

colorwheel
colorwheel2879Ă—1471 156 KB 

<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>
2 Likes
2

Thanks for this, it's useful. Any idea how to generate multiple instances in Template UI node, e.g. using ng-repeat?

For example I have

<div ng-repeat="(key, value) in msg.fixturesettings">
        <div class="colorPicker"></div>
        <div id="values"></div>
</div>

This seems to break the color picker, which shows up multiple times but you can't seem to move the dot around.

Note @scargill and @dceejay may be interested in this

3

Indeed interested

4

Hi
I'm not too familiar with ng-repeat but if you just want multiple instances in the UI then you could try the code below, it needs tidying up but works ok for me. I just changed the variables for the 2nd script.
I then prepend the hex payload with a letter eg 'a' for colour picker one 'b' for two etc and then switch the payload based on that identifier
No doubt there are much better ways of achieving this and I'm still a novice just learning so maybe someone else will chime in and be better help

<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:'a'+color.hexString});
values.innerHTML = [
"hex: " + color.hexString,
//"rgb: " + color.rgbString,
//"hsl: " + color.hslString,
].join("<br>");
});
</script>
<div id="values"></div>

     <div class="colorPickerTwo"></div>
      <script type="text/javascript">
        // create color picker in display range.
var colorPickerTwo = 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 valuesTwo = document.getElementById("valuesTwo");
// read color value
colorPickerTwo.on(["color:init", "color:change"], function(color){
    theScope.send({payload:'b'+color.hexString});
valuesTwo.innerHTML = [
"hex: " + color.hexString,
//"rgb: " + color.rgbString,
//"hsl: " + color.hslString,
].join("<br>");
});
</script>
<div id="valuesTwo"></div>
</html>
5

Hi, that's good for 2 instances, but what about n instances?

6

Hi,

I use this color picker successfully in my dashboard. However the picker fails when the belonging dashboard group is collapsed in advance. Expanding the group will only show some part of the color picker.

collapsed_color_picker

Can someone help here?