Skin a control with SVG Widget in Datagrid

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 10099
Joined: Fri Feb 19, 2010 10:17 am

Re: Skin a control with SVG Widget in Datagrid

Post by richmond62 » Wed Sep 23, 2020 9:09 am

My example above is extremely inefficient as the 2 iconPaths
should be stored as custom properties inwith the SVG widget itself,
as should the "1 or 2" state indicator.

bwmilby
Posts: 462
Joined: Wed Jun 07, 2017 5:37 am
Contact:

Re: Skin a control with SVG Widget in Datagrid

Post by bwmilby » Thu Sep 24, 2020 2:48 am

Here is a tiny LCB library that will allow you to easily convert icons to drawings. It adds several handlers:
  • generateXmlForSvgPath - same code as posted earlier with a different name
  • drawingSvgCompilePath - takes a path and generates the drawing
  • drawingSvgCompileIcon - takes an icon name (from the SVG Icon Library) and generates the drawing
To install, download/unzip the lce file and open the Extension Manager (Tools menu). Click on the "+" icon and choose the lce file.

After install, use is as simple as:

Code: Select all

set the text of image 1 to drawingSvgCompileIcon("thumbs up")
Attachments
us.milby.library.icondrawing.1.0.0.lce.zip
SVG Icon Drawing Library
(3.78 KiB) Downloaded 206 times

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 4172
Joined: Sun Jan 07, 2007 9:12 pm

Re: Skin a control with SVG Widget in Datagrid

Post by bn » Thu Sep 24, 2020 8:59 am

Thank you Brian,

a very useful and instructive file

Kind regards
Bernd

Klaus
Posts: 14194
Joined: Sat Apr 08, 2006 8:41 am
Contact:

Re: Skin a control with SVG Widget in Datagrid

Post by Klaus » Thu Sep 24, 2020 9:15 am

Thank you very much, Brian, waaaay cool! :-)

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 10099
Joined: Fri Feb 19, 2010 10:17 am

Re: Skin a control with SVG Widget in Datagrid

Post by richmond62 » Thu Sep 24, 2020 11:23 am

Undoubtedly Brian's code to convert SVG objects into images is very clever,
but I fail to see any advantage over a simple screenshot of the object.

This is NOT intended to denigrate Brian's work at all.

Klaus
Posts: 14194
Joined: Sat Apr 08, 2006 8:41 am
Contact:

Re: Skin a control with SVG Widget in Datagrid

Post by Klaus » Thu Sep 24, 2020 11:29 am

Well, enlarge a screenshot and a converted SVG image and spot the difference!

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 10099
Joined: Fri Feb 19, 2010 10:17 am

Re: Skin a control with SVG Widget in Datagrid

Post by richmond62 » Thu Sep 24, 2020 1:19 pm

Klaus wrote:
Thu Sep 24, 2020 11:29 am
Well, enlarge a screenshot and a converted SVG image and spot the difference!
Got it: no "jaggies" . . . BUT, who is going to enlarge one of those images?

Does this mean that Brian's things are converting the SVGs to internal graphic objects rather than images-qua-images?
-
DA.jpg
DA.jpg (11.12 KiB) Viewed 7338 times

Klaus
Posts: 14194
Joined: Sat Apr 08, 2006 8:41 am
Contact:

Re: Skin a control with SVG Widget in Datagrid

Post by Klaus » Thu Sep 24, 2020 1:48 pm

richmond62 wrote:
Thu Sep 24, 2020 1:19 pm
Klaus wrote:
Thu Sep 24, 2020 11:29 am
Well, enlarge a screenshot and a converted SVG image and spot the difference!
Got it: no "jaggies"
Bravo! :D
richmond62 wrote:
Thu Sep 24, 2020 1:19 pm
Does this mean that Brian's things are converting the SVGs to internal graphic objects rather than images-qua-images?
Brians and LCs "drawcompile..." stuff actually creates a resolution independant image object, no graphic!
Its magic, ladies and gentlemen! :D

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 10099
Joined: Fri Feb 19, 2010 10:17 am

Re: Skin a control with SVG Widget in Datagrid

Post by richmond62 » Fri Sep 25, 2020 10:53 am

Here's some rubbishy work that may have potential . . .
-
Ouch.png
Attachments
SVG Widget to GRC.livecode.zip
Here's the stack
(2.2 KiB) Downloaded 229 times

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 10099
Joined: Fri Feb 19, 2010 10:17 am

Re: Skin a control with SVG Widget in Datagrid

Post by richmond62 » Mon Sep 28, 2020 1:36 pm

The problem with my stack is that each "interpretation" of an SVG widget uses a single
polygonal graphic.

marksmithhfx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 931
Joined: Thu Nov 13, 2008 6:48 am

Re: Skin a control with SVG Widget in Datagrid

Post by marksmithhfx » Tue Sep 29, 2020 5:09 pm

Hi all, turns out you don't need to skin a button, you can just use the SVG Icon in its place and script it to function like a control. Will post example tomorrow as the rest of my day is shot.

Thank you so much for all of your input. I am going to work through it as time permits because I am sure there are some great examples I can learn from.

Mark
Last edited by marksmithhfx on Mon Oct 19, 2020 1:13 pm, edited 1 time in total.
macOS 12.6.5 (Monterey), Xcode 14.2, LC 10.0.0, iOS 15.6.1
Targets: Mac, iOS

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 10099
Joined: Fri Feb 19, 2010 10:17 am

Re: Skin a control with SVG Widget in Datagrid

Post by richmond62 » Tue Sep 29, 2020 8:37 pm

Just take a screenshot of the SVG widget and use that image as your icon.

bwmilby
Posts: 462
Joined: Wed Jun 07, 2017 5:37 am
Contact:

Re: Skin a control with SVG Widget in Datagrid

Post by bwmilby » Tue Sep 29, 2020 8:57 pm

bansalrehana wrote:
Tue Sep 29, 2020 8:28 pm
I don't suppose there is a way one can use an SVG widget as an icon for a button is there?
See the icondrawing library that I posted above. That will allow you to convert an SVG icon into the drawing format that can be set on an image.

marksmithhfx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 931
Joined: Thu Nov 13, 2008 6:48 am

Re: Skin a control with SVG Widget in Datagrid

Post by marksmithhfx » Wed Sep 30, 2020 1:29 pm

Here's an example of using an SVG Icon as a checkbox in a datagrid. If you open the contents pane and lock it you can watch the values update in realtime. All the code for the check box is in the column behaviour script.
Attachments
Screen Shot 2020-09-30 at 1.23.40 PM.png
Example.livecode.zip
(7.7 KiB) Downloaded 207 times
macOS 12.6.5 (Monterey), Xcode 14.2, LC 10.0.0, iOS 15.6.1
Targets: Mac, iOS

marksmithhfx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 931
Joined: Thu Nov 13, 2008 6:48 am

Re: Skin a control with SVG Widget in Datagrid

Post by marksmithhfx » Wed Sep 30, 2020 1:53 pm

bwmilby wrote:
Thu Sep 24, 2020 2:48 am
Here is a tiny LCB library that will allow you to easily convert icons to drawings. It adds several handlers:
Hi Brian, how do you scale images or shrink them once you've read them? I tried your code example using a check mark and it took up the whole screen :)

Mark
macOS 12.6.5 (Monterey), Xcode 14.2, LC 10.0.0, iOS 15.6.1
Targets: Mac, iOS

Post Reply