From c99d91195bfe252271b53a4d3d89fdb417c6fb0e Mon Sep 17 00:00:00 2001
From: Erik Corry <erik@toit.io>
Date: Tue, 19 Dec 2023 15:10:24 +0100
Subject: [PATCH 1/8] Allow --text on Labels instead of --label.

---
 src/element.toit                              | 41 +++++++++++--------
 tests/bitmap-visualized.toit                  |  2 +-
 tests/drop-shadow-gray-window-visualized.toit |  2 +-
 tests/drop-shadow-window-visualized.toit      |  2 +-
 tests/gray-scale-visualized.toit              |  6 +--
 tests/mixed-text-rotated-visualized.toit      |  4 +-
 tests/mixed-text-visualized.toit              |  4 +-
 tests/rounded-gray-window-visualized.toit     |  2 +-
 tests/rounded-huge-window-visualized.toit     |  2 +-
 tests/rounded-several-window-visualized.toit  |  2 +-
 ...rounded-three-color-window-visualized.toit |  2 +-
 .../rounded-two-color-window-visualized.toit  |  2 +-
 tests/rounded-window-visualized.toit          |  2 +-
 tests/simple-several-window-visualized.toit   |  2 +-
 .../simple-three-color-window-visualized.toit |  2 +-
 tests/simple-two-color-window-visualized.toit |  2 +-
 tests/text-visualized.toit                    |  6 +--
 tests/true-color-portrait-visualized.toit     |  6 +--
 18 files changed, 50 insertions(+), 41 deletions(-)

diff --git a/src/element.toit b/src/element.toit
index 9ec32ca..835692d 100644
--- a/src/element.toit
+++ b/src/element.toit
@@ -326,7 +326,7 @@ Like other elements it can have a background, but it is not intended to have
 */
 class Label extends Element implements ColoredElement:
   color_/int := ?
-  label_/string := ?
+  text_/string := ?
   alignment_/int := ?
   orientation_/int := ?
   font_/Font? := ?
@@ -347,7 +347,9 @@ class Label extends Element implements ColoredElement:
     else if key == "alignment":
       alignment = value
     else if key == "label":
-      label = value
+      text = value
+    else if key == "text":
+      text = value
     else if key == "icon":
       icon = value
     else:
@@ -370,7 +372,7 @@ class Label extends Element implements ColoredElement:
 
   icon= value/Icon -> none:
     font = value.font_
-    label = value.stringify
+    text = value.stringify
 
   /**
   Constructs a Label.
@@ -380,9 +382,11 @@ class Label extends Element implements ColoredElement:
   The $alignment is one of $ALIGN-LEFT, $ALIGN-CENTER, or $ALIGN-RIGHT.
   The $orientation is one of $ORIENTATION-0, $ORIENTATION-90, $ORIENTATION-180,
     or $ORIENTATION-270.
+  The $label argument is equivalent to the $text argument.  The $text
+    argument is preferred.
   The $color, $font, $orientation, and $alignment can be set using styles
-    instead of here in the constructor.  The label (text) can be set and
-    changed later with the label setter.  Like any change of appearance
+    instead of here in the constructor.  The $text can be set and
+    changed later with the text setter.  Like any change of appearance
     in an element, it doesn't become visible until the $PixelDisplay.draw
     method is called.
   See $Element.constructor for the other arguments.
@@ -394,13 +398,15 @@ class Label extends Element implements ColoredElement:
       --classes/List?=null
       --id/string?=null
       --color/int=0
-      --label/string=""
+      --label/string?=null
+      --text/string?=null
       --font/Font?=null
       --icon/Icon?=null
       --orientation/int=ORIENTATION-0
       --alignment/int=ALIGN-LEFT:
     color_ = color
-    label_ = label
+    if label and text: throw "INVALID_ARGUMENT"
+    text_ = text or label or ""
     alignment_ = alignment
     orientation_ = orientation
     font_ = font
@@ -419,10 +425,10 @@ class Label extends Element implements ColoredElement:
   */
   xywh_ [block]:
     if not left_:
-      extent/List := font_.text-extent label_
+      extent/List := font_.text-extent text_
       displacement := 0
       if alignment_ != ALIGN-LEFT:
-        displacement = (font_.pixel-width label_)
+        displacement = (font_.pixel-width text_)
         if alignment_ == ALIGN-CENTER: displacement >>= 1
       l := extent[2] - displacement
       r := extent[2] - displacement + extent[0]
@@ -462,21 +468,24 @@ class Label extends Element implements ColoredElement:
     return height_
 
   invalidate:
-    if change-tracker and x and y and font_ and label_:
+    if change-tracker and x and y and font_ and text_:
       xywh_: | x y w h |
         change-tracker.child-invalidated x y w h
 
   label= value/string -> none:
-    if value == label_: return
+    text = value
+
+  text= value/string -> none:
+    if value == text_: return
     if orientation_ == ORIENTATION-0 and change-tracker and x and y:
-      text-get-bounding-boxes_ label_ value alignment_ font_: | old/TextExtent_ new/TextExtent_ |
+      text-get-bounding-boxes_ text_ value alignment_ font_: | old/TextExtent_ new/TextExtent_ |
         change-tracker.child-invalidated (x_ + old.x) (y_ + old.y) old.w old.h
         change-tracker.child-invalidated (x_ + new.x) (y_ + new.y) new.w new.h
-        label_ = value
+        text_ = value
         left_ = null  // Trigger recalculation.
         return
     invalidate
-    label_ = value
+    text_ = value
     left_ = null  // Trigger recalculation.
     invalidate
 
@@ -499,7 +508,7 @@ class Label extends Element implements ColoredElement:
     y := y_
     if not (x and y): return
     if alignment_ != ALIGN-LEFT:
-      text-width := font_.pixel-width label_
+      text-width := font_.pixel-width text_
       if alignment_ == ALIGN-CENTER: text-width >>= 1
       if orientation_ == ORIENTATION-0:
         x -= text-width
@@ -510,7 +519,7 @@ class Label extends Element implements ColoredElement:
       else:
         assert: orientation_ == ORIENTATION-270
         y -= text-width
