This is the initial commit with a working project.

raguay · Jan 30, 2020 · a1a0125 · a1a0125
1 parent 1795b67
commit a1a0125
Show file tree

Hide file tree

Showing 15 changed files with 637 additions and 0 deletions.
diff --git a/UI/README.md b/UI/README.md
@@ -0,0 +1,4 @@
+## Svelte Plash Server - UI
+
+This is the main UI for the Plash Server done in Svelte. You can follow the project on my tutorials site: [Custom Computer Tools](http://www.customct.com/#/tutorials/plashserver/series).
+
diff --git a/UI/index.html b/UI/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
+
+	<title>Svelte app</title>
+
+  <link rel='icon' type='image/png' href='favicon.png'>
+  <link rel='stylesheet' href='global.css'>
+  <link rel='stylesheet' href='build/bundle.css'>
+
+<script defer src='build/bundle.js'></script>
+</head>
+
+<body>
+</body>
+</html>
diff --git a/UI/package.json b/UI/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "svelte-app",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "start": "sirv public"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^11.0.0",
+    "@rollup/plugin-node-resolve": "^6.0.0",
+    "rollup": "^1.20.0",
+    "rollup-plugin-livereload": "^1.0.0",
+    "rollup-plugin-svelte": "^5.0.3",
+    "rollup-plugin-terser": "^5.1.2",
+    "svelte": "^3.0.0"
+  },
+  "dependencies": {
+    "sirv-cli": "^0.4.4"
+  }
+}
diff --git a/UI/public/favicon.png b/UI/public/favicon.png
diff --git a/UI/public/global.css b/UI/public/global.css
@@ -0,0 +1,66 @@
+html, body {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	color: #333;
+	margin: 0;
+	padding: 8px;
+	box-sizing: border-box;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+a {
+	color: rgb(0,100,200);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a:visited {
+	color: rgb(0,80,160);
+}
+
+label {
+	display: block;
+}
+
+input, button, select, textarea {
+	font-family: inherit;
+	font-size: inherit;
+	padding: 0.4em;
+	margin: 0 0 0.5em 0;
+	box-sizing: border-box;
+	border: 1px solid #ccc;
+	border-radius: 2px;
+}
+
+input:disabled {
+	color: #ccc;
+}
+
+input[type="range"] {
+	height: 0;
+}
+
+button {
+	color: #333;
+	background-color: #f4f4f4;
+	outline: none;
+}
+
+button:disabled {
+	color: #999;
+}
+
+button:not(:disabled):active {
+	background-color: #ddd;
+}
+
+button:focus {
+	border-color: #666;
+}
diff --git a/UI/public/index.html b/UI/public/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
+
+	<title>Svelte app</title>
+
+  <link rel='icon' type='image/png' href='favicon.png'>
+  <link rel='stylesheet' href='global.css'>
+  <link rel='stylesheet' href='build/bundle.css'>
+
+<script defer src='build/bundle.js'></script>
+</head>
+
+<body>
+</body>
+</html>
diff --git a/UI/rollup.config.js b/UI/rollup.config.js
@@ -0,0 +1,71 @@
+import svelte from 'rollup-plugin-svelte';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import livereload from 'rollup-plugin-livereload';
+import { terser } from 'rollup-plugin-terser';
+
+const production = !process.env.ROLLUP_WATCH;
+
+export default {
+	input: 'src/main.js',
+	output: {
+		sourcemap: true,
+		format: 'iife',
+		name: 'app',
+		file: 'public/build/bundle.js'
+	},
+	plugins: [
+		svelte({
+			// enable run-time checks when not in production
+			dev: !production,
+			// we'll extract any component CSS out into
+			// a separate file — better for performance
+			css: css => {
+				css.write('public/build/bundle.css');
+			}
+		}),
+
+		// If you have external dependencies installed from
+		// npm, you'll most likely need these plugins. In
+		// some cases you'll need additional configuration —
+		// consult the documentation for details:
+		// https://github.com/rollup/plugins/tree/master/packages/commonjs
+		resolve({
+			browser: true,
+			dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
+		}),
+		commonjs(),
+
+		// In dev mode, call `npm run start` once
+		// the bundle has been generated
+		!production && serve(),
+
+		// Watch the `public` directory and refresh the
+		// browser on changes when not in production
+		!production && livereload('public'),
+
+		// If we're building for production (npm run build
+		// instead of npm run dev), minify
+		production && terser()
+	],
+	watch: {
+		clearScreen: false
+	}
+};
+
+function serve() {
+	let started = false;
+
+	return {
+		writeBundle() {
+			if (!started) {
+				started = true;
+
+				require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+					stdio: ['ignore', 'inherit', 'inherit'],
+					shell: true
+				});
+			}
+		}
+	};
+}
diff --git a/UI/src/UI.svelte b/UI/src/UI.svelte
@@ -0,0 +1,65 @@
+<svelte:head>
+  <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One&display=swap" rel="stylesheet">
+</svelte:head>
+
+<Desktop config={config} >
+  {#each widgets as widget}
+    <svelte:component 
+      this={widget.widget} 
+      top={widget.top}
+      left={widget.left}
+      style={widget.style}
+      config={widget.config}
+    />
+  {/each}
+</Desktop>
+
+<style>
+  :global(body) {
+    width: 100%;
+    height: 100%;
+  }
+</style>
+
+<script>
+  import {onMount} from 'svelte';
+  import { Seconds } from './store/secondStore.js';
+  import { thirtyMinute } from './store/thirtyMinuteStore.js';
+  import Desktop from './components/Desktop.svelte';
+
+  export let widgets = [];
+  export let config = {};
+  
+  let thirtyCount = 0;
+
+  onMount(() => {
+    var unsubscribeSeconds = Seconds.subscribe((value)=>{
+    });
+    UpdateTimeSeconds();
+    UpdateTimeThirtyMinutes();
+    return(() => {
+      unsubscribeSeconds();
+    });
+  });
+
+  function UpdateTimeSeconds() {
+      //
+      // Set the new date in the seconds store for everyone to
+      // use.
+      //
+      var ct = new Date();
+      var min = ct.getMinutes();
+      Seconds.set({
+        hours: ct.getHours(),
+        minutes: min
+      });
+      setTimeout(UpdateTimeSeconds, 1000);
+  }
+
+  function UpdateTimeThirtyMinutes() {
+      thirtyCount += 1;
+      thirtyMinute.set(thirtyCount);
+      setTimeout(UpdateTimeThirtyMinutes, 30*60*1000);
+  }
+</script>
+
diff --git a/UI/src/components/CircleMeter.svelte b/UI/src/components/CircleMeter.svelte
@@ -0,0 +1,78 @@
+<canvas 
+  bind:this={arcCanvas}
+  width="{config.width}" 
+  height="{config.height}"
+  style="top: {top}px; left: {left}px; font-family: {style.font};"
+>
+  <p>Your browser does not support the HTML5 canvas tag.</p>
+</canvas>
+
+<style>
+  canvas {
+    position: absolute;
+  }
+</style>
+
+<script>
+  export let top;
+  export let left;
+  export let style;
+  export let config;
+  export let percent;
+  
+  let arcCanvas;
+  let ctx = null;
+  
+  $: (percent !== 'undefined')&&(percent !== 0) ? drawCanvas(percent) : 1;
+  
+  function clearCanvas(context) {
+    // Store the current transformation matrix
+    context.save();
+
+    // Use the identity matrix while clearing the canvas
+    context.setTransform(1, 0, 0, 1, 0, 0);
+    context.clearRect(0, 0, config.width, config.height);
+
+    // Restore the transform
+    context.restore();
+  }
+  
+  function drawCanvas(percent) {
+    if((typeof arcCanvas !== 'undefined')&&(arcCanvas !== null)) {
+      var rad1 = (config.height/2);
+      var rad2 = (config.height/2)-(config.lineWidth/2);
+      if(ctx === null) {
+        //
+        // Setup the canvas.
+        //
+        ctx = arcCanvas.getContext("2d");
+        ctx.lineWidth = config.lineWidth;
+        ctx.strokeStyle = config.strokeStyle;
+        ctx.beginPath();
+
+        //
+        // Translate the matrix to put the start of the circle
+        // at the top.
+        //
+        ctx.translate(rad1,rad1);
+        ctx.rotate(-Math.PI/2);
+        ctx.translate(-rad1,-rad1);
+
+        //
+        // draw the circle.
+        //
+        ctx.lineCap = "round";
+        ctx.arc(rad1, rad1, rad2, 0, (2 * (percent/100)) * Math.PI);
+        ctx.stroke();
+      } else {
+        //
+        // draw the circle after clearing the canvas.
+        //
+        ctx.beginPath();
+        clearCanvas(ctx);
+        ctx.arc(rad1, rad1, rad2, 0, (2 * (percent/100)) * Math.PI);
+        ctx.stroke();
+      }
+    }
+  }
+</script>