-
1 Attachment(s)
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:
https://www.vbforums.com/images/ieimages/2017/04/2.png
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):
Attachment 146513
(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
-
Re: FontAwesome-SVG-Resources (per vbRichClient5)
-
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Set Lst = New_c.ArrayList(vbLong, vbRed, vbYellow, vbGreen, vbCyan, vbBlue, vbMagenta, vbRed)
This Line Type mismatch error.
-
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Quote:
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
-
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Download the new version and use the script RegisterRC5inPlace.vbs (this must be) after the registration solution
-
1 Attachment(s)
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
Attachment 146825
Is there anything I can do inside cairo?
-
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Below is the revised routine (the comments explaining, what led to the improvement):
http://vbRichClient.com/Downloads/AntialisingTest.png
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
-
1 Attachment(s)
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
Attachment 146867
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
-
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
-
1 Attachment(s)
Re: FontAwesome-SVG-Resources (per vbRichClient5)
The container is a Codejock's TaskPanel.
Attachment 146883
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.
-
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!)
-
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Quote:
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
-
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Quote:
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.
Quote:
For image resources like these, CAIRO_ANTIALIAS_GRAY will probably yield better results.
I can't see any difference but thanks for the info.
-
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Quote:
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
-
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Quote:
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
-
Re: FontAwesome-SVG-Resources (per vbRichClient5)
@Olaf, I hope you can help me with this one.
I'm still using the same CJ TaskPanel with svg icons from FontAwesome. I have an integer field in a sqlite table where a store the colors to paint the icons.
Now I want to change the color in some of them so I calculate the new value from RGB, but the color that I get is not the pretended one - eg, using rgb(255,0,0) I get blue.
I guess the colors that I have stored didn't came from RGB but I don't remember how they was calculated at the time.
-
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Quote:
Originally Posted by
Carlos Rocha
@Olaf, I hope you can help me with this one.
I'm still using the same CJ TaskPanel with svg icons from FontAwesome. I have an integer field in a sqlite table where a store the colors to paint the icons.
Now I want to change the color in some of them so I calculate the new value from RGB, but the color that I get is not the pretended one - eg, using rgb(255,0,0) I get blue.
I guess the colors that I have stored didn't came from RGB but I don't remember how they was calculated at the time.
Never mind, I found it. I used your color selector to find that number :blush:
-
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Quote:
Originally Posted by
Carlos Rocha
Never mind, I found it. I used your color selector to find that number :blush:
How can I change the function GetPicture to accept the color as a long RGB?
Thanks
-
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Quote:
Originally Posted by
Carlos Rocha
How can I change the function GetPicture to accept the color as a long RGB?
I guess the RGB-function in your language of choice (still "Visual Objects", I assume) is not compatible to VBA.RGB(...)?
The VB6/VBA RGB() produces a Long with a (little-endian) Byte-Order of R, G and B Bytes.
meaning, the immediate-Window-Output of: ?Hex(VBA.RGB(1, 2, 3))
would be: 030201 (the least significant "red-byte" to the right of the hex-string - and blue to the left)
I know that in a few other languages the RGB-Function puts out a BGR-ByteOrder instead...
(a right-aligned Hex-String, according to the above example - would then contain: 010203) -
so you would just have to swap the red and the blue-byte (within the returned Int32), to correct for that.
HTH
Olaf
-
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Quote:
Originally Posted by
Schmidt
I guess the RGB-function in your language of choice (still "Visual Objects", I assume) is not compatible to VBA.RGB(...)?
The VB6/VBA RGB() produces a Long with a (little-endian) Byte-Order of R, G and B Bytes.
meaning, the immediate-Window-Output of: ?Hex(VBA.RGB(1, 2, 3))
would be: 030201 (the least significant "red-byte" to the right of the hex-string - and blue to the left)
I know that in a few other languages the RGB-Function puts out a BGR-ByteOrder instead...
(a right-aligned Hex-String, according to the above example - would then contain: 010203) -
so you would just have to swap the red and the blue-byte (within the returned Int32), to correct for that.
I don't use the RGB function from Visual Objects, everything is done in VB6.
If I put in the database the long value calculated by your ColorPicker the color displayed is the right one, which doesn't surprise me as the code is identical.
When using any other way, like web pages that provides color conversions or a little tool that I have called ColorCache, the long values returned from RGB are different.
In the meantime I tried to use Context.SetSourceRGB. The result is the same, naturally, as the long value is not the correct one.
So my first thought was that cairo wasn't using a rgb, but something else (like HSL or whatever) - you use a LUT something that I don't know nothing about.
From your answer I presume it's not the case, so I need to investigate further.
Thanks
-
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Quote:
Originally Posted by
Carlos Rocha
I don't use the RGB function from Visual Objects, everything is done in VB6.
If I put in the database the long value calculated by your ColorPicker the color displayed is the right one, which doesn't surprise me as the code is identical.
The Color-Picker produces these already mentioned "VB6-compatible OleColor-Values"
(with the R-Byte as the least-significant byte in the Long-Value) - the Cairo-Classes expect these (OLEColor) formatted Long-Values.
Quote:
Originally Posted by
Carlos Rocha
When using any other way, like web pages that provides color conversions or a little tool that I have called ColorCache,
the long values returned from RGB are different.
Since you mentioned "the web" - this might just be it (because the hex-notation is reversed, affecting the blue and the red-bytes).
For example, the HTML-color, named "tomato" is defined this way:
tomato: Hex-Value = #FF6347 RGB-Value = rgb(255, 99, 71)
Now - the VB6-immediate-window will put out (when I use the channel-values as defined in the HTML-rgb-expression above):
?Hex(RGB(255, 99, 71))
4763FF
Easy to see, that the first and last two hex-digits (in case you imported from #-prefixed HTML-Hex-colorstrings) need to be swapped.
Olaf
-
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Yes, that was the case and easy to see, but I was using long values directly, so it wasn't that obvious.
Sorry if I didn't reply before, and thanks again for your help.
-
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。
-
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Quote:
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
-
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Hello Olaf! Ask: How to use FontAwesome-SVG-Resources as ToolBar icon.
Thank you so much!
-
Re: FontAwesome-SVG-Resources (per vbRichClient5)
Quote:
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