-    canvas.text x y --text=label_ --color=color_ --font=font_ --orientation=orientation_
+    canvas.text x y --text=text_ --color=color_ --font=font_ --orientation=orientation_
 
 /**
 A superclass for elements that can draw themselves.  Override the
diff --git a/tests/bitmap-visualized.toit b/tests/bitmap-visualized.toit
index 4b1a6d6..36aa4c3 100644
--- a/tests/bitmap-visualized.toit
+++ b/tests/bitmap-visualized.toit
@@ -47,7 +47,7 @@ do basename/string w/int h/int:
 
   display.draw
 
-  label := Label --x=44 --y=44 --label="UP ^" --font=SANS --color=0
+  label := Label --x=44 --y=44 --text="UP ^" --font=SANS --color=0
   display.add label
   png-element := Png --x=36 --y=32 --png-file=purifier
   display.add png-element
diff --git a/tests/drop-shadow-gray-window-visualized.toit b/tests/drop-shadow-gray-window-visualized.toit
index 9df7175..e4b2688 100644
--- a/tests/drop-shadow-gray-window-visualized.toit
+++ b/tests/drop-shadow-gray-window-visualized.toit
@@ -37,7 +37,7 @@ main args:
   gradient-element := Div --x=0 --y=0 --w=180 --h=100 --background=gradient
   win.add gradient-element
 
-  text := Label --x=90 --y=55 --label="Hello, World!" --font=sans10 --color=0x10
+  text := Label --x=90 --y=55 --text="Hello, World!" --font=sans10 --color=0x10
   win.add text
 
   display.draw
diff --git a/tests/drop-shadow-window-visualized.toit b/tests/drop-shadow-window-visualized.toit
index bee7513..a1fa212 100644
--- a/tests/drop-shadow-window-visualized.toit
+++ b/tests/drop-shadow-window-visualized.toit
@@ -37,7 +37,7 @@ main args:
   gradient-element := Div --x=0 --y=0 --w=180 --h=100 --background=gradient
   win.add gradient-element
 
-  text := Label --x=90 --y=55 --label="Hello, World!" --font=sans10 --color=0x101040
+  text := Label --x=90 --y=55 --text="Hello, World!" --font=sans10 --color=0x101040
   win.add text
 
   display.draw
diff --git a/tests/gray-scale-visualized.toit b/tests/gray-scale-visualized.toit
index 844503f..f18d280 100644
--- a/tests/gray-scale-visualized.toit
+++ b/tests/gray-scale-visualized.toit
@@ -21,14 +21,14 @@ main args:
   display.add
       Div --x=10 --y=20 --w=30 --h=40 --background=0x80
   display.add
-      Label --x=50 --y=20 --label="Testing" --font=sans10 --color=0xc0
+      Label --x=50 --y=20 --text="Testing" --font=sans10 --color=0xc0
 
-  middle-line := Label --x=50 --y=40 --label="the display" --font=sans10 --color=0xc0
+  middle-line := Label --x=50 --y=40 --text="the display" --font=sans10 --color=0xc0
   display.add middle-line
   display.draw
 
   display.add
-      Label --x=50 --y=60 --label="for the win" --font=sans10 --color=0xc0
+      Label --x=50 --y=60 --text="for the win" --font=sans10 --color=0xc0
 
   display.draw
 
diff --git a/tests/mixed-text-rotated-visualized.toit b/tests/mixed-text-rotated-visualized.toit
index d793d8e..f689028 100644
--- a/tests/mixed-text-rotated-visualized.toit
+++ b/tests/mixed-text-rotated-visualized.toit
@@ -22,8 +22,8 @@ main args:
   sans10 := Font.get "sans10"
 
   // Element-based text.
-  element-text := Label --x=10 --y=30 --color=SEVERAL-GREEN --font=sans10 --label="Element 1"
-  element-text-2 := Label --x=10 --y=110 --color=SEVERAL-GREEN --font=sans10 --label="Element 2"
+  element-text := Label --x=10 --y=30 --color=SEVERAL-GREEN --font=sans10 --text="Element 1"
+  element-text-2 := Label --x=10 --y=110 --color=SEVERAL-GREEN --font=sans10 --text="Element 2"
   display.add element-text
   display.add element-text-2
   display.draw
diff --git a/tests/mixed-text-visualized.toit b/tests/mixed-text-visualized.toit
index db50a27..f76acb9 100644
--- a/tests/mixed-text-visualized.toit
+++ b/tests/mixed-text-visualized.toit
@@ -21,8 +21,8 @@ main args:
   sans10 := Font.get "sans10"
 
   // Element-based rectangles.
-  element-text := Label --x=30 --y=30 --color=SEVERAL-ORANGE --label="joo%" --font=sans10
-  element-text-2 := Label --x=130 --y=20 --color=SEVERAL-ORANGE --label="joo%" --font=sans10
+  element-text := Label --x=30 --y=30 --color=SEVERAL-ORANGE --text="joo%" --font=sans10
+  element-text-2 := Label --x=130 --y=20 --color=SEVERAL-ORANGE --text="joo%" --font=sans10
   display.add element-text
   display.add element-text-2
   display.draw
diff --git a/tests/rounded-gray-window-visualized.toit b/tests/rounded-gray-window-visualized.toit
index 583b8ea..1e6b8a1 100644
--- a/tests/rounded-gray-window-visualized.toit
+++ b/tests/rounded-gray-window-visualized.toit
@@ -37,7 +37,7 @@ main args:
   gradient-element := Div --x=0 --y=0 --w=180 --h=100 --background=gradient
   win.add gradient-element
 
-  text := Label --x=90 --y=55 --label="Hello, World!" --font=sans10 --color=0x10
+  text := Label --x=90 --y=55 --text="Hello, World!" --font=sans10 --color=0x10
   win.add text
 
   display.draw
diff --git a/tests/rounded-huge-window-visualized.toit b/tests/rounded-huge-window-visualized.toit
index 8ee8509..b7b8729 100644
--- a/tests/rounded-huge-window-visualized.toit
+++ b/tests/rounded-huge-window-visualized.toit
@@ -39,7 +39,7 @@ main args:
   gradient-element := Div --x=0 --y=0 --w=180 --h=180 --background=gradient
   win.add gradient-element
 
-  text := Label --x=90 --y=55 --label="Hello, World!" --font=sans10 --color=0x101040
+  text := Label --x=90 --y=55 --text="Hello, World!" --font=sans10 --color=0x101040
   win.add text
 
   display.draw
diff --git a/tests/rounded-several-window-visualized.toit b/tests/rounded-several-window-visualized.toit
index 1fae3a5..ffb5963 100644
--- a/tests/rounded-several-window-visualized.toit
+++ b/tests/rounded-several-window-visualized.toit
@@ -20,7 +20,7 @@ main args:
   win := Div.clipping --x=30 --y=30 --w=180 --h=100 --background=SEVERAL-LIGHT-GRAY --border=(RoundedCornerBorder --radius=15)
   display.add win
 
-  text := Label --x=90 --y=55 --label="Hello, World!" --font=sans10 --color=SEVERAL-BLACK
+  text := Label --x=90 --y=55 --text="Hello, World!" --font=sans10 --color=SEVERAL-BLACK
   win.add text
 
   display.draw
diff --git a/tests/rounded-three-color-window-visualized.toit b/tests/rounded-three-color-window-visualized.toit
index 91bf9d1..aeb222b 100644
--- a/tests/rounded-three-color-window-visualized.toit
+++ b/tests/rounded-three-color-window-visualized.toit
@@ -21,7 +21,7 @@ main args:
   win := Div.clipping --x=30 --y=30 --w=180 --h=100 --background=RED --border=(RoundedCornerBorder --radius=17)
   display.add win
 
-  text := Label --x=90 --y=55 --label="Hello, World!" --font=sans10 --color=BLACK
+  text := Label --x=90 --y=55 --text="Hello, World!" --font=sans10 --color=BLACK
   win.add text
 
   display.draw
diff --git a/tests/rounded-two-color-window-visualized.toit b/tests/rounded-two-color-window-visualized.toit
index 4fd2f97..c2bc079 100644
--- a/tests/rounded-two-color-window-visualized.toit
+++ b/tests/rounded-two-color-window-visualized.toit
@@ -21,7 +21,7 @@ main args:
   win := Div.clipping --x=30 --y=30 --w=180 --h=100 --background=WHITE --border=(RoundedCornerBorder --radius=17)
   display.add win
 
-  text := Label --x=90 --y=55 --label="Hello, World!" --font=sans10 --color=BLACK
+  text := Label --x=90 --y=55 --text="Hello, World!" --font=sans10 --color=BLACK
   win.add text
 
   display.draw
diff --git a/tests/rounded-window-visualized.toit b/tests/rounded-window-visualized.toit
index fcd2695..1632cef 100644
--- a/tests/rounded-window-visualized.toit
+++ b/tests/rounded-window-visualized.toit
@@ -37,7 +37,7 @@ main args:
   gradient-element := Div --x=0 --y=0 --w=180 --h=100 --background=gradient
   win.add gradient-element
 
-  text := Label --x=90 --y=55 --label="Hello, World!" --font=sans10 --color=0x101040
+  text := Label --x=90 --y=55 --text="Hello, World!" --font=sans10 --color=0x101040
   win.add text
 
   display.draw
diff --git a/tests/simple-several-window-visualized.toit b/tests/simple-several-window-visualized.toit
index 3f10646..31c7d90 100644
--- a/tests/simple-several-window-visualized.toit
+++ b/tests/simple-several-window-visualized.toit
@@ -20,7 +20,7 @@ main args:
   win := Div.clipping --x=30 --y=30 --w=180 --h=100 --background=SEVERAL-LIGHT-GRAY
   display.add win
 
-  text := Label --x=90 --y=55 --label="Hello, World!" --font=sans10 --color=SEVERAL-BLACK
+  text := Label --x=90 --y=55 --text="Hello, World!" --font=sans10 --color=SEVERAL-BLACK
   win.add text
 
   display.draw
diff --git a/tests/simple-three-color-window-visualized.toit b/tests/simple-three-color-window-visualized.toit
index 7e42410..5e136c5 100644
--- a/tests/simple-three-color-window-visualized.toit
+++ b/tests/simple-three-color-window-visualized.toit
@@ -21,7 +21,7 @@ main args:
   win := Div.clipping --x=30 --y=30 --w=180 --h=100 --background=RED
   display.add win
 
-  text := Label --x=90 --y=55 --label="Hello, World!" --font=sans10 --color=BLACK
+  text := Label --x=90 --y=55 --text="Hello, World!" --font=sans10 --color=BLACK
   win.add text
 
   display.draw
diff --git a/tests/simple-two-color-window-visualized.toit b/tests/simple-two-color-window-visualized.toit
index f636f1a..33a7c67 100644
--- a/tests/simple-two-color-window-visualized.toit
+++ b/tests/simple-two-color-window-visualized.toit
@@ -21,7 +21,7 @@ main args:
   win := Div.clipping --x=30 --y=30 --w=180 --h=100
   display.add win
 
-  text := Label --x=90 --y=55 --label="Hello, World!" --font=sans10 --color=BLACK
+  text := Label --x=90 --y=55 --text="Hello, World!" --font=sans10 --color=BLACK
   win.add text
 
   display.draw
diff --git a/tests/text-visualized.toit b/tests/text-visualized.toit
index 71a2a8c..a46897d 100644
--- a/tests/text-visualized.toit
+++ b/tests/text-visualized.toit
@@ -21,9 +21,9 @@ main args:
 
   sans10 := Font.get "sans10"
 
-  element-text := Label --x=30 --y=20 --color=SEVERAL-ORANGE --label="Testing 123" --font=sans10
-  element-text-2 := Label --x=180 --y=50 --color=SEVERAL-ORANGE --label="123 Testing" --font=sans10 --alignment=ALIGN-RIGHT
-  element-text-3 := Label --x=96 --y=80 --color=SEVERAL-ORANGE --label="T 123 For the win" --font=sans10 --alignment=ALIGN-CENTER
+  element-text := Label --x=30 --y=20 --color=SEVERAL-ORANGE --text="Testing 123" --font=sans10
+  element-text-2 := Label --x=180 --y=50 --color=SEVERAL-ORANGE --text="123 Testing" --font=sans10 --alignment=ALIGN-RIGHT
+  element-text-3 := Label --x=96 --y=80 --color=SEVERAL-ORANGE --text="T 123 For the win" --font=sans10 --alignment=ALIGN-CENTER
   display.add element-text
   display.add element-text-2
   display.add element-text-3
diff --git a/tests/true-color-portrait-visualized.toit b/tests/true-color-portrait-visualized.toit
index 0974044..43062db 100644
--- a/tests/true-color-portrait-visualized.toit
+++ b/tests/true-color-portrait-visualized.toit
@@ -25,13 +25,13 @@ main args:
   display.add
       Div --x=20 --y=70 --w=30 --h=40 --background=0x4040ff
   display.add
-      Label --x=5 --y=80 --label="Testing" --font=sans10 --color=foreground
-  middle-line := Label --x=5 --y=100 --label="the display" --font=sans10 --color=foreground
+      Label --x=5 --y=80 --text="Testing" --font=sans10 --color=foreground
+  middle-line := Label --x=5 --y=100 --text="the display" --font=sans10 --color=foreground
   display.add middle-line
   display.draw
 
   display.add
-      Label --x=5 --y=120 --label="for the win" --font=sans10 --color=foreground
+      Label --x=5 --y=120 --text="for the win" --font=sans10 --color=foreground
 
   display.draw
 

From 895ad5af1be11a4c7e9e3c62b9f2c2ddc50755c5 Mon Sep 17 00:00:00 2001
From: Erik Corry <erik@toit.io>
Date: Sun, 31 Dec 2023 15:18:01 +0100
Subject: [PATCH 2/8] feedback

---
 src/element.toit | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/element.toit b/src/element.toit
index 835692d..74d4b2a 100644
--- a/src/element.toit
+++ b/src/element.toit
@@ -4,10 +4,6 @@
 
 import binary show LITTLE-ENDIAN
 import bitmap show *
-import .four-gray as four-gray
-import .true-color as true-color
-import .gray-scale as gray-scale
-import .one-byte_ as one-byte
 import .style show *
 import .pixel-display
 import font show Font
@@ -346,9 +342,7 @@ class Label extends Element implements ColoredElement:
       orientation = value
     else if key == "alignment":
       alignment = value
-    else if key == "label":
-      text = value
-    else if key == "text":
+    else if key == "text" or key == "label":
       text = value
     else if key == "icon":
       icon = value

From f76040e8ad15f0cde9781e8486e31284fda0f602 Mon Sep 17 00:00:00 2001
From: Erik Corry <erik@toit.io>
Date: Wed, 28 Feb 2024 15:21:37 +0100
Subject: [PATCH 3/8] Add ability to color-transform PNG images

---
 src/png.toit                                  |  75 +++++++++++++++++-
 tests/bitmap-2-visualized.toit                |  14 +++-
 tests/gold/bitmap-2-visualized.toit.png       | Bin 7622 -> 11507 bytes
 .../three-color-bitmap-2-visualized.toit.png  | Bin 1073 -> 1403 bytes
 tests/three-color-bitmap-2-visualized.toit    |  12 ++-
 5 files changed, 98 insertions(+), 3 deletions(-)

diff --git a/src/png.toit b/src/png.toit
index 3921827..bf33219 100644
--- a/src/png.toit
+++ b/src/png.toit
@@ -36,6 +36,11 @@ Only PNGs with up to 8 bits per pixel are supported.  They can be
 */
 class Png extends CustomElement:
   png_/png-reader.AbstractPng
