Adding your own icons to the Navigation and Header bar widgets

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller

Post Reply
jameshale
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 474
Joined: Thu Sep 04, 2008 6:23 am
Location: Melbourne Australia

Adding your own icons to the Navigation and Header bar widgets

Post by jameshale » Sat Apr 01, 2023 5:30 am

Currently rewriting an app that use a bit of geometry scripts to handle different screen sizes and orientations.
I thought I would try out the Responsive Layout with that navigation bar widget to handle moving my controls around.
Worked quite well except the icons available in the IDE were not suitable for my needs.
I had previously used SVG widgets as buttons and drew the SVGs I wanted.
Asking on the forum and also the mothership I was pointed to the Addicon function.
This takes an SVG path and adds it to a "custom" icon library.
Unfortunately this only exists for the IDE session you are in and the library is not saved with you stack.
Hence the AddIcon function must be called when you open your stack each time.
That't OK, but where to store the SVG paths required?
I not sure when but LC now allows you to drag an SVG file on to a card and produce a SVG widget with the SVG path from the dragged file.
So if you, like me, have a card in your stack where you store the odd resource you can simply store the SVG widgets there.
Here is my resources card from my test stack:
Screenshot.png
With widgets "stacks", "collections","favminus","favadd"
To load these widgets so they will be available to my stack I place the following code in the first card:

Code: Select all

on preOpenCard
   put the iconpath of widget "favadd" of cd "resources" into ip
   get addicon("favadd",ip,9)
   put the iconpath of widget "collections"  of cd "resources" into ip
   get addicon("collections",ip,10)  
   put the iconpath of widget "favminus" of cd "resources" into ip
   get addicon("favminus",ip,9)
   put the iconpath of widget "stacks"  of cd "resources" into ip
   get addicon("stacks",ip,10)  
end preOpenCard
To access these newly added icons in the IDE you will nee to switch to the custom Library *which is where they are placed.)
in the message box...
setCurrentIconFamily("custom")

Now they will appear in the PI of the header/navigation bars when you click on an icon to change.
to get back to the inbuilt library...
setCurrentIconFamily("fontawesome")

So how did it work?
Screenshot 1.png

stam
Posts: 2599
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

Re: Adding your own icons to the Navigation and Header bar widgets

Post by stam » Sat Apr 01, 2023 3:18 pm

Thanks James that looks swish :)

But I do think there is a way to add SVG icons to the standard library, I think maybe using drawingSvgCompile?

jameshale
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 474
Joined: Thu Sep 04, 2008 6:23 am
Location: Melbourne Australia

Re: Adding your own icons to the Navigation and Header bar widgets

Post by jameshale » Sat Apr 01, 2023 3:36 pm

Hi stam,
drawingSvgCompile is for for building the binary string representing the SVG file.
The "Icon SVG Library" has commands for adding icons but they all go to the "custom" library.
I don't think there is a merge library command, although if there is it could be dangerous to use.
You would need to get all the names and code points for both and make sure none matched, unless you plan on replacing icons in the main library.
You can probably export the custom library, have it saved with the standalone and then loaded in, but all that seems excessive for only a few icon additions

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9250
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Adding your own icons to the Navigation and Header bar widgets

Post by richmond62 » Sat Apr 01, 2023 4:42 pm

SShot 2023-04-01 at 18.40.47.png
-
Hmm . . . but, then, I have never felt 'that good' about widgets when you can roll your
own in LiveCode.
Attachments
SVGeeeeze.livecode.zip
Stack.
(24.05 KiB) Downloaded 50 times

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

Re: Adding your own icons to the Navigation and Header bar widgets

Post by jacque » Sat Apr 01, 2023 7:41 pm

When I needed to do this, I used the built-in equivalent of drawingSvgCompile; it's automatically included when you use the Import File -> Image menu. If you choose an SVG it will be converted to a scalable image that works the same way the SVG widget does. It is still a vector image. I imported all my custom SVGs and after that I could assign them to buttons, header widgets, etc. just like any other type of image. No scripting is required and they scale beautifully.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

jameshale
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 474
Joined: Thu Sep 04, 2008 6:23 am
Location: Melbourne Australia

Re: Adding your own icons to the Navigation and Header bar widgets

Post by jameshale » Sun Apr 02, 2023 7:54 am

Sorry Richmond I have no clue as to the meaning of your stack.

As for your post Jacque I am intrigued as to how you imported your SVGs into the header bar widget.
I thought it could only accept icons (as stored in a library).
Importing an SVG as a control produces an image object, which certainly behaves as a vector image.
But looking up "image" object in dictionary, I can't see anyway to extract this path data.

