FontAwesome-SVG-Resources (per vbRichClient5)-VBForums
Results 1 to 13 of 13

Thread: FontAwesome-SVG-Resources (per vbRichClient5)

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Jun 2013
    Posts
    3,105

    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; Apr 8th, 2017 at 12:57 PM.

  2. #2
    Hyperactive Member
    Join Date
    Jul 2013
    Posts
    310

    Re: FontAwesome-SVG-Resources (per vbRichClient5)

    Thank you
    Carlos

  3. #3
    Member
    Join Date
    May 2016
    Location
    China
    Posts
    46

    Re: FontAwesome-SVG-Resources (per vbRichClient5)

    Set Lst = New_c.ArrayList(vbLong, vbRed, vbYellow, vbGreen, vbCyan, vbBlue, vbMagenta, vbRed)

    This Line Type mismatch error.
    QQ: 289778005

  4. #4

    Thread Starter
    PowerPoster
    Join Date
    Jun 2013
    Posts
    3,105

    Re: FontAwesome-SVG-Resources (per vbRichClient5)

    Quote Originally Posted by ChenLin View Post
    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.

  5. #5
    Member
    Join Date
    May 2016
    Location
    China
    Posts
    46

    Re: FontAwesome-SVG-Resources (per vbRichClient5)

    Download the new version and use the script RegisterRC5inPlace.vbs (this must be) after the registration solution
    QQ: 289778005

  6. #6
    Hyperactive Member
    Join Date
    Jul 2013
    Posts
    310

    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

    Name:  Imagem 1.png
Views: 189
Size:  4.0 KB

    Is there anything I can do inside cairo?
    Carlos

  7. #7

    Thread Starter
    PowerPoster
    Join Date
    Jun 2013
    Posts
    3,105

    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

  8. #8
    Hyperactive Member
    Join Date
    Jul 2013
    Posts
    310

    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
    Name:  Imagem 2.png
Views: 164
Size:  4.5 KB

    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

  9. #9

    Thread Starter
    PowerPoster
    Join Date
    Jun 2013
    Posts
    3,105

    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

  10. #10
    Hyperactive Member
    Join Date
    Jul 2013
    Posts
    310

    Re: FontAwesome-SVG-Resources (per vbRichClient5)

    The container is a Codejock's TaskPanel.

    Name:  Imagem 3.png
Views: 150
Size:  14.6 KB

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

  11. #11
    Fanatic Member
    Join Date
    Aug 2013
    Posts
    772

    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!)
    Check out PhotoDemon, a pro-grade photo editor written completely in VB6. (Full source available at GitHub.)

  12. #12

    Thread Starter
    PowerPoster
    Join Date
    Jun 2013
    Posts
    3,105

    Re: FontAwesome-SVG-Resources (per vbRichClient5)

    Quote Originally Posted by Carlos Rocha View Post
    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

  13. #13
    Hyperactive Member
    Join Date
    Jul 2013
    Posts
    310

    Re: FontAwesome-SVG-Resources (per vbRichClient5)

    Quote Originally Posted by Schmidt View Post
    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.
    Carlos

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Featured


Click Here to Expand Forum to Full Width

Survey posted by VBForums.