Create your own icons for toolbars etc. with PureBasic

davido · **Posted:** Mon Mar 14, 2016 10:09 pm

I required a Re-Size Icon . . . .

Code:

 Procedure.i Icon_ReSize (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 ret.i, hw.d
   
   hw = size / 16.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)
      AddPathBox(hw,hw,size - 2 * hw, size - 2 * hw)
      DashPath(1,3)
      AddPathBox(hw,size - 7 * hw, 6 * hw,6 * hw)

      MovePathCursor(size - 7 * hw, 4 * hw)
      AddPathLine(size - hw,hw)
      AddPathLine(size - 4 * hw,6.5 * hw)
      FillPath()
      MovePathCursor(3 * hw,size - 3 * hw)
      AddPathLine(size - 3 * hw,3 * hw)
      StrokePath(hw/2)
      StopVectorDrawing()
   EndIf
   
   ProcedureReturn ret
EndProcedure

Andre · **Posted:** Tue Mar 15, 2016 12:22 am

Really nice.

I would also be very happy to see a growing collection of well-done (toolbar) icons!

Little John · **Posted:** Tue Mar 15, 2016 6:56 am

Andre wrote:

Really nice.

Yes, indeed!

davido · **Posted:** Tue Mar 15, 2016 10:12 pm

I also needed a 'Stop' Icon which I add below:

Code:

Procedure.i Icon_Stop (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, hw.d, d.d
   
   hw = size / 12.0
   d = 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)
      
      MovePathCursor(hw, hw+d)
      AddPathCircle(Size/2, size/2,size/2.4)
      StrokePath(2 * hw, #PB_Path_RoundCorner)
      MovePathCursor(size-3*hw,3*hw)
      AddPathLine(3*hw,size-3*hw)
      StrokePath(2 * hw, #PB_Path_RoundCorner)
      
      StopVectorDrawing()
   EndIf
   
   ProcedureReturn ret
EndProcedure

Little John · **Posted:** Wed Mar 16, 2016 1:30 am

I have added StarBootics' and davido's contributions to the code in the first post.
And so the preview now also contains their icons.
Thank you!

Little John · **Posted:** Wed Mar 16, 2016 6:39 pm

I've added a "Help" icon to the collection in the first post.

davido · **Posted:** Wed Mar 16, 2016 9:12 pm

I would like to add a 'Warning Icon'.

Code:

Procedure.i Icon_Warning (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, hw.d, p.d
   
   hw = size / 12.0
   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(hw, size-hw)
      AddPathLine(Size/2, hw)
      AddPathLine(Size-hw, size-hw)
      ClosePath()
      StrokePath(1 * hw, #PB_Path_RoundCorner)

      MovePathCursor(14 * p,13 * p)
      AddPathLine(16 * p,23 * p)
      AddPathLine(18 * p,13 * p)
      ClosePath()
      FillPath()
      AddPathCircle(16 * p,13 * p,2 * p)
      
      AddPathCircle(16 * p,25 * p,1.5 * p)
      FillPath()
      
      StopVectorDrawing()
   EndIf
   
   ProcedureReturn ret
EndProcedure

Looks ok in sizes: 32, 64, 128 and 256

@Little John,
Thank you for tidying the 'Stop Icon'.

Little John · **Posted:** Thu Mar 17, 2016 7:58 am

davido wrote:

I would like to add a 'Warning Icon'.

Cool.

Additions to the first post:

"Quit" icon
"Warning" icon by davido

davido · **Posted:** Thu Mar 17, 2016 9:15 am

May I add two icons for 'On' & 'Off'

Code:

Macro OnOff()
   ; 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, hw.d, d.d, p.d
   
   hw = size / 12.0
   d = size / 8.0
   p = size / 32.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)
      FillPath()
      VectorSourceColor(color1)
      AddPathCircle(size/2,size/2,size/5)
      MovePathCursor(size/2,p*6)
      AddPathLine(size/2,p*15)
      StrokePath(p*2)
      
      StopVectorDrawing()
   EndIf
   
   ProcedureReturn ret
EndMacro

Procedure.i Icon_On (img.i, size.i, color.i, color1.i)
  OnOff() 
EndProcedure

Procedure.i Icon_Off (img.i, size.i, color.i, color1.i)
  OnOff()
EndProcedure

Icon_On(#ImgOn,Size,green,white)
Icon_Off(#ImgOff,Size,red,white)

Little John · **Posted:** Fri Mar 18, 2016 9:44 pm

davido wrote:

May I add two icons for 'On' & 'Off'

Thanks again, davido!
I've added them to the collection, with slightly changed code. The changes are partly due to consistency with the other procedures. Namely when 2 colors are used, then the "background" color should be the second one because for some icons it is now optional.

List of the current changes

renamed procedure "Help" to "Question"
changed procedure "Question" so that it doesn't necessarily have to use 2 colors, but can also use 1 color
extended davido's procedures "Stop" and "Warning", so that they optionally can use 2 colors
added icons to the preview that demonstrate the new options
added new "On" and "Off" icons by davido
demo code considerably improved and simplified;
e.g. new icons can now be added easier and faster;
and e.g. the icons can now be viewed even in a big size, because a ScrollAreaGadget() is used
some cosmetic changes

davido · **Posted:** Fri Mar 18, 2016 10:13 pm

I also required an 'Info' Icon, which I list below:

Code:

Procedure.i Icon_Info (img.i, size.i, color.i, color1.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, hw.d, d.d, p.d
   
   hw = size / 12.0
   d = size / 8.0
   p = size / 32.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)
      FillPath()
      VectorSourceColor(color1)
      AddPathCircle(size/2,size/4,p*2)
      FillPath()
      MovePathCursor(size/2,p*13)
      AddPathLine(size/2,p*23)
      AddPathLine(p*18,p*23)
      StrokePath(p*4,#PB_Path_RoundCorner | #PB_Path_RoundEnd)
      
      StopVectorDrawing()
   EndIf
   
   ProcedureReturn ret
EndProcedure

@Little John,
Thank you for normalising and improving other Icons I have posted.
It is nice to see the enlarged Icons. It highlights the advantages of Vector Graphics.

Little John · **Posted:** Sat Mar 19, 2016 7:36 am

davido wrote:

I also required an 'Info' Icon, which I list below:

Added to the first post, thank you!

Derren · **Posted:** Sat Mar 19, 2016 2:31 pm

Very nice,
but do you have any idea why the grey/disabled icons look jagged? In some of the colored icons you can see it too, like the yellow question mark and information i. But nearly all of the grey ones don't look nice at the edges :/

Oma · **Posted:** Sat Mar 19, 2016 5:29 pm

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.)

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

Best regards, Charly

Derren · **Posted:** Sat Mar 19, 2016 7:46 pm

Are you not seeing them in the posted picture either? Because that would mean that my graphics card is too dumb to correctly render the png.

PureBasic Forum

Create your own icons for toolbars etc. with PureBasic

Who is online