a-b-street/abstreet
1
1
Fork 0
mirror of https://github.com/a-b-street/abstreet.git synced 2024-11-28 12:12:00 +03:00
Code Issues Projects Releases Wiki Activity
fd423439b8
abstreet/widgetry_demo/index.html

37 lines
2.7 KiB
HTML
Raw Normal View History

Switch from stdweb to websys for #21. When I added web support in February, it was easier to get started with stdweb, since it has the nice cargo web tool. However, stdweb is unmaintained, winit is deprecating support for it, and the next steps for web (downloading maps dynamically) have better support for web-sys. With Alvin's guidance, I got https://github.com/dabreegster/minimal_websys_winit_glow_demo working first. This PR cuts A/B Street over too. I tested abst and the widgetry demo in both native and web. The only major regression from stdweb is the canvas placement and size. I attempted some fixes, but at this point, I'll leave it as a smaller followup instead.
2020-10-06 01:09:12 +03:00
<!DOCTYPE html>
<html>
<head>
Fix content type on the html web runner page. Without this, initially loading jumped to >30s with a warning in the console. Back to the usual few seconds with this fix.
2020-11-01 04:37:46 +03:00
<meta charset="UTF-8">
<style>
/*!
* Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
* Copyright 2015 Daniel Cardoso <@DanielCardoso>
* Licensed under MIT
*/
.la-ball-beat,.la-ball-beat>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-ball-beat{display:block;font-size:0;color:#fff}.la-ball-beat.la-dark{color:#333}.la-ball-beat>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-ball-beat{width:54px;height:18px}.la-ball-beat>div{width:10px;height:10px;margin:4px;border-radius:100%;-webkit-animation:ball-beat 0.7s -0.15s infinite linear;-moz-animation:ball-beat 0.7s -0.15s infinite linear;-o-animation:ball-beat 0.7s -0.15s infinite linear;animation:ball-beat 0.7s -0.15s infinite linear}.la-ball-beat>div:nth-child(2n-1){-webkit-animation-delay:-.5s;-moz-animation-delay:-.5s;-o-animation-delay:-.5s;animation-delay:-.5s}.la-ball-beat.la-sm{width:26px;height:8px}.la-ball-beat.la-sm>div{width:4px;height:4px;margin:2px}.la-ball-beat.la-2x{width:108px;height:36px}.la-ball-beat.la-2x>div{width:20px;height:20px;margin:8px}.la-ball-beat.la-3x{width:162px;height:54px}.la-ball-beat.la-3x>div{width:30px;height:30px;margin:12px}@-webkit-keyframes ball-beat{50%{opacity:.2;-webkit-transform:scale(0.75);transform:scale(0.75)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-moz-keyframes ball-beat{50%{opacity:.2;-moz-transform:scale(0.75);transform:scale(0.75)}100%{opacity:1;-moz-transform:scale(1);transform:scale(1)}}@-o-keyframes ball-beat{50%{opacity:.2;-o-transform:scale(0.75);transform:scale(0.75)}100%{opacity:1;-o-transform:scale(1);transform:scale(1)}}@keyframes ball-beat{50%{opacity:.2;-webkit-transform:scale(0.75);-moz-transform:scale(0.75);-o-transform:scale(0.75);transform:scale(0.75)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}
</style>
Switch from stdweb to websys for #21. When I added web support in February, it was easier to get started with stdweb, since it has the nice cargo web tool. However, stdweb is unmaintained, winit is deprecating support for it, and the next steps for web (downloading maps dynamically) have better support for web-sys. With Alvin's guidance, I got https://github.com/dabreegster/minimal_websys_winit_glow_demo working first. This PR cuts A/B Street over too. I tested abst and the widgetry demo in both native and web. The only major regression from stdweb is the canvas placement and size. I attempted some fixes, but at this point, I'll leave it as a smaller followup instead.
2020-10-06 01:09:12 +03:00
<script type="module">
import { default as init } from './widgetry_demo.js';
async function run() {
await init('./widgetry_demo_bg.wasm');
}
run();
</script>
</head>
Fix alpha colors on the web by making the background canvas black instead of white. https://webglfundamentals.org/webgl/lessons/webgl-and-alpha.html has other workarounds, but I can't figure out how to control the webgl context parameters. Also improve the loading message that appears before wasm has taken over.
2020-10-21 20:50:40 +03:00
<body style="background-color:black;">
loading screen (#373) fancy loading screen
2020-10-30 04:39:51 +03:00
<div id="loading" style="padding-top: 40px; color: white; text-align: center; font-family: arial; font-size: 200%;">
<h1>Loading Widgetry Demo...</h1>
<div style="margin: auto" class="la-ball-beat la-2x">
<div></div>
<div></div>
<div></div>
</div>
<h2>this may take up to 30 seconds</h2>
<p>If you think something has broken, check your browser's developer console (Ctrl+Shift+I or similar)</p>
<p>(your browser must support WebGL and WebAssembly)</p>
Fix alpha colors on the web by making the background canvas black instead of white. https://webglfundamentals.org/webgl/lessons/webgl-and-alpha.html has other workarounds, but I can't figure out how to control the webgl context parameters. Also improve the loading message that appears before wasm has taken over.
2020-10-21 20:50:40 +03:00
</div>
Switch from stdweb to websys for #21. When I added web support in February, it was easier to get started with stdweb, since it has the nice cargo web tool. However, stdweb is unmaintained, winit is deprecating support for it, and the next steps for web (downloading maps dynamically) have better support for web-sys. With Alvin's guidance, I got https://github.com/dabreegster/minimal_websys_winit_glow_demo working first. This PR cuts A/B Street over too. I tested abst and the widgetry demo in both native and web. The only major regression from stdweb is the canvas placement and size. I attempted some fixes, but at this point, I'll leave it as a smaller followup instead.
2020-10-06 01:09:12 +03:00
</body>
<html>
Reference in New Issue Copy Permalink