Icons with Segoe-Fluent-Icons-Font [Win (10,11) Only]

[Axolotl]

Hey folks,

Here is another attempt to program something “beautiful”.
Even if I would win every ugly design award with my program interfaces I also try to incorporate graphic elements.
Now I have come across the following Segoe Fluent Icons Font and immediately wrote a little brainstorming program.
Maybe someone can use it as a start for its own challenges.....

Before you copy and test the code.
The Font comes with Windows 11 only, but for Windows 10 you can download it here.

Code: Select all

;/
;| File   : TestSegoeFluentIconsFont.pb
;|
;| License: Free, unrestricted, no warranty whatsoever. 
;|          cobbled together by Axolotl - All Rights reserved. 
;\

EnableExplicit 

Enumeration EWindow 1
  #WND_Main 
EndEnumeration 

Enumeration EGadget 1
  #GDT_txtStayOnTop   ; Pin or UnPin 
  #GDT_btnNav
  #GDT_btnDown
  #GDT_btnUp 
  #GDT_btnSettings 
  ;
  #GDT_edtText 
EndEnumeration 

Enumeration EFont 1
  #FNT_Monospace    ; ==> LoadFont(#FNT_Monospace, "Consolas", 8) 
  #FNT_Icons        ; ==> LoadFont(#FNT_Icons, "Segoe Fluent Icons", 8) 
EndEnumeration

;/---------------------------------------------------------------------------------------------------------------------
;| ■ Info about Segoe Fluent Icons Font 
;|
;|  LINK: https://learn.microsoft.com/en-us/windows/apps/design/style/segoe-fluent-icons-font 
;|
;| Selection of Chars (Icons) 
;|
#SFI_GlobalNavButton    = $e700         ;	GlobalNavButton 
#SFI_GlobalNavButton$   = Chr($e700)    ;	
;|
#SFI_ChevronDown        = $e70d         ; ChevronDown 
#SFI_ChevronDown$       = Chr($e70d)    ; 
;|
#SFI_ChevronUp          = $e70e         ; ChevronUp 
#SFI_ChevronUp$         = Chr($e70e)    ; 
;|
#SFI_ChevronLeft        = $e76b         ; ChevronLeft 
#SFI_ChevronLeft$       = Chr($e76b)    ; 
;|
#SFI_ChevronRight       = $e76c         ; ChevronRight 
#SFI_ChevronRight$      = Chr($e76c)    ; 
;|
#SFI_Settings           = $e713         ; Settings 
#SFI_Settings$          = Chr($e713)    ;  
;|
#SFI_Pin                = $e718         ; Pin 
#SFI_Pin$               = Chr($e718)    ;  
;|
#SFI_UnPin              = $e77a         ; UPin 
#SFI_UnPin$             = Chr($e77a)    ;  
;|
;\--- 

;/---------------------------------------------------------------------------------------------------------------------
;| Brain storming stuff ..... ?
;\---

