Page 2 of 5

Re: Community widgets

Posted: Tue Nov 22, 2016 3:46 pm
by [-hh]

Edit (Oct10, 2018).
OrientedText_v1.5.2 is now available as "fat" widget for LC 8 and 9, see ... 29#p172129 .


Hi 'TheSlug',

added/changed below a few lines to/of your code:
  • put opacity into the alpha of the colors
  • drawing a rectangle around text dependent of fontSize
  • rectangle may be rounded (roundRadius=0 to 64 choosable)
  • added some comfort to the property editing
I hope that's what you wanted.

Edit. Added option for blend mode 'destination out' --> v1.0.2

This widget is for LC 8.1.1 (because the widget format was changed with 8.1.1).
Edit. For an updated version for LC 8 > 8.1.4 and another for LC 9 (which have again a different widget format): See this post
There is now OrientedText 1.5.1 (Sep 17, 2017) available, with many new documented features, especially 'click-through-transparency' (see the demo-stack for an example how to use this).

Re: Community widgets

Posted: Tue Nov 22, 2016 5:30 pm
by Zryip TheSlug
Thanks hh,

This is exactly what I'm trying to create since 2015. With the label transparent. Very frustrating as I was far of the logic and far of the insetRect handler.

I have some experience with dynamic SVG, was full of widget projects trying to adapt what I have already done in DSVG, but all my adaptations were failed. Widgets are definitively not my playing field.

By the way, I have not the com.livecode.library.widgetutils in my documentation. When this library was added?

Re: Community widgets

Posted: Tue Nov 22, 2016 6:36 pm
by [-hh]
TheSlug wrote:This is exactly what I'm trying to create since 2015. With the label transparent.
If you mean 'fully transparent' then you can insert the line marked 'optional' for the ink. This lets you look through the label text to your card (or whatever is behind the widget).

Code: Select all

public handler OnPaint()
	set the paint of this canvas to solid paint with mTextColor
	set the blend mode of this canvas to "destination out" -- optional
	fill text mLabel at center of my bounds on this canvas
 end handler
[Edit. Added this blend mode as an option to the above lcb file]

module com.livecode.library.widgetutils is from April 2016,
see ... ns/widgets

Re: Community widgets

Posted: Tue Nov 22, 2016 7:44 pm
by Zryip TheSlug
"Destination out", ok thanks hh.

Re: Community widgets

