Merge pull request #41 from bradenn/macros

v2.16 beta 1
bradenn · Oct 12, 2022 · 87bd0ac · 87bd0ac
2 parents 08a7f4c + 8d4e3a3
commit 87bd0ac
Show file tree

Hide file tree

Showing 150 changed files with 4,199 additions and 1,069 deletions.
diff --git a/README.md b/README.md
@@ -39,15 +39,42 @@ resolving each attribute's status.
 
 ### Terminal Screenshots
 
+This is not an exhaustive list of UDAP's applications and configurations. There are more than sixty views in total.
+
 A screenshot of the terminal unlocked screen as of v2.15.1. (With the background blur setting enabled)
 ![HomeScreen](./docs/images/home_2.15.1.png)
 
+### Terminal Settings
+
+#### Module page
+
+This page allows an authenticated user to manage and monitor the runtime of UDAP's modules.
+![SettingsModules](./docs/images/settings_modules.png)
+
 #### Terminal App Examples
 
 The sentry app controls a ceiling-mounted laser used for entertaining cats. The interface provides realtime positioning
-on of the beam, and allows for manual targeting and attenuation.  
+on of the beam, and allows for manual targeting and attenuation.   (With BG blur setting disabled)
 ![SentryApp](./docs/images/app_sentry.png)
 
+#### Exogeology App
+
+The exogeology app uses data from NOAA to display near-live images of the Earth and the Sol (the sun).
+
+##### Earth Page
+
+![ExoGeoEarth](./docs/images/app_exogeo_earth.png)
+
+##### Sol Page
+
+![ExoGeoSol](./docs/images/app_exogeo_sol.png)
+
+#### Basic Utility Apps
+
+##### Calculator App
+
+![Calculator](./docs/images/app_calculator.png)
+
 ## Front-end elements
 
 #### Element

diff --git a/app/main.ts b/app/main.ts
@@ -20,7 +20,22 @@ function createWindow() {
         removeMenu: true,
         frame: false,
     });
-
+    // win.webContents.session.webRequest.onBeforeSendHeaders(
+    //     (details, callback) => {
+    //         callback({requestHeaders: {Origin: '*', ...details.requestHeaders}});
+    //     },
+    // );
+    //
+    // win.webContents.session.webRequest.onHeadersReceived((details, callback) => {
+    //     callback({
+    //         responseHeaders: {
+    //             'Access-Control-Allow-Origin': ['*'],
+    //             // We use this to bypass headers
+    //             'Access-Control-Allow-Headers': ['*'],
+    //             ...details.responseHeaders,
+    //         },
+    //     });
+    // });
 
     // attachTouchMode()
     // win.webContents.debugger.on('detach', (event, reason) => {

diff --git a/client/src/App.vue b/client/src/App.vue
@@ -1,84 +1,46 @@
 <!-- Copyright (c) 2022 Braden Nicholson -->
 <script lang="ts" setup>
-import {onMounted, provide, reactive, watch} from "vue";
+import {onMounted, provide, reactive} from "vue";
 import {version} from "../package.json";
