SVG widget guff

Visuals, audio, animation. Blended, not stirred. If LiveCode is part of your rich media production toolbox, this is the forum for you.

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

Post Reply
richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9285
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

SVG widget guff

Post by richmond62 » Fri Apr 21, 2017 8:44 pm

All the SVG images natively available to Livecode 8.1.3 and up are contained in a font "fontawesome.ttf" which is not all that awesome
at all as the images are stored non-contiguously in a Private-use area making it almost impossible to automate the process of
generating buttons without a lot of donkey-work subsequently.

I started and got fed-up; for whatever my effort is worth here it is:
whatEver.png
complete picture of all the glyphs in the font:
Screen Shot 2017-04-21 at 10.37.18 pm.png
EssVeeGeeze.livecode.zip
Stack
(6.67 KiB) Downloaded 367 times
Oh; IF you click on any of the fields the SVG glyph in the field should be copied to your clipboard.

Klaus
Posts: 13806
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: SVG widget guff

Post by Klaus » Fri Apr 21, 2017 8:50 pm

Hi all,

I just created a SVG icon viewer, it shows all available SCG incons with their names in a nice datagrid, have fun!
Requires LC >=8.x

EDIT:
Deleted this attachment, see posting below!


Best

Klaus

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9285
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: SVG widget guff

Post by richmond62 » Fri Apr 21, 2017 8:51 pm

A bit too late at night to offer you a glass of beer, Klaus!

Klaus
Posts: 13806
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: SVG widget guff

Post by Klaus » Fri Apr 21, 2017 8:54 pm

Not really, but it might get a bit mouldy until it arrives here... :D

Klaus
Posts: 13806
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: SVG widget guff

Post by Klaus » Fri Apr 21, 2017 9:04 pm

Please delete my first stack, I overlooked that some icons have longer names
and my first version of hte datagrid only supported shorter (one line) names.

Here a corrected version:
Attachments
svg_icon_viewer.livecode.zip
(22.66 KiB) Downloaded 355 times

asayd
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 107
Joined: Mon Apr 10, 2006 7:02 pm
Location: Provo, Utah, USA
Contact:

Re: SVG widget guff

Post by asayd » Fri Apr 21, 2017 10:19 pm

I've often wished for a icon list picker that could be filtered. Scrolling through all of the icons is too busy for my eyes. :shock:

UPDATE: Deleted version 1. See updated stack below, which has UI goodies added.
Last edited by asayd on Thu Apr 27, 2017 5:18 pm, edited 1 time in total.
Devin Asay
Learn to code with LiveCode University
https://livecode.com/store/education/

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7214
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: SVG widget guff

Post by jacque » Sat Apr 22, 2017 9:09 pm

All three are really useful for different reasons. If anyone has time to tinker, it'd be great to see them combined into one stack:

1. The stack would open to Klaus' view
2. Clicking on a widget in Klaus' view would open Devin's picker with that icon selected.
3. There would be a way (in either view) to show the font code so that we could copy it or reference it to type into our own field (i.e., use the font and not the widget.)

There are some occasions where I want to convert the SVG to an image for use with imageSource, which is why it would be handy to be able to type the font glyph. I haven't yet figured out the syntax to convert the hex codes to something that works with numToChar/byteToChar but it seems Richmond has.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9285
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: SVG widget guff

Post by richmond62 » Sun Apr 23, 2017 9:09 am

numToChar/byteToChar
Um . . . slightly out of date . . .

numToCodePoint

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7214
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: SVG widget guff

Post by jacque » Sun Apr 23, 2017 6:43 pm

Not only out of date, but I didn't mean "hex" either. When I look up the font glyphs at the fontawesome web site, they list only the names. To enter a character via script I'd need the number in the character table, and that's the piece I don't know how to retrieve. I don't have a font editor and Font Book is deficient.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

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

Re: SVG widget guff

Post by bn » Sun Apr 23, 2017 8:59 pm

Hi Jacque,

this is my clumsy attempt at putting text using fontawesome into a field or the label of a button. Probably there is an easier way.

