Add icon support to the Label element.

src/element.toit

@@ -11,6 +11,7 @@ import .one-byte as one-byte
 import .style show *
 import .pixel-display
 import font show Font
+import icons show Icon
 import math
 
 /**
@@ -106,20 +107,23 @@ abstract class Element implements Window:
     children = null
 
   x= value/int -> none:
-    invalidate
-    x_ = value
-    invalidate
+    if x_ != value:
+      invalidate
+      x_ = value
+      invalidate
 
   y= value/int -> none:
-    invalidate
-    y_ = value
-    invalidate
+    if y_ != value:
+      invalidate
+      y_ = value
+      invalidate
 
   move-to x/int y/int:
-    invalidate
-    x_ = x
-    y_ = y
-    invalidate
+    if x_ != x or y_ != y:
+      invalidate
+      x_ = x
+      y_ = y
+      invalidate
 
   border= value/Border?:
     if value != border_:
@@ -179,6 +183,12 @@ abstract class Element implements Window:
         invalidate
         border_ = value
         invalidate
+    else if key == "x":
+      x = value
+    else if key == "y":
+      y = value
+    else:
+      print "Unknown style key: '$key'"
 
   abstract type -> string
 
@@ -289,9 +299,9 @@ class Div extends Element:
       invalidate
 
   set-attribute_ key/string value -> none:
-    if key == "width":
+    if key == "w":
       w = value
-    else if key == "height":
+    else if key == "h":
       h = value
     else:
       super key value
@@ -334,6 +344,10 @@ class Label extends Element implements ColoredElement:
       orientation = value
     else if key == "alignment":
       alignment = value
+    else if key == "label":
+      label = value
+    else if key == "icon":
+      icon = value
     else:
       super key value
 
@@ -352,6 +366,9 @@ class Label extends Element implements ColoredElement:
       left_ = null  // Trigger recalculation.
       invalidate
 
+  icon= value/Icon -> none:
+    font = value.font_
+    label = value.stringify
 
   /**
   Constructs a Label.
@@ -377,6 +394,7 @@ class Label extends Element implements ColoredElement:
       --color/int=0
       --label/string=""
       --font/Font?=null
+      --icon/Icon?=null
       --orientation/int=ORIENTATION-0
       --alignment/int=ALIGN-LEFT:
     color_ = color
@@ -390,6 +408,9 @@ class Label extends Element implements ColoredElement:
         --style = style
         --classes = classes
         --id = id
+    if icon:
+      if font: throw "INVALID_ARGUMENT"
+      this.icon = icon
 
   /**
   Calls the block with the left, top, width, and height.
@@ -569,7 +590,7 @@ class ClippingDiv_ extends Div:
   Invalidates the whole window including the decoration.
   */
   invalidate --x=x_ --y=y_ --w=w_ --h=h_ -> none:
-    if change-tracker:
+    if change-tracker and x and y and w and h:
       extent --x=x --y=y --w=w --h=h: | outer-x outer-y outer-w outer-h |
         change-tracker.child-invalidated outer-x outer-y outer-w outer-h
 

src/four-gray.toit

@@ -9,7 +9,6 @@ For use with e-paper displays with four tones of gray.
 
 import bitmap show *
 import font show Font
-import icons show Icon
 
 import .pixel-display
 import .two-bit-texture

src/gray-scale.toit

@@ -8,7 +8,6 @@ Constants useful for $PixelDisplay.gray-scale.
 
 import bitmap show *
 import font show Font
-import icons show Icon
 import .pixel-display
 import .one-byte
 

src/one-byte.toit

@@ -8,7 +8,6 @@
 
 import bitmap show *
 import font show Font
-import icons show Icon
 
 import .gray-scale as gray-scale_
 import .pixel-display

src/pixel-display.toit

@@ -10,7 +10,6 @@ See https://docs.toit.io/language/sdk/display
 import bitmap show *
 import bitmap show ORIENTATION-0 ORIENTATION-90 ORIENTATION-180 ORIENTATION-270
 import font show Font
-import icons show Icon
 
 import .bar-code
 import .element
@@ -769,7 +768,7 @@ abstract class Canvas:
 
   /**
   Helper for the $subcanvas method.  See that method for details.
-  The block, $create-block takes the arguments y and height, and it is
+  The block, $create-canvas takes the arguments y and height, and it is
     expected to return a Canvas that is a view into the current canvas,
     but only for the lines between y and y + height.  It can return null
     if that is not possible.

src/several-color.toit

@@ -4,7 +4,6 @@
 
 import bitmap show *
 import font show Font
-import icons show Icon
 import .one-byte
 import .two-color as two-color
 import .pixel-display

src/style.toit

@@ -624,6 +624,10 @@ class Style:
   constructor.empty: return EMPTY-STYLE_
 
   constructor
+      --x/int?=null
+      --y/int?=null
+      --w/int?=null
+      --h/int?=null
       --color/int?=null
       --font/Font?=null
       --background=null
@@ -632,6 +636,10 @@ class Style:
       --id-map/Map?=null
       --type-map/Map?=null
       .map_={:}:
+    if x != null: map_["x"] = x
+    if y != null: map_["y"] = y
+    if w != null: map_["w"] = w
+    if h != null: map_["h"] = h
     if color != null: map_["color"] = color
     if font != null: map_["font"] = font
     if border != null: map_["border"] = border

src/three-color.toit

@@ -8,7 +8,6 @@ For use with e-paper black, white, and red displays.
 */
 
 import font show Font
-import icons show Icon
 
 import .pixel-display
 import .two-bit-texture

src/true-color.toit

