debloper · thomaspcole · Apr 22, 2025 · Apr 22, 2025 · Apr 22, 2025 · Apr 22, 2025
diff --git a/README.md b/README.md
@@ -39,7 +39,7 @@ That's when I realized... maybe there are other people (or future me) who'd also
 Either open terminal on the Raspberry Pi's desktop environment, or remote login to it; and run the following command:
 
 ```bash
-curl -sSL https://raw.githubusercontent.com/debloper/piosk/main/scripts/setup.sh | sudo bash -
+curl -sSL https://raw.githubusercontent.com/thomaspcole/piosk/main/scripts/setup.sh | sudo bash -
 ```
 
 That's it[^2].

diff --git a/config.json.sample b/config.json.sample
@@ -1,25 +1,10 @@
 {
     "urls": [
         {
-            "url": "https://windy.com/"
-        },
-        {
-            "url": "https://time.is/clock"
-        },
-        {
-            "url": "https://github.com/trending"
-        },
-        {
-            "url": "https://news.ycombinator.com/"
-        },
-        {
-            "url": "https://huggingface.co/papers"
-        },
-        {
-            "url": "https://www.perplexity.ai/discover"
-        },
-        {
-            "url": "https://www.google.com/search?q=nasdaq+index"
+            "url": "http://localhost/setup"
         }
-    ]
+    ],
+    "settings":{
+        "page_timeout": 10
+    }
 }
diff --git a/index.js b/index.js
@@ -1,6 +1,7 @@
 const exp = require('express')
 const exe = require('child_process').exec
 const nfs = require('fs')
+const os = require('os')
 
 const app = exp()
 
@@ -27,4 +28,15 @@ app.post('/config', (req, res) => {
   })
 })
 
+app.get('/setup', (req, res) => {
+  res.sendFile(__dirname + '/web/setup.html')
+}) 
+
+app.get('/sysinfo', (req, res) => {
+  res.json({
+    hostname: os.hostname(),
+    ip: os.networkInterfaces(),
+  })
+})
+
 app.listen(80, console.error)
diff --git a/scripts/setup.sh b/scripts/setup.sh
@@ -38,7 +38,7 @@ echo -e "${INFO}Installing dependencies...${RESET}"
 apt install -y git jq wtype nodejs npm
 
 echo -e "${INFO}Cloning repository...${RESET}"
-git clone https://github.com/debloper/piosk.git "$PIOSK_DIR"
+git clone https://github.com/thomaspcole/piosk.git "$PIOSK_DIR"
 cd "$PIOSK_DIR"
 
 # echo -e "${INFO}Checking out latest release...${RESET}"
@@ -88,6 +88,9 @@ echo -e "${INFO}Starting PiOSK daemons...${RESET}"
 # systemctl start piosk-switcher
 systemctl start piosk-dashboard
 
+echo -e "${INFO}Disabling Mouse Cursor...${RESET}"
+mv /usr/share/icons/PiXflat/cursors/left_ptr /usr/share/icons/PiXflat/cursors/left_prt.bak
+
 echo -e "${CALLOUT}\nPiOSK is now installed.${RESET}"
 echo -e "Visit either of these links to access PiOSK dashboard:"
 echo -e "\t- ${INFO}\033[0;32mhttp://$(hostname)/${RESET} or,"

diff --git a/scripts/switcher.sh b/scripts/switcher.sh
@@ -8,6 +8,7 @@ export XDG_RUNTIME_DIR=/run/user/1000
 
 # count the number of URLs, that are configured to cycle through
 URLS=$(jq -r '.urls | length' /opt/piosk/config.json)
+TIMEOUT=$(jq '.settings.page_timeout' /opt/piosk/config.json)
 
 # swich tabs each 10s, refresh tabs each 10th cycle & then reset
 for ((TURN=1; TURN<=$((10*URLS)); TURN++)) do
@@ -20,5 +21,5 @@ for ((TURN=1; TURN<=$((10*URLS)); TURN++)) do
       fi
     fi
   fi
-  sleep 10
+  sleep $TIMEOUT
 done
diff --git a/scripts/update.sh b/scripts/update.sh
@@ -0,0 +1,28 @@
+#!/bin/bash
+set -e
+
+# Installation directory
+PIOSK_DIR="/opt/piosk"
+
+RESET='\033[0m'      # Reset to default
+ERROR='\033[1;31m'   # Bold Red
+SUCCESS='\033[1;32m' # Bold Green
+WARNING='\033[1;33m' # Bold Yellow
+INFO='\033[1;34m'    # Bold Blue
+CALLOUT='\033[1;35m' # Bold Magenta
+DEBUG='\033[1;36m'   # Bold Cyan
+
+echo -e "${INFO}Checking superuser privileges...${RESET}"
+if [ "$EUID" -ne 0 ]; then
+  echo -e "${DEBUG}Escalating privileges as superuser...${RESET}"
+
+  sudo "$0" "$@" # Re-execute the script as superuser
+  exit $?  # Exit with the status of the sudo command
+fi
+
+echo -e "${INFO}Updating Repo...${RESET}"
+cd $PIOSK_DIR
+git pull
+
+echo -e "${SUCCESS}\tUpdate done! Restarting...${RESET}"
+reboot
diff --git a/web/index.html b/web/index.html
@@ -9,8 +9,8 @@
     <title>PiOSK</title>
   </head>
   <body>
