SVG in widgets - any roadmap?

Moderators: LCMark, LCfraser

livfoss
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7
Joined: Sun Apr 09, 2006 10:03 am
Location: UK and France
Contact:

SVG in widgets - any roadmap?

Post by livfoss » Mon Aug 22, 2016 5:02 pm

About 10 days ago, I asked about this on the use list but got no bites. It seems to me a pretty important topic so I'm reposting it here.

The LC Conference didn’t reveal any plans for extending the SVG capabilities of widgets in the LC 8 series. Does anyone know if such plans exist, or if on the contrary we are stuck with monochrome etc? The answer will obviously have an effect on developers seeking to make multi-resolution apps. Personally I am hoping to make some fairly photo-realistic coloured SVGs that can be resized without fuss for different sized screens. I'm thinking of fairly small images, perhaps four times the area of a typical icon. Not having this capability dooms one to keep a library of different sized PNGs to fit different screen resolutions, or rely on any available automatic resizing capability, which can often give less than satisfactory results IMO.
Graham Samuel / The Living Fossil Co. / UK & France

pthirkell
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 84
Joined: Tue Nov 17, 2009 6:47 pm
Location: Wellington, New Zealand

Re: SVG in widgets - any roadmap?

Post by pthirkell » Sun Aug 28, 2016 11:18 pm

I also have the need for color widgets for a project on which I am working. Inspired by a couple of key sessions at the conference - and keen to contribute towards the 1000 widgets that Kevin would like to see over the next year - I have been working on a color SVG widget. So far it takes a tagged SVG file and parses out the relevant path (plus rect circle ellipse) and associated color information to render the widget. It is resizable - with or without maintaining perspective. I will probably need some help on rotating the image.

