pebble-scalable 1.5.0 → 1.6.0

package/README.md

@@ -4,9 +4,10 @@ Package aiming to make it easy to make scaling layouts for different display
 sizes by defining their dimensions only once.
 
 - [Setting up](#setting-up)
-- [Dimensions](#dimensions)
+- [Layout](#layout)
 - [Centering](#centering)
 - [Fonts](#fonts)
+- [Images](#images)
 
 See `include/pebble-scalable.h` for function documentation.
 
@@ -24,10 +25,15 @@ Add the includes at the top of your source.
 #include <pebble-scalable/pebble-scalable.h>
 ```
 
-## Dimensions
+## Layout
 
 Get values for layout dimensions based on display size:
 
+> To convert existing layouts, simply divide the raw coordinate by either the
+> width or height of the preferred screen size to get a percentage.
+> For example, a Y coordinate of 40px - 40 / 168 = 0.238 = 23.8%, so the correct
+> call would be `scalable_y(235)`.
+
 ```c
 // Get a percentage (thousands) of the display width and height
 const int half_w = scalable_x(500);
@@ -41,6 +47,9 @@ If a single percentage isn't precise enough, use 'per platform' variants to
 specify values up to 5% (50/1000 thousands) in precision for each platform
 (order is 'regular' shape, then 'emery' shape):
 
+> In actuality, thousandths values should allow per-pixel precision until a
+> display shape is larger than 1000px in any direction.
+
 ```c
 // Larger only on Emery (x/y: 10%, w/h per platform)
 const GRect emery = scalable_grect_pp(
@@ -53,6 +62,11 @@ const int x = scalable_x_pp(110, 120);
 const int y = scalable_y_pp(450, 480);
 ```
 
+The library also exports constants:
+
+* `PS_DISP_W` - current display width.
+* `PS_DISP_H` - current display height.
+
 ## Centering
 
 A GRect can be centered in either the X or Y axis, or both:
@@ -75,6 +89,10 @@ const GRect centered = scalable_center(r);
 Use different fonts for different display sizes, based on a category of your
 choosing. First, load the fonts, or use system fonts:
 
+> For custom fonts, scaling up the raw font size by the corresponding increase
+> in display size (such as 14% for basalt > emery) may not be enough.
+> Experiment!
+
 ```c
 // Load fonts to use in each case
 static GFont s_gothic_14, s_gothic_18, s_gothic_24, s_gothic_28;
@@ -123,8 +141,24 @@ graphics_draw_text(
 );
 ```
 
+## Images
+
+Images can be selected per-platform using the SDK's
+[resource tagging](https://developer.rebble.io/guides/app-resources/platform-specific/)
+system. From there, scalable layout functions can be used to set the position
+and size. For example, `icon.png` and `icon~emery.png`.
+
+```c
+// Draw image centered at the bottom - image is 24x24px as a base size, so about 15% width
+graphics_draw_bitmap_in_rect(
+  ctx,
+  s_icon_bitmap,
+  scalable_center_x(scalable_grect(0, 850, 150, 150))
+);
+```
+
 ## TODO
 
 - [x] Support per-platform (per shape) values
-- [ ] Solution for picking bitmaps (to work with their scalable GRects)
+- [x] Solution for picking bitmaps (to work with their scalable GRects)
 - [ ] Chalk? It's so different layouts might not be at all similar...

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pebble-scalable",
   "author": "Chris Lewis",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "files": [
     "dist.zip"
   ],
@@ -9,7 +9,7 @@
     "pebble-package"
   ],
   "scripts": {
-    "prepublish": "pebble clean && pebble build"
+    "prepublishOnly": "pebble clean && pebble build"
   },
   "dependencies": {},
   "pebble": {
@@ -18,6 +18,7 @@
     "targetPlatforms": [
       "aplite",
       "basalt",
+      "chalk",
       "diorite",
       "emery",
       "flint"