SVG Icons for iOS Radio Button

[marksmithhfx]

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

[stam]

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?

SVG import.livecode.zip

(89.39 KiB) Downloaded 116 times

[Klaus]

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:

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")
...

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

[jacque]

If you use "Import as control" and choose an SVG image, LC will do the drawingSVGCompile for you.

[Klaus]

Ah, did not know this, thank you!

[marksmithhfx]

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.

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?

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

[marksmithhfx]

If you use "Import as control" and choose an SVG image, LC will do the drawingSVGCompile for you.

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 

Once 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.

Mark

[stam]

Ηι 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.

Thanks Jacque. I need to look into this a bit more. I've had a hit and miss history with importing SVG files

I must say, i've never had a problem when using File menu > Import as control > image file to import SVGs...

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 

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.

Once 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.

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:

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...

[jiml]

Using fonts is another way to represent Radio Buttons.
From WikiPedia:

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.

This would smoothly scale too.

Jim Lambert

[marksmithhfx]

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:

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 is

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

and there are 2 color settings only because I don't want the color to change when the user selects the widget. I guess there are many roads to the same end, and many have pointed out a few here. I stumbled onto this one, and it worked, so I stuck with it. (But nice to know about the many other options as well). In the end, this is pretty simple as long as you have the right widget designs available.

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.

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.

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.

Thanks, that is a useful technique to know about. At present I don't think it iterates across all the rows though, it just updates the current row the user selects (it's just a mouseUp handler operating on the "dgLine of me"). But the inner working of DG's remains a huge mystery to me so I could easily be wrong.

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...

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.

Thanks for the tips Stam. I'm excited to give some of them a try.

Mark

[marksmithhfx]

Using fonts is another way to represent Radio Buttons.
From WikiPedia:

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.

This would smoothly scale too.

Jim Lambert

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!!

Cheers,
Mark