Posted: Fri Aug 18, 2017 11:35 pm
by [-hh]
[#51] Community LCB widget "TextBanner" v0.0.1

The textbanner widget displays running or static text as one-liner.
  • Start/Stop the scrolling of the widget by click.
  • Grab the widget by rightClick.
  • Use the scrollWheel over a _stopped_ widget to move the banner text horizontally, hold down "a" while scrolling for an accelerated move.
  • You can get and set the following properties of the widget by script or in the property inspector:
    • TBrunspeed <number>, TBscroll <boolean>, TBscrolltoright <boolean>
    • TBtextfont <string>, TBtextsize <number>, TBtextbold <boolean>, TBtextitalic <boolean>
    • TBusefill <boolean>, TBusestroke <boolean>, TBstrokewidth <number>
    • TBtextcolor <rgba>, TBfillcolor <rgba>, TBstrokecolor <rgba>
    • TBcrreplace <string>, TBusedate <boolean>, TBusetime <boolean>, TBoffsetifstatic <number>, TBtext <string>
    get the <property> of widget "TextBanner"
    set the <property< of widget "TextBanner" to <value>
  • In TBtext, if you use or paste text including tab or CR of LF or LFCR, these will be replaced by the TBcrreplace string.
  • TBusedate or TBusetime put the date or time components of the internet date before TBtext.
  • For changing the widget's height change TBtextsize.
Installation for use in LC 8 > 8.1.4 or in LC 9 latest:
Use a "few-clicks-solution": See this post

If the widget is installed then add it to an active stack by double-clicking it's icon in the tools palette (dragging has a bug in 8.1.6: hides the tools palettes).

The LC 8 version runs in LC 8 > 8.1.4 on Mac/Win/linux (also the attached demo stack).
The LC 9 version runs in latest LC 9.0.0-dpx.

Re: Community widgets

Posted: Wed Sep 13, 2017 1:04 am
by [-hh]
For updates I put an always actual hh-widgets-un-installer on "Sample Stacks".
Sorry, this i not available any more. Instead use for
downloading widgets and corresponding sample stacks:

(EU) or

To create a widget ...
  • choose the browse tool and doubleClick slowly the widget's icon on the Tools palette OR
  • use "Create widget ..." by script OR
  • use "New Widget" from the Object menu.
Then, after installation, you may load an appropriate (or all) demo stack(s) to that (or all) widget(s).

IMPORTANT. Dragging from the Tools palette may fail (=IDE bug).

Re: Community widgets

Posted: Wed Sep 13, 2017 1:16 am
by [-hh]
[#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),
++ 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.

Re: Community widgets

Posted: Wed Sep 13, 2017 8:42 am
by mrcoollion
Thanks hh,

This is really great stuff.... :D

Re: Community widgets

Posted: Wed Sep 13, 2017 3:35 pm
by livecodeali
This is excellent Hermann! So many properties :D

Re: Community widgets

Posted: Sun Oct 15, 2017 9:21 pm
by [-hh]
[#53] Community LCB widget "hhColorPicker" v1.0.0
[Updated, see viewtopic.php?p=171902#p171902 ]

The widget runs as "ordinary widget", sending a message "colorChosen <color>"
that you can use in your scripts (<color> is an RGBA-color*)
it runs as popup-widget (modeless dialog), stays on screen until you click
outside of it (cancelling) or you click "OK" (returning the chosen RGBA-color*).

Built-in is a picker for getting the color of any screenPixel (choose the
method as the using mouseColor or a snapshot). These are the LCS-methods
that yield good approximations as long as the clicked pixel is fully opaque
(else the values are weighted by the pixel's alpha value).

A demo stack shows the basic usage, for example when clicking a color swatch (graphic object).
Download the widget and the sample stack from
(EU) or
NOTE (HTML5). Unfortunately the current widget doesn't work in HTML5 standalones. I'll try to find out why not and to find workarounds.
* A RGBA color is a four-item string of 0-255 integer values. Item 1 to 3 are the usual LCS RGB-colors, item 4 is a transparency value that you may use for the blendLevel, see the demo-stack on "Sample Stacks). For example fully opaque red is "255,0,0,255", half transparent gray is "127,127,127,127".

Re: Community widgets

Posted: Fri Oct 20, 2017 12:27 pm
by pink
I can't get Icon Grid to install on 9 DP-9.

Actually, when I choose to install all of the widgets, icon grid and svg text don't get installed. (The other 4 get installed)

Re: Community widgets

Posted: Fri Oct 20, 2017 12:30 pm
by pink
okay, it helps if I check to see if there's an update first... I downloaded the new installer and everything installed fine on 9 DP9

Re: Community widgets

Posted: Mon Oct 23, 2017 10:47 am
by livecodeali
Popup widget uses a transient stack, and stack windows are not yet supported in HTML5 (see also, tooltips / option menus etc). We are currently working on a solution to this, although it remains to be seen how general it is possible to be.

Re: Community widgets

Posted: Wed Oct 25, 2017 11:19 pm
by [-hh]
Hi Ali,

I didn't even try popup widget, because menu buttons don't even work in HTML5 standalones.

Probably it is the use of a LCB timer.

LCS send in <time> works.
LCB schedule timer in <time> works, but only if <time> is significantly larger than the mean refresh rate of the browsers (around 64 ms?). Else, for example on Mac, the first reaction is the spinning wheel of death. The second reaction is the correct result, at about 1000 times the <time> slower than expected (seconds instead of milliseconds).

Perhaps it gives a work-around to create an own timer using LCS-send in <time> and checking against the LCS-pendingMessages?

Given time I'll test this and write a report with a demo stack.

Re: Community widgets

Posted: Wed Jan 10, 2018 11:04 pm
by [-hh]
[#54] Community LCB widget "TextEdit-Basic" v1.0.1 (Updated)
Improves input of HTML code in the property editor. Also added a demo stack.)

This is a basic TextEdit widget for LC 8 (8.1.5 and later)
[It is the 'widget version' of stack "HHTextEdit-Basic".]

It uses libbrowser and essential handlers of the browser widget source.
** It has NO dependencies (i.e. no extern libs to download). **
From several reasons I don't publish a LC 9 version of the widget.

Download the zip-file from below, unzip it and locate it from the
LC Menubar > Tools > Extensions Manager using the plus at top right.

On some platform/OS combinations dragging from the Tools palette doesn't work. Then doubleClick the icon in the Tools Palette or use Menu Object > New Widget > hhTE-Basic.

The widget has 40 properties available: Text, Filter (blur, sepia etc.)
and Transforms (rotate etc.). You can get/set them by ordinary script or
in the property inspector.

Tip: Go in browse mode to the property inspector and play with the
values/ sliders in tabs Basic, Contents, Colors, Icons (used for
filters), Text and Advanced (used for transforms). And don't forget
to edit while the text is transformed ...

(Due to differences in the underlying HTML engines on
Mac/ Win/ linux there is again the backColor setting ignored on
special combinations of property settings.)

Besides from that issue, the widget runs here without problems,
better than the stack version that uses the browser widget,
on Mac 10.12/Win 7+10/linux (Mint173-32bit and Ubuntu 1604-64bit).

For downloading the widget use the hh-widgets-un-installer from (Download: Sorry, currently not available). See also this post.