Create your own icons for toolbars etc. with PureBasic

Little John · Post by **Little John** » Mon Mar 28, 2016 8:46 pm

Moooin, Oma.

Oma wrote:Moinmoin , Little John. Please excuse the hassle, which i've caused to you.
I didn't expect that the Windows AddPathArc is really so beastly.

No problem, that was not your fault!

Oma wrote:I also did the (mentioned) correction for the Macro UnRedo() above.
And i've found a solution for Open1 and Open2 on windows by reducing the radius.
Then they are at least usable as basic icons.
Not so with Open3, so i decided to comment out this (anyway) graceless icon.

Well, due to the new private AddPathArc() PB code in the module, I think we can ignore this bug now.
So please make your icons as beautiful as you actually want them to be.

Oma wrote:PS:
A link to a file with X11 and CSS color definitions, usable for PB:http://www.chabba.de/temp/X11+CSS-Colors.pb
My used color goldenrod4 was unfortunately an X11 and no CSS color, but after deactivating the Open3-icon, this is no longer needed.

Thank you for the color definitions, I've included the CSS definitions in the module.
Currently, also your Open3 icon is still included, and for now I've replaced goldenrod4 with #CSS_Sienna (which is not identical, but somewhat similar). Maybe you want to keep or rework that icon now, without the AddPathArc() bug?
Please tell me if there now is anything that you want me to change in the module.

Many thanks for your wishes. I had a nice time with close friends. I hope you had a good time, too!

davido · Post by **davido** » Mon Mar 28, 2016 10:31 pm

Hi Little John,
Thank you for adding my icons.
Also thank you for correcting the 'defect' in my Donate1 icon.
This problem seems to occur due to the manner in which FillPath() works. I have observed that there is a difference in size of a circle with a 1 pixel StrokePath() than one created with FillPath().

Code: Select all

