forked from pebble/rockyjs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
115 lines (103 loc) · 4.74 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!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>Simple Example</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>GPath Example</h1>
<p class="lead">
This example demostrates the APIs around <code>GPath</code> by rotating two example shapes.
</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>
The example makes use of <code>GPath</code> a simple API to
<a href="https://developer.getpebble.com/docs/c/Graphics/Drawing_Paths/">draw polygons into Pebble's graphic context</a>.
</p>
<p>
Every second, it choses a random fill color and stroke width.
The outline of the path is closed or open at random.
</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();
// coordinates taken from https://github.com/pebble/pebble-sdk-examples/blob/master/watchapps/feature_gpath/src/feature_gpath.c#L13-L24
var housePath = gpath_create([[-40, 0], [0, -40], [40, 0], [28, 0], [28, 40], [10, 40], [10, 16], [-10, 16], [-10, 40], [-28, 40], [-28, 0]]);
// coordinates taken from https://github.com/pebble/pebble-sdk-examples/blob/master/watchapps/feature_gpath/src/feature_gpath.c#L33-L48
var infiniteRectPath = gpath_create([[-50, 0], [-50, -60], [10, -60], [10, -20], [-10, -20], [-10, -40], [-30, -40], [-30, -20], [50, -20], [50, 40], [-10, 40], [-10, 0], [10, 0], [10, 20], [30, 20], [30, 0]]);
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 value = 0;
var FPS = 20;
var fillColor, path, strokeWidth, closed;
rocky.update_proc = function (ctx, bounds) {
// every second, make a change
if (value % FPS == 0) {
fillColor = randomOpaqueColor();
path = (path == housePath) ? infiniteRectPath : housePath;
strokeWidth = Math.random() * 15;
closed = Math.random() > 0.5;
}
graphics_context_set_fill_color(ctx, fillColor);
graphics_context_set_stroke_width(ctx, strokeWidth);
gpath_move_to(path, [bounds.w / 2, bounds.h / 2]);
gpath_rotate_to(path, value / 30);
gpath_draw_filled(ctx, path);
(closed ? gpath_draw_outline : gpath_draw_outline_open)(ctx, path);
};
setInterval(function () {
value += 1;
rocky.mark_dirty();
}, 1000 / FPS);
})();
</script>
</html>