+  last-palette_/ByteArray? := null
+  last-alpha-palette_/ByteArray? := null
+  last-transformed-palette_/ByteArray? := null
+  last-transformed-alpha-palette_/ByteArray? := null
+  palette-transformer_/Lambda? := null
 
   /**
   Constructs an element that displays a PNG image, given a byte array
@@ -51,7 +56,10 @@ class Png extends CustomElement:
       --id/string?=null
       --background=null
       --border/Border?=null
-      --png-file/ByteArray:
+      --png-file/ByteArray
+      --color/int?=null
+      --palette-transformer/Lambda?=null:
+    palette-transformer_ = palette-transformer
     info := png-reader.PngInfo png-file
     if info.uncompressed-random-access:
       png_ = png-reader.PngRandomAccess png-file
@@ -69,6 +77,51 @@ class Png extends CustomElement:
         --id = id
         --background = background
         --border = border
+    if color: this.color = color
+
+  /**
+  Causes the PNG to be redrawn with new values from the palette transformer.
+  */
+  invalidate-palette-transformer -> none:
+    invalidate
+    last-transformed-palette_ = null
+    last-transformed-alpha-palette_ = null
+
+  /**
+  Causes the palette of the PNG to be ignored, and all pixels will
+    be drawn with the given color.  Alpha (transparency) will be
+    unchanged.
+  */
+  color= value/int -> none:
+    invalidate-palette-transformer
+    palette-transformer_ = :: | r g b a |
+      #[value >> 16, value >> 8, value, a]
+
+  set-attribute_ key/string value -> none:
+    if key == "color":
+      color = value
+    else:
+      super key value
+  /**
+  The $palette-transformer is an optional Lambda that transforms
+    the colors in the PNG. The arguments are red, green, blue, and
+    alpha, all integers from 0-255.  It is expected to return a
+    4-element ByteArray with the transformed red, green, blue, and
+    alpha values.  This can be used for example if you have a PNG
+    that is black-and-transparent, and you want to display it as an
+    image that is red-and-transparent.  The returned ByteArray does
+    not have to be fresh on each invocation.
+  The palette transformer is not called eagerly, so if it is
+    going to return new values (eg. to change the color of the PNG)
+    you must call $invalidate-palette-transformer.
+  A simpler way to use palette transformation is to simply set the
+    color on this element. This will cause all PNG pixels to be
+    drawn with the same color, but alpha (transparency) will still
+    be taken from the PNG file.
+  */
+  palette-transformer= value/Lambda?:
+    invalidate-palette-transformer
+    palette-transformer_ = value
 
   // Redraw routine.
   custom-draw canvas/Canvas:
@@ -77,6 +130,26 @@ class Png extends CustomElement:
       png_.get-indexed-image-data y2 h
           --accept-8-bit=canvas.supports-8-bit
           --need-gray-palette=canvas.gray-scale: | y-from/int y-to/int bits-per-pixel/int pixels/ByteArray line-stride/int palette/ByteArray alpha-palette/ByteArray |
+        if palette-transformer_:
+          if palette != last-palette_ or alpha-palette != last-alpha-palette_:
+            if last-transformed-alpha-palette_ == null or
+                last-transformed-palette_.size != palette.size:
+              last-transformed-palette_ = ByteArray palette.size
+            if last-transformed-alpha-palette_ == null or
+                last-transformed-alpha-palette_.size != palette.size:
+              last-transformed-alpha-palette_ = ByteArray palette.size
+          (palette.size / 3).repeat: | i |
+            transformed := palette-transformer_.call
+              palette[i * 3]
+              palette[i * 3 + 1]
+              palette[i * 3 + 2]
+              i >= alpha-palette.size ? 0xff : alpha-palette[i]
+            last-transformed-palette_[i * 3] = transformed[0]
+            last-transformed-palette_[i * 3 + 1] = transformed[1]
+            last-transformed-palette_[i * 3 + 2] = transformed[2]
+            last-transformed-alpha-palette_[i] = transformed[3]
+          palette = last-transformed-palette_
+          alpha-palette = last-transformed-alpha-palette_
         if bits-per-pixel == 1:
           // Last line a little shorter because it has no stride padding.
           adjust := line-stride - ((round-up w 8) >> 3)
