SVG Icon Tool

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

Moderators: Klaus, FourthWorld, heatherlaine, robinmiller, kevinmiller

bwmilby
Posts: 216
Joined: Wed Jun 07, 2017 5:37 am
Location: New Orleans, LA
Contact:

SVG Icon Tool

Post by bwmilby » Mon Jan 08, 2018 6:59 am

A thread over in the use-list got me thinking about a way to easily view groups of SVG icons. I also wanted to be sure they would render properly in LC, so I didn't want to rely on the web pages that already existed.

The post from HH got me started (thanks for the drag example code). My first card is just an extension of that code to allow for icons with multiple paths. Some won't render properly if they rely on setting fills, etc. The second card loads a list of files in a folder and allows moving between icons within LC (not shown). Both of those card get their data from a drag into the card. The third card takes it a step further and displays 80 icons on a page (arrows to change). Hover to see the name of an icon.
icon-cd.jpg
grid-cd.jpg
My ultimate goal is to make something that could be useful in managing icon sets for use in a LC project. The SVG Icon Library code is pretty easy to extent to allow for custom icons. Once that is done, all of the widgets that require a library icon will be able to use the custom ones (but you may need to set them via script).

Right now it reloads data when launched, but I'm thinking about having it retain the icons that have been imported via a custom property.

I used a group for each row of icons and manually copied them. If someone has some example code on how to make it resizable, that would be great. My thought is that as the width changes, columns would be added/removed. Same thing for height, but for rows. I thought about defining a maximum size and extending everything out that far and then just clearing the ones that are not fully visible, but wanted to think on it some before going that route. (My first method had 50 individually named icon widgets before I went back to using grouped rows).

Thanks,
Brian

(file updated, removing old version)
Last edited by bwmilby on Sun Jan 14, 2018 2:37 am, edited 1 time in total.
Brian Milby

Script Tracker https://github.com/bwmilby/lc-misc/tree/master/ScriptTracker

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1808
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: SVG Icon Tool

Post by [-hh] » Mon Jan 08, 2018 11:58 am

Great stack, Brian.

Merging your approach with the following approaches could
go to a very high level ...

http://forums.livecode.com/viewtopic.ph ... 86#p144486
http://forums.livecode.com/viewtopic.ph ... 79#p147279

SVG specialists, please work together.
shiftLock happens

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

Re: SVG Icon Tool

Post by jacque » Tue Jan 09, 2018 9:36 pm

Very nice, it's got just about everything we'd need.

I'm thinking that resizing the stack would adjust the icon sizes rather than change the number of icons per row. That would be easier in the current impementation. The alternative would be to go back to individual non-grouped icons and rearrange them, but that's more work.

In a resizestack handler, get the width and height of the stack (minus the bottom bar,) divide by kRows and/or kCols to get a new icon size, and then reduce that by some pixels to allow some margin between them. Set the margins of the groups to 8 or so, so that you also have some additional spacing around the edges and use the same number as the distance between icons. Then resize the rect of each icon to the new calculated size. You'd also need to set the top of each group except the first to the top of the one above it.

I'm not sure I explained that clearly but maybe it will give you some ideas. Of course, that leaves the issue of the other cards, which will also need resizing. If I get a chance I may play with it. I like this.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

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

Re: SVG Icon Tool

Post by jacque » Tue Jan 09, 2018 9:42 pm

A couple of other throughts: Until I read the scripts I didn't know how to page through the grid. A mention in the info card would be good, or some up/down buttons somewhere. Also, given how my screen usually looks, it was hard to rearrange all my windows so that the Finder folder and the icon stack were both visible at once. A "choose folder" button would be helpful so that the user has the option of either drag/drop or selecting a folder via the answer folder dialog.

I may think of more. :)

Edit: never mind, I see you do mention the arrow keys in the info. I'm blind or something.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

