TEST: large UI update, feature request ramapcsx2#553 implementation, …

…fix: FW version string position on screen saver
way5 · Jun 11, 2024 · e015e4f · e015e4f
1 parent b8cf48e
commit e015e4f
Show file tree

Hide file tree

Showing 14 changed files with 816 additions and 78 deletions.
diff --git a/README.md b/README.md
@@ -301,8 +301,9 @@ ESP8266 version of the factory built GBSC, boots into firmware upload mode by pr
 - [ ] Invert Sync issue
 - [ ] PassThrough doesn't work
 - [ ] preferScalingRgbhv doesn't work (?)
-- [ ] feature request #553
-- [ ] creation/destruction OLEDMenuItem procedure
+- [ ] fix OLEDMenu items list offset
+- [x] feature request [#553]
+- [x] creation/destruction OLEDMenuItem procedure
 
 ## Additional information
 

diff --git a/configure.json b/configure.json
@@ -21,5 +21,5 @@
     "ui-lang": "en",
     "ui-hdw-fonts": "12@FreeSans,16@FreeSans",
     "ui-web-font": "Oswald Regular",
-    "version": "24.0610"
+    "version": "24.0611"
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "gbscontrol-webui",
-    "version": "1.2.2",
+    "version": "1.3.0",
     "description": "gbscontrol-webui",
     "author": "",
     "license": "GPL-3.0",

diff --git a/public/scripts/build.js b/public/scripts/build.js
@@ -16,6 +16,7 @@ var js = fs.readFileSync('public/src/index.js', 'utf-8')
 //
 const default_ui_lang = 'en';
 const config = require(path.resolve(__dirname + '/../../configure.json'));
+const package = require(path.resolve(__dirname + '/../../package.json'));
 const lang = require(path.resolve(__dirname + '/../../translation.webui.json'));
 String.prototype.format = function() {
     a = this;
@@ -90,6 +91,8 @@ fs.writeFileSync(
         .replace('${styles}', css)
         .replace('${js}', js)
         .replace('${favicon}', `data:image/png;base64,${favicon}`)
+        .replace('${VERSION_FIRMWARE}', config['version'])
+        .replace('${VERSION_UI}', package['version'])
         .replace(
             '${manifest}',
             `data:application/json;base64,${Buffer.from(manifest).toString('base64')}`

diff --git a/public/src/index.html.tpl b/public/src/index.html.tpl
@@ -36,22 +36,24 @@
                     </text>
                 </g>
             </svg>
-            <button gbs-section="presets" class="gbs-button gbs-button__menu gbs-icon" active>
-                input
-            </button>
-            <button gbs-section="control" class="gbs-button gbs-button__menu gbs-icon">
-                control_camera
-            </button>
-            <button gbs-section="filters" class="gbs-button gbs-button__menu gbs-icon">
-                blur_on
-            </button>
-            <button gbs-section="preferences" class="gbs-button gbs-button__menu gbs-icon">
+            <div class="gbs-menu__button-group">
+                <button gbs-section="presets" class="gbs-button gbs-button__menu gbs-icon" active>
+                    input
+                </button>
+                <button gbs-section="control" class="gbs-button gbs-button__menu gbs-icon">
+                    control_camera
+                </button>
+                <button gbs-section="filters" class="gbs-button gbs-button__menu gbs-icon">
+                    blur_on
+                </button>
+            </div>
+            <button gbs-section="preferences" class="gbs-button gbs-button__menu gbs-icon gbs-button__uwidth">
                 tune
             </button>
-            <button gbs-section="developer" class="gbs-button gbs-button__menu gbs-icon" hidden>
+            <button gbs-section="developer" class="gbs-button gbs-button__menu gbs-icon gbs-button__uwidth" hidden>
                 developer_mode
             </button>
-            <button gbs-section="system" class="gbs-button gbs-button__menu gbs-icon">
+            <button gbs-section="system" class="gbs-button gbs-button__menu gbs-icon gbs-button__uwidth">
                 bolt
             </button>
         </div>
@@ -554,7 +556,7 @@
                         <div>L{DEVELOPER_LEGEND}</div>
                     </legend>
                     <div class="gbs-flex gbs-margin__bottom--16">
-                        <button class="gbs-button" gbs-output-toggle active>
+                        <button class="gbs-button" gbs-output-toggle>
                             <div class="gbs-icon">code</div>
                             <div>L{TOGGLE_CONSOLE_BUTTON}</div>
                         </button>
@@ -841,11 +843,14 @@
                 </fieldset>
             </div>
         </div>
-        <div class="gbs-loader"><img /></div>
+        <div class="gbs-scroll__footer">
+            <div>fw:${VERSION_FIRMWARE} / ui:${VERSION_UI}</div>
+        </div>
     </div>
     <div class="gbs-wifi-warning" id="websocketWarning">
         <div class="gbs-icon blink_me">signal_wifi_off</div>
     </div>
+    <div class="gbs-loader"><img /></div>
     <script>${js}</script>
 </body>
 

diff --git a/public/src/index.ts b/public/src/index.ts
@@ -1331,13 +1331,11 @@ const updateConsoleVisibility = () => {
         const consoleStatus = GBSStorage.read('consoleVisible') as boolean
         if (consoleStatus != true) {
             GBSStorage.write('consoleVisible', true)
-            // GBSControl.consoleVisible = true
-            GBSControl.ui.toggleConsole.setAttribute('active', '')
+            GBSControl.ui.toggleConsole.removeAttribute('active')
             document.body.classList.remove('gbs-output-hide')
         } else {
             GBSStorage.write('consoleVisible', false)
-            // GBSControl.consoleVisible = false
-            GBSControl.ui.toggleConsole.removeAttribute('active')
+            GBSControl.ui.toggleConsole.setAttribute('active', '')
             document.body.classList.add('gbs-output-hide')
         }
     }
@@ -1356,8 +1354,6 @@ const toggleDeveloperMode = () => {
         }
         GBSControl.ui.developerSwitch.setAttribute('active', '')
         GBSControl.ui.developerSwitch.querySelector('.gbs-icon').innerText = "toggle_on"
-        // if(!GBSControl.wsHeartbeatInterval)
-        //     GBSControl.wsHeartbeatInterval = window.setInterval(webSocketHeartbeat, 900);
     } else {
         el.setAttribute('hidden', '')
         GBSStorage.write('consoleVisible', true)

diff --git a/public/src/style.css b/public/src/style.css
@@ -95,8 +95,8 @@ body {
 
 /** main screen scrollable area */
 .gbs-scroll {
-    height: calc(100% - 54px);
-    margin-bottom: 148px;
+    height: calc(100% - 75px);
+    /* margin-bottom: 148px; */
     overflow-x: hidden;
     overflow-y: auto;
 }
@@ -114,12 +114,72 @@ body {
     border-radius: 20px;
 }
 
+.gbs-scroll__footer {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    width: 100%;
+    display: flex;
+    margin: 0px;
+    background-color: var(--color-cod-gray-light);
+    color: rgba(var(--color-secondary-rgba), 0.7);
+    border-radius: 0 0 16px 16px;
+}
+
+.gbs-scroll__footer > div {
+    /* box-shadow: 0 0px 30px -10px rgba(var(--color-primary-rgba), .9); */
+    padding: 5px 10px 8px;
+    width: 100%;
+    text-align: right;
+    font-size: 10px;
+    font-weight: bold;
+    line-height: normal;
+}
+
+/* menu */
+.gbs-menu {
+    background-color: var(--color-cod-gray-light);
+    /* box-shadow: 0 0px 30px -10px rgba(var(--color-primary-rgba), .9); */
+    border-top: 1px solid rgba(var(--color-primary-rgba), .4);
+    bottom: 0;
+    box-sizing: border-box;
+    color: var(--color-primary);
+    display: flex;
+    height: 75px;
+    padding: 8px 5px 15px;
+    position: absolute;
+    text-align: center;
+    width: 100%;
+    z-index: 10;
+}
+
+.gbs-menu__logo {
+    display: none;
+    margin: auto;
+    margin-right: 8px;
+    width: 30%;
+}
+
+.gbs-menu__button-group {
+    border: 1px dashed rgba(var(--color-primary-rgba), .5);
+    /* padding: 2px; */
+    width: 60%;
+    display:flex;
+    border-radius: 8px;
+    margin-right: 2px;
+}
+
+.gbs-button__uwidth {
+    width: 15% !important;
+}
+
 /* buttons */
 .gbs-button {
     appearance: none;
     background-color: var(--color-mine-shaft-light);
     border-radius: 4px;
-    border: 1px dashed rgba(var(--color-primary-rgba), 0.2);
+    /* border: 1px dashed rgba(var(--color-primary-rgba), 0.2); */
+    border: 1px solid rgba(var(--color-primary-rgba), .2);
     color: rgba(var(--color-primary-rgba), 0.6);
     cursor: pointer;
     flex-grow: 1;
@@ -251,28 +311,6 @@ body {
     text-align: right;
 }
 
-/* menu */
-.gbs-menu {
-    background-color: var(--color-cod-gray-light);
-    border-top: 1px solid #282828;
-    bottom: 0;
-    box-sizing: border-box;
-    color: var(--color-primary);
-    display: flex;
-    height: 54px;
-    padding: 8px;
-    position: absolute;
-    text-align: center;
-    width: 100%;
-}
-
-.gbs-menu__logo {
-    display: none;
-    margin: auto;
-    margin-right: 8px;
-    width: 200%;
-}
-
 /* fieldset */
 .gbs-fieldset {
     border-radius: 4px;
@@ -318,6 +356,20 @@ body {
     width: 100%;
 }
 
+.gbs-preferences tr > td:first-child {
+    width: 90%;
+    text-align: left;
+}
+
+.gbs-preferences tr > td:last-child:hover {
+    color: rgba(var(--color-secondary-rgba), 0.7);
+    -webkit-transition: all 0.3s linear;
+    -moz-transition: all 0.3s linear;
+    -ms-transition: all 0.3s linear;
+    -o-transition: all 0.3s linear;
+    transition: all 0.3s linear;
+}
+
 .gbs-preferences td {
     color: var(--color-silver-chalice);
     text-align: left;
@@ -453,6 +505,7 @@ body {
     position: fixed;
     top: 0;
     width: 100%;
+    z-index:20;
 }
 
 .gbs-loader img {
@@ -620,6 +673,12 @@ section[name="alert"] {
     padding-right: 16px;
 }
 
+@media (max-width: 414px) {
+    .gbs-scroll__footer {
+        display: none;
+    }
+}
+
 @media (min-width: 415px) {
     .gbs-button:hover {
         border: 1px solid var(--color-primary);
@@ -641,13 +700,19 @@ section[name="alert"] {
         height: 60px;
     }
 
+    .gbs-scroll {
+        height: calc(100% - 85px);
+    }
+
     .gbs-menu {
-        border-bottom: 1px solid rgba(var(--color-primary-rgba), 0.4);
+        border-bottom: 1px solid rgba(var(--color-primary-rgba), .4);
+        box-shadow: none;
         bottom: initial;
-        padding-left: 8px;
-        padding-right: 8px;
+        padding: 8px;
         position: relative;
         top: 0;
+        height: 55px;
+        border-radius: 16px 16px 0 0;
     }
 
     .gbs-menu__logo {
@@ -678,10 +743,12 @@ section[name="alert"] {
 
     .gbs-output-hide .gbs-container {
         border-radius: 16px;
-        box-shadow: 0 0 64px 4px rgba(var(--color-primary-rgba), 0.4);
+        box-shadow: 0 0 40px 10px rgba(var(--color-primary-rgba), 0.3);
+        /* box-shadow: 0 5px 32px 3px rgba(0 0 0, 0.9); */
         display: block;
         height: calc(100vh - 64px);
-        margin-top: 32px;
+        margin: 32px auto;
+        border: 1px solid rgba(var(--color-primary-rgba), .5);
     }
 
     .gbs-fieldset-output {