the trick here is to use iconCodePointFromName which returns a hex number for a given name of fontawesome.

make a button "bTest" and a field "fTest"

put this script into another button

Code: Select all

on mouseUp
   lock screen
   local tCodePoint, tList, tAnIcon
   put iconNames() into tList -- gets names of fontawsome
   put any line of tList into tAnIcon
   put iconCodePointFromName(tAnIcon) into tCodePoint -- get hex value of name
   put baseconvert(tCodePoint, 16,10) into tCodePoint
   put "&#" & tCodePoint & ";" into tCodePoint
   
   reset the templateField
   set the htmlText of the templateField to tCodePoint
   
   set the textFont of field "fTest" to "fontawesome"
   set the textFont of button "bTest" to "fontawesome"
   
   set the text of field "fTest" to the text of the templateField 
   set the label of button "bTest" to the text of the templateField
   reset the templateField
   
   unlock screen
end mouseUp
This works except for 4 names

collapse alt; decimal 61719
expand alt; decimal 61718
Hourglass; decimal 62034
Stop circle; decimal 62093

Maybe someone can explain to me what I did wrong/why those 4 are not working. There is something in the field but not a representation of the SVG.

this is in LC8 DP6

Kind regards
Bernd

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7214
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: SVG widget guff

Post by jacque » Mon Apr 24, 2017 7:14 am

Thanks Bernd, exactly what I needed. I was missing the iconCodePointFromName trick, that was the key. I combined Richmond's tip about numToCodepoint to condense your script, it seems to work most of the time:

Code: Select all

on mouseUp
  local tCodePoint, tList, tAnIcon
  put iconNames() into tList -- gets names of fontawsome
  put any line of tList into tAnIcon
  put "0x" & iconCodePointFromName(tAnIcon) into tCodePoint -- get hex value of name
  put numToCodepoint(tCodePoint) into fld "fTest"
  set the label of button "bTest" to numToCodepoint(tCodePoint)
end mouseUp
I couldn't get the four characters you listed to work either. I wonder if iconCodePointFromName is returning the wrong hex. The symbol they produce is the generic "?" for a missing character, I think.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

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

Re: SVG widget guff

Post by bn » Mon Apr 24, 2017 7:34 am

Thanks Jacque,
I combined Richmond's tip about numToCodepoint to condense your script
that is a lot cleaner.
I couldn't get the four characters you listed to work either. I wonder if iconCodePointFromName is returning the wrong hex.
I looked up the hex for the four characters at "font awesome.io" and the hex was exactly as it is returned from iconCodePointFromName()

might be a bug, but I don't speak UniCode, just LiveCode :) , that is the "english-like language". UniCode is the "not-like-anything-else-in-the-world language".

Kind regards
Bernd

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7214
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: SVG widget guff

Post by jacque » Mon Apr 24, 2017 7:45 am

UniCode is the "not-like-anything-else-in-the-world language".
That's because it is all languages in the world smashed together. :? Seems like the missing characters might be a bug then, since the hex is correct.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

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

Re: SVG widget guff

Post by bn » Mon Apr 24, 2017 8:34 am

I filed a bug report

http://quality.livecode.com/show_bug.cgi?id=19616

Kind regards
Bernd

asayd
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 107
Joined: Mon Apr 10, 2006 7:02 pm
Location: Provo, Utah, USA
Contact:

Re: SVG widget guff

Post by asayd » Thu Apr 27, 2017 5:16 pm

I updated by SVGIconPicker stack with some UI niceties:
- Down arrow key in filter field selects next line in icon list
- Up and down arrow keys in icon list change selection
- Cmd/Cntl + F selects filter field
- Shift + Cmd/Cntl + F clears filter and selectes filter field.
- Tooltips added.
Attachments
SVGIconPicker.livecode.zip
(6.79 KiB) Downloaded 346 times
Devin Asay
Learn to code with LiveCode University
https://livecode.com/store/education/

Post Reply

Return to “Multimedia”