Create your own icons for toolbars etc. with PureBasic

heartbone · **Posted:** Sat Mar 19, 2016 7:54 pm

Little John wrote:

Nice!
I would really like the collection to grow over time.

That's an understatement.

I hope that the efforts will eventually include icons with more of a Win 7/XP look.

While I do appreciate your efforts here,
and I realize that the overall appearance may be due to the nature of vector graphics,
but the current collection's Win 8 aesthetic leaves me wanting more.

davido · **Posted:** Sat Mar 19, 2016 9:18 pm

@heartbone,
I don't use Windows 7 or XP anymore, my personal view is that they are moribund. Please don't argue as I do respect the view of others who continue to use W7 and XP.
If you could post an image of the icons you consider useful, I'll be glad to take a look.
If I am able I will post vector versions here.

Little John · **Posted:** Sat Mar 19, 2016 11:29 pm

Oma wrote:

Looking good and i'm pleased that the project continues. Thank you.

(But i think, that #PB_Ignore is no valid parameter for window width or height, but may work on Windows.)

Thanks for your kind words, and for the bug report.
I've fixed the bug now (successfully tested with PB 5.42 on Linux Mint 17.3 Cinnamon).

Oma wrote:

Btw.
The "jagged" edges don't appear on Linux, checked with sizes from 16 to 128 px.

Also here no problem, with PB 5.42 on Linux (for details see above) and on Windows 10.

davido · **Posted:** Sat Mar 19, 2016 11:35 pm

Here are Expand and Collapse Icons:

Code:

Procedure.i Icon_Collapse (img.i, size.i, color.i)
   ; in : img  : number of the image which is to be created, or #PB_Any
   ;      size : number of pixels (width and height)
   ;      color: foreground color of the image (background is transparent)
   ; out: return value: if img = #Pb_Any => number of the created image,
   ;                    error => 0
   Protected.i ret.i, w.d, p.d
   
   w = size / 8
   p = size / 32
   
   ret = CreateImage(img, size, size, 32, #PB_Image_Transparent)
   If img = #PB_Any
      img = ret
   EndIf
   
   If ret And StartVectorDrawing(ImageVectorOutput(img))
      VectorSourceColor(color)
      AddPathCircle(w,w,2.5*p)
      AddPathCircle(w,4*w,2.5*p)
      AddPathCircle(w,7*w,2.5*p)
      FillPath()
      MovePathCursor(w,w)
      AddPathLine(w,size - w)
      MovePathCursor(w,w)
      AddPathLine(5*w,w)
      MovePathCursor(w,4*w)
      AddPathLine(5*w,4*w)
      MovePathCursor(w,7*w)
      AddPathLine(5*w,7*w)
      StrokePath(p)
      StopVectorDrawing()
   EndIf
   
   ProcedureReturn ret
EndProcedure


Procedure.i Icon_Expand (img.i, size.i, color.i)
   ; in : img  : number of the image which is to be created, or #PB_Any
   ;      size : number of pixels (width and height)
   ;      color: foreground color of the image (background is transparent)
   ; out: return value: if img = #Pb_Any => number of the created image,
   ;                    error => 0
   Protected.i ret.i, w.d, p.d
   
   w = size / 8
   p = size / 32
   
   ret = CreateImage(img, size, size, 32, #PB_Image_Transparent)
   If img = #PB_Any
      img = ret
   EndIf
   
   If ret And StartVectorDrawing(ImageVectorOutput(img))
      VectorSourceColor(color)
      AddPathCircle(w,w,2.5*p)
      AddPathCircle(5*w,4*w,2.5*p)
      AddPathCircle(5*w,7*w,2.5*p)
      FillPath()
      MovePathCursor(w,w)
      AddPathLine(w,size-w)
      MovePathCursor(w,w)
      AddPathLine(5*w,w)
      MovePathCursor(w,4*w)
      AddPathLine(8*w,4*w)
      MovePathCursor(5*w,4*w)
      AddPathLine(5*w,7*w)
      MovePathCursor(5*w,7*w)
      AddPathLine(8*w,7*w)
      StrokePath(p)
      StopVectorDrawing()
   EndIf
   
   ProcedureReturn ret
EndProcedure

Little John · **Posted:** Sun Mar 20, 2016 12:22 am

davido wrote:

Here are Expand and Collapse Icons:

Added to the first post. :-)

Little John · **Posted:** Sun Mar 20, 2016 7:47 am

Added icon "Checked".

Fangbeast · **Posted:** Sun Mar 20, 2016 8:14 am

These are really good. I wish I had a complete set of icons like this suitable for a recipe manager, am thinking of some way to have user selectable icon sets in the future.

Keep up the good work.

davido · **Posted:** Sun Mar 20, 2016 9:56 am

@Little John,
Having seen your 'Checked Icon' I am not sure that an Icon I have been working on, which I called: Success, is sufficiently different to be included.
I'll list the code below, anyway.

Code:

Procedure.i Icon_Success (img.i, size.i, color.i)
   ; in : img  : number of the image which is to be created, or #PB_Any
   ;      size : number of pixels (width and height)
   ;      color: foreground color of the image (background is transparent)
   ; out: return value: if img = #Pb_Any => number of the created image,
   ;                    error => 0
   Protected.i ret.i, w.d

   w = size / 8.0
   
   ret = CreateImage(img, size, size, 32, #PB_Image_Transparent)
   If img = #PB_Any
      img = ret
   EndIf
   
   If ret And StartVectorDrawing(ImageVectorOutput(img))
      VectorSourceColor(color)
      AddPathCircle(Size/2, size/2,size/2.4)
      ClosePath()
      StrokePath(w, #PB_Path_RoundCorner)

      MovePathCursor(3*w,4*w)
      AddPathLine(4*w,5*w)
      AddPathLine(5.5*w,3*w)
      StrokePath(0.75*w, #PB_Path_RoundCorner)
      StopVectorDrawing()
   EndIf
   
   ProcedureReturn ret
EndProcedure

Little John · **Posted:** Sun Mar 20, 2016 10:48 am

Fangbeast wrote:

These are really good.

Thank you.

Fangbeast wrote:

I wish I had a complete set of icons like this suitable for a recipe manager, am thinking of some way to have user selectable icon sets in the future.

If you could post images of icons you consider useful, maybe someone can/will create corresponding vector versions.

davido wrote:

@Little John,
Having seen your 'Checked Icon' I am not sure that an Icon I have been working on, which I called: Success, is sufficiently different to be included.

Since I like it, I included it. :-)

I vaguely recall having seen that icon somewhere (maybe at PayPal?).

Added icon "Search".

davido · **Posted:** Sun Mar 20, 2016 11:00 am

Here is a 'Home' Icon:

Code:

Procedure.i Icon_Home (img.i, size.i, color.i)
   ; in : img  : number of the image which is to be created, or #PB_Any
   ;      size : number of pixels (width and height)
   ;      color: foreground color of the image (background is transparent)
   ; out: return value: if img = #Pb_Any => number of the created image,
   ;                    error => 0
   Protected.i ret.i, w.d, p.d
   
   w = size / 8
   p = size / 32
   
   ret = CreateImage(img, size, size, 32, #PB_Image_Transparent)
   If img = #PB_Any
      img = ret
   EndIf
   
   If ret And StartVectorDrawing(ImageVectorOutput(img))
      VectorSourceColor(color)
      MovePathCursor(4*w,2*p)
      AddPathLine(w,4*w+2*p)
      AddPathLine(2*w,4*w+2*p)
      AddPathLine(2*w,7*w+2*p)
      AddPathLine(6*w,7*w+2*p)
      AddPathLine(6*w,4*w+2*p)
      AddPathLine(7*w,4*w+2*p)
      ClosePath()
      MovePathCursor(3*w,4*w)
      AddPathLine(3*w,6*w)
      MovePathCursor(3*w,5*w)
      AddPathLine(5*w,5*w)
      MovePathCursor(5*w,4*w)
      AddPathLine(5*w,6*w)
      StrokePath(p*2)
      StopVectorDrawing()
   EndIf
   
   ProcedureReturn ret
 EndProcedure

Fangbeast · **Posted:** Sun Mar 20, 2016 1:54 pm

Quote:

If you could post images of icons you consider useful, maybe someone can/will create corresponding vector versions.

I wish I could. Since there were not a consistent set of icons from Mattahan's BUUF icon set, I had to carefully go through ALL his collections and carefully match them to my recipe managers functions.

My chosen icons are inconsistent in styles.

infratec · **Posted:** Sun Mar 20, 2016 2:13 pm

Hi,

my small 'media' contribution:

Code:

   Declare.i MediaPlay(img.i, size.i, color.i)
   Declare.i MediaStop(img.i, size.i, color.i)
   Declare.i MediaBegin(img.i, size.i, color.i)
   Declare.i MediaEnd(img.i, size.i, color.i)
   Declare.i MediaForward(img.i, size.i, color.i)
   Declare.i MediaFastForward(img.i, size.i, color.i)
   Declare.i MediaBack(img.i, size.i, color.i)
   Declare.i MediaFastBack(img.i, size.i, color.i)

Code:

    Procedure.i MediaPlay(img.i, size.i, color.i)
      ; in : img  : number of the image which is to be created, or #PB_Any
      ;      size : width and height (number of pixels)
      ;      color: foreground color
      ; out: return value: if img = #Pb_Any => number of the created image,
      ;                    error => 0
      ; [by infratec]
      Protected ret.i, w.d
     
      w = size / 8.0
     
      ret = CreateImage(img, size, size, 32, #Background)
      If img = #PB_Any
         img = ret
      EndIf
     
      If ret And StartVectorDrawing(ImageVectorOutput(img))
        VectorSourceColor(color)
        
         MovePathCursor(2*w, 1*w)
         AddPathLine(2*w, 7*w)
         AddPathLine(6*w, 4*w)
         AddPathLine(2*w, 1*w)
         FillPath()
         
         StopVectorDrawing()
       Else
         FreeImage(ret)
         ret = 0
      EndIf
     
      ProcedureReturn ret
    EndProcedure
    
    
    Procedure.i MediaStop(img.i, size.i, color.i)
      ; in : img  : number of the image which is to be created, or #PB_Any
      ;      size : width and height (number of pixels)
      ;      color: foreground color
      ; out: return value: if img = #Pb_Any => number of the created image,
      ;                    error => 0
      ; [by infratec]
      Protected ret.i, w.d
     
      w = size / 8.0
     
      ret = CreateImage(img, size, size, 32, #Background)
      If img = #PB_Any
         img = ret
      EndIf
     
      If ret And StartVectorDrawing(ImageVectorOutput(img))
        VectorSourceColor(color)
        
         MovePathCursor(2*w, 1*w)
         AddPathLine(2*w, 7*w)
         
         MovePathCursor(5*w, 1*w)
         AddPathLine(5*w, 7*w)
         StrokePath(1.5*w, #PB_Path_RoundCorner)
         
         StopVectorDrawing()
       Else
         FreeImage(ret)
         ret = 0
      EndIf
     
      ProcedureReturn ret
    EndProcedure
    
    Procedure.i MediaBegin(img.i, size.i, color.i)
      ; in : img  : number of the image which is to be created, or #PB_Any
      ;      size : width and height (number of pixels)
      ;      color: foreground color
      ; out: return value: if img = #Pb_Any => number of the created image,
      ;                    error => 0
      ; [by infratec]
      Protected ret.i, w.d
     
      w = size / 8.0
     
      ret = CreateImage(img, size, size, 32, #Background)
      If img = #PB_Any
         img = ret
      EndIf
     
      If ret And StartVectorDrawing(ImageVectorOutput(img))
        VectorSourceColor(color)
        
         MovePathCursor(6*w, 1*w)
         AddPathLine(6*w, 7*w)
         AddPathLine(2*w, 4*w)
         AddPathLine(6*w, 1*w)
         FillPath()
         
         MovePathCursor(2*w, 1*w)
         AddPathLine(2*w, 7*w)
         StrokePath(1.5*w, #PB_Path_RoundCorner)
         
         StopVectorDrawing()
       Else
         FreeImage(ret)
         ret = 0
      EndIf
     
      ProcedureReturn ret
    EndProcedure
    
    Procedure.i MediaEnd(img.i, size.i, color.i)
      ; in : img  : number of the image which is to be created, or #PB_Any
      ;      size : width and height (number of pixels)
      ;      color: foreground color
      ; out: return value: if img = #Pb_Any => number of the created image,
      ;                    error => 0
      ; [by infratec]
      Protected ret.i, w.d
     
      w = size / 8.0
     
      ret = CreateImage(img, size, size, 32, #Background)
      If img = #PB_Any
         img = ret
      EndIf
     
      If ret And StartVectorDrawing(ImageVectorOutput(img))
        VectorSourceColor(color)
        
         MovePathCursor(3*w, 1*w)
         AddPathLine(3*w, 7*w)
         AddPathLine(7*w, 4*w)
         AddPathLine(3*w, 1*w)
         FillPath()
         
         MovePathCursor(7*w, 1*w)
         AddPathLine(7*w, 7*w)
         StrokePath(1.5*w, #PB_Path_RoundCorner)
         
         StopVectorDrawing()
       Else
         FreeImage(ret)
         ret = 0
      EndIf
     
      ProcedureReturn ret
    EndProcedure
    
    
    Procedure.i MediaForward(img.i, size.i, color.i)
      ; in : img  : number of the image which is to be created, or #PB_Any
      ;      size : width and height (number of pixels)
      ;      color: foreground color
      ; out: return value: if img = #Pb_Any => number of the created image,
      ;                    error => 0
      ; [by infratec]
      Protected ret.i, w.d
     
      w = size / 8.0
     
      ret = CreateImage(img, size, size, 32, #Background)
      If img = #PB_Any
         img = ret
      EndIf
     
      If ret And StartVectorDrawing(ImageVectorOutput(img))
        VectorSourceColor(color)
        
         MovePathCursor(2*w, 1*w)
         AddPathLine(5*w, 4*w)
         AddPathLine(2*w, 7*w)
        
         StrokePath(1.5*w, #PB_Path_RoundCorner)
         
         StopVectorDrawing()
       Else
         FreeImage(ret)
         ret = 0
      EndIf
     
      ProcedureReturn ret
    EndProcedure
    
    
    Procedure.i MediaFastForward(img.i, size.i, color.i)
      ; in : img  : number of the image which is to be created, or #PB_Any
      ;      size : width and height (number of pixels)
      ;      color: foreground color
      ; out: return value: if img = #Pb_Any => number of the created image,
      ;                    error => 0
      ; [by infratec]
      Protected ret.i, w.d
     
      w = size / 8.0
     
      ret = CreateImage(img, size, size, 32, #Background)
      If img = #PB_Any
         img = ret
      EndIf
     
      If ret And StartVectorDrawing(ImageVectorOutput(img))
        VectorSourceColor(color)
        
         MovePathCursor(1*w, 1*w)
         AddPathLine(4*w, 4*w)
         AddPathLine(1*w, 7*w)
         StrokePath(1.5*w, #PB_Path_RoundCorner)
         
         MovePathCursor(4*w, 1*w)
         AddPathLine(7*w, 4*w)
         AddPathLine(4*w, 7*w)
         StrokePath(1.5*w, #PB_Path_RoundCorner)
         
         StopVectorDrawing()
       Else
         FreeImage(ret)
         ret = 0
      EndIf
     
      ProcedureReturn ret
    EndProcedure
    
    
    Procedure.i MediaBack(img.i, size.i, color.i)
      ; in : img  : number of the image which is to be created, or #PB_Any
      ;      size : width and height (number of pixels)
      ;      color: foreground color
      ; out: return value: if img = #Pb_Any => number of the created image,
      ;                    error => 0
      ; [by infratec]
      Protected ret.i, w.d
     
      w = size / 8.0
     
      ret = CreateImage(img, size, size, 32, #Background)
      If img = #PB_Any
         img = ret
      EndIf
     
      If ret And StartVectorDrawing(ImageVectorOutput(img))
        VectorSourceColor(color)
        
         MovePathCursor(5*w, 1*w)
         AddPathLine(2*w, 4*w)
         AddPathLine(5*w, 7*w)
         StrokePath(1.5*w, #PB_Path_RoundCorner)
         
         StopVectorDrawing()
       Else
         FreeImage(ret)
         ret = 0
      EndIf
     
      ProcedureReturn ret
    EndProcedure
    
    
    Procedure.i MediaFastBack(img.i, size.i, color.i)
      ; in : img  : number of the image which is to be created, or #PB_Any
      ;      size : width and height (number of pixels)
      ;      color: foreground color
      ; out: return value: if img = #Pb_Any => number of the created image,
      ;                    error => 0
      ; [by infratec]
      Protected ret.i, w.d
     
      w = size / 8.0
     
      ret = CreateImage(img, size, size, 32, #Background)
      If img = #PB_Any
         img = ret
      EndIf
     
      If ret And StartVectorDrawing(ImageVectorOutput(img))
        VectorSourceColor(color)
        
         MovePathCursor(4*w, 1*w)
         AddPathLine(1*w, 4*w)
         AddPathLine(4*w, 7*w)
         StrokePath(1.5*w, #PB_Path_RoundCorner)
         
         MovePathCursor(7*w, 1*w)
         AddPathLine(4*w, 4*w)
         AddPathLine(7*w, 7*w)
         StrokePath(1.5*w, #PB_Path_RoundCorner)
         
         StopVectorDrawing()
       Else
         FreeImage(ret)
         ret = 0
      EndIf
     
      ProcedureReturn ret
    EndProcedure

Code:

      #ImgMediaPlay
      #ImgMediaStop
      #ImgMediaBegin
      #ImgMediaEnd
      #ImgMediaForward
      #ImgMediaFastForward
      #ImgMediaBack
      #ImgMediaFastBack

Code:

      VectorIcons::MediaPlay(#ImgMediaPlay, size, blue)
      VectorIcons::MediaStop(#ImgMediaStop, size, blue)
      VectorIcons::MediaBegin(#ImgMediaBegin, size, blue)
      VectorIcons::MediaEnd(#ImgMediaEnd, size, blue)
      VectorIcons::MediaForward(#ImgMediaForward, size, blue)
      VectorIcons::MediaFastForward(#ImgMediaFastForward, size, blue)
      VectorIcons::MediaBack(#ImgMediaBack, size, blue)
      VectorIcons::MediaFastBack(#ImgMediaFastBack, size, blue)

Code:

      VectorIcons::MediaPlay(#ImgMediaPlay + #IconCount, size, lightgrey)
      VectorIcons::MediaStop(#ImgMediaStop + #IconCount, size, lightgrey)
      VectorIcons::MediaBegin(#ImgMediaBegin + #IconCount, size, lightgrey)
      VectorIcons::MediaEnd(#ImgMediaEnd + #IconCount, size, lightgrey)
      VectorIcons::MediaForward(#ImgMediaForward + #IconCount, size, lightgrey)
      VectorIcons::MediaFastForward(#ImgMediaFastForward + #IconCount, size, lightgrey)
      VectorIcons::MediaBack(#ImgMediaBack + #IconCount, size, lightgrey)
      VectorIcons::MediaFastBack(#ImgMediaFastBack + #IconCount, size, lightgrey)

Bernd

Little John · **Posted:** Sun Mar 20, 2016 6:47 pm

davido wrote:

Here is a 'Home' Icon:

infratec wrote:

my small 'media' contribution:

Cool, thanks to both of you!

The module now contains already 30 public procedures!

Bernd: When I read your code, i realized that my previous code couldn't handle some errors properly (now fixed).
Thanks also for giving that broad hint! :-)

BasicallyPure · **Posted:** Sun Mar 20, 2016 7:55 pm

This is looking good.
Many thanks to Little John and others who have contributed.

If I were up to speed on vector graphics I would add a couple of undo/redo icons.
So there is a suggestion for anyone with vector graphics skills.

Little John I made a small change to the CreateIcons() procedure to add ToolTips for each icon.
With this change you can see the name of each icon simply by hovering the mouse over the image.

Code:

      ScrollAreaGadget(#PB_Any, 0, 0, winWidth, winHeight-50, width, height, 10, #PB_ScrollArea_BorderLess)
      Restore IconNames
      For r = 0 To rows-1
         For c = 0 To columns-1
            img = columns*r + c
            If img = #IconCount : Break 2 : EndIf
            
            If IsImage(img)
               Read.s name$
               GadgetToolTip(ImageGadget(#PB_Any,c*(size+20)+10, 2*r   *(size+20)+10,size,size,ImageID(img)),name$);"enabled"
            Else
               Debug "Couldn't create image #" + Str(img)
            EndIf
            img + #IconCount
            If IsImage(img)
               GadgetToolTip(ImageGadget(#PB_Any,c*(size+20)+10,(2*r+1)*(size+20)+10,size,size,ImageID(img)),name$);"disabled"
            Else
               Debug "Couldn't create image #" + Str(img)
            EndIf
         Next
      Next
      CloseGadgetList()

Little John · **Posted:** Sun Mar 20, 2016 8:54 pm

Thank you, BasicallyPure!
I have implemented your nice suggestion.

PureBasic Forum

Create your own icons for toolbars etc. with PureBasic

Who is online