From e3f3a97f8dd07f3039444ff4fc1140026540ea6b Mon Sep 17 00:00:00 2001
From: Jinny You <jinny@lottiefiles.com>
Date: Mon, 4 Dec 2023 15:01:57 +0900
Subject: [PATCH] web: Add examples

- `index.html` : basic example
- `benchmark.html` : to check FPS, memory usage, latency(ms)
---
 web/example/benchmark.html | 277 +++++++++++++++++++++++++++++++++++++
 web/example/index.html     | 103 ++++++++++++++
 2 files changed, 380 insertions(+)
 create mode 100644 web/example/benchmark.html
 create mode 100644 web/example/index.html
diff --git a/web/example/benchmark.html b/web/example/benchmark.html
new file mode 100644
index 00000000..a6c95d03
--- /dev/null
+++ b/web/example/benchmark.html
@@ -0,0 +1,277 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@thorvg/lottie-player | Benchmark</title>
+
+    <style>
+      body {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 10px;
+        padding: 10px;
+        margin: 0;
+      }
+
+      canvas {
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+      }
+    </style>
+    <script
+      src="../dist/lottie-player.js"
+      type="text/javascript"
+    ></script>
+  </head>
+  <body>
+    <h1>ThorVG Web</h1>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <lottie-player
+      autoPlay
+      loop
+      src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+      style="width: 300px; height: 300px"
+    ></lottie-player>
+
+    <script src="https://mrdoob.github.io/stats.js/build/stats.min.js"></script>
+    <script>
+      var statsFPS = new Stats();
+      statsFPS.showPanel(0); // 0: fps
+      statsFPS.dom.style.cssText =
+        "position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000";
+      document.body.appendChild(statsFPS.dom);
+
+      var statsMS = new Stats();
+      statsMS.showPanel(1); // 1: ms
+      statsMS.dom.style.cssText =
+        "position:fixed;top:0;left:80px;cursor:pointer;opacity:0.9;z-index:10000";
+      document.body.appendChild(statsMS.dom);
+
+      var statsMB;
+      if (self.performance && self.performance.memory) {
+        statsMB = new Stats();
+        statsMB.showPanel(2); // 2: mb
+        statsMB.dom.style.cssText =
+          "position:fixed;top:0;left:160px;cursor:pointer;opacity:0.9;z-index:10000";
+        document.body.appendChild(statsMB.dom);
+      }
+
+      function animate() {
+        statsFPS.begin();
+        statsMS.begin();
+        if (statsMB) statsMB.begin();
+
+        statsFPS.end();
+        statsMS.end();
+        if (statsMB) statsMB.end();
+
+        requestAnimationFrame(animate);
+      }
+
+      requestAnimationFrame(animate);
+    </script>
+  </body>
+</html>
diff --git a/web/example/index.html b/web/example/index.html
new file mode 100644
index 00000000..30066fa5
--- /dev/null
+++ b/web/example/index.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>ThorVG Lottie Player</title>
+    <meta name="description" content="A web lottie player using ThorVG as a renderer" />
+    <script src="../dist/lottie-player.js"></script>
+  </head>
+  <body>
+    <div>
+      <div>
+        <button onclick="pauseAnimation()">Pause</button>
+        <button onclick="stopAnimation()">Stop</button>
+        <button onclick="destroyAnimation()">Destroy</button>
+        <button onclick="playAnimation()">Play</button>
+        <button onclick="save2gif()">save2gif</button>
+        <div>
+          <label for="reverseCheckbox">Reverse</label>
+          <input type="checkbox" id="reverseCheckbox" onchange="toggleReverse(event)">
+        </div>
+          
+        <div>
+          <label for="loopCheckbox">Loop</label>
+          <input type="checkbox" id="loopCheckbox" onchange="toggleLoop(event)">
+        </div>
+        
+        <div>
+          <label for="speedRange">Speed</label>
+          <input type="range" id="speedRange" min="0.1" max="2" step="0.1" value="1" onchange="changeSpeed(this.value)">
+        </div>
+        
+        <div>
+          <label for="frameRange">Frame</label>
+          <input type="range" id="frameRange" min="1" max="100" step="1" value="1" onchange="seekFrame(this.value)">
+        </div>
+      </div>
+
+      <lottie-player 
+        autoPlay 
+        intermission="1000"
+        mode="normal"
+        src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
+        style="width: 500px; height: 500px;"
+      ></lottie-player>
+    </div>
+    <script>
+      let animation;
+      window.onload = function() {
+        animation = document.querySelector('lottie-player');
+        const frameRange = document.querySelector('#frameRange');
+
+        animation.addEventListener('frame', function(e) {
+          frameRange.value = e.detail.frame / animation.totalFrame * 100;
+        });
+      }
+
+      function pauseAnimation() {
+          animation.pause();
+      }
+
+      function stopAnimation() {
+          animation.stop();
+      }
+
+      function seekFrame(framePercentage) {
+          animation.seek(animation.totalFrames * framePercentage / 100);
+      }
+
+      function destroyAnimation() {
+        animation.destory();
+      }
+
+      function playAnimation() {
+        animation.play();
+      }
+
+      function toggleLoop(e) {
+        animation.setLooping(e.target.checked);
+        if (animation.currentState !== 'playing') {
+          animation.play();
+        }
+      }
+
+      function changeSpeed(speed) {
+        animation.setSpeed(speed);
+        if (animation.currentState !== 'playing') {
+          animation.play();
+        }
+      }
+
+      function toggleReverse(e) {
+        animation.setDirection(e.target.checked ? -1 : 1);
+        if (animation.currentState !== 'playing') {
+          animation.play();
+        }
+      }
+
+      function save2gif() {
+        animation.save('gif');
+      }
+  </script>
+  </body>
+</html>
\ No newline at end of file
