From c076fcaad2e455286473f692506172e59f93098f Mon Sep 17 00:00:00 2001
From: Jan Grewe <jan@faked.org>
Date: Wed, 7 Jun 2023 00:01:49 +0200
Subject: [PATCH] color mode UI switching
---
data_src/index.html | 28 +++++++++++++++++++++++++---
data_src/main.js | 21 ++++++++++++++++++---
src/display.cpp | 3 ---
src/display.h | 2 ++
src/main.cpp | 2 ++
src/network.cpp | 4 ++++
src/settings.cpp | 4 ++++
7 files changed, 55 insertions(+), 9 deletions(-)
diff --git a/data_src/index.html b/data_src/index.html
index f0604eb..2f81ac2 100644
--- a/data_src/index.html
+++ b/data_src/index.html
@@ -33,26 +33,47 @@
</h5>
<div class="card-body text-center">
+ <!-- color mode -->
<div class="row mb-3 px-3">
+ <div class="btn-group" role="group">
+ <input type="radio" class="btn-check btnColorMode" id="btnColorMode_0" data-mode="0" autocomplete="off" disabled>
+ <label class="btn btn-outline-primary" for="btnColorMode_0">Static</label>
+
+ <input type="radio" class="btn-check btnColorMode" id="btnColorMode_1" data-mode="1" autocomplete="off" disabled>
+ <label class="btn btn-outline-primary" for="btnColorMode_1">Simple</label>
+
+ <input type="radio" class="btn-check btnColorMode" id="btnColorMode_2" data-mode="2" autocomplete="off" disabled>
+ <label class="btn btn-outline-primary" for="btnColorMode_2">Dynamic</label>
+ </div>
+ </div>
+ <!-- // color mode -->
+
+ <div class="row mb-2 px-3">
<div id="colorpicker" class="d-flex justify-content-center"></div>
</div>
- <div class="row mb-3 px-3">
+ <div class="row mb-2 px-3">
+ <label for="rangeDecay" class="col-form-label">Cell Aging</label>
+ <input type="range" class="form-range rangeSetting" id="rangeDecay" data-name="colorDecay" min="1"
+ max="100" steps="1" disabled>
+ </div>
+ <div class="row mb-2 px-3">
<label for="rangeBrightness" class="col-form-label">Brightness</label>
<input type="range" class="form-range rangeSetting" id="rangeBrightness" data-name="brightness" min="1"
max="100" steps="1" disabled>
</div>
- <div class="row mb-3 px-3">
+ <div class="row mb-2 px-3">
<label for="rangeSpeed" class="col-form-label">Speed</label>
<input type="range" class="form-range rangeSetting" id="rangeSpeed" data-name="interval" min="1" max="100"
steps="10" disabled>
</div>
- <div class="row mb-3 px-3 mt-5">
+ <div class="row px-3 mt-4">
<button type="button" class="btn btn-primary btnAction" data-action="addGlider" disabled>Add
Glider</button>
</div>
</div>
+ <!-- card footer -->
<div class="card-footer text-body-secondary py-3">
<div class="row">
<div class="col-6">
@@ -67,6 +88,7 @@
</div>
</div>
</div>
+ <!-- // card footer -->
</div>
diff --git a/data_src/main.js b/data_src/main.js
index bd9fae2..3cec1f3 100644
--- a/data_src/main.js
+++ b/data_src/main.js
@@ -3,6 +3,8 @@ var wsUrl = 'ws://' + document.location.host + '/ws';
var settings = {
brightness: 0,
interval: 0,
+ colorMode: 0,
+ colorDecay: 0,
color: {
r: 255,
g: 255,
@@ -32,6 +34,8 @@ $(document).on('change', '.rangeSetting', function () {
var setting = $(this).data('name');
var value = $(this).val();
switch (setting) {
+ case 'colorDecay':
+ break;
case 'brightness':
value = mapRange(value, 1, 100, 8, 255);
break;
@@ -43,6 +47,13 @@ $(document).on('change', '.rangeSetting', function () {
sendSettings();
});
+$('.btnColorMode').on('click', function () {
+ $('.btnColorMode').not(this).prop('checked', false);
+ var mode = $(this).data('mode');
+ settings['colorMode'] = mode;
+ sendSettings();
+});
+
$('.btnAction').on('click', function () {
var action = $(this).data('action');
sendAction(action);
@@ -69,12 +80,11 @@ $("#prompt").on('keydown', function (e) {
function enabledUI(enable) {
if (enable) {
$('#spinner').addClass('invisible');
- $('.btnAction, .btnConfirm, .rangeSetting').prop('disabled', false);
+ $('.btnColorMode, .btnAction, .btnConfirm, .rangeSetting').prop('disabled', false);
uiEnabled = true;
} else {
$('#spinner').removeClass('invisible');
- $('.btnAction, .btnConfirm, .rangeSetting').prop('disabled', true);
- $('.rangeSetting').prop('disabled', true);
+ $('.btnColorMode, .btnAction, .btnConfirm, .rangeSetting').prop('disabled', true);
uiEnabled = false;
}
}
@@ -150,8 +160,13 @@ function sendAction(action) {
function loadSettings(data) {
settings.brightness = data.brightness;
settings.interval = data.interval;
+ settings.colorMode = data.colorMode;
+ settings.colorDecay = data.colorDecay;
colorPicker.color.rgb = data.color;
enabledUI(true);
+ $('.btnColorMode').prop('checked', false);
+ $('#btnColorMode_'+settings.colorMode).prop('checked', true);
+ $('#rangeDecay').val(data.colorDecay);
$('#rangeBrightness').val(mapRange(data.brightness, 8, 255, 1, 100));
$('#rangeSpeed').val(mapRange(data.interval, 1000, 10, 1, 100));
sendAction('getHighscores');
diff --git a/src/display.cpp b/src/display.cpp
index df29ca1..c89e5a8 100644
--- a/src/display.cpp
+++ b/src/display.cpp
@@ -18,9 +18,6 @@ rgb24 gameColor = {colorR, colorG, colorB};
rgb24 textColor = {255, 255, 255};
rgb24 pixelColor = {255, 255, 255};
-int colorMode = 2; // 0 = static, 1 = simple RGB, 2 = dynamic aging (decay)
-int colorDecay = 5;
-
SMARTMATRIX_ALLOCATE_BUFFERS(matrix, kMatrixWidth, kMatrixHeight, kRefreshDepth, kDmaBufferRows, kPanelType, kMatrixOptions);
SMARTMATRIX_ALLOCATE_BACKGROUND_LAYER(backgroundLayer, kMatrixWidth, kMatrixHeight, COLOR_DEPTH, kBackgroundLayerOptions);
SMARTMATRIX_ALLOCATE_INDEXED_LAYER(indexedLayer, kMatrixWidth, kMatrixHeight, COLOR_DEPTH, kIndexedLayerOptions);
diff --git a/src/display.h b/src/display.h
index 793cf83..727b240 100644
--- a/src/display.h
+++ b/src/display.h
@@ -8,6 +8,8 @@
extern bool runGame;
extern int defaultBrightness;
extern int gameEra;
+extern int colorMode;
+extern int colorDecay;
extern uint8_t colorR;
extern uint8_t colorG;
extern uint8_t colorB;
diff --git a/src/main.cpp b/src/main.cpp
index 5dcbb65..a757a57 100644
--- a/src/main.cpp
+++ b/src/main.cpp
@@ -7,6 +7,8 @@
int defaultBrightness;
int gameInterval;
+int colorMode;
+int colorDecay;
uint8_t colorR;
uint8_t colorG;
uint8_t colorB;
diff --git a/src/network.cpp b/src/network.cpp
index 5f78cd8..cc9e0ce 100644
--- a/src/network.cpp
+++ b/src/network.cpp
@@ -266,6 +266,8 @@ void updateSettings(StaticJsonDocument<200U> doc)
{
gameInterval = doc["settings"]["interval"];
defaultBrightness = doc["settings"]["brightness"];
+ colorMode = doc["settings"]["colorMode"];
+ colorDecay = doc["settings"]["colorDecay"];
colorR = doc["settings"]["color"]["r"];
colorG = doc["settings"]["color"]["g"],
colorB = doc["settings"]["color"]["b"];
@@ -279,6 +281,8 @@ void sendSettings()
JsonObject settings = doc.createNestedObject("settings");
settings["brightness"] = defaultBrightness;
settings["interval"] = gameInterval;
+ settings["colorMode"] = colorMode;
+ settings["colorDecay"] = colorDecay;
JsonObject color = settings.createNestedObject("color");
color["r"] = colorR;
color["g"] = colorG;
diff --git a/src/settings.cpp b/src/settings.cpp
index 697212f..27b0f6e 100644
--- a/src/settings.cpp
+++ b/src/settings.cpp
@@ -8,6 +8,8 @@ void loadSettings() {
preferences.begin("settings", true); // true = readonly
defaultBrightness = preferences.getUInt("brightness", 50);
gameInterval = preferences.getUInt("interval", 100);
+ colorMode = preferences.getUInt("color_mode", 0); // 0 = static, 1 = simple RGB, 2 = dynamic aging (decay)
+ colorDecay = preferences.getUInt("color_decay", 5);
colorR = preferences.getUInt("color_r", 255);
colorG = preferences.getUInt("color_g", 255);
colorB = preferences.getUInt("color_b", 255);
@@ -20,6 +22,8 @@ void saveSettings() {
preferences.begin("settings", false);
preferences.putUInt("brightness", defaultBrightness);
preferences.putUInt("interval", gameInterval);
+ preferences.putUInt("color_mode", colorMode);
+ preferences.putUInt("color_decay", colorDecay);
preferences.putUInt("color_r", colorR);
preferences.putUInt("color_g", colorG);
preferences.putUInt("color_b", colorB);
--
GitLab