sbrl/LoRaWAN-Signal-Mapping
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add loading animation

Browse source
This commit is contained in:
Starbeamrainbowlabs 2019-07-26 15:05:16 +01:00
parent f8b09e5b9d
commit 048a5c25a7
4 changed files with 29 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
README.md
View file

@ -29,5 +29,12 @@ Run `bash ./build setup` from the command line at the root of this repository.
- Create `settings.toml` in the root of the repository if it doesn't exist already.
- Review `server/settings.default.toml` and adjust `settings.toml` to fill in the values for the required fields, not forgetting the encryption key generated when setting up the IoT device.
### Client-side web interface
## Credits
- AI: [TensorFlow.js](https://www.tensorflow.org/js/)
- [Loading Animation](https://github.com/SamHerbert/SVG-Loaders)
## Useful Links
- Entropy extraction from the watchdog timer vs the internal clock: https://github.com/taoyuan/Entropy

2
client_src/css/images/spinning-circles.svg Normal file
View file

@ -0,0 +1,2 @@
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
<svg width="58" height="58" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g transform="translate(2 1)" stroke="#1BB3E9" stroke-width="1.5"><circle cx="42.601" cy="11.462" r="5" fill-opacity="1" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="1;0;0;0;0;0;0;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="49.063" cy="27.063" r="5" fill-opacity="0" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="0;1;0;0;0;0;0;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="42.601" cy="42.663" r="5" fill-opacity="0" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="0;0;1;0;0;0;0;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="27" cy="49.125" r="5" fill-opacity="0" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="0;0;0;1;0;0;0;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="11.399" cy="42.663" r="5" fill-opacity="0" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="0;0;0;0;1;0;0;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="4.938" cy="27.063" r="5" fill-opacity="0" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="0;0;0;0;0;1;0;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="11.399" cy="11.462" r="5" fill-opacity="0" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="0;0;0;0;0;0;1;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="27" cy="5" r="5" fill-opacity="0" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="0;0;0;0;0;0;0;1" calcMode="linear" repeatCount="indefinite"/></circle></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

17
client_src/css/index.css
View file

@ -42,3 +42,20 @@ main {
z-index: 50;
}
.working { cursor: progress !important; }
.working-visual::after {
content: "";
position: relative; top: 0; left: 0;
width: 100%; height: 100%;
display: block;
z-index: 10000;
background: url(images/spinning-circles.svg) center center / 25% no-repeat;
cursor: progress !important;
pointer-events: none;
}

3
client_src/js/MapManager.mjs
View file

@ -13,6 +13,7 @@ class MapManager {
}
async setup() {
document.querySelector("main").classList.add("working", "working-visual");
this.map = L.map("map", {
fullscreenControl: true
});
@ -34,6 +35,8 @@ class MapManager {
await this.layer_ai.setup();
this.setup_layer_control();
document.querySelector("main").classList.remove("working", "working-visual");
}
setup_layer_control() {