Merge pull request espruino#2977 from glemco/cards

Add loyalty cards app

apps/android/ChangeLog

@@ -31,3 +31,4 @@
 0.30: Send firmware and hardware versions on connection
       Allow alarm enable/disable
 0.31: Implement API for activity fetching
+0.32: Added support for loyalty cards from gadgetbridge

apps/android/boot.js

@@ -236,6 +236,11 @@
           event.t="remove";
         }
         require("messages").pushMessage(event);
+      },
+      "cards" : function() {
+        // we receive all, just override what we have
+        if (Array.isArray(event.d))
+          require("Storage").writeJSON("android.cards.json", event.d);
       }
     };
     var h = HANDLERS[event.t];

apps/android/metadata.json

@@ -2,7 +2,7 @@
   "id": "android",
   "name": "Android Integration",
   "shortName": "Android",
-  "version": "0.31",
+  "version": "0.32",
   "description": "Display notifications/music/etc sent from the Gadgetbridge app on Android. This replaces the old 'Gadgetbridge' Bangle.js widget.",
   "icon": "app.png",
   "tags": "tool,system,messages,notifications,gadgetbridge",
@@ -15,6 +15,6 @@
     {"name":"android.img","url":"app-icon.js","evaluate":true},
     {"name":"android.boot.js","url":"boot.js"}
   ],
-  "data": [{"name":"android.settings.json"}, {"name":"android.calendar.json"}],
+  "data": [{"name":"android.settings.json"}, {"name":"android.calendar.json"}, {"name":"android.cards.json"}],
   "sortorder": -8
 }

apps/cards/Barcode.js