-import type {Preferences} from "@/types";
-
-
-const preferenceDefaults: Preferences = {
-  ui: {
-    screensaver: {
-      enabled: true,
-      countdown: 60 * 10,
-      selection: "bubbles"
-    },
-    background: {
-      image: "milk",
-      blur: true
-    },
-    blur: 6,
-    mode: "cursor",
-    theme: "dark",
-    brightness: 100,
-    grid: true,
-    watermark: true,
-    night: false,
-    outlines: true,
-  }
-}
-
-let preferences = reactive<Preferences>(restore())
-
-function restore() {
-  let stored = localStorage.getItem("preferences")
-  if (stored) {
-    let parsed: Preferences = JSON.parse(stored)
-    save(parsed)
-    return parsed
-  } else {
-    save(preferenceDefaults)
-  }
-  return preferenceDefaults
-}
-
-watch(preferences, () => {
-  save(preferences)
-})
-
-function save(preferences: Preferences) {
-  localStorage.setItem("preferences", JSON.stringify(preferences))
-}
-
-provide('preferences', preferences)
-
-
-let state = reactive({
-  hideHome: false,
-  timeout: 0,
-  fps: 0,
-  countdown: 3,
-  context: false,
-  remote: {},
-  system: {
-    nexus: {
-      system: {
-        version: version
-      }
-    },
-    udap: {
-      system: {
-        version: '0.0.0'
-      }
+import {usePersistent} from "@/persistent";
+
+let system = reactive({
+  fps: {
+    fpsDaemon: 0,
+    frameDurations: [] as number[],
+    lastUpdate: 0,
+    fps: 0
+  },
+  nexus: {
+    system: {
+      version: version
+    }
+  },
+  udap: {
+    system: {
+      version: '0.0.0'
     }
   }
 })
 
+const preferences = usePersistent()
+
 onMounted(() => {
-  resetCountdown()
 
+  resetCountdown()
 
 })
 
+function doFPS() {
+  let now = new Date().valueOf()
+  if (system.fps.frameDurations.length >= 120) {
+    let len = system.fps.frameDurations.length
+    system.fps.frameDurations = system.fps.frameDurations.slice(1, len - 1)
+    system.fps.fps = Math.round(1000 / (system.fps.frameDurations.reduce((a, b) => a += b, 0) / len))
+  }
+  system.fps.frameDurations.push(now - system.fps.lastUpdate)
+  system.fps.lastUpdate = now
+}
 
 let screensaver = reactive({
   show: false,
@@ -117,16 +79,15 @@ function resetCountdown() {
 }
 
 
-provide('system', state.system)
-provide('preferences', preferences)
+provide('system', system)
 
 
 </script>
 
 <template>
 
   <div
-      :class="`${preferences.ui.night?'night-vision':''} theme-${preferences.ui.theme} mode-${preferences.ui.mode} blurs-${preferences.ui.blur} brightness-${preferences.ui.brightness}`"
+      :class="`theme-${preferences.ui.theme} mode-${preferences.ui.mode} blurs-${preferences.ui.blur} brightness-${preferences.ui.brightness}`"
       class="root" v-on:mousedown="(e) => resetCountdown()">
 
     <img :class="`${preferences.ui.background.blur?'backdrop-blurred':''}`"
@@ -136,7 +97,7 @@ provide('preferences', preferences)
 
     <div v-if="preferences.ui.watermark" class="watermark">
       <div class="d-flex gap">
-        <div v-if="state.system.udap" class="label-r label-w600">{{ state.system.udap.system.version }}</div>
+        <div v-if="system.udap" class="label-r label-w600">{{ system.udap.system.version }}</div>
         <div v-if="screensaver.countdown <= 5" class="mx-1 label-r label-w500 screensaver-text">
           <div v-if="screensaver.countdown === 0">Starting screensaver...</div>
           <div v-else>Screen saver in {{ screensaver?.countdown }} second{{
@@ -151,27 +112,13 @@ provide('preferences', preferences)
 
     <div v-if="preferences.ui.grid" class="grid"></div>
 
-    <div v-if="state.context" class="context context-light"></div>
-
     <router-view/>
 
   </div>
 
 </template>
 
 <style lang="scss">
-
-
-.overlay-notification {
-  position: fixed;
-  z-index: 1;
-  height: 4.5rem;
-  width: 15rem;
-  padding: 1rem;
-  right: 0;
-  top: 0;
-}
-
 .screensaver-text {
   animation: screensaverTextLoadIn 500ms ease-in forwards;
 }
@@ -201,11 +148,13 @@ provide('preferences', preferences)
   width: 100vw;
   height: 100vh;
   overflow: hidden;
-  border-radius: 0.3rem 0.3rem 0.3rem 0.3rem !important;
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
+  border-radius: 0.4rem 0.4rem 0.4rem 0.4rem !important;
+  //box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.125) !important;
+  background-color: rgba(22, 22, 22, 0.33);
 }
 
 .backdrop {
+
   position: absolute !important;
   z-index: -10 !important;
   top: 0;
@@ -225,7 +174,7 @@ provide('preferences', preferences)
 }
 
 .backdrop-blurred {
-  filter: blur(20px);
+  filter: blur(28px);
 }
 
 .backdrop:after {
@@ -297,25 +246,28 @@ $bg-color: rgba(0, 0, 0, 0);
 $dot-color: rgba(255, 255, 255, 0.1);
 
 // Dimensions
-$dot-size: 28px;
-$dot-space: 16px;
+$dot-size: 24px;
+$dot-space: 40px;
 
 
 .grid {
   position: absolute;
-  width: calc(100% - 0.5rem);
-  height: calc(100% - 0.5rem);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
-  margin: 0.25rem;
+  width: calc(100% - 2rem);
+  height: calc(100% - 8.125rem);
+  //box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
+  margin: 0;
+  top: 4.25rem;
+  margin-inline: 1rem;
 
   z-index: -1;
   background-color: $bg-color;
   opacity: 1;
-  border-radius: 0.2rem;
-  border: 1px solid $dot-color;
+  border-radius: 0.425rem;
+  outline: 2px solid $dot-color;
+  outline-offset: 5px;
   background-image: radial-gradient($dot-color 0.980000000000000px, $bg-color 0.980000000000000px), radial-gradient($dot-color 0.98px, $bg-color 0.980000000000000px);
   background-size: $dot-size $dot-size;
-  background-position: 0 0, calc($dot-size / 2) calc($dot-size / 2);
+  background-position: $dot-size $dot-size, calc($dot-size / 2) calc($dot-size / 2);
 }
 
 .mode-cursor > * {

diff --git a/client/src/assets/sass/app.css.map b/client/src/assets/sass/app.css.map
diff --git a/client/src/assets/sass/app.scss b/client/src/assets/sass/app.scss
@@ -12,6 +12,7 @@ html {
   font-size: 32px;
   user-select: none !important;
   height: 100%;
+
 }
 
 .cursor-blink {
@@ -243,15 +244,15 @@ $fontColors: (
   padding: 2px 2px !important;
 
   backdrop-filter: blur(12px);
-  background-color: $element-bg;
+  background-color: $element-fg;
 
 }
 
 .timeline-value {
   border-radius: 0.5rem;
   height: 6px;
   border: 2px solid transparent;
-  background-color: lighten($element-fg, 20%);
+  background-color: lighten($element-fg, 40%);
   opacity: 1;
   transition: width 100ms ease-in-out;
 }
@@ -260,6 +261,7 @@ $fontColors: (
   @extend .element-secondary;
   display: flex;
   justify-content: space-between;
+
   align-items: center;
   padding: 0 0.375rem;
   //border-radius: 0.375rem !important;
@@ -839,6 +841,7 @@ hr {
   bottom: 0.5rem;
   border-radius: 0.25rem;
   left: calc(50% - 4rem);
+  transform: translate3d(0, 0, 0);
   height: 0.18rem;
   width: 8rem;
   box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);

diff --git a/client/src/assets/sass/element.scss b/client/src/assets/sass/element.scss
@@ -22,6 +22,7 @@ $loadInDistance: 0.98;
 /* Blur Definitions */
 .bg-blur {
   position: relative;
+
   transform: translate3d(0, 0, 0) translateZ(0);
   backface-visibility: visible;
   -webkit-backface-visibility: hidden;
@@ -64,7 +65,7 @@ $themes: (
     .element {
       background-color: $i !important;
       filter: drop-shadow(0px 10px 60px rgba(0, 0, 0, 0.1));
-
+      -webkit-transform: translate3d(0, 0, 0);
       box-shadow: inset 0 0 2px 0.5px opacify($element-border, 0.00125) !important;
 
       * {
@@ -84,7 +85,7 @@ $themes: (
 
 .text-accent {
   color: $text-accent !important;
-  mix-blend-mode: multiply;
+  opacity: 0.7;
 }
 
 .subplot-primary-inline {
@@ -140,7 +141,7 @@ $themes: (
 
   @extend .bg-blur;
   position: relative;
-
+  background: linear-gradient(148.05deg, rgba(44, 44, 44, 0.1) 0%, rgba(44, 44, 44, 0) 100%);
   background-blend-mode: soft-light;
   //
   animation: loadIn 150ms forwards cubic-bezier(0, 1.05, .85, .96) !important;