User Guide

Canvas watch-app

Before you can use Canvas in anger, you have to install the watch-app (.pbw) to your Pebble. This will run on the watch, and translate the screens that you design onto your Pebble screen - once it's installed! You will be prompted to install when you start Canvas for the first time, and again if Canvas hasn't heard back from the watch-app that it was installed successfully!

You might also be prompted to install a new version of the watch-app after upgrading Canvas, to add some new goodies... you should always do this!

There are two versions of the Canvas .pbw, and you can choose which one you want to install (only one of them can be installed at a time):

  • Watch-app: New to Canvas v2.0, this appears in the Pebble menu (i.e. it is an app, not a watch-face), and allows interaction from button presses. Currently, the up/down buttons switch between your Canvas screens
  • Watch-face: Canvas classic. This is a watch-face which appears in your rotation of faces. No interaction is possible.

Screens

When you open Canvas, you are presented with a list of screens. Each shows a preview of what it will look like on your Pebble.

Publish a screen directly by using the paper aeroplane button.

To edit a screen, click on it. You can also delete/copy using the inline icons, and add a new screen using the + button in the ActionBar at the top of the screen.

Screen Store

The Canvas Screen Store is now live! Just swipe right from the Canvas home screen to see what other people have designed, and download them for yourself!

You can also upload your own designed to the Screen Store: just use the share option for the screen you want to share on the home screen.

You can link directly to any item in the Screen Store - just use the Share option in the details window for any screen, and it will generate a link which will open directly to that item when clicked on a phone which has Canvas installed.

Sharing

As well as the Screen Store, you can also directly share screens with your friends (or back them up for yourself), using the share dropdown menu for each screen on the home screen.

Edit Screen - Layer types

A screen consists of a series of layers. Each layer can be either text-based, image-based, or it can be an analog clock or an inverter layer.

All layers are listed in the top-left of the editor. Select a layer, and it will be highlighted with a blue boundary in the preview window, and its properties will be displayed underneath.

