diff --git a/src/element.toit b/src/element.toit index 8413929..f695998 100644 --- a/src/element.toit +++ b/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_: @@ -342,6 +346,8 @@ class Label extends Element implements ColoredElement: alignment = value else if key == "label": label = value + else if key == "icon": + icon = value else: super key value @@ -360,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. @@ -385,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 @@ -398,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. @@ -577,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 diff --git a/src/four-gray.toit b/src/four-gray.toit index 9313287..549b073 100644 --- a/src/four-gray.toit +++ b/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 diff --git a/src/gray-scale.toit b/src/gray-scale.toit index 441cebd..e8557ab 100644 --- a/src/gray-scale.toit +++ b/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 diff --git a/src/one-byte.toit b/src/one-byte.toit index dce5c8b..fed6717 100644 --- a/src/one-byte.toit +++ b/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 diff --git a/src/pixel-display.toit b/src/pixel-display.toit index d679d0f..aae92b7 100644 --- a/src/pixel-display.toit +++ b/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. diff --git a/src/several-color.toit b/src/several-color.toit index 5b76ff9..66bbec5 100644 --- a/src/several-color.toit +++ b/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 diff --git a/src/three-color.toit b/src/three-color.toit index 1044ef8..d267e25 100644 --- a/src/three-color.toit +++ b/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 diff --git a/src/true-color.toit b/src/true-color.toit index 37762ff..429f0bc 100644 --- a/src/true-color.toit +++ b/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 diff --git a/src/two-color.toit b/src/two-color.toit index 8b38d9b..dbd87db 100644 --- a/src/two-color.toit +++ b/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 diff --git a/tests/gold/icons-visualized.toit.png b/tests/gold/icons-visualized.toit.png new file mode 100644 index 0000000..be7cf6c Binary files /dev/null and b/tests/gold/icons-visualized.toit.png differ diff --git a/tests/icons-visualized.toit b/tests/icons-visualized.toit new file mode 100644 index 0000000..e79b436 --- /dev/null +++ b/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 diff --git a/tests/package.lock b/tests/package.lock index e95b5c6..1978c5b 100644 --- a/tests/package.lock +++ b/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 diff --git a/tests/package.yaml b/tests/package.yaml index cba9ef5..f68aab3 100644 --- a/tests/package.yaml +++ b/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: