Screen rotation support - "settings - ui customisation"

Author: petersem

.dockerignore

@@ -23,6 +23,6 @@
 **/values.dev.yaml
 README.md
 /public/custom/pictures/**
+**/custom.css
 
 !keep
-!custom.css

README.md

@@ -37,6 +37,9 @@
  - 'Sleep timer' disables the display during set hours.
  - Trivia Quiz (multiple selectable topics)
  - Support LED Matrix displays running Awtrix software
+ - Display custom web pages as slides (if web page compatible) - **EXPERIMENTAL!**
+ - Rotate display -90° (for running on display devices, like Firesticks, which do not support portait rotation)
+ - Post API (at '/api/sleep') to toggle sleep mode. (Pass in header 'psw: your Posterr password')
 ---
 ## Prerequisites
 ### Mandatory

classes/core/globalPage.js

@@ -17,7 +17,8 @@ class globalPage {
     bgColour,
     hasArt,
     quizTime,
-    hideSettingsLinks
+    hideSettingsLinks,
+    rotate
   ) {
     this.slideDuration = slideDuration;
     this.fadeTransition = fadeTransition;
@@ -28,6 +29,7 @@ class globalPage {
     this.cards = [];
     this.quizTime = quizTime;
     this.hideSettingsLinks = hideSettingsLinks;
+    this.rotate = rotate;
     return;
   }
 

classes/core/settings.js

@@ -82,6 +82,7 @@ class Settings {
     this.awtrixIP = DEFAULT_SETTINGS.awtrixIP;
     this.enableLinks = DEFAULT_SETTINGS.enableLinks;
     this.links = DEFAULT_SETTINGS.links;
+    this.rotate = DEFAULT_SETTINGS.rotate;
     return;
   }
 
@@ -145,6 +146,7 @@ class Settings {
       if(readSettings.enableLinks==undefined) readSettings.enableLinks = 'false';
       if(readSettings.recentlyAddedDays==undefined) readSettings.recentlyAddedDays = 0;
       if(readSettings.enableAwtrix==undefined) readSettings.enableAwtrix = 'false';
+      if(readSettings.rotate==undefined) readSettings.rotate = 'false';
     } catch (ex) {
       // do nothing if error as it reads ok anyhow
       let d = new Date();
@@ -373,6 +375,8 @@ class Settings {
     else this.enableAwtrix = cs.enableAwtrix;
     if (jsonObject.awtrixIP) this.awtrixIP = jsonObject.awtrixIP;
     else this.awtrixIP = cs.awtrixIP;
+    if (jsonObject.rotate) this.rotate = jsonObject.rotate;
+    else this.rotate = cs.rotate;
 
     // convert JSON object to string (pretty format)
     const data = JSON.stringify(this, null, 4);

index.js

@@ -794,6 +794,7 @@ async function loadNowScreening() {
   globalPage.hasArt = loadedSettings.hasArt;
   globalPage.quizTime = loadedSettings.triviaTimer !== undefined ? loadedSettings.triviaTimer : 15;
   globalPage.hideSettingsLinks = loadedSettings.hideSettingsLinks !== undefined ? loadedSettings.hideSettingsLinks : 'false';
+  globalPage.rotate = loadedSettings.rotate !== undefined ? loadedSettings.rotate : "false";
 
   // restart the clock
   nowScreeningClock = setInterval(loadNowScreening, pollInterval);
@@ -1486,7 +1487,7 @@ else {
 // set routes
 app.get(BASEURL + "/", (req, res) => {
   // try {
-  res.render("index", { globals: globalPage, hasConfig: setng.GetChanged(), baseUrl: BASEURL, custBrand: globalPage.custBrand, hasArt: globalPage.hasArt, quizTime: globalPage.quizTime }); // index refers to index.ejs
+  res.render("index", { globals: globalPage, hasConfig: setng.GetChanged(), baseUrl: BASEURL, custBrand: globalPage.custBrand, hasArt: globalPage.hasArt, quizTime: globalPage.quizTime, rotate: globalPage.rotate }); // index refers to index.ejs
   // }
   // catch (ex) {
   //   console.log('res.render:' + __dirname);
@@ -1892,6 +1893,7 @@ app.post(
       awtrixIP: req.body.awtrixIP,
       enableLinks: req.body.enableLinks,
       links: req.body.links,
+      rotate: req.body.rotate,
       saved: false
     };
 

myviews/header.ejs

@@ -20,6 +20,18 @@
   <link rel="stylesheet" href="<%=baseUrl%>/css/font-awesome.min.css">
   <link rel="stylesheet" href="<%=baseUrl%>/css/styles.css">
   <!-- Apply UI customisations -->
+  <%if(globals.rotate == "true"){%>
+    <style>html {
+      transform: rotate(-90deg) !important;
+      transform-origin: left top !important;
+      width: 100vh !important;
+      height: 100vw !important;
+      overflow-x: hidden !important;
+      position: absolute !important;
+      top: 100% !important;
+      left: 0 !important;
+    } </style>
+  <%}%>
   <%if(globals.custBrand !== ""){%>
     <style>.banners { font-family: '<%=globals.custBrand%>'; }</style>
   <%}%>

myviews/settings.ejs

@@ -285,6 +285,16 @@
               <div id="collapseUI" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingUI">
                 <div class="panel-body">
 
+                  <h6>Screen Orientation</h6>
+                  <div class="form-group">
+                    <div class="custom-control custom-control-nolabel custom-switch ml-auto">
+                      <input type="checkbox" class="custom-control-input" name="rotate" id="rotate" aria-describedby="rotateHelp"
+                        value="true" <% if(typeof formData !== 'undefined' && errors){%><%=formData.rotate ? 'checked' : '' %><%}else{%><%=(settings.rotate == 'true') ? 'checked' : '' %><%}%>>
+                      <label class="custom-control-label" for="rotate">Rotate screen</label>
+                      <small id="themeHelp" class="form-text text-muted">Rotate screen orientation -90 degrees (ideal for Amazon Firestick devices)</small>
+                    </div>
+                  </div>
+
                   <h6>Colours</h6>
                   <div class="form-group">
                     &nbsp;&nbsp;<input type="color" value="#FAFAD2" id="colourWellTitle">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "posterr",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "description": "A digital display for your media",
   "main": "index.js",
   "bin": "index.js",