-    <nav id="navs" class="navbar bg-body-tertiary">
-      <div class="container-md d-flex justify-content-between">
+    <nav id="navs" class="bg-body-tertiary navbar">
+      <div class="d-flex justify-content-between container-md">
         <h1 class="my-1">Pi<span class="bg-danger mx-1 px-1 rounded">OSK</span></h1>
         <div class="input-group w-75">
           <input  id="new-url" type="text"   class="form-control form-control-lg" placeholder="...add URLs of webpages as screens">
@@ -20,11 +20,18 @@ <h1 class="my-1">Pi<span class="bg-danger mx-1 px-1 rounded">OSK</span></h1>
       </div>
     </nav>
 
-    <div id="urls" class="container-md my-5">
+    <div id="settings" class="my-5 container-md">
+      <div class="input-group">
+        <span class="input-group-text">Page Timeout (Seconds)</span>
+        <input type="number" id="page_timeout" class="form-control form-control-lg">
+      </div>
+    </div>
+
+    <div id="urls" class="my-5 container-md">
       <ul class="list-group list-group-flush"></ul>
     </div>
 
-    <footer id="colophon" class="container-md text-center fs-4 my-5">
+    <footer id="colophon" class="my-5 text-center container-md fs-4">
       <kbd><a class="text-decoration-none" href="https://github.com/debloper/piosk" target="_blank">{}</a></kbd>
       w/
       <kbd><a class="text-decoration-none" href="https://youtube.com/@BreakerSpace" target="_blank"><3</a></kbd>
@@ -34,13 +41,13 @@ <h1 class="my-1">Pi<span class="bg-danger mx-1 px-1 rounded">OSK</span></h1>
 
     <template id="template-url">
       <li class="list-group-item text-truncate fs-3">
-        <button type="button" class="btn btn-close mx-3" aria-label="Remove"></button>
+        <button type="button" class="mx-3 btn btn-close" aria-label="Remove"></button>
         <a class="link-underline-dark"></a>
       </li>
     </template>
 
     <template id="template-err">
-      <div class="alert alert-danger m-4" role="alert"></div>
+      <div class="m-4 alert alert-danger" role="alert"></div>
     </template>
 
     <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

diff --git a/web/script.js b/web/script.js
@@ -16,6 +16,8 @@ let piosk = {
     $.each(data.urls, (index, item) => {
       piosk.appendUrl(item.url)
     })
+
+    $('#page_timeout').val(data.settings.page_timeout);
   },
   showStatus (xhr) {
     let tmpErr = $('#template-err').contents().clone()
@@ -44,6 +46,9 @@ $(document).ready(() => {
       config.urls.push({ url: $(item).find('a').attr('href') })
     })
 
+    config.settings={}
+    config.settings.page_timeout=parseInt($("#page_timeout").val())
+
     $.ajax({
       url: '/config',
       type: 'POST',

diff --git a/web/setup.html b/web/setup.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en" data-bs-theme="dark">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+
+    <title>PiOSK</title>
+    <style>
+      .center{
+        display: grid;
+        width: 100%;
+        height: 100vh;
+        place-content: center;
+        justify-content: center;
+        text-align: center;
+      }
+
+      #qrcode{
+        display: flex;
+        margin:auto;
+      }
+
+      span{
+        color: var(--bs-success);
+      }
+    </style>
+  </head>
+  <body class="center">
+
+    <h1>Hostname:&nbsp;<span id="hostname"></span></h1>
+    <h3>IP Address:&nbsp;<span id="ip"></span></h3>
+    <h3>Scan QR to set up</h3>
+    <div class="my-4"></div>
+    <div id="qrcode"></div>
+
+
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script>
+      $(document).ready(() => {
+        $.getJSON('/sysinfo')
+        .done(showInfo)
+        .fail()
+      });
+
+      function showInfo(data){
+        $("#hostname").text(data.hostname);
+
+        let interfaces = data.ip;
+        let ip="";
+
+        for(const [interface, data] of Object.entries(interfaces)){
+          if(/^(eth|en|wlan)/.test(interface)){
+            data.forEach(element => {
+              if(element.family === "IPv4"){
+                $('#ip').text(element.address);
+                ip=element.address;
+              }
+            });
+          }
+        }
+
+        var qrcode = new QRCode("qrcode", {
+            text: `http://${ip}`,
+            width: 300,
+            height: 300,
+            colorDark : "#FFFFFF",
+            colorLight : "rgb(33, 37, 41)",
+            correctLevel : QRCode.CorrectLevel.H
+        });
+
+      }
+    </script>
+  </body>
+</html>