Page 1 of 1
SVG widget guff
Posted: Fri Apr 21, 2017 8:44 pm
by richmond62
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:
complete picture of all the glyphs in the font:
Oh; IF you click on any of the fields the SVG glyph in the field should be copied to your clipboard.
Re: SVG widget guff
Posted: Fri Apr 21, 2017 8:50 pm
by Klaus
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
Re: SVG widget guff
Posted: Fri Apr 21, 2017 8:51 pm
by richmond62
A bit too late at night to offer you a glass of beer, Klaus!
Re: SVG widget guff
Posted: Fri Apr 21, 2017 8:54 pm
by Klaus
Not really, but it might get a bit mouldy until it arrives here...
Re: SVG widget guff
Posted: Fri Apr 21, 2017 9:04 pm
by Klaus
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:
Re: SVG widget guff
Posted: Fri Apr 21, 2017 10:19 pm
by asayd
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.
UPDATE: Deleted version 1. See updated stack below, which has UI goodies added.
Re: SVG widget guff
Posted: Sat Apr 22, 2017 9:09 pm
by jacque
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.
Re: SVG widget guff
Posted: Sun Apr 23, 2017 9:09 am
by richmond62
numToChar/byteToChar
Um . . . slightly out of date . . .
numToCodePoint
Re: SVG widget guff
Posted: Sun Apr 23, 2017 6:43 pm
by jacque
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.
Re: SVG widget guff
Posted: Sun Apr 23, 2017 8:59 pm
by bn
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
Re: SVG widget guff
Posted: Mon Apr 24, 2017 7:14 am
by jacque
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.
Re: SVG widget guff
Posted: Mon Apr 24, 2017 7:34 am
by bn
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
Re: SVG widget guff
Posted: Mon Apr 24, 2017 7:45 am
by jacque
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.
Re: SVG widget guff
Posted: Mon Apr 24, 2017 8:34 am
by bn
Re: SVG widget guff
Posted: Thu Apr 27, 2017 5:16 pm
by asayd
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.