Feature/background color (#107)

* Add enable/disable fog variable * Add background color variable * Add background in setup * Populate defaults for enableFog and backgroundColor as a migration step * add tool tip --------- Co-authored-by: Antony Leons <antony@leons.dev>
2024-02-24 18:59:42 +01:00 · 2024-02-24 18:59:42 +01:00 · 7a8d4cd653
parent 0de0cf8577
commit 7a8d4cd653
17 changed files with 191 additions and 39 deletions
--- a/README.md
+++ b/README.md
@ -71,11 +71,13 @@ Ward works nice on all popular operating systems, because it uses [OSHI](https:/

 If you want to change Ward's configuration, you can edit `setup.ini`. When using Docker, use the environment variables `WARD_NAME`,`WARD_THEME`, `WARD_PORT` to automatically regenerate this file at startup. Using any environment variable listed will enable the defaults below and immediately start Ward without the GUI setup. 

-| Setting    | Description                  | Default |
-|------------|------------------------------|---------|
-| serverName | Name shown in the interface. | Ward    |
-| theme      | Either `light` or `dark`.    | light   |
-| port       | Port to listen on.           | 4000    |
+| Setting         | Env var         | Description                                  | Default |
+|-----------------|-----------------|----------------------------------------------|---------|
+| serverName      | WARD_NAME       | Name shown in the interface.                 | Ward    |
+| port            | WARD_PORT       | Port to listen on.                           | 4000    |
+| theme           | WARD_THEME      | Either `light` or `dark`.                    | light   |
+| enableFog       | WARD_FOG        | Either `true` or `false`.                    | true    |
+| backgroundColor | WARD_BACKGROUND | HexColor for background when fog is disabled | default |

 Environment variables take priority and will regenerate this file with your variables. If no environment variables are set, `setup.ini` is generated once you navigate to Ward's webpage and complete the initial setup. You can also make this file yourself before starting Ward, and place it in the same directory.

@ -86,4 +88,6 @@ For example:
 serverName = my-server
 theme = dark
 port = 8200
+enableFog = true
+backgroundColor = #303030
 ```
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -9,5 +9,7 @@ services:
            - WARD_PORT=4000
            - WARD_THEME=dark
            - WARD_NAME=leons-server
+            - WARD_FOG=false
+            - WARD_BACKGROUND=#3c3c3c
        privileged: true
        image: antonyleons/ward
--- a/pom.xml
+++ b/pom.xml
@ -6,7 +6,7 @@
    <modelVersion>4.0.0</modelVersion>
    <groupId>dev.leons</groupId>
    <artifactId>ward</artifactId>
-    <version>2.4.1</version>
+    <version>2.5.0</version>
    <packaging>jar</packaging>

    <!-- parent pom -->
--- a/src/main/java/dev/leons/ward/Ward.java
+++ b/src/main/java/dev/leons/ward/Ward.java
@ -51,7 +51,7 @@ public class Ward extends SpringBootServletInitializer {

        File setupFile = new File(Ward.SETUP_FILE_PATH);

-        if (System.getenv("WARD_NAME") != null || (System.getenv("WARD_THEME") != null) || (System.getenv("WARD_PORT") != null)) {
+        if (System.getenv("WARD_NAME") != null || (System.getenv("WARD_THEME") != null) || (System.getenv("WARD_PORT") != null) || (System.getenv("WARD_FOG") != null)) {
            SetupService.envSetup();
        } else if (setupFile.exists()) {
            restart();
--- a/src/main/java/dev/leons/ward/components/UtilitiesComponent.java
+++ b/src/main/java/dev/leons/ward/components/UtilitiesComponent.java
@ -9,12 +9,12 @@ import java.io.IOException;

 /**
 * UtilitiesComponent provides various functions, which are used in different classes
+ *
 * @author Rudolf Barbu
 * @version 1.0.2
 */
@Component
-public class UtilitiesComponent
-{
+public class UtilitiesComponent {
    /**
     * Constant, that providing setup section name
     */
@ -25,19 +25,36 @@ public class UtilitiesComponent
     *
     * @param optionName option in section
     * @return String wth parsed data
-     * @throws IOException if file does not exists
+     * @throws IOException if file does not exist
     */
    @SuppressWarnings(value = "MismatchedQueryAndUpdateOfCollection")
-    public String getFromIniFile(final String optionName) throws IOException
-    {
-        File file = new File(Ward.SETUP_FILE_PATH);
+    public String getFromIniFile(final String optionName) throws IOException {
+        final File file = new File(Ward.SETUP_FILE_PATH);

-        if (file.exists())
-        {
-            Ini ini = new Ini(file);
+        if (file.exists()) {
+            final Ini ini = new Ini(file);
            return ini.get(SECTION_NAME, optionName, String.class);
        }

        return null;
    }
+
+    /**
+     * Sets string data to the ini file
+     *
+     * @param optionName option in section
+     * @param value value to put
+     * @throws IOException if file does not exist
+     */
+    public void putInIniFile(final String optionName, final String value) throws IOException {
+        final File file = new File(Ward.SETUP_FILE_PATH);
+
+        if (file.exists()) {
+            final Ini ini = new Ini(file);
+            ini.put(SECTION_NAME, optionName, value);
+            ini.store();
+        } else {
+            throw new IOException();
+        }
+    }
 }
--- a/src/main/java/dev/leons/ward/dto/SetupDto.java
+++ b/src/main/java/dev/leons/ward/dto/SetupDto.java
@ -42,4 +42,19 @@ public class SetupDto
    @Min(value = 10)
    @Max(value = 65535)
    private String port;
+
+    /**
+     * Enable fog field
+     */
+    @NotNull
+    @NotEmpty
+    @Pattern(regexp = "true|false")
+    private String enableFog;
+
+    /**
+     * Background Color field
+     */
+    @NotEmpty
+    @Pattern(regexp = "^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$|default")
+    private String backgroundColor;
 }
--- a/src/main/java/dev/leons/ward/services/IndexService.java
+++ b/src/main/java/dev/leons/ward/services/IndexService.java
@ -78,8 +78,12 @@ public class IndexService
            return "setup";
        }

+        updateDefaultsInSetupFile();
+
        model.addAttribute("theme", utilitiesComponent.getFromIniFile("theme"));
        model.addAttribute("serverName", utilitiesComponent.getFromIniFile("serverName"));
+        model.addAttribute("enableFog", utilitiesComponent.getFromIniFile("enableFog"));
+        model.addAttribute("backgroundColor", utilitiesComponent.getFromIniFile("backgroundColor"));

        model.addAttribute("info", infoService.getInfo());
        model.addAttribute("uptime", uptimeService.getUptime());
@ -87,4 +91,13 @@ public class IndexService

        return "index";
    }
+
+    private void updateDefaultsInSetupFile() throws IOException {
+        if (utilitiesComponent.getFromIniFile("enableFog") == null) {
+            utilitiesComponent.putInIniFile("enableFog", "true");
+        }
+        if (utilitiesComponent.getFromIniFile("backgroundColor") == null) {
+            utilitiesComponent.putInIniFile("backgroundColor", "#303030");
+        }
+    }
 }
--- a/src/main/java/dev/leons/ward/services/SetupService.java
+++ b/src/main/java/dev/leons/ward/services/SetupService.java
@ -51,6 +51,8 @@ public class SetupService {
                putInIniFile(file, "serverName", setupDto.getServerName());
                putInIniFile(file, "theme", setupDto.getTheme());
                putInIniFile(file, "port", setupDto.getPort());
+                putInIniFile(file, "enableFog", setupDto.getEnableFog());
+                putInIniFile(file, "backgroundColor", setupDto.getBackgroundColor());

                Ward.restart();
            } else {
@ -74,10 +76,14 @@ public class SetupService {
                    String servername = (System.getenv("WARD_NAME") != null) ? System.getenv("WARD_NAME") : "Ward";
                    String theme = (System.getenv("WARD_THEME") != null) ? System.getenv("WARD_THEME").toLowerCase() : "light";
                    String port = (System.getenv("WARD_PORT") != null) ? System.getenv("WARD_PORT") : "4000";
+                    String enableFog = (System.getenv("WARD_FOG") != null) ? System.getenv("WARD_FOG") : "true";
+                    String backgroundColor = (System.getenv("WARD_BACKGROUND") != null) ? System.getenv("WARD_BACKGROUND") : "default";

                    putInIniFile(file, "serverName", servername);
                    putInIniFile(file, "theme", theme);
                    putInIniFile(file, "port", port);
+                    putInIniFile(file, "enableFog", enableFog);
+                    putInIniFile(file, "backgroundColor", backgroundColor);

                    Ward.restart();
                } else {
--- a/src/main/resources/static/css/dimensions.css
+++ b/src/main/resources/static/css/dimensions.css
@ -24,8 +24,9 @@
    --top-label-additional-settings: 2.3rem;
    --top-additional-settings: 1rem;
    --top-theme-buttons-input: 1.938rem;
+    --top-background-settings: 2.938rem;
    --top-button-squares-grid: 0.222rem;
-    --top-port: 2.75rem;
+    --top-port: 2.7rem;
    --top-header: 1.5rem;
    --top-label-hw-info: 0.562rem;
    --top-card-body-squares-grid: 0.813rem;
@ -65,7 +66,9 @@
    --left-main-settings: 1.5rem;
    --left-button-squares-grid-first: 1.5rem;
    --left-button-squares-grid-second: 19.688rem;
+    --left-background-settings: 1.5rem;
    --left-theme-buttons-first: 1.5rem;
+    --left-background-settings-color-selector: 1.5rem;
    --left-port: 1.5rem;
    --left-submit: 6.563rem;
    --left-header: 1.5rem;
@ -116,16 +119,17 @@
    /* height */
    --height-body: 100%;
    --height-setup: 26.706rem;
-    --height-setup-div: 26.706rem;
+    --height-setup-div: 32.706rem;
    --height-clouds: 8.281rem;
    --height-clouds-img: 5.438rem;
    --height-background: 8.281rem;
-    --height-form: 18.425rem;
+    --height-form: 24.425rem;
    --height-form-squares-grid-div: 0.625rem;
    --height-main-settings: 1.875rem;
    --height-main-settings-underline: 0.313rem;
    --height-main-settings-select: 1.875rem;
    --height-theme-buttons-input: 2.188rem;
+    --height-background-settings: 2.188rem;
    --height-button-squares-grid-div: 0.625rem;
    --height-port: 3.125rem;
    --height-submit: 1.875rem;
@ -178,6 +182,7 @@
    --width-main-settings-underline: 18.875rem;
    --width-main-settings-select: 18.875rem;
    --width-theme-buttons-input: 9.063rem;
+    --width-background-settings-input: 9.063rem;
    --width-button-squares-grid-div: 0.625rem;
    --width-port: 18.875rem;
    --width-submit: 8.75rem;
--- a/src/main/resources/static/css/layout.css
+++ b/src/main/resources/static/css/layout.css
@ -280,6 +280,35 @@ body {
    background: var(--background-theme-buttons-second);
 }

+.additional-settings > label {
+    top: var(--top-background-settings);
+    left: var(--left-background-settings);
+    height: var(--height-background-settings);
+    white-space: nowrap;
+}
+
+.additional-settings > label > input {
+    vertical-align: middle;
+    position: relative;
+    left: var(--left-background-settings);
+    border-style: none;
+}
+
+.additional-settings > label > span {
+    vertical-align: middle;
+    position: relative;
+}
+
+.additional-settings > .color-selector {
+    display: block;
+    position: relative;
+    margin-top: var(--height-background-settings);
+    left: var(--left-background-settings-color-selector);
+    width: var(--width-background-settings-input);
+    background: var(--background-background-settings-color-selector);
+    box-shadow: var(--box-shadow-background-settings-input) var(--black-opacity-10);
+}
+
 .port {
    position: relative;
    top: var(--top-port);
--- a/src/main/resources/static/css/shadows.css
+++ b/src/main/resources/static/css/shadows.css
@ -20,6 +20,7 @@
    --box-shadow-main-settings-underline: 0.000rem 0.188rem 0.313rem 0.000rem;
    --box-shadow-button-squares-grid-div: 0.000rem 0.188rem 0.313rem 0.000rem;
    --box-shadow-theme-buttons-input: 0.000rem 0.188rem 0.313rem 0.000rem;
+    --box-shadow-background-settings-input: 0.000rem 0.188rem 0.313rem 0.000rem;
    --box-shadow-submit: 0.000rem 0.188rem 0.313rem 0.000rem;
    --box-shadow-card: 0.000rem 0.313rem 0.625rem 0.000rem;
    --box-shadow-uptime-squares-grid-div: 0.000rem 0.188rem 0.313rem 0.000rem;
--- a/src/main/resources/static/css/themes.css
+++ b/src/main/resources/static/css/themes.css
@ -63,6 +63,7 @@ html[theme = "light"]
    --background-button-squares-grid-second: var(--grey-light);
    --background-theme-buttons-first: var(--purple-light);
    --background-theme-buttons-second: var(--grey-light);
+    --background-background-settings-color-selector: var(--grey-light);
    --background-port: var(--white);
    --background-submit: var(--green-light);
    --background-card: var(--white);
@ -148,6 +149,7 @@ html[theme = "dark"]
    --background-button-squares-grid-second: var(--grey-light);
    --background-theme-buttons-first: var(--purple-light);
    --background-theme-buttons-second: var(--grey-light);
+    --background-background-settings-color-selector: var(--grey-light);
    --background-port: var(--grey);
    --background-submit: var(--grey-light);
    --background-card: var(--grey-dark);
--- a/src/main/resources/static/js/background.js
+++ b/src/main/resources/static/js/background.js
@ -5,26 +5,42 @@
 */
 function backgroundInitialization()
 {
-    background = VANTA.FOG({el: "#background", blurFactor: 0.40, zoom: 1.50});
-
-    if (html.getAttribute("theme") == "light")
+if (html.getAttribute("enableFog") == "true")
    {
-        background.setOptions
-        ({
-            highlightColor: 0xCAC7E8,
-            midtoneColor: 0xBBB7ED,
-            lowlightColor: 0xE4E3EF,
-            baseColor: 0xE4E3EF
-        });
+        background = VANTA.FOG({el: "#background", blurFactor: 0.40, zoom: 1.50});
+        if (html.getAttribute("theme") == "light")
+        {
+            background.setOptions
+            ({
+                highlightColor: 0xCAC7E8,
+                midtoneColor: 0xBBB7ED,
+                lowlightColor: 0xE4E3EF,
+                baseColor: 0xE4E3EF
+            });
+        }
+        else
+        {
+            background.setOptions
+            ({
+                highlightColor: 0x797979,
+                midtoneColor: 0xFFFFFF,
+                lowlightColor: 0xBCBCBC,
+                baseColor: 0xBCBCBC
+            });
+        }
    }
    else
    {
-        background.setOptions
-        ({
-            highlightColor: 0x797979,
-            midtoneColor: 0xFFFFFF,
-            lowlightColor: 0xBCBCBC,
-            baseColor: 0xBCBCBC
-        });
+        if (background){
+            background.destroy();
+        }
+        if (html.getAttribute("backgroundColor") == "default" )
+        {
+            document.body.style.backgroundColor = html.getAttribute("theme") == "light" ? "#e5e5e5" : "#303030"
+        }
+        else
+        {
+            document.body.style.backgroundColor = html.getAttribute("backgroundColor")
+        }
    }
 }
--- a/src/main/resources/static/js/globals.js
+++ b/src/main/resources/static/js/globals.js
@ -10,6 +10,17 @@ let html;
 */
 let background;

+
+/**
+ * Used to determine background color
+ */
+let backgroundColor;
+
+/**
+ * Used to determine if we enable the fog
+ */
+let enableFog;
+
 /**
 * Light theme square
 */
--- a/src/main/resources/static/js/setup.js
+++ b/src/main/resources/static/js/setup.js
@ -16,12 +16,16 @@ function setupInitialization()

    serverName = document.getElementById("server-name");
    port = document.getElementById("port");
+    enableFog = document.getElementById("fog-toggle");
+    backgroundColor = document.getElementById("color-selector");

    setupXHR = new XMLHttpRequest();

    lightTheme.addEventListener("click", function(event) {changeTheme(event.target || event.srcElement)});
    darkTheme.addEventListener("click", function(event) {changeTheme(event.target || event.srcElement)});
    submit.addEventListener("click", function(event) {sendSetupRequest(event.target || event.srcElement)});
+    enableFog.addEventListener("change", function(event) {toggleFog()});
+    backgroundColor.addEventListener("input", function(event) {changeBackgroundColor()});
 }

 /**
@ -63,6 +67,10 @@ function changeTheme(element)
            baseColor: 0xBCBCBC
        });
    }
+    let color = html.getAttribute("theme") == "light" ? "#e5e5e5" : "#303030";
+    html.setAttribute("backgroundColor", color);
+    backgroundColor.value = color;
+    document.body.style.backgroundColor = color;
 }

 /**
@ -117,9 +125,30 @@ function sendSetupRequest()
    {
        "serverName": serverName.value,
        "theme": html.getAttribute("theme"),
-        "port": port.value
+        "port": port.value,
+        "enableFog": String(enableFog.checked),
+        "backgroundColor": backgroundColor.value
    }

        setupXHR.send(JSON.stringify(data));

+}
+
+/**
+ * Toggles fog
+ */
+function toggleFog()
+{
+    html.setAttribute("enableFog", String(enableFog.checked));
+    backgroundInitialization();
+    backgroundColor.disabled = enableFog.checked;
+}
+
+/**
+ * Change background color
+ */
+function changeBackgroundColor()
+{
+    html.setAttribute("backgroundColor", backgroundColor.value);
+    document.body.style.backgroundColor = backgroundColor.value;
 }
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th = "http://www.thymeleaf.org" id = "html" lang = "en" th:attr = "theme = ${theme}">
+<html xmlns:th = "http://www.thymeleaf.org" id = "html" lang = "en" th:attr = "theme = ${theme}, enableFog = ${enableFog}, backgroundColor = ${backgroundColor}">
    <head>
        <meta charset = "UTF-8">
        <title th:text = "${serverName}"></title>
--- a/src/main/resources/templates/setup.html
+++ b/src/main/resources/templates/setup.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th = "http://www.thymeleaf.org" id = "html" theme = "light">
+<html xmlns:th = "http://www.thymeleaf.org" id = "html" theme = "light" enableFog = "true" backgroundColor = "default">
    <head>
        <meta charset = "UTF-8">
        <title>Welcome</title>
@ -66,6 +66,8 @@
                            <input id = "light-theme" class = "first" type = "button" value = "LIGHT THEME" />
                            <input id = "dark-theme" class = "second" type = "button" value = "DARK THEME" />
                        </div>
+                        <label class = "label-additional-settings"><span>ENABLE BACKGROUND FOG</span><input id = "fog-toggle" class = "fog-toggle" type = "checkbox" name = "enableFog" checked></label>
+                        <label class = "label-additional-settings" title="Disable Fog to select"><span>SELECT BACKGROUND COLOR</span><input id = "color-selector" class = "color-selector" type = "color" value="#e5e5e5" disabled></label>
                        <input id = "port" class = "port" type = "text" maxlength = "5" placeholder = "Application Port" />
                    </div>
                    <input id = "submit" class = "submit" type = "button" value = "LAUNCH" />