Skip to content

Commit

Permalink
Adressed Bug with background color picker.
Browse files Browse the repository at this point in the history
  • Loading branch information
@dbambus
dbambus committed Jan 17, 2025
1 parent 20ee7ce commit 269ffea
Show file tree
Hide file tree
Showing 7 changed files with 112 additions and 55 deletions.
2 changes: 1 addition & 1 deletion include/Transitiontypes/Transition.hpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1137,7 +1137,7 @@ void Transition::loop(struct tm &tm) {
setMinute();
if (G.secondVariant != SecondVariant::Off) {
led.setbySecondArray();
// Workaround: setbySecoundArray not in 'work'
// Workaround: setbySecondArray not in 'work'
}
}
led.show();
Expand Down
1 change: 1 addition & 0 deletions include/clockWork.hpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1207,6 +1207,7 @@ void ClockWork::loop(struct tm &tm) {
config["effectSpeed"] = G.effectSpeed;
config["colortype"] = G.Colortype;
config["hasHappyBirthday"] = usedUhrType->hasHappyBirthday();
config["hasSecondsFrame"] = usedUhrType->hasSecondsFrame();
config["prog"] = G.prog;
serializeJson(config, str);
webSocket.sendTXT(G.client_nr, str, strlen(str));
Expand Down
13 changes: 13 additions & 0 deletions webpage/icons/color_bg.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 29 additions & 0 deletions webpage/icons/color_fr.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 27 additions & 3 deletions webpage/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,14 @@
<symbol id="icon-mode-wordclock" viewBox="0 0 32 32">
<path d="m5 2c-1.6447 0-3 1.3553-3 3v22c0 1.6447 1.3553 3 3 3h22c1.6447 0 3-1.3553 3-3v-22c0-1.6447-1.3553-3-3-3zm0 2h22c0.5713 0 1 0.4287 1 1v22c0 0.5713-0.4287 1-1 1h-22c-0.5713 0-1-0.4287-1-1v-22c0-0.5713 0.4287-1 1-1z" fill="#5c5c5c" stroke-linecap="round" stroke-linejoin="round"/><path d="m14 21h12v3h-12z" fill="#999"/><path d="m10 15h9v3h-9z" fill="#6c6c6c"/><path d="m14 10h12v3h-12z" fill="#525252"/><path d="m7 6h6v3h-6z" fill="#a6a6a6"/>
</symbol>

<symbol id="icon-color-background" viewBox="0 0 32 32">
<path d="m5 28h22c0.6 0 1-0.4 1-1v-22c0-0.6-0.4-1-1-1h-22c-0.6 0-1 0.4-1 1v22c0 0.6 0.4 1 1 1zm21-4h-12v-3h12v3zm-16-6v-3h9v3h-9zm4-8h12v3h-12v-3zm-7-4h6v3h-6v-3z" fill="#7F8080" /><path d="M27,2H5C3.4,2,2,3.4,2,5v22c0,1.6,1.4,3,3,3h22c1.6,0,3-1.4,3-3V5C30,3.4,28.6,2,27,2z M28,27c0,0.6-0.4,1-1,1 H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h22c0.6,0,1,0.4,1,1V27z" fill="#5C5C5C"/>
</symbol>

<symbol id="icon-color-frame" viewBox="0 0 32 32">
<path d="M 27.9,0 H 4.1 C 1.8,0 0,1.8 0,4.1 V 28 c 0,2.2 1.8,4 4.1,4 H 28 c 2.2,0 4.1,-1.8 4.1,-4.1 V 4.1 C 32,1.8 30.2,0 27.9,0 Z M 30,9.1 V 27 c 0,1.6 -1.4,3 -3,3 H 5 C 3.4,30 2,28.6 2,27 V 5 C 2,3.4 3.4,2 5,2 h 22 c 1.6,0 3,1.4 3,3 z" id="path1" fill="#999"/><path d="M 27,2 H 5 C 3.4,2 2,3.4 2,5 v 22 c 0,1.6 1.4,3 3,3 h 22 c 1.6,0 3,-1.4 3,-3 V 5 C 30,3.4 28.6,2 27,2 Z M 5,28 C 4.4,28 4,27.6 4,27 V 5 C 4,4.4 4.4,4 5,4 h 22 c 0.6,0 1,0.4 1,1 v 22 c 0,0.6 -0.4,1 -1,1 z" id="path2" fill="#5C5C5C"/>
</symbol>
</svg>

<a href="#menu" role="button" aria-controls="menu" aria-expanded="false" class="hamburger">
Expand Down Expand Up @@ -120,9 +128,25 @@ <h1 data-i18next="colors.h1"></h1>
</header>

<div class="box box-color">
<p>
<input type="checkbox" id="with-background" checked=""/> <label for="with-background" class="pure-checkbox" data-i18next="colors.with-background"></label>
</p>
<form name="prog" class="mode-color-form" id="mode-color-form">
<label for="colorwheel-foreground" class="radio-select">
<input id="colorwheel-foreground" type="radio" name="colorwheel" value="color" checked>
<svg aria-hidden="true"><use href="#icon-mode-wordclock"/></svg>
<span data-i18next="functions.color.foreground"></span>
</label>
<label for="colorwheel-background" class="radio-select">
<input id="colorwheel-background" type="radio" name="colorwheel" value="color">
<svg aria-hidden="true"><use href="#icon-color-background"/></svg>
<span data-i18next="functions.color.background"></span>
</label>
<div class="specific-layout-7">
<label for="colorwheel-frame" class="radio-select">
<input id="colorwheel-frame" type="radio" name="colorwheel" value="color">
<svg aria-hidden="true"><use href="#icon-color-frame"/></svg>
<span data-i18next="functions.color.frame"></span>
</label>
</div>
</form>
<div id="color-picker" class="color-picker"></div>
<div class="swatch-grid" id="swatch-grid">
<div class="swatch" data-color="#ffffff" style="background: #ffffff"></div>
Expand Down
85 changes: 34 additions & 51 deletions webpage/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,10 @@ var debug = true;
var command = 1;
var hsb = [
[0, 100, 50],
[120, 100, 50]
[120, 100, 50],
[240, 100, 50]
];
var colorPosition = 0;
var effectBri = 2;
var effectSpeed = 10;
var sleep = 0;
Expand Down Expand Up @@ -193,7 +195,8 @@ function initConfigValues() {
command = 1;
hsb = [
[0, 100, 50],
[120, 100, 50]
[120, 100, 50],
[240, 100, 50]
];
effectBri = 2;
effectSpeed = 10;
Expand Down Expand Up @@ -324,6 +327,8 @@ function initWebsocket() {

websocket.onmessage = function(event) {

const modeColorForm = document.getElementById("mode-color-form");

var data = JSON.parse(event.data);

debugMessage("WebSocket response arrived (command " + data.command + ").", data);
Expand Down Expand Up @@ -394,12 +399,15 @@ function initWebsocket() {
document.getElementById("boot-show-wifi").checked = data.bootShowWifi;
document.getElementById("boot-show-ip").checked = data.bootShowIP;

modeColorForm.style.gridTemplateColumns = data.hasSecondsFrame ? "1fr 1fr 1fr" : "1fr 1fr";

enableSpecific("specific-layout-1", !data.isRomanLanguage);
enableSpecific("specific-layout-2", data.hasDreiviertel);
enableSpecific("specific-layout-3", data.hasZwanzig);
enableSpecific("specific-layout-4", data.hasSecondsFrame);
enableSpecific("specific-layout-5", data.hasWeatherLayout);
enableSpecific("specific-layout-6", data.UhrtypeDef === 10); // Add A-Quarter to (En10x11 exclusive)
enableSpecific("specific-layout-7", data.hasSecondsFrame);

enableSpecific("specific-colortype-4", data.colortype === 5);

Expand All @@ -425,6 +433,8 @@ function initWebsocket() {
colortype = data.colortype;
hasHappyBirthday = data.hasHappyBirthday;

modeColorForm.style.gridTemplateColumns = data.hasSecondsFrame ? "1fr 1fr 1fr" : "1fr 1fr";

var prog = data.prog;
command = prog === 0 ? COMMAND_MODE_WORD_CLOCK : prog; // 0 == COMMAND_IDLE
const inputID = MODE_TO_INPUT_ID.get(prog);
Expand All @@ -434,6 +444,7 @@ function initWebsocket() {
setSliders();
setColors();
enableSpecific("specific-colortype-4", data.colortype === 5);
enableSpecific("specific-layout-7", data.hasSecondsFrame);
}
if (data.command === "wlan") {
document.getElementById("wlanlist").innerHTML = data.list;
Expand All @@ -460,10 +471,10 @@ function initWebsocket() {
}

function changeColor(color) {
hsb[color.index][0] = color.hue;
hsb[color.index][1] = color.saturation;
hsb[colorPosition][0] = color.hue;
hsb[colorPosition][1] = color.saturation;
if (color.value !== 100) {
hsb[color.index][2] = color.value;
hsb[colorPosition][2] = color.value;
}

setColors();
Expand All @@ -489,58 +500,18 @@ function createColorPicker() {
}

/**
* show the color configuration in the color picker
* initialize background checkbox and color picker
*/
function setColorPicker(withBackground) {
function setColors() {
var hsbFg = {
h: hsb[COLOR_FOREGROUND][0],
s: hsb[COLOR_FOREGROUND][1],
v: hsb[COLOR_FOREGROUND][2]
};
var hsbBg = {
h: hsb[COLOR_BACKGROUND][0],
s: hsb[COLOR_BACKGROUND][1],
v: hsb[COLOR_BACKGROUND][2]
h: hsb[colorPosition][0],
s: hsb[colorPosition][1],
v: hsb[colorPosition][2]
};
var colors = [hsbFg];
if (withBackground) {
colors.push(hsbBg);
}
colorPicker.setColors(colors);
}

/**
* initialize background checkbox and color picker
*/
function setColors() {
var withBackground =
hsb[COLOR_BACKGROUND][0] ||
hsb[COLOR_BACKGROUND][1] ||
hsb[COLOR_BACKGROUND][2];
setColorPicker(withBackground);
$("#with-background").set("checked", withBackground);
}

/**
* toggle between no background and a default dark gray background
*/
function toggleBackground() {
var withBackground = $("#with-background").get("checked") | 0;
if (withBackground) {
// set to dark gray
hsb[COLOR_BACKGROUND][0] = 0;
hsb[COLOR_BACKGROUND][1] = 0;
hsb[COLOR_BACKGROUND][2] = 10;
} else {
// set to black
hsb[COLOR_BACKGROUND][0] = 0;
hsb[COLOR_BACKGROUND][1] = 0;
hsb[COLOR_BACKGROUND][2] = 0;
}
setColorPicker(withBackground);
sendColorData(command, nstr(1));
}

/**
* Sets all sliders (the values) and their corresponding labels to
* the currently stored config values.
Expand Down Expand Up @@ -670,7 +641,19 @@ $.ready(function() {
initWebsocket();
setColors();

$("#with-background").on("change", toggleBackground);
$("input[name='colorwheel']").on("change", function() {
var id = $(this).get("id");
if (id === "colorwheel-frame") {
colorPosition = 2;
} else if (id === "colorwheel-background") {
colorPosition = 1;
} else {
colorPosition = 0;
}
console.log("colorPosition: " + colorPosition);
setColors();
});

$(".status-button").on("click", function() {
var value = $(this).get("value");
$("#status").fill("Verbinden ...");
Expand Down
7 changes: 7 additions & 0 deletions webpage/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -259,6 +259,13 @@ a:visited:hover {
grid-gap: .5em;
}

.mode-color-form {
display: inline-grid;
grid-gap: .5em;
margin-bottom: 1em;
grid-template-columns: 1fr 1fr;
}

.radio-select {
border: 2px solid #eee;
border-radius: .4em;
Expand Down

0 comments on commit 269ffea

Please sign in to comment.