bwmilby
Posts: 216
Joined: Wed Jun 07, 2017 5:37 am
Location: New Orleans, LA
Contact:

Re: SVG Icon Tool

Post by bwmilby » Wed Jan 10, 2018 6:44 am

[-hh] wrote:
Mon Jan 08, 2018 11:58 am
Great stack, Brian.
Thanks for that. I'll see what I can incorporate. Color and more rendering options will probably wait on the IDE/engine a bit. My first intent is to build a tool that can be used to assemble icon families for use in the IDE and stacks. I'll be working on extending it to be able to select and copy icons into custom sets that can be exported as an array to be used in another project.
jacque wrote:
Tue Jan 09, 2018 9:36 pm
Very nice, it's got just about everything we'd need.
Thanks! I'm going to make the file fields at the bottom of the cards double-clickable which will bring up a file/folder dialog. I'll probably put a folder icon at the top that will do the same thing. I'm also working on adding some icons on the grid card to allow export of the data.

Originally I was planning on having a row at the bottom of the grid for arrows but then thought that it would just take space for little benefit. I guess I could put arrows at the top of the card (and even get fancy and disable them when appropriate).

I'm now seeing how the GM can do funny things. I know that I can code a custom resize handler, but I really want to make the GM work properly (without having to do custom stuff in my project). It doesn't handle switching cards after a resize well at all. I think I probably will go with a static number of icons, at least for now. That will make the handler much easier to deal with initially.

One nice thing about the SVG widget is that you can have it maintain the aspect ratio. That makes the resize handler much easier to deal with since you can just make everything proportional and the widget will keep it looking nice and "square".

I'm hoping to be able to post an update late Thursday with a few of these things knocked out. I pushed another change to the IconSVG library this evening that allow you to select the current library that the IconPicker uses to show icons in the IDE.

Thanks,
Brian
Brian Milby

Script Tracker https://github.com/bwmilby/lc-misc/tree/master/ScriptTracker

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

Re: SVG Icon Tool

Post by jacque » Wed Jan 10, 2018 8:22 am

I take back what I said about paging icons, it would probably clutter up your clean design, which I do appreciate. I should have read the info more carefully.

I'm afraid I gave up on the GM a long time ago. I use custom handlers, but maybe you can get it to work. The problem is that you have to redo all the GM settings if you change the layout, and for me it's just easier to tweak a script.

Looking forward to the next version. Incorporating this into the IDE would be great.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

bwmilby
Posts: 216
Joined: Wed Jun 07, 2017 5:37 am
Location: New Orleans, LA
Contact:

Re: SVG Icon Tool

Post by bwmilby » Fri Jan 12, 2018 6:41 am

Here's an updated version. Here are the changes:
  • Double clicking the file name/path brings up a dialog to select a file/folder
  • Two sets of icons are included as a demo
  • Resize should work for 3 cards (have not done the grid card yet)
  • Save icon just saves the state in a custom property. Need to save the stack manually. Long term this will actually export a file for the SVG icon path library (encoded array)
  • Trash icon will delete the currently selected family
  • Filled star will select all icons in family
  • Open star will de-select all icons in family
  • Click icons on the grid to toggle selection
  • Copy icon will copy the selected icons to a new family (dialog will prompt for name). This is intended for collecting icons from different sets into a custom family for use in a project.
  • Double click an icon on the grid card to copy the icon widget to the clipboard
  • Settings option to open to help text by default
  • Settings option to prepend family name to icon name when copying (idea is that one could use icons with the same file name from multiple icon sets in a single project easily)
Grid-selection.jpg

Next steps:
  • Icon data file export
  • Load family into SVG icon path library (will require updated iconsvg.lcb)
  • Option to turn stack into a pallet for easier use in the IDE
(file updated, removing old version)
Last edited by bwmilby on Sun Jan 14, 2018 2:36 am, edited 1 time in total.
Brian Milby

