LiveCode Forums.

Posted: **Mon Sep 21, 2020 2:32 pm**

Does anyone know how to skin a control (checkbox) in a Datagrid with an SVG widget (see below). I'm sure this is possible, I just don't know where to start. The standard "checkbox" type control on iOS seems to be a switch, but that isn't an appropriate choice for my application. The non-native LC version of a checkbox in iOS is not very attractive either. So I think I'll try and skin a button and see how that works. Any tips appreciated.

Thanks

Posted: **Mon Sep 21, 2020 6:27 pm**

Cripes . . . well, even if nothing else you can congratulate yourself that after that I'm stumping off for a headache pill.

-

: cripes.jpeg (17.53 KiB) Viewed 7192 times

-

"Can cause addiction" . . . indeed; since about 1985 in my case.

Why the "thang" anent SVG images?

I converted 2 SVGs into PNG images and scaled them to 16 x 16 and did this:
-

-
The only "problem" is that I cannot work out how to shift the iconised checkboxes to the LEFT of the Labels.

https://www.dropbox.com/s/mh0xu50gwy349 ... e.zip?dl=0

Posted: **Mon Sep 21, 2020 6:54 pm**

Having thought about this a bit . . .

I don't suppose there is a way one can use an SVG widget as an icon for a button is there?
-

-

Posted: **Mon Sep 21, 2020 7:08 pm**

richmond62 wrote: ↑
Mon Sep 21, 2020 6:54 pm
I don't suppose there is a way one can use an SVG widget as an icon for a button is there?

Unfortunately not.

But as Richmond mentioned, create two PNG from the SVG widgets and use them as ICON and HILITEICON of your checkbox buttons.
You can do this inside of LC, but I have forgotten the appropriate command for this...

Posted: **Mon Sep 21, 2020 7:58 pm**

MessageBox:

Code: Select all

import snapshot from widget "Fishface"

Posted: **Mon Sep 21, 2020 8:53 pm**

No, no screenshot, it was something else.

Posted: **Tue Sep 22, 2020 8:47 am**

Klaus wrote: ↑
Mon Sep 21, 2020 8:53 pm
No, no screenshot, it was something else.

This ?

Code: Select all

   set the text of image "svgImage" to drawingSvgCompile( textSvg)

Posted: **Tue Sep 22, 2020 9:17 am**

Hi Thierry,

yes, that was it, but also wishful thinking of me

, since drawingSvgCompile(an SVG FILE) requires an external SVG FILE!
Brian Milby provided a wordy workaround on the mailing list today:
http://lists.runrev.com/pipermail/use-l ... 50326.html
So a screenshot maybe easier to do.

Best

Klaus

Posted: **Tue Sep 22, 2020 9:21 am**

Klaus wrote: ↑
Tue Sep 22, 2020 9:17 am
Hi Thierry,

yes, that was it, but also wishful thinking of me ,
since drawingSvgCompile(an SVG FILE) requires an external SVG FILE!

Mmmm,
I copy-paste this line from a previous job, and in this case:

Code: Select all

... drawingSvgCompile( textSvg)

textSvg is a variable, not a filename.

Sorry, don't have much time to go into more details at the moment.

Regards,

Thierry

Posted: **Tue Sep 22, 2020 9:44 am**

Hi Thierry,

Thierry wrote: ↑
Tue Sep 22, 2020 9:21 am
...
Mmmm,
I copy-paste this line from a previous job, and in this case:
Code: Select all
... drawingSvgCompile( textSvg)
textSvg is a variable, not a filename.

Yes, but probably holds the complete XML tree of a SVG file.
THEN this does work, but we need the complete XML tree of the svg file for this to work,
as Brian explained to me on the mailing list.

Best

Klaus

Posted: **Tue Sep 22, 2020 10:39 am**

What, Klaus, is your objection to using screenshots?

Posted: **Tue Sep 22, 2020 11:28 am**

I did not show ANY objections to screenshots, I only wrongly remembered an internal LC solution with this drawcompilexxx thingie.

Posted: **Wed Sep 23, 2020 2:42 am**

Klaus wrote: ↑
Tue Sep 22, 2020 9:17 am
yes, that was it, but also wishful thinking of me , since drawingSvgCompile(an SVG FILE) requires an external SVG FILE!

Klaus,

There is canvasComputeBoundingBoxOfPath in a library on GitHub (canvas.lcb) that isn't currently in the distribution. I think it would be pretty easy to add another handler to take care of translating the path to remove extra space and generate the XML needed to compute the drawing. I think the submission would be a good Hacktoberfest project. I can do the work now and just wait to submit the PR.

Thanks,
Brian

Here is the LCB code to generate the XML. Only tested briefly, but I think it should work.

Code: Select all

public handler canvasGenerateXmlForSvgPath(in pPathString as String) returns String
   variable tPath as Path
   put path pPathString into tPath
   
   variable tBBox as Rectangle
   put the bounding box of tPath into tBBox
   
   translate tPath by [-(the left of tBBox), -(the top of tBBox)]
   
   variable tW as String
   variable tH as String
   put (the right of tBBox - the left of tBBox) formatted as string into tW
   put (the bottom of tBBox - the top of tBBox) formatted as string into tH

   variable tPathString as String
   put the instructions of tPath into tPathString
   
   return "<?xml version=\q1.0\q encoding=\qUTF-8\q?>\n" & \
        "<svg\n" & \
        "   xmlns:svg=\qhttp://www.w3.org/2000/svg\q\n" & \
        "   xmlns=\qhttp://www.w3.org/2000/svg\q\n" & \
        "   version=\q1.0\q\n" & \
        "   width=\q" & tW & "\q  height=\q" & tH & "\q\n" & \
        ">\n" & \
        "<path d=\q" & tPathString & "\q />\n" & \
        "</svg>"
end handler

Posted: **Wed Sep 23, 2020 7:49 am**

Backtracking a bit . . .

If I could embed checkboxes in an dataGrid [OK, OK, I cheated by following the recipe on the LiveCode website],
then it should be possible to embed faux checkboxes consisting of a label field and an SVG widget in a group
in a dataGrid; on clicking the SVG appearance can be changed as in my example posted here previously.
-

-
If you're expecting me to embed that in a dataGrid you're going to be sorely disappointed.

Posted: **Wed Sep 23, 2020 8:38 am**

I created an enhancement request for this:
https://quality.livecode.com/show_bug.cgi?id=22915

LiveCode Forums.

Skin a control with SVG Widget in Datagrid

Skin a control with SVG Widget in Datagrid

Re: Skin a control with SVG Widget in Datagrid

Re: Skin a control with SVG Widget in Datagrid

Re: Skin a control with SVG Widget in Datagrid

Re: Skin a control with SVG Widget in Datagrid

Re: Skin a control with SVG Widget in Datagrid

Re: Skin a control with SVG Widget in Datagrid

Re: Skin a control with SVG Widget in Datagrid

Re: Skin a control with SVG Widget in Datagrid

Re: Skin a control with SVG Widget in Datagrid

Re: Skin a control with SVG Widget in Datagrid

Re: Skin a control with SVG Widget in Datagrid

Re: Skin a control with SVG Widget in Datagrid

Re: Skin a control with SVG Widget in Datagrid

Re: Skin a control with SVG Widget in Datagrid