pebble-scalable 1.5.1 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +37 -3
- package/dist.zip +0 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,9 +4,10 @@ Package aiming to make it easy to make scaling layouts for different display
|
|
|
4
4
|
sizes by defining their dimensions only once.
|
|
5
5
|
|
|
6
6
|
- [Setting up](#setting-up)
|
|
7
|
-
- [
|
|
7
|
+
- [Layout](#layout)
|
|
8
8
|
- [Centering](#centering)
|
|
9
9
|
- [Fonts](#fonts)
|
|
10
|
+
- [Images](#images)
|
|
10
11
|
|
|
11
12
|
See `include/pebble-scalable.h` for function documentation.
|
|
12
13
|
|
|
@@ -24,10 +25,15 @@ Add the includes at the top of your source.
|
|
|
24
25
|
#include <pebble-scalable/pebble-scalable.h>
|
|
25
26
|
```
|
|
26
27
|
|
|
27
|
-
##
|
|
28
|
+
## Layout
|
|
28
29
|
|
|
29
30
|
Get values for layout dimensions based on display size:
|
|
30
31
|
|
|
32
|
+
> To convert existing layouts, simply divide the raw coordinate by either the
|
|
33
|
+
> width or height of the preferred screen size to get a percentage.
|
|
34
|
+
> For example, a Y coordinate of 40px - 40 / 168 = 0.238 = 23.8%, so the correct
|
|
35
|
+
> call would be `scalable_y(235)`.
|
|
36
|
+
|
|
31
37
|
```c
|
|
32
38
|
// Get a percentage (thousands) of the display width and height
|
|
33
39
|
const int half_w = scalable_x(500);
|
|
@@ -41,6 +47,9 @@ If a single percentage isn't precise enough, use 'per platform' variants to
|
|
|
41
47
|
specify values up to 5% (50/1000 thousands) in precision for each platform
|
|
42
48
|
(order is 'regular' shape, then 'emery' shape):
|
|
43
49
|
|
|
50
|
+
> In actuality, thousandths values should allow per-pixel precision until a
|
|
51
|
+
> display shape is larger than 1000px in any direction.
|
|
52
|
+
|
|
44
53
|
```c
|
|
45
54
|
// Larger only on Emery (x/y: 10%, w/h per platform)
|
|
46
55
|
const GRect emery = scalable_grect_pp(
|
|
@@ -53,6 +62,11 @@ const int x = scalable_x_pp(110, 120);
|
|
|
53
62
|
const int y = scalable_y_pp(450, 480);
|
|
54
63
|
```
|
|
55
64
|
|
|
65
|
+
The library also exports constants:
|
|
66
|
+
|
|
67
|
+
* `PS_DISP_W` - current display width.
|
|
68
|
+
* `PS_DISP_H` - current display height.
|
|
69
|
+
|
|
56
70
|
## Centering
|
|
57
71
|
|
|
58
72
|
A GRect can be centered in either the X or Y axis, or both:
|
|
@@ -75,6 +89,10 @@ const GRect centered = scalable_center(r);
|
|
|
75
89
|
Use different fonts for different display sizes, based on a category of your
|
|
76
90
|
choosing. First, load the fonts, or use system fonts:
|
|
77
91
|
|
|
92
|
+
> For custom fonts, scaling up the raw font size by the corresponding increase
|
|
93
|
+
> in display size (such as 14% for basalt > emery) may not be enough.
|
|
94
|
+
> Experiment!
|
|
95
|
+
|
|
78
96
|
```c
|
|
79
97
|
// Load fonts to use in each case
|
|
80
98
|
static GFont s_gothic_14, s_gothic_18, s_gothic_24, s_gothic_28;
|
|
@@ -123,8 +141,24 @@ graphics_draw_text(
|
|
|
123
141
|
);
|
|
124
142
|
```
|
|
125
143
|
|
|
144
|
+
## Images
|
|
145
|
+
|
|
146
|
+
Images can be selected per-platform using the SDK's
|
|
147
|
+
[resource tagging](https://developer.rebble.io/guides/app-resources/platform-specific/)
|
|
148
|
+
system. From there, scalable layout functions can be used to set the position
|
|
149
|
+
and size. For example, `icon.png` and `icon~emery.png`.
|
|
150
|
+
|
|
151
|
+
```c
|
|
152
|
+
// Draw image centered at the bottom - image is 24x24px as a base size, so about 15% width
|
|
153
|
+
graphics_draw_bitmap_in_rect(
|
|
154
|
+
ctx,
|
|
155
|
+
s_icon_bitmap,
|
|
156
|
+
scalable_center_x(scalable_grect(0, 850, 150, 150))
|
|
157
|
+
);
|
|
158
|
+
```
|
|
159
|
+
|
|
126
160
|
## TODO
|
|
127
161
|
|
|
128
162
|
- [x] Support per-platform (per shape) values
|
|
129
|
-
- [
|
|
163
|
+
- [x] Solution for picking bitmaps (to work with their scalable GRects)
|
|
130
164
|
- [ ] Chalk? It's so different layouts might not be at all similar...
|
package/dist.zip
CHANGED
|
Binary file
|