diff --git a/tests/bitmap-2-visualized.toit b/tests/bitmap-2-visualized.toit
index 3093005..cc2d31c 100644
--- a/tests/bitmap-2-visualized.toit
+++ b/tests/bitmap-2-visualized.toit
@@ -22,7 +22,7 @@ main args:
 
   basename := args[0]
 
-  driver := TrueColorPngVisualizer 524 240 basename --outline=0xffffff
+  driver := TrueColorPngVisualizer 800 240 basename --outline=0xffffff
   display := PixelDisplay.true-color driver
   display.background = 0xe0e080
 
@@ -39,12 +39,21 @@ main args:
   heater-translucent := file.read-content "tests/third_party/pictogrammers/heater-translucent.png"
   heater-translucent-uncompressed := file.read-content "tests/third_party/pictogrammers/heater-translucent-uncompressed.png"
 
+  swap-red-and-black := :: | r/int g/int b/int a/int |
+    if r > 0x80:
+      #[0, 0, 0, a]
+    else:
+      #[0xff, 0, 0, a]
+
   display.add (Png --x=16 --y=32 --png-file=heater)
   display.add (Png --x=100 --y=32 --png-file=heater-4-bit)
   display.add (Png --x=184 --y=32 --png-file=heater-2-bit)
   display.add (Png --x=268 --y=32 --png-file=heater-bw)
   display.add (Png --x=352 --y=32 --png-file=heater-white-bg)
   display.add (Png --x=436 --y=32 --png-file=heater-translucent)
+  display.add (Png --x=520 --y=32 --png-file=heater-4-bit --color=0x4080ff)
+  display.add (Png --x=604 --y=32 --png-file=heater-4-bit --palette-transformer=swap-red-and-black)
+  display.add (Png --x=688 --y=32 --png-file=heater-bw --color=0x20ffe0)
 
   display.add (Png --x=16 --y=120 --png-file=heater-uncompressed)
   display.add (Png --x=100 --y=120 --png-file=heater-4-bit-uncompressed)
@@ -52,6 +61,9 @@ main args:
   display.add (Png --x=268 --y=120 --png-file=heater-bw-uncompressed)
   display.add (Png --x=352 --y=120 --png-file=heater-white-bg-uncompressed)
   display.add (Png --x=436 --y=120 --png-file=heater-translucent-uncompressed)
+  display.add (Png --x=520 --y=120 --png-file=heater-4-bit-uncompressed --color=0x4080ff)
+  display.add (Png --x=604 --y=120 --png-file=heater-4-bit-uncompressed --palette-transformer=swap-red-and-black)
+  display.add (Png --x=688 --y=120 --png-file=heater-bw-uncompressed --color=0x20ffe0)
 
   display.draw
 
diff --git a/tests/gold/bitmap-2-visualized.toit.png b/tests/gold/bitmap-2-visualized.toit.png
index 6cfa6ffd5cc6aa01b3e64d68a800ac030e245a64..e1fbc7d94fe3fb29d7243b35b8bfdbfae6adf60c 100644
GIT binary patch
literal 11507
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

literal 7622
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

