SVG Icons for iOS Radio Button
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller
-
- VIP Livecode Opensource Backer
- Posts: 931
- Joined: Thu Nov 13, 2008 6:48 am
- Location: London, UK
SVG Icons for iOS Radio Button
Hi, I am on the hunt for a pair of SVG icons I can use as iOS-style radio buttons. If you know of any, or have suggestions on how to make them I would appreciate it. I am particularly interested in SVG for the resizing capability. Example below.
Thanks
Mark
Thanks
Mark
macOS 12.6.5 (Monterey), Xcode 14.2, LC 10.0.0, iOS 15.6.1
Targets: Mac, iOS
Targets: Mac, iOS
Re: SVG Icons for iOS Radio Button
Hi Mark,
I was curious as to what iOS-style radiobuttons would be - it's perhaps noteworthy that there is no radio button in the iOS HIG (https://developer.apple.com/design/huma ... s/buttons/), although there is for MacOS.
If you want a mac-like radio button that's scaleable, why not just search for SVG icons for radiobuttons online and import as a control?
A cursory search for example found https://thenounproject.com/term/radio-button/
This particular site has a free tier so you can just download SVGs freely, but you probably have to quickly edit in an SVG editing app as they include attributions as part of the free svg but it's easy to delete (I use Affinity Designer, but there are free apps out there)
Below is an example with silly icons from this site attached, but they have 'proper' icons you can download instead.
Unless that wasn't your question?
I was curious as to what iOS-style radiobuttons would be - it's perhaps noteworthy that there is no radio button in the iOS HIG (https://developer.apple.com/design/huma ... s/buttons/), although there is for MacOS.
If you want a mac-like radio button that's scaleable, why not just search for SVG icons for radiobuttons online and import as a control?
A cursory search for example found https://thenounproject.com/term/radio-button/
This particular site has a free tier so you can just download SVGs freely, but you probably have to quickly edit in an SVG editing app as they include attributions as part of the free svg but it's easy to delete (I use Affinity Designer, but there are free apps out there)
Below is an example with silly icons from this site attached, but they have 'proper' icons you can download instead.
Unless that wasn't your question?
Re: SVG Icons for iOS Radio Button
Hi Mark,
and remember that we can turn SVG icons/files into an image in LC:
Check all -> drawingSVGCompile... commands and handlers in the dictionary.
Example:
Then you can use these directly as icons in your group of radiobuttons!
Fun fact, these images are resolution independant!
Hint:
Set the lockloc of your images to TRUE first, the resulting images are VERY BIG, ca. 1500*1500 pixels!
Best
Klaus
and remember that we can turn SVG icons/files into an image in LC:
Check all -> drawingSVGCompile... commands and handlers in the dictionary.
Example:
Code: Select all
...
## From file:
set the text of image 1 to drawingSvgCompile(url ("file:clock.svg"))
...
## From internal LC SVG icons:
set the text of image 1 to drawingSvgCompileIcon("thumbs up")
...
Fun fact, these images are resolution independant!
Hint:
Set the lockloc of your images to TRUE first, the resulting images are VERY BIG, ca. 1500*1500 pixels!
Best
Klaus
-
- VIP Livecode Opensource Backer
- Posts: 7228
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: SVG Icons for iOS Radio Button
If you use "Import as control" and choose an SVG image, LC will do the drawingSVGCompile for you.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com
HyperActive Software | http://www.hyperactivesw.com
Re: SVG Icons for iOS Radio Button
Ah, did not know this, thank you!
-
- VIP Livecode Opensource Backer
- Posts: 931
- Joined: Thu Nov 13, 2008 6:48 am
- Location: London, UK
Re: SVG Icons for iOS Radio Button
Thanks Stam, the SVG Import utility you posted was very useful for stripping out superfluous data from SVG files. Using that technique I was able to find a pair of SVG icons that implement a radio button (links below), not exactly in the style I was looking for, but close enough for the present. Its still is a bit of trial and error to find something in the SVG realm that will work when imported into LC from a json file. Not sure where I picked up the Json bit but I think it's a requirement for the AddIcon command if you are adding icons to standalone applications?stam wrote: ↑Fri Jul 16, 2021 1:12 amHi Mark,
I was curious as to what iOS-style radiobuttons would be - it's perhaps noteworthy that there is no radio button in the iOS HIG (https://developer.apple.com/design/huma ... s/buttons/), although there is for MacOS.
Anyway, we have a working pair, so a good starting point. I'll need to go back and document my trials with different ways of doing this, as some of it may just be me (operator error) and I need to sort that out. So I'll do that as time permits by revisiting this thread. Lets just say that not all SVG files were the same, and dealing with the variances is a bit of a nightmare. For example, I was able to design two radio button icons (on and off) very quickly in Adobe xD (maybe 3-5 minutes) but could not find a way to save the output in a way that could be interpreted by either your Import utility or the AddIcon functions (although the output had an SVG extension). So that remains a challenge.
radio button off: https://iconscout.com/icon/radio-button-1768083
radio button on: https://iconscout.com/icon/radio-1767875
Last comment, along the way I ended up with two designs; one solid filled and the other a typical partial filled radio-button. I am linking images of both pages and would love to hear feedback on which version people prefer in (a) visual appeal and (b) acceptability (ie. it doesn't matter what it looks like, question is what do people expect it to look like). Any thoughts one way or the other?
Mark
Last edited by marksmithhfx on Sat Jul 17, 2021 4:38 pm, edited 2 times in total.
macOS 12.6.5 (Monterey), Xcode 14.2, LC 10.0.0, iOS 15.6.1
Targets: Mac, iOS
Targets: Mac, iOS
-
- VIP Livecode Opensource Backer
- Posts: 931
- Joined: Thu Nov 13, 2008 6:48 am
- Location: London, UK
Re: SVG Icons for iOS Radio Button
Thanks Jacque. I need to look into this a bit more. I've had a hit and miss history with importing SVG files. One icon, purporting to be a radio-button, showed up as a solid black square when processed by LC. I was also working with pre-existing code that made it easy to swap images just by naming them;
Code: Select all
if the hilited of widget 1 of me then
set the iconPresetName of widget 1 of me to "check"
else
set the iconPresetName of widget 1 of me to "check empty"
end if
Mark
macOS 12.6.5 (Monterey), Xcode 14.2, LC 10.0.0, iOS 15.6.1
Targets: Mac, iOS
Targets: Mac, iOS
Re: SVG Icons for iOS Radio Button
Ηι Mark,
First of all, while radiobuttons are not seemingly recommended for iOS (according to the Apple interface guidelines above), the 2nd example is more 'mac-like' if personally would suggest that one.
But i'm not clear on what the point of your radiobutton selection is? If it's just to show which row is selected, it would make more sense in my mind to colour the entire row's background.
If you want to have an icon indicator for the selected row in a data grid, you could edit the setProp dgHilite handler to show/hide a graphic, widget or whatever only when the row is selected.
For example, in the data grid below the red 'x' for deletion only appears when the row is selected and is hidden in all other rows by adding 2 lines of code to the setProp dgHilite handler (as well as colouring the background of the selected row...): You could use the same technique to show 1 widget/icon/graphic when a row is selected and another when not selected without having to iterate all rows - just a couple of lines in this handler in the dataGrid's script.
Of course i can't tell if you are using a data grid or just a table field and some coding kung fu - data grids make this kind of thing easy; but on the other hand i've not used these for iOS and it may or may not be good for that...
First of all, while radiobuttons are not seemingly recommended for iOS (according to the Apple interface guidelines above), the 2nd example is more 'mac-like' if personally would suggest that one.
I must say, i've never had a problem when using File menu > Import as control > image file to import SVGs...marksmithhfx wrote: ↑Sat Jul 17, 2021 1:18 pmThanks Jacque. I need to look into this a bit more. I've had a hit and miss history with importing SVG files
In general terms that seems overcomplicated... if you assign an the id of an SVG imported as above to the icon and another to the hilitedIcon of a radiobutton, you can just toggle the hilite. In normal usage, you would group the radiobuttons and this would happen automatically, without any code.marksmithhfx wrote: ↑Sat Jul 17, 2021 1:18 pmCode: Select all
if the hilited of widget 1 of me then set the iconPresetName of widget 1 of me to "check" else set the iconPresetName of widget 1 of me to "check empty" end if
In my desktop apps i do use preset SVGs in a datagrid like you're considering (it's lazy but it works) and assign values as read from a database for display purposes - show/hide svg widgets according to data. In the example below, the tick boxes are just preset svg widgets that are shown/hidden depending on a value in a database:marksmithhfx wrote: ↑Sat Jul 17, 2021 1:18 pmOnce I could find some SVG radio-button icons I just had to change the references to "radio-on" and "radio-off", which was tempting. I was thinking how I might do the same with skinned buttons... maybe "hide" and "show"? Or could you just skin the radio button on the fly "set the icon of button "xxx" to image id nnnn". Hadn't thought of that. May well work. Of course resizing and all that might be an issue, but still worth a go when I have more time.
But i'm not clear on what the point of your radiobutton selection is? If it's just to show which row is selected, it would make more sense in my mind to colour the entire row's background.
If you want to have an icon indicator for the selected row in a data grid, you could edit the setProp dgHilite handler to show/hide a graphic, widget or whatever only when the row is selected.
For example, in the data grid below the red 'x' for deletion only appears when the row is selected and is hidden in all other rows by adding 2 lines of code to the setProp dgHilite handler (as well as colouring the background of the selected row...): You could use the same technique to show 1 widget/icon/graphic when a row is selected and another when not selected without having to iterate all rows - just a couple of lines in this handler in the dataGrid's script.
Of course i can't tell if you are using a data grid or just a table field and some coding kung fu - data grids make this kind of thing easy; but on the other hand i've not used these for iOS and it may or may not be good for that...
Re: SVG Icons for iOS Radio Button
Using fonts is another way to represent Radio Buttons.
From WikiPedia:
Jim Lambert
From WikiPedia:
This would smoothly scale too.Version 6 of the Unicode standard includes a character designated to represent a radio button () at code point 128,280 (U+1F518), found in the Miscellaneous Symbols and Pictographs section. Similar characters are the circled dot operator (⊙) (U+2299), fisheye (◉) (U+25C9), and bullseye (◎) (U+25CE).
The font Wingdings 2 contains at position 153 and 158 glyphs that look like radio buttons.
Jim Lambert
-
- VIP Livecode Opensource Backer
- Posts: 931
- Joined: Thu Nov 13, 2008 6:48 am
- Location: London, UK
Re: SVG Icons for iOS Radio Button
Something like that, but I am not using preset widgets, I am just renaming an SVG widget (it actually doesn't matter which SVG widget it is, the renaming happens before the user sees the icon). The sum total of FillInData isstam wrote: ↑Sun Jul 18, 2021 1:31 amIn my desktop apps i do use preset SVGs in a datagrid like you're considering (it's lazy but it works) and assign values as read from a database for display purposes - show/hide svg widgets according to data. In the example below, the tick boxes are just preset svg widgets that are shown/hidden depending on a value in a database:
Code: Select all
on FillInData pData
set the hilitecolor of widget 1 of me to gDefaultColor
set the foregroundColor of widget 1 of me to gDefaultColor
set the hilite of widget 1 of me to pData
if the hilited of widget 1 of me then
set the iconPresetName of widget 1 of me to "radio on"
else
set the iconPresetName of widget 1 of me to "radio off"
end if
end FillInData
I think on iOS its helpful to have something to orient the user as to what to do next. I suppose just tapping on the row might be obvious, and it's something I'll explore just to see how it feels.But i'm not clear on what the point of your radiobutton selection is? If it's just to show which row is selected, it would make more sense in my mind to colour the entire row's background.
Code: Select all
For example, in the data grid below the red 'x' for deletion only appears when the row is selected and is hidden in all other rows by adding 2 lines of code to the setProp dgHilite handler (as well as colouring the background of the selected row...):
selected dg row.jpg
You could use the same technique to show 1 widget/icon/graphic when a row is selected and another when not selected without having to iterate all rows - just a couple of lines in this handler in the dataGrid's script.
No kung fu Just a simple 3 column DG. And the values for the columns are stored in a database, so the first column is just true/false to represent the state of the icon.Of course i can't tell if you are using a data grid or just a table field and some coding kung fu - data grids make this kind of thing easy; but on the other hand i've not used these for iOS and it may or may not be good for that...
Thanks for the tips Stam. I'm excited to give some of them a try.
Mark
macOS 12.6.5 (Monterey), Xcode 14.2, LC 10.0.0, iOS 15.6.1
Targets: Mac, iOS
Targets: Mac, iOS
-
- VIP Livecode Opensource Backer
- Posts: 931
- Joined: Thu Nov 13, 2008 6:48 am
- Location: London, UK
Re: SVG Icons for iOS Radio Button
Thanks Jim. Truly something new to learn every day: I had no idea about the font code options and will have to give that a deeper look. I think U+25C9 (fisheye) was exactly what I was looking for. Heavens, the stuff you can learn here. Just fantastic!!jiml wrote: ↑Sun Jul 18, 2021 5:54 pmUsing fonts is another way to represent Radio Buttons.
From WikiPedia:This would smoothly scale too.Version 6 of the Unicode standard includes a character designated to represent a radio button () at code point 128,280 (U+1F518), found in the Miscellaneous Symbols and Pictographs section. Similar characters are the circled dot operator (⊙) (U+2299), fisheye (◉) (U+25C9), and bullseye (◎) (U+25CE).
The font Wingdings 2 contains at position 153 and 158 glyphs that look like radio buttons.
Jim Lambert
Cheers,
Mark
macOS 12.6.5 (Monterey), Xcode 14.2, LC 10.0.0, iOS 15.6.1
Targets: Mac, iOS
Targets: Mac, iOS