Mad Pink's Ultra Deluxe Control Panel Uber-Widget
Greg (Pink) Miller
livecode at pink.guru
Wed Jan 8 10:54:49 EST 2020
I've been meaning to share this with the community for a while, but life
and work have been getting in the way. I haven't been able to work on it in
I've been working on this widget for a while and it needs more work and
testing. Actually, this started off as a group of individual widgets, but
there was so much code overlap among them I decided to combine into one.
There are a number of fixes I still need to take care of and a number of
features I am still planning on adding. I am, however, already adding it to
programs with success. Going forward, I am working hard not to make
property or control changes that will break existing implementations (as
we've all done in the past), I already have a few systems in place to
prevent property calamities, so feel free to stat using if you like it.
Releasing under CC BY-SA 4.0 license.
This widget is a panel which can hold a variety of different kinds of
controls, each individually customizable. Any number of controls can be
added to the panel. Control types to date are:
-Button bar/grid: groups of buttons that can be used as action buttons
(posting a message), single selects (like radio buttons) or multiple
selects (similar to checkboxes)
-Button wheel: circular wheel with buttons and capabilities similar to the
-Switches: clicks a value true or false, animation pending, currently just
looks like a checkbox
-Sliders: you know, they slide and change a value
-Progress bars: essentially sliders with a handle to grasp
-Dialog/text box: one of those pesky little text displays telling you stuff
-Numeric Up/Down Adjusters: a value with 2 buttons that increment or
decrement said value
There are default properties for each control that will be used, however
each control (e.g. button, switch etc..) can be configured with its own
colors, icons, fonts and such.
-"Bottom buttons" (a group of up to 3 buttons at the bottom of the widget
which can be used for "OK," "Cancel," and "Reset" type features. These
buttons post a message to be scripted by the user)
-Form backdrop (essentially a set of labels on which you can add fields)
-Overlay mode (draws a box of a set size and then the rest of the widget is
transparent/translucent... when stretched across the entire card it forces
user input before anything else can be touched)
-Controls, color schemes and properties can be saved and loaded as "sets"
to allow one widget to quickly change what controls you are viewing
-SVG paths can be stored for use in controls
There are a plethora of other things I am working to add and enhance
-allowing for a mix of control types in the same panel
-control pages with tabs to navigate through them
-Output display box, which can present some form of text, number,
calculation etc.. when there is interaction on the control panel
-need to find ways to optimize the code some more, especially in redrawing
The widget can be found here:
In addition to the source code, I have a packaged extension file and added
a "Control Test" stack which I've found helpful for trying to break things.
There is a wiki with instructions which I would also love feedback on. I've
already got a list of issues piling up as you will see. I have a planning
board that is full of my own idiosyncrasies and may not be intelligible to
normal people, so view at your own risk.
So far I have only tested this widget in MacOS and Windows applications, I
have not tried it out in Linux, Android or iOS apps.
You can find my
More information about the use-livecode