Community widgets

Moderators: LCMark, LCfraser

Re: Community widgets

Postby [-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 56 times
orientabletext102.lcb.zip
version 1.0.2 of Nov 22, 2016
(2.15 KiB) Downloaded 123 times
rotatingText.png
version 1.0.2 of Nov 22, 2016
rotatingText.png (14.6 KiB) Viewed 1055 times
Last edited by [-hh] on Sun Sep 17, 2017 10:51 pm, edited 7 times in total.
shiftLock happens
[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Livecode Membership
 
Posts: 1488
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Community widgets

Postby 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
Zryip TheSlug
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
 
Posts: 118
Joined: Tue Jan 26, 2010 10:15 pm

Re: Community widgets

Postby [-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
[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Livecode Membership
 
Posts: 1488
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Community widgets

Postby 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
Zryip TheSlug
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
 
Posts: 118
Joined: Tue Jan 26, 2010 10:15 pm

Re: Community widgets

Postby [-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 68 times
textbanner.png
textbanner.png (10.96 KiB) Viewed 510 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
Livecode Membership
 
Posts: 1488
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Community widgets

Postby [-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).

  • 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)
  • Sep 13, 2017: IconGrid 2.0.2 (i#52)
    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 Tue Sep 19, 2017 8:10 pm, edited 5 times in total.
shiftLock happens
[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Livecode Membership
 
Posts: 1488
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Community widgets

Postby [-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 200 times
icongrid.png
5x4 grid
Last edited by [-hh] on Mon Sep 18, 2017 10:13 pm, edited 1 time in total.
shiftLock happens
[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Livecode Membership
 
Posts: 1488
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Community widgets

Postby mrcoollion » Wed Sep 13, 2017 8:42 am

Thanks hh,

This is really great stuff.... :D
mrcoollion
 
Posts: 237
Joined: Thu Sep 11, 2014 1:49 pm
Location: The Netherlands

Re: Community widgets

Postby livecodeali » Wed Sep 13, 2017 3:35 pm

This is excellent Hermann! So many properties :D
livecodeali
Livecode Staff Member
Livecode Staff Member
 
Posts: 117
Joined: Thu Apr 18, 2013 2:48 pm

Previous

Return to LiveCode Builder

Who is online

Users browsing this forum: No registered users and 2 guests