System Default Images

[dhunt]

How do i change the default images below?

Can i use:

#CustomTheme.AddImageName Usesymbolicname(EXPAND_DOWN) Actualimagename("fa-chevron-down")

Annotation 2019-06-20 154701.jpg (900 Bytes) Viewed 532 times

Annotation 2019-06-20 154825.jpg (882 Bytes) Viewed 532 times

Annotation 2019-06-25 105329.jpg (1.52 KiB) Viewed 532 times

[MarkD]

Yes,

As at EPC142057 level all VLF-ONE all theme objects, whether shipped, or created as custom, start with this base set of symbolic image names:

Code: Select all

If (#uSystem.UIMaterialDesign)
#COM_OWNER.AddImageName Usesymbolicname(CLOSE) Actualimagename("close") Actualimagesource(G)
#COM_OWNER.AddImageName Usesymbolicname(UP_ARROW) Actualimagename("arrow_upward") Actualimagesource(G)
#COM_OWNER.AddImageName Usesymbolicname(DOWN_ARROW) Actualimagename("arrow_downward") Actualimagesource(G)
#COM_OWNER.AddImageName Usesymbolicname(LEFT) Actualimagename("arrow_back") Actualimagesource(G)
#COM_OWNER.AddImageName Usesymbolicname(RIGHT) Actualimagename("arrow_forward") Actualimagesource(G)
Else
#COM_OWNER.AddImageName Usesymbolicname(CLOSE) Actualimagename(CLOSE_outline.png)
#COM_OWNER.AddImageName Usesymbolicname(UP_ARROW) Actualimagename(go_up_outline.png)
#COM_OWNER.AddImageName Usesymbolicname(DOWN_ARROW) Actualimagename(go_down_outline.png)
#COM_OWNER.AddImageName Usesymbolicname(LEFT) Actualimagename(GO_LEFT_Outline.png)
#COM_OWNER.AddImageName Usesymbolicname(RIGHT) Actualimagename(GO_RIGHT_Outline.png)
Endif

#COM_OWNER.AddImageName Usesymbolicname(MAXIMIZE) Actualimagename(MAXIMIZE_outline.png)
#COM_OWNER.AddImageName Usesymbolicname(MINIMIZE) Actualimagename(MINIMIZE_outline.png)
#COM_OWNER.AddImageName Usesymbolicname(SETTINGS) Actualimagename("settings") Actualimagesource(G) /* Google - so case sensitive */
#COM_OWNER.AddImageName Usesymbolicname(PIN) Actualimagename(PIN_Outline.png)
#COM_OWNER.AddImageName Usesymbolicname(RESTORE) Actualimagename(RESTORE_Outline.png)

#COM_OWNER.AddImageName Usesymbolicname(LEFTCIRCLED) Actualimagename(left_outline.png)
#COM_OWNER.AddImageName Usesymbolicname(RIGHTCIRCLED) Actualimagename(right_outline.png)

#COM_OWNER.AddImageName Usesymbolicname(UP) Actualimagename(GO_UP_Outline.png)
#COM_OWNER.AddImageName Usesymbolicname(DOWN) Actualimagename(GO_DOWN_Outline.png)

#COM_OWNER.AddImageName Usesymbolicname(WIDTH) Actualimagename(horizontal_double_headed_arrow_Outline.png)

#COM_OWNER.AddImageName Usesymbolicname(HEIGHT) Actualimagename(vertical_double_headed_arrow_Outline.png)

#COM_OWNER.AddImageName Usesymbolicname(MORE) Actualimagename(MORE_Outline.png)
#COM_OWNER.AddImageName Usesymbolicname(ARRANGE) Actualimagename("menu") Actualimagesource(G) /* Google - so case sensitive */
#COM_OWNER.AddImageName Usesymbolicname(HELP) Actualimagename("help") Actualimagesource(G) /* Google - so case sensitive */

#COM_OWNER.AddImageName Usesymbolicname(DATE) Actualimagename(DATE_Outline.png)
#COM_OWNER.AddImageName Usesymbolicname(TIME) Actualimagename(TIME_Outline.png)
#COM_OWNER.AddImageName Usesymbolicname(USER) Actualimagename(USER_Outline.png)
#COM_OWNER.AddImageName Usesymbolicname(LANGUAGE) Actualimagename(LANGUAGE_Outline.png)

#COM_OWNER.AddImageName Usesymbolicname(TICK) Actualimagename(GO_TICK_Outline.png)
#COM_OWNER.AddImageName Usesymbolicname(CROSS) Actualimagename(CROSS_Outline.png)
#COM_OWNER.AddImageName Usesymbolicname(LIST) Actualimagename(LIST_Outline.png)

#COM_OWNER.AddImageName Usesymbolicname(MOREDETAILS) Actualimagename(more_details_outline.png)
#COM_OWNER.AddImageName Usesymbolicname(LESSDETAILS) Actualimagename(less_details_outline.png)

#COM_OWNER.AddImageName Usesymbolicname(COLLAPSE_UP) Actualimagename(collapse_up_outline.png)
#COM_OWNER.AddImageName Usesymbolicname(EXPAND_DOWN) Actualimagename(expand_down_outline.png)

#COM_OWNER.AddImageName Usesymbolicname(SORT) Actualimagename(sort_outline.png)

#COM_OWNER.AddImageName Usesymbolicname(ASCEND_ORDER) Actualimagename(ascending_order_outline.png)
#COM_OWNER.AddImageName Usesymbolicname(DESCEND_ORDER) Actualimagename(descending_order_outline.png)
*
* originally view_column_google.png. but this does not work
#COM_OWNER.AddImageName Usesymbolicname(VIEW_COLUMN) Actualimagename(organize_outline.png)


#COM_OWNER.AddImageName Usesymbolicname(add) Actualimagename(add_outline.png)
#COM_OWNER.AddImageName Usesymbolicname(cancel) Actualimagename(cancel_outline.png)


#COM_OWNER.AddImageName Usesymbolicname(TREE_EXPAND) Actualimagename(expand_outlined.png)
#COM_OWNER.AddImageName Usesymbolicname(TREE_CONTRACT) Actualimagename(contract_set_outlined.png)

#COM_OWNER.AddImageName Usesymbolicname(SEARCH_FILLED) Actualimagename(search.png)
#COM_OWNER.AddImageName Usesymbolicname(CLOSE_FILLED) Actualimagename(close.png)

#COM_OWNER.AddImageName Usesymbolicname(EYE) Actualimagename(VISIBILITY_GOOGLE.PNG)

#COM_OWNER.AddImageName Usesymbolicname(ARROWALLDIRECTION) Actualimagename(OPEN_WITH_GOOGLE.PNG)

#COM_OWNER.AddImageName Usesymbolicname(MOREVERTICAL) Actualimagename("more_vert") Actualimagesource(G) /* Google - so case sensitive */
#COM_OWNER.AddImageName Usesymbolicname(MOREHORIZONTAL) Actualimagename("more_horiz") Actualimagesource(G) /* Google - so case sensitive */
#COM_OWNER.AddImageName Usesymbolicname(SEARCH) Actualimagename("search") Actualimagesource(G) /* Google - so case sensitive */

#COM_OWNER.AddImageName Usesymbolicname(THEME) Actualimagename("style") Actualimagesource(G) /* Google - so case sensitive */

#COM_OWNER.AddImageName Usesymbolicname(chevron_left) Actualimagename("chevron_left") Actualimagesource(G) /* Google - so case sensitive */
#COM_OWNER.AddImageName Usesymbolicname(chevron_right) Actualimagename("chevron_right") Actualimagesource(G) /* Google - so case sensitive */

#COM_OWNER.AddImageName Usesymbolicname(chevron-down) Actualimagename("expand_down_outline.png")
#COM_OWNER.AddImageName Usesymbolicname(chevron-right) Actualimagename("expand_outline.png")
#COM_OWNER.AddImageName Usesymbolicname(chevron-left) Actualimagename("collapse_outline.png")
#COM_OWNER.AddImageName Usesymbolicname(chevron-up) Actualimagename("collapse_up_outline.png")

So you can override / replace any of these as you like.

The issue may be that you cannot tell which symbolic name is used where - in which case ask on this forum.

[dhunt]

which one is for the top slider and left slider?

[MarkD]

If you mean something that has ancestor VF_AC028O, then they don't use those generic symbolic image names.

Each slider specifies its own images directly via properties named:

Code: Select all

Define_Pty Name(uCloseIconName) Get(Get_uCloseIconName)
Define_Pty Name(uDockIconName) Get(Get_uDockIconName)
Define_Pty Name(uImageName) Get(Get_uImageName)

By default the property getter routines do this, based on the slider's location:

Code: Select all

* ---------------------------------------------------------------------------------
Ptyroutine Name(Get_uCloseIconName)
Define_Map For(*OUTPUT) Class(#VF_ELSYMNAME) Name(#ReturnIconName)
Case (#AttachedtoEdge)
When (= TOP)
#ReturnIconName := up_arrow_Outline.png
When (= BOTTOM)
#ReturnIconName := down-arrow_Outline.png
When (= LEFT)
#ReturnIconName := left_Outline.png
When (= RIGHT)
#ReturnIconName := right_Outline.png
Otherwise
#ReturnIconName := Unknown
Endcase

Endroutine

* ---------------------------------------------------------------------------------
Ptyroutine Name(Get_uDockIconName)
Define_Map For(*OUTPUT) Class(#VF_ELSYMNAME) Name(#ReturnIconName)

#ReturnIconName := pin_outline.png

Endroutine


* ---------------------------------------------------------------------------------
Ptyroutine Name(Get_uImageName)
Define_Map For(*OUTPUT) Class(#VF_ELSYMNAME) Name(#ReturnImageName)

Case (#AttachedtoEdge)
When (= TOP)
#ReturnImageName := expand_down_Outline.png
When (= BOTTOM)
#ReturnImageName := collapse_up_Outline.png
When (= LEFT)
#ReturnImageName := expand_Outline.png
When (= RIGHT)
#ReturnImageName := collapse_Outline.png
Otherwise
#ReturnImageName := Unknown
Endcase

Endroutine

So in your slider you just *REDEFINE the property getter routine to return whatever image name you want to use.

Something like this:

Code: Select all

Begin_Com Role(*EXTENDS #VF_ac028O)

Ptyroutine Name(Get_uImageName) Options(*REDEFINE)
#RETURNIMAGENAME := "MYIMAGE.png"
Endroutine

End_Com

[dhunt]

Thats perfect but how do i use the font awesome or material design images with it?

Like this: #ReturnImageName := fa-chevron-down ?

[MarkD]

There's an additional property:

Code: Select all

Define_Pty Name(uImageSource) Get(Get_uImageSource)
 
Ptyroutine Name(Get_uImageSource)
Define_Map For(*OUTPUT) Class(#VF_ELStat) Name(#ReturnImageSource)

#ReturnImageSource := T

Endroutine

Where T= Themed image - the ones that ship with VLF-ONE.

Redefine that to return G (Google material design) or F (Font Awesome).

This means all 3 images must come from Themed, Google or Font Awesome - you can't mix them up.

Also, Google and Font Awesome names are case sensitive so they normally need to be quoted.

[dhunt]

Thanks Mark, worked great but when i used F it didn't show the icons. if i used G it does for font awesome icons.

[MarkD]

Are you using names prefixed "fa-xxxxxxxxxxx".

If yes, try removing the "fa-" prefix.

e.g. #ReturnImageName := "fa-chevron-down" becomes #ReturnImageName := "chevron-down"