diff --git a/tests/gold/three-color-bitmap-2-visualized.toit.png b/tests/gold/three-color-bitmap-2-visualized.toit.png
index 2085906e83467631bed4a158bc3fc882ba05466f..a40ab18e46209851c6168e92f93f421073deb5f8 100644
GIT binary patch
literal 1403
zcmeAS@N?(olHy`uVBq!ia0y~yVAWt?U^HN228x_CE&m6kI0Jk_T>t<74`c%Ifs=DL
z09EOFx;TbZ#J#z+P>{iZgTe5|nniE+2Z^tE9H8>=?s0jbS}54Q_}Qzjy%rZI6qg<g
z+aVObODO!27ZAm~^orRjy6(tSAlh+hDnw>ov-a--)paFc1eB_IGuN@}wu6A{a@Knl
z@4bJB?DhB-x8nWe#TA(~r=~3PTxAnq<Rs46x##?W1IvSL9<?8{O<wWx=S+G1)Xe!S
znU|iKQuMyza9Eu6%g0Oil&siUy>#ikJF_BJP00>ZW6+g!(48DKOLx(%rF>J2f=?+k
zU*pMKDS0XA{)B1F`>)OVtbeIm!+-yRJdin`PBeVIJ9&k;et(De>(tr1r$)Ux**kNo
z*Uq$5rVEo8Vswue)&3}NpY`{*gQoG)JLV4-Ozl1w`#xY>w7&n^=#@ZgXTYrGJn%JW
zv;U>L%zaTm7mHu!&U~BtGA!%n;-%+wLQk1$3pY$-c~G_Truxf?4E_14VM$MS2FEE+
znSSw9F#E1AZr*bx*L<0rmC6RRb&C^Y``S0*KNfhemQKwsE^+jp`*P|0JGKv2Og;Vd
za#wN7C!?sysO*Qmt<$WGBVMXsJ;k#?l`*50sV}PXZTOG$mMDGwwWYk~U~M)A34fJe
z{!I?L6gTY`Q|WIFKGmgXc*1^pZZ%@g@MMTm1O}wt{L7yWB_kT5^rN+N_1LyWzVgxk
z`{W&?`&yG(s~v6k<Xk<SvGigLPu9EEDcQ!&Q|p4(`Y=QpHHfjwY$-CjvDxvi@|CQ}
zp4TY>+usJISG`o{=ZUyKSuec8xjSH?&ees}=I3!o^-r-fjsiKBWq~SlM&N;kC6``W
z&U`g7<TPJs)J&jbCB5w{6At_mUn1{y>vYh52g^xQjEtjJs@H~qqGF3i!nsqdRt}Y#
z0o?b~RvPd9GI=+<kFECpJJNfmq%XbCw&lvqPitcKzfED#<#f;%G59Qer(vC-*D1bG
z`$oOo%~xi|{W`gqxi5O>o}<5tSh-WT6jk1TDz2?rnzrSV|Ej5y4&F=`xEN*jzqOgR
z{xkQLs+-TAzJ3xA1P+Qu#@E$Br)#UEHaoW(-7C}C{%C&5grIab?Y~Q+W-@M3VOSe*
z;7WemzL<l1rrh87<EWPx$TvHy4+LtTmwhF-a8FOzJgX`3YnDuzdC<##B_x%01LG@m
zmi-fd_0_4F%R(||FFn@-jArWx8>Xu5erOlBaF5Q_)2E%D{qxo|UJMO$AyAla3%Z=O
z=*!F~Ir$A~9^PjsxM{1VUSDq-_Kfjo3ETX077PkuNuUJw-etvoNsZKHQ{36s0Mozm
zlBN3;b&uDt-6*6DLPqk3_&A%UMtE+Rl%N_Wv_>VOb1IAWMj+>)7m(w*K}eeuD15{V
zP0jspv;M!?|LOPs-`DTk^T{0AJju52O<_vEa<$CO$0y|6zgcWLJ`o`_<M=U~Zx%oY
zp@?EpNTg85)HiC$$#T-4f$rM~vRW<KToUYI)v$j#&-uC-7#bDYWY1MRh!-~dmL|+w
zTV9~)(XRD*p;yRCuaKKup^LnL2*mEx3hmU2hKPgNflIXlQ?()DAhznN5Y<&{TC||-
hr{1R4jIa`r;REB69p^LxN(`DoLY}UEF6*2UngAbpgUtW{

literal 1073
zcmeAS@N?(olHy`uVBq!ia0y~yV7|b>z-Yk43=~n4E(CHII0Jk_T>t<74`c%Ifs=DL
z098Hqba4!+h<kH!BQJvj5A(qdlB{p`3mLmiEGQ1Yef7FOP%#J;sO6Q%8@`c>IQv~|
zid!ZK@dZdN4Fn=92QU{X;s@eNEqyLmoj&1_1&_<cDF>wA*K*Ex>YiCEw(j?rz&$2b
zPdx+|t(hV*(a5Fk-~6@%>K_dB-)YGHcza0OKGgG1*Y+uoSJqz6J|-W!Gv(4W-`7D(
zOU-hZN_ll>1nT|@+Ou#E_tp4=lmGMhFV^2Rf9Hem!Iq+zE(h=}|K_`1QT*!Ltp$3O
zr<awkoPX0GcUfJ)tW9#CG?w_v@jgw+x?fV+c=ln)wCQJ$+}xt~)mVDj*$`(<$p(1`
z(;5FxwyyqQH+>4wKKsq7w|q>eOfvlOF=WQH17GG`eBG&%np$;gimK?YE6d(qnWT3$
z%c^DZ4zZxkDfe7jwb}!Em&I~$8ilK9`Y-F8`E;(+)LUETMqOGe1$0u%ef6N-F*7#b
zN~<(p_5RWK_SK$2lh%8jXXo^sdTPtmS(leb`L;he^iasx<L#uG6^lKxrzNj&yDYfT
z?UJHuwdVO{%1NC|bfFg8T}`{?db3#NZF<n=B^<MrUf$Gs@Amco@#W3+PeLm+PjYL{
z{n%N&&@1<rpYF?G-IEpKcRsH85Ohr?>DH{LZ&&Q=FYlMqSN%ClMJ;rtkMzn(dS55K
zREd2UywZd7mX3Si+wWg)8+v$^`kyxR06Grjg<JL2>ZhU}MyqbD4;0Ir=DZ^9^2@Uy
z-@Z{#O|{x<dFrM=NZqW<OK<t7xc{1|9klz2?q8oXXN!2QRw;GgjJ0~n?Rn~zi`ZwC
zXLnWv&E6L5z3Ynh{7v`H)dj8UH#-u&S;ob5);#0P^&Ua<eEesA@oClDnrXdtiNEQr
zGDVqJ>qE~@vfxt9o7TJ{>~g<p?9af-OH}lqPAZtq5VF$e_KHbzSF@tp_b%Kc4NViw
zdQ!{k51Y&UXk%WMD7DO6tA<nh)b4=4qBcLzfB15=yDf7D5dCx7(AjXngy}MekFtTS
zia{@o-Fx86*8?U#hoMqn@%nvIfBt8(eE%{b!CYkb!W+Ct^EAqwH%fQi4S3U*WG<3D
z=>~6WCYXsu7N1a}lyvj`gUP-^K&JxLNgSD_0<_xafA;&nOooO;g^sOfj9ToMZP;;g
zS;1@X{~O-$YxG`%AWm?;1Ln0|3r)NhgONEjQ@XuugDU#B$qSNo845V%{HE&vv4{on
NJzf1=);T3K0RXx>`2zp|

diff --git a/tests/three-color-bitmap-2-visualized.toit b/tests/three-color-bitmap-2-visualized.toit
index 700e04f..640316a 100644
--- a/tests/three-color-bitmap-2-visualized.toit
+++ b/tests/three-color-bitmap-2-visualized.toit
@@ -23,7 +23,7 @@ main args:
 
   basename := args[0]
 
-  driver := ThreeColorPngVisualizer 440 240 basename --outline=BLACK
+  driver := ThreeColorPngVisualizer 610 240 basename --outline=BLACK
   display := PixelDisplay.three-color driver
   display.background = WHITE
 
@@ -36,15 +36,25 @@ main args:
   heater-white-bg := file.read-content "tests/third_party/pictogrammers/heater-white-bg.png"
   heater-white-bg-uncompressed := file.read-content "tests/third_party/pictogrammers/heater-white-bg-uncompressed.png"
 
+  swap-red-and-black := :: | r/int g/int b/int a/int |
+    if r > 0x80:
+      #[0, 0, 0, a]
+    else:
+      #[0xff, 0, 0, a]
+
   display.add (Png --x=100 --y=32 --png-file=heater-red)
   display.add (Png --x=184 --y=32 --png-file=heater-2-bit)
   display.add (Png --x=268 --y=32 --png-file=heater-bw)
   display.add (Png --x=352 --y=32 --png-file=heater-white-bg)
+  display.add (Png --x=436 --y=32 --png-file=heater-bw --color=0xff0000)
+  display.add (Png --x=520 --y=32 --png-file=heater-2-bit --palette-transformer=swap-red-and-black)
 
   display.add (Png --x=100 --y=120 --png-file=heater-red-uncompressed)
   display.add (Png --x=184 --y=120 --png-file=heater-2-bit-uncompressed)
   display.add (Png --x=268 --y=120 --png-file=heater-bw-uncompressed)
   display.add (Png --x=352 --y=120 --png-file=heater-white-bg-uncompressed)
+  display.add (Png --x=436 --y=120 --png-file=heater-bw-uncompressed --color=0xff0000)
+  display.add (Png --x=520 --y=120 --png-file=heater-2-bit-uncompressed --palette-transformer=swap-red-and-black)
 
   display.draw
 

From cb1ec7866608c05a852a2d3864317b5cdf5d9a93 Mon Sep 17 00:00:00 2001
From: Erik Corry <erik@toit.io>
Date: Thu, 29 Feb 2024 13:33:32 +0100
Subject: [PATCH 4/8] feedback

---
 src/png.toit                               | 55 +++++++++++++---------
 tests/bitmap-2-visualized.toit             |  4 +-
 tests/png-visualizer.toit                  | 10 ++++
 tests/three-color-bitmap-2-visualized.toit | 10 +---
 tests/toit-png-tools                       |  2 +-
 5 files changed, 49 insertions(+), 32 deletions(-)

diff --git a/src/png.toit b/src/png.toit
index bf33219..d0f4dcb 100644
--- a/src/png.toit
+++ b/src/png.toit
@@ -40,7 +40,8 @@ class Png extends CustomElement:
   last-alpha-palette_/ByteArray? := null
   last-transformed-palette_/ByteArray? := null
   last-transformed-alpha-palette_/ByteArray? := null
-  palette-transformer_/Lambda? := null
+  palette-transformer_/PaletteTransformer? := null
+  palette-transformer-buffer_/ByteArray? := null
 
   /**
   Constructs an element that displays a PNG image, given a byte array
@@ -58,7 +59,7 @@ class Png extends CustomElement:
       --border/Border?=null
       --png-file/ByteArray
       --color/int?=null
-      --palette-transformer/Lambda?=null:
+      --palette-transformer/PaletteTransformer?=null:
     palette-transformer_ = palette-transformer
     info := png-reader.PngInfo png-file
     if info.uncompressed-random-access:
@@ -94,8 +95,7 @@ class Png extends CustomElement:
   */
   color= value/int -> none:
     invalidate-palette-transformer
-    palette-transformer_ = :: | r g b a |
-      #[value >> 16, value >> 8, value, a]
+    palette-transformer_ = SingleColorPaletteTransformer_ value
 
   set-attribute_ key/string value -> none:
     if key == "color":
@@ -103,14 +103,10 @@ class Png extends CustomElement:
     else:
       super key value
   /**
-  The $palette-transformer is an optional Lambda that transforms
-    the colors in the PNG. The arguments are red, green, blue, and
-    alpha, all integers from 0-255.  It is expected to return a
-    4-element ByteArray with the transformed red, green, blue, and
-    alpha values.  This can be used for example if you have a PNG
+  The $palette-transformer is an optional PaletteTransformer that transforms
+    the colors in the PNG.  This can be used for example if you have a PNG
     that is black-and-transparent, and you want to display it as an
-    image that is red-and-transparent.  The returned ByteArray does
-    not have to be fresh on each invocation.
+    image that is red-and-transparent.
   The palette transformer is not called eagerly, so if it is
     going to return new values (eg. to change the color of the PNG)
     you must call $invalidate-palette-transformer.
@@ -119,7 +115,7 @@ class Png extends CustomElement:
     drawn with the same color, but alpha (transparency) will still
     be taken from the PNG file.
   */
-  palette-transformer= value/Lambda?:
+  palette-transformer= value/PaletteTransformer?:
     invalidate-palette-transformer
     palette-transformer_ = value
 
@@ -138,16 +134,16 @@ class Png extends CustomElement:
             if last-transformed-alpha-palette_ == null or
                 last-transformed-alpha-palette_.size != palette.size:
               last-transformed-alpha-palette_ = ByteArray palette.size
+          if palette-transformer-buffer_ == null:
+            palette-transformer-buffer_ = ByteArray 4
           (palette.size / 3).repeat: | i |
-            transformed := palette-transformer_.call
-              palette[i * 3]
-              palette[i * 3 + 1]
-              palette[i * 3 + 2]
-              i >= alpha-palette.size ? 0xff : alpha-palette[i]
-            last-transformed-palette_[i * 3] = transformed[0]
-            last-transformed-palette_[i * 3 + 1] = transformed[1]
-            last-transformed-palette_[i * 3 + 2] = transformed[2]
-            last-transformed-alpha-palette_[i] = transformed[3]
+            3.repeat:
+              palette-transformer-buffer_[it] = palette[i * 3 + it]
+            palette-transformer-buffer_[3] = alpha-palette[i]
+            palette-transformer_.transform palette-transformer-buffer_
+            3.repeat:
+              last-transformed-palette_[i * 3 + it] = palette-transformer-buffer_[it]
+            last-transformed-alpha-palette_[i] = palette-transformer-buffer_[3]
           palette = last-transformed-palette_
           alpha-palette = last-transformed-alpha-palette_
         if bits-per-pixel == 1:
@@ -171,3 +167,20 @@ class Png extends CustomElement:
         y2 = y-to
 
   type -> string: return "png"
+
+interface PaletteTransformer:
+  /**
+  Takes a 4-element byte array in rgba order and modifies the
+    byte array to indicate which color and transparency should
+    be used instead.
+  */
+  transform rgba/ByteArray -> none
+
+class SingleColorPaletteTransformer_ implements PaletteTransformer:
+  color_/int
+  constructor .color_:
+
+  transform rgba/ByteArray -> none:
+    rgba[0] = color_ >> 16
+    rgba[1] = color_ >> 8
+    rgba[2] = color_
diff --git a/tests/bitmap-2-visualized.toit b/tests/bitmap-2-visualized.toit
index cc2d31c..3e02f4a 100644
--- a/tests/bitmap-2-visualized.toit
+++ b/tests/bitmap-2-visualized.toit
@@ -52,7 +52,7 @@ main args:
   display.add (Png --x=352 --y=32 --png-file=heater-white-bg)
   display.add (Png --x=436 --y=32 --png-file=heater-translucent)
   display.add (Png --x=520 --y=32 --png-file=heater-4-bit --color=0x4080ff)
-  display.add (Png --x=604 --y=32 --png-file=heater-4-bit --palette-transformer=swap-red-and-black)
+  display.add (Png --x=604 --y=32 --png-file=heater-4-bit --palette-transformer=SwapRedAndBlack)
   display.add (Png --x=688 --y=32 --png-file=heater-bw --color=0x20ffe0)
 
   display.add (Png --x=16 --y=120 --png-file=heater-uncompressed)
@@ -62,7 +62,7 @@ main args:
   display.add (Png --x=352 --y=120 --png-file=heater-white-bg-uncompressed)
   display.add (Png --x=436 --y=120 --png-file=heater-translucent-uncompressed)
   display.add (Png --x=520 --y=120 --png-file=heater-4-bit-uncompressed --color=0x4080ff)
-  display.add (Png --x=604 --y=120 --png-file=heater-4-bit-uncompressed --palette-transformer=swap-red-and-black)
+  display.add (Png --x=604 --y=120 --png-file=heater-4-bit-uncompressed --palette-transformer=SwapRedAndBlack)
   display.add (Png --x=688 --y=120 --png-file=heater-bw-uncompressed --color=0x20ffe0)
 
   display.draw
diff --git a/tests/png-visualizer.toit b/tests/png-visualizer.toit
index 41b1509..b23205e 100644
--- a/tests/png-visualizer.toit
+++ b/tests/png-visualizer.toit
@@ -9,6 +9,7 @@ import crypto.crc show *
 import host.file
 import monitor show Latch
 import pixel-display show *
+import pixel-display.png
 import png-tools.png-writer
 import png-tools.png-reader show *
 import zlib
@@ -403,3 +404,12 @@ byte-swap_ ba/ByteArray -> ByteArray:
   result := ba.copy
   byte-swap-32 result
   return result
+
+class SwapRedAndBlack implements png.PaletteTransformer:
+  transform palette/ByteArray -> none:
+    if palette[0] >= 0x80:
+      palette[0] = 0
+    else:
+      palette[0] = 0xff
+    palette[1] = 0
+    palette[2] = 0
diff --git a/tests/three-color-bitmap-2-visualized.toit b/tests/three-color-bitmap-2-visualized.toit
index 640316a..93b649b 100644
--- a/tests/three-color-bitmap-2-visualized.toit
+++ b/tests/three-color-bitmap-2-visualized.toit
@@ -36,25 +36,19 @@ main args:
   heater-white-bg := file.read-content "tests/third_party/pictogrammers/heater-white-bg.png"
   heater-white-bg-uncompressed := file.read-content "tests/third_party/pictogrammers/heater-white-bg-uncompressed.png"
 
-  swap-red-and-black := :: | r/int g/int b/int a/int |
-    if r > 0x80:
-      #[0, 0, 0, a]
-    else:
-      #[0xff, 0, 0, a]
-
   display.add (Png --x=100 --y=32 --png-file=heater-red)
   display.add (Png --x=184 --y=32 --png-file=heater-2-bit)
   display.add (Png --x=268 --y=32 --png-file=heater-bw)
   display.add (Png --x=352 --y=32 --png-file=heater-white-bg)
   display.add (Png --x=436 --y=32 --png-file=heater-bw --color=0xff0000)
-  display.add (Png --x=520 --y=32 --png-file=heater-2-bit --palette-transformer=swap-red-and-black)
+  display.add (Png --x=520 --y=32 --png-file=heater-2-bit --palette-transformer=SwapRedAndBlack)
 
   display.add (Png --x=100 --y=120 --png-file=heater-red-uncompressed)
   display.add (Png --x=184 --y=120 --png-file=heater-2-bit-uncompressed)
   display.add (Png --x=268 --y=120 --png-file=heater-bw-uncompressed)
   display.add (Png --x=352 --y=120 --png-file=heater-white-bg-uncompressed)
   display.add (Png --x=436 --y=120 --png-file=heater-bw-uncompressed --color=0xff0000)
-  display.add (Png --x=520 --y=120 --png-file=heater-2-bit-uncompressed --palette-transformer=swap-red-and-black)
+  display.add (Png --x=520 --y=120 --png-file=heater-2-bit-uncompressed --palette-transformer=SwapRedAndBlack)
 
   display.draw
 
diff --git a/tests/toit-png-tools b/tests/toit-png-tools
index 8387669..ee472ac 160000
--- a/tests/toit-png-tools
+++ b/tests/toit-png-tools
@@ -1 +1 @@
-Subproject commit 8387669efa33a7108c746dcb19dd5ad0ac8f89d0
+Subproject commit ee472ac9d4333a138206f9d3a817d3c5432d6f87

From 192622c54eeec86af8f6c6a7adef4a58a6cd4fcb Mon Sep 17 00:00:00 2001
From: Erik Corry <erik@toit.io>
Date: Thu, 29 Feb 2024 13:42:38 +0100
Subject: [PATCH 5/8] feedback

---
 tests/bitmap-2-visualized.toit | 6 ------
 tests/png-visualizer.toit      | 5 +----
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/tests/bitmap-2-visualized.toit b/tests/bitmap-2-visualized.toit
index 3e02f4a..71967c5 100644
--- a/tests/bitmap-2-visualized.toit
+++ b/tests/bitmap-2-visualized.toit
@@ -39,12 +39,6 @@ main args:
   heater-translucent := file.read-content "tests/third_party/pictogrammers/heater-translucent.png"
   heater-translucent-uncompressed := file.read-content "tests/third_party/pictogrammers/heater-translucent-uncompressed.png"
 
-  swap-red-and-black := :: | r/int g/int b/int a/int |
-    if r > 0x80:
-      #[0, 0, 0, a]
-    else:
-      #[0xff, 0, 0, a]
-
   display.add (Png --x=16 --y=32 --png-file=heater)
   display.add (Png --x=100 --y=32 --png-file=heater-4-bit)
   display.add (Png --x=184 --y=32 --png-file=heater-2-bit)
diff --git a/tests/png-visualizer.toit b/tests/png-visualizer.toit
index b23205e..df08a5d 100644
--- a/tests/png-visualizer.toit
+++ b/tests/png-visualizer.toit
@@ -407,9 +407,6 @@ byte-swap_ ba/ByteArray -> ByteArray:
 
 class SwapRedAndBlack implements png.PaletteTransformer:
   transform palette/ByteArray -> none:
-    if palette[0] >= 0x80:
-      palette[0] = 0
-    else:
-      palette[0] = 0xff
+    palette[0] = (palette[0] >= 0x80) ? 0 : 0xff
     palette[1] = 0
     palette[2] = 0

From ab73bce3e75adcf8e3773ec506cb0e93ac8a42b7 Mon Sep 17 00:00:00 2001
From: Erik Corry <erik@toit.io>
Date: Fri, 8 Mar 2024 15:31:33 +0100
Subject: [PATCH 6/8] Make it possible to update the PNG file on a PNG element

---
 src/png.toit                                  |  38 +++++++++++++-----
 .../three-color-bitmap-2-visualized.toit.png  | Bin 1403 -> 2401 bytes
 tests/three-color-bitmap-2-visualized.toit    |  12 +++++-
 3 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/src/png.toit b/src/png.toit
index d0f4dcb..ebc666d 100644
--- a/src/png.toit
+++ b/src/png.toit
@@ -35,7 +35,7 @@ Only PNGs with up to 8 bits per pixel are supported.  They can be
   transparent, and the opaque colors fully opaque.
 */
 class Png extends CustomElement:
-  png_/png-reader.AbstractPng
+  png_/png-reader.AbstractPng? := null
   last-palette_/ByteArray? := null
   last-alpha-palette_/ByteArray? := null
   last-transformed-palette_/ByteArray? := null
@@ -57,29 +57,36 @@ class Png extends CustomElement:
       --id/string?=null
       --background=null
       --border/Border?=null
-      --png-file/ByteArray
+      --png-file/ByteArray?=null
       --color/int?=null
       --palette-transformer/PaletteTransformer?=null:
     palette-transformer_ = palette-transformer
-    info := png-reader.PngInfo png-file
-    if info.uncompressed-random-access:
-      png_ = png-reader.PngRandomAccess png-file
-    else:
-      png_ = png-reader.Png png-file
-    if png_.bit-depth > 8: throw "UNSUPPORTED"
-    if png_.color-type == png-reader.COLOR-TYPE-TRUECOLOR or png_.color-type == png-reader.COLOR-TYPE-TRUECOLOR-ALPHA: throw "UNSUPPORTED"
+    png/png-reader.AbstractPng? := create-png_ png-file
     super
         --x = x
         --y = y
-        --w = png_.width
-        --h = png_.height
+        --w = png ? png.width : 0
+        --h = png ? png.height : 0
         --style = style
         --classes = classes
         --id = id
         --background = background
         --border = border
+    png_ = png
     if color: this.color = color
 
+  static create-png_ png-file/ByteArray? -> png-reader.AbstractPng?:
+    if not png-file: return null
+    info := png-reader.PngInfo png-file
+    png/png-reader.AbstractPng := ?
+    if info.uncompressed-random-access:
+      png = png-reader.PngRandomAccess png-file
+    else:
+      png = png-reader.Png png-file
+    if png.bit-depth > 8: throw "UNSUPPORTED"
+    if png.color-type == png-reader.COLOR-TYPE-TRUECOLOR or png.color-type == png-reader.COLOR-TYPE-TRUECOLOR-ALPHA: throw "UNSUPPORTED"
+    return png
+
   /**
   Causes the PNG to be redrawn with new values from the palette transformer.
   */
@@ -97,11 +104,19 @@ class Png extends CustomElement:
     invalidate-palette-transformer
     palette-transformer_ = SingleColorPaletteTransformer_ value
 
+  png-file= value/ByteArray? -> none:
+    invalidate
+    png_ = create-png_ value
+    set-size png_.width png_.height  // Also invalidates if the size changes.
+
   set-attribute_ key/string value -> none:
     if key == "color":
       color = value
+    else if key == "png-file":
+      png-file = value
     else:
       super key value
+
   /**
   The $palette-transformer is an optional PaletteTransformer that transforms
     the colors in the PNG.  This can be used for example if you have a PNG
@@ -121,6 +136,7 @@ class Png extends CustomElement:
 
   // Redraw routine.
   custom-draw canvas/Canvas:
+    if not png_: return
     y2 := 0
     while y2 < h and (canvas.bounds-analysis 0 y2 w (h - y2)) != Canvas.DISJOINT:
       png_.get-indexed-image-data y2 h
diff --git a/tests/gold/three-color-bitmap-2-visualized.toit.png b/tests/gold/three-color-bitmap-2-visualized.toit.png
index a40ab18e46209851c6168e92f93f421073deb5f8..ac63822c01060199ded5e8ceb4e09cce8218c4bd 100644
GIT binary patch
literal 2401
zcmZux3piAH8=sXCL*uecb`gEpGGkm*x=k}KA0}x!<{D*OrtQ&eg%X8fP^hHK*<6xo
zGQ(UDGECA$a+#&XkiN2AQ0dd!NEeblL%V%?zVp22Iq(1X{?7aU-uL{^Ka&*Tvjp)Y
z0tSOE@$>ZpU@-Vf7)%4Nu?RvYW|@5Gp+oW~d(Y0!LN0XQY%jb5Vc+|C5y){nN4qZ>
z!kn~W&izvUr~+78I!LnlJkV+halc%(m!H4NYH+`o6LYYIT4zMNW<+~Nge-W37%Vp_
zZw4W&>jvi|<*AtI{kG)?<_roYjOG)vCY<#C%`v;yjyvCGmyqVbpYGUpO%FHhcq%Um
zF8YXHpK{w@S3kw_?Y*m)YG&`~AM;KsF>FIB(QT3qLe=CFz9f-YNU!dy=w8+=8R8~?
zM~EeDAgZ2uzFpC+9kEz|VuuDEFj<9t-E!6DaM?#T2XNG~<N#YW9uU^T<3XPyUI@;M
zR_~utYq4kmJ&+m)1{*k8`69DAqMm+S_Q#5g`>ZytEU~H>cYIMcZLp&~rm0o$9v-ko
z@+r{-T{&~e%3q^r1NXYJNGEbuW83gFG20tYwM9PrpRguZE(xZTqigLBd@!KgsBoy)
z(2WQChak$$9IF<@QOW3xhXXS0TwA8*5*uN^Kh&JGLB9wpND-gZ#?eiE#mzs7&S-Bp
zHEO0e?go9vTyHrV0QGGhU8ySLf=sxXTjEK*9q#p9RZO$sCVso^YCq7ct0`kXdBZyi
z(%I63Slq@Sccgb17x+P)N5+(@hHu?P_wJ&JVqm%qu-}GaM9}r*nqo|)RpR?Xz)?eB
zGI_XE)ssF~<6*-{9TMqg`Ky*F>LA7?B}GbPSE1#+^xzytU&7gfzMYO*CFIl5Q#tuz
zu9eI|Vehe*2%z6Jhn%@(r|nYB6NoS=^Sbis3lD1nKDf=lGLM!+lXr6T^WPH_%$#y4
z^E5p*?GvKh!$*-)hZ1)=EGriFcR&*{FX|#!O#fM}d?VKlk?KWI!p_p#;on)S1<%T2
zPAZlFIF)e7oTG2JI69F16N>#_xUS+ql)LEy0`UdIORG{{0<bl_>V(dy<i1(&SrdX=
z^`4$}0T(ep^G8C}Z^w!#IH78OAQ5xl&}vi0zVY>v^EfB>ef*14Pdp>DI*XwX&S`b3
zzkw%<?oK-u%$WH~nuTR94jDSyVJDcyM6Knwp?#xZ9?$1v_9`W-0s%!|a3n>ZR9Kl*
zcpAT-A{VQ7#N%7M>&Ni1q{v2;n>V<vr+cse=Dz!fzeH)^>;rkYaWcUwi~HYBpzgf_
z$TrBxXet`vSnL0W4Yt!xMxXKoO98Odh$1$k2tB^~d?JOf^qt2c|4vZ)M%Gx+Awg3}
zCYq9o-X=hAvlWwV#s2AEeJ@b#1&T;>_?)lK>|z3eko{Ao<(n!*vS`j0=7mx(d=1j4
z)&x<N@e<|V=f{HQMD5P}TG;CSnsN4>J}GF$C8fW*fpOND9$>bZyK)`&&z2)0O(k9b
z%Bxu_HcPt@p8ZVFWmjVBHW4V?br0OK`}bCZiI>KfZ?0gs=H|<+Ip+4U5dnlwy{Eh3
ztl=5+E9;V~tvBnjSaE=>XaCPEG4BjI_dFo;t@(8=+|4!3+JyX^9LUJ~WqXVKobuqF
z_@tDjd*X|EyN>Rca;wH~6y9v`dNi6QOCwQRRzUn6)aMAah%0|Yn<0z5H+@fX^>n8a
z7>t8^4|5vdxj((_u@W<QHvfkv2TTkcj35mAtg(>tq@QBA?QVrz>Go+=E;v!1;b^rB
zjpT<SYwey|gg}PcQo~qBE;ZBx%h`^<uVIWZj~CdLp0%Lv(v{ih3d<hJYDV~g^QxdB
z4_Im*ciq|m!oK0C2}WZthzNDAe%I(hMaVutfd`>18FO<Lvrjo4ud9#)%dh7Z{&>{s
zB9zS9<Q(|RtLno;1&Ar&6#BgMz?Iu~jaBVPOf@_x8s0<Q`|xU64~`)S+f8NL)zGyE
z)rCleeJqPZ6@j$Sf^ho7N0B1$L+g<XN_8tmck22?TL}f8^vH_M*vX904S}Q;t#&WV
zF34t1O7FyOv8J;*ha|lbf>dmhkQWe3&%^eg!Ir*VT__tN?brfO6os*LLfv}^h2|wZ
zmpx)$KGpP`7*9oLZP}<67zhW08^;*(O_ORa!anVdKSUKUKW+aQ{rCxw(;M}zsLvLk
za^nuE3*!(2U-+fG+VKw=lhL}Urs#w}#CI3U!Q?6)GTyiLf?1ca(}Q8CrZ`AxHo5EZ
zYt@F5GF+g@bbIIJ+|H`*M${Upz4g)#6x$E=sc(&^V=WUoHAc_EI-mF%@oESUZvgLy
zixu$WPlxR%y9TnqX*#L;+KtaWetO3#f~<6>3nRP$B)Kby!K%1S3qc>PZD34>P!Z^S
z2#4l`DJ@0_%gAK(+*U>Xy;YCapQHca`FUNc;?9SU@Jb^LWI?O%zYPJ@+YunJ0^C6G
zfsmEFITNJMS=y{1*+6OoEi^GY)G*sdA{V6lT{&YQ^-pI)D=6frO*N7>L%1fU^2}H4
z`K@I>@7$|ePjAc~jfyyBeZ>61VB0?syCXb&8I*4!`hSQEp&Jc}eXXsZKg=+SWc?f-
zH1Po`H}R$}JIWP4&|dk@{T0xc@RHvP#d_^ucptehFlN7Tg&!PGyuMJz>gSbeW%TyF
zE|BZ2ubu>?PrXwARO<f<mu6uEwKR?`8k?DV9Q!0!eE@~#%mfC7FSgfNa2hRKBrhsA
Vtdm`IoO!Lr{k#Lb$~~CezW|ZDMY{k1

delta 1234
zcmaDT^qXsf7&oH<6Egz?!%5Tfe-jnOnOJovTBX;|b?mzBAmF;3^<Kq$?;j$2J-)@Q
zct3e@MP|*ZDa$-p*~Aw)i8FTYIe*~5@?e`s?Z<4BSG@c=Q(iwcbN))^rDvuTy>B=i
z7H9qP@zOmdD|S{dT{`d1tjJYUvcuFEbR`{hCkM^aT{LSc-xQ<ZQ_9TOcrsT?UJAND
zVH)%PYqLJ<U#hOx@ZY~64`k4%6AfSQPF^9d-{0Z=I(7E$sZp;^_Rd`DwKFZ1>B1z2
z7~SJVwLi++XZ`){plQ7Hj`@QHQ@hW_z7N<It?$1!dL_`_88CY}4}1;U?0@Mlb6?cY
z#p0K_GvB7Z49mK?c<DKv&{L+`!VS|{9#pNoss3^zLw$d~YFN_KoxyR+Q>I@$70kZt
zi<|dc$u(alXQi?Mt=;0p*uM5n_>TqNtEE%3i%T56=e}Gz|Bmg06;n??z1&sY^2sPF
zGAjFFZ|gKG<A|5)S5NUQP-V<$W$KHnd>j5Fy(LOte{CtRIar&GLBe0<mw%IkF2zmz
z#Z>xRgHN@7=^37|U!Gfym@_;Xq7;E)X*d7!XG6(|hA91L?OZ*!ZIQ2h^#4A2$LPM+
zWY%g&+dVl~PiHK>7{inGu60Vbar4x=ptU{>QAQ17tTJ1QjBadpysLaAE3)TxO2GEF
zLFrX5)%kfM?oZYWuW;@TSg3P#;k5aA+)@2gtc;^TuB~TTpvs&Pcwk}4rI(g7Urh`-
z%@-Oq6X;w?Z~MxG1HZ(V$a~#79kk!Ua?%td<EWMDwIQI`*rJhe?i8z)L#1W__x-e$
z#(Td^-p%e~tG)k@^qwi{OYgI7xia(9nwb4>Qy6qP9kfLZJ`3MzSSRRpiZ9f@Q7?D%
zm6>tBPVQyyi>}|f=jg8@R_@d-MV0rTife0@rfs?8ziO(agE!L!E=HOCZ*8Wn|IB@*
z>gKbjub%`2fdiwF@pX03>Dnr(&Cabx_sVp(Kbl`MAt;?q`|pydnT%Uh7}f?HxRT$t
zFXrH$Dfc)2IO^pE^3Klc1A*G-WnalH+|v^_&uU8ink7?a)*tk;UkOR8-M~1@oMr#S
zUww6I=CY8?*-Ov$0HfOa!G@`7yC2%cE!?AX_4H|{XaBr4jTb|MT?iEH+k!4<E&4Ju
zN=|-5nuqt<32xe|sn^$=hCO5aS;98|oCSkISQ03ay?0r0Us5A=*%WuSHNae8ykzM<
z#d_W2^=mf@X@iiF{2@Nhrl}F08zv>Fh6$}viRhflqP-EwIp_uCcy18V<^&2K@j_E`
z|J$tpZ}xxsz5n<1`}TY?hc-{L?R!(0(yv@CbMx^DIrncCn~qOJ2+cTt%;uW~&_y88
z$t@g8lP7Zs*P|$T+%ffyT5__S^k<-*8$rgYC7VlveW4omFXuU57Xw41LYwTliU;w+
zX5Z3;d27oHG(Fn2J}>kNS?LvWlPh$Q7Z8Eiom!!tTG0@3FgtLmR$!_&L>$CcT@|9b
oN^ebz7L@bU+tiv7SWZE}2gW5k&S?ac7&L?Up00i_>zopr0H}O9SO5S3

diff --git a/tests/three-color-bitmap-2-visualized.toit b/tests/three-color-bitmap-2-visualized.toit
index 93b649b..9eb85eb 100644
--- a/tests/three-color-bitmap-2-visualized.toit
+++ b/tests/three-color-bitmap-2-visualized.toit
@@ -37,12 +37,20 @@ main args:
   heater-white-bg-uncompressed := file.read-content "tests/third_party/pictogrammers/heater-white-bg-uncompressed.png"
 
   display.add (Png --x=100 --y=32 --png-file=heater-red)
-  display.add (Png --x=184 --y=32 --png-file=heater-2-bit)
+  display.add (Png --x=184 --y=32 --png-file=heater-red --id="2-bit")
   display.add (Png --x=268 --y=32 --png-file=heater-bw)
   display.add (Png --x=352 --y=32 --png-file=heater-white-bg)
-  display.add (Png --x=436 --y=32 --png-file=heater-bw --color=0xff0000)
+  display.add (Png --x=436 --y=32 --id="updated-later")
   display.add (Png --x=520 --y=32 --png-file=heater-2-bit --palette-transformer=SwapRedAndBlack)
 
+  display.draw
+
+  updated-later := display.get-element-by-id "updated-later"
+  updated-later.png-file = heater-bw
+  updated-later.color = 0xff0000
+
+  (display.get-element-by-id "2-bit").png-file = heater-2-bit
+
   display.add (Png --x=100 --y=120 --png-file=heater-red-uncompressed)
   display.add (Png --x=184 --y=120 --png-file=heater-2-bit-uncompressed)
   display.add (Png --x=268 --y=120 --png-file=heater-bw-uncompressed)

From ce764029bf70d4e48010e6a71fd336cfd8d0918d Mon Sep 17 00:00:00 2001
From: Erik Corry <erik@toit.io>
Date: Fri, 8 Mar 2024 15:37:29 +0100
Subject: [PATCH 7/8] Fix setting null PNG file

---
 src/png.toit | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/png.toit b/src/png.toit
index ebc666d..11f04ff 100644
--- a/src/png.toit
+++ b/src/png.toit
@@ -100,14 +100,20 @@ class Png extends CustomElement:
     be drawn with the given color.  Alpha (transparency) will be
     unchanged.
   */
-  color= value/int -> none:
+  color= value/int? -> none:
     invalidate-palette-transformer
-    palette-transformer_ = SingleColorPaletteTransformer_ value
+    if value:
+      palette-transformer_ = SingleColorPaletteTransformer_ value
+    else:
+      palette-transformer_ = null
 
   png-file= value/ByteArray? -> none:
     invalidate
     png_ = create-png_ value
-    set-size png_.width png_.height  // Also invalidates if the size changes.
+    if png_:
+      set-size png_.width png_.height  // Also invalidates if the size changes.
+    else:
+      set-size 0 0
 
   set-attribute_ key/string value -> none:
     if key == "color":

From 482e5ef55f3897483a8eadda627d4fc36def0d17 Mon Sep 17 00:00:00 2001
From: Erik Corry <erik@toit.io>
Date: Fri, 8 Mar 2024 16:18:56 +0100
Subject: [PATCH 8/8] Reduce peak memory use

---
 src/png.toit | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/png.toit b/src/png.toit
index 11f04ff..81049f2 100644
--- a/src/png.toit
+++ b/src/png.toit
@@ -109,6 +109,7 @@ class Png extends CustomElement:
 
   png-file= value/ByteArray? -> none:
     invalidate
+    png_ = null  // Reduce peak memory use.
     png_ = create-png_ value
     if png_:
       set-size png_.width png_.height  // Also invalidates if the size changes.