From 1c429bc2fca8edd4102790576ddc83162fbdcfff Mon Sep 17 00:00:00 2001
From: Jan Grewe <jan@faked.org>
Date: Wed, 7 Jun 2023 01:23:51 +0200
Subject: [PATCH] UI: use 2 columns on large screen
---
data_src/index.html | 276 +++++++++++++++++++++++---------------------
data_src/main.js | 2 +-
2 files changed, 145 insertions(+), 133 deletions(-)
diff --git a/data_src/index.html b/data_src/index.html
index 523b36a..ad45621 100644
--- a/data_src/index.html
+++ b/data_src/index.html
@@ -10,7 +10,7 @@
<style>
html {
width: 100%;
- height: 100%;
+ min-height: 100%;
}
#wsMessages {
@@ -19,172 +19,184 @@
</style>
</head>
-<body class="w-100 h-100 d-flex align-items-center" data-bs-theme="dark">
+<body class="w-100 min-vh-100 d-flex align-items-center py-3" data-bs-theme="dark">
<div class="container justify-content-center">
- <div class="col-lg-4 offset-lg-4">
+ <div class="row">
- <div class="card">
- <h5 class="card-header">
- Matrix of Life <div id="spinner" class="spinner-border spinner-border-sm" role="status">
- <span class="visually-hidden">Loading...</span>
- </div>
- </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" data-control="#collapseColorpicker" 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" data-control="#collapseDecay" 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 collapse collapseSettings" id="collapseColorpicker">
- <div id="colorpicker" class="d-flex justify-content-center"></div>
- </div>
- <div class="row mb-2 px-3 collapse collapseSettings" id="collapseDecay">
- <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-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 px-3 mt-4">
- <button type="button" class="btn btn-primary btnAction" data-action="addGlider" disabled>Add
- Glider</button>
- </div>
+ <div class="col-lg-4 offset-lg-2">
- </div>
+ <div class="mb-3">
- <!-- card footer -->
- <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>
- </div>
- <div class="col-6 text-end">
- <button type="button" class="btn btn-sm btn-outline-secondary me-1" data-bs-toggle="collapse"
- data-bs-target="#debug">Debug</button>
- </div>
- </div>
- </div>
- <!-- // card footer -->
-
- </div>
-
- </div> <!-- main -->
+ <div class="card">
+ <h5 class="card-header">
+ Matrix of Life <div id="spinner" class="spinner-border spinner-border-sm" role="status">
+ <span class="visually-hidden">Loading...</span>
+ </div>
+ </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" data-control="#collapseColorpicker" 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" data-control="#collapseDecay" autocomplete="off" disabled>
+ <label class="btn btn-outline-primary" for="btnColorMode_2">Dynamic</label>
+ </div>
+ </div>
+ <!-- // color mode -->
- <div class="col-lg-4 offset-lg-4 mt-3" id="scores">
+ <div class="row mb-2 px-3 collapse collapseSettings" id="collapseColorpicker">
+ <div id="colorpicker" class="d-flex justify-content-center"></div>
+ </div>
+ <div class="row mb-2 px-3 collapse collapseSettings" id="collapseDecay">
+ <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-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 px-3 mt-4">
+ <button type="button" class="btn btn-primary btnAction" data-action="addGlider" disabled>Add
+ Glider</button>
+ </div>
- <div class="card">
- <h5 class="card-header">
- Last Game / Highscores
- </h5>
- <div class="card-body">
+ </div>
- <div class="row mb-1">
- <div class="col col-lg-3 text-end">Games</div>
- <div class="col col-lg-8 pt-1">
- <div class="progress-stacked">
- <div class="progress" role="progressbar" style="width: 0%" id="lastGame">
- <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
+ <!-- card footer -->
+ <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>
</div>
- <div class="progress" role="progressbar" style="width: 0%" id="hsGames">
- <div class="progress-bar bg-primary"></div>
+ <div class="col-6 text-end">
+ <button type="button" class="btn btn-sm btn-outline-secondary me-1" data-bs-toggle="collapse"
+ data-bs-target="#debug">Debug</button>
</div>
</div>
</div>
+ <!-- // card footer -->
+
</div>
- <div class="row mb-1">
- <div class="col col-lg-3 text-end">Ticks</div>
- <div class="col col-lg-8 pt-1">
- <div class="progress-stacked">
- <div class="progress" role="progressbar" style="width: 0%" id="lastTicks">
- <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
- </div>
- <div class="progress" role="progressbar" style="width: 0%" id="hsTicks">
- <div class="progress-bar bg-primary"></div>
+ </div> <!-- main -->
+
+ </div>
+
+ <div class="col-lg-4">
+
+ <div class="mb-3" id="scores">
+
+ <div class="card">
+ <h5 class="card-header">
+ Last Game / Highscores
+ </h5>
+ <div class="card-body">
+
+ <div class="row mb-1">
+ <div class="col col-lg-3 text-end">Games</div>
+ <div class="col col-lg-8 pt-1">
+ <div class="progress-stacked">
+ <div class="progress" role="progressbar" style="width: 0%" id="lastGame">
+ <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
+ </div>
+ <div class="progress" role="progressbar" style="width: 0%" id="hsGames">
+ <div class="progress-bar bg-primary"></div>
+ </div>
+ </div>
</div>
</div>
- </div>
- </div>
- <div class="row">
- <div class="col col-lg-3 text-end">Cells</div>
- <div class="col col-lg-8 pt-1">
- <div class="progress-stacked">
- <div class="progress" role="progressbar" style="width: 0%" id="lastCells">
- <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
+ <div class="row mb-1">
+ <div class="col col-lg-3 text-end">Ticks</div>
+ <div class="col col-lg-8 pt-1">
+ <div class="progress-stacked">
+ <div class="progress" role="progressbar" style="width: 0%" id="lastTicks">
+ <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
+ </div>
+ <div class="progress" role="progressbar" style="width: 0%" id="hsTicks">
+ <div class="progress-bar bg-primary"></div>
+ </div>
+ </div>
</div>
- <div class="progress" role="progressbar" style="width: 0%" id="hsCells">
- <div class="progress-bar bg-primary"></div>
+ </div>
+
+ <div class="row">
+ <div class="col col-lg-3 text-end">Cells</div>
+ <div class="col col-lg-8 pt-1">
+ <div class="progress-stacked">
+ <div class="progress" role="progressbar" style="width: 0%" id="lastCells">
+ <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
+ </div>
+ <div class="progress" role="progressbar" style="width: 0%" id="hsCells">
+ <div class="progress-bar bg-primary"></div>
+ </div>
+ </div>
</div>
</div>
+
</div>
</div>
- </div>
- </div>
-
- </div> <!-- scores -->
-
- <div class="col-lg-4 offset-lg-4 mt-3 collapse" id="debug">
+ </div> <!-- scores -->
- <div class="card">
- <h5 class="card-header">
- Debug
- </h5>
- <div class="card-body">
+ <div class="collapse" id="debug">
- <textarea id="wsMessages" class="form-control mb-2 font-monospace" rows="10" spellcheck="false"></textarea>
- <div id="input_div">
- <div class="input-group">
- <span class="input-group-text">➡️</span>
- <input type="text" id="prompt" class="form-control form-control-sm font-monospace">
- </div>
+ <div class="card">
+ <h5 class="card-header">
+ Debug
+ </h5>
+ <div class="card-body">
- </div>
+ <textarea id="wsMessages" class="form-control mb-2 font-monospace" rows="10" spellcheck="false"></textarea>
+ <div id="input_div">
+ <div class="input-group">
+ <span class="input-group-text">➡️</span>
+ <input type="text" id="prompt" class="form-control form-control-sm font-monospace">
+ </div>
- </div>
+ </div>
- <div class="card-footer text-body-secondary py-3">
- <div class="row">
- <div class="col-6">
- <button type="button" class="btn btn-sm btn-warning btnConfirm" data-action="reboot" data-title="Reboot"
- data-text="reboot?" disabled>Reboot</button>
</div>
- <div class="col-6 text-end">
- <button type="button" class="btn btn-sm btn-danger btnConfirm" data-action="reset"
- data-title="Factory Reset" data-text="erase all highscores and settings? (ToDo)" disabled>Factory
- Reset</button>
+
+ <div class="card-footer text-body-secondary py-3">
+ <div class="row">
+ <div class="col-6">
+ <button type="button" class="btn btn-sm btn-warning btnConfirm" data-action="reboot" data-title="Reboot"
+ data-text="reboot?" disabled>Reboot</button>
+ </div>
+ <div class="col-6 text-end">
+ <button type="button" class="btn btn-sm btn-danger btnConfirm" data-action="reset"
+ data-title="Factory Reset" data-text="erase all highscores and settings? (ToDo)" disabled>Factory
+ Reset</button>
+ </div>
+ </div>
</div>
+
</div>
- </div>
+
+ </div> <!-- debug -->
</div>
- </div> <!-- debug -->
+ </div>
</div>
diff --git a/data_src/main.js b/data_src/main.js
index 9d4879c..e38a63e 100644
--- a/data_src/main.js
+++ b/data_src/main.js
@@ -123,7 +123,7 @@ var ws;
function startSocket() {
ws = $.simpleWebSocket({
url: wsUrl,
- timeout: 5000,
+ timeout: 1000,
onOpen: function (e) {
if (ws.isConnected()) {
console.log("WS: connected");
--
GitLab