LiveCode Forums.

Posted: **Sat Apr 17, 2021 12:12 pm**

Hi coders...

Is it possible to split the iconpath parameter into a working few lines for a "better" display - or the code can only execute if its on a single line

Code: Select all

set  iconpath to "M1134 1229Q1142 1254 1130 1277.5 1118 1301 1093 1309 1068 1317 1044 1305 1020 1293 1012 1267 987 1187 919.5 1137.5 852 1088 768 1088 684 1088 616.5 1137.5 549 1187 524 1267 516 1293 492.5 1305 469 1317 444 1309 418 1301 406 1277.5 394 1254 402 1229 439 1108 540 1034 641 960 768 960 895 960 996.....bla bla blaaaaaaaaaaaaaaaaaaaaaahhh

Thanks

Posted: **Sat Apr 17, 2021 2:33 pm**

Hi Bruce,

do like this with the BACKSLASH:

Code: Select all

on mouseUp pMouseButton
   put "M1134 1229Q1142 1254 1130 1277.5 1118 1301 1093 1309 1068" \
         && "1317 1044 1305 1020 1293 1012 1267 987 1187 919.5 1137.5 852" \
         && "1088 768 1088 684 1088 616.5 1137.5 549 1187 524 1267 516 1293 492.5" \ 
         && "1305 469 1317 444 1309 418 1301 406 1277.5 394 1254 402 1229 439 1108" \
         && "540 1034 641 960 768 960 895 960 996.....bla bla blaaaaaaaaaaaaaaaaaaaaaahhh" into tIconpath
   ## etc..
   ## set iconpath to tIconpath
end mouseUp

Best

Klaus

Posted: **Sat Apr 17, 2021 4:57 pm**

liveme wrote: ↑
Sat Apr 17, 2021 12:12 pm
Is it possible to split the iconpath parameter into a working few lines for a "better" display
Code: Select all
set  iconpath to "M1134 1229Q1142 1254 1130 1277.5 1118 1301 1093 1309 1068 1317 ..................... "

A little saturday night gift for you Sir

build a little stack with 2 fields and one button.
1st field will contain the one-very-long-line of an iconpath,
the 2nd will contain the wrapped version

but before put this script in the button.

Code: Select all

on mouseUp
   put svgPathWrapper( fld 1, 60) into fld 2
end mouseUp

function svgPathWrapper Tpath, linesLen
   local T2, p1, p2, ps
   put 1 into p1
   put linesLen into p2
   repeat forever
      put byteOffset( space, Tpath, p2) into ps
      if ps = 0 then exit repeat
      put p2 + ps into p2
      put quote & char p1 to p2 -1 of Tpath & \
            quote & " && \ " &cr after T2
      add linesLen + ps to p1
      add linesLen to p2
      if p2 >= the length of T then
         put quote & char p1 to -1 of Tpath & \
               quote &Cr after T2
         exit repeat
      end if
   end repeat
   return T2
end svgPathWrapper

Happy coding,

Thierry

PS: I'm using another script,a shorter one with a regex and sunnyrex;
thus, didn't do enough tests with this code snippet. You have been warned!

Posted: **Sat Apr 17, 2021 7:52 pm**

Thanks guys,

I came up with this "short code"

for a quick fix...
(I'll probably test Thierry's code on my next forced lockdown...

)

Code: Select all

      put "" \
            && "M1134 1229Q1142 1254 1130 1277.5 1118 1301 1093 1309 1068" \
            && "1317 1044 1305 1020 1293 1012 1267 987 1187 919.5 1137.5 852" \
            && "1088 768 1088 684 1088 616.5 1137.5 549 1187 524 1267 516 1293 " \
            &&"492.5 1305 469 1317 444 1309 418 1301 406 1277.5 394 1254 402 1229" \
            &&"439 1108 540 1034 641 960 768 960 895 960 996 1034 1097 1108 1134 1229ZM640" \
            &&"640Q640 693 602.5 730.5 565 768 512 768 459 768 421.5 730.5 384 693 384 640 384" \
            &&"587 421.5 549.5 459 512 512 512 565 512 602.5 549.5 640 587 640 640ZM1152 640Q1152" \ 
            &&"693 1114.5 730.5 1077 768 1024 768 971 768 933.5 730.5 896 693 896 640 896 587 " \
            &&"933.5 549.5 971 512 1024 512 1077 512 1114.5 549.5 1152 587 1152 640ZM1408 896Q1408 " \
            &&"766 1357 647.5 1306 529 1220.5 443.5 1135 358 1016.5 307 898 256 768 256 638 256 " \
            &&"519.5 307 401 358 315.5 443.5 230 529 179 647.5 128 766 128 896 128 1026 179 1144.5" \ 
            &&"230 1263 315.5 1348.5 401 1434 519.5 1485 638 1536 768 1536 898 1536 1016.5 1485 " \
            &&"1135 1434 1220.5 1348.5 1306 1263 1357 1144.5 1408 1026 1408 896ZM1536 896Q1536 " \
            &&"1105 1433 1281.5 1330 1458 1153.5 1561 977 1664 768 1664 559 1664 382.5 1561 206 " \
            &&"1458 103 1281.5 0 1105 0 896 0 687 103 510.5 206 334 382.5 231 559 128 768 128 977 " \
            &&"128 1153.5 231 1330 334 1433 510.5 1536 687 1536 896Z" into ticonsmile
      set iconpath of widget MYCON to ticonsmile

