pebble-scalable 1.3.0 → 1.5.0

package/README.md

@@ -1,7 +1,7 @@
 # pebble-scalable
 
 Package aiming to make it easy to make scaling layouts for different display
-sizes by defining their dimension only once.
+sizes by defining their dimensions only once.
 
 - [Setting up](#setting-up)
 - [Dimensions](#dimensions)
@@ -37,11 +37,20 @@ const int half_h = scalable_y(500);
 const GRect center_rect = scalable_grect(330, 330, 330, 330);
 ```
 
-If a percentage isn't precise enough, the x/y or w/h can be nudged by some pixels:
+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):
 
 ```c
-// A rect nudged by 5px in x and 2px in y
-const GRect precise = scalable_nudge_xy(scalable_grect(100, 100, 200, 200), 5, 2);
+// Larger only on Emery (x/y: 10%, w/h per platform)
+const GRect emery = scalable_grect_pp(
+  GRect(100, 100, 200, 200),
+  GRect(100, 100, 250, 250)
+);
+
+// Further to the right and down on Emery
+const int x = scalable_x_pp(110, 120);
+const int y = scalable_y_pp(450, 480);
 ```
 
 ## Centering
@@ -63,28 +72,39 @@ const GRect centered = scalable_center(r);
 
 ## Fonts
 
-Use different fonts for different display sizes, based on a category of 'small',
-'medium', or 'large'.
+Use different fonts for different display sizes, based on a category of your
+choosing. First, load the fonts, or use system fonts:
 
 ```c
 // Load fonts to use in each case
-static GFont s_gothic_18, s_gothic_24;
+static GFont s_gothic_14, s_gothic_18, s_gothic_24, s_gothic_28;
 
 // During init
+s_gothic_14 = fonts_get_system_font(FONT_KEY_GOTHIC_14);
 s_gothic_18 = fonts_get_system_font(FONT_KEY_GOTHIC_18);
 s_gothic_24 = fonts_get_system_font(FONT_KEY_GOTHIC_24);
+s_gothic_28 = fonts_get_system_font(FONT_KEY_GOTHIC_28);
 ```
 
-Specify which fonts to use for each display size:
+Next, define identifiers for each of your size categories:
 
 ```c
-// The 'small font' set ID
-#define FONT_ID_SMALL 0
+typedef enum {
+  MFS_Small = 0,
+  MFS_Medium,
+  MFS_Large
+} MyFontSizes;
+```
 
-...
+Now set which font to use per-platform shape for each category:
 
-// The small font - regular screens use Gothic 18, Chalk N/A Emery uses Gothic 24
-scalable_set_fonts(FONT_ID_SMALL, &s_gothic_18, NULL, &s_gothic_24);
+```c
+// The small font - regular screens use Gothic 14, Emery uses Gothic 18
+scalable_set_fonts(MFS_Small, &s_gothic_14, &s_gothic_18);
+
+// Same with larger categories
+scalable_set_fonts(MFS_Medium, &s_gothic_18, &s_gothic_24);
+scalable_set_fonts(MFS_Large, &s_gothic_24, &s_gothic_28);
 ```
 
 During layout or drawing, simply use the font by ID:
@@ -95,10 +115,16 @@ graphics_context_set_text_color(ctx, GColorBlack);
 graphics_draw_text(
   ctx,
   "This text should appear in the middle third on any platform or display size",
-  scalable_get_font(FONT_ID_SMALL),
+  scalable_get_font(MFS_Small),
   scalable_grect(0, 330, 1000, 330),
   GTextOverflowModeTrailingEllipsis,
   GTextAlignmentCenter,
   NULL
 );
 ```
+
+## TODO
+
+- [x] Support per-platform (per shape) values
+- [ ] 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,13 +1,16 @@
 {
   "name": "pebble-scalable",
   "author": "Chris Lewis",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "files": [
     "dist.zip"
   ],
   "keywords": [
     "pebble-package"
   ],
+  "scripts": {
+    "prepublish": "pebble clean && pebble build"
+  },
   "dependencies": {},
   "pebble": {
     "projectType": "package",
@@ -15,7 +18,6 @@
     "targetPlatforms": [
       "aplite",
       "basalt",
-      "chalk",
       "diorite",
       "emery",
       "flint"