Buttonbar

[HenryDi]

Hello LiveCoder,

I try to implement the new widget buttonbar. I ask me, if its possible to use own SVG Files or graphics for the button bar. Have someone an idea todo that. i didn´t find anything in the API documentation.

Thanks for helping me.

henry

[richmond62]

Do you mean by "new widget buttonbar" the Header bar or the Navigation bar, or something else?
-

-
https://livecode.com/livecode-widgets-t ... 0App%20Bar.

https://livecode.com/livecode-widgets-t ... ation-bar/

Neither of which indicate a way in which to change the SVG icons.

[Which, by-the-way, is one of the reasons I am anti-widget: I'd far rather "roll my own" so I have complete control and choice.]

Devin Asay offers this: http://livecodeshare.runrev.com/stack/8 ... con-Picker

[richmond62]

I'd always go for something home-grown:
-

-

[dunbarx]

Hi.

Have you seen this?
https://livecode.com/extensions/button-bar/1-0-1/

Widgets are self-contained controls that are constructed in order to add to the standard LiveCode controls. Can you give an example of what you are trying to do? I will bet that we can find something besides a widget for you.

Craig

[richmond62]

Have you seen this?
https://livecode.com/extensions/button-bar/1-0-1/

Well, I, for one, hadn't.
-

-
BUT it suffers from the same "nanky-poo" as the other types of widgets of this sort:

1. Cannot use your own icons/SVGs/ what-have-ye.

2. Someone's obsession with monochrome is forced on you.
-

sweater.jpg (9.89 KiB) Viewed 5296 times

-

the standard LiveCode controls

AND the "dirty word" there is standard, mainly because
what is one man's standard is another man's headache . . .

I have just sorted through 65 USB cables trying to find the "right" connector for some bit of hardware
that has been 'holidaying' in a cupboard for 20 years . . . if some were to come up to me now and start
talking about "the USB standard" I might very well thump them.

------

As I have demonstrated above, it is a comparatively easy bit of work to assemble a collection of standard buttons,
using one's own PNG images as icons, into a group.

[bn]

You can change the icons of both the Navigation bar and the Header bar using the Properties Inspector by clicking on the icon and selecting another icon from font awesome. Font awesome is the SVG icon font used for the icons.

Kind regards
Bernd

[richmond62]

selecting another icon from font awesome

Indeed you can.

BUT you are confined to those icons, and they are all black.

[SWEdeAndy]

selecting another icon from font awesome

Indeed you can.

BUT you are confined to those icons, and they are all black.

Well, no and no:

LiveCode lesson: How do I add a custom SVG to use in my app?
http://lessons.livecode.com/m/4071/l/10 ... -in-my-app

and

button bar widget.png (7.71 KiB) Viewed 5258 times

.

But sure, it does have its limits. I sometimes roll my own too when I want more design freedom.

[dunbarx]

Up at 50,000 feet, I think that, like dataGrids, widgets attract users because they are the latest and greatest, but are also the most complex and restrictive.

They are.

Some. like the browser widget, are wonderful, compact and ready to use.

But I always roll my own. It usually takes less time that learning the ins and outs of those toys, and, like Richmond always says, you keep control.

Craig

[jacque]

You can add your own SVGs to the widgets by importing an icon family into the stack. That will allow you to choose your own SVGs for these widgets.

The SVGs must be converted to image drawings, and the icon family must be set in script on each launch. It works well once set up correctly. The advantage is the ability to scale smoothly at any size and resolution, which is particularly valuable on mobile devices.

Search for "icon families" in the sample stacks, I believe there are some tools there that automate the process of creating families in the correct format for importing. I'll try to look up the name of the particular tool I used later today.

[jacque]

There are three utilities in Sample Stacks for creating SVG icons and icon families:

SVG Icon Family Maker -- Devin Asay
SVG Icon Picker -- Devin Asay
SVG Icon Tool -- Brian Milby

I used SVG Icon Tool to create a family of custom SVG icons. The resulting file needs to be placed in the Copy Files pane of standalone builder so that it is embedded in the app. On preOpenStack or wherever convenient, the script sets the icon family to the name of the imported set using

Code: Select all

setCurrentIconFamily(pFamily)

You can find the SVG Icon Tool and the others here: http://livecodeshare.runrev.com/search/tag/SVG or by clicking the Sample Stacks icon in the LC toolbar and searching there for "icon".

The icon family is global and will appear everywhere unless you set it back to the "IDE" or "fontAwesome" defaults when the stack closes. But when your custom family is the current one, the Property Inspector will show your custom icons and you can select them normally for use in widgets or buttons.

[jacque]

The resulting file needs to be placed in the Copy Files pane of standalone builder so that it is embedded in the app.

I just looked up how I managed this in my project and the above isn't what I did. Instead, I put the binary file into a custom property of the stack. I'm not sure if including it in Copy Files will work but I do know that is works as a custom property.