Skin a control with SVG Widget in Datagrid

[marksmithhfx]

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

[richmond62]

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 5470 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

[richmond62]

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?
-

-

[Klaus]

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

[richmond62]

MessageBox:

Code: Select all

import snapshot from widget "Fishface"

[Klaus]

No, no screenshot, it was something else.

[Thierry]

No, no screenshot, it was something else.

This ?

Code: Select all

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

[Klaus]

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

[Thierry]

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

[Klaus]

Hi Thierry,

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

[richmond62]

What, Klaus, is your objection to using screenshots?

[Klaus]

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

[bwmilby]

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

[richmond62]

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.

[Klaus]

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