Passing user click value from markdown component into custom prop

Ignition
1

Hi, we are trying to use the Color Picker from the Powercharts in a custom pen configuration view. Since the Color Picker component isn't exposed natively as a perspective component, we are trying to accomplish it by calling the class in a markdown component.

<div><div><div class="ia_colorPickerCommon__modal"><div class="saturation-container"><div style="position: absolute; inset: 0px; background: rgb(255, 0, 21);"><style>
          .saturation-white {
            background: -webkit-linear-gradient(to right, #fff, rgba(255,255,255,0));
            background: linear-gradient(to right, #fff, rgba(255,255,255,0));
          }
          .saturation-black {
            background: -webkit-linear-gradient(to top, #000, rgba(0,0,0,0));
            background: linear-gradient(to top, #000, rgba(0,0,0,0));
          }
        </style><div style="position: absolute; inset: 0px;" class="saturation-white"><div style="position: absolute; inset: 0px;" class="saturation-black"></div><div style="position: absolute; top: 7.05882%; left: 82.7004%; cursor: default;"><div class="ia_colorPickerCommon__ringPointer"></div></div></div></div></div><div class="controls-container"><div class="hue-container"><div style="position: absolute; inset: 0px;"><div class="hue-horizontal" style="padding: 0px 2px; position: relative; height: 100%;"><style>
            .hue-horizontal {
              background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0
                33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
              background: -webkit-linear-gradient(to right, #f00 0%, #ff0
                17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
            }

            .hue-vertical {
              background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
                #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
              background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,
                #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
            }
          </style><div style="position: absolute; left: 98.6395%;"><div class="ia_colorPickerCommon__circlePointer"></div></div></div></div></div><div class="value-container"><span class="swatch" style="background-color: rgb(237, 41, 57);"></span><label>Hex</label><input type="text" value="#ed2939"></div></div></div></div></div><div></div>

It is partially rendering, but am not sure if we can have the user have the same functionality.

Thanks,

2

I don't know if it would help, but are you aware of Perspective Draggable Color Picker by Nicoli Liedtke on the Ignition Exchange?

1 Like