(...eventually storing all needed icon's paths into a specific stack would keep code reading ok)

editing :
... Now that I see path written that way, one could probably make this smilley icon "blink an eye" just by replacing 1 code line
with a "blink eye code"...for a fraction of time

Posted: **Sat Apr 17, 2021 9:16 pm**

since it looks as really many lines of codes for a simple icon...!!!
I went looking for some shorter SVG smilley alike path and found this one :

So its only 4 lines long instead of 16 lines ....(without a face circle.)
I doubt a circle would require 12 extra lines of code...or does it ???

https://icons.getbootstrap.com/icons/emoji-smile/

seems more friendly to me !

: smilley.png (792 Bytes) Viewed 10519 times

: smileyLC.png (1.2 KiB) Viewed 10519 times

Posted: **Sun Apr 18, 2021 8:15 pm**

I must say SVG paths are just one of those things i just don't understand - so i just copy code from the internet which is really quite a rich source. Unfortunately getting that data into LC remains a challenge (unless i'm missing something? - the only way i know of is to strip the svg path from non-path data, paste it into the path of an svg widget and hope that it works).

I really wish LC would understand 'normal' SVG data like the smiley face liveme points to:

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-smile" viewBox="0 0 16 16">
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
  <path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"/>
</svg>

this generates a smiley face with a circle around it

According to the official LC lesson, the idea is to strip out the data path and paste it into the svg path of an svg widget. However even if you strip the path data it's not always interpreted correctly... i the above example that would be

Code: Select all

M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z
M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z

but this generates the smily face when put into the svg path of an svg widget in livecode... but instead of a an empty circle you get a circle that is half-filled, so you only see half of the smiley face.

The easy solution to this is to strip down the code and remove the first line (which obvious tries to code for the circle:

Code: Select all

M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z

this generates the smiley face, but with no circle around it.

Of course if i understood the SVG pathing better i might be able to fix this, but really i don't think i should know how to program svg paths to use them, and would hope that the svg widget is improved in the future...

Posted: **Sun Apr 18, 2021 11:06 pm**

HI Stam,
Oh, I get it now ..why the circle was not included...and why I too got the half-face !

If I understand it, the M letter is where a Line starts...And the Z is where it ends... and they use relative and abolute Coord, I myself not knowledgeable enuff about SVG format...

there is much more than just that...

I'd think...unless you build your own SVG "editor in LC code" itself :
Doing an ....SVG copy/paste or import from whatever source will stay a tricky unreliable method !!
* I have browsed one Linux store but could not find a tool that would easely "extract" just the wanted path from whatever Internet SVG image/icon, and I'd rather use a GUI tool than the command line for that...

I guess an LC SVG editor would require at least :
1 "drawing feature" drag/drop : circle/square/whatever...library shape predesigned.
1 Elastic lines modifier like select a node and strech your line as you wish!
1 Line thickness tool
1 Color/paint selection tool
I m not sure if LC already offers such a Line-pull to stretch tool for a mouse draggin a point.
That would be cooler than being limited to only predefined-shapes like with drag/drop ...so as to drop a smile for instance.

If such tool would be possible in LC, I guess LC would be a good candidate to code its own Stack/App to Design SVG icons, crossplateforms !

As for the SVG Path Storing feature, LC IDE is quite "dumb simple" about it, but if that works...

Beside storing the path in a dedicated stack I dont see how LC could store it "nicely" without involving a small external DB like Sqlite, or even text file, which requires much more coding just to deal with that, so probably smarter to keep it dumb simple for this.

I'd be ready to study project requirements for an opensource SVG free Editor in order to output at least :
- all SVG "Path strings" designed with it, so that one could just copy them back to one's favorite LC stack ..And voila !

Posted: **Mon Apr 19, 2021 5:26 pm**

The easiest way to import an SVG is to use the "Import as control" menu item to import an image. Recent versions of LC recognize SVG files as images, and after import the SVG retains its scaling capabilities and also can be used as button icons.

This way you don't have to worry about the actual path described in the XML.

Posted: **Mon Apr 19, 2021 6:09 pm**

jacque wrote: ↑
Mon Apr 19, 2021 5:26 pm
The easiest way to import an SVG is to use the "Import as control" menu item to import an image.

Ah, thank you Jacque... i think i kinda knew that already, but because i had gone through the lesson in detail early on, that kinda stuck with me even though i've actually imported my own custom SVGs as image controls previously.
Sometimes my brain just needs a thorough cleaning out and a restart!
Will ignore the lesson from now on

Posted: **Mon Apr 19, 2021 7:25 pm**

I wish I could remember which things I forgot.

Posted: **Mon Apr 19, 2021 10:49 pm**

You may change your mind after reading this :

The blessing and curse of the people who never forget

https://www.bbc.com/future/article/2017 ... ant-forget

so...let's remember to forget - its 1/2 the reason why Forums exist, neeeh ?

Oh (almost forgot) tks for the "import to control"...stuff

LiveCode Forums.

splitting a long icon path into several lines - possible ?

splitting a long icon path into several lines - possible ?

Re: splitting a long icon path into several lines - possible ?

Re: splitting a long icon path into several lines - possible ?

Re: splitting a long icon path into several lines - possible ?

Re: splitting a long icon path into several lines - possible ?

Re: splitting a long icon path into several lines - possible ?

Re: splitting a long icon path into several lines - possible ?

Re: splitting a long icon path into several lines - possible ?

Re: splitting a long icon path into several lines - possible ?

Re: splitting a long icon path into several lines - possible ?

Re: splitting a long icon path into several lines - possible ?