Create your own icons for toolbars etc. with PureBasic

Share your advanced PureBasic knowledge/code with the community.
Little John
Addict
Addict
Posts: 4784
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 »

Hi davido,

at a size of 16x16 pixels, your new "Tools" icon is not visible at all here (on Windows). I don't know the reason why. Is it possible to fix this?
I would really like the icons to show their main shape even at this small size. However, you couldn't know that because I didn't write it before.
davido wrote: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.
Macros (or procedures) that provide "basic shapes" which can be used as parts of icons should be freely movable and resizable. Icon creators who want to use those basic shapes should be able to put them into their icons whereever they want, and at whatever size they want.
This is done best with parameters, so those macros should always have at least 3 of them: for the x- and y-coordinates of a particular point, and for the size. All other points and distances inside the macro should only depend on these parameters. And please add some description, to which point the x- and y-coordinates are exactly referring, and what the size parameter precisely means, depending on the particular shape. For instance in the two macros DrawMagnifyingGlass() and DrawFivePointedStar() the mentioned parameters have different meanings.
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 »

HI Little John,

Apologies for sending a buggy icon 'Tools'.
After sending you a non-resizeable icon some while back I did start checking each icon at 16, 32 and 128. After a while I got lazy and only checked at 32 and 128.
The problem with the 'Tools' icon is that I created the 'p' variable as integer not double; with that change it works.
Let me know if you would like that icon re-posted.

Thank you for the specification for the macros for 'basic shapes'.
Am I right to assume that 'basic shapes' can only use a single colour - the current one?

I made an icon which required a small 'tick' and modified your code to make a macro. I did this 'ere having sight of your specification. It appears to comply.
The icon is called: 'IsProtected' and is a two-tone green shield with a central small 'tick'. I would like to add another called: 'UnProtected' which would be a two-tone red shield with a small central 'X'. As 'X' is often used in icons I would like to make a macro to apply 'X'. If you are happy with the 'Tick' macro, I'll go ahead.

Code: Select all

