Community widgets

[[-hh]]

(February 2020): https://hyperhh.de/widgets/ or https://hh.on-rev.com/widgets/ is now the overview from where you can find all updated widgets (and their sample stacks), especially most of those that were "unlinked" below (later) in this thread.

[#42] Community LCB widget SVGText v1.0.0
(SVGText v1.5.2 is now available as "fat" widget for LC 8 and 9, see
viewtopic.php?p=172129#p172129 .)

Because the beta-extensions store doesn't work, I start a community extension collection here. Because there are already great widgets around, especially by Trevor DeVore on github, I start numbering with 42

SVGText is enclosed in a package "community.livecode.hermann.hhsvgtext.1.0.0.lce" that is enclosed in the zip.
There are detailed dictionary entries for the widget. Instead of a user doc you may play with the demo stack svgText-Demo.livecode, also enclosed in the zip.

This widget is for LC 8.1.1 (because the widget format was changed with 8.1.1).
Edit. For an enhanced 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 via that link v1.5.0 available that adds an 'click-through-transparency' option. The widget sends a message and you can use it or not for one or all widgets. For an example how to use it see the demo-stack that is also available with hh-un-installer.

It is a widget for displaying short pieces of TEXT (one line) as a svgPath (like svgIcon for symbols). Of course you can get the path and use it for the SVGIcon widget and now also vice versa. Fill ('background') and stroke ('foreground'/outline) can use color or pattern (images), see the sample stack.

[[-hh]]

[#43] Community LCB widget ClockAround v1.0.1
(ClockAround_v1.2.2 is now available as "fat" widget for LC 8 and 9, see
http://forums.livecode.com/viewtopic.ph ... 29#p172129 .)

ClockAround is enclosed in an extension package "community.livecode.hermann.clockAround.1.0.1.lce" that is enclosed in the clockAround100.zip.
There are detailed dictionary entries for the widget. Instead of a user doc you may play with the demo stacks clockAround-test1 and clockAround-test2, also enclosed in the clockAround101.zip.

It is a widget for displaying an analogue clock by using Arcs, Balls or Hands (see the demo stack). The offset from UTC/GMT, the "time zone", is adjustable by any amount of seconds in the range -12*3600 to 12*3600. There are several options for the display (ticks, hours-/minutes-/seconds-color and 24 hours or 12 hours display.)
The inner disk of the clock is "FengShui-colored" (colors for a division of the day into 6 non-equal parts), in the attached image we are at "the evening light blue".

This widget is for LC 8.1.1 (because the widget format was changed with 8.1.1).
Edit. For a (slightly changed) version for LC 8 > 8.1.4 and another for LC 9 (which have again a different widget format): See this post


INSTALLATION

• [1] Download the zip and unzip it.
• [2] Start LC 8.1.1 or later and use the "plus" from Extension Manager (menu Tools) to load the package ( = .lce file).
• [3] Restart LiveCode and use the demo stacks for playing with all features.

This is version 1.0.1 (of Oct 21, 2016). It uses a 'LCS-workaround' to get the correct local UTC-offset.

[[-hh]]

[#44] Community LCB widget BezierClock v1.0.1

BezierClock is enclosed in an extension package "community.livecode.hermann.bezierclock.1.0.1.lce" that is enclosed in the bezierClock101.zip.
There are detailed dictionary entries for the widget. Instead of a user doc you may play with the demo stack bezierClock-test.livecode, also enclosed in the bezierClock101.zip.

This widget is for LC 8.1.1 (because the widget format was changed with 8.1.1).
Edit. For a (slightly changed) version for LC 8 > 8.1.4 and another for LC 9 (which have again a different widget format): See this post

It is a widget for displaying an analogue clock by using bezier curves as "hands" (see the demo stack). The offset from UTC/GMT, the "time zone", is adjustable by any amount of seconds in the range -12*3600 to 12*3600. There are several options for the display (ticks, hours-/minutes-/seconds-color and 24 hours or 12 hours display.)
The inner disk of the clock is "FengShui-colored" (colors for a division of the day into 6 non-equal parts), in the attached image we are at "morning green".
Optionally a date line (like the internet date) can be shown below the analogue bezier display.

Just tested: This widget doesn't work with the HTML5 standalone builder.

INSTALLATION

• [1] Download the zip and unzip it.
• [2] Start LC 8.1.1 or later and use the "plus" from Extension Manager (menu Tools) to load the package ( = .lce file).
• [3] Restart LiveCode and use the demo stacks for playing with all features.

A widget just for fun!

This is version 1.0.1 (of Oct 21, 2016). It uses a 'LCS-workaround' to get the correct local UTC-offset.

[peter-b]

Wow, these are really awesome. I'm definitely going to mention them in this week's newsletter!

How are you finding programming in LCB compared to programming in LiveCode script?

[[-hh]]

Because you ask.

I started LCB at August 20 (being still fully "fringed"). Read a lot in working widgets (LiveCode's and Trevor's). Got valuable tips from Bernd and read some of his (unpublished) widget's code.

Made my first widget LCD scroller (unpublished), then a second one, a polygon widget that has edit mode (unpublished). This was my first summary:
Horrible. Wordy as Applescript. Typing over typing. Variable names that are half a line long. And a lot of workarounds if one wishes to avoid LCS as much as possible in the widget's code.

Then I wrote the three widgets published here. This is my current summary:
I started to like it, to see the advantages. Every single path can have its own transformation matrix, lists are a wonderful tool. I even started to like the property inspector (does silently a great job). More precisely, I like it so much, that I dare to write:

The Top Three of things that I'm missing in the built-in handlers:

• Setting the bounds and the rectangle of a widget, e.g.
  set my bounds to the effective bounding box of path mPath
• Convert a list of numbers into a list of strings (Solved **)
• Map a function, especially a transform, to a list (Solved **)
  e.g.
  map [3*x + x^2] to mList -- mList is a list of numbers x
  map [sin(x), cos(x)*y] to mList -- mList is a list of points (x,y)
  map tTransform to mList -- mList is a list of points

Now I'm looking forward to the foreign languages interface.

And I hope others will also contribute here (if not at github) with widget samples.

___
** See Community widget #42 and Community widget #47.

[MaxV]

Here is the link for Trevore git hub page: https://github.com/trevordevore/livecode-extensions

[mwieder]

Ha! I love the Bezier Clock!
Completely useless as a clock, it makes my head hurt trying to see what time it is, but I love it anyway.
I can't help myself.
Now I want a Dali clock.

[[-hh]]

[#45] (currently empty)

LCB snippet (was #45 here):
Convert number to 'number-formatted' string.
has moved to Community snippets #43.

[[-hh]]

[#46] Community LCB widget DigitClock v1.0.1
(DigitClock_v1.2.1 is now available as "fat" widget for LC 8 and 9, see
http://forums.livecode.com/viewtopic.ph ... 29#p172129 .)

DigitClock is enclosed in an extension package "community.livecode.hermann.digitclock.1.0.1.lce" that is enclosed in the digitClock101.zip. The zip also contains a simple demo stack digitClock-test.livecode that contains three copies of the widget (see also the image below).

This widget is for LC 8.1.1 (because the widget format was changed with 8.1.1).
Edit. For a (slightly changed) version for LC 8 > 8.1.4 and another for LC 9 (which have again a different widget format): See this post

It is a widget for displaying a digital clock using the same format as the internet date from LCS. The offset from UTC/GMT, the "time zone", is adjustable by any amount of seconds in the range -12*3600 to 12*3600. Choosing the local date gives what you are used to have as the internet date.
There are several options for the display (date-/stroke-/fill-color and choosing the textFont). The frame (and optionally the text) of the clock is "FengShui-colored" (colors for a division of the day into 6 non-equal parts), in the attached image we are at "evening light blue". There are detailed dictionary entries for the widget.

Just tested: This widget doesn't work with the HTML5 standalone builder.

INSTALLATION

• [1] Download the zip and unzip it.
• [2] Start LC 8.1.1* or later and use the "plus" from Extension Manager (menu Tools) to load the package ( = .lce file).
• [3] Restart LiveCode and use the demo stack for playing with all features.

This is version 1.0.1 (of Oct 21, 2016). It uses a 'workaround' to get the correct local UTC-offset and the correct platform from LCS.

----
* On Linux (Mint) the widget works but only unrotated, I don't know why. (Reported as bug)

[[-hh]]

[#47] Community LCB widget hhPolygon v1.0.0
(Polygon_v1.2.1 is now available as "fat" widget for LC 8 and 9, see
http://forums.livecode.com/viewtopic.ph ... 29#p172129 .)

hhPolygon is enclosed in an extension package "community.livecode.hermann.hhpolygon.1.0.0.lce" that is attached in the partitioned zip below. Use my utility stack "fileSplitAndJoin" for joining the parts of the zip: (Raspi stacks collection (#82)).

This widget is for LC 8.1.1 (because the widget format was changed with 8.1.1).
Edit. For a (slightly changed) version for LC 8 > 8.1.4 and another for LC 9 (which have again a different widget format): See this post

It is a widget that offers a SVG-polygon, starting from a regular polygon with <N> vertices ('points'). You can then choose an editMode and drag the vertices or add or delete vertices .
There are several options for the display (stroke-/fill-color , stroke-/fill-pattern).
The pattern is a (scaled or replicated) image, so you can use the widget as a frame for your images.
There is also an option to start from regular star polygons (you can choose their 'Schläfli symbol'). I added a demo stack, look at the beauty of math there.

INSTALLATION

• [1a] Download the parts of the zip.
• [1b] Join them using the utility stack ("fileSplitAndJoin"). Remove then the extension "-joined".
• [1c] Unzip the joined file. You'll get an .lce file and the demo stack.
• [2] Start LC 8.1.1 or later and use the "plus" from Extension Manager (menu Tools) to load the package ( = .lce file).
• [3] Restart LiveCode and use the demo stacks for playing with all features.

This is version 1.0.0 (of Oct 21, 2016). It has several (unvisible) enhancements.

[[-hh]]

Other community contributions:

Calendar widget (by Bernd, based on LC-Elanor's widget)
SVG-colorIcon widget (by pthirkell, based on LC's SVGIcon widget)

Not a widget, but not to forget when using SVG Icons: The SVG Clip Art Stack (by ClipArtGuy).

[[-hh]]

• LCB snippet (was #48 here):
  Create a matrix of rectangles of constant size
  has moved to Community snippets #44.
• LCB snippet (was #49 here):
  Create a list of a range of numbers (as strings or numbers)
  has moved to Community snippets #45.

[[-hh]]

[#48] Community LCB widget convexHull v0.1.4

This is sort of an 'educational widget', illustrating the convex hull ('rubber band enclosure') of a set of points. The main parts are a 'lite' version of widget #47 ('hhPolygon') and snippet #49 (the convex-hull-algorithm). A LC-Script counterpart of this 'demo' is Raspi stack #84.

• You start with a regular polygon.
• You have an edit mode where
  • you can interactively move the points by dragging,
  • you can add a point or remove a point by RightClicking a point.
• If not in editMode drag the widget with RightMouseDown.
• Colors and stroke width are adjustable, you can also set the points of the polygon (= the set of points) by script (see dictionary) or by copy and paste in the property inspector/Contents.
• While editing or dragging the polygon, the convexHull (the 'rubber band' around the points) is updated.

INSTALLATION

• [1] Download the zip and unzip it.
• [2] Start LC 8.1.1 or later and use the "plus" from Extension Manager (menu Tools) to load the package ( = .lce file).
• [3] Restart LiveCode, drag the widget to a (new) stack and have fun.

This widget is for LC 8.1.1 (because the widget format was changed with 8.1.1).
Edit. For a (slightly changed) version for LC 8 > 8.1.4 and another for LC 9 (which have again a different widget format): See this post
 

[[-hh]]

[#49] Community LCB widget hhProgress v1.0.0
Progress_v1.3.0 is now available as "fat" widget for LC 8 and 9, see
http://forums.livecode.com/viewtopic.ph ... 29#p172129 .
 

v130 adds the option to display the percentage as text

progress130.png (7.01 KiB) Viewed 7654 times

hhProgress is enclosed in an extension package "community.livecode.hermann.hhprogress.1.0.0.lce" that is attached in the zip below.

This widget is for LC 8.1.1 (because the widget format was changed with 8.1.1).
Edit. For a (slightly changed) version for LC 8 > 8.1.4 and another for LC 9 (which have again a different widget format): See this post

It is a widget that offers a rectangular (horizontal or vertical) or circular/elliptical progress display.
You configure the widget in the property inspector (or by script) using options for the shape, several colors, roundrect radius, stroke width and using background. There is also a demo mode (for previewing). I added a demo stack with usage examples (incl. LCS-scripts).

Once configured to your taste there is only one line you have to give:

Code: Select all

-- pNum is any expression that evaluates to a number in range 0-100
set percentage of widget wName to <pNum>

Usage example for indicating the progress of a loop.

Code: Select all

on mouseUp
  lock screen; lock messages
  put 10000 into N; put N div 500 into n0
  repeat with j=1 to N
    wait 2 millisecs -- an action here
    if j mod n0 = 0 then
      unlock screen
      set percentage of widget "progress_0" to 100*j/N
      lock screen
    end if
  end repeat 
  set percentage of widget "progress_0" to 0
end mouseUp

Of course, showing progress always needs a some time ...

INSTALLATION

• [1] Download the attached zip and unzip it.
• [2] Start LC 8.1.1 or later and use the "plus" from Extension Manager (menu Tools) to load the package ( = .lce file).
• [3] Restart LiveCode and use the 'hhProgress-demo' stack, that is also attached in the zip, for testing all features.

Some hints.

• Resize the widget with pointer tool and shiftKey down to get a proportional resizing.
• Resize with pointer tool and optionKey down to get a shape of equal width and height.
• Drag with pointer tool and optionKey down to 'duplicate' the widget (may be the copy loses some properties).
• The rectangle progress moves (increasingly) left-right or bottom-up, depending on the chosen width and height.
• This can be enabled/disabled:
  Drag the widget by mouseDown. RightClick the widget for a menu of basic options.

This is version 1.0.0 (of Nov 12, 2016).

[Zryip TheSlug]

[#50] Community LCB orientable text v1.0.0

A simple "orientable label" widget with the following parameters:
- label
- font name
- font size
- font color
- background color
- orientation
- label opacity (a value from 0 to 1)
- background opacity (a value from 0 to 1)

My original intention was to place a rectangle behind the text and to orient text and rectangle with the same angle, but I never found the solution. Either I have the text and a rectangle which is behaving as it want. Either I have the rectangle oriented but no text (presumably behind the rectangle). If someone has an idea on how to group the both element and to apply the translation to the group, he/she is welcome.