titaniumtown/YTBN-Graphing-Software
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Progressive Web App

Browse Source
This commit is contained in:
Simon Gardling 2022-04-20 14:23:48 -04:00
parent 9afa4d86bc
commit 1082aa31b4
11 changed files with 178 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
TODO.md
View File

@ -14,3 +14,4 @@
8. Turn Dynamic Iterator functions into traits 8. Turn Dynamic Iterator functions into traits
9. Better handling of roots and extrema finding 9. Better handling of roots and extrema finding
10. Add closing animation for function entry 10. Add closing animation for function entry
11. Create actual icon(s) for PWA/favicon (using placeholder from eframe_template)

2
build.sh
View File

@ -33,7 +33,7 @@ sed -i 's/fatal: true/fatal: false/g' tmp/ytbn_graphing_software.js
sed -i "s/TextEncoder('utf-8')/TextEncoder('utf-8', { ignoreBOM: true, fatal: false })/g" tmp/ytbn_graphing_software.js sed -i "s/TextEncoder('utf-8')/TextEncoder('utf-8', { ignoreBOM: true, fatal: false })/g" tmp/ytbn_graphing_software.js
cp www/index.html www/style.css tmp/ cp www/* tmp/
echo "Total size: $(du -sb tmp)" echo "Total size: $(du -sb tmp)"
echo "Binary size: $(du -sb tmp/ytbn_graphing_software_bg.wasm)" echo "Binary size: $(du -sb tmp/ytbn_graphing_software_bg.wasm)"

BIN
www/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
www/icon-1024.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 314 KiB

BIN
www/icon-256.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
www/icon_ios_touch_192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

146
www/index.html
View File

@ -1,31 +1,131 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<!-- Disable zooming: -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8" />
<title>(Yet-to-be-named) Graphing Software</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<noscript>Please enable Javascript, this page uses both WebAssembly and Javascript to run.</noscript>
<canvas id="canvas"></canvas> <head>
<div class="centered" id="loading"> <meta charset="utf-8" />
<p style="font-size: 16px;"> <title>(Yet-to-be-named) Graphing Software</title>
Loading…
</p>
<div class="lds-dual-ring"></div>
</div>
<script type="module"> <meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
import init, { start } from "./ytbn_graphing_software.js"; <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#404040">
<link rel="apple-touch-icon" href="/icon_ios_touch_192.png">
async function run() { <link rel="manifest" href="/manifest.json">
await init(); <!--Register Service Worker-->
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('./sw.js');
}
</script>
<style>
html {
/* Remove touch delay: */
touch-action: manipulation;
}
body {
/* Light mode background color for what is not covered by the egui canvas,
or where the egui canvas is translucent. */
background: #909090;
}
@media (prefers-color-scheme: dark) {
body {
/* Dark mode background color for what is not covered by the egui canvas,
or where the egui canvas is translucent. */
background: #404040;
} }
run(); }
</script>
</body> /* Allow canvas to fill entire web page: */
html,
body {
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
}
/* Position canvas in center-top: */
canvas {
margin-right: auto;
margin-left: auto;
display: block;
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, 0%);
}
.centered {
margin-right: auto;
margin-left: auto;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #f0f0f0;
font-size: 24px;
font-family: Ubuntu-Light, Helvetica, sans-serif;
text-align: center;
}
/* ---------------------------------------------- */
/* Loading animation from https://loading.io/css/ */
.lds-dual-ring {
display: inline-block;
width: 24px;
height: 24px;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 24px;
height: 24px;
margin: 0px;
border-radius: 50%;
border: 3px solid #fff;
border-color: #fff transparent #fff transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<noscript>Please enable Javascript, this page uses both WebAssembly and Javascript to run.</noscript>
<canvas id="canvas"></canvas>
<div class="centered" id="loading">
<p style="font-size: 16px;">
Loading…
</p>
<div class="lds-dual-ring"></div>
</div>
<script type="module">
delete WebAssembly.instantiateStreaming;
import init from "./ytbn_graphing_software.js";
async function run() {
await init();
}
run();
</script>
</body>
</html> </html>

28
www/manifest.json Normal file
View File

@ -0,0 +1,28 @@
{
"name": "YTBN Graphing Software PWA",
"short_name": "ytbn-graphing-software-pwa",
"icons": [
{
"src": "./icon-256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "./maskable_icon_x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "./icon-1024.png",
"sizes": "1024x1024",
"type": "image/png"
}
],
"lang": "en-US",
"id": "/index.html",
"start_url": "./index.html",
"display": "standalone",
"background_color": "black",
"theme_color": "#404040"
}

BIN
www/maskable_icon_x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

81
www/style.css
View File

@ -1,81 +0,0 @@
html {
/* Remove touch delay: */
touch-action: manipulation;
}
body {
/* Light mode background color for what is not covered by the egui canvas,
or where the egui canvas is translucent. */
background: #909090;
}
@media (prefers-color-scheme: dark) {
body {
/* Dark mode background color for what is not covered by the egui canvas,
or where the egui canvas is translucent. */
background: #404040;
}
}
/* Allow canvas to fill entire web page: */
html,
body {
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
}
/* Position canvas in center-top: */
canvas {
margin-right: auto;
margin-left: auto;
display: block;
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, 0%);
}
.centered {
margin-right: auto;
margin-left: auto;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #f0f0f0;
font-size: 24px;
font-family: Ubuntu-Light, Helvetica, sans-serif;
text-align: center;
}
/* ---------------------------------------------- */
/* Loading animation from https://loading.io/css/ */
.lds-dual-ring {
display: inline-block;
width: 24px;
height: 24px;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 24px;
height: 24px;
margin: 0px;
border-radius: 50%;
border: 3px solid #fff;
border-color: #fff transparent #fff transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

25
www/sw.js Normal file
View File

@ -0,0 +1,25 @@
var cacheName = 'ytbn-graphing-software-pwa';
var filesToCache = [
'./',
'./index.html',
'./ytbn_graphing_software.js',
'./ytbn_graphing_software_bg.wasm',
];
/* Start the service worker and cache all of the app's content */
self.addEventListener('install', function (e) {
e.waitUntil(
caches.open(cacheName).then(function (cache) {
return cache.addAll(filesToCache);
})
);
});
/* Serve cached content when offline */
self.addEventListener('fetch', function (e) {
e.respondWith(
caches.match(e.request).then(function (response) {
return response || fetch(e.request);
})
);
});