Merge pull request #56 from pebble/PBL-32315-BitmapSequence_APIs

PBL-32315 API for GBitmapSequence
pebble · Feb 11, 2016 · d31af82 · d31af82
2 parents e7965a0 + a7ac678
commit d31af82
Show file tree

Hide file tree

Showing 8 changed files with 594 additions and 70 deletions.
diff --git a/examples/apng/banana.gif b/examples/apng/banana.gif
diff --git a/examples/apng/banana.png b/examples/apng/banana.png
diff --git a/examples/apng/index.html b/examples/apng/index.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+    <title>Animated PNGs</title>
+
+    <!-- build:template
+    <script src="../../<%= rockyjs_path %>"></script>
+    /build -->
+    <!-- build:remove -->
+    <!-- this template/remove construct is a workaround as processhtml doesn't support variables for values -->
+    <script src="../../src/html-binding.js"></script>
+    <script src="../../src/symbols-manual.js"></script>
+    <script src="../../src/symbols-generated.js"></script>
+    <script src="../../src/transpiled.js"></script>
+    <!-- /build -->
+
+    <!-- build:css ../../css/bootstrap.min.css -->
+    <link href="../../html/css/bootstrap.min.css" rel="stylesheet">
+    <!-- /build -->
+    <!-- build:css ../../css/style.css -->
+    <link href="../../html/css/style.css" rel="stylesheet">
+    <!-- /build -->
+
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+
+    <link rel="stylesheet" href="../common/css/style.css">
+</head>
+<body>
+<div class="container">
+    <div class="page-header">
+        <h1>Animated PNGs / GIFs</h1>
+        <p class="lead">
+            This example renders and animated PNG that was derived from the classy
+            <a href="http://peanutbutterjellytime.net">Peanut Butter Jelly Time GIF</a>.
+        </p>
+    </div>
+
+    <div class="col-md-6">
+        <canvas id="pebble" class="rocky" width="432" height="504"></canvas>    
+    </div>
+
+    <div class="col-md-6">
+        <h2>What's going on?</h2>
+        <p>
+            Similar to the <a href="../simple">simple example</a> it binds Rocky.js to a canvas, and update the output at a regular interval.
+        </p>
+        <p>
+            This example uses <a href="https://en.wikipedia.org/wiki/APNG">animated PNGs</a>
+            to construct a <a href="https://developer.pebble.com/guides/pebble-apps/resources/animated-pngs/">GBitmapSequence</a>.
+            APNGs are supported by Pebble natively. You need to
+            <a href="https://developer.pebble.com/guides/pebble-apps/resources/animated-pngs/#creating-apngs-from-gifs">convert GIFs to APNGs</a> before using them.
+        </p>
+        <p>
+            Alternatively, if your image is accessible via a URL, you can simply call
+            <code>rocky.gbitmap_sequence_create(url)</code>.
+            Have a look at the code of this example.
+        </p>
+
+        <p>
+            The JS version of this API differs slightly from the
+            <a href="https://developer.pebble.com/docs/c/Graphics/Graphics_Types/#gbitmap_sequence_update_bitmap_next_frame">C-Version</a>.
+            In particular, use <code>graphics_draw_bitmap_sequence(ctx, sequence, point)</code> to draw an image sequence.
+        </p>
+    </div>
+    <!-- build:template
+    <%= github_banner %>
+    /build -->
+</div>
+</body>
+
+<script>
+    (function () {
+        var rocky = Rocky.bindCanvas(document.getElementById("pebble"));
+        // puts all C-symbols from rocky onto window.* so they can be used almost
+        // the same way you were using them in C
+        rocky.export_global_c_symbols();
+
+        var bananaAPNGData = [0x89,0x50,0x4e,0x47,0x0d,0x0a,0x1a,0x0a,0x00,0x00,0x00,0x0d,0x49,0x48,0x44,0x52,0x00,0x00,0x00,0x21,0x00,0x00,0x00,0x23,0x08,0x03,0x00,0x00,0x00,0x2d,0xf2,0x93,0x56,0x00,0x00,0x00,0x08,0x61,0x63,0x54,0x4c,0x00,0x00,0x00,0x08,0x00,0x00,0x00,0x00,0xb9,0x3d,0x8b,0xd1,0x00,0x00,0x00,0x18,0x50,0x4c,0x54,0x45,0x00,0x00,0x00,0x00,0x00,0x00,0xff,0xff,0x00,0xff,0xff,0xff,0xcc,0xcc,0x00,0x33,0x66,0x00,0xff,0x00,0x00,0x99,0x99,0x00,0x88,0x64,0x16,0x55,0x00,0x00,0x00,0x01,0x74,0x52,0x4e,0x53,0x00,0x40,0xe6,0xd8,0x66,0x00,0x00,0x00,0x1a,0x66,0x63,0x54,0x4c,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x21,0x00,0x00,0x00,0x23,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x0a,0x00,0x64,0x00,0x00,0x69,0x21,0x1e,0xf0,0x00,0x00,0x00,0x96,0x49,0x44,0x41,0x54,0x38,0xcb,0xdd,0xd2,0x41,0x0a,0xc0,0x30,0x08,0x44,0xd1,0xf9,0x31,0xa6,0xf7,0xbf,0x71,0x91,0x10,0x02,0x45,0x74,0x5f,0x17,0xc5,0x92,0xc7,0x10,0x6d,0xf5,0xeb,0x82,0x16,0x74,0x84,0xe7,0x69,0xc5,0x80,0x5a,0x8c,0x31,0xa0,0x13,0x13,0x3a,0x31,0x29,0x27,0xa1,0x0a,0xc1,0x30,0x33,0x8a,0x10,0x80,0x23,0xda,0x8c,0xe6,0x1e,0x4c,0x9a,0x75,0x94,0x02,0x58,0xab,0x12,0x62,0x05,0xa8,0x05,0x74,0x2b,0xdb,0x4b,0xcd,0xcf,0xe2,0x39,0x36,0x40,0xc0,0x07,0x98,0x81,0x38,0x42,0x60,0xc6,0x57,0x18,0x37,0x62,0xbf,0x67,0x19,0x01,0x22,0x22,0xc9,0x10,0x01,0xd8,0x00,0xc9,0xb3,0xff,0xd5,0x75,0x80,0xcb,0x5d,0x49,0xb9,0x43,0x9c,0x23,0xf7,0x1c,0x84,0x00,0xdc,0x73,0x70,0xe7,0x4f,0xee,0x70,0xa7,0x85,0x4d,0xa3,0x4f,0x44,0x14,0xb7,0xcb,0xbf,0x3b,0xdc,0xe6,0xd4,0x0b,0x06,0x5a,0x02,0x92,0x65,0x31,0x30,0x02,0x00,0x00,0x00,0x1a,0x66,0x63,0x54,0x4c,0x00,0x00,0x00,0x01,0x00,0x00,0x00,0x19,0x00,0x00,0x00,0x1f,0x00,0x00,0x00,0x06,0x00,0x00,0x00,0x04,0x00,0x0a,0x00,0x64,0x00,0x00,0x5b,0x9d,0x42,0xda,0x00,0x00,0x00,0x98,0x66,0x64,0x41,0x54,0x00,0x00,0x00,0x02,0x38,0xcb,0x75,0xd2,0x51,0x0e,0xc4,0x20,0x08,0x04,0x50,0x47,0xc4,0xde,0xff,0xc6,0x2d,0x4c,0x24,0xee,0x8e,0xf2,0x45,0x78,0x1d,0x5b,0x4c,0xdb,0x56,0x40,0xd3,0x22,0xdc,0x08,0xcf,0x73,0x95,0x0e,0x9c,0xa5,0xf7,0x22,0x95,0x51,0x24,0x32,0x54,0x10,0x75,0x0a,0xc1,0x60,0x66,0x60,0x48,0x22,0x22,0x92,0x39,0xbf,0x07,0x4b,0x64,0x1d,0x8a,0x86,0xe6,0x0c,0x51,0x9a,0x01,0x67,0x01,0x6e,0xab,0xd6,0x25,0xd4,0x64,0x7d,0x01,0x65,0xcd,0x60,0x46,0x02,0x21,0x67,0x31,0x0c,0x31,0x3e,0x56,0x11,0xce,0x2a,0xb3,0x45,0x98,0xc9,0x33,0xdd,0x9b,0x23,0x61,0x64,0xef,0xf5,0x47,0x64,0x4f,0x40,0xf3,0xcf,0xf6,0x2a,0xf8,0x2f,0x47,0x6c,0xaf,0xc0,0x93,0xf3,0x24,0x91,0x6a,0xf4,0x96,0xb5,0xe5,0x5e,0x6b,0x27,0xb6,0xbf,0x62,0xd8,0xbb,0xa2,0xa8,0xea,0x16,0xbc,0xa0,0xb2,0x02,0xaa,0x1f,0xae,0xa3,0x53,0x00,0x00,0x00,0x1a,0x66,0x63,0x54,0x4c,0x00,0x00,0x00,0x03,0x00,0x00,0x00,0x20,0x00,0x00,0x00,0x23,0x00,0x00,0x00,0x01,0x00,0x00,0x00,0x00,0x00,0x0a,0x00,0x64,0x01,0x00,0x10,0xb3,0x49,0x14,0x00,0x00,0x00,0xa4,0x66,0x64,0x41,0x54,0x00,0x00,0x00,0x04,0x38,0xcb,0xa5,0x91,0x41,0x0e,0xc3,0x20,0x0c,0x04,0x19,0x03,0xe5,0xff,0x3f,0x6e,0xed,0x28,0x75,0xdc,0x48,0x8b,0xd4,0x2c,0x07,0x1c,0xcf,0xc4,0x20,0xd1,0x7e,0x02,0x4d,0x86,0xb5,0x78,0x28,0x8c,0x05,0x8a,0x63,0x36,0xa4,0x60,0x2e,0x20,0x85,0xfb,0x08,0x20,0x4b,0x0c,0xa0,0x20,0x7a,0x3f,0x3a,0x51,0x76,0x7a,0x7e,0xe3,0x2c,0xba,0x5f,0x21,0x56,0xfd,0x61,0x3f,0xa1,0x01,0xb3,0xde,0xe1,0xbc,0xe5,0x84,0xb3,0x9a,0x87,0x82,0x79,0x16,0x5c,0x9b,0x57,0x85,0xc8,0x0b,0x12,0x57,0x85,0x97,0xc7,0x8f,0x48,0x5c,0x14,0x70,0x6e,0x83,0xe4,0x35,0x18,0xfa,0x35,0x30,0xcf,0x78,0x2e,0xb0,0x15,0x36,0xaf,0xbd,0x15,0x50,0x82,0x1e,0xd0,0x08,0xae,0x04,0x08,0x2e,0x0d,0xa6,0x12,0x1c,0x4e,0xc5,0x43,0x10,0xc6,0x81,0xfe,0x16,0xf0,0xe4,0x7e,0xc7,0xfd,0x93,0x10,0xa2,0xa8,0x4a,0xb6,0x8b,0x9a,0xa9,0x83,0xeb,0x21,0x6f,0x0d,0x46,0x02,0xf3,0x68,0x92,0x5c,0x07,0x00,0x00,0x00,0x1a,0x66,0x63,0x54,0x4c,0x00,0x00,0x00,0x05,0x00,0x00,0x00,0x1b,0x00,0x00,0x00,0x21,0x00,0x00,0x00,0x01,0x00,0x00,0x00,0x02,0x00,0x0a,0x00,0x64,0x01,0x00,0x5d,0x51,0x4d,0xe4,0x00,0x00,0x00,0x9f,0x66,0x64,0x41,0x54,0x00,0x00,0x00,0x06,0x38,0xcb,0x7d,0xd2,0x01,0x0e,0x84,0x20,0x0c,0x44,0x51,0x7e,0x4b,0xe5,0xfe,0x37,0x36,0xd4,0x55,0x20,0xe9,0x6c,0x8d,0xa6,0xe1,0x31,0xa0,0xc4,0x76,0x14,0x34,0x55,0x8c,0x81,0x34,0x6d,0x30,0xba,0xb4,0x6e,0x06,0x35,0x4d,0x33,0x54,0x4c,0x1b,0x60,0x40,0x49,0xee,0x9e,0x77,0x69,0x79,0xed,0x06,0x55,0x2e,0xd7,0xc6,0xfd,0x51,0xfa,0xb6,0x1f,0xcc,0x39,0xdb,0xcc,0x61,0xdf,0x8b,0xe6,0xe8,0x96,0xe3,0x02,0x8e,0x5c,0x03,0xe2,0xb7,0xe6,0x35,0x2b,0x2d,0xbe,0x6f,0x89,0x48,0x33,0x26,0xf1,0x0e,0xb4,0x17,0xd3,0x0c,0x30,0x0e,0x4a,0x0c,0x7a,0xb7,0x59,0x44,0x44,0x75,0xd4,0xf2,0x40,0xff,0x5b,0xd7,0x86,0xb4,0x0c,0x6a,0x4b,0xa4,0x29,0x04,0x61,0x01,0x10,0xc2,0xf2,0x51,0xd3,0x63,0x21,0x62,0x22,0x08,0xac,0x5d,0x8b,0xbf,0x8c,0xd5,0xed,0xe6,0xb3,0x58,0xdd,0x6e,0x59,0x67,0x7b,0x03,0xdd,0xcc,0x02,0xb9,0x61,0xc0,0x85,0x91,0x00,0x00,0x00,0x1a,0x66,0x63,0x54,0x4c,0x00,0x00,0x00,0x07,0x00,0x00,0x00,0x15,0x00,0x00,0x00,0x1d,0x00,0x00,0x00,0x04,0x00,0x00,0x00,0x06,0x00,0x0a,0x00,0x64,0x00,0x00,0x31,0xeb,0x39,0xbe,0x00,0x00,0x00,0x89,0x66,0x64,0x41,0x54,0x00,0x00,0x00,0x08,0x38,0xcb,0x6d,0xce,0x41,0x0e,0x04,0x21,0x08,0x44,0x51,0xbe,0x34,0xf6,0xfd,0x6f,0x3c,0x53,0x84,0x04,0xd3,0x58,0x0b,0x53,0xbe,0x10,0xd1,0x3a,0x60,0x33,0x70,0x63,0xde,0x97,0x89,0x2c,0xe9,0xc0,0xb5,0x18,0xf8,0xdc,0xf4,0x29,0x1d,0xa3,0x28,0xdf,0x51,0xdc,0x1d,0x67,0x2a,0x30,0x75,0xce,0x72,0x7d,0x97,0xf9,0x61,0xe9,0xde,0xc0,0x57,0xc5,0xbb,0xb1,0xb7,0x71,0x53,0xad,0x6b,0x56,0x47,0x2c,0xaf,0xbb,0xe1,0x2e,0x2e,0xc5,0x10,0x48,0xfd,0x1c,0xc6,0x4b,0x41,0x2f,0x27,0x53,0xb3,0x06,0x84,0xce,0x64,0xc4,0xb5,0x33,0xc2,0x82,0x62,0x0b,0x49,0x71,0x18,0x72,0xf8,0xb7,0x66,0x05,0x25,0x9a,0x81,0xb3,0x57,0xd1,0x6f,0x20,0x29,0x7b,0xa9,0xc2,0xd9,0x92,0x33,0x5d,0x7e,0x9d,0xd6,0x02,0x92,0x0a,0x40,0xc5,0xf7,0x00,0x00,0x00,0x1a,0x66,0x63,0x54,0x4c,0x00,0x00,0x00,0x09,0x00,0x00,0x00,0x19,0x00,0x00,0x00,0x1f,0x00,0x00,0x00,0x02,0x00,0x00,0x00,0x04,0x00,0x0a,0x00,0x64,0x00,0x00,0xeb,0xfd,0x72,0x7e,0x00,0x00,0x00,0x94,0x66,0x64,0x41,0x54,0x00,0x00,0x00,0x0a,0x38,0xcb,0x95,0xcf,0x51,0x0e,0xc5,0x20,0x08,0x44,0x51,0xaf,0x94,0x76,0xff,0x3b,0x7e,0x10,0x42,0xb4,0x05,0x3f,0x1e,0x5f,0x13,0x4f,0x46,0x65,0xec,0x03,0xa3,0x1f,0x38,0x11,0xcf,0x43,0x0f,0xcc,0x94,0x02,0x73,0xd2,0xc2,0x75,0x92,0x2b,0xa4,0xaf,0xe0,0xd3,0x55,0x10,0x11,0x84,0x5e,0x00,0xfe,0xe8,0x70,0x7c,0x87,0x5c,0xa8,0xca,0x7d,0x03,0x9d,0x18,0x99,0xf5,0x8b,0xc2,0x49,0xa6,0xd9,0x4e,0x40,0x8a,0xdb,0x3a,0x43,0x04,0x3c,0x07,0x11,0x20,0x82,0x8b,0x6c,0x25,0x3c,0xc7,0x59,0x74,0xf6,0x52,0x76,0x06,0xa0,0x3a,0x54,0x4d,0x9c,0xf0,0xbc,0x7e,0xa2,0x66,0x04,0x81,0xe5,0xcf,0x24,0x8d,0x3a,0xb8,0x81,0x16,0x50,0x75,0xeb,0x6e,0xd3,0x12,0xf2,0x26,0x6a,0x8c,0xdd,0x72,0xaf,0x88,0x6f,0x11,0xb6,0xb4,0xc8,0xe7,0x95,0x7e,0xa0,0xba,0x02,0xaa,0x14,0x0c,0x6a,0xc2,0x00,0x00,0x00,0x1a,0x66,0x63,0x54,0x4c,0x00,0x00,0x00,0x0b,0x00,0x00,0x00,0x20,0x00,0x00,0x00,0x23,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x0a,0x00,0x64,0x01,0x00,0xd1,0x84,0xd5,0xf2,0x00,0x00,0x00,0xa6,0x66,0x64,0x41,0x54,0x00,0x00,0x00,0x0c,0x38,0xcb,0xa5,0x92,0x01,0x0e,0x03,0x21,0x08,0x04,0x19,0x95,0xf3,0xff,0x3f,0x6e,0xa0,0xb5,0xc4,0xa3,0xc1,0xa4,0xb7,0xc6,0x08,0xec,0x04,0x8d,0x2a,0x37,0x81,0x94,0x62,0x4e,0x1e,0x01,0x30,0x47,0x0d,0x8c,0xd6,0xa0,0xf0,0x0d,0x68,0xd4,0x0d,0x32,0x00,0x44,0x08,0x0d,0xd8,0x2c,0x7a,0x87,0x95,0xf7,0xde,0x7d,0x46,0x8e,0xec,0x05,0x1f,0x2b,0x77,0xeb,0xdc,0x41,0x00,0x5d,0x67,0xdc,0xcf,0xa0,0xdf,0x50,0xd5,0x11,0x98,0xcd,0x44,0x14,0x4d,0x91,0xc1,0x85,0x2b,0xec,0x0d,0x11,0x06,0x97,0x89,0xb0,0x77,0x82,0xd1,0x30,0x1f,0xd5,0xea,0x25,0x88,0xab,0xcc,0x80,0x5f,0xf5,0x13,0x80,0x03,0x20,0x9c,0x81,0x71,0x00,0xc8,0x40,0x6e,0x51,0x03,0x4e,0x20,0x25,0x01,0x15,0xa0,0xd4,0xbe,0xa8,0xcd,0xca,0x77,0xa0,0x20,0xde,0xd6,0xdf,0x00,0xa6,0x58,0xb3,0xdd,0x3f,0xff,0xd9,0x83,0x8c,0x44,0x39,0xd0,0xbc,0xc1,0x8f,0xf8,0x05,0x0d,0xb2,0x02,0xf3,0x3f,0x32,0xc6,0x71,0x00,0x00,0x00,0x1a,0x66,0x63,0x54,0x4c,0x00,0x00,0x00,0x0d,0x00,0x00,0x00,0x1b,0x00,0x00,0x00,0x21,0x00,0x00,0x00,0x05,0x00,0x00,0x00,0x02,0x00,0x0a,0x00,0x64,0x00,0x00,0xf4,0x2a,0x4c,0x01,0x00,0x00,0x00,0xa2,0x66,0x64,0x41,0x54,0x00,0x00,0x00,0x0e,0x38,0xcb,0x9d,0xd2,0xdb,0x0e,0x84,0x20,0x0c,0x45,0x51,0x77,0x69,0xe5,0xff,0xff,0x78,0xd2,0x92,0x9c,0x40,0x42,0x7d,0x98,0x63,0x34,0xd0,0x65,0xbd,0xa0,0xcf,0x1e,0x78,0xba,0x30,0x27,0x7f,0x99,0x4f,0x68,0x08,0x33,0xef,0xcc,0xd2,0xe8,0xac,0x6b,0x04,0x0c,0xe0,0x46,0x63,0x8c,0xda,0xb9,0x59,0x6d,0xa7,0x01,0x97,0x3e,0xa0,0x6a,0xb0,0xdd,0xcf,0xd7,0x24,0xcb,0xeb,0x7c,0x3d,0xa6,0xcd,0xed,0x2a,0x47,0x1f,0xf0,0x82,0xfa,0xaa,0x16,0x35,0x7d,0x33,0x78,0x59,0xe8,0x65,0x22,0x11,0x92,0xcc,0x59,0x85,0x8c,0x10,0x63,0xad,0xa8,0x48,0x18,0x58,0xc6,0x9d,0x10,0x29,0x69,0x5a,0xec,0xc6,0xfa,0xcf,0xf0,0x65,0x34,0xd6,0xb4,0xa5,0x15,0x35,0x06,0x1d,0xd5,0x32,0x11,0x8d,0xd5,0xe1,0x4e,0xcb,0xa2,0x69,0xbb,0x37,0x02,0xa1,0xd1,0x29,0xfa,0x4f,0x34,0x52,0x18,0x19,0x34,0x3a,0xac,0x72,0x0c,0x2b,0x3f,0xe3,0x10,0x02,0xba,0x09,0xd5,0xf1,0xf9,0x00,0x00,0x00,0x18,0x74,0x45,0x58,0x74,0x53,0x6f,0x66,0x74,0x77,0x61,0x72,0x65,0x00,0x67,0x69,0x66,0x32,0x61,0x70,0x6e,0x67,0x2e,0x73,0x66,0x2e,0x6e,0x65,0x74,0x96,0xff,0x13,0xc8,0x00,0x00,0x00,0x00,0x49,0x45,0x4e,0x44,0xae,0x42,0x60,0x82]; // eslint-disable-line
+        var bitmapSequence = gbitmap_sequence_create_with_data(bananaAPNGData);
+
+        var marioSequence = gbitmap_sequence_create('https://raw.githubusercontent.com/franc0is/pebbleGIF/master/gifs/mario_banana.gif');
+
+        function randomOpaqueColor() {
+            // colors on Pebble are expressed a single byte with 2 bits per channel aarrggbb
+            // we choose create an opaque color by setting both bits of the alpha channel
+            // result = 11rrrrrr = (rand64 | 0xC0)
+            return Math.floor(Math.random() * 64) | 0xC0;
+        }
+
+        var backgroundColor = GColorVividCerulean;
+        var started = new Date().getTime();
+        rocky.update_proc = function (ctx, bounds) {
+            gbitmap_sequence_update_bitmap_next_frame(marioSequence);
+            gbitmap_sequence_update_bitmap_next_frame(bitmapSequence);
+
+            // change the background color each time we start over
+            if (gbitmap_sequence_get_current_frame_idx(bitmapSequence) == 0) {
+                backgroundColor = randomOpaqueColor();
+            }
+            graphics_context_set_fill_color(ctx, backgroundColor);
+            graphics_fill_rect(ctx, bounds);
+
+            // draw the centered sprite
+            graphics_draw_bitmap_sequence(ctx, marioSequence, [42, 50]);
+
+            // draw the moving row of moving sprites
+            var elapsed = new Date().getTime() - started;
+            var width = 50; // leave some space between each sprite
+            var dx = (elapsed * 10 / 1000) % width; // 10px per second
+            var spritesPerRow = (bounds.w / width) + 1;
+            for (var i = 0; i < spritesPerRow; i++) {
+                var pt = GPoint(i * width - dx, 100);
+                graphics_draw_bitmap_sequence(ctx, bitmapSequence, pt);
+            }
+        };
+
+        setInterval(function(){rocky.mark_dirty();}, 1000 / 10);
+    })();
+</script>
+</html>
diff --git a/examples/readme.md b/examples/readme.md
@@ -7,6 +7,6 @@ This folder contains a variety of examples designed to help you understand some
  - [TicToc](tictoc/index.html) – Implementation of a custom/extended API and basic watchface.
  - [Vector Graphics](pdc/index.html) – Draws and modifies vector graphics.  
  - [GPath](gpath/index.html) – Shows how to use APIs around `GPath`.
