aboutsummaryrefslogtreecommitdiff
path: root/lib
diff options
context:
space:
mode:
authorChristian Grothoff <christian@grothoff.org>2016-09-24 01:31:52 +0200
committerChristian Grothoff <christian@grothoff.org>2016-09-24 01:31:52 +0200
commit760952ee6e7734e22d9b644f7f1bbb907213586e (patch)
tree824f203c4a488813d13835cf365374587f24315f /lib
parentd7e5aec1a556467a6bd3e6b2e3cf7440c6bd4ddc (diff)
polishing chrome badge
Diffstat (limited to 'lib')
-rw-r--r--lib/wallet/chromeBadge.ts115
1 files changed, 95 insertions, 20 deletions
diff --git a/lib/wallet/chromeBadge.ts b/lib/wallet/chromeBadge.ts
index 7ff36154c..79a2d6c10 100644
--- a/lib/wallet/chromeBadge.ts
+++ b/lib/wallet/chromeBadge.ts
@@ -26,37 +26,72 @@ import {
function rAF(cb: (ts: number) => void) {
window.setTimeout(() => {
cb(performance.now());
- }, 100);
+ }, 100 /* 100 ms delay between frames */ );
}
export class ChromeBadge implements Badge {
canvas: HTMLCanvasElement;
ctx: CanvasRenderingContext2D;
- talerLogo: HTMLImageElement;
/**
* True if animation running. The animation
* might still be running even if we're not busy anymore,
* just to transition to the "normal" state in a animated way.
*/
animationRunning: boolean = false;
+
+ /**
+ * Is the wallet still busy? Note that we do not stop the
+ * animation immediately when the wallet goes idle, but
+ * instead slowly close the gap.
+ */
isBusy: boolean = false;
+
+ /**
+ * Current rotation angle, ranges from 0 to rotationAngleMax.
+ */
rotationAngle: number = 0;
+
+ /**
+ * While animating, how wide is the current gap in the circle?
+ * Ranges from 0 to openMax.
+ */
+ gapWidth: number = 0;
+
+ /**
+ * Maximum value for our rotationAngle, corresponds to 2 Pi.
+ */
static rotationAngleMax = 1000;
+ /**
+ * How fast do we rotate? Given in rotation angle (relative to rotationAngleMax) per millisecond.
+ */
+ static rotationSpeed = 0.5;
+
+ /**
+ * How fast to we open? Given in rotation angle (relative to rotationAngleMax) per millisecond.
+ */
+ static openSpeed = 0.15;
+
+ /**
+ * How fast to we close? Given as a multiplication factor per frame update.
+ */
+ static closeSpeed = 0.7;
+
+ /**
+ * How far do we open? Given relative to rotationAngleMax.
+ */
+ static openMax = 100;
+
constructor(window?: Window) {
// Allow injecting another window for testing
let bg = window || chrome.extension.getBackgroundPage();
this.canvas = bg.document.createElement("canvas");
+ // Note: changing the width here means changing the font
+ // size in draw() as well!
this.canvas.width = 32;
this.canvas.height = 32;
this.ctx = this.canvas.getContext("2d")!;
-
- this.talerLogo = bg.document.getElementById("taler-logo") as HTMLImageElement;
- if (!(this.talerLogo instanceof HTMLImageElement)) {
- throw Error();
- }
-
this.draw();
}
@@ -66,16 +101,39 @@ export class ChromeBadge implements Badge {
private draw() {
// Reset to identity
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
- this.ctx.setTransform(1, 0, 0, 1, 0, 0);
- this.ctx.translate(this.canvas.width / 2, this.canvas.height / 2);
- this.ctx.rotate(this.rotationAngle / ChromeBadge.rotationAngleMax * Math.PI * 2);
+ // move into the center, off by 1 for aligning the "T" with the bottom
+ // of the circle.
+ this.ctx.translate(this.canvas.width / 2, this.canvas.height / 2 + 1);
+ // pick sans-serif font; note: 14px is based on the 32px width above!
+ this.ctx.font = "14px sans-serif";
+ // draw the "T" perfectly centered (x and y) to the current position
+ this.ctx.textAlign = "center";
+ this.ctx.textBaseline = "middle";
+ this.ctx.strokeText("T", 0, 0);
+ // now move really into the center
+ this.ctx.translate(0, -1);
+ // start drawing the (possibly open) circle
+ this.ctx.beginPath();
+ if (this.animationRunning) {
+ /* Draw circle around the "T" with an opening of this.gapWidth */
+ this.ctx.arc (0, 0,
+ this.canvas.width / 4, /* radius */
+ this.rotationAngle / ChromeBadge.rotationAngleMax * Math.PI * 2,
+ ((this.rotationAngle + ChromeBadge.rotationAngleMax - this.gapWidth) / ChromeBadge.rotationAngleMax) * Math.PI * 2,
+ false);
+ }
+ else
+ {
+ /* Draw full circle */
+ this.ctx.arc (0, 0,
+ this.canvas.width / 4, /* radius */
+ 0,
+ Math.PI * 2,
+ false);
+ }
+ this.ctx.stroke();
+ // go back to the origin
this.ctx.translate(-this.canvas.width / 2, -this.canvas.height / 2);
- this.ctx.drawImage(this.talerLogo,
- 0,
- 0,
- this.talerLogo.width,
- this.talerLogo.height,
- 0, 0, this.canvas.width, this.canvas.height);
// Allow running outside the extension for testing
if (chrome && chrome.browserAction) {
@@ -101,13 +159,30 @@ export class ChromeBadge implements Badge {
start = timestamp;
}
let delta = (timestamp - start);
- if (!this.isBusy && this.rotationAngle + delta >= ChromeBadge.rotationAngleMax) {
+ if (!this.isBusy && 0 == this.gapWidth) {
// stop if we're close enough to origin
this.rotationAngle = 0;
} else {
- this.rotationAngle = (this.rotationAngle + timestamp - start) % ChromeBadge.rotationAngleMax;
+ this.rotationAngle = (this.rotationAngle + (timestamp - start) * ChromeBadge.rotationSpeed) % ChromeBadge.rotationAngleMax;
}
- if (this.isBusy || this.rotationAngle != 0) {
+ if (this.isBusy)
+ {
+ if (this.gapWidth < ChromeBadge.openMax)
+ this.gapWidth += ChromeBadge.openSpeed * (timestamp - start);
+ if (this.gapWidth > ChromeBadge.openMax)
+ this.gapWidth = ChromeBadge.openMax;
+ }
+ else
+ {
+ if (this.gapWidth > 0)
+ {
+ this.gapWidth--;
+ this.gapWidth *= ChromeBadge.closeSpeed;
+ }
+ }
+
+
+ if (this.isBusy || this.gapWidth > 0) {
start = timestamp;
rAF(step);
} else {