Declare.i IsProtected (img.i, size.i, color1.i, color2.i, color3.i)

   Macro Tick(_size_,_x_,_y_,_tsize_,_half_,_hw_)
     ;_size_   : Size of the icon in pixels
     ;_x_, _y_ : Coordinates of the centre of box containing the tick.
     ;_tsize_  : Size of containing box in pixels
     ;_half_   : Half of tsize
     ;_hw_     : Width of the tick - 10% of tsize
     ; [by davido but based on code by Little John]
     
     MovePathCursor( x - half + hw, Y - half + half)
     AddPathLine   ( x - half + half, y - half + tsize - 2*hw)
     AddPathLine   ( x - half + tsize - hw, Y - half + hw)
     StrokePath(2*hw)
   EndMacro 
   
   Procedure.i IsProtected (img.i, size.i, color1.i, color2.i, color3.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, hw.d, half.d, tsize.d, x.d, y.d
      
      tsize = size / 3.0
      hw = tsize / 10.0
      half = tsize / 2.0
      x = size / 2
      y = size / 2
      p = size / 32
      
      ret = CreateImage(img, size, size, 32, #Background)
      
      If ret
         If img = #PB_Any
            img = ret
         EndIf
         
         If StartVectorDrawing(ImageVectorOutput(img))
           ;Left-hand side of shield
           VectorSourceColor(color1)
           AddPathEllipse(16*p,16*p,10*p,12*p,90,270)
           ClosePath()
           FillPath()
           MovePathCursor(6*p,16*p)
           AddPathLine(6*p,6*p)
           AddPathLine(16*p,2*p)
           AddPathLine(16*p,16*p)
           ClosePath()
           FillPath()
           ;Right-hand side of shield
           VectorSourceColor(color2)
           AddPathEllipse(16*p,16*p,10*p,12*p,270,90)
           ClosePath()
           FillPath()
           MovePathCursor(26*p,16*p)
           AddPathLine(26*p,6*p)
           AddPathLine(16*p,2*p)
           AddPathLine(16*p,16*p)
           ClosePath()
           FillPath()
           ;Central tick
           VectorSourceColor(color3)
           Tick(size,x,y,tsize,half,hw)
         Else
            FreeImage(img)
            ret = 0
         EndIf
      EndIf
      
      ProcedureReturn ret
    EndProcedure  
    
  #ImgIsProtected  
    
  ;, "Protected"
  
  IsProtected(#ImgIsProtected, size, #CSS_ForestGreen, #CSS_DarkGreen, #CSS_WhiteSmoke)
  IsProtected(#ImgIsProtected + #IconCount, size, #CSS_Silver, #CSS_DimGrey, #CSS_WhiteSmoke)
    
    
I took a good look at your 'diskette' icon.
You've set the bar rather high with that one.
It looks just like a photograph of the real thing! 8)
DE AA EB
Oma
Enthusiast
Enthusiast
Posts: 312
Joined: Thu Jun 26, 2014 9:17 am
Location: Germany

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

Post by Oma »

Hi all,
sorry for my timeout - i've learned again to make breaks -
and going crazy for days, just because i once had used an unnoticed "Import" instead of "ImportC" with accidental IMAs, 32-Bit-Bugs and other strange behaviours :twisted: - and created bug reports - which finally show the flaw. :x
But now a start in Linux Printer Handling for Gtk and Cups is done :) .

@davido
You've set the bar rather high with that one.
I just have to agree. And thank you, davido, for your ongoing contributions.

@Little John
Congrats for your "AddPathRoundedCorner()", (could be a good pattern for a bugfree AddPathArc()).
And thank you for your corrections on my icons.
Aaaand thank you for adding the Alphachannel to the CSS-colors. I just forgot - and transferred it back to my table :wink: .


I have updated the Printer1-icon (contrast of paper feed, unnecessary color1),
and added a PrinterError1-icon.

Code: Select all

;Updated
Declare.i Printer1 (img.i, size.i, color.i, color2.i)
;New
Declare.i PrinterError1 (img.i, size.i, color1.i, color2.i, color3.i=0, color4.i=0)



Procedure.i Printer1 (img.i, size.i, color1.i, color2.i);  updated
	; in : img   : number of the image which is to be created, or #PB_Any
	;      size  : width and height (number of pixels)
	;      color1: foreground color #1
	;      color2: foreground color #2
	;      color2: foreground color #3
	; out: return value: if img = #Pb_Any => number of the created image,
	;                    error => 0
	; [org. by Omi]
	Protected ret.i
	Protected p.d   = size / 32
	Protected p16.d = size / 16
	Protected p8.d  = size / 8
	Protected p4.d  = size / 4
	Protected p2.d  = size / 2
	Protected w.d   = p * 20
	Protected h.d   = p * 24
	
	ret = CreateImage(img, size, size, 32, #Background)
	
	If ret
		If img = #PB_Any
			img = ret
		EndIf
		
		If StartVectorDrawing(ImageVectorOutput(img))
			; printer
			VectorSourceColor(color1)
			AddPathBox    (p16, p2, size - p8, p4)
			StrokePath    (p8, #PB_Path_RoundCorner)
			AddPathBox    (p, p2, size - p16, p4 + p8)
			FillPath      ()
			StrokePath    (p)
			
			; sheet top
			AddPathBox    (p8 + p16, p, w, p2)
			StrokePath    (2 * p, #PB_Path_RoundCorner)
			VectorSourceColor(color2)
			AddPathBox    (p8 + p16, p, w, p2)
			FillPath      ()
			StrokePath    (p)
			; lines
			VectorSourceColor(color1)
			MovePathCursor( 8 * p,  4 * p)
			AddPathLine   (17 * p,  4 * p)
			MovePathCursor( 8 * p,  7 * p)
			AddPathLine   (19 * p,  7 * p)
			MovePathCursor( 8 * p, 10 * p)
			AddPathLine   (12 * p, 10 * p)
			StrokePath    (p)
			
			; sheet bottom
			AddPathBox    (p8, size - p4 + p, h, p8 + p16)
			StrokePath    (2 * p, #PB_Path_RoundCorner)
			VectorSourceColor(color2)
			AddPathBox    (p8, size - p4 + p, h, p8 + p16)
			FillPath      ()
			StrokePath    (p)
			
			;added
			VectorSourceColor(color1)
			MovePathCursor(p16,         size - p4)
			AddPathLine   (size - p16,  size - p4)
			StrokePath    (p16)
			StopVectorDrawing()
		Else
			FreeImage(img)
			ret = 0
		EndIf
	EndIf
	
	ProcedureReturn ret
EndProcedure


Procedure.i PrinterError1 (img.i, size.i, color1.i, color2.i, color3.i=0, color4.i=0)
	; in : img   : number of the image which is to be created, or #PB_Any
	;      size  : width and height (number of pixels)
	;      color1: foreground color #1
	;      color2: foreground color #2
	;      color2: foreground color #3
	; out: return value: if img = #Pb_Any => number of the created image,
	;                    error => 0
	; [org. by Omi]
	Protected ret.i
	Protected p.d   = size / 32
	Protected p16.d = size / 16
	Protected p8.d  = size / 8
	Protected p4.d  = size / 4
	Protected p2.d  = size / 2
	Protected w.d   = p * 20
	Protected h.d   = p * 24
	
	ret = CreateImage(img, size, size, 32, #Background)
	
	If ret
		If img = #PB_Any
			img = ret
		EndIf
		
		If StartVectorDrawing(ImageVectorOutput(img))
			; printer
			VectorSourceColor(color1)
			AddPathBox    (p16, p2, size - p8, p4)
			StrokePath    (p8, #PB_Path_RoundCorner)
			AddPathBox    (p, p2, size - p16, p4 + p8)
			FillPath      ()
			StrokePath    (p)
			
			; sheet top
			AddPathBox    (p8 + p16, p, w, p2)
			StrokePath    (2 * p, #PB_Path_RoundCorner)
			VectorSourceColor(color2)
			AddPathBox    (p8 + p16, p, w, p2)
			FillPath      ()
			StrokePath    (p)
			;lines
			VectorSourceColor(color1)
			MovePathCursor( 8 * p,  4 * p)
			AddPathLine   (17 * p,  4 * p)
			MovePathCursor( 8 * p,  7 * p)
			AddPathLine   (19 * p,  7 * p)
			MovePathCursor( 8 * p, 10 * p)
			AddPathLine   (12 * p, 10 * p)
			StrokePath    (p)
			
			; sheet bottom
			VectorSourceColor(color1)
			AddPathBox    (p8, size - p4 + p, h, p8 + p16)
			StrokePath    (2 * p, #PB_Path_RoundCorner)
			VectorSourceColor(color2)
			AddPathBox    (p8, size - p4 + p, h, p8 + p16)
			FillPath      ()
			StrokePath    (p)
			
			;added later
			VectorSourceColor(color1)
			MovePathCursor(p16,         size - p4)
			AddPathLine   (size - p16,  size - p4)
			StrokePath    (p16)
			
			;panel
			VectorSourceColor(color3)
			AddPathCircle    (size - p4, size - p4, p4)
			FillPath()
			VectorSourceColor(color4)
			AddPathCircle    (size - p4, size - p4, p4-p)
			StrokePath       (p)      
			; bar
			VectorSourceColor(color2)
			MovePathCursor   (size - 7 * p16, size - p4)
			AddPathLine      (6 * p16, 0, #PB_Path_Relative)
			StrokePath       (size/10)
			
			StopVectorDrawing()
		Else
			FreeImage(img)
			ret = 0
		EndIf
	EndIf
	
	ProcedureReturn ret
EndProcedure


;added
#ImgPrinterError1


;added
Data.s "PrinterError1"


;changed
Printer1(#ImgPrinter1, size, #CSS_DimGrey, #CSS_White)
;added
PrinterError1(#ImgPrinterError1, size, #CSS_DimGrey, #CSS_White, #CSS_Red)

;changed
Printer1(#ImgPrinter1 + #IconCount, size, #CSS_Silver, #CSS_WhiteSmoke)
;added
PrinterError1(#ImgPrinterError1 + #IconCount, size, #CSS_Silver, #CSS_White, #CSS_Silver, #CSS_White)
Have a beautiful Sunday,
Charly
PureBasic 5.4-5.7, Linux: (X/L/K)Ubuntus+Mint - Windows XP (32Bit)
PureBasic Linux-API-Library & Viewer: http://www.chabba.de
Little John
Addict
Addict
Posts: 4784
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 »

Hi davido!

I have updated the first post and the ZIP archive, which now include your 4 most recent icons.
davido wrote:Apologies for sending a buggy icon 'Tools'.
[...]
The problem with the 'Tools' icon is that I created the 'p' variable as integer not double; with that change it works.
Let me know if you would like that icon re-posted.
No problem, and no need for re-posting the code. According to your explanation, I changed the 'p' variable to a double, and everything is fine.
davido wrote:Am I right to assume that 'basic shapes' can only use a single colour - the current one?
This is true for the currently existing macros. However, you can write macros that have as many parameters for colors as you want.
davido wrote:I made an icon which required a small 'tick' and modified your code to make a macro. I did this 'ere having sight of your specification. It appears to comply.
The icon is called: 'IsProtected' and is a two-tone green shield with a central small 'tick'. I would like to add another called: 'UnProtected' which would be a two-tone red shield with a small central 'X'. As 'X' is often used in icons I would like to make a macro to apply 'X'. If you are happy with the 'Tick' macro, I'll go ahead.
I really like the "IsProtected" icon with its two green tones. It looks very elegant.
davido wrote:

Code: Select all

   Macro Tick(_size_,_x_,_y_,_tsize_,_half_,_hw_)
     ;_size_   : Size of the icon in pixels
     ;_x_, _y_ : Coordinates of the centre of box containing the tick.
     ;_tsize_  : Size of containing box in pixels
     ;_half_   : Half of tsize
     ;_hw_     : Width of the tick - 10% of tsize
     ; [by davido but based on code by Little John]
     
     MovePathCursor( x - half + hw, Y - half + half)
     AddPathLine   ( x - half + half, y - half + tsize - 2*hw)
     AddPathLine   ( x - half + tsize - hw, Y - half + hw)
     StrokePath(2*hw)
   EndMacro
This macro offers a lot of possibilities for improvement, so to say. :-)
For instance, instead of Y - half + half we can simply write Y (same in the next line with x).
According to the explanation in your comments, half equals tsize/2.
So tsize - half is exactly the same as half.
And none of the parameters is used in the macro!
The parameters are _x_, _y_ etc., but in the macro body you are using x, y etc.
The macro works with your IsProtected() procedure, because this procedure has variables named x, y etc.
If anyone else wants to use that macro with another procedure, he is forced to also name his variables x, y etc., otherwise it won't work. Actually, in your macro you can completely do without the parameters, becaused they are not used at all in the body of the macro.

To make a long story short, I have completely rewritten that macro. :-)
Please note that your procedure IsProtected() yields exactly the same results with the new macro as it did with the old macro.
The main difference is, that the new macro is generally usable also by other procedures, independent of the names of their local variables.
Little John
Addict
Addict
Posts: 4784
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 »

Hi Oma,

nice to see you back again! :-)
Oma wrote:@davido
You've set the bar rather high with that one.
I just have to agree.
Thanks to both of you for saying so!
To be honest, setting the bar rather high with that one was actually my intention. :mrgreen:
Oma wrote:@Little John
Congrats for your "AddPathRoundedCorner()", (could be a good pattern for a bugfree AddPathArc()).
Thank you.
You and the other icon creators here demonstrate a lot of creativity, and I'm firmly convinced that creativity should never be hampered. But the bug in AddPathArc() was a considerable hindrance, so I really had the desire to fix that.

Many thanks for updating "Printer1", and for the new "PrinterError1" icon. I've updated the collection accordingly.
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 »

Hi Little John,

Thank you for sorting out my 'tick' fiasco!
You appear to rather busy at the moment and I am sorry to add unnecessarily to it.
Some good has come from it because I certainly could not make the code so neat, compact and professional as you have done.

Currently I generate icons by drawing them onto a 32x32 matrix on paper and then marking the lines and shapes and then convert them to code.
This is why I sometimes forget to add "*p". I'm thinking of doing this on a canvas gadget and then automatically producing the code to Debug. This should eliminate that sort of error.

I have three more icons: Network, Music and Microphone:

Code: Select all

   Declare.i Network (img.i, size.i, color.i)
   Declare.i Music (img.i, size.i, color.i)
   Declare.i Microphone (img.i, size.i, color.i)
   
   
     Procedure.i Network (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)
            AddPathBox(13*p,3*p,6*p,5*p)
            AddPathBox(1*p,20*p,6*p,5*p)
            AddPathBox(13*p,20*p,6*p,5*p)
            AddPathBox(25*p,20*p,6*p,5*p)
            FillPath()
            MovePathCursor(4*p,20*p)
            AddPathLine(4*p,13*p)
            AddPathLine(28*p,13*p)
            AddPathLine(28*p,20*p)
            MovePathCursor(16*p,6*p)
            AddPathLine(16*p,20*p)

            StrokePath(1.5*p)
         Else
            FreeImage(img)
            ret = 0
         EndIf
      EndIf
      
      ProcedureReturn ret
   EndProcedure  
   
   Procedure.i Music (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)
         AddPathEllipse(8*p,26*p,6*p,4*p)
         AddPathEllipse(24*p,22*p,6*p,4*p)
         FillPath()
         MovePathCursor(12.5*p,26*p)
         AddPathLine(12.5*p,6*p)
         AddPathLine(28.5*p,2*p)
         AddPathLine(28.5*p,22*p)
         
         StrokePath(3*p)
       Else
         FreeImage(img)
         ret = 0
       EndIf
     EndIf
     
     ProcedureReturn ret
   EndProcedure 
    
   Procedure.i Microphone (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)
         ;Cradle
         AddPathEllipse(16*p,12*p,9*p,12*p,0,180)
         ;Upright
         MovePathCursor(16*p,23*p)
         AddPathLine(16*p,30*p)
         ;Base
         MovePathCursor(6*p,30*p)
         AddPathLine(26*p,30*p)
         ;Top of cradle
         MovePathCursor(7*p,7*p)
         AddPathLine(7*p,14*p)
         MovePathCursor(25*p,7*p)
         AddPathLine(25*p,14*p)
         StrokePath(3*p)
         ;Microphone
         MovePathCursor(16*p,15*p)
         AddPathLine(16*p,5*p)
         StrokePath(10*p,#PB_Path_RoundEnd)
         ;Joints on cradle
         AddPathBox(3*p,9*p,8*p,3*p)
         AddPathBox(20*p,9*p,8*p,3*p)
         FillPath()
       Else
         FreeImage(img)
         ret = 0
       EndIf
     EndIf
     
     ProcedureReturn ret
   EndProcedure 

   Procedure.i Image (img.i, size.i, color1.i, color2.i, color3.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(color3)
         AddPathBox(1*p,1*p,30*p,30*p)
         StrokePath(5*p)
         VectorSourceColor(color2)
         AddPathCircle(16*p,16*p,8*p)
         FillPath()
         StrokePath(5*p)
       Else
         FreeImage(img)
         ret = 0
       EndIf
     EndIf
     
     ProcedureReturn ret
   EndProcedure 
   
   
      #ImgNetwork
      #ImgMusic
      #ImgMicrophone 
   
      ;, "Network", "Music", "Microphone"
      
      
      
      Network(#ImgNetwork, size, #CSS_Navy)
      Music(#ImgMusic, size, #CSS_Navy)
      Microphone(#ImgMicrophone, size, #CSS_Navy)
      
      
      Network(#ImgNetwork + #IconCount, size, #CSS_Silver)
      Music(#ImgMusic + #IconCount, size, #CSS_Silver)
      Microphone(#ImgMicrophone + #IconCount, size, #CSS_Silver)
      
   
DE AA EB
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 »

Hi Little John,

Here is another icon, with lots of colours, which I call: Picture.

Code: Select all

Declare.i Picture (img.i, size.i, color1.i, color2.i, color3.i, color4.i, color5.i, color6.i)

   Procedure.i Picture (img.i, size.i, color1.i, color2.i, color3.i, color4.i, color5.i, color6.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
     
     p = size / 32
     
     ret = CreateImage(img, size, size, 32, #Background)
     
     If ret
       If img = #PB_Any
         img = ret
       EndIf
       
       If StartVectorDrawing(ImageVectorOutput(img))
         VectorSourceColor(color5)
         AddPathBox(0,0,size,size)
         FillPath()
         VectorSourceColor(color1)
         AddPathBox(2*p,2*p,size-4*p,size-4*p)
         FillPath()
         VectorSourceColor(color2)
         AddPathBox(2*p,16*p,size-4*p,size-18*p)
         FillPath()
         For M = 1 To 8
           VectorSourceColor(color3)
           If M <> 5
             AddPathEllipse(16*p,9*p,3*p,6*p)
           EndIf  
         RotateCoordinates(16*p,15*p,45)
         FillPath()
       Next M
         VectorSourceColor(color6)
         MovePathCursor(16*p,15*p)
         AddPathLine(16*p,30*p)
         StrokePath(2*p)
         VectorSourceColor(color4)
         AddPathCircle(16*p,15*p,4*p)
         FillPath()
       Else
         FreeImage(img)
         ret = 0
       EndIf
     EndIf
     
     ProcedureReturn ret
   EndProcedure  
   
   #ImgPicture
   
   
   ;, "Picture"
   
   
   
   
   Picture(#ImgPicture, size, #CSS_LightBlue, #CSS_LawnGreen,#CSS_Yellow, #CSS_Sienna, #CSS_WhiteSmoke,#CSS_DarkGreen)
   Picture(#ImgPicture + #IconCount, size, #CSS_LightGrey, #CSS_Silver,#CSS_DarkGrey, #CSS_Black, #CSS_WhiteSmoke, #CSS_Black)
DE AA EB
Little John
Addict
Addict
Posts: 4784
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 »

Hi davido,

thank your for your icons "Network", "Music", and "Microphone" which I've just added to the collection.

The other current changes:
  • added a parameter for rotation angle to macro "DrawFivePointedStar"
  • added private macros "DrawPlus" and "DrawMinus", and changed procedures "Add" and "Sub" accordingly
  • added icons "Wizard", "Alarm1", and "Alarm2"
  • added some missing StopVectorDrawing() commands
  • some minor changes
I just saw your most recent post with your "Picture" icon. I'm going to include this in the next update, of course.
Yes, I'm rather busy at the moment, and I currently can't post here every day. Thank you for your patience!
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 »

Hi Little John,

Thank you for all the changes and improvements.
I found you 'Plus' Macro useful to make an 'X' by rotation.
I have started an icon that required smaller stars. Thank you for making that easier.

I'd also like to make a couple of suggestions:
1. For my own purposes I made a small amendment to your Five Pointed Star Macro by adding another parameter, '_Order_' for the number of 'points'. I also replaced '36' by 180 / _Order_ . It is possible that 6 or 7 pointed stars may be useful.
2. Would it help to place the colour definitions between ;{ ... ;} fold keywords?

I would like to add two more icons: Unprotected1 & Unprotected2.

Code: Select all

Declare.i UnProtected1 (img.i, size.i, color1.i, color2.i, color3.i)
Declare.i UnProtected2 (img.i, size.i, color1.i, color2.i, color3.i)

Procedure.i UnProtected1 (img.i, size.i, color1.i, color2.i, color3.i)
  ; in : img   : number of the image which is to be created, or #PB_Any
  ;      size  : width and height (number of pixels)
  ;      color1: foreground color #1
  ;      color2: foreground color #2
  ;      color3: foreground color #3
  ; out: return value: if img = #Pb_Any => number of the created image,
  ;                    error => 0
  ; [by davido]
  Protected ret.i, p.d, x.d, y.d, half.d, hw.d
  
  p = size / 32
  x = size / 2
  y = size / 2
  half = size / 6
  hw = size / 30
  
  ret = CreateImage(img, size, size, 32, #Background)
  
  If ret
    If img = #PB_Any
      img = ret
    EndIf
    
    If StartVectorDrawing(ImageVectorOutput(img))
      ; Left-hand side of shield
      VectorSourceColor(color1)
      AddPathEllipse(16*p, 16*p, 10*p, 12*p, 90, 270)
      ClosePath()
      FillPath()
      MovePathCursor(6*p, 16*p)
      AddPathLine( 6*p,  6*p)
      AddPathLine(16*p,  2*p)
      AddPathLine(16*p, 16*p)
      ClosePath()
      FillPath()
      
      ; Right-hand side of shield
      VectorSourceColor(color2)
      AddPathEllipse(16*p, 16*p, 10*p, 12*p, 270, 90)
      ClosePath()
      FillPath()
      MovePathCursor(26*p, 16*p)
      AddPathLine(26*p,  6*p)
      AddPathLine(16*p,  2*p)
      AddPathLine(16*p, 16*p)
      ClosePath()
      FillPath()
      
      ; Central exclamation mark
      VectorSourceColor(color3)
      MovePathCursor(14 * p, 10 * p)
      AddPathLine(16 * p, 20 * p)
      AddPathLine(18 * p, 10 * p)
      ClosePath()
      FillPath()
      AddPathCircle(16 * p, 10 * p, 2 * p)
      
      AddPathCircle(16 * p, 22 * p, 1.5 * p)
      FillPath()
    Else
      FreeImage(img)
      ret = 0
    EndIf
  EndIf
  
  ProcedureReturn ret
EndProcedure

Procedure.i UnProtected2 (img.i, size.i, color1.i, color2.i, color3.i)
  ; in : img   : number of the image which is to be created, or #PB_Any
  ;      size  : width and height (number of pixels)
  ;      color1: foreground color #1
  ;      color2: foreground color #2
  ;      color3: foreground color #3
  ; out: return value: if img = #Pb_Any => number of the created image,
  ;                    error => 0
  ; [by davido]
  Protected ret.i, p.d, x.d, y.d, half.d, hw.d
  
  p = size / 32
  x = size / 2
  y = size / 2
  half = size / 6
  hw = size / 30
  
  ret = CreateImage(img, size, size, 32, #Background)
  
  If ret
    If img = #PB_Any
      img = ret
    EndIf
    
    If StartVectorDrawing(ImageVectorOutput(img))
      ; Left-hand side of shield
      VectorSourceColor(color1)
      AddPathEllipse(16*p, 16*p, 10*p, 12*p, 90, 270)
      ClosePath()
      FillPath()
      MovePathCursor(6*p, 16*p)
      AddPathLine( 6*p,  6*p)
      AddPathLine(16*p,  2*p)
      AddPathLine(16*p, 16*p)
      ClosePath()
      FillPath()
      
      ; Right-hand side of shield
      VectorSourceColor(color2)
      AddPathEllipse(16*p, 16*p, 10*p, 12*p, 270, 90)
      ClosePath()
      FillPath()
      MovePathCursor(26*p, 16*p)
      AddPathLine(26*p,  6*p)
      AddPathLine(16*p,  2*p)
      AddPathLine(16*p, 16*p)
      ClosePath()
      FillPath()
      
      ;Draw central X
      VectorSourceColor(color3)
      RotateCoordinates(size * 0.5,size * 0.5,45)
      DrawPlus(size * 0.5,size * 0.5,size * 0.2,size / 20)
      
    Else
      FreeImage(img)
      ret = 0
    EndIf
  EndIf
  
  ProcedureReturn ret
EndProcedure 

#ImgUnProtected1
#ImgUnProtected2

;, "UnProtected1", "UnProtected2"

UnProtected1(#ImgUnProtected1, size, #CSS_Red, #VI_GuardsmanRed, #CSS_Black)
UnProtected2(#ImgUnProtected2, size, #CSS_Red, #VI_GuardsmanRed, #CSS_Black)


UnProtected1(#ImgUnProtected1 + #IconCount, size, #CSS_Silver, #CSS_DimGrey, #CSS_WhiteSmoke)
UnProtected2(#ImgUnProtected2 + #IconCount, size, #CSS_Silver, #CSS_DimGrey, #CSS_WhiteSmoke)



DE AA EB
Little John
Addict
Addict
Posts: 4784
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 »

Hi davido!
davido wrote:1. For my own purposes I made a small amendment to your Five Pointed Star Macro by adding another parameter, '_Order_' for the number of 'points'. I also replaced '36' by 180 / _Order_ . It is possible that 6 or 7 pointed stars may be useful.
I also thought of this, but I was not sure whether it is actually needed. Now I know. :-) I changed the macro accordingly.
davido wrote:2. Would it help to place the colour definitions between ;{ ... ;} fold keywords?
Done.
davido wrote:I would like to add two more icons: Unprotected1 & Unprotected2.
Thank you! But please don't forget the StopVectorDrawing() command. :-)
And maybe you can remove unused variables from the code before posting it?


These are the current changes:
  • Created an additional module named "VDrawTools", where the procedure AddPathRoundedCorner() and the macro AddPathArc() are now located.
  • Added possibilities for code folding at some locations.
  • Renamed the macro "DrawFivePointedStar()" to "DrawStar()", and changed it so that it can also create stars with any other number of points, by means of an additional (optional) parameter.
  • Added icons "UnProtected1", "UnProtected2", and "Picture" by davido.
User avatar
Tenaja
Addict
Addict
Posts: 1959
Joined: Tue Nov 09, 2010 10:15 pm

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

Post by Tenaja »

Here's a thought...not to try to add workload to you...

Instead of a brand new procedure for every icon, why not just one, and the icons are just a data set with x,y paths and other relevant data?
User avatar
Sicro
Enthusiast
Enthusiast
Posts: 560
Joined: Wed Jun 25, 2014 5:25 pm
Location: Germany
Contact:

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

Post by Sicro »

I am not a good designer, so I'm glad that there are people who create a collection of icons free for use. Thank you all! 8)
Image
Why OpenSource should have a license :: PB-CodeArchiv-Rebirth :: Pleasant-Dark (syntax color scheme) :: RegEx-Engine (compiles RegExes to NFA/DFA)
Manjaro Xfce x64 (Main system) :: Windows 10 Home (VirtualBox) :: Newest PureBasic version
Little John
Addict
Addict
Posts: 4784
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 »

Tenaja wrote:Here's a thought...not to try to add workload to you...

Instead of a brand new procedure for every icon, why not just one, and the icons are just a data set with x,y paths and other relevant data?
Of course, I have also thought of that ...
I have already started writing code that takes strings with icon definitions as input (in a syntax similar to the one of SVG), and then creates icons from them. This could only be a replacement for the current way of creating icons, if it would offer all possibilities that we have now. So it's not clear if and when such a replacement is going to happen. As a first step, that code will provide an alternative for creating icons in some cases. However, I don't know when it will be ready for release.
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 »

Hi Little John,

I have another four icons: Bug, Debug, Crop and ReSize2.

Code: Select all

Declare.i Bug (img.i, size.i, color1.i, color2.i)
Declare.i DBug (img.i, size.i, color1.i, color2.i, color3.i)
Declare.i Crop (img.i, size.i, color1.i)
Declare.i ReSize2 (img.i, size.i, color1.i, color2.i)


Procedure.i Bug (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)
  ;      color1: foreground color #1
  ;      color2: foreground color #2
  ; 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))
      ; Body of bug
      SaveVectorState()
      RotateCoordinates(16*p,16*p,-45)
      VectorSourceColor(color1)
      AddPathEllipse(9*p, 16*p, 12*p, 8*p)
      FillPath()
      ; Head of bug
      RestoreVectorState()
      RotateCoordinates(16*p,16*p,-45)
      VectorSourceColor(color2)
      AddPathEllipse(23*p, 16*p, 4*p, 5*p)
      FillPath()
      ; Antenae
      ResetCoordinates()
      MovePathCursor(19*p,12*p)
      AddPathLine(19*p,1.5*p)
      MovePathCursor(19*p,12*p)
      AddPathLine(30*p,12*p)
      StrokePath(0.3*p)
      AddPathCircle(30*p,12*p,p)
      AddPathCircle(19*p,2*p,p)
      FillPath()
      ; Spots
      AddPathCircle(16*p,19*p,2*p)
      AddPathCircle(11*p,16*p,2*p)
      AddPathCircle(5*p,20*p,2*p)
      AddPathCircle(14*p,25*p,2*p)
      AddPathCircle(7*p,28*p,2*p)
      FillPath()
      ; Between wings
      MovePathCursor(22.5*p,9*p)
      AddPathLine(2.5*p,29.25*p)
      StrokePath(0.25 * p)
      
      StopVectorDrawing()
    Else
      FreeImage(img)
      ret = 0
    EndIf
  EndIf
  
  ProcedureReturn ret
EndProcedure

Procedure.i DBug (img.i, size.i, color1.i, color2.i, color3.i)
  ; in : img   : number of the image which is to be created, or #PB_Any
  ;      size  : width and height (number of pixels)
  ;      color1: foreground color #1
  ;      color2: foreground color #2
  ;      color3: foreground color #3
  ; 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))
      ; Body of bug
      SaveVectorState()
      RotateCoordinates(16*p,16*p,-45)
      VectorSourceColor(color1)
      AddPathEllipse(9*p, 16*p, 12*p, 8*p)
      FillPath()
      ; Head of bug
      RestoreVectorState()
      RotateCoordinates(16*p,16*p,-45)
      VectorSourceColor(color2)
      AddPathEllipse(23*p, 16*p, 4*p, 5*p)
      FillPath()
      ; Antenae
      ResetCoordinates()
      MovePathCursor(19*p,12*p)
      AddPathLine(19*p,1.5*p)
      MovePathCursor(19*p,12*p)
      AddPathLine(30*p,12*p)
      StrokePath(0.3*p)
      AddPathCircle(30*p,12*p,p)
      AddPathCircle(19*p,2*p,p)
      FillPath()
      ; Spots
      AddPathCircle(16*p,19*p,2*p)
      AddPathCircle(11*p,16*p,2*p)
      AddPathCircle(5*p,20*p,2*p)
      AddPathCircle(11*p,27*p,2*p)
      AddPathCircle(3.5*p,25*p,2*p)
      FillPath()
      ; Between wings
      MovePathCursor(22.5*p,9*p)
      AddPathLine(2.5*p,29.25*p)
      StrokePath(0.25 * p)
      ; Red cross
      VectorSourceColor(color3)
      RotateCoordinates(16*p,16*p,45)
      DrawPlus(16*p,16*p,size * 0.5,3*p)
      StopVectorDrawing()
    Else
      FreeImage(img)
      ret = 0
    EndIf
  EndIf
  
  ProcedureReturn ret
EndProcedure 

Procedure.i Crop (img.i, size.i, color1.i)
  ; in : img   : number of the image which is to be created, or #PB_Any
  ;      size  : width and height (number of pixels)
  ;      color1: foreground color #1
  ; 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))
      MovePathCursor(8*p,2*p)
      AddPathLine(8*p,24.5*p)
      AddPathLine(30.5*p,24.5*p)
      MovePathCursor(24.5*p,30.5*p)
      AddPathLine(24.5*p,8*p)
      AddPathLine(2*p,8*p)
      StrokePath(2*p)
      
      StopVectorDrawing()
    Else
      FreeImage(img)
      ret = 0
    EndIf
  EndIf
  
  ProcedureReturn ret
EndProcedure   




Procedure.i ReSize2 (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)
  ;      color1: foreground color #1
  ;      color2: foreground color #2
  ; out: return value: if img = #Pb_Any => number of the created image,
  ;                    error => 0
  ; [by davido]
  Protected ret.i, p.d, k.i
  
  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)
      MovePathCursor(16*p,26*p)
      AddPathLine(2*p,26*p)
      AddPathLine(2*p,2*p)
      AddPathLine(26*p,2*p)
      AddPathLine(26*p,16*p)
      AddPathBox(16.5*p,16.5*p,15*p,15*p)
      StrokePath(p)
      VectorSourceColor(color2)
      DrawStar(12*p,12*p,6*p,0,6)
      StrokePath(P)
      DrawStar(22*p,22*p,3.25*p,0,6)
      StrokePath(0.6*P)
      
      StopVectorDrawing()
    Else
      FreeImage(img)
      ret = 0
    EndIf
  EndIf
  
  ProcedureReturn ret
EndProcedure  

#ImgBug
#ImgDbug
#ImgCrop
#ImgReSize2


, "Bug", "Debug", "Crop", "ReSize2"


Bug(#ImgBug, size, #CSS_Orange, #CSS_Black)
DBug(#ImgDBug, size, #CSS_Orange, #CSS_Black, #CSS_Red)
Crop(#ImgCrop, size, #CSS_Navy)
ReSize2(#ImgReSize2, size, #CSS_Navy,#CSS_Blue)

Bug(#ImgBug + #IconCount, size,  #CSS_Silver, #CSS_DimGrey)
DBug(#ImgDBug + #IconCount, size,  #CSS_Silver, #CSS_DimGrey, #CSS_WhiteSmoke)
Crop(#ImgCrop + #IconCount, size, #CSS_Silver)
ReSize2(#ImgReSize2 + #IconCount, size, #CSS_DimGrey,#CSS_WhiteSmoke)

DE AA EB
User avatar
Tenaja
Addict
Addict
Posts: 1959
Joined: Tue Nov 09, 2010 10:15 pm

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

Post by Tenaja »

Little John wrote:
Tenaja wrote:Here's a thought...not to try to add workload to you...

Instead of a brand new procedure for every icon, why not just one, and the icons are just a data set with x,y paths and other relevant data?
Of course, I have also thought of that ...
I have already started writing code that takes strings with icon definitions as input (in a syntax similar to the one of SVG), and then creates icons from them. This could only be a replacement for the current way of creating icons, if it would offer all possibilities that we have now. So it's not clear if and when such a replacement is going to happen. As a first step, that code will provide an alternative for creating icons in some cases. However, I don't know when it will be ready for release.
Well, you could compromise, and make one that handles "most" icons (or simple ones), or make several that handle various situations. As long as we could decipher which one to use, it wouldn't be too bad.

I like the SVG idea.
Post Reply