shaffex

TEST

<body>
    <vstack padding="">
        <lazyvgrid border="color:black;width:" spacing="0" columns="8" spacing2="0">
            <foreach dataModel="matrix8x8">
                <rectangle aspectRatio="fit" foregroundColor="$dataModel.p" contentShape="rectangle" border="color:black;width:$gridWidth" onTapGesture="selectItem:selectedItem\\editItem:dataModel:matrix8x8;p:pixelColor"/>
            </foreach>
        </lazyvgrid>
        <text bold="">Preview:</text>
        <lazyvgrid width="80" height="80" spacing="0" border="color:blue;width:1" columns="8" spacing2="0">
            <foreach dataModel="matrix8x8">
                <rectangle aspectRatio="fit" foregroundColor="$dataModel.p" contentShape="rectangle"/>
            </foreach>
        </lazyvgrid>
        <stepper key="gridWidth" value="0.5" range="from:0;to:1;step:0.25;type:double">Grid Width ($gridWidth)</stepper>
        <hstack>
            <customview src="predefinedColor" c="black"/>
            <customview src="predefinedColor" c="white"/>
            <customview src="predefinedColor" c="red"/>
            <customview src="predefinedColor" c="green"/>
            <customview src="predefinedColor" c="blue"/>
            <customview src="predefinedColor" c="yellow"/>
            <customview src="predefinedColor" c="orange"/>
            <customview src="predefinedColor" c="purple"/>
        </hstack>
        <colorpicker key="pixelColor" value="yellow">Select Color (current color: $pixelColor)</colorpicker>
        <button action="loadDataModel:dataModelName:matrix8x8;src:url:https://magic-ui.com/Examples/DataModels/pixel-data8x8.json">Clear</button>
    </vstack>
    <customview id="predefinedColor">
        <zstack>
            <button action="setColor:pixelColor=$c">
                <circle foregroundColor="$c"/>
            </button>
            <circle stroke="lineWidth:1" foregroundColor="primary"/>
        </zstack>
    </customview>
    <datamodel key="matrix8x8" type="json" src="url:https://magic-ui.com/Examples/DataModels/pixel-data8x8.json"/>
</body>

Screenshot