@@ -0,0 +1,35 @@
+/*
+ * JS source adapted from https://github.com/lindell/JsBarcode
+ *
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2016 Johan Lindell ([email protected])
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+class Barcode{
+	constructor(data, options){
+		this.data = data;
+		this.text = options.text || data;
+		this.options = options;
+	}
+}
+
+module.exports = Barcode;

apps/cards/ChangeLog

@@ -0,0 +1 @@
+0.01: Simple app to display loyalty cards

apps/cards/README.md

@@ -0,0 +1,54 @@
+# Cards
+
+Simple app to display loyalty cards synced from Catima through GadgetBridge.
+The app can display the cards' info (balance, expiration, note, etc.) and tapping on the appropriate field will display the code, if the type is supported.
+
+To come back to the visualization of the card's details from the code view, simply press the button.
+
+Beware that the small screen of the Banglejs 2 cannot render properly complex barcodes (in fact the resolution is very limited to render most barcodes).
+
+### Supported codes types
+
+* `CODE_39`
+* `CODABAR`
+* `QR_CODE`
+
+### Disclaimer
+
+This app is a proof of concept, many codes are too complex to be rendered by the bangle's screen or hardware (at least with the current logic), keep that in mind.
+
+### How to sync
+
+_WIP: we currently cannot synchronize cards, a PR is under review in GadgetBridge repo, soon we will see support on nightly builds_
+
+You can test it by sending on your bangle a file like this:
+
+_android.cards.json_
+
+```json
+[
+  {
+    "id": 1,
+    "name": "First card",
+    "value": "01234",
+    "note": "Some stuff",
+    "type": "CODE_39",
+    "balance": "15 EUR",
+    "expiration": "1691102081"
+  },
+  {
+    "id": 2,
+    "name": "Second card",
+    "value": "Hello world",
+    "note": "This is a qr generated on the bangle!",
+    "type": "QR_CODE",
+    "balance": "2 P"
+  }
+]
+```
+
+### Credits
+
+Barcode generation adapted from [lindell/JsBarcode](https://github.com/lindell/JsBarcode)
+
+QR code generation adapted from [ricmoo/QRCode](https://github.com/ricmoo/QRCode)

apps/cards/app-icon.js

@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEwxH+AH4A/AH4A/AH4AYoIAjF/4v/F/4v/F/4v/FAdNAAsoADgv/F/4v/F/4vqu4AjF/4v/F/4v6poAjF/4AfFAYAGF/4v/F/4v/F/4v/F94A/AH4A/AH4A/ABo"))

apps/cards/app.js

@@ -0,0 +1,210 @@
+/* CARDS is a list of:
+  {id:int,
+    name,
+    value,
+    type,
+    expiration,
+    color,
+    balance,
+    note,
+    ...
+  }
+*/
+
+Bangle.loadWidgets();
+Bangle.drawWidgets();
+
+//may make it configurable in the future
+const WHITE=-1
+const BLACK=0
+
+var FILE = "android.cards.json";
+
+var Locale = require("locale");
+
+var fontSmall = "6x8";
+var fontMedium = g.getFonts().includes("6x15")?"6x15":"6x8:2";
+var fontBig = g.getFonts().includes("12x20")?"12x20":"6x8:2";
+var fontLarge = g.getFonts().includes("6x15")?"6x15:2":"6x8:4";
+
+var CARDS = require("Storage").readJSON("android.cards.json",true)||[];
+var settings = require("Storage").readJSON("cards.settings.json",true)||{};
+
+function getDate(timestamp) {
+  return new Date(timestamp*1000);
+}
+function formatDay(date) {
+  let formattedDate = Locale.dow(date,1) + " " + Locale.date(date).replace(/\d\d\d\d/,"");
+  if (!settings.useToday) {
+    return formattedDate;
+  }
+  const today = new Date(Date.now());
+  if (date.getDay() == today.getDay() && date.getMonth() == today.getMonth())
+     return /*LANG*/"Today ";
+  else {
+    const tomorrow = new Date(Date.now() + 86400 * 1000);
+    if (date.getDay() == tomorrow.getDay() && date.getMonth() == tomorrow.getMonth()) {
+       return /*LANG*/"Tomorrow ";
+    }
+    return formattedDate;
+  }
+}
+
+function getColor(intColor) {
+  return "#"+(0x1000000+Number(intColor)).toString(16).padStart(6,"0");
+}
+function isLight(color) {
+  var r = +("0x"+color.slice(1,3));
+  var g = +("0x"+color.slice(3,5));
+  var b = +("0x"+color.slice(5,7));
+  var threshold = 0x88 * 3;
+  return (r+g+b) > threshold;
+}
+
+function printSquareCode(binary, size) {
+  var padding = 5;
+  var ratio = (g.getWidth()-(2*padding))/size;
+  for (var y = 0; y < size; y++) {
+    for (var x = 0; x < size; x++) {
+      if (binary[x + y * size]) {
+        g.setColor(BLACK).fillRect({x:x*ratio+padding, y:y*ratio+padding, w:ratio, h:ratio});
+      } else {
+        g.setColor(WHITE).fillRect({x:x*ratio+padding, y:y*ratio+padding, w:ratio, h:ratio});
+      }
+    }
+  }
+}
+function printLinearCode(binary) {
+  var yFrom = 15;
+  var yTo = 28;
+  var width = g.getWidth()/binary.length;
+  for(var b = 0; b < binary.length; b++){
+    var x = b * width;
+    if(binary[b] === "1"){
+      g.setColor(BLACK).fillRect({x:x, y:yFrom, w:width, h:g.getHeight() - (yTo+yFrom)});
+    }
+    else if(binary[b]){
+      g.setColor(WHITE).fillRect({x:x, y:yFrom, w:width, h:g.getHeight() - (yTo+yFrom)});
+    }
+  }
+}
+
+function showCode(card) {
+  E.showScroller();
+  // keeping it on rising edge would come back twice..
+  setWatch(()=>showCard(card), BTN, {edge:"falling"});
+  // theme independent
+  g.setColor(WHITE).fillRect(0, 0, g.getWidth(), g.getHeight());
+  switch (card.type) {
+    case "QR_CODE": {
+      const getBinaryQR = require("cards.qrcode.js");
+      let code = getBinaryQR(card.value);
+      printSquareCode(code.data, code.size);
+      break;
+    }
+    case "CODE_39": {
+      g.setFont("Vector:20");
+      g.setFontAlign(0,1).setColor(BLACK);
+      g.drawString(card.value, g.getWidth()/2, g.getHeight());
+      const CODE39 = require("cards.code39.js");
+      let code = new CODE39(card.value, {});
+      printLinearCode(code.encode().data);
+      break;
+    }
+    case "CODABAR": {
+      g.setFont("Vector:20");
+      g.setFontAlign(0,1).setColor(BLACK);
+      g.drawString(card.value, g.getWidth()/2, g.getHeight());
+      const codabar = require("cards.codabar.js");
+      let code = new codabar(card.value, {});
+      printLinearCode(code.encode().data);
+      break;
+    }
+    default:
+      g.clear(true);
+      g.setFont("Vector:30");
+      g.setFontAlign(0,0);
+      g.drawString(card.value, g.getWidth()/2, g.getHeight()/2);
+  }
+}
+
+function showCard(card) {
+  var lines = [];
+  var bodyFont = fontBig;
+  if(!card) return;
+  g.setFont(bodyFont);
+  //var lines = [];
+  if (card.name) lines = g.wrapString(card.name, g.getWidth()-10);
+  var titleCnt = lines.length;
+  var start = getDate(card.expiration);
+  var includeDay = true;
+  lines = lines.concat("", /*LANG*/"View code");
+  var valueLine = lines.length - 1;
+  if (card.expiration)
+    lines = lines.concat("",/*LANG*/"Expires"+": ", g.wrapString(formatDay(getDate(card.expiration)), g.getWidth()-10));
+  if(card.balance)
+    lines = lines.concat("",/*LANG*/"Balance"+": ", g.wrapString(card.balance, g.getWidth()-10));
+  if(card.note && card.note.trim())
+    lines = lines.concat("",g.wrapString(card.note, g.getWidth()-10));
+  lines = lines.concat("",/*LANG*/"< Back");
+  var titleBgColor = card.color ? getColor(card.color) : g.theme.bg2;
+  var titleColor = g.theme.fg2;
+  if (card.color)
+    titleColor = isLight(titleBgColor) ? BLACK : WHITE;
+  E.showScroller({
+    h : g.getFontHeight(), // height of each menu item in pixels
+    c : lines.length, // number of menu items
+    // a function to draw a menu item
+    draw : function(idx, r) {
+      // FIXME: in 2v13 onwards, clearRect(r) will work fine. There's a bug in 2v12
+      g.setBgColor(idx<titleCnt ? titleBgColor : g.theme.bg).
+        setColor(idx<titleCnt ? titleColor : g.theme.fg).
+        clearRect(r.x,r.y,r.x+r.w, r.y+r.h);
+      g.setFont(bodyFont).drawString(lines[idx], r.x, r.y);
+    }, select : function(idx) {
+      if (idx>=lines.length-2)
+        showList();
+      else if (idx==valueLine)
+        showCode(card);
+    },
+    back : () => showList()
+  });
+}
+
+// https://github.com/metafloor/bwip-js
+// https://github.com/lindell/JsBarcode
+
+function showList() {
+  if(CARDS.length == 0) {
+    E.showMessage(/*LANG*/"No cards");
+    return;
+  }
+  E.showScroller({
+    h : 52,
+    c : Math.max(CARDS.length,3), // workaround for 2v10.219 firmware (min 3 not needed for 2v11)
+    draw : function(idx, r) {"ram"
+      var card = CARDS[idx];
+      g.setColor(g.theme.fg);
+      g.clearRect(r.x,r.y,r.x+r.w, r.y+r.h);
+      if (!card) return;
+      var isPast = false;
+      var x = r.x+2, name = card.name;
+      var body = card.expiration ? formatDay(getDate(card.expiration)) : "";
+      if (card.balance) body += "\n" + card.balance;
+      if (name) g.setFontAlign(-1,-1).setFont(fontBig)
+        .setColor(isPast ? "#888" : g.theme.fg).drawString(name, x+4,r.y+2);
+      if (body) {
+        g.setFontAlign(-1,-1).setFont(fontMedium).setColor(isPast ? "#888" : g.theme.fg);
+        g.drawString(body, x+10,r.y+20);
+      }
+      g.setColor("#888").fillRect(r.x,r.y+r.h-1,r.x+r.w-1,r.y+r.h-1); // dividing line between items
+      if(card.color) {
+        g.setColor(getColor(card.color));
+        g.fillRect(r.x,r.y+4,r.x+3, r.y+r.h-4);
+      }
+    },
+    select : idx => showCard(CARDS[idx]),
+    back : () => load()
+  });
+}
+showList();