Can you help me with this, I tried many different solutions, none of them worked, and nobody on stackflow knew why. So I deleted it, so can you try give me the code, for the hue slider in this color picker, the id of the hue slider is “Colorbar”, here is the code:
<!DOCTYPE html>
<!-- This is based on DillingerLee's great template here:
https://github.com/Team-Code/KA_Offline -->
<html>
<head>
<title>Color Picker</title>
<link rel="icon" href="../Top-Logo.png">
</head>
<style>
body {font-family: "Helvetica", sans-serif;}
.No-Underline {text-decoration: none;}
h1 {
text-align: center;
}
#Topbar {
width: 100%;
height: 75px;
position: fixed;
top: 0px;
background-color: rgb(14, 5, 255)
}
#Topbar h1 {
color: white;
}
#Pages {
float: left;
height: 870px;
width: 200px;
margin-right: 0px;
border-right: 2px solid rgb(214, 212, 212);
border-top: 2px solid rgb(214, 212, 212);
border-bottom: 2px solid rgb(214, 212, 212)
}
#About {
border-right: 2px solid rgb(214, 212, 212);
border-top: 2px solid rgb(214, 212, 212);
border-bottom: 2px solid rgb(214, 212, 212);
height: 870px;
width: 1700px;
}
#About h2 {
text-align:center;
}
#About p {
font-size: 1.1em;
}
.Image-Div {
border-left: 2px solid rgb(214, 212, 212);
border-top: 2px solid rgb(214, 212, 212);
float: right;
width: 13%;
height: 92.3%;
}
.Text-Div {
font-size: 1.1em;
background-color: white;
border-top: 2px solid rgb(214, 212, 212);
border-bottom: 2px solid rgb(214, 212, 212);
float: right;
width: 75%;
height: 92%;
overflow: auto;
text-align: center;
line-height: 250px;
}
.Text-Div * {
margin-left: 13px;
margin-right: 10px;
}
.Content-Button {
background-color: white;
border-top: 2px solid rgb(214, 212, 212);
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
width: 221px;
height: 50px;
font-size: 1.3em;
font-weight: bold;
cursor: pointer;
}
.Content-Button:hover {
background-color: rgb(219, 219, 219);
}
.Page-Button {
background-color: white;
border-top: 2px solid rgb(214, 212, 212);
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
width: 200px;
height: 50px;
font-size: 1.3em;
font-weight: bold;
cursor: pointer;
}
.Page-Button:hover {
background-color: rgb(219, 219, 219);
}
.Select-Button {
background-color: rgb(180, 228, 237);
color: rgb(22, 55, 222);
border-left: 5px solid rgb(22, 55, 222);
}
.Select-Button:hover {
background-color: rgb(149, 203, 240);
}
.Reload-Button {
width: 125px;
height: 45px;
background-color: rgb(196, 196, 207);
border-radius: 10px;
border: 0px;
font-weight: bold;
font-size: 35px;
color: white;
cursor: pointer;
margin-top: 0px;
margin-bottom: 0px;
line-height: 25px
}
.Reload-Button:hover {
background-color: rgb(141, 141, 148);
}
.Warning {
background-color: red;
color: rgb(237, 222, 5);
font-size: 1.3em;
}
#Color-Picker {
display: flex;
width: 630px;
height: 300px;
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
padding: 20px;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
line-height: 100px;
}
#color_canvas {
border: 2px solid rgb(214, 212, 212);
}
#color_canvas:hover {
border: 2px solid rgb(0, 0, 0);
}
#Colorbar {
border: 2px solid rgb(214, 212, 212);
height: 295px;
width: 40px;
margin: 0px;
}
#Colorbar:hover {
border: 2px solid rgb(0, 0, 0);
}
#Color-Word {
width: 230px;
height: 100px;
border: 2px solid rgb(214, 212, 212);
background-color: white;
margin-bottom: 20px;
}
#Color-Word:hover {
border: 2px solid rgb(0, 0, 0);
}
#Color-Background {
width: 230px;
height: 172px;
border: 2px solid rgb(214, 212, 212);
background-color: white;
}
#Color-Background:hover {
border: 2px solid rgb(0, 0, 0);
}
#marker {
background: rgba(0, 0, 0, 0);
border: 3px solid white;
border-radius: 10px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
display: none;
position: absolute;
top: 450px;
left: 600px;
width: 10px;
height: 10px;
cursor: pointer;
}
body:has(#marker:hover) #color_canvas {
border: 2px solid rgb(0, 0, 0);
}
</style>
<body>
<div id="marker">
</div>
<div id="Topbar">
<center>
<h1><span>Project At All</span><h1>
</center>
</div>
<h1>Information On Home Page</h1>
<div id="Pages">
<h2 style = "text-align: center;">Projects</h2>
<a class="No-Underline" href="../index2.html"><button class="Page-Button">Home</button></a>
<button class="Page-Button Select-Button">Color Picker</button>
</div>
<div id="About">
<h2>Color Picker</h2>
<div class="Image-Div">
<h2 style = "text-align: center;">Contents</h2>
<button class="Content-Button Select-Button">Color Picker Page</button>
<a class="No-Underline" href="./Color_Information.html"><button class="Content-Button">What Is A Color Picker</button></a>
<a class="No-Underline" href="./Color_Steps.html"><button class="Content-Button">Color Picker Creation Steps</button></a>
</div>
<div class="Text-Div">
<div id="Color-Picker" style="text-align: left;">
<canvas width="300px" height="300px" id="color_canvas"></canvas>
<div style=" width:20px; margin: 0px; margin-right: 20px; margin-left: 10px;">
<canvas id="Colorbar"></canvas>
</div>
<div>
<div id="Color-Word" style="line-height: 20px;">
<p style = "font-weight: bold; font-size: 1.2em;">RGB:<span id="RGBText"></span></p>
<p style="font-weight: bold; font-size: 1.2em;">Hex:<span id="HexText"></span></p>
</div>
<div id="Color-Background"></div>
</div>
</div>
</div>
</body>
<script>
var colorCanvas = document.getElementById('color_canvas');
var colorSlider = document.getElementById('Colorbar')
var marker = document.getElementById('marker')
var isDown = false;
document.addEventListener('mousedown', function() {
isDown = true;
});
document.addEventListener('mouseup', function() {
isDown = false;
});
var ColorCtx = colorCanvas .getContext('2d'); // This create a 2D context for the canvas
var SliderCtx = colorSlider .getContext('2d')
// Canvas Section
var color = 'rgba(0,0,255,1)';
let gradientH = ColorCtx .createLinearGradient(0, 0, ColorCtx .canvas.width, 0);
gradientH.addColorStop(0, '#fff');
gradientH.addColorStop(1, color);
ColorCtx .fillStyle = gradientH;
ColorCtx .fillRect(0, 0, ColorCtx .canvas.width, ColorCtx .canvas.height);
// Create a Vertical Gradient(white to black)
let gradientV = ColorCtx .createLinearGradient(0, 0, 0, 300);
gradientV.addColorStop(0, 'rgba(0,0,0,0)');
gradientV.addColorStop(1, '#000');
ColorCtx .fillStyle = gradientV;
ColorCtx .fillRect(0, 0, ColorCtx .canvas.width,
ColorCtx .canvas.height);
const selectedColor = document.getElementById("Color-Background");
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb((d+),s*(d+),s*(d+))$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
function pick(event, destination) {
if (isDown == true) {
const bounding = colorCanvas.getBoundingClientRect();
const x = event.clientX - bounding.x;
const y = event.clientY - bounding.y;
const pixel = ColorCtx.getImageData(x, y, 1, 1);
const data = pixel.data;
const rgb = `rgb(${data[0]}, ${data[1]}, ${data[2]})`;
[red, green, blue] = rgb.substring(rgb.indexOf('(') + 1, rgb.lastIndexOf(')')).split(/,s*/),
// passing the variables into the Object Literal; in this instance
// we're passing in the variables which are the literal name of the
// properties they define and which also contain the relevant value:
colorObject = {
red,
green,
blue
};
mousePosition = {
x : event.clientX,
y : event.clientY
};
destination.style.background = rgb;
document.getElementById('RGBText').textContent = (red + ', ' + green + ', ' + blue);
document.getElementById('HexText').textContent = rgb2hex(rgb);
marker.style.display = "block";
marker.style.left = (mousePosition.x - 5) + 'px';
marker.style.top = (mousePosition.y - 5) + 'px';
return rgb;
};
};
function pick2(event, destination,) {
const bounding = colorCanvas.getBoundingClientRect();
const x = event.clientX - bounding.x;
const y = event.clientY - bounding.y;
const pixel = ColorCtx.getImageData(x, y, 1, 1);
const data = pixel.data;
const rgb = `rgb(${data[0]}, ${data[1]}, ${data[2]})`;
[red, green, blue] = rgb.substring(rgb.indexOf('(') + 1, rgb.lastIndexOf(')')).split(/,s*/),
// passing the variables into the Object Literal; in this instance
// we're passing in the variables which are the literal name of the
// properties they define and which also contain the relevant value:
colorObject = {
red,
green,
blue
};
mousePosition = {
x : event.clientX,
y : event.clientY
};
destination.style.background = rgb;
document.getElementById('RGBText').textContent = (red + ', ' + green + ', ' + blue);
document.getElementById('HexText').textContent = rgb2hex(rgb);
marker.style.display = "block";
marker.style.left = (mousePosition.x - 5) + 'px';
marker.style.top = (mousePosition.y - 5) + 'px';
return rgb;
};
colorCanvas.addEventListener("click", (event) => pick2(event, selectedColor))
colorCanvas.addEventListener("mousemove", (event) => pick(event, selectedColor))
//Slider Section
let gradient = SliderCtx .createLinearGradient(0, 0, 0, SliderCtx . canvas.height);
gradient.addColorStop(0, "rgb(255, 0, 0)");
gradient.addColorStop(0.15, "rgb(255, 0, 255)");
gradient.addColorStop(0.33, "rgb(0, 0, 255)");
gradient.addColorStop(0.49, "rgb(0, 255, 255)");
gradient.addColorStop(0.67, "rgb(0, 255, 0)");
gradient.addColorStop(0.84, "rgb(255, 255, 0)");
gradient.addColorStop(1, "rgb(255, 0, 0)");
SliderCtx .fillStyle = gradient;
SliderCtx .fillRect(0, 0, SliderCtx .canvas.width, SliderCtx .canvas.height);
</script>
I tried to make the color hue slider work, but it didn’t so I restarted and din’t know where to start, so I am saking for a start code to help me
3
Answers
Your script includes two functions for retrieving the colour from the first canvas (
#color_canvas).pick()pick2()Your script creates event listeners which invoke these functions:
colorCanvas.addEventListener("click", (event) => pick2(event, selectedColor))colorCanvas.addEventListener("mousemove", (event) => pick(event, selectedColor))But your script has no functions for retrieving colour from the second canvas (
#Colorbar) and no event listeners. That’s why your hue slider doesn’t do anything.I found the answer, it is simple, use mathematics to find the hue value correctly
This surprisingly works well, so here it is for anyone if they want.(it only works for a certain screen size, I will report when I make it responsive)