Add findFont function for Bangle.js 2, use in showPrompt/showMessage

Note: this breaks Bangle.js 1 E.showMessage for now (until we have findFonts)

Author: gfwilliams

boards/BANGLEJS2.py

@@ -69,6 +69,9 @@
      'DEFINES += -DESPR_NO_LINE_NUMBERS=1', # we execute mainly from flash, so line numbers can be worked out
      'INCLUDE += -I$(ROOT)/libs/banglejs -I$(ROOT)/libs/misc',
      'WRAPPERSOURCES += libs/banglejs/jswrap_bangle.c',
+     'WRAPPERSOURCES += libs/banglejs/jswrap_font_15.c',
+     'WRAPPERSOURCES += libs/banglejs/jswrap_font_19.c',
+     'WRAPPERSOURCES += libs/banglejs/jswrap_font_22.c',
      'WRAPPERSOURCES += libs/graphics/jswrap_font_6x15.c',
      'WRAPPERSOURCES += libs/graphics/jswrap_font_12x20.c',
      'SOURCES += libs/misc/nmea.c',

libs/banglejs/jswrap_font_15.c

@@ -0,0 +1,19 @@
+/*
+ * This file is part of Espruino, a JavaScript interpreter for Microcontrollers
+ *
+ * Copyright (C) 2023 Gordon Williams <gw@pur3.co.uk>
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * ----------------------------------------------------------------------------
+ * Generated by EspruinoWebTools/cli/fontconverter.js /home/gw/workspace/EspruinoCode/fonts/renaissance/files/renaissance_18_bold.pbff --range All --height 15 --shiftUp 7 --nudge --debug --spaceWidth 3 --opbfc 15
+ *
+ * Contains Custom Fonts
+ * ----------------------------------------------------------------------------
+ */
+
+#include "jsvar.h"
+
+JsVar *jswrap_graphics_setFont15(JsVar *parent, int scale);

libs/banglejs/jswrap_font_15.h

@@ -0,0 +1,19 @@
+/*
+ * This file is part of Espruino, a JavaScript interpreter for Microcontrollers
+ *
+ * Copyright (C) 2023 Gordon Williams <gw@pur3.co.uk>
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * ----------------------------------------------------------------------------
+ * Generated by EspruinoWebTools/cli/fontconverter.js /home/gw/workspace/EspruinoCode/fonts/renaissance/files/renaissance_24_bold.pbff --range All --height 19 --shiftUp 8 --nudge --debug --spaceWidth 3 --opbfc 19
+ *
+ * Contains Custom Fonts
+ * ----------------------------------------------------------------------------
+ */
+
+#include "jsvar.h"
+
+JsVar *jswrap_graphics_setFont19(JsVar *parent, int scale);

libs/banglejs/jswrap_font_19.c

@@ -0,0 +1,19 @@
+/*
+ * This file is part of Espruino, a JavaScript interpreter for Microcontrollers
+ *
+ * Copyright (C) 2023 Gordon Williams <gw@pur3.co.uk>
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * ----------------------------------------------------------------------------
+ * Generated by EspruinoWebTools/cli/fontconverter.js /home/gw/workspace/EspruinoCode/fonts/renaissance/files/renaissance_28.pbff --range All --height 22 --shiftUp 10 --nudge --debug --spaceWidth 4 --opbfc 22
+ *
+ * Contains Custom Fonts
+ * ----------------------------------------------------------------------------
+ */
+
+#include "jsvar.h"
+
+JsVar *jswrap_graphics_setFont22(JsVar *parent, int scale);

libs/banglejs/jswrap_font_19.h

@@ -15,6 +15,8 @@
  */
 #include "jswrap_graphics.h"
 #include "jswrap_math.h" // for jswrap_math_cos/sin
+#include "jswrap_string.h" // for jswrap_string_split
+#include "jswrap_array.h" // for jswrap_array_join
 #include "jsutils.h"
 #include "jsinteractive.h"
 
