Fórumok
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RGB Színválasztó</title>
<style>
#color-box {
width: 200px;
height: 200px;
background-color: rgb(0, 0, 0);
margin-top: 20px;
border: 1px solid #ccc;
}
#hex-value {
font-size: 1.2em;
margin-top: 10px;
}
table {
width: 300px;
margin-top: 20px;
border-collapse: collapse;
}
td, th {
padding: 8px;
border: 1px solid #ddd;
text-align: center;
}
.color-preview {
width: 40px;
height: 40px;
border: 1px solid #444;
}
/* Csúszkák alapstílusa, rövidebb szélesség */
input[type=range] {
-webkit-appearance: none;
appearance: none;
width: 150px;
height: 8px;
background: #ddd;
outline: none;
border-radius: 5px;
margin-bottom: 10px;
}
/* Piros csúszka stílusa */
#red {
background-color: #ffcccc;
}
#red::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background-color: #ff0000;
border-radius: 50%;
cursor: pointer;
}
#red::-moz-range-thumb {
width: 20px;
height: 20px;
background-color: #ff0000;
border-radius: 50%;
cursor: pointer;
}
/* Zöld csúszka stílusa */
#green {
background-color: #ccffcc;
}
#green::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background-color: #00ff00;
border-radius: 50%;
cursor: pointer;
}
#green::-moz-range-thumb {
width: 20px;
height: 20px;
background-color: #00ff00;
border-radius: 50%;
cursor: pointer;
}
/* Kék csúszka stílusa */
#blue {
background-color: #ccccff;
}
#blue::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background-color: #0000ff;
border-radius: 50%;
cursor: pointer;
}
#blue::-moz-range-thumb {
width: 20px;
height: 20px;
background-color: #0000ff;
border-radius: 50%;
cursor: pointer;
}
div {
margin: 0 auto;
}
.row {
display: none;
}
</style>
</head>
<body text="#FFFFFF" style="background-color:#000000;">
<form action="/login"><input type="submit" value="login"></form>
<center>
<h2>RGB Színválasztó</h2>
<input type="range" id="red" min="0" max="255" value="0">
<br>
<input type="range" id="green" min="0" max="255" value="0">
<br>
<input type="range" id="blue" min="0" max="255" value="0">
<div id="color-box"></div>
<div id="hex-value">#000000</div>
<br><br>
<select id="row-count">
<option value="1">1 Color</option>
<option value="2">2 Colors</option>
<option value="3">3 Colors</option>
<option value="4">4 Colors</option>
</select>
<table>
<tr>
<th>Save</th>
<th>Color</th>
<th>Minimum Brightness<br>Default Brightness</th>
</tr>
<tr id="row1" class="row" >
<td><button onclick="saveColor(1)">Color 1</button></td>
<td><div id="preview1" class="color-preview"></div></td>
<td><input type="range" id="minBright1" min="0" max="255" value="0">
<input type="range" id="defBright1" min="0" max="255" value="255"></td>
</tr>
<tr id="row2" class="row" >
<td><button onclick="saveColor(2)">Color 2</button></td>
<td><div id="preview2" class="color-preview"></div></td>
<td><input type="range" id="minBright2" min="0" max="255" value="0">
<input type="range" id="defBright2" min="0" max="255" value="255"></td>
</tr>
<tr id="row3" class="row">
<td><button onclick="saveColor(3)">Color 3</button></td>
<td><div id="preview3" class="color-preview"></div></td>
<td><input type="range" id="minBright3" min="0" max="255" value="0">
<input type="range" id="defBright3" min="0" max="255" value="255"></td>
</tr>
<tr id="row4" class="row">
<td><button onclick="saveColor(4)">Color 4</button></td>
<td><div id="preview4" class="color-preview"></div></td>
<td><input type="range" id="minBright4" min="0" max="255" value="0">
<input type="range" id="defBright4" min="0" max="255" value="255"></td>
</tr>
</table>
</center>
<script type="text/javascript" src="tools.js"></script>
<script>
startWS(3);
const redSlider = document.getElementById('red');
const greenSlider = document.getElementById('green');
const blueSlider = document.getElementById('blue');
const colorBox = document.getElementById('color-box');
const hexValueDisplay = document.getElementById('hex-value');
const minBright = [];
const defBright = [];
const preview = [];
var subId = "";
for (let i = 1; i <= 4; i++) {
minBright[i] = document.getElementById(`minBright${i}`);
defBright[i] = document.getElementById(`defBright${i}`);
preview[i] = document.getElementById(`preview${i}`);
minBright[i].addEventListener('input', handleSliderChange);
defBright[i].addEventListener('input', handleSliderChange);
preview[i].addEventListener('click', handleSliderChange);
}
let savedColors = { 1: '', 2: '', 3: '', 4: '' };
let minBrightValues = { 1: 50, 2: 50, 3: 50, 4: 50 };
redSlider.addEventListener('input', updateColor);
greenSlider.addEventListener('input', updateColor);
blueSlider.addEventListener('input', updateColor);
document.getElementById('row-count').addEventListener('change', function() {
const rowCount = parseInt(this.value);
sendWS("STR[0]=" + rowCount);
for (let i = 1; i <= 4; i++) {
const row = document.getElementById(`row${i}`);
row.style.display = i <= rowCount ? 'table-row' : '';
}
});
document.getElementById('row-count').dispatchEvent(new Event('change'));
function updateColor() {
const red = parseInt(redSlider.value);
const green = parseInt(greenSlider.value);
const blue = parseInt(blueSlider.value);
colorBox.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
const hexColor = rgbToHex(red, green, blue);
hexValueDisplay.textContent = hexColor;
if (subId === "pre") {sendWS("STRIP[0](BR)255|STRIP[0]" + hexColor);}
}
function rgbToHex(r, g, b) {
return (
"#" +
r.toString(16).padStart(2, '0') +
g.toString(16).padStart(2, '0') +
b.toString(16).padStart(2, '0')
).toUpperCase();
}
function saveColor(slot) {
const hexColor = hexValueDisplay.textContent;
savedColors[slot] = hexColor;
document.getElementById(`preview${slot}`).style.backgroundColor = hexColor;
sendWS("STR[" + slot + "]=" + savedColors[slot]);
sendWS("STR[" + (slot+3) + "]=" + minBright[slot].value);
sendWS("STR[" + (slot+6) + "]=" + defBright[slot].value);
}
function handleSliderChange(event) {
const sliderId = event.target.id;
const sliderValue = event.target.value;
const brIndex = sliderId.slice(-1)
subId = sliderId.substring(0, 3);
redSlider.value = parseInt(savedColors[brIndex].substring(1, 3), 16);
greenSlider.value = parseInt(savedColors[brIndex].substring(3, 5), 16);
blueSlider.value = parseInt(savedColors[brIndex].substring(5, 7), 16);
updateColor();
if (subId != "pre") {
sendWS("STRIP[0]" + savedColors[brIndex]);
sendWS("STRIP[0](BR)" + sliderValue);
}
}
function onOpen() {
sendWS("STR[0-12]@");
}
function onMessage(msg) {
msg = msg.split("~");
document.getElementById('row-count').value = msg[0];
document.getElementById('row-count').dispatchEvent(new Event('change'));
for (let i = 1; i <= 4; i++) {
savedColors[i] = msg[i];
preview[i].style.backgroundColor = msg[i];
minBright[i].value = parseInt(msg[i+3]);
defBright[i].value = parseInt(msg[i+6]);
}
}
</script>
</body>
</html>
Hozzászólások
5 perc míg kuguglizza a hozzá való libet, aztán még 5 perc amíg berakja és kipróbálja. Ezzel azt akarom mondani, hogy ilyen dolgokat manapság nem írnak, hanem letöltenek.
Mi a kérdés? Vagyis inkább miért?
Aláírás _Franko_ miatt törölve.
Jákub egy .
neut @
Junior aki nekiall nullarol: egy nap, de kozben okosodik.
Medior aki kirazza rutinbol: fel oratol ket ora, attol fugg mennyire jo.
Senior: fel ora ha o maga irja meg, ket ora ha AI-val iratja meg, de utobbi esetben kozben tovabb okosodik.
Vagy menedzser: 5 perc alatt ráteszi az egyik alattvalót h. írja meg neki még mára
AI megoldása elsőre:
Irj egy rgb szinkeverőt 3 csuszkával:
https://blog.claryel.hu
:) Ezzel kezdtem.
https://www.esp8266.org/
Akkor két óra, ahogy irták :-).
https://blog.claryel.hu
Tegnap délben kezdtem. Mentségemre: Nem vagyok programozó, azóta aludtam, kocsmáztam is.
https://www.esp8266.org/
Ezért ezt mondjuk, ha kérdezik:
"Na azért nem olyan egyszerű ez , a jövő héten már talán tudok mutatni valamit.....
https://blog.claryel.hu
Attól függ, én voltam olyan környezetben, ahol 5 percért is "izélkedtek", ráadásul olyan, aki 10 évvel ezelőtt kódolt, azóta feljebb buktatták, és azóta nagyon megszépültek az emlékek. :)
Behívott egy meeting-re, és meg kellett magyaráznom, hogy egy olyan taszkot, amivel a csapattársam nagyon jól halad amúgy, és hiba nélkül megcsinálta (tehát tényleg mindent jól csinált), miért 2 nap alatt csinálta meg, és könyvelt a taszkra két napot.
Nem hitte el, és jót röhögött a bajsza alatt, amikor mondtam neki, hogy pont mellélőtt, mert itt minden rendben, és nem hitte le. :)
Szóval remélem, hogy nem ilyen kérdés van (a mai világban már ki tudja).
Tehát a szopó faktor mindig ott van, amivel nagyon tud telni az idő, és szerintem (anélkül hogy belemélyedtem volna, és kb csak a kulcsszavakat néztem meg a kódban. :))) fél nap és három nap között lehet valahol.
És becsléskor mindig fontos, hogy nem a zseniket meg a legtapasztaltabbakat vesszük alapul, hanem egy átlag fejlesztőt, akit kihúzunk a kalapból.
A chatgpt-t meg stack overeflow-t hagyjuk már. Az vagy összejön, vagy nem. ;)
ráadásul olyan, aki 10 évvel ezelőtt kódolt, azóta feljebb buktatták
Azért látom te is dolgoztál akkor fasz munkahelyen, ahol szintén voltak ilyen toxikus görények.
Hát igen, ilyenek bárhol lehetnek. De változatos marhaságok történtek már, de nekem mindig is ezeket volt nehéz kezelni, vagy megszokni vagy megszökni. Gondolom neked is van hasonló tapasztalatod, ezért írtad. :)
Muszáj antik technológiát használni, vagy elég egy <input type="color"> is?
Egy android telcsin elsírtam magam az <input type="color"> paneltól, nem akarom mégegyszer látni.
https://www.esp8266.org/