Community widgets

Moderators: LCMark, LCfraser

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1538
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Community widgets

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

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).
 
Attachments
orientedText.png
version 1.5.0 of Sep 17, 2017
orientedText.png (14.01 KiB) Viewed 554 times
orientabletext102.lcb.zip
version 1.0.2 of Nov 22, 2016
(2.15 KiB) Downloaded 137 times
rotatingText.png
version 1.0.2 of Nov 22, 2016
rotatingText.png (14.6 KiB) Viewed 1553 times
Last edited by [-hh] on Sun Sep 17, 2017 10:51 pm, edited 7 times in total.
shiftLock happens

Zryip TheSlug
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 118
Joined: Tue Jan 26, 2010 10:15 pm
Contact:

Re: Community widgets

Post by Zryip TheSlug » Tue Nov 22, 2016 5:30 pm

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?
TheSlug
http://www.aslugontheroad.com - Tutorials, demo stacks and plugins for LiveCode
Data Grid Helper - An intuitive interface for building LiveCode's Data Grids
Excel Library- Extends the LiveCode language for controlling MS Excel

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1538
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Community widgets

Post by [-hh] » Tue Nov 22, 2016 6:36 pm

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 https://github.com/livecode/livecode/tr ... ns/widgets
Last edited by [-hh] on Tue Nov 22, 2016 8:52 pm, edited 1 time in total.
shiftLock happens

Zryip TheSlug
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 118
Joined: Tue Jan 26, 2010 10:15 pm
Contact:

Re: Community widgets

Post by Zryip TheSlug » Tue Nov 22, 2016 7:44 pm

"Destination out", ok thanks hh.
TheSlug
http://www.aslugontheroad.com - Tutorials, demo stacks and plugins for LiveCode
Data Grid Helper - An intuitive interface for building LiveCode's Data Grids
Excel Library- Extends the LiveCode language for controlling MS Excel

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1538
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Community widgets

Post by [-hh] » Fri Aug 18, 2017 11:35 pm