@@ -50,7 +52,11 @@
 #ifdef ESPR_LINE_FONTS
 #include "line_font.h"
 #endif
-
+#ifdef BANGLEJS2
+#include "jswrap_font_15.h"
+#include "jswrap_font_19.h"
+#include "jswrap_font_22.h"
+#endif
 
 #ifdef GRAPHICS_PALETTED_IMAGES
 #if defined(ESPR_GRAPHICS_12BIT)
@@ -2297,7 +2303,7 @@ int jswrap_graphics_getFontHeight(JsVar *parent) {
 
 typedef struct {
   int stringWidth;     // width in pixels
-  int stringHeight;    // height in pixels
+  int stringHeight, lineHeight;    // height in pixels
   bool unrenderableChars; // are any chars in this not renderable in the current font?
 #ifndef SAVE_ON_FLASH
   int imageCount;      // how many inline images are in this string?
@@ -2308,11 +2314,13 @@ typedef struct {
 /** Work out the width and height of a bit of text. If 'lineStartIndex' is -1 the whole string is used
  * otherwise *just* the line of text starting at that char index is used */
 void _jswrap_graphics_stringMetrics(JsGraphics *gfx, JsVar *var, int lineStartIndex, StringMetricsResult *result) {
+  assert(result);
   JsGraphicsFontInfo info;
   _jswrap_graphics_getFontInfo(gfx, &info);
   memset(result, 0, sizeof(StringMetricsResult));
 
   int fontHeight = _jswrap_graphics_getFontHeightInternal(gfx, &info);
+  result->lineHeight = fontHeight;
   JsVar *str = jsvAsString(var);
   JsvStringIterator it;
   jsvStringIteratorNewUTF8(&it, str, (size_t)((lineStartIndex<0)?0:lineStartIndex));
@@ -2585,6 +2593,148 @@ JsVar *jswrap_graphics_wrapString(JsVar *parent, JsVar *str, int maxWidth) {
   return lines;
 }
 
+
+/*JSON{
+  "type" : "method",
+  "class" : "Graphics",
+  "name" : "findFont",
+  "ifdef" : "BANGLEJS2",
+  "generate" : "jswrap_graphics_findFont",
+  "params" : [
+    ["text","JsVar","The text to render"],
+    ["options","JsVar","Options for finding the required font"]
+  ],
+  "return" : ["JsVar","An object containing info about the font"]
+}
+Works out which font to use, and sets the current font to it.
+
+Usage:
+
+```
+g.findFont("Hello World", {
+  w : 100,    // optional: width available (default = screen width)
+  h : 100,    // optional: height available (default = screen height)
+  min : 10,   // optional: min font height
+  max : 30,   // optional: max font height
+  wrap : true // optional: allow word wrap?
+  trim : true // optional: trim to the specified height, add '...'
+});
+```
+
+Returns:
+
+```
+{
+  text : "Hello\nWorld"
+  font : "..."
+}
+```
+*/
+
+
+#ifdef BANGLEJS2
+typedef struct {
+  const char *name;
+  uint8_t height;
+  JsVar*(*setFont)(JsVar *parent, int scale);
+} JswFindFontFont;
+
+JsVar *jswrap_graphics_setFont6x8(JsVar *parent, int scale) {
+  return jswrap_graphics_setFontSizeX(parent, 1+JSGRAPHICS_FONTSIZE_6X8, false);
+}
+JsVar *jswrap_graphics_setFont4x6(JsVar *parent, int scale) {
+  return jswrap_graphics_setFontSizeX(parent, 1+JSGRAPHICS_FONTSIZE_4X6, false);
+}
+
+
+JsVar *jswrap_graphics_findFont(JsVar *parent, JsVar *text, JsVar *options) {
+  if (!jsvIsString(text)) return 0;
+  JsGraphics gfx; if (!graphicsGetFromVar(&gfx, parent)) return 0;
+  int width = gfx.data.width, height = gfx.data.height;
+  int minHeight = 4, maxHeight = 100;
+  bool wrap = false, trim = false;
+  JsVar *result = jsvNewObject();
+  if (!result) return 0;
+
+  jsvConfigObject configs[] = {
+          {"w", JSV_INTEGER, &width},
+          {"h", JSV_INTEGER, &height},
+          {"min", JSV_INTEGER, &minHeight},
+          {"max", JSV_INTEGER, &maxHeight},
+          {"wrap", JSV_BOOLEAN, &wrap},
+          {"trim", JSV_BOOLEAN, &trim},
+  };
+  if (!jsvReadConfigObject(options, configs, sizeof(configs) / sizeof(jsvConfigObject))) {
+    return 0;
+  }
+
+  const int FONTS = 5;
+  JswFindFontFont FONT[5] = {
+    {"22", 22, jswrap_graphics_setFont22},
+    {"19", 19, jswrap_graphics_setFont19},
+    {"15", 15, jswrap_graphics_setFont15},
+    {"6x8", 8, jswrap_graphics_setFont6x8},
+    {"4x6", 6, jswrap_graphics_setFont4x6}
+  };
+  int fontIdx = 0;
+  // check max font size
+  while (fontIdx<FONTS-1 && FONT[fontIdx].height>maxHeight)
+    fontIdx++;
+  // Run through fonts, big->small, to find one that fits
+  StringMetricsResult stringMetrics;
+  JsVar *finalText = jsvLockAgain(text);
+  JsVar *finalLines = NULL;
+  JsVar *newline = jsvNewFromString("\n");
+  while (fontIdx<FONTS-1) {
+    jsvUnLock(FONT[fontIdx].setFont(parent,1));
+    graphicsGetFromVar(&gfx, parent);
+    if (wrap) {
+      jsvUnLock2(finalText, finalLines);
+      finalLines= jswrap_graphics_wrapString(parent, text, width);
+      finalText = jsvArrayJoin(finalLines,newline,true);
+      _jswrap_graphics_stringMetrics(&gfx, finalText, -1, &stringMetrics);
+    } else
+      _jswrap_graphics_stringMetrics(&gfx, text, -1, &stringMetrics);
+    if (((stringMetrics.stringWidth <= width) && (stringMetrics.stringHeight <= height)) || // all good!
+        fontIdx==FONTS-1 || // no more fonts
+        FONT[fontIdx+1].height<minHeight // next font is too small
+        ) break;
+    fontIdx++;
+  }
+  const char *fontName = FONT[fontIdx].name;
+  // if there were unrenderable characters, use the international font instead if we have one
+  if (stringMetrics.unrenderableChars) {
+    JsVar *intlFont = jspGetNamedField(parent, "setFontIntl", false);
+    if (intlFont) {
+      fontName = "Intl";
+      jsvUnLock(jspExecuteFunction(intlFont, parent, 0, NULL));
+      graphicsGetFromVar(&gfx, parent);
+      _jswrap_graphics_stringMetrics(&gfx, text, -1, &stringMetrics);
+    }
+  }
+  if (trim && stringMetrics.stringHeight > height) { // do we have to trim these lines to length?
+    JsVar *lines = jsvNewFromInteger(height / stringMetrics.lineHeight);
+    if (!finalLines)
+      finalLines = jswrap_string_split(finalText, newline);
+    JsVar *croppedArr = jswrap_array_slice(finalLines, 0, lines);
+    jsvUnLock2(finalText, lines);
+    finalText = jsvArrayJoin(croppedArr,newline,true);
+    jsvUnLock(croppedArr);
+    jsvAppendString(finalText, "..."); // Add ... to the end (TODO: check if room?)
+    _jswrap_graphics_stringMetrics(&gfx, finalText, -1, &stringMetrics); // work out string size again
+  }
+  // TODO: trim width if not wrapping?
+  jsvUnLock2(newline, finalLines);
+  jsvObjectSetChildAndUnLock(result, "text", finalText);
+  jsvObjectSetChildAndUnLock(result, "font", jsvNewFromString(fontName));
+  jsvObjectSetChildAndUnLock(result, "w", jsvNewFromInteger(stringMetrics.stringWidth));
+  jsvObjectSetChildAndUnLock(result, "h", jsvNewFromInteger(stringMetrics.stringHeight));
+
+  return result;
+}
+#endif
+
+
 /*JSON{
   "type" : "method",
   "class" : "Graphics",

libs/banglejs/jswrap_font_22.c

@@ -58,6 +58,7 @@ JsVar *jswrap_graphics_setClipRect(JsVar *parent, int x1, int y1, int x2, int y2
 JsVar *jswrap_graphics_setFontSizeX(JsVar *parent, int size, bool isVectorFont);
 JsVar *jswrap_graphics_setFontCustom(JsVar *parent, JsVar *bitmap, int firstChar, JsVar *width, int height);
 JsVar *jswrap_graphics_setFontPBF(JsVar *parent, JsVar *file, int scale);
+JsVar *jswrap_graphics_findFont(JsVar *parent, JsVar *text, JsVar *options);
 JsVar *jswrap_graphics_setFontAlign(JsVar *parent, int x, int y, int r);
 JsVar *jswrap_graphics_setFont(JsVar *parent, JsVar *name, int size);
 JsVar *jswrap_graphics_getFont(JsVar *parent);

libs/banglejs/jswrap_font_22.h

@@ -1,24 +1,25 @@
-(function(msg,options) {
+(function(message,options) {
   if ("string" == typeof options)
     options = { title : options };
   options = options||{};
-  g.reset().clearRect(Bangle.appRect); // clear screen
-  g.setFont("6x8",(g.getWidth()>128)?2:1).setFontAlign(0,-1);
-  var Y = Bangle.appRect.y;
-  var W = g.getWidth(), H = g.getHeight()-Y, FH=g.getFontHeight();
-  var titleLines = g.wrapString(options.title, W-2);
-  var msgLines = g.wrapString(msg||"", W-2);
-  var y = Y + (H + (titleLines.length - msgLines.length)*FH )/2;
+  var R = Bangle.appRect, Y = R.y, W = R.w;
+  g.reset().clearRect(R).setFontAlign(0,0); // clear screen
+  var title = g.findFont(options.title||"", {w:W-2,wrap:1,max:24});
+  if (title.text)
+    g.setColor(g.theme.fgH).setBgColor(g.theme.bgH).
+      clearRect(0,Y,W-1,Y+4+title.h).
+      drawString(title.text,W/2,Y+4+title.h/2);
+  Y += title.h+4;
+  var H = R.y2-Y;
   if (options.img) {
     var im = g.imageMetrics(options.img);
-    g.drawImage(options.img,(W-im.width)/2,y - im.height/2);
-    y += 4+im.height/2;
+    g.drawImage(options.img,(W-im.width)/2, Y + 6);
+    H -= im.height;
+    Y += im.height;
   }
-  g.drawString(msgLines.join("\n"),W/2,y);  
-  if (options.title)
-    g.setColor(g.theme.fgH).setBgColor(g.theme.bgH).
-      clearRect(0,Y,W-1,Y+4+titleLines.length*FH).
-      drawString(titleLines.join("\n"),W/2,Y+2);
+  var msg = g.findFont(message, {w:W-2,h:H,wrap:1,trim:1,min:16});
+  g.setColor(g.theme.fg).setBgColor(g.theme.bg).
+    drawString(msg.text,W/2,Y+H/2);
   g.flip(); // force immediate show of message
-  Bangle.setLCDPower(1); // ensure screen is on  
+  Bangle.setLCDPower(1); // ensure screen is on
 })