Script Tracker https://github.com/bwmilby/lc-misc/tree/master/ScriptTracker

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1808
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: SVG Icon Tool

Post by [-hh] » Fri Jan 12, 2018 11:53 am

A bunch of fine tools. Thanks Brian!
shiftLock happens

bwmilby
Posts: 216
Joined: Wed Jun 07, 2017 5:37 am
Location: New Orleans, LA
Contact:

Re: SVG Icon Tool

Post by bwmilby » Sun Jan 14, 2018 2:35 am

Here's a mostly feature complete version of the stack. I've added a new card for managing the icon families. This card really needs the updated SVG Icon Library to work since it relies on the new handlers. Tool tips are on all of the buttons, but they should be pretty obvious. The "play" button at the bottom is to set the current family.

library-card.jpg

Here is an updated version that has all of the icons included:
https://milby.us/lc/SvgIconTool.180114-1700.zip
This one includes a button to toplevel the stack so you can use it as a plugin and then toplevel to save changes. I also modified the grid card so that up/down change families.
Attachments
SvgIconTool.livecode.zip
(68.69 KiB) Downloaded 52 times
Last edited by bwmilby on Mon Jan 15, 2018 12:01 am, edited 2 times in total.
Brian Milby

Script Tracker https://github.com/bwmilby/lc-misc/tree/master/ScriptTracker

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

Re: SVG Icon Tool

Post by bn » Sun Jan 14, 2018 9:21 am

Thanks Brian,

this is a very nice tool. It will be ever more important the better LC can handle SVGs.

Kind regards
Bernd

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

Re: SVG Icon Tool

Post by jacque » Sun Jan 14, 2018 9:31 pm

Oh marvelous! It's pretty much perfect from where I sit, all my quibbles have been addressed. The resizing, especially of the grid, works great, which I'm sure was a little tricky to manage.

I had no idea there were so many SVG families to choose from, this is a designer's dream. Thanks so much for your work on this.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

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

Re: SVG Icon Tool

Post by jacque » Sun Jan 14, 2018 9:45 pm

Found a minor bug, do you want reports here? I immediately installed into my Plugins folder and if the stack isn't toplevel, up/down arrow keys on the grid card throw a "can't find object" error (since the stack isn't toplevel.) It just needs a more specific reference to the family button. There may be other references that need updating too, I didn't check them all.

Making the stack toplevel fixes it for now.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

bwmilby
Posts: 216
Joined: Wed Jun 07, 2017 5:37 am
Location: New Orleans, LA
Contact:

Re: SVG Icon Tool

Post by bwmilby » Sun Jan 14, 2018 11:04 pm

Thanks for the bug report (here is fine). I've updated the copy on my server that includes the icons with the fix.

The fun part about the grid was remembering that the numbers get bigger as you go down the card :) First time, they all jumped to nothingness when I had it backwards. (Glad I saved before resizing.) The resize wasn't too bad once I figured out the math since I had them grouped by row, so it was just 2 nested loops.
Brian Milby

Script Tracker https://github.com/bwmilby/lc-misc/tree/master/ScriptTracker

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

Re: SVG Icon Tool

Post by jacque » Sun Jan 14, 2018 11:52 pm

I wonder if you should run the resize handler on all the cards at once on resizeStack. If you resize the window on card 1, for example, and then go to the grid, it hasn't updated.

Having much fun with this. :)
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

bwmilby
Posts: 216
Joined: Wed Jun 07, 2017 5:37 am
Location: New Orleans, LA
Contact:

Re: SVG Icon Tool

Post by bwmilby » Mon Jan 15, 2018 12:03 am

Oops... I forgot to change how I resize in the preOpenCard script. I was just calling revUpdateGeometry directly. Just posted an update (and fixed the link above).
Brian Milby

Script Tracker https://github.com/bwmilby/lc-misc/tree/master/ScriptTracker

Post Reply

Return to “Rich Media”