Page 1 sur 1

ProgressBar LED multicolores

Publié : lun. 06/avr./2026 10:20
par Jacobus
Hello,
Juste pour le fun, voici une version perso de la barre de progression pour une fenêtre d'attente.
Elle est facilement adaptable à vos projets et peut apporter un petit plus en originalité. :)

Image

Le code source et les 23 icônes sphères, carrés, rectangles (création perso, vous pouvez les utiliser sans restriction) sont disponibles dans un zip ici : LED_Progress.zip

Le code seul:

Code : Tout sélectionner

;=========================
; ProgressBar Originale, sphères, carrés et rectangles multicolores
; ProgressBar Original, multicolored spheres, squares and rectangles
; By Jacobus 06/04/2026
;
; Fichier zip contenant / Zip file containing: 
; - Fichier source : Progressbar_ImagesLED.pb
; - icônes double format 24x24/16x16
; 
; Disponible ici : / Available here:
;   https://wolforan.com/wolforansoftware/DevPBimg/LED_Progress.zip
;=========================
;-CONSTANTES
Enumeration
  #WinMain
  #img1
  #img2
  #img3
  #img4
  #img5
  #img6
  #img7
  #img8
  #img9
  #img10
  #img11
  #img12
  #img13
  #img14
  #img15
  #img16
  #img17
  #img18
  #img19
  #img20
  #Txt_attente
  #Hplink
EndEnumeration

;-VARIABLES
Global PROGRAMNAME$ = "Multi LED Progress"
Global numico = 0, percent = 0
Global LEDICONE, ColorTxt

;-IMAGES
IncludePath "...\LED_Progress\"  ; <<< Change the icon directory path / Modifier le chemin du répertoire des icônes
Global Image0 ,Image1,Image2,Image3,Image4,Image5,Image6,Image7,Image8
Image0  = CatchImage(0, ?Image0)
Image1  = CatchImage(1, ?Image1)
Image2  = CatchImage(2, ?Image2)
Image3  = CatchImage(3, ?Image3)
Image4  = CatchImage(4, ?Image4)
Image5  = CatchImage(5, ?Image5)
Image6  = CatchImage(6, ?Image6)
Image7  = CatchImage(7, ?Image7)
Image8  = CatchImage(8, ?Image8)
DataSection  ; icônes 24x24 et 16x16
  ; icônes sphèriques
  Image0: : IncludeBinary "Sphere_bleu.ico"  
  Image1: : IncludeBinary "Sphere_verte.ico"
  Image2: : IncludeBinary "Sphere_rouge.ico"
  ; icônes carrées
  Image3: : IncludeBinary "Square_bleu.ico"  
  Image4: : IncludeBinary "Square_turquoise.ico"
  Image5: : IncludeBinary "Square_noir.ico"
  ; icônes rectangulaires
  Image6: : IncludeBinary "Square_bleu_large.ico"  
  Image7: : IncludeBinary "Square_turquoise_large.ico"
  Image8: : IncludeBinary "Square_noir_large.ico"
EndDataSection

Procedure SetColorOfLED(Col = 0)
  ; Sélection du type d'icône et de la couleur du texte associé.
  ; Selecting the icon type and associated text color.
  If Col = 0     : LEDICONE = Image0 : ColorTxt = RGB(36, 64, 229)
  ElseIf Col = 1 : LEDICONE = Image1 : ColorTxt = RGB(36, 229, 35)
  ElseIf Col = 2 : LEDICONE = Image2 : ColorTxt = RGB(229, 35, 56)    
  ElseIf Col = 3 : LEDICONE = Image3 : ColorTxt = RGB(36, 64, 229)
  ElseIf Col = 4 : LEDICONE = Image4 : ColorTxt = RGB(33, 223, 229)
  ElseIf Col = 5 : LEDICONE = Image5 : ColorTxt = RGB(231, 234, 238)    
  ElseIf Col = 6 : LEDICONE = Image6 : ColorTxt = RGB(36, 64, 229)
  ElseIf Col = 7 : LEDICONE = Image7 : ColorTxt = RGB(33, 223, 229)
  ElseIf Col = 8 : LEDICONE = Image8 : ColorTxt = RGB(231, 234, 238)    
  EndIf 
EndProcedure

Procedure ShowProgress(numico) 
  ; Affichage de la progression du remplissage de la barre / Displaying the progress of the bar filling
  Select numico     
      Case 1  : If numico = 1  : state = #False : Else : state = #True : EndIf : HideGadget(#img1,  state) 
      Case 2  : If numico = 2  : state = #False : Else : state = #True : EndIf : HideGadget(#img2,  state)      
      Case 3  : If numico = 3  : state = #False : Else : state = #True : EndIf : HideGadget(#img3,  state)      
      Case 4  : If numico = 4  : state = #False : Else : state = #True : EndIf : HideGadget(#img4,  state)      
      Case 5  : If numico = 5  : state = #False : Else : state = #True : EndIf : HideGadget(#img5,  state)      
      Case 6  : If numico = 6  : state = #False : Else : state = #True : EndIf : HideGadget(#img6,  state)
      Case 7  : If numico = 7  : state = #False : Else : state = #True : EndIf : HideGadget(#img7,  state)
      Case 8  : If numico = 8  : state = #False : Else : state = #True : EndIf : HideGadget(#img8,  state)
      Case 9  : If numico = 9  : state = #False : Else : state = #True : EndIf : HideGadget(#img9,  state)
      Case 10 : If numico = 10 : state = #False : Else : state = #True : EndIf : HideGadget(#img10, state)
      Case 11 : If numico = 11 : state = #False : Else : state = #True : EndIf : HideGadget(#img11, state)
      Case 12 : If numico = 12 : state = #False : Else : state = #True : EndIf : HideGadget(#img12, state)
      Case 13 : If numico = 13 : state = #False : Else : state = #True : EndIf : HideGadget(#img13, state)
      Case 14 : If numico = 14 : state = #False : Else : state = #True : EndIf : HideGadget(#img14, state)
      Case 15 : If numico = 15 : state = #False : Else : state = #True : EndIf : HideGadget(#img15, state)
      Case 16 : If numico = 16 : state = #False : Else : state = #True : EndIf : HideGadget(#img16, state)
      Case 17 : If numico = 17 : state = #False : Else : state = #True : EndIf : HideGadget(#img17, state)
      Case 18 : If numico = 18 : state = #False : Else : state = #True : EndIf : HideGadget(#img18, state)
      Case 19 : If numico = 19 : state = #False : Else : state = #True : EndIf : HideGadget(#img19, state)
      Case 20 : If numico = 20 : state = #False : Else : state = #True : EndIf : HideGadget(#img20, state)
  EndSelect
    
 EndProcedure
  