The available types of layer are:

  • Time/Date/Pebble status (text-based)
    • Display any time/date format
    • Display the Pebble battery charge status
    • These layer types are updated on the watch even when there is no connection to the phone
  • Text (text-based)
    • Display a fixed bit of text
  • Countdown (text-based)
    • Display a countdown to either a fixed time/date, or a calendar event
    • Countdowns to fixed time/date recur automatically daily after that time/date
  • Dynamic (text-based)
    • Display dynamic content from your phone
    • This content will only be updated when your watch is connected to your phone
    • Available content:
      • Phone state: various information about your phone (battery level, WIFI status, ringer mode, GSM/CDMA signal status and more)
      • Sensor: depending on your device (different phones have different sensors built-in0, displays information from the temperature, humidity, ambient light, pressure sensors in your phone
      • Calendar appointment: display details of upcoming appointment in your Google calendar. You can select which event to display (i.e. 1 is the next event, 2 is the event after that), and there are also various settings to filter out the events that you are interested in, which can be accessed by clicking the calendar button next to the event dropdown.
      • Unread/Missed: Your current number of missed calls, unread SMS, and unread Gmail messages. Click the Gmail icon to select which labels you are interested in.
      • Weather: displays lots of information about the weather at a particular location. Use the weather settings window to select which location to use (either your current location or a fixed one), in addition to the source of the weather data (OpenWeather or Yahoo!) and the update interval. Some of the information is dependent on which source you select.
      • Plugin: developers can write plugins which provide extra content for Canvas! See the plugins page for more infomation... The dropdown will list all of the Canvas plugins which are installed on your phone
      • Tasker: for the hackers - see below for some information how this works!
  • Image
    • Displays an image!
    • Use the Image Settings window to choose the size of the image, and what dithering to apply (dithering is a process which can improve the way images look on a 1-bit display)
    • Please note: adding images to your screen will mean that it takes longer to load to your Pebble!
    • The following images modes are available:
      • Bundled: use the gallery icon to choose from a selection of images which are bundled with Canvas. These images are all 1-bit vector graphics - that means that they will scale well to any size, and do not require dithering to look their best on the Pebble screen
      • Weather: a dynamically updated image representing the current weather (using the same settings as above)
      • Gallery: use the gallery icon to select an external image to display. To get the best results, experiment with the sizing/dithering settnigs
      • Plugin: developers can write plugins which provide extra content for Canvas, and some of them provide image content! Any available plugin image content will be displayed in the dropdown
      • Ringer: a dynamically updated image representing the current phone ringer state (e.g. silent, vibrate, loud)
      • Wifi: a dynamically updated image showing the current Wifi status (on/connected/off)
      • Signal strength: a dynamically updated image representing the current mobile network signal strength. This is only available on GSM/CDMA networks, and may differ from the icon shown in your phone status bar (Canvas has to derive this from the raw signal strength, and your phone manufacturer may calculate it differently)!!
  • Analogue clock
    • Displays an analogue clock. You can select which hands to display, and the size of each hand.
Any of the text-based layer types above can be turned into Inverter layers by checking the tick-box. An inverter layer is a special type of layer which does not display any text, but inverts the colour of anything beneath it. This can be combined with dynamic sizing for some very cool results! (The reason for still selecting a layer type from the list above when creating an inverter layer is so that the type of data used for dynamic sizing can be selected...)

Edit Screen - How it works

Edit any property, and the preview window will be instantly updated.

Layers can be dragged to move and resize, along with using the size/move buttons in the properties section underneath.

For all text-based layers, once the data type above has been selected, you can select exactly what data is displayed using the Format Editor. Click the edit icon to be presented with a window listing all of the available data for that category. You can add any of the items to your format string by clicking on it!

Then select the font and colours that you want, and any other options:
  • Wrapping: how text is wrapped
  • Hide if empty: the layer is hidden completely if the associated text is empty
  • Animate: every time this item changes, it will be animated in the selected direction! You can also set the animation duration
  • Vibrate update: tick to vibrate your watch whenever the content in this layer changes. You can also add a custom vibration pattern (in the format on-off-on-off, entering a number (in steps of 10ms) for each on-off period... e.g. 2-4-6-4-2 will give a short --> long -> short vibration pattern. Press the play button to preview the pattern on your phone!
  • Dynamic sizing: see below for more detail

Publish the screen to your Pebble using the aeroplane icon in the ActionBar at the top of the screen. This also saves the screen.

Dynamic sizing

Most layer types can be sized dynamically! This can be used to create some really cool effects (create a battery bar which resizes every time your battery changes, or a bar which shows how far through the day you are). Inverter layers work really well when dynamically-sized!

Each of the 4 sides of a layer (left, right, top, bottom) can be dynamically re-sized - just click the arrow button for that direction, and it will be marked as enabled.

Once you have selected which sides of the layer to size dynamically, you need to set a dynamic size format. This is the same process as setting a text format, but you must provide a format which will result in a fraction (it must be in the format x/y, where x and y are integers).

For example, if you use a Phone State layer, a dynamic format string %B/100 will re-size that layer according to the currently phone battery percentage.

Plugins

Anyone can write a plugin for Canvas, which allows the inclusion of custom content in any screen. See http://pebblecanvas.blogspot.com/p/plugins.html for more information on writing plugins.

Once a plugin is installed on your phone, it will show up as an option when you select 'Dynamic'/'Plugin' for text layers, or 'Plugin' for image layers.

Tasker

Within the Tasker app, a Canvas plugin is available as an action which can be used for any task. Once a context has been created and the Canvas plugin selected, any text entered will be sent to Canvas every time the task runs. Tasker variables can be included in the text.

Once each task has been executed for the first time (this can be initiated manually within tasker to test it), the task will appear in the Tasker dropdown within Canvas, for inclusion in a dynamic text layer.

Conditional format strings

In any dynamic text layer, conditional format strings can be used to vary what it displayed based on current values. These are formatted as follows:

{text1#condition1#text2#condition2#text3}

...where text1 is only displayed if condition1 is true, else text2 is displayed if condition2 is true, else text3 is displayed. text3 (i.e. else) is optional. As many else clauses can be entered as are required.

e.g. an 'Unread' dynamic layer, enter:

{G %G1#%G1>0#S %S#%S>0}

That will show G 1 if you have one gmail, otherwise S 1 if you have one SMS, otherwise it will be blank. Add #none to the end for that to appear instead of a blank...

As of Canvas v2.1.2, you may now also use text comparisons in conditionals! For example, on a Phone State layer the following will show 's' when the ringer mode is silent, and 'n' when it is not:

{s#%R=Silent#n}

Show when connected/disconnected

By default, layers are always shown. Select Show when connected or Show when disconnected for the layer to only be displayed under that condition. This will give an indication when Pebble loses or gains connection to the paired Android device. This can be combined with a vibration option!

Maths

As of Canvas 2.0.12, and dynamic text layer can use maths in the format String!

Maths expressions are surrounded by square brackets []. Inside these brackets, any basic expression can be formed, e.g.:

[(7+9) /3 @2]

Will output 5.35. You can see that brackets () are supported, and there is a precision specifier (@) for the required number of decimal place (this is optional).

You could use this for converting the wind speed into the format of your choice on a Weather layer:

[0.44704*%W @1]

57 comments:

  1. Can math operations be done?
    I want to convert the %P from hPa to inHg by dividing it by ~33.
    Thanks.

    ReplyDelete
  2. Thank you for this wonderful app.
    I think it would be much better if users could change the font size freely besides the built-in sets (e.g. add buttons to change font size one pt for each click just as the position control).
    Please think about it, thanks.

    ReplyDelete
    Replies
    1. Can't be done, sorry. Each size of font has to be compiled into the watch-app

      Delete
  3. Cool little app..
    But hard to manipulate laters with my chubby fingers but still col and i am getting the hang of it.

    I would like to be able to copy (duplicate) a watch-face so that I can do variations without having too reset up each new watch face.. Is that possible? Cant fine a duplicate or copy feature?

    ReplyDelete
    Replies
    1. On the home screen, there is a copy button in each screen entry

      Delete
  4. Great stuff, but when I was using it on HTC ONE 4.2.2. it worked wonderfull, now on 4.3 custom ROM it does not even start.
    Any ideas.

    ReplyDelete
    Replies
    1. There is a bug in the custom ROM. Someone else who reported this just updated to a new ROM and it works.

      Delete
  5. Hi there.
    I love the app and made my own special watch face with time, date, next app., temp. and weather icon.
    There is one thing I would like to be added/changed. When I show the next appointment the date is shown, which is fine - until the appointment is due today. In that case I would like the date not to be shown. That way I know that this appointmen.is today.

    You can get my watch face here:
    http://www.bloghuette.eu/2013/09/my-pebble-canvas-watch-face/

    ReplyDelete
  6. Great app! I would like to see more/different weather icons. These are a bit bulky. The weather icons that "Glance" uses are perfect. Or, is there a way to make your own?

    ReplyDelete
  7. I love this app and use it as my daily watchface. I'd love to be able to launch tasker tasks from the watchface. Any plans on implementing that?

    ReplyDelete
  8. Is there a way to use conditions with dynamic sizing?

    ReplyDelete
  9. Can the Conditional Format String compare strings?

    e.g. {Home#%N="Springfield"#Work#%N="Shelbyville"#%N}
    If %N = "Springfield", display "Home"
    Else If %N="Shelbyville", display "Work"
    Else display %N

    ReplyDelete
    Replies
    1. Have you figured out conditions for string?

      Delete
  10. Could you add "meters per second" as option to windspeed. At least here in Finland that is used most.

    ReplyDelete
  11. I totally agree, please add "meters per second" (m/s) as wind speed. We in Sweden use it as well.

    ReplyDelete
    Replies
    1. Or, if some math could be used, we could fix it ourselves. 1 mph = 0.44704 m/s.

      Delete
  12. First, I want to thanks for your effort. I'm writing to ask if I can add watch battery level to pebble's screen together with the existing phone battery level. Thank you.

    ReplyDelete
    Replies
    1. Canvas 2.0 has this. I found it under the "Time/Date/Pebble Status" variables

      Delete
  13. Please document this more or create a user forum. The Conditional format strings sound good but without you documenting the values that your "%" strings can return or what a condition looks like we can only go by the few examples you provide.

    For example I have seen "%W" return "Connected" and "Enabled" and possibly once "Disconnected", but most of the time it says "Connected" when disconnected and in any case what does a condition using these look like?

    ReplyDelete
    Replies
    1. This ^

      How can you base the most important active elements of your app around format strings and not provide a complete list of those strings in the user documentation? *facepalm*

      Delete
  14. This comment has been removed by the author.

    ReplyDelete
  15. Please also fix vibrate to honor the Pebble's "Do not Disturb" setting.

    So far the only really really annoying thing is if the connect lost and you look at notifications or enter any menu then the clock won't redraw even the clock parts. All I get is a tiny 24 hour clock which I can't read without glasses an "loading.." It should indicate the app and version so we can identify it also.

    Thanks

    ReplyDelete
  16. Pro tip: to use Canvas to generate a daily vibrating alert (for example at 8:37 to let me know break-time is almost over):
    1. Create a Countdown type layer
    2. Set the Countdown To date to the far future (e.g. Dec 31, 2020)
    3. Set the Countdown To time to "8:36" - NOT 8:37
    4. Set the Format to "%D" or "%d" (that's the "Days" or "Total Days" formats)
    5. Set the Vibrate Update check-box and choose the vibration pattern you want
    6. If you don't want the countdown to be visible, set the Background and Foreground to your chosen background color, and move the layer up in your layer list above all of the layers that you do want to display.

    ReplyDelete
  17. As far as I can see it would not be possible to change the display based on whether the pebble is charging or not, could this be added? Either way I'd like to be able to do for non-dynamic fields and definitely should be able to use layer expressions to decide whether to display a lay or not...

    ReplyDelete
  18. is there anyway to show current timezone for your location? I see an offset variable but it shows 0.0

    ReplyDelete
  19. For anyone interested, I created this conditional statement for a Dynamic, Phone State that hides the battery value unless it is under 35% and if its fully charged then the value will show "Charged" to let you know.

    {%B%#%B<35#Charged#%B=100}

    ReplyDelete
  20. Great app Steve - a possible bug and a suggested improvement though:

    - Exclude All-Day events doesn't seem to work. I always see all-day events appearing with a 00:00 time in Canvas that are shown as all-day events in the native calendar, regardless of this setting's value.

    - Switching from the Accessibility Service hack to the new Notification Listener in Android 4.3+ would hugely improve the Canvas Notification feature. At the moment it ignores the DND setting on the phone (e.g. during meetings and at night) and sends through unwanted 'permanent' notifications that are simply updated (e.g. 'XXX Connected') - neither of which occur using Pebble Notification Center which uses the new API. This would be the icing on the cake!

    ReplyDelete
  21. Hi Steve,
    Now can I use math operations to control dynamic layer size? I tried but without success... 50/100 or %n/100 work fine.
    Thanks.

    ReplyDelete
    Replies
    1. Correction: I'd like to use an inversion layer to highlight low Pebble battery level with local tone inversion.
      This {100#%B<30#0}/100 works for the phone battery as the dynamic size of the dynamic inverter layer, but how can I do the same for %n (Pebble battery level)? Pebble's battery is not listed in the Dynamic type of data, as far I understand.
      Thanks.

      Delete
  22. This comment has been removed by the author.

    ReplyDelete
  23. Please insert cmd in tasker RANDOM CANVAS Canvas App select random watchframe in Any time!!! Good idea??

    ReplyDelete
  24. I have had my Pebble now for about a year. Canvas is the best app I have ever installed on it. I love Canvas. I am having a problem with it now. This problem began at the same time the Screen Store was introduced. I am an avid Tasker User. With the older version, I would have Tasker call for a new watchface and it would load to my Pebble every time. Since the change, it only loads the watchface to the Pebble about 25% of the time. I created a workaround, but it is less than desirable. Tasker first loads the Canvas app on the Phone, it waits 40 seconds (This allows the watchfaces to load on the phone) and then closes the app. Then Tasker calls for the wachface and it loads about 80% of the time. Prior to my current workaround, I tried just adjusting the timeout on the Tasker Plug-in from 10 seconds to 10 minutes and it didn't make any difference. Is there something that I am overlooking? Maybe something I can change to get back the reliability that I had before? Thanks in advance for any information you can pass on to me.

    ReplyDelete
  25. It is possible to [indirectly] only display an image when charging the Pebble.

    Set the image to always display, but have it normally covered up by another Time/Date/Pebble status layer with no contents and a non-transparent background. I call this extra layer the "blinder".

    Then set the blinder layer to be dynamically sized in some direction and using the format "1/%o01". That is the letter o (Watch Battery Plugged In) followed by a zero and a one.
    Maths and conditionals aren't currently usable in this field, but this string parsing hack toggles the size between "1/001" and "1/101", effectively hiding or showing the blinder layer or the image below.



    One curious thing is that if you instead set the format to "1/%o00" (a zero instead of a one at the end), the blinder layer will disappear when plugging the Pebble in, but it won't reappear when unplugging it. Switching watchfaces brings shows the blinder again.
    This could be a division of zero issue which for some reason isn't triggered on the initial parsing of the format.

    This also works with "%O" (Watch Battery Charging) instead of "%o" (Watch Battery Plugged In). Once the watch has reached 100% and stayed there for a little while, the image will be hidden again.

    ReplyDelete
    Replies
    1. Thank you! Have been trying to figure out how to do this for days!

      Delete
  26. Hey Peter,

    Will it ever be possible to use conditionals in Countdown fields? I'd really like to use something like {%Dd%Hh#%D>0#%h:%M} so if an appointment is more than 1 day away, it shows number of days instead of hours and minutes.

    ReplyDelete
  27. I would like to be able to use conditional formatting on a Time content type so I can change the teens to a single line. I.e. change "thir teen" to "thirteen".

    ReplyDelete
  28. state: various information about your phone (battery level, WIFI status, ringer ... mobilesakku.blogspot.de

    ReplyDelete
  29. Conditions only work in the "dynamic layer"...
    Eample : {default#1<0#other#101=100#this}
    Is it possible to put conditions in the "countdown" or "Time/Date/Pebble status" or "text" layer ?
    This would translate, or not to display the values 0, etc.

    ReplyDelete
    Replies
    1. I would love to have that feature too, in order to calculate the progress of the day with [%h*60+%M/1440]. It would also be perfect if I were able to use that fraction in the dynamic sizing!!

      Delete
  30. I derail when I read the first sentence of the user guide. It says, "Before you can use Canvas in anger, you have to install the watch-app (.pbw) to your Pebble." Must I be angry to use Canvas? If not, what might be the correct word to replace "anger"?

    ReplyDelete
    Replies
    1. According to the interwebz, "it is generally used in British English to mean used for its intended purpose, or used for real rather than in tests". Apparently it was originally a military expression, where shots fired "in anger" were shots fired in actual combat rather than practice.



      Delete
  31. Recently, canvas stopped letting me change the image used by a layer. All previous faces with various images still work, but I can't select new photos from my album. Only change I can think of was a recent android OS update to 5.1.1
    Otherwise, awesome app.

    ReplyDelete
  32. I cant get any watch face to load.... I have reset / unloaded and re loaded canvas from my phone and from my watch. it still wont let me load anything either a premade face or one I have made... any suggestions?

    ReplyDelete
  33. How to make an HTML5 canvas automatically rezise to fit the window?
    javascript canvashtml canvas editor

    ReplyDelete
  34. This comment has been removed by the author.

    ReplyDelete
  35. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  36. This is the best blog to give guidance to the suers..
    user guide

    ReplyDelete
  37. I am trying to set up analogue face with a digital one in the middle between 3 and 9. But my issue is that i am trying to have the hands invert colour as they pass over the numbers. I have tried multiple inverted layers between in all manner of combinations but i cant get it to work. Any suggestions?

    ReplyDelete
  38. Thank you for a great post. I came across this in my search for ways of visualising the transformation steps, drivers and organisational benefits to Lean and Agile working practices. Your Transformation Canvas in the top of this post tells the story in a brilliant way and I'd much appreciate if you'd share your template with me! You can reach me at jesperlai (at) gmail.com. Many Thanks -

    this contact form

    ReplyDelete
  39. Hiya, I've used your app to create a watchface that I really like. Would there be any way to convert the file from Pbc to pbw so I can publish the face? I will give credit.

    ReplyDelete
  40. Hi, I am not able to access the screen store. Is there any issue with the server.
    Thanks

    ReplyDelete
  41. I can not access the screen market.
    I got a new phone and have my screen saved to google driver... But how do I import it to canvas? I can not use market as I can not see my own shared screens.

    ReplyDelete