Create your own icons for toolbars etc. with PureBasic

Share your advanced PureBasic knowledge/code with the community.
User avatar
heartbone
Addict
Addict
Posts: 1058
Joined: Fri Apr 12, 2013 1:55 pm
Location: just outside of Ferguson

Re: Create your own icons for toolbars etc. with PureBasic

Post by heartbone »

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.
Keep it BASIC.
davido
Addict
Addict
Posts: 1890
Joined: Fri Nov 09, 2012 11:04 pm
Location: Uttoxeter, UK

Re: Create your own icons for toolbars etc. with PureBasic

Post by davido »

@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.
DE AA EB
Little John
Addict
Addict
Posts: 4519
Joined: Thu Jun 07, 2007 3:25 pm
Location: Berlin, Germany

Re: Create your own icons for toolbars etc. with PureBasic

Post by Little John »

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.
Last edited by Little John on Sun Mar 20, 2016 11:38 am, edited 1 time in total.
davido
Addict
Addict
Posts: 1890
Joined: Fri Nov 09, 2012 11:04 pm
Location: Uttoxeter, UK

Re: Create your own icons for toolbars etc. with PureBasic

Post by davido »

Here are Expand and Collapse Icons:

Code: Select all

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
DE AA EB
Little John
Addict
Addict
Posts: 4519
Joined: Thu Jun 07, 2007 3:25 pm
Location: Berlin, Germany

Re: Create your own icons for toolbars etc. with PureBasic

Post by Little John »

davido wrote:Here are Expand and Collapse Icons:
Added to the first post. :-)
Little John
Addict
Addict
Posts: 4519
Joined: Thu Jun 07, 2007 3:25 pm
Location: Berlin, Germany

Re: Create your own icons for toolbars etc. with PureBasic

Post by Little John »

Added icon "Checked".
User avatar
Fangbeast
PureBasic Protozoa
PureBasic Protozoa
Posts: 4747
Joined: Fri Apr 25, 2003 3:08 pm
Location: Not Sydney!!! (Bad water, no goats)

Re: Create your own icons for toolbars etc. with PureBasic

Post by Fangbeast »

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.
Amateur Radio, D-STAR/VK3HAF
davido
Addict
Addict
Posts: 1890
Joined: Fri Nov 09, 2012 11:04 pm
Location: Uttoxeter, UK

Re: Create your own icons for toolbars etc. with PureBasic

Post by davido »

@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: Select all

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
DE AA EB
Little John
Addict
Addict
Posts: 4519
Joined: Thu Jun 07, 2007 3:25 pm
Location: Berlin, Germany

Re: Create your own icons for toolbars etc. with PureBasic

Post by Little John »

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
Addict
Addict
Posts: 1890
Joined: Fri Nov 09, 2012 11:04 pm
Location: Uttoxeter, UK

Re: Create your own icons for toolbars etc. with PureBasic

Post by davido »

Here is a 'Home' Icon:

Code: Select all

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
DE AA EB
User avatar
Fangbeast
PureBasic Protozoa
PureBasic Protozoa
Posts: 4747
Joined: Fri Apr 25, 2003 3:08 pm
Location: Not Sydney!!! (Bad water, no goats)

Re: Create your own icons for toolbars etc. with PureBasic

Post by Fangbeast »

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.
Amateur Radio, D-STAR/VK3HAF
infratec
Always Here
Always Here
Posts: 6824
Joined: Sun Sep 07, 2008 12:45 pm
Location: Germany

Re: Create your own icons for toolbars etc. with PureBasic

Post by infratec »

Hi,

my small 'media' contribution:

Code: Select all

   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: Select all

    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: Select all

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

Code: Select all

      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: Select all

      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
Addict
Addict
Posts: 4519
Joined: Thu Jun 07, 2007 3:25 pm
Location: Berlin, Germany

Re: Create your own icons for toolbars etc. with PureBasic

Post by Little John »

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! :-)
User avatar
BasicallyPure
Enthusiast
Enthusiast
Posts: 536
Joined: Thu Mar 24, 2011 12:40 am
Location: Iowa, USA

Re: Create your own icons for toolbars etc. with PureBasic

Post by BasicallyPure »

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: Select all

      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()
BasicallyPure
Until you know everything you know nothing, all you have is what you believe.
Little John
Addict
Addict
Posts: 4519
Joined: Thu Jun 07, 2007 3:25 pm
Location: Berlin, Germany

Re: Create your own icons for toolbars etc. with PureBasic

Post by Little John »

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