-
Apr 8th, 2017, 12:48 PM
#1
FontAwesome-SVG-Resources (per vbRichClient5)
Posted, due to a request in this related thread here (the nice Firenze-Label-Project by porkynet):
http://www.vbforums.com/showthread.p...many-functions
Those who are doing some Web-Development (besides writing VB6-Apps) might already be familiar
with the FontAwesome-Project (which encapsulates about 700 Flat-Icons inside a Font-Resource).
http://fontawesome.io/icons/
Encapsulating these Icons in a (downloadable Web-)Font-Resource eases some pain, e.g. when it comes to
defining CSS-classes or -contents or when dealing with a lot of Flat-Icons in JavaScript whilst writing Browser-Apps.
(mostly by avoiding the somewhat more complicated fiddling with Image- or SVG-resources, which when hosted
*separately* on a WebServer behind an /img/-folder also increases download-time of the whole WebApp into the Browser).
That much as an explanation, on why these 700 Icons are sitting within a Font-Resource (which one has to download into the Browser only once).
Though the "Image-Paths" (the Vector-definitions as "curves" or "outlines") of these Flat-Icons are also available as SVGs -
hosted on a GitHub-Project-Space here:
https://github.com/encharm/Font-Awesome-SVG-PNG (the license being MIT, which is also a bit more generous than
the one used for the FontFiles-downloads from http://fontawesome.io).
Since the RC5 comes with SVG-rendering-support, one can use these Icons also "directly from an SVG" -
thus avoiding to have to install a FontFile in the Windows-Fonts-Folder, which requires Admin-Rights (avoiding
an additional hurdle for "regfree deployment of an Application").
Instead all the SVGs are "bundled" within a compressed RC5-Resource-Archive (usually given the file-ending *.wac) -
and the contents of such *.wac-files can of course also be embedded directly into the *.exe of *.dll as normal "ByteArray-resources".
This way an Application can make use of FontAwesome-Icons whilst remaining "XCopy-deployable".
The Demo itself is not complicated - the Code in a normal VB6-Form quite lean:
Code:
Option Explicit
Private FA As New cFontAwesomeSVG, WithEvents ColorChooser As cwColorChooser
Private Sub Form_Load()
Set ColorChooser = ucPanel1.Widgets.Add(New cwColorChooser, "ColorChooser", 0, 0, 258, 258)
Dim Key
For Each Key In Split(FA.KeyList, vbCrLf): lstKeys.AddItem Key: Next
lstKeys.ListIndex = 0
End Sub
Private Sub ColorChooser_ColorChanged()
RenderCurrentSymbol 'force a refresh
End Sub
Private Sub lstKeys_Click()
RenderCurrentSymbol 'force a refresh
End Sub
Private Sub RenderCurrentSymbol()
Set picPreview.Picture = FA.GetPicture(lstKeys.Text, ColorChooser.Color, 256, 256)
End Sub
Private Sub Form_Terminate()
If Forms.Count = 0 Then New_c.CleanupRichClientDll
End Sub
Producing this output:
The work in the above code is done by an accompanying little Helper-Class, which is able to hand
out all the "Friendly-Name-Keys" which are contained in the _FontAwesomeSVGs.wac Resource-Archive
(in the ScreenShot above these Keys were filled into a normal VB-ListBox).
And then in the List_Click()-Event one can directly render any of these Icon-Symbols per:
Code:
Set picPreview.Picture = FA.GetPicture(lstKeys.Text, ColorChooser.Color, 256, 256)
or alternatively (when there's an interest in keeping the Alpha-Channel) also per:
Code:
FA.GetSurface( strSomeSymbolKey, SomeForeColor, DesiredWidth, DesiredHeight)
The above FA is an instance of the already mentioned Helper-Class cFontAwesomeSVG,
which deals with loading the Resource-Archive into Memory - and offering access to the contained Images.
What the Demo also shows at the occasion is, how to use RC5-WidgetClasses within the realm of a
"normal VB6-Form" (instead of hosting these new Control-Classes on a cWidgetForm-Class, as in other RC5-Demos).
The Demo-Widget-Class which is used as a vehicle to demonstrate that (in conjunction with a generic ucPanel.ctl)
is cwColorChooser (the circular Color-Selector-Control in the BottomRIght-Corner of the ScreenShot).
Well, that was it already with regards to an easy way to use FontAwesome-Symbols (or other SVGs)
from within a single compressed Resource-Archive.
Here is the Zipped Demo-Project (including the 126KB FontAwesome-Archive along with its MIT-license-file):
FontAwesomeSVG.zip
(note that these SVGs require a vbRichClient5-version >= 5.0.59 to be rendered correctly, so download and
update your RC5-Baselibs-Folder accordingly before running the project).
Have fun,
Olaf
Last edited by Schmidt; Jan 28th, 2022 at 07:09 PM.
-
Apr 8th, 2017, 01:40 PM
#2
Hyperactive Member
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Thank you
-
Apr 8th, 2017, 06:34 PM
#3
Addicted Member
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Set Lst = New_c.ArrayList(vbLong, vbRed, vbYellow, vbGreen, vbCyan, vbBlue, vbMagenta, vbRed)
This Line Type mismatch error.
-
Apr 8th, 2017, 07:41 PM
#4
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Originally Posted by ChenLin
Set Lst = New_c.ArrayList(vbLong, vbRed, vbYellow, vbGreen, vbCyan, vbBlue, vbMagenta, vbRed)
This Line Type mismatch error.
Seems that your current vbRichClient5.dll does not contain (or support the correct type of) cArrayList...
Did you install the latest version of the RC5-libs from vbRichClient.com first (as suggested at the end of my Opener-Post)?
cArrayList was introduced in version 5.02 - but then updated a few times, so the ClsID of that class might be different in your RC5-version.
Though the newest version 5.0.59 of the RC5 is needed anyways (since I've fixed a few issues with SVG-rendering there,
... the SVG-path-nodes of the SVGs in the FontAwesome-set were using some of the seldom used path-commands).
So please
- close all VB6-IDE-instances which might have a reference to the RC5-lib
- download the latest libraries
- copy them from the Zip into a central location on your developer-machine (overwriting the old version, if you have a Folder for it already)
- use the little _RegisterInPlace... Scripts, to put their current TypeLib-entries into the Registry of your Developer-machine
- restart the Demo-Project
- maybe before starting it, check for the TypeLib-version of the RC5 in "FontAwesomeSVG.vbp" (it should be: Reference=*\G{C79C91A4-10F5-4F71-A490-3B7915514344}#2.6#0#)
Please let me know, whether that helped...
Olaf
Last edited by Schmidt; Apr 8th, 2017 at 07:44 PM.
-
Apr 9th, 2017, 07:55 PM
#5
Addicted Member
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Download the new version and use the script RegisterRC5inPlace.vbs (this must be) after the registration solution
-
Apr 19th, 2017, 09:28 AM
#6
Hyperactive Member
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Hi Olaf,
As you know I can't work with bytearrays on my side, so I made a small function within VB6 to get a StdPicture from a SVG source (stored in a database)
Code:
Public Function GetPicture(ByVal Width As Long, ByVal Height As Long, ByVal CairoSurfaceType As Long, Field As cField, Optional ByVal Color As Long) As StdPicture
Dim Surface As cCairoSurface
Set Surface = Cairo.CreateSurface(Width, Height, CairoSurfaceType, Field.Value)
If Not IsMissing(Color) Then
Dim Context As cCairoContext
Set Context = Surface.CreateContext
Context.AntiAlias = CAIRO_ANTIALIAS_SUBPIXEL
Context.SetSourceColor Color
Context.MaskSurface Surface
Set Surface = Context.Surface
End If
Set GetPicture = Surface.Picture
End Function
It works, but the resulting image doesn't seem antialiased. Width and Height are passed as 32x32
Is there anything I can do inside cairo?
-
Apr 20th, 2017, 12:27 AM
#7
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Below is the revised routine (the comments explaining, what led to the improvement):
Code:
Public Function GetPicture(ByVal Width&, ByVal Height&, ByVal Color&, Optional ByVal BackColor As Long = vbWhite) As StdPicture
Dim Surface As cCairoSurface
Set Surface = Cairo.CreateSurface(Width, Height, 0, New_c.FSO.ReadByteContent(App.Path & "\SVGs\at.svg"))
'one shouldn't mask a given Surface with itself, so we create a new, separate one below
With Cairo.CreateSurface(Width, Height).CreateContext
.SetSourceColor BackColor: .Paint 'ensure a BackColor (a BackGround) on the new Surface first, before the masking-call
.SetSourceColor Color 'set the "Stamp-ForeColor" for the Masking
.MaskSurface Surface, 0.15, 0.15 'on some images, a small SubPixel-Offset can improve the rendered output
Set Surface = .Surface
End With
Set GetPicture = Surface.Picture
End Function
HTH
Olaf
-
Apr 20th, 2017, 07:04 AM
#8
Hyperactive Member
Re: FontAwesome-SVG-Resources (per vbRichClient5)
I think I understand your explanation, but as I need the Color to be optional I changed my function to
Code:
Public Function GetPicture(ByVal Width As Long, ByVal Height As Long, _
ByVal CairoSurfaceType As Long, Field As cField, _
Optional ByVal Color As Long, _
Optional ByVal BackColor As Long = vbWhite) As StdPicture
Dim Surface As cCairoSurface
Set Surface = Cairo.CreateSurface(Width, Height, CairoSurfaceType, Field.Value)
If Not IsMissing(Color) Then
Dim Context As cCairoContext
Set Context = Cairo.CreateSurface(Width, Height).CreateContext
Context.SetSourceColor BackColor
Context.Paint
Context.SetSourceColor Color
Context.MaskSurface Surface, 0.15, 0.15
Set Surface = Context.Surface
End If
Set GetPicture = Surface.Picture
End Function
and now I'm getting this
EDIT: It works after defining Alpha = 0 for the BackColor . The result is not perfect but it's a lot better than my initial approach. Thanks
Last edited by Carlos Rocha; Apr 20th, 2017 at 08:53 AM.
Carlos
-
Apr 20th, 2017, 02:49 PM
#9
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Well, it seems like your environment can (at least partially) deal with the 32bpp (premultiplied)
content of the returned StdPicture from the Surface.Picture Property...
In VB6 (which handles this content always like a 24bpp-DIB with no Alpha-Channel) this
would result in always a black-background.
What you currently do (when setting Alpha = 0 for the BackColor), is leaving out the BackColor
completely.
Meaning, your Routine would work the same when you'd leave out setting the BackColor:
Code:
Public Function GetPicture(ByVal Width As Long, ByVal Height As Long, _
ByVal CairoSurfaceType As Long, Field As cField, _
Optional ByVal Color As Long, _
Optional ByVal BackColor As Long = vbWhite) As StdPicture
Dim Surface As cCairoSurface
Set Surface = Cairo.CreateSurface(Width, Height, CairoSurfaceType, Field.Value)
If Not IsMissing(Color) Then
Dim Context As cCairoContext
Set Context = Cairo.CreateSurface(Width, Height).CreateContext
'Context.SetSourceColor BackColor, 0
'Context.Paint
Context.SetSourceColor Color
Context.MaskSurface Surface, 0.15, 0.15
Set Surface = Context.Surface
End If
Set GetPicture = Surface.Picture
End Function
That it looks slightly better this way is because you now still avoid the "Double-Masking"
(MaskSurface on MaskSurface, which was weakening or "nearly eliminating" the Alpha-Effects on the outer Borders of the Path)
by creating a separate Target-Surface now...
If you want to avoid any rendering-errors (from using Surface.Pictures) - you could
construct the larger Host-Area (the one with the dark-blue BackGround) as a Cairo-Surface -
and then render your Symbols and Text onto it (all yet without any StdPictures) -
and only after you have finished the whole BackGround-Surface (including the Icons on Top),
you return it as a StdPicture and place it in the Container as a whole.
That should work better then, with proper Antialised-Effects (which depend on correct Alpha-handling).
If your Container already does have a CairContext to offer, then you'd have it easier - and could
just pass the Context into the Icon-RenderRoutine (with two Params for the x,y-Offset).
Olaf
-
Apr 20th, 2017, 03:59 PM
#10
Hyperactive Member
Re: FontAwesome-SVG-Resources (per vbRichClient5)
The container is a Codejock's TaskPanel.
I guess it's time to replace it with a cWidgetForm, or maybe your cwAcordeon.
I'll try to mimic what I have now and hopefully wont need to bother you too much.
-
Apr 20th, 2017, 04:51 PM
#11
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Originally Posted by Carlos Rocha
The container is a Codejock's TaskPanel.
I guess it's time to replace it with a cWidgetForm, or maybe your cwAcordeon.
I'll try to mimic what I have now and hopefully wont need to bother you too much.
Hmm, you can avoid "writing a replacement" for the Codejock-TaskPanel, when:
- that TaskPanel always has a solid BackColor (and not a BackGround-Image)
- it allows access to its current BackColor over a Property
Then you should get proper antialiased results, when you change your Routine back to
allowing a solid BackColor:
... Context.SetSourceColor BackColor, 1 '<- use a solid BackColor with full Opacity
... Context.Paint
And then pass the TaskPanel.BackColor into the Icon-Render-Routine:
Set TaskPanel.Items(...).Image = GetPicture(32, 32, 0, DBField, SomeForeColor, TaskPanel.BackColor)
Olaf
-
Apr 20th, 2017, 05:26 PM
#12
Hyperactive Member
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Originally Posted by Schmidt
Hmm, you can avoid "writing a replacement" for the Codejock-TaskPanel, when:
- that TaskPanel always has a solid BackColor (and not a BackGround-Image)
- it allows access to its current BackColor over a Property
Then you should get proper antialiased results, when you change your Routine back to
allowing a solid BackColor:
... Context.SetSourceColor BackColor, 1 '<- use a solid BackColor with full Opacity
... Context.Paint
And then pass the TaskPanel.BackColor into the Icon-Render-Routine:
Set TaskPanel.Items(...).Image = GetPicture(32, 32, 0, DBField, SomeForeColor, TaskPanel.BackColor)
Olaf
I already tried that and the antialiased was good, but the panel has a hover effect that changes the background color. Besides, one advantage of using SVGs is to able to scale them to any size without loosing quality, and for that I need your cWidgetForms, right?
Anyway, as I intend to move every UI element to cairo this could be a good starting point.
For image resources like these, CAIRO_ANTIALIAS_GRAY will probably yield better results.
I can't see any difference but thanks for the info.
-
Oct 12th, 2018, 09:45 AM
#13
New Member
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Originally Posted by Schmidt
Hmm, you can avoid "writing a replacement" for the Codejock-TaskPanel, when:
- that TaskPanel always has a solid BackColor (and not a BackGround-Image)
- it allows access to its current BackColor over a Property
Then you should get proper antialiased results, when you change your Routine back to
allowing a solid BackColor:
... Context.SetSourceColor BackColor, 1 '<- use a solid BackColor with full Opacity
... Context.Paint
And then pass the TaskPanel.BackColor into the Icon-Render-Routine:
Set TaskPanel.Items(...).Image = GetPicture(32, 32, 0, DBField, SomeForeColor, TaskPanel.BackColor)
Olaf
how can i make svg icon transparent background
-
Oct 13th, 2018, 04:39 AM
#14
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Originally Posted by daizu
how can i make svg icon transparent background
Your question is not really clear to me (regarding your wording)...
... If you really want to *make* (create) an SVG-Icon, you can do that with the RC5-CairoWrapper-classes
(issuing your own drawing-commands on an SVG-Surface-Object, then writing the result from there (as an *.svg-File) to disk.
If instead you meant, how to *render* an (existing) SVG-Icon (in the context of this FontAwesome-WrapperClass) ...
in that case - I wrote already in Post #1 how to do that...:
Code:
Dim SvgIco As cCairoSurface
Set SvgIco = FA.GetSurface(strSomeSymbolKey, SomeForeColor, DesiredWidth, DesiredHeight)
The above SvgIco-SurfaceObj will now contain the FontAwesome-Icon in a certain ForeColor (and a certain size) -
and *without* any BackColor (CairoSurface-Objects are fully "Alpha-capable").
How you render from that SvgIco-Object (of type cCairoSurface) onto some "target" -
entirely depends on the type of target, which for example could be:
- another Cairo-Surface (ideally)
- a Windows-GDI hDC
- a StdPicture-hosting-Container (as e.g. a VB-Form or a VB-PictureBox)
So, what is the target in your case - and what is the BackGround of that target (solid Color or "variable Color - as in an ImageBackGround")?
Olaf
-
Apr 20th, 2017, 04:09 PM
#15
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Apologies for jumping in mid-conversation (maybe I didn't read closely and this was already covered), but for image resources, you almost never want to use CAIRO_ANTIALIAS_SUBPIXEL, as used in post #6. That is designed for white-on-black or black-on-white text, where glyph sharpness is at a premium over color details.
For image resources like these, CAIRO_ANTIALIAS_GRAY will probably yield better results.
(Cool project, btw. Thanks, Olaf!)
-
Jan 26th, 2021, 06:06 PM
#16
Re: FontAwesome-SVG-Resources (per vbRichClient5)
how to support svg like gif?
more picture,times set,size set?
pic1:width,height=50,80,letfop=222,picname,
TIME INTERVAL=500ms。
-
Jan 31st, 2021, 03:25 AM
#17
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Originally Posted by xiaoyao
how to support svg like gif?
Not sure, what you mean - but in case it shall behave like a gif-animation -
you could just group the svg-files which make up an animation-sequence,
within a separate Resource-Folder (for each group of svg-files) - and then
storing the whole animation-folder in a cWebArchive-ClassInstance.
Olaf
-
Feb 7th, 2022, 09:51 AM
#18
Lively Member
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Hello Olaf! Ask: How to use FontAwesome-SVG-Resources as ToolBar icon.
Thank you so much!
-
Feb 7th, 2022, 06:20 PM
#19
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Originally Posted by smileyoufu
Hello Olaf! Ask: How to use FontAwesome-SVG-Resources as ToolBar icon.
Thank you so much!
In case of an RC6-Toolbar-Widget, you can use the returned Surface from: FC.GetSurface(...) directly.
In case of a "classic" ToolBar, these usually get their Images via an ImageList-Control ...
(as e.g. the Toolbar- and ImageList-Controls in Krools CC-replacment-project).
IIRC, there should be an ImageList.Add... method, which allows the adding of new Resources as hIcon-Handles.
And such a hIcon-Handle can be derived from *any* cairo-image-surface via:
Cairo.CreateIconFromSurface(SomeSurface) As Long '<- generates a 32bpp Alpha-hIcon from the Surface-content
HTH
Olaf
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|