@@ -9,7 +9,6 @@ Functions and constants useful for the RGB $PixelDisplay.true-color display.
 import binary show BIG-ENDIAN
 import bitmap show *
 import font show Font
-import icons show Icon
 import .gray-scale as gray-scale_
 import .pixel-display
 

src/two-color.toit

@@ -10,7 +10,6 @@ For use with e-paper displays and the SSD1306 128x64 display
 
 import bitmap show *
 import font show Font
-import icons show Icon
 
 import .pixel-display
 

tests/horizontal-slider-visualized.toit

@@ -55,8 +55,8 @@ main args:
           "slider": Style {
               "background-hi": heat,
               "background-lo": cold,
-              "width": 120,
-              "height": 20,
+              "w": 120,
+              "h": 20,
               "horizontal": true,
           },
           "label": Style --font=sans10 --color=0xffffff,

tests/icons-visualized.toit

@@ -0,0 +1,86 @@
+// Copyright (C) 2023 Toitware ApS.
+// Use of this source code is governed by a Zero-Clause BSD license that can
+// be found in the TESTS_LICENSE file.
+
+import bitmap show *
+import font show Font
+import icons show Icon
+
+import pictogrammers-icons.size-40 show *
+import pixel-display show *
+import pixel-display.element show *
+import pixel-display.gradient show *
+import pixel-display.style show *
+
+import .png-visualizer
+
+main args:
+  sans10 := Font.get "sans10"
+
+  if args.size != 1:
+    print "Usage: script.toit png-basename"
+    exit 1
+  driver := TrueColorPngVisualizer 320 120 args[0] --outline=0x101010
+  display := PixelDisplay.true-color driver
+  display.background = 0x78aac8
+
+  background-gradient := GradientBackground --angle=180
+      --specifiers=[
+          GradientSpecifier --color=0xc0ffdd 10,
+          GradientSpecifier --color=0xc0ddff 90,
+      ]
+  background-gradient-element := Div --x=0 --y=0 --w=320 --h=120 --background=background-gradient
+  display.add background-gradient-element
+
+  i := 0
+  buttons := []
+  [KANGAROO, DOG, CAT, FISH].do: | icon/Icon |
+    button := Div.clipping --classes=["button-outer"] --x=(8 + i * 74) [
+        Div.clipping --classes=["button-inner"] [
+            Label --icon=icon
+        ]
+    ]
+    i++
+    buttons.add button
+    display.add button
+
+  rounded-35 := RoundedCornerBorder --radius=35
+  rounded-30 := RoundedCornerBorder --radius=30
+  outer-background := GradientBackground --angle=150
+      --specifiers=[
+          GradientSpecifier --color=0xe0e0e0 0,
+          GradientSpecifier --color=0xe0e0e0 45,
+          GradientSpecifier --color=0xb0b0b0 55,
+          GradientSpecifier --color=0xb0b0b0 100,
+      ]
+  inner-background-off := 0x202020
+  inner-background-on := 0x602020
+
+  // Also includes the initial style parameters.
+  off-style := Style
+      --type-map={
+          "label": Style --x=30 --y=47 --color=0xc0c0c0 {"alignment": ALIGN_CENTER},
+      }
+      --class-map={
+          "button-outer": Style --y=20 --w=70 --h=70      --border=rounded-35 --background=outer-background,
+          "button-inner": Style --y=5 --x=5 --w=60 --h=60 --border=rounded-30 --background=inner-background-off,
+      }
+
+  // Only includes those things that are different in the on state.
+  on-style := Style
+      --type-map={ "label": Style --color=0xff4040 }
+      --class-map={ "button-inner": Style --background=inner-background-on, }
+
+  display.set-styles [off-style]
+
+  display.draw
+
+  4.repeat: | on |
+    4.repeat: | i |
+      if i == on:
+        buttons[i].set-styles [on-style]
+      else:
+        buttons[i].set-styles [off-style]
+    display.draw
+
+  driver.write-png

tests/package.lock

@@ -1,6 +1,7 @@
 sdk: ^2.0.0-alpha.121
 prefixes:
   host: pkg-host
+  pictogrammers_icons: toit-icons-pictogrammers
   pixel-display: ..
   png-tools: toit-png-tools
 packages:
@@ -13,6 +14,11 @@ packages:
     name: host
     version: 1.10.0
     hash: e1c11a0e0bf65fe810520e8d893e554a8fe33b78
+  toit-icons-pictogrammers:
+    url: github.com/toitware/toit-icons-pictogrammers
+    name: pictogrammers_icons
+    version: 1.0.0
+    hash: 5ac660cc480d5da1fec72e1b24d425ce978419b7
   toit-png-tools:
     url: github.com/toitware/toit-png-tools
     name: png-tools

tests/package.yaml

@@ -4,6 +4,9 @@ dependencies:
   host:
     url: github.com/toitlang/pkg-host
     version: ^1.10.0
+  pictogrammers_icons:
+    url: github.com/toitware/toit-icons-pictogrammers
+    version: ^1.0.0
   pixel-display:
     path: ..
   png-tools:

tests/slider-rotated-visualized.toit

@@ -52,11 +52,9 @@ main args:
 
   style := Style
       --type-map={
-          "slider": Style {
+          "slider": Style --w=20 --h=100 {
               "background-hi": heat,
               "background-lo": cold,
-              "width": 20,
-              "height": 100,
           },
           "label": Style --font=sans10 --color=0xffffff,
       }

tests/slider-visualized.toit

@@ -55,8 +55,8 @@ main args:
           "slider": Style {
               "background-hi": heat,
               "background-lo": cold,
-              "width": 20,
-              "height": 100,
+              "w": 20,
+              "h": 100,
           },
           "label": Style --font=sans10 --color=0xffffff,
       }