+ - [APNG/GIF](apng/index.html) – Renders an animatd GIF/animated PNG.
  - [Text](text/index.html) – Shows how to draw text and use fonts.
  - [Community Examples](community.html) - Additional examples built by community members.
-
diff --git a/src/symbols-generated.js b/src/symbols-generated.js
@@ -1065,6 +1065,49 @@ Rocky.addGeneratedSymbols = function(obj) {
     }
   };
 
+  // uint32_t gbitmap_sequence_get_current_frame_delay_ms(
+  //     GBitmapSequence *bitmap_sequence);
+  addFirstArgCapturedCWrap('gbitmap_sequence_get_current_frame_delay_ms',
+    'number', ['number']);
+
+  // uint32_t gbitmap_sequence_get_total_num_frames(
+  //     GBitmapSequence *bitmap_sequence);
+  addFirstArgCapturedCWrap('gbitmap_sequence_get_total_num_frames',
+    'number', ['number']);
+
+  // uint32_t gbitmap_sequence_get_play_count(GBitmapSequence *bitmap_sequence);
+  addFirstArgCapturedCWrap('gbitmap_sequence_get_play_count',
+    'number', ['number']);
+
+  // uint32_t gbitmap_sequence_get_play_count(GBitmapSequence *bitmap_sequence);
+  addFirstArgCapturedCWrap('gbitmap_sequence_get_play_count',
+    'number', ['number']);
+
+  // bool emx_gbitmap_sequence_seek_to_elapsed(GBitmapSequence *bitmap_sequence,
+  //          uint32_t elapsed);
+  obj.gbitmap_sequence_seek_to_elapsed = firstArgCapturedCWrap(
+    'emx_gbitmap_sequence_seek_to_elapsed',
+    'number', ['number', 'number'],
+    function(seek_to_elapsed, cPtr, elapsed) {
+      return !!seek_to_elapsed(cPtr, elapsed);
+    }
+  );
+
+  // GSize gbitmap_sequence_get_bitmap_size(
+  //     GBitmapSequence *bitmap_sequence)
+  // GSize *emx_gbitmap_sequence_get_bitmap_size(
+  //     GBitmapSequence *bitmap_sequence)
+  obj.gbitmap_sequence_get_bitmap_size = firstArgCapturedCWrap(
+    'emx_gbitmap_sequence_get_bitmap_size', 'number', ['number'],
+    function(get_bitmap_size, sequencePtr) {
+      var resultPtr = get_bitmap_size(sequencePtr);
+      return {
+        w: obj.module.getValue(resultPtr, 'i16'),
+        h: obj.module.getValue(resultPtr + 2, 'i16')
+      };
+    }
+  );
+
   return [];
 };