Py.Cafe

kolibril13/

simple_color_picker

Create a "Hi" Widget with anywidget

DocsPricing
  • app.py
  • requirements.txt
  • widget.css
  • widget.js
widget.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import "https://esm.sh/vanilla-colorful@0.7.2";

function render({ model, el }) {
  // Create the container for the color picker
  let container = document.createElement("div");
  container.style.position = "relative"; // Ensure container has a relative position
  container.style.width = "300px"; // Set a fixed width for the color picker
  container.style.height = "300px"; // Set a fixed height for the color picker
  el.appendChild(container);

  // Create the input element for the color picker
  let colorPicker = document.createElement("hex-color-picker");
  colorPicker.color = "#1e88e5"; // Set the initial color
  container.appendChild(colorPicker);

  // Add an event listener for color changes
  colorPicker.addEventListener("color-changed", (event) => {
    // get updated color value
    const newColor = event.detail.value;
    console.log(newColor); // You can use this color value as needed
  });

  // get current color value
  console.log(colorPicker.color);
}

export default { render };