Procedure Main() 
  If OpenWindow(#WND_Main, 0, 0, 320, 240, "Segoe Fluent Icons Example ....", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)

    ; Gadgets and Buttons with Fluent Icons ..... 
    ;
    SetGadgetFont(#PB_Default, LoadFont(#FNT_Icons, "Segoe Fluent Icons", 8))  

    ; Clickable TextGadget as ButtonGadget replacement .....
    ;
    TextGadget(#GDT_txtStayOnTop, 2, 2, 20, 20, #SFI_UnPin$, #SS_CENTER | #SS_CENTERIMAGE | #SS_NOTIFY)    ; Pin or UnPin 
    SetGadgetColor(#GDT_txtStayOnTop, #PB_Gadget_BackColor, #White) 

    ; Standard ButtonGadgets 
    ;
    ButtonGadget(#GDT_btnNav,  32, 0, 24, 24, #SFI_GlobalNavButton$) 
    ButtonGadget(#GDT_btnDown, 58, 0, 24, 24, #SFI_ChevronDown$) 
    ButtonGadget(#GDT_btnUp,   84, 0, 24, 24, #SFI_ChevronUp$) 
    ; ..... 
    ButtonGadget(#GDT_btnSettings, 294, 0, 24, 24, #SFI_Settings$) 

    ; EditorGadget with default font ..... 
    ;
    SetGadgetFont(#PB_Default, #PB_Default) 
    ; Editor (for further use) 
    EditorGadget(#GDT_edtText, 0, 24, 320, 216)   ; instead of Debug 
    AddGadgetItem(#GDT_edtText, -1, "Important Hint: ") 
    AddGadgetItem(#GDT_edtText, -1, "  The Font comes with Win 11 only, ") 
    AddGadgetItem(#GDT_edtText, -1, "  but for Win 10 you can download it.") 
    AddGadgetItem(#GDT_edtText, -1, "")  

    Repeat 
      Select WaitWindowEvent() 
        Case #PB_Event_CloseWindow
          Break ; say bye. 
        Case #PB_Event_Gadget 
          Select EventGadget() 
            Case #GDT_txtStayOnTop 
              If GetGadgetText(#GDT_txtStayOnTop) = #SFI_Pin$ 
                SetGadgetText(#GDT_txtStayOnTop, #SFI_UnPin$) 
                StickyWindow(#WND_Main, 0) 
                AddGadgetItem(#GDT_edtText, -1, "Not Top Most Window anymore") 
              Else 
                SetGadgetText(#GDT_txtStayOnTop, #SFI_Pin$) 
                StickyWindow(#WND_Main, 1) 
                AddGadgetItem(#GDT_edtText, -1, "Top Most Window again") 
              EndIf 
            Case #GDT_btnNav To #GDT_btnSettings 
              AddGadgetItem(#GDT_edtText, -1, "Under construction. Try later. ") 
          EndSelect
      EndSelect 
    ForEver 
  EndIf
  ProcedureReturn 0 
EndProcedure 

End Main() 

;\ Bottom of File 

[jacdelad]

Wow, that's interesting. Never heard of this before. Thanks for sharing!

[Caronte3D]

No works with the latest beta? I get an error: "The specified #Gadget is not initialised" on this line:

Code: Select all

SetGadgetFont(#PB_Default, LoadFont(#FNT_Icons, "Segoe Fluent Icons", 8))

[jacdelad]

That bug was already reported. Works with previous versions.

I just tried it, nice. But is that different from, let's say using Wingdings? Beside the other symbols.
However, obviously M$ offers an option to fill the shapes (see link to MSDN). But I don't understand how and whether this is even possible with PB. Seems like a bit more complicated, needing XML/YAML, like the M$-Ribbon.

[Bisonte]

I have done this with Segoe MD2 Assets nearly 7 years ago

https://www.purebasic.fr/german/viewtopic.php?t=30938

[Axolotl]

Thanks @Bisonte for the reference to your work.
Maybe the tip on the Microsoft page might be interesting.

Tip
With the release of Windows 11, the Segoe Fluent Icons font replaced Segoe MDL2 Assets as the recommended symbol icon font. Segoe MDL2 Assets is still available, but we recommend updating your app to use the Segoe Fluent Icons font.

My conclusion: After reading the pages, I guess before using the font, you should check the availability of the font.

[ChrisR]

Very interesting, thanks for sharing
Works well on windows 10 once “Segoe Fluent Icons.ttf” installed
and I just tried to install it on a Windows 7 VM, it works too

Just a shame that M$ doesn't allow us to distribute it
I don't know enough about licenses, is it possible to offer it (with an accept license checkbox) with download + install ?

Otherwise, my 2 cts, for button size it is good to use #PB_Gadget_RequiredSize

Code: Select all

Procedure Main()
  Protected DummyGadget, RequireSize
  If OpenWindow(#WND_Main, 0, 0, 320, 240, "Segoe Fluent Icons Example ....", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)

    ; Gadgets and Buttons with Fluent Icons ..... 
    ; For optimal appearance, use these specific sizes: 16, 20, 24, 32, 40, 48, And 64. Deviating from these font sizes could lead To less crisp Or blurry outcomes.
    ;
    SetGadgetFont(#PB_Default, LoadFont(#FNT_Icons, "Segoe Fluent Icons", 16))  
    
    DummyGadget = ButtonGadget(#PB_Any, 0, 0, 0, 0, #SFI_GlobalNavButton$)
    RequireSize = GadgetHeight(DummyGadget, #PB_Gadget_RequiredSize)
    FreeGadget(DummyGadget)
    
    ; Clickable TextGadget as ButtonGadget replacement .....
    ;
    TextGadget(#GDT_txtStayOnTop, 2, 0, RequireSize, RequireSize, #SFI_UnPin$, #SS_CENTER | #SS_CENTERIMAGE | #SS_NOTIFY)    ; Pin or UnPin 
    SetGadgetColor(#GDT_txtStayOnTop, #PB_Gadget_BackColor, #White) 

    ; Standard ButtonGadgets 
    ;
    ButtonGadget(#GDT_btnNav,  GadgetX(#GDT_txtStayOnTop) + RequireSize + 2, 0, RequireSize, RequireSize, #SFI_GlobalNavButton$) 
    ButtonGadget(#GDT_btnDown, GadgetX(#GDT_btnNav) + RequireSize + 2, 0, 26, 26, #SFI_ChevronDown$) 
    ButtonGadget(#GDT_btnUp,   GadgetX(#GDT_btnDown) + RequireSize + 2, 0, 26, 26, #SFI_ChevronUp$)
    ; .....
    
    ButtonGadget(#GDT_btnSettings, WindowWidth(#WND_Main) - RequireSize - 2, 0, 26, 26, #SFI_Settings$) 
    
    ; EditorGadget with default font ..... 
    ;
    SetGadgetFont(#PB_Default, #PB_Default) 
    ; Editor (for further use) 
    EditorGadget(#GDT_edtText, 0, RequireSize, 320, 216)   ; instead of Debug 
    .....

[Axolotl]

Yes, that is the way M$ is making there money.

My POV:
If you want deploy any of your apps, you should start with this: "The redistribution of fonts supplied with Windows is generally not allowed."
If you use this or any other (older) fonts you should have a Plan-B (different fonts on different OS versions) or if you want to combine them with your package read the following information very carefully.
I don't know how aggressive the M$ people are, but I wouldn't want to mess with them.......

This is some collected info on the stuff:
Start the licensing and redistribution process for enterprises, web developers, for hardware & software redistribution or server installations here.
Or look at Font redistribution FAQ (Frequently Asked Questions) for Windows

Sorry to be so disinterested in this, but I don't give away or sell finished programs, I only publish some codes from time to time.

[ChrisR]

Thanks for the links, I had a quick look and asked our little French Mistral AI and OpenSource “le chat”, which runs fast and is making good progress.
So it's all M$, why keep it simple! and, first of all, just upgrade to Windows11

Sorry to be so disinterested in this, but I don't give away or sell finished programs, I only publish some codes from time to time.

I understand what you mean, and it's a pleasure to see your clear and well-written contributions