[#52] Community LCB widget IconGrid_v2.1.0 (Updated)
(New in v2.1.0: visible, clickable and draggable properties)
(iconGrid_v2.1.1 is now available as "fat" widget for LC 8 and 9, see viewtopic.php?p=171902#p171902 . The functionality of v2.1.1 is as described below.)
IconGrid is a widget that displays a rectangular grid of draggable colored rectangles (optionally rounded) that may serve as "buttons".
* You define the grid's number of elements by selecting ROWS x COLUMNS.
* Each grid element has "properties":
++ SVGPath (especially all named SVG icons),
++ TEXT (may be multi-line),
++ IMAGE (from local disk or server, jpeg or png),
++ FILLCOLOR and STROKECOLOR,
++ NUMBER (only readable for identifying the element),
++ visible, clickable and draggable
The fillColor/backColor is used for the fill of the icons, the strokeColor/foreColor is used for drawing the Numbers, the Text, the outline and/or fill of the SVGPathes and the border of the icon. Each of the properties can be hidden. If not hidden, the numbers are drawn at topRight, the SVG Icons centred (optionally at bottomRight) and the text at bottomLeft of (optionally: centered in) each grid element.
* Images and SVGs are proportionally scaled so that they fill the gridElement if their scalefactor (which you can set) is 1.
All images except a few demo images are external. ImageData is not saved by the widget (only pathes as a first try). You can load images or additional SVGs at startup or write them to a temporary folder from your stack to load from.
* LAYERING. The order of drawing is is as follows: Color (Fill), Image, SVG, Text, Color Color(Stroke).
So you have the option to put Text and an SVG on top of an image. The SVG can be clipped to the grid element's opaque region. The image is always clipped by the (rounded) rectangle of the grid elements.
* There are two "resizing modes".
++ mode AdjustSizeOfWidget:
adjust the widget's size to the number of grid elements and their (unique) element size
++ mode ResponsiveSize:
adjust the size of each grid element to the widget's size.
Note. For some resizing actions the ResponsiveSize or AdjustSizeOfWidget modes have to be set by the widget. Thus their setting can not be made available (not even correctly shown) in the PropertyInspector.
* The most basic grid options are:
For the widget or (uniform) for each grid element: GridRows, GridColumns, TotalWidth, TotalHeight, GridWidth , GridHeight, GridDistance, GridLeft, GridTop, GridRadius (rounded corner), gridStrokeWidth, FillColor, GridTextFont, GridTextSize, ShowSVGPathes, ShowTexts, ShowNumbers, ScaleFactorSVG, ScaleFactorImg, AllImagesMode. More Options for rotating the widget or all elements in steps of 90 degress and for reordering the grid elements are available.
* There are three "click modes".
++ CLICKED a grid element.
++ DRAGGED one element and dropped it to reorder the grid.
++ CANCELLED is leaving the widget's rect while dragging (order is restored, the dragged element snaps back to the drag start).
You'll then get an info as property THE CLICKINFO of the widget:
The click mode, the clicked/dragged element's number, the start-from grid-cell, the drop-to-grid-cell, and the moved object's special properties (objectPath, objectText, objectImage and objectColors).
* REORDER. Besides dragging it is also possible to reorder the grid elements by script using the property gridOrder, see also the PropertyInspector/Custom. You can there simply drag and drop the numbers to reorder the grid.
* CANCEL DRAG. While dragging the widget's rect shows a dashed outline. Leaving this dashed rectangle with the cursor's hotspot cancel's the drag and the dragged element snaps back to its grid cell where it came from.
* GRAB. Click any pixel of the widget's background (whether opaque or not) and then drag slowly to grab the widget.
* TESTMENU. If the property useTestMenu is true then rightClicking or doubleClicking the widget shows some actions for testing some basic properties of the widget.