From a1a0125d9e0d41655a1749b7ed1f1e1d5d3980f9 Mon Sep 17 00:00:00 2001 From: Richard Guay Date: Thu, 30 Jan 2020 11:58:38 +0700 Subject: [PATCH] This is the initial commit with a working project. --- UI/README.md | 4 ++ UI/index.html | 18 +++++++ UI/package.json | 21 ++++++++ UI/public/favicon.png | Bin 0 -> 3127 bytes UI/public/global.css | 66 +++++++++++++++++++++++ UI/public/index.html | 18 +++++++ UI/rollup.config.js | 71 ++++++++++++++++++++++++ UI/src/UI.svelte | 65 ++++++++++++++++++++++ UI/src/components/CircleMeter.svelte | 78 +++++++++++++++++++++++++++ UI/src/components/CircleTime.svelte | 78 +++++++++++++++++++++++++++ UI/src/components/Desktop.svelte | 77 ++++++++++++++++++++++++++ UI/src/components/Time.svelte | 59 ++++++++++++++++++++ UI/src/main.js | 71 ++++++++++++++++++++++++ UI/src/store/secondStore.js | 7 +++ UI/src/store/thirtyMinuteStore.js | 4 ++ 15 files changed, 637 insertions(+) create mode 100644 UI/README.md create mode 100644 UI/index.html create mode 100644 UI/package.json create mode 100644 UI/public/favicon.png create mode 100644 UI/public/global.css create mode 100644 UI/public/index.html create mode 100644 UI/rollup.config.js create mode 100644 UI/src/UI.svelte create mode 100644 UI/src/components/CircleMeter.svelte create mode 100644 UI/src/components/CircleTime.svelte create mode 100644 UI/src/components/Desktop.svelte create mode 100644 UI/src/components/Time.svelte create mode 100644 UI/src/main.js create mode 100644 UI/src/store/secondStore.js create mode 100644 UI/src/store/thirtyMinuteStore.js diff --git a/UI/README.md b/UI/README.md new file mode 100644 index 0000000..62f0e1b --- /dev/null +++ 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 new file mode 100644 index 0000000..19c0df8 --- /dev/null +++ b/UI/index.html @@ -0,0 +1,18 @@ + + + + + + + Svelte app + + + + + + + + + + + diff --git a/UI/package.json b/UI/package.json new file mode 100644 index 0000000..29cb194 --- /dev/null +++ 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 new file mode 100644 index 0000000000000000000000000000000000000000..7e6f5eb5a2f1f1c882d265cf479de25caa925645 GIT binary patch literal 3127 zcmV-749N3|P)i z7)}s4L53SJCkR}iVi00SFk;`MXX*#X*kkwKs@nFGS}c;=?XFjU|G$3t^5sjIVS2G+ zw)WGF83CpoGXhLGW(1gW%uV|X7>1P6VhCX=Ux)Lb!*DZ%@I3!{Gsf7d?gtIQ%nQiK z3%(LUSkBji;C5Rfgd6$VsF@H`Pk@xtY6t<>FNR-pD}=C~$?)9pdm3XZ36N5PNWYjb z$xd$yNQR9N!dfj-Vd@BwQo^FIIWPPmT&sZyQ$v81(sCBV=PGy{0wltEjB%~h157*t zvbe_!{=I_783x!0t1-r#-d{Y?ae$Q4N_Nd^Ui^@y(%)Gjou6y<3^XJdu{rmUf-Me?)zZ>9OR&6U5H*cK; z$gUlB{g0O4gN0sLSO|Of?hU(l?;h(jA3uH!Z{EBKuV23ouU@^Y6#%v+QG;>e*E}%?wlu-NT4DG zs)z)7WbLr)vGAu(ohrKc^em@OpO&f~6_>E61n_e0_V3@{U3^O;j{`^mNCJUj_>;7v zsMs6Hu3g7+@v+lSo;=yTYFqq}jZmQ-BK8K{C4kqi_i*jBaQE(Au0607V-zKeT;EPg zX(`vrn=L+e74+-Tqeok@_`tDa$G9I|$nTU5H*2V8@y()n*zqM?J1G!-1aX;CfDC9B zTnJ#j_%*n8Qb1)re*Bno7g0RG{Eb;IK14irJYJp$5Z6ac9~b_P?+5t~95~SRG$g?1 znFJ7p$xV&GZ18m~79TGRdfsc-BcX$9yXTR*n)mPD@1~O(_?cT$ZvFPucRmGlq&se0 zKrcUf^k}4hM*biEJOWKzz!qQe;CB_ZtSOO9Owg#lZAc=s65^rb{fZe(TYu_rk!wKkEf}RIt=#Om( zR8mN`DM<^xj~59euMMspBolVN zAPTr8sSDI104orIAdmL$uOXn*6hga1G+0WD0E?UtabxC#VC~vf3|10|phW;yQ3CY8 z2CM=)ErF;xq-YJ5G|um}>*1#E+O_Mu|Nr#qQ&G1P-NMq@f?@*XUcSbV?tX=)ilM-Q zBZP|!Bpv0V;#ojKcpc7$=eqO;#Uy~#?^kNI{vSZfLx&DEt~LTmaKWXcx=joubklI<*Aw z>LtMaQ7DR<1I2LkWvwyu#Rwn~;ezT}_g(@5l3h?W%-a86Y-t#O1PubP+z<%?V5D(U zy57A6{h+{?kOZp7&WKZR+=sznMJ}+Dnpo=C_0%R_x_t~J5T?E_{+))l5v1%52>)d-`iiZyx|5!%M2Fb2dU zW3~MwwpEH9Rhue+k$UIOoo($Ds!NbOyMR36fRHu;*15(YcA7siIZk#%JWz>P!qX1?IUojG&nKR>^gArBt2 zit(ETyZ=@V&7mv_Fi4bABcnwP+jzQuHcfU&BrAV91u-rFvEi7y-KnWsvHH=d2 zgAk(GKm_S8RcTJ>2N3~&Hbwp{Z3NF_Xeh}g4Eke)V&dY{W(3&b1j9t4yK_aYJisZZ{1rcU5- z;eD>K;ndPq&B-8yA_S0F!4ThA&{1{x)H<#?k9a#6Pc6L?V^s0``ynL&D;p(!Nmx`Y zFkHex{4p!Ggm^@DlehW}iHHVi}~u=$&N? z(NEBLQ#UxxAkdW>X9LnqUr#t4Lu0=9L8&o>JsqTtT5|%gb3QA~hr0pED71+iFFr)dZ=Q=E6ng{NE{Z~0)C?deO#?Aj zSDQ$z#TeC2T^|=}6GBo-&$;E{HL3!q3Z-szuf)O=G#zDjin4SSP%o%6+2IT#sLjQa ziyxFFz~LMjWY+_a5H!U6%a<=b7QVP^ z*90a62;bVq{?@)P6^DWd^Yilq4|YTV2Nw!Yu;a1lPI-sxR)rf@Fe5DhDP7FH zZZ%4S*1C30P;|O+jB!1;m|rXT90Sm5*RBbQN`PKu+hDD*S^yE(CdtSfg=z>u$cIj> z + + + + + + Svelte app + + + + + + + + + + + diff --git a/UI/rollup.config.js b/UI/rollup.config.js new file mode 100644 index 0000000..eae4c0b --- /dev/null +++ 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 new file mode 100644 index 0000000..13ef8b0 --- /dev/null +++ b/UI/src/UI.svelte @@ -0,0 +1,65 @@ + + + + + + {#each widgets as widget} + + {/each} + + + + + + diff --git a/UI/src/components/CircleMeter.svelte b/UI/src/components/CircleMeter.svelte new file mode 100644 index 0000000..d9159d9 --- /dev/null +++ b/UI/src/components/CircleMeter.svelte @@ -0,0 +1,78 @@ + +

Your browser does not support the HTML5 canvas tag.

+ + + + + diff --git a/UI/src/components/CircleTime.svelte b/UI/src/components/CircleTime.svelte new file mode 100644 index 0000000..70d6f3d --- /dev/null +++ b/UI/src/components/CircleTime.svelte @@ -0,0 +1,78 @@ +
+ + +
+ + + + diff --git a/UI/src/components/Desktop.svelte b/UI/src/components/Desktop.svelte new file mode 100644 index 0000000..dbf67a2 --- /dev/null +++ b/UI/src/components/Desktop.svelte @@ -0,0 +1,77 @@ +
+ + +
+ + + + diff --git a/UI/src/components/Time.svelte b/UI/src/components/Time.svelte new file mode 100644 index 0000000..e8e3fed --- /dev/null +++ b/UI/src/components/Time.svelte @@ -0,0 +1,59 @@ +
+

{zhours}:{zminutes} {ampm}

+
+ + + + + diff --git a/UI/src/main.js b/UI/src/main.js new file mode 100644 index 0000000..bbf7d99 --- /dev/null +++ b/UI/src/main.js @@ -0,0 +1,71 @@ +import UI from './UI.svelte'; +import Time from './components/Time.svelte'; +import CircleTime from './components/CircleTime.svelte'; + +// +// Create the configuration and widgets structures for configuring +// the desktop. This is the only area the user should have to change. +// Well, other than creating new widgets! +// +const widgets = [{ + name: 'Time', + widget: Time, + top: 145, + left: 35, + style: { + font: 'Alfa Slab One', + size: 40, + color: 'white' + }, + config: { + shadow: '1px 1px 0px black, 2px 2px 0px black, 3px 3px 0px black, 4px 4px 0px black, 5px 5px 0px black, 6px 6px 2px black' + } +}, { + name: 'CircleTime', + widget: CircleTime, + top: 20, + left: 50, + style: { + font: 'Arial', + size: 500, + color: 'white' + }, + config: { + radius: 80, + lineWidth: 10, + strokeStyleMin: 'blue', + strokeStyleHour: 'green', + gap: 10 + } +}]; + +const config = { + backgroundType: 'pic', + backgrounds: ['https://source.unsplash.com/random/1440x900?puppy', + 'https://source.unsplash.com/random/1440x900?kitten', + 'https://source.unsplash.com/random/1440x900?hangglider', + 'https://source.unsplash.com/random/1440x900?galaxy', + 'http://www.talencia.cat/mypics/max/1/16113_stars-backgrounds.png'], + backgroundColors: ['background: linear-gradient(to left top, blue, red) fixed', + 'background-color: teal', + 'background-color: lightblue', + 'background: linear-gradient(to right top, teal, lightgreen)', + 'background-color: #08AEEA; background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%)', + 'background-color: #21D4FD; background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%)', + 'background-color: #8EC5FC; background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%)', + 'background: linear-gradient(to left top, blue, lightgreen)'], + random: true, + index: 0, + randomAll: true, + update30: true +}; + +const ui = new UI({ + target: document.body, + props: { + widgets: widgets, + config: config + } +}); + +export default ui; diff --git a/UI/src/store/secondStore.js b/UI/src/store/secondStore.js new file mode 100644 index 0000000..2ad99a9 --- /dev/null +++ b/UI/src/store/secondStore.js @@ -0,0 +1,7 @@ +import { writable } from 'svelte/store'; + +export const Seconds = writable({ + hours: 0, + minutes: 0 +}); + diff --git a/UI/src/store/thirtyMinuteStore.js b/UI/src/store/thirtyMinuteStore.js new file mode 100644 index 0000000..d505676 --- /dev/null +++ b/UI/src/store/thirtyMinuteStore.js @@ -0,0 +1,4 @@ +import { writable } from 'svelte/store'; + +export const thirtyMinute = writable(0); +