Navigation Bar widget: change icons?

[Fjord]

Hi,
Quote from release notes of LC8 DP15:

Navigation Bar widget
Various bug fixes
(...)Changing the navIcons via script / property inspector does not work

I find this ambiguous: is it supposed to be fixed? I've tried

Code: Select all

put the navData of widget "NavigationBar" into navDataArray
put iconSVGPathFromName("check") into navDataArray[5]["icon"]
set the navData of widget "NavigationBar" to navDataArray

and

Code: Select all

get the navicons of widget "NavigationBar"
if item 5 of it is "check" then
   set the navicons of widget "NavigationBar" to "cogs,calendar,trash,filter,check empty,file text alt"

neither seems to work. Is there a known workaround?
Also, where can I find a tutorial or comprehensive info about SVG icons?
Thanks for your help!

[Klaus]

Bonjour François,

I am also still new to widgets but could get this to work in DP 15:
...
put the navicons of widget "NavigationBar" into tIcons
put "check" into item 5 of tIcons
set the navicons of widget "NavigationBar" to tIcons
...
Hope that helps.


Best

Klaus

[Fjord]

That's similar to my first attempt. Did your icon change? Just now, I copied from your post and did

Code: Select all

put the navicons of widget "NavigationBar" into tIcons
if item 5 of tIcons is "check" then
  put "check empty" into item 5 of tIcons
else
  put "check" into item 5 of tIcons
end if
set the navicons of widget "NavigationBar" to tIcons

but the icon did not change. I'm using DP15 too... I tried with another name, also, just in case there was a catch with the space(s) in "check empty" but the icon did not change, neither visually on the card nor in the nav bar properties.

[bn]

Hi François,

it just tried your script

Code: Select all

on mouseUp
   put the navicons of widget "Navigation Bar" into tIcons
   if item 5 of tIcons is "check" then
      put "check empty" into item 5 of tIcons
   else
      put "check" into item 5 of tIcons
   end if
   set the navicons of widget "Navigation Bar" to tIcons
   set the navLabels of widget "Navigation Bar" to tIcons
end mouseUp

and this works for me. Note the space in "Navigation Bar"

Kind regards
Bernd

[Fjord]

Thanks Bernd and Klaus!

Bernd: the name of my nav bar is "NavigationBar" (no space)"
I experimented with your suggestion and found that the instruction
set the navLabels of widget "NavigationBar" to tIcons
modifies the name of the buttons as sent to the "navigate" handler; therefore my "switch" in "navigate" didn't work anymore but I fixed that easily.

I solved my problem: the nav bar I created happened to be duplicated 3 times. The nav bar that received the message to change the icon was under the 2 others, hence hidden . Found it while playing with transparency. I just had to eliminate the duplicates.
By the by, this duplication of controls happened two more times recently with DP14 & DP15. Strange, this never happens to me; I must have drunk too much coffee

Any pointer to a tutorial or doc on SVG icons?

[bn]

François,

the font that is used for the icons in widgets is "Font Awesome". It is included with LC 8. Google for it.

SVG is a very broad topic

http://www.w3schools.com/svg/

easily confusing (for me at least)

Basically SVG as used in widgets in LC 8 is a description of a path which is then drawn by the widget.

e.g.

M150 0 L75 200 L225 200 Z

this draws a triangle, M150 0 is the starting point (M = move to) and L75 200 and L225 200 are Lines (line to) Z indicates to close the form by drawing to the begin of the line.

In some vector drawing programs you can save a shape as SVG and you can open that file with a text editor. There you will find embedded into quotation marks something this

d="M150 0 L75 200 L225 200 Z"

but more elaborate. You can copy the part inside the quotation marks and paste that string into the SVG widget to display that shape.

Kind regards

Bernd

[Fjord]

Thanks for the pointer! I haven't looked at w3school for a loooong time, I discovered many interesting things!
F.