Skip to content

Commit 58afc10

Browse files
committed
Fixup Rocky tutorial part 1
Signed-off-by: C-D-Lewis <[email protected]>
1 parent 9a647d7 commit 58afc10

File tree

1 file changed

+13
-9
lines changed
  • source/tutorials/js-watchface-tutorial

1 file changed

+13
-9
lines changed

source/tutorials/js-watchface-tutorial/part1.md

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -58,13 +58,14 @@ structure required for a basic Rocky.js application.
5858

5959
## Watchface Basics
6060

61-
Watchface are essentially long running applications that update the display at
61+
Watchfaces are essentially long running applications that update the display at
6262
a regular interval (typically once a minute, or when specific events occur). By
6363
minimizing the frequency that the screen is updated, we help to conserve
6464
battery life on the watch.
6565

6666
The main entry point for the watchface is `/src/rocky/index.js`, so we'll
67-
start by editing this file.
67+
start by editing this file. You can remove the sample content provided for the
68+
code given below.
6869

6970
The very first thing we must do is include the Rocky.js library, which gives us
7071
access to the APIs we need to create a Pebble watchface.
@@ -198,7 +199,9 @@ Another minute with your Pebble!
198199
```
199200

200201
> Note: You should prevent execution of the log statements by commenting the
201-
code, if you aren't using them. e.g. `//console.log();`
202+
> code, if you aren't using them. e.g. `// console.log();` before publishing the
203+
> watchface.
204+
202205

203206
## Creating an Analog Watchface
204207

@@ -221,7 +224,8 @@ representing the minute hand.
221224

222225
We need to implement a function to draw the hands, to prevent duplicating the
223226
same drawing code for hours and minutes. We're going to use a series of
224-
``CanvasRenderingContext2D`` methods to accomplish the desired effect.
227+
``CanvasRenderingContext2D`` methods to accomplish the desired effect in the
228+
`draw` callback we added earlier.
225229

226230
First we need to find the center point in our display:
227231

@@ -269,6 +273,9 @@ ctx.stroke();
269273

270274
### Putting It All Together
271275

276+
This is the complete code assembled so far, including a helpful function for
277+
drawing the hands and converting a time fraction to a Radian angle.
278+
272279
```js
273280
var rocky = require('rocky');
274281

@@ -421,8 +428,7 @@ output, it probably means there is an issue in the preceding code.
421428
### I'm still having problems!
422429

423430
If you've tried the steps above and you're still having problems, there are
424-
plenty of places to get help. You can post your question and code on the
425-
[Pebble Forums](https://forums.pebble.com/c/development) or join our
431+
plenty of places to get help. You can post your question and code on our
426432
[Discord Server]({{ site.links.discord_invite }}) and ask for assistance.
427433

428434

@@ -438,9 +444,7 @@ watchface using JavaScript! To do this we:
438444
5. Used drawing commands to draw text and lines on the display.
439445

440446
If you have problems with your code, check it against the sample source code
441-
provided using the button below.
442-
443-
[View Source Code >{center,bg-lightblue,fg-white}](https://github.com/pebble-examples/rocky-watchface-tutorial-part1)
447+
provided above.
444448

445449
## What's Next
446450

0 commit comments

Comments
 (0)