What specific functionality are you wanting from the widget? Is it essentially as a static image to display, or as a button (with some sort of hiliting effect, or something else? So far I have implemented standard mouse and drag events.

I don't want to over-promise. If you need near photo-realistic images then this probably won't do the trick. However I do have the set of color business icons from flat-icon working ok. The app I am using is Affinity Designer as this exports clean and well formed tagged SVG data. It is great to be able to take this data and dropped it essentially unchanged onto the widget. Here is a screensnap of the icons that I have working so far:
SVG_Color_Widgets.png
Any comments or suggestions welcome, particularly in terms of the typical uses expected for color icons along the lines illustrated.

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3187
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Re: SVG in widgets - any roadmap?

Post by bn » Mon Aug 29, 2016 8:00 pm

Hi pthirkell,
that looks very nice. I do not have any suggestions how to improve. My attempts to modify the SVG widget were a lot more modest and I stopped trying to get more involved because of

https://github.com/livecode/livecode/pull/3089

but unfortunately this has not yet materialized.

Kind regards
Bernd

livfoss
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7
Joined: Sun Apr 09, 2006 10:03 am
Location: UK and France
Contact:

Re: SVG in widgets - any roadmap?

Post by livfoss » Mon Sep 05, 2016 10:03 pm

In reply to pthirkell, I am encouraged by your experience with color and SVG. I got the idea from the conference sessions that only monochrome graphics were available - maybe I was just wrong!

Although I said that I wanted photorealistic images, I am willing to back off and use some kind of easily recognisable symbolic representations. I need to show a number of states - for example, a light that is off or on, where the colors change but the shape and size of the object stay static. I would hope to do this in a single widget which can be be switched into different states and can also be resized, at least at initialisation time when the app works out what screen real estate it has.

I have to say I am still rather confused about SVG, scaling and widgets. There is a tutorial about the Pie Chart widget, which as far as I can see doesn't use SVG, but is nevertheless resizable, and being constructed entirely of vector objects, doesn't have resolution problems when resized. Would this have been better implemented using SVGs, or have I completely misunderstood something (quite likely)? I also note that in the wider world, a lot of SVGs are in fact icons rather than larger, more complex objects. Is this the way the mother ship thinks of them, or can we have widgets as big as a screen? I wish I'd asked more questions at the conference, but it was all too new then...
Graham Samuel / The Living Fossil Co. / UK & France

pthirkell
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 84
Joined: Tue Nov 17, 2009 6:47 pm
Location: Wellington, New Zealand

Re: SVG in widgets - any roadmap?

Post by pthirkell » Wed Oct 12, 2016 3:56 am

I have persevered with my attempts to create multicoloured widgets, because I need them for another project. I realise that it may well have a short "half-life" because, as Bernd helpfully pointed out, it is intended that full SVG support will eventually find its way into the engine. I don't regret the effort however because it has helped me enormously to come to grips with Livecode Builder. Having multi-coloured widgets available also helps to stimulate the imagination in terms of what becomes possible from an interface design point of view.

In response to livfoss, I found that widgets which are essentially pictures (albeit in SVG format) size beautifully to full screen. I have included a few examples in the widget, one of which could be a full screen backdrop for say a slide or presentation. Also, based on your comments, I have included the ability to control the colors of any four paths at runtime. Two examples are provided in the API documentation, using the "controller" widget and the "tiger" widget.

The widget is attached as a zipped .lce file for anyone who might like to try it out. I have tested a little on Mac, but not at all on Windows or Linux. So any feedback on whether it works on other platforms, or about the widget more generally, is welcome.

Ten SVG files are built in as examples. If you use any or all of these in public apps then please comply with the necessary copyright requirements. The source file web links are included in the API documentation. Most of them are free provided properly acknowledged.

Known issues:
1. Rotation only works in a rudimentary fashion. I don't really need this but if it becomes an issue for anyone then let me know.
2. The widget is built to handle SVG exported from the "Affinity Designer" application on Mac (and soon to be Windows as well - currently available for free in beta). It might use SVG files generated by other applications but I haven't tested this at all.
3. Fill-rules, definitions and gradients haven't been implemented. Maybe they could be, but I have to move on to other things.
SVG_Color_Built-in_Icons_Images.png
Postscript ... my zipped .lce file is 286k which exceeds the maximum file size for uploading. Alternative options for posting?

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3187
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Re: SVG in widgets - any roadmap?

Post by bn » Wed Oct 12, 2016 10:22 am

Hi Peter,

that looks fantastic. I am very eager to see how you did it.

Could you just upload the .lcb file? Then one could compile the widget from the source and install it. Any additional material could be posted separately.

Kind regards
Bernd

pthirkell
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 84
Joined: Tue Nov 17, 2009 6:47 pm
Location: Wellington, New Zealand

Re: SVG in widgets - any roadmap?

Post by pthirkell » Wed Oct 12, 2016 10:41 am

OK sure ... good idea!
Widget_Scale_mark4.lcb.zip
SVG Color lcb file
(130.38 KiB) Downloaded 116 times

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3187
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Re: SVG in widgets - any roadmap?

Post by bn » Wed Oct 12, 2016 1:00 pm

Hi Peter,

this is very nice. A very good job. Thank you for this.

Some remarks

SVG files that don't work because they use a different format can be imported into Affinity Designer and placed in the upper left corner and then exported from Affinity Designer as SVG. As you mentioned, Gradients are not supported.

Also, when scribbling in Affinity Designer (pen tool works, I could not get the brush tool to work) it is best to place your scribble into the topleft corner.

Again, thanks a lot

Kind regards
Bernd

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

Re: SVG in widgets - any roadmap?

Post by [-hh] » Mon Oct 17, 2016 2:32 pm

Thanks for this really neat widget.

Because widget packages will easily cross the 250 KB-limit line of the forums I now made a simple "fileSplitAndJoin" utility and added it to the Raspi stacks collection (#82).
("Sample Stacks" would be more comfortable to use, but I have currently problems to upload there).

You can now upload up to three files (zip or image) of length < 250 KB to this forum, for example two splitted parts of the '.lce' and an image. The downloader then has to download once the fileSplitAndJoin-utility and use button "join files".

[ps. Although the lce package is itself a zip one has to use the ending ".zip" for uploading it or the parts (to the forums) ---> use button "add '.zip'" of the utility]
shiftLock happens

livfoss
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7
Joined: Sun Apr 09, 2006 10:03 am
Location: UK and France
Contact:

Re: SVG in widgets - any roadmap?

Post by livfoss » Fri Oct 21, 2016 9:31 am

This is all very encouraging, and thanks for the tremendous effort. I have not lost interest, but my time has been taken up by much more mundane problems to do with getting a production version of a project fully working cross-platform. When (don't say 'if'!) I get out of that wood, I am hoping to study this material very carefully, since what has already been done probably is enough for the project I'm hoping to turn to next. I am not sure if I will ever have the skills to contribute.
Graham Samuel / The Living Fossil Co. / UK & France

MaxV
Posts: 1314
Joined: Tue May 28, 2013 2:20 pm
Location: Italy
Contact:

Re: SVG in widgets - any roadmap?

Post by MaxV » Tue Oct 25, 2016 12:11 pm

I tried to install the LCE file with livecode 9 or 8.1, but nothing happen...
Livecode Wiki: http://livecode.wikia.com
My blog: http://livecodeitalia.blogspot.it
To post code use this: http://tinyurl.com/ogp6d5w

frans
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 5
Joined: Tue Oct 17, 2006 1:22 pm
Location: Germany
Contact:

Colour SVG please? Last pull is a year ago?

Post by frans » Fri Jan 13, 2017 11:48 am

I just tried to build the widget as well. It stops with an error ( in 9)
The TIGER image you are displaying in this thread is EXACTLY what I need ( and then some 2100 of that)

11:37 AM: Launching in Test Window
11:37 AM: Error: Community.livecode.thirkell.multicolor is not valid - malformed byte code

Necessary files

community.livecode.thirkell.multicolor.lci
manifest.xml
module.lcm
api.lcdoc


seem to be in place but at least in 9 DP4 INDY it is not compiling.Do I need to use COMMUNITY? Seems a bit strange...

I can't find anything wrong with the import module lci either (community.livecode.thirkell.multicolor.lci)

I could REALLY really do with colour SVG now to lighten the burden of a very graphically oriented app. All sizes make the package huge and SVG would slice
that dead weight immediately. Please?

All the best from Berlin
Frans
Software development and Project Management. Audio for Apps

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

Re: SVG in widgets - any roadmap?

Post by [-hh] » Fri Jan 13, 2017 3:49 pm

Peter's SVG widget runs here perfectly in 8.1.2, Indy and Commmunity version.
It does here also NOT run in latest LC 9.0.0-dpx (also after trying several workarounds).

If you tried in LC 9 then uninstall the widget in the extension builder/manager, quit LC 9 and remove all created files from your input folder (where the lcb file resides). Then compile in LC 8.1.2 again.
___

This is the same with nearly all widgets I made:
They changed again (after 8.1.1) the widget format in LC 9.0.0-dp2.

Now some (simple) widgets run again by recompiling them in LC 9 but then most of them don't work in LC 8 any more.

The problem seems to be located in the OnSave and OnLoad handlers. One has to go thru each single step and try to do workarounds if one finds a not-working-line. Even a documented feature (load image files from resource) doesn't work any more.

See also http://forums.livecode.com/viewtopic.ph ... 49#p148949

That's why I stopped working with widgets in LC 9, I don't make new widgets any more before a *stable* LC 9 release.
shiftLock happens

frans
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 5
Joined: Tue Oct 17, 2006 1:22 pm
Location: Germany
Contact:

Re: SVG in widgets - any roadmap?

Post by frans » Fri Jan 13, 2017 4:55 pm

Ah.. ok. Thanks for the info. I was under the impression this was so new that it already was for 9. But I will try 8.1.2. Thanks!
I do wish the sprites and colour scalable graphics from the original kickstarter where coming anywhere soon...

Frans
Software development and Project Management. Audio for Apps

pthirkell
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 84
Joined: Tue Nov 17, 2009 6:47 pm
Location: Wellington, New Zealand

Re: SVG in widgets - any roadmap?

Post by pthirkell » Sat Jan 14, 2017 9:18 am

I do have a slightly amended LCB script which now runs under LC 9 dp 4 if anyone particularly wants it. However I would recommend waiting unless you really need version 9 for other reasons.

There is a slightly obscure (confirmed) bug in the color picker for LC9 dp 4, but if you only need to display the color widget and not change any of the path colour properties then the amended script should work fine.

Post Reply

Return to “LiveCode Builder”