diff --git a/apps/loadanim/ChangeLog b/apps/loadanim/ChangeLog new file mode 100644 index 0000000000..a995b99ea1 --- /dev/null +++ b/apps/loadanim/ChangeLog @@ -0,0 +1 @@ +0.01: New test app diff --git a/apps/loadanim/README.md b/apps/loadanim/README.md new file mode 100644 index 0000000000..17cb37caa1 --- /dev/null +++ b/apps/loadanim/README.md @@ -0,0 +1,19 @@ +# Loading Animation (beta) +This is a test to make the UI feel more responsive and fluid, by adding an animation when loading from the clock to a launcher. This app is still in beta, and is in regards to [this discussion](https://github.com/orgs/espruino/discussions/7871). + +This modifies the boot code for `Bangle.load()` function, and first shows a 0.3 second animation of an expanding circle, transitioning smoothly between current and the next loaded app. This takes up minimal battery and processing power. + +Give it a try, and tag `@RKBoss6` with any improvements or ideas! + +You should see an animation: +* If you have a clock that supports fast-loading +* From a launcher that also supports fast-loading or calls Bangle.load + +If you don't see an animation, try using a clock with fast loading, or install fastload utils and see if that works. + +## Known bugs +* Memory can run out slightly faster +* A hang will result in a blank screen until the user long-presses the button +## Creator +RKBoss6 + diff --git a/apps/loadanim/boot.js b/apps/loadanim/boot.js new file mode 100644 index 0000000000..cfcab54990 --- /dev/null +++ b/apps/loadanim/boot.js @@ -0,0 +1,30 @@ +function animateExpandCircle(x, y, startR, endR, duration,color) { + var r=startR; + var fps=15 + var rChangeRate=(endR-startR)/(duration*fps) + var interval; + var time=0; + interval=setInterval(function(){ + time+=1/fps + r+=rChangeRate; + g.setColor(color); + + g.fillEllipse(x-r,y-r,x+r,y+r) + if(Math.round(r)==Math.round(endR)||time>duration){ + clearInterval(interval) + } + },1000/fps) + +} + +Bangle.load=(function(name) { + if (Bangle.uiRemove) { + var animTime=0.3; //seconds + animateExpandCircle(g.getWidth()/2,g.getHeight()/2,0,150,animTime,g.theme.bg) + Bangle.setUI(); // remove all existing UI (and call Bangle.uiRemove) + __FILE__=name; + if (!name) name = ".bootcde"; + setTimeout(eval,animTime*1000,require("Storage").read(name)); // Load app without a reboot + } else load((name!=".bootcde")?name:undefined); +}); + diff --git a/apps/loadanim/icon.png b/apps/loadanim/icon.png new file mode 100644 index 0000000000..67d236916b Binary files /dev/null and b/apps/loadanim/icon.png differ diff --git a/apps/loadanim/metadata.json b/apps/loadanim/metadata.json new file mode 100644 index 0000000000..3ed5f13f8e --- /dev/null +++ b/apps/loadanim/metadata.json @@ -0,0 +1,16 @@ +{ + "id": "loadanim", + "name": "Loading Animation", + "shortName":"Load Anim", + "icon": "icon.png", + "version":"0.01", + "description": "Shows an animation to transition into the next loaded app (beta)", + "type":"bootloader", + "tags": "tool,system", + "author":"RKBoss6", + "supports": ["BANGLEJS2"], + "readme":"README.md", + "storage": [ + {"name":"loadanim.boot.js","url":"boot.js"} + ] +}