diff --git a/data_src/index.html b/data_src/index.html
index d44984476ab0624284db1748bfcd6878c8f9ab73..55930d2ab26b5792c6ae8aab48f19e43b895a0c6 100644
--- a/data_src/index.html
+++ b/data_src/index.html
@@ -24,6 +24,9 @@
</h5>
<div class="card-body text-center">
+ <div class="row mb-3 px-3">
+ <div id="colorpicker" class="d-flex justify-content-center"></div>
+ </div>
<div class="row mb-3 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"
@@ -44,8 +47,10 @@
<div class="card-footer text-body-secondary py-3">
<div class="row">
<div class="col-6">
- <button type="button" class="btn btn-sm btn-success btnAction me-1" data-action="loadSettings" disabled>Load</button>
- <button type="button" class="btn btn-sm btn-success btnAction" data-action="saveSettings" disabled>Save</button>
+ <button type="button" class="btn btn-sm btn-success btnAction me-1" data-action="loadSettings"
+ disabled>Load</button>
+ <button type="button" class="btn btn-sm btn-success btnAction" data-action="saveSettings"
+ disabled>Save</button>
</div>
<div class="col-6 text-end">
<button type="button" class="btn btn-sm btn-outline-secondary me-1" data-bs-toggle="collapse"
@@ -92,6 +97,8 @@
<script
src="https://cdn.jsdelivr.net/gh/jbloemendal/jquery-simple-websocket@master/dist/jquery.simple.websocket.min.js"
crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5.5.2/dist/iro.min.js"
+ integrity="sha256-XQju26ya9yEvX99+M2rrLah6xHsjZIGK1LvX/L3RjQ0=" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
diff --git a/data_src/main.js b/data_src/main.js
index fe3f97b492c1afa1af45181da71b74b264686ecd..58eaac2edfe42f5a2dec9e220f95db4932dda6ec 100644
--- a/data_src/main.js
+++ b/data_src/main.js
@@ -3,11 +3,21 @@ var wsUrl = 'ws://' + document.location.host + '/ws';
var settings = {
brightness: 0,
interval: 0,
+ color: {
+ r: 255,
+ g: 255,
+ b: 255,
+ }
};
-$(document).ready(function () {
- uiEnabled(false);
- $("#wsMessages, #prompt").val("");
+var uiEnabled = false;
+
+$(document).ready(function() {
+ enabledUI(false);
+ $("#wsMessages, #prompt").val("");
+});
+
+$(window).on('load', function () {
startSocket();
});
@@ -23,10 +33,20 @@ $(document).on('change', '.rangeSetting', function () {
break;
}
settings[setting] = value;
- var payload = {
- 'settings': settings
- };
- wsSend(payload);
+ sendSettings();
+});
+
+var colorPicker = new iro.ColorPicker('#colorpicker', {
+ layout: [
+ {
+ component: iro.ui.Wheel,
+ }
+ ]
+});
+
+colorPicker.on('input:end', function (color) {
+ settings.color = color.rgb;
+ sendSettings();
});
$('.btnAction').on('click', function () {
@@ -42,15 +62,17 @@ $("#prompt").on('keydown', function (e) {
}
});
-function uiEnabled(enabled) {
- if (enabled) {
+function enabledUI(enable) {
+ if (enable) {
$('#spinner').addClass('invisible');
$('.btnAction').prop('disabled', false);
$('.rangeSetting').prop('disabled', false);
+ uiEnabled = true;
} else {
$('#spinner').removeClass('invisible');
$('.btnAction').prop('disabled', true);
$('.rangeSetting').prop('disabled', true);
+ uiEnabled = false;
}
}
@@ -60,6 +82,16 @@ function addMessage(msg) {
txt.scrollTop(txt[0].scrollHeight - txt.height());
}
+function sendSettings() {
+ if (!uiEnabled) {
+ return;
+ }
+ var payload = {
+ 'settings': settings
+ };
+ wsSend(payload);
+}
+
function wsSend(obj) {
ws.send(obj).done(function () {
addMessage("➡️ " + JSON.stringify(obj));
@@ -74,19 +106,19 @@ function startSocket() {
url: wsUrl,
timeout: 5000,
onOpen: function (e) {
- ws.isConnected(function (connected) {
+ if (ws.isConnected()) {
console.log("WS: connected");
addMessage("✅ connected");
sendAction('getSettings');
- });
+ }
},
onClose: function (e) {
- uiEnabled(false);
+ enabledUI(false);
console.log("WS: disconnected");
addMessage("❌ disconnected");
},
onError: function (e) {
- uiEnabled(false);
+ enabledUI(false);
console.log("WS: error");
addMessage("❗️ error");
},
@@ -110,7 +142,8 @@ function sendAction(action) {
function loadSettings(data) {
settings.brightness = data.brightness;
settings.interval = data.interval;
- uiEnabled(true);
+ colorPicker.color.rgb = data.color;
+ enabledUI(true);
$('#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 c30d059b68468cd2a40ca2cacb166afebe8e2e0f..217b2988afecc58a78dba5c38e0920700d08c733 100644
--- a/src/display.cpp
+++ b/src/display.cpp
@@ -14,7 +14,8 @@ const uint8_t kMatrixOptions = (SMARTMATRIX_OPTIONS_NONE); // see http://docs
const uint8_t kBackgroundLayerOptions = (SM_BACKGROUND_OPTIONS_NONE);
const uint8_t kIndexedLayerOptions = (SM_INDEXED_OPTIONS_NONE);
-rgb24 colorWhite = {0xff, 0xff, 0xff};
+rgb24 gameColor = {colorR, colorG, colorB};
+rgb24 textColor = {255, 255, 255};
SMARTMATRIX_ALLOCATE_BUFFERS(matrix, kMatrixWidth, kMatrixHeight, kRefreshDepth, kDmaBufferRows, kPanelType, kMatrixOptions);
SMARTMATRIX_ALLOCATE_BACKGROUND_LAYER(backgroundLayer, kMatrixWidth, kMatrixHeight, COLOR_DEPTH, kBackgroundLayerOptions);
@@ -27,6 +28,7 @@ void setupDisplay()
matrix.begin();
matrix.setBrightness(defaultBrightness);
indexedLayer.setFont(font3x5);
+ indexedLayer.setIndexedColor(1, textColor);
backgroundLayer.setBrightness(255);
backgroundLayer.enableColorCorrection(true);
}
@@ -42,7 +44,7 @@ void displayLoop()
{
if (g[i][j])
{
- backgroundLayer.drawPixel(j, i, colorWhite);
+ backgroundLayer.drawPixel(j, i, gameColor);
}
}
}
@@ -83,6 +85,13 @@ void gameBrightness(int brightness)
backgroundLayer.setBrightness(brightness);
}
+void setGameColor(uint8_t r, uint8_t g, uint8_t b)
+{
+ gameColor.red = r;
+ gameColor.green = g;
+ gameColor.blue = b;
+}
+
void clearDisplay()
{
indexedLayer.fillScreen(0);
diff --git a/src/display.h b/src/display.h
index 52ccbe387c588de310becfeee9665476b8409879..a0a17cdef1acef55742bc8cd264bf6249a908cd3 100644
--- a/src/display.h
+++ b/src/display.h
@@ -8,6 +8,9 @@
extern bool runGame;
extern int defaultBrightness;
extern int gameEra;
+extern uint8_t colorR;
+extern uint8_t colorG;
+extern uint8_t colorB;
void setupDisplay();
void displayLoop();
@@ -15,6 +18,7 @@ void showEndScreen(int ticks);
void showMessage(char* msg);
void displayBrightness(int brightness);
void gameBrightness(int brightness);
+void setGameColor(uint8_t r, uint8_t g, uint8_t b);
void clearDisplay();
#endif
diff --git a/src/main.cpp b/src/main.cpp
index 6ed2e4151c8971546339f7105ca9f23f12a84129..5dcbb6582d31a4b7590b47563130a7975bd854c8 100644
--- a/src/main.cpp
+++ b/src/main.cpp
@@ -7,6 +7,9 @@
int defaultBrightness;
int gameInterval;
+uint8_t colorR;
+uint8_t colorG;
+uint8_t colorB;
unsigned long lastTick;
@@ -17,7 +20,6 @@ void showTitle() {
showMessage(msg);
}
-
void setup()
{
Serial.begin(115200);
diff --git a/src/network.cpp b/src/network.cpp
index cdbc9b0f6b637397c8a74d8af0cb1cd54548b1f5..5f78cd8bf8edd2edf9b0fa27805854785ca1e9e3 100644
--- a/src/network.cpp
+++ b/src/network.cpp
@@ -266,7 +266,11 @@ void updateSettings(StaticJsonDocument<200U> doc)
{
gameInterval = doc["settings"]["interval"];
defaultBrightness = doc["settings"]["brightness"];
+ colorR = doc["settings"]["color"]["r"];
+ colorG = doc["settings"]["color"]["g"],
+ colorB = doc["settings"]["color"]["b"];
displayBrightness(defaultBrightness);
+ setGameColor(colorR, colorG, colorB);
}
void sendSettings()
@@ -275,6 +279,10 @@ void sendSettings()
JsonObject settings = doc.createNestedObject("settings");
settings["brightness"] = defaultBrightness;
settings["interval"] = gameInterval;
+ JsonObject color = settings.createNestedObject("color");
+ color["r"] = colorR;
+ color["g"] = colorG;
+ color["b"] = colorB;
size_t strsize = measureJson(doc) + 1;
char json[strsize];
serializeJson(doc, json, strsize);
diff --git a/src/settings.cpp b/src/settings.cpp
index a7c7875d9001e8c6189d0cfa522cd7a9f1ee85aa..697212fbab3dcd6e8bcd4db9e5658fc12f9d4d6e 100644
--- a/src/settings.cpp
+++ b/src/settings.cpp
@@ -8,14 +8,21 @@ void loadSettings() {
preferences.begin("settings", true); // true = readonly
defaultBrightness = preferences.getUInt("brightness", 50);
gameInterval = preferences.getUInt("interval", 100);
+ colorR = preferences.getUInt("color_r", 255);
+ colorG = preferences.getUInt("color_g", 255);
+ colorB = preferences.getUInt("color_b", 255);
preferences.end();
displayBrightness(defaultBrightness);
+ setGameColor(colorR, colorG, colorB);
}
void saveSettings() {
preferences.begin("settings", false);
preferences.putUInt("brightness", defaultBrightness);
preferences.putUInt("interval", gameInterval);
+ preferences.putUInt("color_r", colorR);
+ preferences.putUInt("color_g", colorG);
+ preferences.putUInt("color_b", colorB);
preferences.end();
}
diff --git a/src/settings.h b/src/settings.h
index 05a0964a8b8edbcfb8c7ea033b0a0f6f888d0926..b70038f8a8cdbf235c51012bf4d2f61187e83f0a 100644
--- a/src/settings.h
+++ b/src/settings.h
@@ -7,6 +7,9 @@
extern int defaultBrightness;
extern int gameInterval;
+extern uint8_t colorR;
+extern uint8_t colorG;
+extern uint8_t colorB;
typedef struct {
int games;