SVG widget guff
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller
-
- Livecode Opensource Backer
- Posts: 9389
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
SVG widget guff
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.
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
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
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
-
- Livecode Opensource Backer
- Posts: 9389
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: SVG widget guff
A bit too late at night to offer you a glass of beer, Klaus!
Re: SVG widget guff
Not really, but it might get a bit mouldy until it arrives here...
Re: SVG widget guff
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:
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 359 times
-
- Livecode Opensource Backer
- Posts: 107
- Joined: Mon Apr 10, 2006 7:02 pm
- Location: Provo, Utah, USA
- Contact:
Re: SVG widget guff
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.
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/
Learn to code with LiveCode University
https://livecode.com/store/education/
-
- VIP Livecode Opensource Backer
- Posts: 7239
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: SVG widget guff
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.
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
HyperActive Software | http://www.hyperactivesw.com
-
- Livecode Opensource Backer
- Posts: 9389
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: SVG widget guff
Um . . . slightly out of date . . .numToChar/byteToChar
numToCodePoint
-
- VIP Livecode Opensource Backer
- Posts: 7239
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: SVG widget guff
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
HyperActive Software | http://www.hyperactivesw.com
-
- VIP Livecode Opensource Backer
- Posts: 4003
- Joined: Sun Jan 07, 2007 9:12 pm
- Location: Bochum, Germany
Re: SVG widget guff
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
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
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
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
-
- VIP Livecode Opensource Backer
- Posts: 7239
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: SVG widget guff
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:
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.
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
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com
HyperActive Software | http://www.hyperactivesw.com
-
- VIP Livecode Opensource Backer
- Posts: 4003
- Joined: Sun Jan 07, 2007 9:12 pm
- Location: Bochum, Germany
Re: SVG widget guff
Thanks Jacque,
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
that is a lot cleaner.I combined Richmond's tip about numToCodepoint to condense your script
I looked up the hex for the four characters at "font awesome.io" and the hex was exactly as it is returned from iconCodePointFromName()I couldn't get the four characters you listed to work either. I wonder if iconCodePointFromName is returning the wrong hex.
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
-
- VIP Livecode Opensource Backer
- Posts: 7239
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: SVG widget guff
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.UniCode is the "not-like-anything-else-in-the-world language".
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com
HyperActive Software | http://www.hyperactivesw.com
-
- Livecode Opensource Backer
- Posts: 107
- Joined: Mon Apr 10, 2006 7:02 pm
- Location: Provo, Utah, USA
- Contact:
Re: SVG widget guff
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.
- 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 351 times
Devin Asay
Learn to code with LiveCode University
https://livecode.com/store/education/
Learn to code with LiveCode University
https://livecode.com/store/education/