Update README and examples

sidoh · Nov 14, 2019 · b37fd04 · b37fd04
1 parent 78a18f8
commit b37fd04
Show file tree

Hide file tree

Showing 3 changed files with 182 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ Template-oriented driver for e-paper displays using Arduino.  Define a layout wi
 
 ## Demo
 
-[<img src="https://i.imgur.com/Y0VtqgG.gif" width="400" />](https://youtu.be/fBfWT8LcDsM)
+[<img src="https://imgur.com/RhSOGSt.gif" width="400" />](https://youtu.be/Vg_ctuM1Ppc)
 
 ## Requirements
 
@@ -17,6 +17,7 @@ Template-oriented driver for e-paper displays using Arduino.  Define a layout wi
    1. With PlatformIO: for example `pio run -e esp32 -t upload`.
    1. Use a pre-compiled binary from the [releases page](https://github.com/sidoh/epaper_templates/releases).
 1. Setup WiFi.  A setup AP will appear named `epaper_XXXXXX`.  The default password is **waveshare**.
+1. Visit the Web UI to configure further.
 
 ## Variables
 
@@ -25,7 +26,7 @@ Displays are made dynamic by binding _variables_ to certain regions.  When varia
 #### REST API
 
 ```
-$ curl -v -X PUT -H'Content-Type: application/json' -d '{"variable_name":"variable_value"}' http://epaper-display/variables
+$ curl -v -X PUT -H'Content-Type: application/json' -d '{"variable_name":"variable_value"}' http://epaper-display/api/v1/variables
 ```
 
 #### MQTT
@@ -38,7 +39,7 @@ $ curl -v -X PUT -H'Content-Type: application/json' -d '{
   "mqtt_username": "sidoh",
   "mqtt_password": "hunter2",
   "mqtt_variables_topic_pattern": "template-displays/display1/:variable_name"
-}' http://epaper-display/settings
+}' http://epaper-display/api/v1/settings
 ```
 
 You can then publish messages to, for example `template-displays/display1/variable_name` to update the value of the variable `variable_name`.
@@ -159,15 +160,15 @@ Text can be defined statically, or using a variable.  Examples of each:
 
 ### Bitmaps
 
-Bitmaps are in a special compacted format.  [Here is a ruby script](https://gist.github.com/sidoh/41a06173f1e4714cf573de1d05f1651e#file-png_to_bitfield-rb) that converts a PNG to the bitfield format.
+Bitmaps are in a simple compacted format (where each pixel is a single bit).  You can use the Web UI to convert, edit, and resize existing images.  If you prefer to use the API, or want to do this in patch, [here is a ruby script](https://gist.github.com/sidoh/41a06173f1e4714cf573de1d05f1651e#file-png_to_bitfield-rb) that converts a PNG to the bitfield format.
 
 They are referenced via filenames, and can be managed through the REST API:
 
 ```
-$ curl -X POST -F 'my-bitmap.bin=@path/to/bitmap.bin' http://epaper-display/bitmaps
-$ curl -v http://epaper-display/bitmaps
+$ curl -X POST -F 'my-bitmap.bin=@path/to/bitmap.bin' http://epaper-display/api/v1/bitmaps
+$ curl -v http://epaper-display/api/v1/bitmaps
 [{"name":"/b/bitmap.bin","size":512}]
-$ curl -X DELETE http://epaper-display/bitmaps/bitmap.bin
+$ curl -X DELETE http://epaper-display/api/v1/bitmaps/bitmap.bin
 ```
 
 Example:
@@ -203,6 +204,54 @@ Example:
 }
 ```
 
+### Rectangles
+
+Rectangles of static width can be specified like so:
+
+```json
+{
+  "rectangles": [
+    {
+      "style": "outline",
+      "x": 50,
+      "y": 50,
+      "height": {
+        "static": 50
+      },
+      "width": {
+        "static": 50
+      },
+      "color": "black"
+    }
+  ]
+}
+```
+
+Rectangles can also have a dynamic dimension (rectangles with both dimensions being dynamic are currently not supported).  For example:
+
+```json
+{
+  "rectangles": [
+    {
+      "style": "filled",
+      "x": 51,
+      "y": 51,
+      "height": {
+        "static": 488
+      },
+      "width": {
+        "max": 48,
+        "variable": "rectangle-width",
+        "variable_mode": "percent"
+      },
+      "color": "black"
+    }
+  ]
+}
+```
+
+When `variable_mode` is `percent`, you must specify a `max` as well.  The dimension of the rectangle will then be set to the percent of the specified variable (for example, a value of 50 would mean the rectangle would have half of its dimension).
+
 ### Examples
 
 The [examples directory][examples] has a few sample templates.
@@ -212,31 +261,32 @@ The [examples directory][examples] has a few sample templates.
 Templates can be managed via the REST API:
 
 ```
-$ curl -X POST -F 'image=@data/path/to/template.json' http://epaper-display/templates
-$ curl http://epaper-display/templates
+$ curl -X POST -F 'image=@data/path/to/template.json' http://epaper-display/api/v1/templates
+$ curl http://epaper-display/api/v1/templates
 [{"name":"/t/template.json","size":3527}]
-$ curl -X DELETE http://epaper-display/templates/template.json
+$ curl -X DELETE http://epaper-display/api/v1/templates/template.json
 ```
 
 ### Selecting a template
 
 ```
 $ curl -X PUT -H'Content-Type:application/json' \
   -d '{"template_path":"/templates/template.json"}' \
-  http://epaper-display/settings
+  http://epaper-display/api/v1/settings
 ```
 
 ## REST API
 
 The following RESTful routes are available:
 
-1. `/variables` - GET, PUT.
-1. `/templates` - GET, POST.
-1. `/templates/:template_name` - GET, DELETE, PUT
-1. `/bitmaps` - GET, POST.
-1. `/bitmaps/:bitmap_name` - GET, DELETE.
-1. `/settings` - GET, PUT.
-1. `/about` - GET.
+1. `/api/v1/variables` - GET, PUT.
+1. `/api/v1/templates` - GET, POST.
+1. `/api/v1/templates/:template_name` - GET, DELETE, PUT
+1. `/api/v1/bitmaps` - GET, POST.
+1. `/api/v1/bitmaps/:bitmap_name` - GET, DELETE.
+1. `/api/v1/settings` - GET, PUT.
+1. `/api/v1/about` - GET.
+1. `/firmware` - POST.
 1. `/` - GET.
 
 [info-license]:   https://github.com/sidoh/epaper_templates/blob/master/LICENSE

diff --git a/examples/alarm_clock/alarm_clock.json b/examples/alarm_clock/alarm_clock.json
@@ -0,0 +1,114 @@
+{
+  "rotation": 1,
+  "lines": [
+    {
+      "x1": 0,
+      "y1": 55,
+      "x2": 300,
+      "y2": 55
+    },
+    {
+      "x1": 180,
+      "y1": 0,
+      "x2": 180,
+      "y2": 55
+    }
+  ],
+  "formatters": { },
+  "text": [
+    {
+      "x": 0,
+      "y": 50,
+      "font": "FreeSans18pt7b",
+      "font_size": 2,
+      "variable": "timestamp",
+      "formatter": "time",
+      "args": {
+        "timezone": "PT",
+        "format": "%H:%M"
+      }
+    },
+    {
+      "x": 185,
+      "y": 18,
+      "font": "FreeSansBold9pt7b",
+      "variable": "timestamp",
+      "formatter": "time",
+      "update_rect": "datetime",
+      "args": {
+        "timezone": "PT",
+        "format": "%A"
+      }
+    },
+    {
+      "x": 185,
+      "y": 45,
+      "font": "FreeSans9pt7b",
+      "variable": "timestamp",
+      "formatter": "time",
+      "update_rect": "datetime",
+      "args": {
+        "timezone": "PT",
+        "format": "%m/%d/%Y"
+      }
+    },
+    {
+      "x": 5,
+      "y": 72,
+      "font": "FreeSansBold9pt7b",
+      "static": "Sleep"
+    },
+    {
+      "x": "65",
+      "y": 72,
+      "font": "FreeSans9pt7b",
+      "variable": "lights-out-time",
+      "formatter": "time",
+      "args": {
+        "timezone": "PT",
+        "format": "%H:%M"
+      }
+    },
+    {
+      "x": 115,
+      "y": 72,
+      "font": "FreeSansBold9pt7b",
+      "static": "|"
+    },
+    {
+      "x": 120,
+      "y": 72,
+      "font": "FreeSans9pt7b",
+      "variable": "lights-out-time-relative"
+    }
+  ],
+  "bitmaps": [],
+  "rectangles": [
+    {
+      "style": "filled",
+      "x": 6,
+      "y": 80,
+      "height": {
+        "static": 40
+      },
+      "width": {
+        "max": 280,
+        "variable": "sleep-time-percent",
+        "variable_mode": "percent"
+      },
+      "color": "black"
+    },
+    {
+      "style": "outline",
+      "x": 6,
+      "y": 79,
+      "height": {
+        "static": 42
+      },
+      "width": {
+        "static": 282
+      },
+      "color": "black"
+    }
+  ]
+}
diff --git a/examples/alarm_clock/sample.jpg b/examples/alarm_clock/sample.jpg