Procedure HideProgress()
  
  HideGadget(#img1, #True)
  HideGadget(#img2, #True)
  HideGadget(#img3, #True)
  HideGadget(#img4, #True)
  HideGadget(#img5, #True)
  HideGadget(#img6, #True)
  HideGadget(#img7, #True)
  HideGadget(#img8, #True)
  HideGadget(#img9, #True)
  HideGadget(#img10, #True)
  HideGadget(#img11, #True)
  HideGadget(#img12, #True)
  HideGadget(#img13, #True)
  HideGadget(#img14, #True)
  HideGadget(#img15, #True)
  HideGadget(#img16, #True)
  HideGadget(#img17, #True)
  HideGadget(#img18, #True)
  HideGadget(#img19, #True)
  HideGadget(#img20, #True)
    
EndProcedure

Procedure SetProgressBarLED(ValMax)
  ; procédure pour utilisation en mode progression exacte 
  ; ainsi la valeur max de la progressbar est ValMax
  ; l'affichage peut s'actualiser en fonction du nombre réel d'éléments
  ; le texte d'attente devient un affichage de ce qu'il se passe
  
; Procedure for use in exact progress mode
; thus the maximum value of the progress bar is ValMax
; the display can update according to the actual number of elements
; the waiting text becomes a display of what is happening
  
  ValBlock = ValMax/20  ; divisé par le nombre d'icônes utilisées / divided by the number of icons used
  For Block = 0 To ValMax         
    If Block = ValBlock                 
      numico + 1 : percent + 5  ;: Debug Str(numico) +"  "+Str(percent)+ " %"
      SetGadgetText(#Txt_attente, " Traitement effectué à : " + Str(percent) + " %   - icône n° "+ Str(numico) )
      ShowProgress(numico)      
      ValBlock + ValMax/20            
    EndIf       
  Next   
  numico = 0 : percent = 0 ; remise à zéro pour recommencer ultérieurement / reset to start again later
 
EndProcedure

;-FENETRE
If OpenWindow(#WinMain, 0, 0, 320, 90, PROGRAMNAME$, #PB_Window_SystemMenu | #PB_Window_ScreenCentered | #PB_Window_Tool)   
  SetWindowColor(#WinMain, RGB(0,0,0)) ; fond noir / black background
  StickyWindow(#WinMain, #True) ; toujours au premier plan pour ne pas la perdre  / always in the foreground so as not to lose it
  
  SetColorOfLED(3) ; Changez le type d'icône et la couleur en changeant la valeur (0 par défaut) 1 ou 2 ou plus si vous avez installé d'autres modèles d'icônes
                   ; Change the icon type and color by changing the value (0 by default) to 1 or 2 or more if you have installed other icon templates.
  ImageGadget(#img1,  0,   20, 16,16, LEDICONE) : HideGadget(#img1,  #True)
  ImageGadget(#img2,  16,  20, 16,16, LEDICONE) : HideGadget(#img2,  #True)
  ImageGadget(#img3,  32,  20, 16,16, LEDICONE) : HideGadget(#img3,  #True)
  ImageGadget(#img4,  48,  20, 16,16, LEDICONE) : HideGadget(#img4,  #True)
  ImageGadget(#img5,  64,  20, 16,16, LEDICONE) : HideGadget(#img5,  #True)
  ImageGadget(#img6,  80,  20, 16,16, LEDICONE) : HideGadget(#img6,  #True)
  ImageGadget(#img7,  96,  20, 16,16, LEDICONE) : HideGadget(#img7,  #True)
  ImageGadget(#img8,  112, 20, 16,16, LEDICONE) : HideGadget(#img8,  #True)
  ImageGadget(#img9,  128, 20, 16,16, LEDICONE) : HideGadget(#img9,  #True)
  ImageGadget(#img10, 144, 20, 16,16, LEDICONE) : HideGadget(#img10, #True)
  ImageGadget(#img11, 160, 20, 16,16, LEDICONE) : HideGadget(#img11, #True)
  ImageGadget(#img12, 176, 20, 16,16, LEDICONE) : HideGadget(#img12, #True)
  ImageGadget(#img13, 192, 20, 16,16, LEDICONE) : HideGadget(#img13, #True)
  ImageGadget(#img14, 208, 20, 16,16, LEDICONE) : HideGadget(#img14, #True)
  ImageGadget(#img15, 224, 20, 16,16, LEDICONE) : HideGadget(#img15, #True)
  ImageGadget(#img16, 240, 20, 16,16, LEDICONE) : HideGadget(#img16, #True)
  ImageGadget(#img17, 256, 20, 16,16, LEDICONE) : HideGadget(#img17, #True)
  ImageGadget(#img18, 272, 20, 16,16, LEDICONE) : HideGadget(#img18, #True)
  ImageGadget(#img19, 288, 20, 16,16, LEDICONE) : HideGadget(#img19, #True)
  ImageGadget(#img20, 304, 20, 16,16, LEDICONE) : HideGadget(#img20, #True)
  
  TextGadget(#Txt_attente, 0, 40, 320, 20, "Thank you for your patience during the destruction process...", #PB_Text_Center)
  SetGadgetColor(#Txt_attente, #PB_Gadget_FrontColor, ColorTxt)
  SetGadgetColor(#Txt_attente, #PB_Gadget_BackColor, RGB(0,0,0))
  
  HyperLinkGadget(#Hplink, 10, 70, 125, 15, "Test SetProgressBarLED", $EEEAE7, #PB_HyperLink_Underline)
  SetGadgetColor(#Hplink, #PB_Gadget_FrontColor, ColorTxt)
  SetGadgetColor(#Hplink, #PB_Gadget_BackColor, RGB(0,0,0))
  
  ; Le timer qui va animer le tout / The timer that will animate everything
  AddWindowTimer(#WinMain, 1, 100) ; pour augmenter la vitesse d'affichage, diminuer les millisecondes et vis dans le versa.
                                   ; to increase display speed, decrease milliseconds and vice versa.
  ;-EVENTLOOP
  Repeat  
    EventID = WaitWindowEvent()
    
    If EventID = #PB_Event_Timer And EventTimer() = 1
      numico + 1                     ; on incrémente de 1 pour sélectionner une sphère après l'autre / We increment by 1 to select one sphere after another
      ShowProgress(numico)           ; Affichage de la progression icône après icône                 / Displaying progress icon by icon
      If numico = 21                 ; si on arrive à 21 c'est la fin de la barre                    / If we reach 21, that's the end of the bar.
        numico = 0 : HideProgress()  ; donc on remet à zéro pour relancer et faire une boucle        / So we reset to zero to restart and create a loop
      EndIf     
    EndIf 
    
    If EventID = #PB_Event_Gadget And EventGadget() = #Hplink
      RemoveWindowTimer(#WinMain, 1)
      numico = 0 : percent = 0
      SetProgressBarLED(10000) ; example with 10000 elements (very fast because there is no processing of the elements other than counting)
    EndIf 
    
  ;-FERMETURE   
    If EventID = #PB_Event_CloseWindow 
      Quit = 1
    EndIf
    
  Until Quit = 1 
  End 
EndIf
Joyeuses Pâques!

Re: ProgressBar LED multicolores

Publié : lun. 06/avr./2026 19:29
par Jacobus
J'ai fait une petite mise à jour en ajoutant des icônes carrées et rectangulaires pour dessiner une vraie barre.
Plusieurs choix possibles d'affichage. Le tout est adaptable par chacun.
Egalement ajouter une procédure pour montrer comment adapter cette progressbar pour un affichage en mode réel dans un traitement de fichiers, et pas seulement dans une fenêtre d'attente.

Tout est mis à jour dans le premier post et le zip.
:)

Re: ProgressBar LED multicolores

Publié : lun. 06/avr./2026 21:06
par venom
Merci pour ton partage jacobus 8) je compilerai ça a l'occasion :P







@++

Re: ProgressBar LED multicolores

Publié : mer. 08/avr./2026 19:47
par Jacobus
mise à jour du code avec une belle optimisation vue par HeXOR
Je laisse le premier pour comparaison (la procedure ShowProgress() a été supprimée car inutile)

Code : Tout sélectionner

;=========================
;-CONSTANTES
Enumeration
  #WinMain
  #img1
  #img2
  #img3
  #img4
  #img5
  #img6
  #img7
  #img8
  #img9
  #img10
  #img11
  #img12
  #img13
  #img14
  #img15
  #img16
  #img17
  #img18
  #img19
  #img20
  #Txt_attente
  #Hplink
EndEnumeration

;-VARIABLES
Global PROGRAMNAME$ = "Multi LED Progress"
Global numico = 0, percent = 0
Global LEDICONE, ColorTxt

;-IMAGES
;IncludePath "LED24\"  ; <<< Change the icon directory path / Modifier le chemin du répertoire des icônes
Global Image0 ,Image1,Image2,Image3,Image4,Image5,Image6,Image7,Image8
Image0  = CatchImage(0, ?Image0)
Image1  = CatchImage(1, ?Image1)
Image2  = CatchImage(2, ?Image2)
Image3  = CatchImage(3, ?Image3)
Image4  = CatchImage(4, ?Image4)
Image5  = CatchImage(5, ?Image5)
Image6  = CatchImage(6, ?Image6)
Image7  = CatchImage(7, ?Image7)
Image8  = CatchImage(8, ?Image8)
DataSection  ; icônes 24x24 et 16x16
  ; icônes sphèriques
  Image0: : IncludeBinary "LED24\Sphere_bleu.ico"  
  Image1: : IncludeBinary "LED24\Sphere_verte.ico"
  Image2: : IncludeBinary "LED24\Sphere_rouge.ico"
  ; icônes carrées
  Image3: : IncludeBinary "LED24\Square_bleu.ico"  
  Image4: : IncludeBinary "LED24\Square_turquoise.ico"
  Image5: : IncludeBinary "LED24\Square_noir.ico"
  ; icônes rectangulaires
  Image6: : IncludeBinary "LED24\Square_bleu_large.ico"  
  Image7: : IncludeBinary "LED24\Square_turquoise_large.ico"
  Image8: : IncludeBinary "LED24\Square_noir_large.ico"
EndDataSection

Procedure SetColorOfLED(Col = 0)
  ; Sélection du type d'icône et de la couleur du texte associé.
  ; Selecting the icon type and associated text color.
  If Col = 0     : LEDICONE = Image0 : ColorTxt = RGB(36, 64, 229)
  ElseIf Col = 1 : LEDICONE = Image1 : ColorTxt = RGB(36, 229, 35)
  ElseIf Col = 2 : LEDICONE = Image2 : ColorTxt = RGB(229, 35, 56)    
  ElseIf Col = 3 : LEDICONE = Image3 : ColorTxt = RGB(36, 64, 229)
  ElseIf Col = 4 : LEDICONE = Image4 : ColorTxt = RGB(33, 223, 229)
  ElseIf Col = 5 : LEDICONE = Image5 : ColorTxt = RGB(231, 234, 238)    
  ElseIf Col = 6 : LEDICONE = Image6 : ColorTxt = RGB(36, 64, 229)
  ElseIf Col = 7 : LEDICONE = Image7 : ColorTxt = RGB(33, 223, 229)
  ElseIf Col = 8 : LEDICONE = Image8 : ColorTxt = RGB(231, 234, 238)    
  EndIf 
EndProcedure
  
Procedure HideProgress()
  HideGadget(#img1, #True)
  HideGadget(#img2, #True)
  HideGadget(#img3, #True)
  HideGadget(#img4, #True)
  HideGadget(#img5, #True)
  HideGadget(#img6, #True)
  HideGadget(#img7, #True)
  HideGadget(#img8, #True)
  HideGadget(#img9, #True)
  HideGadget(#img10, #True)
  HideGadget(#img11, #True)
  HideGadget(#img12, #True)
  HideGadget(#img13, #True)
  HideGadget(#img14, #True)
  HideGadget(#img15, #True)
  HideGadget(#img16, #True)
  HideGadget(#img17, #True)
  HideGadget(#img18, #True)
  HideGadget(#img19, #True)
  HideGadget(#img20, #True)
EndProcedure

Procedure SetProgressBarLED(ValMax)
  ; procédure pour utilisation en mode progression exacte 
  ; ainsi la valeur max de la progressbar est ValMax
  ; l'affichage peut s'actualiser en fonction du nombre réel d'éléments
  ; le texte d'attente devient un affichage de ce qu'il se passe
  
; Procedure for use in exact progress mode
; thus the maximum value of the progress bar is ValMax
; the display can update according to the actual number of elements
; the waiting text becomes a display of what is happening
  
  ValBlock = ValMax/20  ; divisé par le nombre d'icônes utilisées / divided by the number of icons used
  For Block = 0 To ValMax         
    If Block = ValBlock                 
      numico + 1 : percent + 5  ;: Debug Str(numico) +"  "+Str(percent)+ " %"
      SetGadgetText(#Txt_attente, " Traitement effectué à : " + Str(percent) + " %   - icône n° "+ Str(numico) )
      HideGadget(numico, #False)      
      ValBlock + ValMax/20            
    EndIf       
  Next   
  numico = 0 : percent = 0 ; remise à zéro pour recommencer ultérieurement / reset to start again later
 
EndProcedure

;-FENETRE
If OpenWindow(#WinMain, 0, 0, 320, 90, PROGRAMNAME$, #PB_Window_SystemMenu | #PB_Window_ScreenCentered | #PB_Window_Tool)   
  SetWindowColor(#WinMain, RGB(0,0,0)) ; fond noir / black background
  StickyWindow(#WinMain, #True) ; toujours au premier plan pour ne pas la perdre  / always in the foreground so as not to lose it
  
  SetColorOfLED(3) ; Changez le type d'icône et la couleur en changeant la valeur (0 par défaut) 1 ou 2 ou plus si vous avez installé d'autres modèles d'icônes
                   ; Change the icon type and color by changing the value (0 by default) to 1 or 2 or more if you have installed other icon templates.
  ImageGadget(#img1,  0,   20, 16,16, LEDICONE) : HideGadget(#img1,  #True)
  ImageGadget(#img2,  16,  20, 16,16, LEDICONE) : HideGadget(#img2,  #True)
  ImageGadget(#img3,  32,  20, 16,16, LEDICONE) : HideGadget(#img3,  #True)
  ImageGadget(#img4,  48,  20, 16,16, LEDICONE) : HideGadget(#img4,  #True)
  ImageGadget(#img5,  64,  20, 16,16, LEDICONE) : HideGadget(#img5,  #True)
  ImageGadget(#img6,  80,  20, 16,16, LEDICONE) : HideGadget(#img6,  #True)
  ImageGadget(#img7,  96,  20, 16,16, LEDICONE) : HideGadget(#img7,  #True)
  ImageGadget(#img8,  112, 20, 16,16, LEDICONE) : HideGadget(#img8,  #True)
  ImageGadget(#img9,  128, 20, 16,16, LEDICONE) : HideGadget(#img9,  #True)
  ImageGadget(#img10, 144, 20, 16,16, LEDICONE) : HideGadget(#img10, #True)
  ImageGadget(#img11, 160, 20, 16,16, LEDICONE) : HideGadget(#img11, #True)
  ImageGadget(#img12, 176, 20, 16,16, LEDICONE) : HideGadget(#img12, #True)
  ImageGadget(#img13, 192, 20, 16,16, LEDICONE) : HideGadget(#img13, #True)
  ImageGadget(#img14, 208, 20, 16,16, LEDICONE) : HideGadget(#img14, #True)
  ImageGadget(#img15, 224, 20, 16,16, LEDICONE) : HideGadget(#img15, #True)
  ImageGadget(#img16, 240, 20, 16,16, LEDICONE) : HideGadget(#img16, #True)
  ImageGadget(#img17, 256, 20, 16,16, LEDICONE) : HideGadget(#img17, #True)
  ImageGadget(#img18, 272, 20, 16,16, LEDICONE) : HideGadget(#img18, #True)
  ImageGadget(#img19, 288, 20, 16,16, LEDICONE) : HideGadget(#img19, #True)
  ImageGadget(#img20, 304, 20, 16,16, LEDICONE) : HideGadget(#img20, #True)
  
  TextGadget(#Txt_attente, 0, 40, 320, 20, "Thank you for your patience during the destruction process...", #PB_Text_Center)
  SetGadgetColor(#Txt_attente, #PB_Gadget_FrontColor, ColorTxt)
  SetGadgetColor(#Txt_attente, #PB_Gadget_BackColor, RGB(0,0,0))
  
  HyperLinkGadget(#Hplink, 10, 70, 125, 15, "Test SetProgressBarLED", $EEEAE7, #PB_HyperLink_Underline)
  SetGadgetColor(#Hplink, #PB_Gadget_FrontColor, ColorTxt)
  SetGadgetColor(#Hplink, #PB_Gadget_BackColor, RGB(0,0,0))
  
  ; Le timer qui va animer le tout / The timer that will animate everything
  AddWindowTimer(#WinMain, 1, 100) ; pour augmenter la vitesse d'affichage, diminuer les millisecondes et vis dans le versa.
                                   ; to increase display speed, decrease milliseconds and vice versa.
  ;-EVENTLOOP
  Repeat  
    EventID = WaitWindowEvent()
    
    If EventID = #PB_Event_Timer And EventTimer() = 1
      numico + 1                     ; on incrémente de 1 pour sélectionner une sphère après l'autre / We increment by 1 to select one sphere after another          
      HideGadget(numico, #False)     ; Affichage de la progression icône après icône                 / Displaying progress icon by icon
      If numico = 21                 ; si on arrive à 21 c'est la fin de la barre                    / If we reach 21, that's the end of the bar.
        numico = 0 : HideProgress()  ; donc on remet à zéro pour relancer et faire une boucle        / So we reset to zero to restart and create a loop
      EndIf     
    EndIf 
    
    If EventID = #PB_Event_Gadget And EventGadget() = #Hplink
      RemoveWindowTimer(#WinMain, 1)
      numico = 0 : percent = 0
      SetProgressBarLED(10000) ; example with 10000 elements (very fast because there is no processing of the elements other than counting)
    EndIf 
    
  ;-FERMETURE   
    If EventID = #PB_Event_CloseWindow 
      Quit = 1
    EndIf
    
  Until Quit = 1 
  End 
EndIf

Re: ProgressBar LED multicolores

Publié : mer. 08/avr./2026 20:47
par Kwai chang caine
Merci du partage
Il n'y a plus besoin de ShowProgress() mais tu l'appelle quand même
ShowProgress(numico) donc pas moyen de compiler sans commenter la ligne :wink:
Et pour ma part, j'ai toujours les ronds qui sont coupés sur le bas, mais peut être que c'est normal :oops:

Re: ProgressBar LED multicolores

Publié : mer. 08/avr./2026 22:59
par Jacobus
Kwai chang caine a écrit : mer. 08/avr./2026 20:47 Il n'y a plus besoin de ShowProgress() mais tu l'appelle quand même
ShowProgress(numico) donc pas moyen de compiler sans commenter la ligne :wink:
En effet, faute d'inattention. C'est corrigé. Remplacé ShowProgress(numico) par HideGadget(numico, #False)

Pour ce qui est des sphères tronquées, c'est dû au facteur DPI. Il faut l'activer lors de la compilation. Chez moi aussi le bas des sphères est coupé si je ne le fais pas. Ce sont des icônes 24x24 et 16x16, et c'est le format 16 qui est utilisé dans le code. C'est donc un problème d'affichage, peut être en fonction de ta version de PB et de ton PC... sinon je ne vois pas. :?
Je n'ai testé que sur PB 6.30 et 6.40 en 64 bit.

Re: ProgressBar LED multicolores

Publié : jeu. 09/avr./2026 7:43
par Kwai chang caine
Il me semble avoir vu le DPI coché dans les options compilateur, je peux pas en dire plus à ce sujet j'y connais rien :oops:
En revanche, je vois que tout le monde en parle 8O
J'utilise la 6.21 généralement

Re: ProgressBar LED multicolores

Publié : jeu. 09/avr./2026 9:00
par Jacobus
Je crois avoir identifié ce qui t'empêche d'avoir un affichage correct.
J'ai testé avec PB 6.21 et tout fonctionne bien, pas de sphères tronquées.
J'en conclus que ton écran doit avoir un DPI de 1, soit la norme générale, et de ce fait les dimensions des gadgets et des images sont à leur valeur initiale.
Moi qui ait un DPI de 1.5 en raison de la taille de mon écran, tout est multiplié par 1.5 pour atteindre un affichage correct.

Voici une version du code qui prend en compte le critère DPI pour : la fenêtre, les ImageGadget() et la dimension des icônes.
Ca devrait fonctionner, tu me diras... et sinon, ben :?

Code : Tout sélectionner

;=========================
;-CONSTANTES
Enumeration
  #WinMain
  #img1
  #img2
  #img3
  #img4
  #img5
  #img6
  #img7
  #img8
  #img9
  #img10
  #img11
  #img12
  #img13
  #img14
  #img15
  #img16
  #img17
  #img18
  #img19
  #img20
  #Txt_attente
  #Hplink
EndEnumeration

;-VARIABLES
Global PROGRAMNAME$ = "Multi LED Progress"
Global numico = 0, percent = 0
Global LEDICONE, ColorTxt

;-IMAGES
;IncludePath "LED24\"  ; <<< Change the icon directory path / Modifier le chemin du répertoire des icônes
Global Image0 ,Image1,Image2,Image3,Image4,Image5,Image6,Image7,Image8
Image0  = CatchImage(0, ?Image0)
Image1  = CatchImage(1, ?Image1)
Image2  = CatchImage(2, ?Image2)
Image3  = CatchImage(3, ?Image3)
Image4  = CatchImage(4, ?Image4)
Image5  = CatchImage(5, ?Image5)
Image6  = CatchImage(6, ?Image6)
Image7  = CatchImage(7, ?Image7)
Image8  = CatchImage(8, ?Image8)
DataSection  ; icônes 24x24 et 16x16
  ; icônes sphèriques
  Image0: : IncludeBinary "LED24\Sphere_bleu.ico"  
  Image1: : IncludeBinary "LED24\Sphere_verte.ico"
  Image2: : IncludeBinary "LED24\Sphere_rouge.ico"
  ; icônes carrées
  Image3: : IncludeBinary "LED24\Square_bleu.ico"  
  Image4: : IncludeBinary "LED24\Square_turquoise.ico"
  Image5: : IncludeBinary "LED24\Square_noir.ico"
  ; icônes rectangulaires
  Image6: : IncludeBinary "LED24\Square_bleu_large.ico"  
  Image7: : IncludeBinary "LED24\Square_turquoise_large.ico"
  Image8: : IncludeBinary "LED24\Square_noir_large.ico"
EndDataSection

Procedure SetColorOfLED(Col = 0)
  ; Sélection du type d'icône et de la couleur du texte associé.
  ; Selecting the icon type and associated text color.
  If Col = 0     : LEDICONE = Image0 : ColorTxt = RGB(36, 64, 229)
  ElseIf Col = 1 : LEDICONE = Image1 : ColorTxt = RGB(36, 229, 35)
  ElseIf Col = 2 : LEDICONE = Image2 : ColorTxt = RGB(229, 35, 56)    
  ElseIf Col = 3 : LEDICONE = Image3 : ColorTxt = RGB(36, 64, 229)
  ElseIf Col = 4 : LEDICONE = Image4 : ColorTxt = RGB(33, 223, 229)
  ElseIf Col = 5 : LEDICONE = Image5 : ColorTxt = RGB(231, 234, 238)    
  ElseIf Col = 6 : LEDICONE = Image6 : ColorTxt = RGB(36, 64, 229)
  ElseIf Col = 7 : LEDICONE = Image7 : ColorTxt = RGB(33, 223, 229)
  ElseIf Col = 8 : LEDICONE = Image8 : ColorTxt = RGB(231, 234, 238)    
  EndIf 
EndProcedure

Procedure ShowProgress(numico) 
;   ; Affichage de la progression du remplissage de la barre / Displaying the progress of the bar filling
;   ; That's awesome, the code reduction is insane!
;   HideGadget(numico,  #False)
;   Select numico     
;       Case 1  : If numico = 1  : state = #False : Else : state = #True : EndIf : HideGadget(#img1,  state) 
;       Case 2  : If numico = 2  : state = #False : Else : state = #True : EndIf : HideGadget(#img2,  state)      
;       Case 3  : If numico = 3  : state = #False : Else : state = #True : EndIf : HideGadget(#img3,  state)      
;       Case 4  : If numico = 4  : state = #False : Else : state = #True : EndIf : HideGadget(#img4,  state)      
;       Case 5  : If numico = 5  : state = #False : Else : state = #True : EndIf : HideGadget(#img5,  state)      
;       Case 6  : If numico = 6  : state = #False : Else : state = #True : EndIf : HideGadget(#img6,  state)
;       Case 7  : If numico = 7  : state = #False : Else : state = #True : EndIf : HideGadget(#img7,  state)
;       Case 8  : If numico = 8  : state = #False : Else : state = #True : EndIf : HideGadget(#img8,  state)
;       Case 9  : If numico = 9  : state = #False : Else : state = #True : EndIf : HideGadget(#img9,  state)
;       Case 10 : If numico = 10 : state = #False : Else : state = #True : EndIf : HideGadget(#img10, state)
;       Case 11 : If numico = 11 : state = #False : Else : state = #True : EndIf : HideGadget(#img11, state)
;       Case 12 : If numico = 12 : state = #False : Else : state = #True : EndIf : HideGadget(#img12, state)
;       Case 13 : If numico = 13 : state = #False : Else : state = #True : EndIf : HideGadget(#img13, state)
;       Case 14 : If numico = 14 : state = #False : Else : state = #True : EndIf : HideGadget(#img14, state)
;       Case 15 : If numico = 15 : state = #False : Else : state = #True : EndIf : HideGadget(#img15, state)
;       Case 16 : If numico = 16 : state = #False : Else : state = #True : EndIf : HideGadget(#img16, state)
;       Case 17 : If numico = 17 : state = #False : Else : state = #True : EndIf : HideGadget(#img17, state)
;       Case 18 : If numico = 18 : state = #False : Else : state = #True : EndIf : HideGadget(#img18, state)
;       Case 19 : If numico = 19 : state = #False : Else : state = #True : EndIf : HideGadget(#img19, state)
;       Case 20 : If numico = 20 : state = #False : Else : state = #True : EndIf : HideGadget(#img20, state)
;   EndSelect
    
EndProcedure
  
Procedure HideProgress()
  
  HideGadget(#img1, #True)
  HideGadget(#img2, #True)
  HideGadget(#img3, #True)
  HideGadget(#img4, #True)
  HideGadget(#img5, #True)
  HideGadget(#img6, #True)
  HideGadget(#img7, #True)
  HideGadget(#img8, #True)
  HideGadget(#img9, #True)
  HideGadget(#img10, #True)
  HideGadget(#img11, #True)
  HideGadget(#img12, #True)
  HideGadget(#img13, #True)
  HideGadget(#img14, #True)
  HideGadget(#img15, #True)
  HideGadget(#img16, #True)
  HideGadget(#img17, #True)
  HideGadget(#img18, #True)
  HideGadget(#img19, #True)
  HideGadget(#img20, #True)
    
EndProcedure

Procedure SetProgressBarLED(ValMax)
  ; procédure pour utilisation en mode progression exacte 
  ; ainsi la valeur max de la progressbar est ValMax
  ; l'affichage peut s'actualiser en fonction du nombre réel d'éléments
  ; le texte d'attente devient un affichage de ce qu'il se passe
  
; Procedure for use in exact progress mode
; thus the maximum value of the progress bar is ValMax
; the display can update according to the actual number of elements
; the waiting text becomes a display of what is happening
  
  ValBlock = ValMax/20  ; divisé par le nombre d'icônes utilisées / divided by the number of icons used
  For Block = 0 To ValMax         
    If Block = ValBlock                 
      numico + 1 : percent + 5  ;: Debug Str(numico) +"  "+Str(percent)+ " %"
      SetGadgetText(#Txt_attente, " Traitement effectué à : " + Str(percent) + " %   - icône n° "+ Str(numico) )
      HideGadget(numico, #False) ;ShowProgress(numico)      
      ValBlock + ValMax/20            
    EndIf       
  Next   
  numico = 0 : percent = 0 ; remise à zéro pour recommencer ultérieurement / reset to start again later
 
EndProcedure

;-DPI   
  Global dpix.d = DesktopResolutionX()
  Global dpiy.d = DesktopResolutionY() 
  If dpix = 1 Or dpiy = 1
    xico = 24 : hd = 10 : wico = 24 : hico = 24 : wwin = 480
  ElseIf dpix > 1 Or dpiy > 1
    xico = 16 : hd = 20 : wico = 16 : hico = 16 : wwin = 320  
  EndIf 

;-FENETRE
If OpenWindow(#WinMain, 0, 0, wwin, 90, PROGRAMNAME$, #PB_Window_SystemMenu | #PB_Window_ScreenCentered | #PB_Window_Tool)   
  SetWindowColor(#WinMain, RGB(0,0,0)) ; fond noir / black background
  StickyWindow(#WinMain, #True) ; toujours au premier plan pour ne pas la perdre  / always in the foreground so as not to lose it
  
  SetColorOfLED() ; Changez le type d'icône et la couleur en changeant la valeur (0 par défaut) 1 ou 2 ou plus si vous avez installé d'autres modèles d'icônes
                  ; Change the icon type and color by changing the value (0 by default) to 1 or 2 or more if you have installed other icon templates.
  x = 0
  ImageGadget(#img1,  x, hd, wico,hico, LEDICONE) : HideGadget(#img1,  #True) : x + xico
  ImageGadget(#img2,  x, hd, wico,hico, LEDICONE) : HideGadget(#img2,  #True) : x + xico
  ImageGadget(#img3,  x, hd, wico,hico, LEDICONE) : HideGadget(#img3,  #True) : x + xico
  ImageGadget(#img4,  x, hd, wico,hico, LEDICONE) : HideGadget(#img4,  #True) : x + xico
  ImageGadget(#img5,  x, hd, wico,hico, LEDICONE) : HideGadget(#img5,  #True) : x + xico
  ImageGadget(#img6,  x, hd, wico,hico, LEDICONE) : HideGadget(#img6,  #True) : x + xico
  ImageGadget(#img7,  x, hd, wico,hico, LEDICONE) : HideGadget(#img7,  #True) : x + xico
  ImageGadget(#img8,  x, hd, wico,hico, LEDICONE) : HideGadget(#img8,  #True) : x + xico
  ImageGadget(#img9,  x, hd, wico,hico, LEDICONE) : HideGadget(#img9,  #True) : x + xico
  ImageGadget(#img10, x, hd, wico,hico, LEDICONE) : HideGadget(#img10, #True) : x + xico
  ImageGadget(#img11, x, hd, wico,hico, LEDICONE) : HideGadget(#img11, #True) : x + xico
  ImageGadget(#img12, x, hd, wico,hico, LEDICONE) : HideGadget(#img12, #True) : x + xico
  ImageGadget(#img13, x, hd, wico,hico, LEDICONE) : HideGadget(#img13, #True) : x + xico
  ImageGadget(#img14, x, hd, wico,hico, LEDICONE) : HideGadget(#img14, #True) : x + xico
  ImageGadget(#img15, x, hd, wico,hico, LEDICONE) : HideGadget(#img15, #True) : x + xico
  ImageGadget(#img16, x, hd, wico,hico, LEDICONE) : HideGadget(#img16, #True) : x + xico
  ImageGadget(#img17, x, hd, wico,hico, LEDICONE) : HideGadget(#img17, #True) : x + xico
  ImageGadget(#img18, x, hd, wico,hico, LEDICONE) : HideGadget(#img18, #True) : x + xico
  ImageGadget(#img19, x, hd, wico,hico, LEDICONE) : HideGadget(#img19, #True) : x + xico
  ImageGadget(#img20, x, hd, wico,hico, LEDICONE) : HideGadget(#img20, #True) : x + xico
  
  TextGadget(#Txt_attente, 0, 40, wwin, 20, "Thank you for your patience during the destruction process...", #PB_Text_Center)
  SetGadgetColor(#Txt_attente, #PB_Gadget_FrontColor, ColorTxt)
  SetGadgetColor(#Txt_attente, #PB_Gadget_BackColor, RGB(0,0,0))
  
  HyperLinkGadget(#Hplink, 10, 70, 125, 15, "Test SetProgressBarLED", $EEEAE7, #PB_HyperLink_Underline)
  SetGadgetColor(#Hplink, #PB_Gadget_FrontColor, ColorTxt)
  SetGadgetColor(#Hplink, #PB_Gadget_BackColor, RGB(0,0,0))
  
  ; Le timer qui va animer le tout / The timer that will animate everything
  AddWindowTimer(#WinMain, 1, 100) ; pour augmenter la vitesse d'affichage, diminuer les millisecondes et vis dans le versa.
                                   ; to increase display speed, decrease milliseconds and vice versa.
  ;-EVENTLOOP
  Repeat  
    EventID = WaitWindowEvent()
    
    If EventID = #PB_Event_Timer And EventTimer() = 1
      numico + 1                     ; on incrémente de 1 pour sélectionner une sphère après l'autre / We increment by 1 to select one sphere after another
      ;ShowProgress(numico)           
      HideGadget(numico, #False)     ; Affichage de la progression icône après icône                 / Displaying progress icon by icon
      If numico = 21                 ; si on arrive à 21 c'est la fin de la barre                    / If we reach 21, that's the end of the bar.
        numico = 0 : HideProgress()  ; donc on remet à zéro pour relancer et faire une boucle        / So we reset to zero to restart and create a loop
      EndIf     
    EndIf 
    
    If EventID = #PB_Event_Gadget And EventGadget() = #Hplink
      RemoveWindowTimer(#WinMain, 1)
      numico = 0 : percent = 0
      SetProgressBarLED(10000) ; example with 10000 elements (very fast because there is no processing of the elements other than counting)
    EndIf 
    
  ;-FERMETURE   
    If EventID = #PB_Event_CloseWindow 
      Quit = 1
    EndIf
    
  Until Quit = 1 
  End 
EndIf

Re: ProgressBar LED multicolores

Publié : jeu. 09/avr./2026 15:50
par MetalOS
Salut Jacobus, pas mal ton code. Comme j'adore utiliser le CanvasGadget j'ai adapté ton code pour ne pas utilisé d'image. Il est possible de changer la couleur des voyant ou d'en ajouter.

Code : Tout sélectionner

;=========================
;- CONSTANTES
Enumeration
  #WinMain
  #CanvasLED
  #Txt_attente
  #Hplink
EndEnumeration

;- VARIABLES
Global PROGRAMNAME$ = "Multi LED Progress"
Global numico = 0
Global percent = 0
Global ColorOn = RGB(36, 64, 229)
Global ColorOff = RGB(45, 45, 45)
Global BgColor = RGB(0, 0, 0)

Global NbLED = 20
Global LEDSize = 16
Global LEDSpacing = 6
Global MarginLeft = 10
Global MarginTop = 12

Global wwin, hwin = 95

;=========================
; DESSIN DES LEDS
;=========================
Procedure DrawLEDProgress(CurrentLED)
  Protected i, x, y, color
  
  If StartDrawing(CanvasOutput(#CanvasLED))
    Box(0, 0, OutputWidth(), OutputHeight(), BgColor)
    
    y = MarginTop
    
    For i = 1 To NbLED
      x = MarginLeft + (i - 1) * (LEDSize + LEDSpacing)
      
      ; Choix couleur
      If i <= CurrentLED
        color = ColorOn
      Else
        color = ColorOff
      EndIf
      
      ; Rond principal
      Circle(x + LEDSize/2, y + LEDSize/2, LEDSize/2, color)
      
      ; Petit reflet pour effet LED
      Circle(x + LEDSize/3, y + LEDSize/3, 2, RGB(255,255,255))
    Next
    
    StopDrawing()
  EndIf
EndProcedure

;=========================
; CHOIX DE LA COULEUR
;=========================
Procedure SetColorOfLED(Col = 0)
  Select Col
    Case 0 : ColorOn = RGB(36, 64, 229)    ; bleu
    Case 1 : ColorOn = RGB(36, 229, 35)    ; vert
    Case 2 : ColorOn = RGB(229, 35, 56)    ; rouge
    Case 3 : ColorOn = RGB(33, 223, 229)   ; turquoise
    Case 4 : ColorOn = RGB(255, 170, 0)    ; orange
    Case 5 : ColorOn = RGB(231, 234, 238)  ; blanc
  EndSelect
EndProcedure

;=========================
; REMISE A ZERO
;=========================
Procedure HideProgress()
  numico = 0
  DrawLEDProgress(0)
EndProcedure

;=========================
; PROGRESSION EXACTE
;=========================
Procedure SetProgressBarLED(ValMax)
  Protected stepValue.d
  Protected nextStep.d
  Protected currentValue
  Protected currentLED = 0
  Protected currentPercent = 0
  
  HideProgress()
  SetGadgetText(#Txt_attente, "Traitement en cours... 0 %")
  
  If ValMax <= 0
    ProcedureReturn
  EndIf
  
  stepValue = ValMax / NbLED
  nextStep = stepValue
  
  For currentValue = 1 To ValMax
    
    ; Simulation d'un traitement
    Delay(1)
    
    If currentValue >= nextStep And currentLED < NbLED
      currentLED + 1
      currentPercent = currentLED * 100 / NbLED
      
      DrawLEDProgress(currentLED)
      SetGadgetText(#Txt_attente, "Traitement effectué à : " + Str(currentPercent) + " %   - rond n° " + Str(currentLED))
      
      nextStep + stepValue
      
      While WindowEvent() : Wend
    EndIf
  Next
  
  DrawLEDProgress(NbLED)
  SetGadgetText(#Txt_attente, "Traitement terminé à 100 %")
EndProcedure

;=========================
; DIMENSIONS FENETRE
;=========================
wwin = MarginLeft * 2 + NbLED * LEDSize + (NbLED - 1) * LEDSpacing

;=========================
; FENETRE
;=========================
If OpenWindow(#WinMain, 0, 0, wwin, hwin, PROGRAMNAME$, #PB_Window_SystemMenu | #PB_Window_ScreenCentered | #PB_Window_Tool)
  
  SetWindowColor(#WinMain, BgColor)
  StickyWindow(#WinMain, #True)
  
  SetColorOfLED(0) ; 0=bleu, 1=vert, 2=rouge, 3=turquoise, 4=orange, 5=blanc
  
  CanvasGadget(#CanvasLED, 0, 0, wwin, 40)
  SetGadgetColor(#CanvasLED, #PB_Gadget_BackColor, BgColor)
  
  TextGadget(#Txt_attente, 0, 42, wwin, 20, "Thank you for your patience during the destruction process...", #PB_Text_Center)
  SetGadgetColor(#Txt_attente, #PB_Gadget_FrontColor, ColorOn)
  SetGadgetColor(#Txt_attente, #PB_Gadget_BackColor, BgColor)
  
  HyperLinkGadget(#Hplink, 10, 70, 150, 15, "Test SetProgressBarLED", $EEEAE7, #PB_HyperLink_Underline)
  SetGadgetColor(#Hplink, #PB_Gadget_FrontColor, ColorOn)
  SetGadgetColor(#Hplink, #PB_Gadget_BackColor, BgColor)
  
  DrawLEDProgress(0)
  
  ; Timer animation
  AddWindowTimer(#WinMain, 1, 100)
  
  Repeat
    EventID = WaitWindowEvent()
    
    If EventID = #PB_Event_Timer And EventTimer() = 1
      numico + 1
      DrawLEDProgress(numico)
      
      If numico > NbLED
        numico = 0
        DrawLEDProgress(0)
      EndIf
    EndIf
    
    If EventID = #PB_Event_Gadget And EventGadget() = #Hplink
      RemoveWindowTimer(#WinMain, 1)
      numico = 0
      percent = 0
      SetProgressBarLED(100)
      AddWindowTimer(#WinMain, 1, 100)
    EndIf
    
    If EventID = #PB_Event_CloseWindow
      Quit = 1
    EndIf
    
  Until Quit = 1
  
EndIf

Re: ProgressBar LED multicolores

Publié : jeu. 09/avr./2026 19:16
par Jacobus
C'est pas mal avec uniquement du Canvas, mais l'effet lumineux des sphères n'est pas là. Ca pêche de ce coté là.
Il est néanmoins possible d'utiliser les icônes avec un DrawImage().

Re: ProgressBar LED multicolores

Publié : ven. 10/avr./2026 0:57
par MetalOS
Effectivement l'effet led n'est pas présent