The addIcon handler which adds icons to an icon library requires a SVG path.

I initially did import my custom icons as controls and just used them as buttons but then I had to reposition them in allowing for different screen sizes and orientations.
Using a navigation bar widget and the responsive layout does all the repositioning I needed.
I also worked out what needs to happen to use the GM to reposition the buttons (in my case evenly spaced along the bottom of the screen).
The Nav Bar widget just seems neater, especially with the labels.
The GM of individual graphics did allow colour changes that I can't do with the nav bar widget (all icons have same colour) but that's probably a good thing.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9250
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Adding your own icons to the Navigation and Header bar widgets

Post by richmond62 » Sun Apr 02, 2023 10:29 am

What I mean is that I would just import the SVG images like any other images and use them in standard icons, and not bother with the widget.

stam
Posts: 2599
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

Re: Adding your own icons to the Navigation and Header bar widgets

Post by stam » Sun Apr 02, 2023 3:47 pm

richmond62 wrote:
Sun Apr 02, 2023 10:29 am
What I mean is that I would just import the SVG images like any other images and use them in standard icons, and not bother with the widget.
Of course it's not that simple though is it... the widget is effectively a button bar that allows both text, images or text+image to allow single or multiple selections and trigger an action.
You'd have to code auto-resizing (if your button bar resizes with window size for example), allowing only one active button, hilite states, icon sizes, text sizes, positioning of text so it aligns across all 'buttons', etc.

Importing SVGs to do this is doable, but highly 'gadgety', hard work to create and difficult to maintain... The widget is a solid solution.
James has kindly shown us a way to use more icons that the default with this.

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

Re: Adding your own icons to the Navigation and Header bar widgets

Post by jacque » Sun Apr 02, 2023 8:42 pm

jameshale wrote:
Sun Apr 02, 2023 7:54 am
As for your post Jacque I am intrigued as to how you imported your SVGs into the header bar widget.
I thought it could only accept icons (as stored in a library).
You're right, I misspoke. I had to go look at the stack to see what I'd done.

I created an iconFamily using a tool posted to the list or these forums (sorry, I can't recall which one) and saved the icon set as a family on disk in arrayEncode format. The file extension was ".lson" if that helps identify the tool, and it contained the name and SVG path for each custom icon. Then I ran this once during development:

Code: Select all

on getIcons -- get a saved file, convert to array for storage
  answer file "Choose the icon family file:"
  put url ("binfile:" & it) into tIcons
  put arrayDecode(tIcons) into tArray
  repeat for each key k in tArray
    put the last trueword of k into tKey
    put tArray[k]["codepoint"] into FPIcons[tKey]["codepoint"]
    put tArray[k]["svg"] into FPIcons[tKey]["svg"]
  end repeat
  set the cFPIcons of this stack to FPIcons
end getIcons
Then in a preOpenStack handler on the first card of the mainstack I included this:

Code: Select all

  addIconFamily "FPIcons",the cFPIcons of this stack
That worked both in the IDE and in the mobile app. Here's what my custom property looked like:
Screen Shot 2023-04-02 at 2.48.10 PM.png
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

jameshale
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 474
Joined: Thu Sep 04, 2008 6:23 am
Location: Melbourne Australia

Re: Adding your own icons to the Navigation and Header bar widgets

Post by jameshale » Mon Apr 03, 2023 1:09 am

Ah yes, I played with that stack too.
It took me a while to realise what to do with the .lson file.
But then I figured with only 4 icons wanted it was just as easy to add them as I did.
If I need more it is simpler than creating a new library. ;-)

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

Re: Adding your own icons to the Navigation and Header bar widgets

Post by jacque » Mon Apr 03, 2023 3:52 am

Actually you could just create the array manually in the property inspector and add it to the SVG library at startup. Looking back, I should have done that since I only had about 8 icons. But at the time, icon families were new to me and I made it harder than it needed to be.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

bwmilby
Posts: 438
Joined: Wed Jun 07, 2017 5:37 am
Location: Henrico, VA
Contact:

Re: Adding your own icons to the Navigation and Header bar widgets

Post by bwmilby » Mon Apr 03, 2023 4:11 am

Probably my tool:
https://github.com/bwmilby/SvgIconTool

LSON is just a serialized LiveCode array. I used it mainly as an easy way to facilitate exporting the data as a single file for each family. For an actual project, I would probably use a custom property in the main stack to store the data as shown earlier.
Brian Milby

Script Tracker https://github.com/bwmilby/scriptTracker

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”