If OpenWindow(0, 0, 0, 400, 200, "VectorDrawing", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
    CanvasGadget(0, 0, 0, 400, 200)

    If StartVectorDrawing(CanvasVectorOutput(0))

      ; Red circle, not filled
      AddPathCircle(100, 100, 75)
      VectorSourceColor(RGBA(255, 0, 0, 255))
      StrokePath(1)
      ; Same size circle in yellow, but filled - Red StrokePath() still visble
      VectorSourceColor(RGBA(255, 255, 0, 255))
      AddPathCircle(100, 100, 75)
      FillPath()
      
      StopVectorDrawing()
    EndIf
    
    Repeat
      Event = WaitWindowEvent()
    Until Event = #PB_Event_CloseWindow
  EndIf

I find this rather odd.

Thank you for all the new additions to the code, in particular for the work-around for the AddArcPath()

Looking great.

Little John · Post by **Little John** » Tue Mar 29, 2016 3:19 am

davido wrote:This problem seems to occur due to the manner in which FillPath() works. I have observed that there is a difference in size of a circle with a 1 pixel StrokePath() than one created with FillPath().

Hi davido,

as far as I can see, the radius for the circle drawn with StrokePath() refers to the middle of the drawn line. That's why I often use code like the following (hw meaning "half width" of the line to be drawn):

Code: Select all

If OpenWindow(0, 0, 0, 400, 200, "VectorDrawing", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
   CanvasGadget(0, 0, 0, 400, 200)
   
   r = 75
   hw = 10
   
   If StartVectorDrawing(CanvasVectorOutput(0))
      
      ; Red circle, not filled
      VectorSourceColor(RGBA(255, 0, 0, 255))
      AddPathCircle(100, 100, r - hw)
      StrokePath(2 * hw)
      
      ; Same size circle in yellow, but filled
      VectorSourceColor(RGBA(255, 255, 0, 255))
      AddPathCircle(100, 100, r)
      FillPath()
      
      StopVectorDrawing()
   EndIf
   
   Repeat
      Event = WaitWindowEvent()
   Until Event = #PB_Event_CloseWindow
EndIf

davido · Post by **davido** » Tue Mar 29, 2016 9:55 pm

Hi Little John,

I would like to add a new icon: Filter.
I've also moved the Donate1 icon as you suggested.

Code: Select all

Declare.i Filter (img.i, size.i, color.i)

   Procedure.i Donate1 (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 davido]
      Protected ret.i, p.d
      
      p = size / 32
      
      ret = CreateImage(img, size, size, 32, #Background)
      
      If ret
         If img = #PB_Any
            img = ret
         EndIf
         
         If StartVectorDrawing(ImageVectorOutput(img))
            VectorSourceColor(color)
            
            AddPathCircle( 9*p, 10*p, 7*p, 180, 0)
            AddPathCircle(23*p, 10*p, 7*p, 180, 0)
            
            AddPathLine(16*p, 30.5*p)
            AddPathLine( 2*p, 10*p)
            ClosePath()
            FillPath()
            
            AddPathCircle(24*p, 10*p, 22*p, 110, 180)
            FillPath()
            
            AddPathCircle(8*p, 10*p, 22*p, 0, 70)
            FillPath()
            
            StopVectorDrawing()
         Else
            FreeImage(img)
            ret = 0
         EndIf
      EndIf
      
      ProcedureReturn ret
   EndProcedure
   
   
   Procedure.i Donate2 (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 davido]
      Protected ret.i, p.d
      
      p = size / 32
      
      ret = CreateImage(img, size, size, 32, #Background)
      
      If ret
         If img = #PB_Any
            img = ret
         EndIf
         
         If StartVectorDrawing(ImageVectorOutput(img))
            VectorSourceColor(color)

            AddPathCircle( 9*p, 10*p, 7*p, 180, 0)
            AddPathCircle(23*p, 10*p, 7*p, 180, 0)
            
            MovePathCursor(30*p, 10*p)
            AddPathLine(16*p, 30*p)
            AddPathLine(2*p, 10*p)
            ClosePath()
            FillPath()
            
            StopVectorDrawing()
         Else
            FreeImage(img)
            ret = 0
         EndIf
      EndIf
      
      ProcedureReturn ret
   EndProcedure
   
   Procedure.i Filter (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 davido]
      Protected ret.i, p.d
      
      p = size / 32
      
      ret = CreateImage(img, size, size, 32, #Background)
      
      If ret
         If img = #PB_Any
            img = ret
         EndIf
         
         If StartVectorDrawing(ImageVectorOutput(img))
            VectorSourceColor(color)

            MovePathCursor(p,p)
            AddPathLine(31*p,p)
            AddPathLine(19*p,18*p)
            AddPathLine(19*p,26*p)
            AddPathLine(13*p,31*p)
            AddPathLine(13*p,18*p)
            ClosePath()
            FillPath()
            
            StopVectorDrawing()
         Else
            FreeImage(img)
            ret = 0
         EndIf
      EndIf
      
      ProcedureReturn ret
    EndProcedure 
    
    
    ;, "Filter"
    
#ImgFilter
    
Filter(#ImgFilter, size, #CSS_FireBrick)
Filter(#ImgFilter + #IconCount, size, #CSS_Silver)

Thank you for your explanation of StrokePath(); I understand now!

Little John · Post by **Little John** » Wed Mar 30, 2016 8:12 am

Thank you, davido!
First post and ZIP archive updated.

Little John · Post by **Little John** » Wed Mar 30, 2016 4:31 pm

Since the CSS colors do not actually contain a shade of red that I like for the icons created here, I additionally reintroduced the old shade of red [RGBA(192,0,0,255)] as a constant. On an internet site, I found the name "Guardsman Red" for it".
The 4 procedures UpArrow(), DownArrow(), LeftArrow(), and RightArrow() generated exactly the same shape. I have replaced them with 1 procedure named Arrow() that has got an additional parameter for the rotation angle. This new procedure can not only create the 4 mentioned arrows, but also other arrows that point in arbitrary directions.

davido · Post by **davido** » Wed Mar 30, 2016 9:42 pm

Hi Little John,

Here is a Bookmark Icon:

Code: Select all

Declare.i Bookmark (img.i, size.i, color1.i, color2.i)


   Procedure.i Bookmark (img.i, size.i, color1.i, color2.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 davido]
      Protected ret.i, p.d, M.i, L.d
      
      p = size / 32
      
      ret = CreateImage(img, size, size, 32, #Background)
      
      If ret
         If img = #PB_Any
            img = ret
         EndIf
         
         If StartVectorDrawing(ImageVectorOutput(img))
            VectorSourceColor(color1)
            ; Page
            AddPathBox(2*p, 2*p, 28*p, 28*p)
            For M = 5 To 26 Step 3
              L = 10 + Random(18)
               MovePathCursor(4*p, M*p)
               AddPathLine(L*p, M*p)
            Next M
            StrokePath(p, #PB_Path_RoundCorner)
            ; Ribbon
            VectorSourceColor(color2)
            MovePathCursor(20*p, 1*p)
            AddPathLine(20*p, 28*p)
            AddPathLine(24*p, 20*p)
            AddPathLine(28*p, 28*p)
            AddPathLine(28*p, 1*p)
            ClosePath()
            FillPath()
            
            StopVectorDrawing()
         Else
            FreeImage(img)
            ret = 0
         EndIf
      EndIf
      
      ProcedureReturn ret
    EndProcedure 
    
    
    #ImgBookmark
    
    ; , "Bookmark"
    
    
    Bookmark(#ImgBookmark, size, #CSS_Navy, #CSS_ForestGreen)
    
    Bookmark(#ImgBookmark + #IconCount, size, #CSS_DimGrey, #CSS_Silver)

Little John · Post by **Little John** » Thu Mar 31, 2016 7:08 am

Hi davido, thank you for this nice icon!
I've added it to the collection, which now contains already 71 public procedures.

davido · Post by **davido** » Thu Mar 31, 2016 8:14 am

Hi Little John,
Is that all!?

I noticed in a previous post that you have added Guardsman Red. This alerted me to the difference a good colour choice makes to an icon.
Always feel free to change the colours of any icons I post if you think this will be an improvement.

I also like the way you improved the arrows generator, perhaps this could be applied to other icon groups?

Little John · Post by **Little John** » Thu Mar 31, 2016 1:35 pm

Hi davido!

davido wrote:Always feel free to change the colours of any icons I post if you think this will be an improvement.

Thank you.

davido wrote:I also like the way you improved the arrows generator, perhaps this could be applied to other icon groups?

I wanted to make an additional horizontally flipped "Search" icon anyway (together with a "Search next" or "Find next" icon).
Instead of implementing it in the form of a new procedure, the existing procedure could get an additional optional parameter say "flipHorizontally" with the possible values #True or #False. The same could be done for "Zoom In", "Zoom Out", and "Great".
What do you think?

davido · Post by **davido** » Thu Mar 31, 2016 9:05 pm

Hi Little John,

Little John wrote: I wanted to make an additional horizontally flipped "Search" icon anyway (together with a "Search next" or "Find next" icon).
Instead of implementing it in the form of a new procedure, the existing procedure could get an additional optional parameter say "flipHorizontally" with the possible values #True or #False. The same could be done for "Zoom In", "Zoom Out", and "Great".
What do you think?

Certainly sounds reasonable to me!
This would presumably allow the over-laying of search icon onto a background. For example to create search icons for: documents, files etc.

Perhaps a macro for applying various other components onto backgrounds would be worth considering. For example: 5-pointed stars are useful for many icons such as favourites.

I have a few icons 'hanging fire' two of these have an identical component. I intended to post them with such a macro.

In the meantime I have another icon: Database.

Code: Select all

Declare.i Database (img.i, size.i, color1.i, color2.i)

   Procedure.i Database (img.i, size.i, color1.i, color2.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 davido]
      Protected ret.i, p.d
      
      p = size / 32
      
      ret = CreateImage(img, size, size, 32, #Background)
      
      If ret
        If img = #PB_Any
          img = ret
        EndIf
        
        If StartVectorDrawing(ImageVectorOutput(img))
          VectorSourceColor(color1)
          ;Place top and base elipses
          AddPathEllipse(16*p,6*p,12*p,2.5*p)
          AddPathEllipse(16*p,26*p,12*p,2.5*p)
          FillPath()
          ;Add the sides - Needs the full box to fill
          AddPathBox(4*p,6*p,24.5*p,20*p)
          FillPath()
          ;Add in the cylinders
          VectorSourceColor(color2)

          AddPathEllipse(16*p, 6*p, 12*p, 2.5*p,0,180)
          AddPathEllipse(16*p, 11*p, 12*p, 2.5*p,0,180)
          AddPathEllipse(16*p, 16*p, 12*p, 2.5*p,0,180)
          AddPathEllipse(16*p, 21*p, 12*p, 2.5*p,0,180)

          StrokePath(1.5*p)
          
          StopVectorDrawing()
        Else
          FreeImage(img)
          ret = 0
        EndIf
      EndIf
      
      ProcedureReturn ret
    EndProcedure 
    
    #ImgDatabase
    
    ;, "Database"
    
    Database(#ImgDatabase, size, #CSS_SteelBlue, #CSS_White)
    
    Database(#ImgDatabase + #IconCount, size, #CSS_DimGrey, #CSS_Silver)

Little John · Post by **Little John** » Thu Mar 31, 2016 10:45 pm

davido wrote:Perhaps a macro for applying various other components onto backgrounds would be worth considering. For example: 5-pointed stars are useful for many icons such as favourites.

I have a few icons 'hanging fire' two of these have an identical component. I intended to post them with such a macro.

Hi davido,

I'll be happy to move code from procedures into reusable macros, if this will be needed by any new icon.

Current changes

Renamed icon "Search" to "Find".
Procedures "Find", "ZoomIn", "ZoomOut", and "Great" now have an additional optinal parameter that allows horizontal flipping.
Added icon "FindNext" (also with an optional parameter for horizontal flipping).
Added icon "Database" by davido.

Tenaja · Post by **Tenaja** » Thu Mar 31, 2016 11:18 pm

LJ, I am not in the middle of a project that calls for icons, but I am saving this for almost certain use in the future. Thank you very much for your efforts, as well as thanks to everyone else who has contributed.

Little John · Post by **Little John** » Fri Apr 01, 2016 8:41 pm

davido wrote:Perhaps a macro for applying various other components onto backgrounds would be worth considering. For example: 5-pointed stars are useful for many icons such as favourites.

Hi davido,

thank you for that idea!
I've now created a special section in the module for such macros (or procedures, if more suitable), and already put 2 macros there:
- DrawMagnifyingGlass()
- DrawFivePointedStar().

The other current changes:

At the beginning of the file "vectoricons.pb", there is now a table of contents.
Changed procedures Find(), FindNext(), ZoomIn(), and ZoomOut() so that they
now make use of the macro DrawMagnifyingGlass().
Changed procedure FivePointedStar() so that it now makes use of the macro
DrawFivePointedStar().
Icon "Diskette now has rounded corners.
Removed procedure "Undo2", renamed procedure "Undo1" to "Undo", and added an
optional parameter to it that allows vertical flipping of the icon.
Some cosmetic changes.

Tenaja wrote:LJ, I am not in the middle of a project that calls for icons, but I am saving this for almost certain use in the future. Thank you very much for your efforts, as well as thanks to everyone else who has contributed.

Hi Tenaja, thanks for your kind words! You are welcome.

davido · Post by **davido** » Fri Apr 01, 2016 8:55 pm

Hi Little John,

I have another three icons to add:

Tools; Sort; Randomise;

Code: Select all

   Declare.i Tools (img.i, size.i, color.i, Color2.i)
   Declare.i Sort (img.i, size.i, color.i)
   Declare.i Randomise (img.i, size.i, color.i)
   
     Macro Spanner()
      AddPathEllipse(16*p, 7*p, 3.5*p, 5*p, 20, 160)
      MovePathCursor(12.7*p,4*p)
      AddPathLine(12.7*p,9*p)
      MovePathCursor(19.3*p,4*p)
      AddPathLine(19.3*p,9*p)
      StrokePath(3*p)
      MovePathCursor(16*p,13*p)
      AddPathLine(16*p,26*p)
      StrokePath(4*p,#PB_Path_RoundEnd)
    EndMacro
    Macro Hammer()
      MovePathCursor(13.5*p,28*p)
      AddPathLine(18.5*p,28*p)
      AddPathLine(17.5*p,11*p)
      AddPathLine(13.5*p,11*p)
      ClosePath()
      FillPath()
      MovePathCursor(9*p,7*p)
      AddPathLine(9*p,11*p)
      MovePathCursor(9*p,10*p)
      AddPathLine(10*p,10*p)
      AddPathLine(10*p,11*p)
      AddPathLine(21*p,11*p)
      AddPathLine(21*p,10*p)
      AddPathLine(23*p,10*p)
      AddPathLine(23*p,11*p)
      AddPathLine(26*p,11*p)
      AddPathLine(26*p,7*p)
      AddPathLine(23*p,7*p)
      AddPathLine(23*p,8*p)
      AddPathLine(21*p,8*p)
      AddPathLine(21*p,7*p)
      AddPathLine(10*p,7*p)
      AddPathLine(10*p,8*p)
      AddPathLine(9*p,8*p)
      FillPath()
      AddPathEllipse(9*p,9*p,4*p,2*p,90,270)
      FillPath() 
    EndMacro  
   Procedure.i Tools (img.i, size.i, color1.i, color2.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 davido]
      Protected ret.i, p.i, half.d
      
      p = size / 32
      half = size / 2.0
      
      ret = CreateImage(img, size, size, 32, #Background)
      
      If ret
         If img = #PB_Any
            img = ret
         EndIf
         
         If StartVectorDrawing(ImageVectorOutput(img))
           ;Spanner tool
           VectorSourceColor(color1)
           Spanner()
           
           ;Hammer tool
           RotateCoordinates(16*p,16*p,-104)
           Hammer()

           StopVectorDrawing()
         Else
           FreeImage(img)
            ret = 0
         EndIf
      EndIf
      
      ProcedureReturn ret
   EndProcedure
   
     Procedure.i Sort (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 davido]
      Protected ret.i, p.d
      
      p = size / 32
      
      ret = CreateImage(img, size, size, 32, #Background)
      
      If ret
         If img = #PB_Any
            img = ret
         EndIf
         
         If StartVectorDrawing(ImageVectorOutput(img))
            VectorSourceColor(color)
            ;A
            MovePathCursor(4*p,14*p)
            AddPathLine(8*p,2*p)
            AddPathLine(12*p,14*p)
            MovePathCursor(6*p,10*p)
            AddPathLine(10*p,10*p)
            ;Z
            MovePathCursor(2*p,18*p)
            AddPathLine(13*p,18*p)
            AddPathLine(3*p,30*p)
            AddPathLine(14*p,30*p)
            ;Double arrows
            MovePathCursor(26*p,4*p)
            AddPathLine(26*p,28*p)
            StrokePath(2*p)
            MovePathCursor(21*p,8*p)
            AddPathLine(26*p,2*p)
            AddPathLine(31*p,8*p)
            ClosePath()
            FillPath()
            MovePathCursor(21*p,24*p)
            AddPathLine(26*p,30*p)
            AddPathLine(31*p,24*p)
            ClosePath()
            FillPath()
            StopVectorDrawing()
         Else
            FreeImage(img)
            ret = 0
         EndIf
      EndIf
      
      ProcedureReturn ret
   EndProcedure  
   
     Procedure.i Randomise (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 davido]
      Protected ret.i, p.d
      
      p = size / 32
      
      ret = CreateImage(img, size, size, 32, #Background)
      
      If ret
         If img = #PB_Any
            img = ret
         EndIf
         
         If StartVectorDrawing(ImageVectorOutput(img))
            VectorSourceColor(color)
            MovePathCursor(2*p,9*p)
            AddPathLine(12*p,9*p)
            AddPathLine(20*p,24*p)
            AddPathLine(26*p,24*p)
            MovePathCursor(2*p,24*p)
            AddPathLine(12*p,24*p)
            AddPathLine(20*p,9*p)
            AddPathLine(26*p,9*p)
            StrokePath(2*p)
            MovePathCursor(26*p,5*p)
            AddPathLine(26*p,13*p)
            AddPathLine(31*p,9*p)
            ClosePath()
            FillPath()
            MovePathCursor(26*p,20*p)
            AddPathLine(26*p,28*p)
            AddPathLine(31*p,24*p)
            ClosePath()
            FillPath()
         Else
            FreeImage(img)
            ret = 0
         EndIf
      EndIf
      
      ProcedureReturn ret
    EndProcedure  
    
    
      #ImgTools
      #ImgSort
      #ImgRandomise
      
      
      
      ;, "Tools", "Sort", "Randomise"
      
      Tools(#ImgTools, size, #CSS_DimGrey,#CSS_WhiteSmoke)
      Sort(#ImgSort, size, #CSS_FireBrick)
      Randomise(#ImgRandomise, size, #CSS_Navy)
      
      Tools(#ImgTools + #IconCount, size, #CSS_Silver,#CSS_WhiteSmoke)
      Sort(#ImgSort + #IconCount, size, #CSS_Silver)
      Randomise(#ImgRandomise + #IconCount, size, #CSS_Silver)

The Tools icon has two associated Macros: Spanner and Hammer. I'll be glad to change these if they don't conform to your the format of your macros.

Thank you for all the additions you have made, I'll need a little time to digest this.

PureBasic Forums - English

Create your own icons for toolbars etc. with PureBasic

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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