[#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.
  
Attachments
texbannerDemo.livecode.zip
Install widget text banner in LC 8.1.6, then this demo shows some *scripted* usages.
NEEDS THE WIDGET!
(2.65 KiB) Downloaded 83 times
textbanner.png
textbanner.png (10.96 KiB) Viewed 1008 times
Last edited by [-hh] on Wed Sep 13, 2017 1:21 am, edited 4 times in total.
shiftLock happens

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1538
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Community widgets

Post by [-hh] » Wed Sep 13, 2017 1:04 am

For updates I put an always actual hh-widgets-un-installer on "Sample Stacks".

Use it from "Sample Stacks" of the LC toolbar (or download from http://livecodeshare.runrev.com/stack/842/ )

The stack installes the widgets from a server, uses the LC IDE-library for that.
[You may use this elementary technique also for your own widgets packages (.lce) that reside on a server or in your local filesystem.]

Three clicks to install *all* my LC community-widgets.
(Uninstalling is one-click, installing may be better done by single installation = one click for each widget you like to install).

I will update all my widgets for use in LC 8.1.6ff or LC 9.0.0ff, one after the other.
The above stack will then also be updated, so use these steps:

Click 1: Choose "Sample Stacks" of the LC-Toolbar.
Click 2: Load Widget(Un)Installer from there.
Click 3: In that stack...
  • ...push a button that uninstalls one (or optional all) of my widgets.
  • ...push a button that installs one (or optional all) of my widgets
After such an installation or uninstallation you have to quit and restart the IDE once (in order to clear the caches).

IMPORTANT. Dragging from the Tools palette may fail.
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).

Currently available is by that stack (some other widgets will follow this year).
  • Oct 15, 2017: hhColorPicker 1.0.0 (#53)
  • Sep 18, 2017: IconGrid 2.0.3 (#52)
  • Sep 18, 2017: SVG_Text 1.5.0 (#42) -- v1.5 adds 'transparency-clicks'
  • Sep 18, 2017: OrientedText 1.5.1 (#50) -- v1.5 adds 'transparency-clicks'
    (common work with Cyril Pruszko)
  • Sep 14, 2017: hhProgress 1.2.0 (#49)
  • Sep 14, 2017: ConvexHull 1.2.0 (#48)
  • Sep 14, 2017: hhPolygon 1.2.0 (#47)
    The demo-stack of IconGrid uses also SVG_Text and ClockAround
  • Aug 20, 2017: DigitClock 1.2.0 (#46)
  • Aug 20, 2017: BezierClock 1.2.0 (#44)
  • Aug 20, 2017: ClockAround 1.2.0 (#43)
  • Aug 18, 2017: TextBanner 0.0.1 (#51)
Last edited by [-hh] on Sun Oct 15, 2017 9:35 pm, edited 6 times in total.
shiftLock happens

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1538
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Community widgets

Post by [-hh] » Wed Sep 13, 2017 1:16 am

[#52] Community LCB widget "IconGrid" v2.0.3
(Update (Sep 18, 2017): v2.0.3 removes a bug in randomLists.
New in v2.0.2 is an IMAGE property for each grid element.)


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, jpeg or png), [sorry: server is curently blocking, so not usable]
++ FILLCOLOR and STROKECOLOR,
++ NUMBER (only readable for identifying the element).

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.

For downloading the widget use the hh-widgets-un-installer from "Sample Stacks" of the LC toolbar (or download from http://livecodeshare.runrev.com/stack/842/ ). See also this post.
 
Attachments
icongrid2.png
3x2 grid
icongrid2.png (211.34 KiB) Viewed 698 times
icongrid.png
5x4 grid
Last edited by [-hh] on Mon Sep 18, 2017 10:13 pm, edited 1 time in total.
shiftLock happens

mrcoollion
Posts: 254
Joined: Thu Sep 11, 2014 1:49 pm
Location: The Netherlands

Re: Community widgets

Post by mrcoollion » Wed Sep 13, 2017 8:42 am

Thanks hh,

This is really great stuff.... :D

livecodeali
Livecode Staff Member
Livecode Staff Member
Posts: 120
Joined: Thu Apr 18, 2013 2:48 pm

Re: Community widgets

Post by livecodeali » Wed Sep 13, 2017 3:35 pm

This is excellent Hermann! So many properties :D

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1538
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Community widgets

Post by [-hh] » Sun Oct 15, 2017 9:21 pm

[#53] Community LCB widget "hhColorPicker" v1.0.0

The widget runs as "ordinary widget", sending a message "colorChosen <color>"
that you can use in your scripts (<color> is an RGBA-color*)
OR
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).

For downloading the widget use the hh-widgets-un-installer from "Sample Stacks" of the LC toolbar (or download from http://livecodeshare.runrev.com/stack/842/ ). See also this post.

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".
  
Attachments
hhcolorpicker.png
hhcolorpicker.png (11.84 KiB) Viewed 331 times
shiftLock happens

pink
Posts: 185
Joined: Wed Mar 12, 2014 6:18 pm

Re: Community widgets

Post by pink » Fri Oct 20, 2017 12:27 pm

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)
Greg (pink) Miller

MadPink, LLC
I'm Mad, Pink and Dangerous to Know

pink
Posts: 185
Joined: Wed Mar 12, 2014 6:18 pm

Re: Community widgets

Post by pink » Fri Oct 20, 2017 12:30 pm

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
Greg (pink) Miller

MadPink, LLC
I'm Mad, Pink and Dangerous to Know

livecodeali
Livecode Staff Member
Livecode Staff Member
Posts: 120
Joined: Thu Apr 18, 2013 2:48 pm

Re: Community widgets

Post by livecodeali » Mon Oct 23, 2017 10:47 am

Hermann,
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.

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1538
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Community widgets

Post by [-hh] » Wed Oct 25, 2017 11:19 pm

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.
shiftLock happens

Post Reply

Return to “LiveCode Builder”