Results 1 to 27 of 27

Thread: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView2

  1. #1

    Thread Starter
    Hyperactive Member
    Join Date
    Jul 2017
    Posts
    371

    Question Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView2

    I am programming a full screen VB6 app that should include visual effects like particles at touch down / up / click or gestures.

    I want to use JS + css and render the particle effect.
    https://codepen.io/andysanchez-dev/pen/oaOyvK

    Essentially, I want the particles to show up not just within the WebView2 control but across the entire screen, including over the VB6 form.

    Is it possible to have these effects run in WebView2 with CSS and JavaScript, and then render them onto a transparent window in VB6?

    The goal is to keep the app as a VB6 executable (.exe) while incorporating these modern visual effects. I'm considering a setup where I create a transparent, layered window (using WS_EX_LAYERED and WS_EX_TRANSPARENT, set to HWND_TOPMOST) to achieve this.

    Has anyone successfully integrated such effects into a VB6 application? If so, could you share insights or examples on making JS/CSS animations from WebView2 appear on a transparent VB6 window?
    Could I advise WebView2 to render onto a Cairo surface and render this Cairo surface onto the transparent form?

    Thank you for any advice or guidance you can provide!

    To clarify, I am well-versed in creating and managing topmost transparent windows, so I don’t need assistance with that aspect. My query specifically concerns integrating JS/CSS animations from WebView2 onto a transparent VB6 window, and whether it's feasible to instruct WebView2 to render onto a Cairo surface, which could then be displayed on the transparent form.

    Code:
    Private Sub pCreateAndShowTopMostTransparentLayeredWindow(uX As Long, ByVal uY As Long)
    
        Debug.Assert m_Hdc <> 0
    
        Dim ptSrc As POINTAPI
        Dim ptSize As POINTAPI
        Dim ptDest As POINTAPI
    
        ptSrc.x = 0
        ptSrc.Y = 0
    
        ptSize.x = m_lIntendedWidth 
        ptSize.Y = m_lIntendedHeight
    
        ptDest.x = uX 'Position where our window should be shown on the screen
        ptDest.Y = uY
        
        m_funcBlend32bpp.AlphaFormat = AC_SRC_ALPHA
        m_funcBlend32bpp.BlendFlags = 0
        m_funcBlend32bpp.BlendOp = AC_SRC_OVER
        m_funcBlend32bpp.SourceConstantAlpha = 155 'For debugging I want to see the actual size of my window still
    'UpdateLayeredWindow resizes the window, resulting in vbform width (=300 pixels in my case) multiplied by screen.twipsperpoixely=4500 pixel!
        UpdateLayeredWindow Me.hwnd, m_Hdc, ptDest, ptSize, m_Hdc, ptSrc, 0, m_funcBlend32bpp, LWA_ALPHA
    Debug.Assert Me.Width = ptSize.x'Make sure this window is still our intended size
    Debug.Assert Me.Width = m_lIntendedWidth
    Debug.Assert Me.Height = m_lIntendedHeight
    
        Dim lRet&
        lRet = GetWindowLong(Me.hwnd, GWL_EXSTYLE)
        SetWindowLong Me.hwnd, GWL_EXSTYLE, lRet Or WS_EX_LAYERED Or WS_EX_TRANSPARENT 'This does NOT show the window yet!
        SetWindowPos Me.hwnd, HWND_TOPMOST, 0, 0, 0, 0, SWP_NOSIZE Or SWP_NOMOVE Or SWP_NOACTIVATE 'This does NOT show the window yet!
    
    'This finally shows the windows
        ShowWindow Me.hwnd, SW_SHOWNOACTIVATE
        
    End Sub

  2. #2
    PowerPoster
    Join Date
    Jun 2013
    Posts
    7,289

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    Quote Originally Posted by tmighty2 View Post
    I want to use JS + css and render the particle effect.
    https://codepen.io/andysanchez-dev/pen/oaOyvK

    Essentially, I want the particles to show up not just within the WebView2 control but across the entire screen, including over the VB6 form.

    Is it possible to have these effects run in WebView2 with CSS and JavaScript, and then render them onto a transparent window in VB6?
    You don't need any JS or CSS to render a bunch of particles -
    when VB6+RC6 can do it "on its own" (in half the lines of code)...

    Start an empty VB6-Project which starts from a *.bas modules Sub Main() ...(and put this into the module):
    Code:
    Option Explicit
    
    Public fTransparent As New cfTransparent
    
    Sub Main()
      fTransparent.Form.Show vbModal
    End Sub
    Next, create a Private Particle-Class, named cParticle:
    Code:
    Option Explicit
    
    Public Color As Long, AlphaPerc As Long, AngleDeg As Long
    Public Radius As Long, x As Double, y As Double, v As Double
     
    Public Sub DrawTo(CC As cCairoContext)
      CC.Save
        CC.TranslateDrawings x, y
        CC.RotateDrawingsDeg AngleDeg
        CC.TranslateDrawings (100 - AlphaPerc) * v, 0
        
        CC.SetSourceColor Color, AlphaPerc / 100
        CC.Arc 0, 0, Radius
        CC.Fill
      CC.Restore
    End Sub
    Finally, you need a Cairo-Form-Class, named cfTransparent:
    Code:
    Option Explicit
    
    Public WithEvents Form As cWidgetForm, CC As cCairoContext
    Public WithEvents tmrAnim As cTimer, Particles As cArrayList
    
    Private Sub Class_Initialize()
      Set Form = Cairo.WidgetForms.Create(6, "FullScreen Form")
          Form.WidgetRoot.ImageKeyRenderBehaviour = ImgKeyRenderLeft
          Form.WidgetRoot.BackColor = -1
          Form.FullScreen = True
      Set Particles = New_c.ArrayList(vbObject)
      Set tmrAnim = New_c.Timer(15, True)
    End Sub
    
    Private Sub Form_ResizeWithDimensions(ByVal NewWidth As Long, ByVal NewHeight As Long)
      Set CC = Cairo.ImageList.AddSurface("BackBuf", Cairo.CreateSurface(NewWidth, NewHeight)).CreateContext
    End Sub
    
    Private Sub Form_MouseMove(Button As Integer, Shift As Integer, x As Single, y As Single)
      Dim i As Long, P As cParticle
      For i = 1 To 6 'add 6 new (random) particles per MouseMove-Event (into the Particles-Array)
          Set P = New cParticle: P.x = x: P.y = y: P.v = Rnd * 3
              P.Color = CLng(Rnd * 255) + CLng(Rnd * 255) * 256 + CLng(Rnd * 255) * 65536
              P.AlphaPerc = 100: P.AngleDeg = Rnd * 360: P.Radius = 3 + Rnd * 5
          Particles.Add P
      Next
    End Sub
    
    Private Sub tmrAnim_Timer() 'redraw everything here
      CC.AntiAlias = CAIRO_ANTIALIAS_FAST
      CC.Operator = CAIRO_OPERATOR_SOURCE
        CC.Paint 1, Cairo.CreateSolidPatternLng(vbWhite, 0.01) 'clear with "near full transparency" (but not quite, to not make it "click-through")
      CC.Operator = CAIRO_OPERATOR_OVER
      
      CC.SelectFont "Arial", 33, vbRed, True
      CC.DrawText 0, 0, CC.Surface.Width, CC.Surface.Height, "Double-Click to Close...", True, vbCenter, , 1 ', , , True
     
      Dim i As Long, P As cParticle
      For i = Particles.Count - 1 To 0 Step -1
        Set P = Particles(i)
        P.AlphaPerc = P.AlphaPerc - 1 'let's use this Prop as a "lifetime"-counter as well, and then ...
        If P.AlphaPerc < 5 Then Particles.Remove i Else P.DrawTo CC 'removing the particle from the Array, when Alpha under a certain threshold
      Next
      
      Form.WidgetRoot.ImageKey = "BackBuf" 'refresh the Form-ImageBackground with what we've just drawn on the CC
      Form.Caption = Particles.Count & " active Particles" 'reflect the current Particles-Count in the Form-Caption (which is only reflected in the Taskbar)
    End Sub
     
    Private Sub Form_DblClick()
      Form.Unload 'a double-click will close the Form (and this App)
    End Sub
    Once these 3 Code-Modules are in place, the little Demo will produce:
    - a Full-Screen Form, which has an entry in the TaskBar (but no Form-Caption)
    - which is nearly fully transparent (but not quite, to avoid "Mouse-Click-Through behaviour")
    - generating 6 new, random (and fading) Particles on every MouseMove

    HTH

    Olaf

  3. #3

    Thread Starter
    Hyperactive Member
    Join Date
    Jul 2017
    Posts
    371

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    This works and looks amazing.
    However, my idea was to be able to try out any fancy JS css there is available on the net.

    I believe that some visual effects are not possible because of the way graphics are rendered in css.
    I had tried to replicate a few of these:


    https://www.sliderrevolution.com/res...hover-effects/

    I had problems with the timing. Somebody told me that this because css / JS uses the GPU in browsers.

    Next, I wanted to create a book with realistically interactable turning pages such as these:

    https://www.cssscript.com/book-page-flip-animation/

    And an tear off calendar such as this (this is the only available demo of such a calendar on the entire internet! :-D)
    https://codepen.io/nikitahl/pen/xmvVmW


    All this led me to think that VB6 alone is not the way it can be handled.

    Also, I wanted to be able to quickly test out what other people (like the button coders, the page turn coder and the tear off calendar coder) created.
    That is why I was hoping I could both test it in VB6 and even make it interact with the rest of my code.

    My question about passing the graphics to VB6 was for that: Making JS / css interactable with VB6.
    Last edited by tmighty2; Apr 1st, 2024 at 12:28 PM.

  4. #4

    Thread Starter
    Hyperactive Member
    Join Date
    Jul 2017
    Posts
    371

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    The particle demo is so great. I tried to enhance it and use it on a customer device.
    Unfortunately it brings the system to its limits.

    Olaf, do you see any way to copy the contents of what WebView2 renders, onto a cairo surface / transparent widget form that would allow drawing this outside webview2 and possible also let snow particles fall in my app? I am curently limited to the webview2 window.

  5. #5

    Thread Starter
    Hyperactive Member
    Join Date
    Jul 2017
    Posts
    371

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    I have just seen this:

    https://www.vbforums.com/showthread....=1#post5553258

    But I guess that is not what I want, it looks more like a screenshot, but I need the image with alpha before it is rendered so that I can render it myself with alpha.
    Last edited by tmighty2; Apr 3rd, 2024 at 05:20 PM.

  6. #6

    Thread Starter
    Hyperactive Member
    Join Date
    Jul 2017
    Posts
    371

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    The following example shows what I am trying to do: I want to leave all the heavy css rendering to wv2 and use the alpha image and project it where I want using a cCairoSurface. With some hacks it even works already.
    It is quite slow, but it works.

    To test it more and see what exactely is slow, I need to be able to pass the mouse position to the wv2, but currently I don't see how I could make the form click-through.
    I have changed the following to 0 i cfTransparent, but it had no effect:
    cc.Paint 1, Cairo.CreateSolidPatternLng(vbWhite, 0.01) 'clear with "near full transparency" (but not quite, to not make it "click-through")

    I would also like to ask if there is a more efficient way to the get image than by converting the image the way I dit it?

    For some reason, I see to be unable to deactivate the timer of cfTransparent.
    I would appreciate a look at it by an expert.
    Attached Files Attached Files

  7. #7
    PowerPoster cafeenman's Avatar
    Join Date
    Mar 2002
    Location
    Florida
    Posts
    2,641

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    tmighty2 - I downloaded your zip but missing reference to RC6. Where do I get that?

  8. #8
    PowerPoster
    Join Date
    Aug 2010
    Location
    Canada
    Posts
    2,466

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    Quote Originally Posted by cafeenman View Post
    tmighty2 - I downloaded your zip but missing reference to RC6. Where do I get that?
    https://vbrichclient.com/#/en/Downloads.htm

  9. #9
    PowerPoster cafeenman's Avatar
    Join Date
    Mar 2002
    Location
    Florida
    Posts
    2,641

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    Thanks. Which one do I want?

  10. #10
    PowerPoster
    Join Date
    Aug 2010
    Location
    Canada
    Posts
    2,466

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    Quote Originally Posted by cafeenman View Post
    Thanks. Which one do I want?
    RC6BaseDlls.zip

    Name:  2024-04-04_14-09-13.jpg
Views: 203
Size:  25.6 KB

  11. #11
    PowerPoster cafeenman's Avatar
    Join Date
    Mar 2002
    Location
    Florida
    Posts
    2,641

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    Thanks.

    Now to get regsvr to work on win10 again. Hit and miss.

  12. #12
    Fanatic Member
    Join Date
    Apr 2021
    Posts
    539

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    To be fair, he asked for help by ("a look at it from ") an expert.

    If you need us to explain to you where to get the DLLs and which one you want, you're clearly not the expert he's looking for and instead you're just looking at his code :-P

  13. #13
    PowerPoster cafeenman's Avatar
    Join Date
    Mar 2002
    Location
    Florida
    Posts
    2,641

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    That's exactly what I'm doing. As I said, I've been gone a long time. A lot has changed. I've never even heard of widgets and whatever else for VB6.

    Is it ok if I learn a thing here please?

  14. #14
    PowerPoster
    Join Date
    Aug 2010
    Location
    Canada
    Posts
    2,466

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    Quote Originally Posted by cafeenman View Post
    Thanks.

    Now to get regsvr to work on win10 again. Hit and miss.
    If you run the included RegisterRC6inPlace.vbs script it will register RC6.dll for you.

  15. #15
    Fanatic Member
    Join Date
    Apr 2021
    Posts
    539

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    Quote Originally Posted by cafeenman View Post
    Is it ok if I learn a thing here please?
    Sure...but by stomping all over someone else's post? Would you like it if someone else jumped in on your threads asking questions unrelated (or loosely related but not pertaining directly) to anything you posted about?

    Start a new thread if you have questions. Learn all you want, but don't stifle others in the process

  16. #16
    PowerPoster cafeenman's Avatar
    Join Date
    Mar 2002
    Location
    Florida
    Posts
    2,641

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    Nobody is being stifled. The scolding here is way over the top. I asked one question abou THE TOPIC. Now that I have an answer from people who were actually helpful I can see what it's all about. And I'm done with you.

  17. #17
    Frenzied Member VanGoghGaming's Avatar
    Join Date
    Jan 2020
    Location
    Eve Online - Mining, Missions & Market Trading!
    Posts
    1,537

    Wink Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    Just when xiaoyao seems to have taken a (long overdue) break...

  18. #18
    Addicted Member
    Join Date
    Feb 2022
    Posts
    189

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    Quote Originally Posted by cafeenman View Post
    That's exactly what I'm doing. As I said, I've been gone a long time. A lot has changed. I've never even heard of widgets and whatever else for VB6.
    I totally understand. I basically quit programming in 2004 and go back into it during COVID.
    It's tough to jump into RC6, and it takes a while to realize that it effectively turns VB6 into at least VB6.6 !
    you start to think of it as another augmentation to VBA as opposed to learning a bunch of API calls to get immediate access to Unicode file handling, XML, CSV... And that's just the bits I've found invaluable.
    There's also SQLite, and the awesome cross-platform UI / Graphics library called Cairo (subject of this thread).
    Once you go down this rabbit hole, you'll feel like Alice in Wonderland.
    Here's a great place to start your journey
    Look at my profile activity, you'll find most everything I ask has something to do with RC6 (when I'm not attempting comedy or levity) and everyone has been very helpful here.
    Cheers

  19. #19
    PowerPoster cafeenman's Avatar
    Join Date
    Mar 2002
    Location
    Florida
    Posts
    2,641

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    Thank you. I've opened the link, bookmarked and will check it out.

  20. #20

    Thread Starter
    Hyperactive Member
    Join Date
    Jul 2017
    Posts
    371

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    I would like to ask if there is any way to get the same cCairoSurface that I can get using for example this code...

    Code:
        Dim s As cCairoSurface
        Set s = WV.CapturePreview(CaptureAs_PNG)
    but faster.
    This call takes around 200 ms which is way too much for my purpose.
    The image that I get using this function however is perfectly fine.
    I can use it to render the graphic that WV2 generated anywhere I like as I have as a cCairoSurface.

  21. #21
    PowerPoster Arnoutdv's Avatar
    Join Date
    Oct 2013
    Posts
    5,979

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    It seems you are copying a screengrab from window A (WebViewer??) to window B (a cairo VB6 surface).
    This takes time a hardly can be done realtime and when using PNG compression it takes even more time (compressing and decompressing).
    Instead of CaptureAs_PNG maybe something like raw/BMP is available? This could speed it up a little.

  22. #22

    Thread Starter
    Hyperactive Member
    Join Date
    Jul 2017
    Posts
    371

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    I believe Olaf is the only who could do do this.
    Binding RC6's WV2 to a form does not help, it's just the same as binding it to a picturebox.

    I think I am out of solutions. Please correct me anybody if he sees any way.

    Olaf, can you give a short feedback if you think that what I need would be possible?
    Last edited by tmighty2; Apr 9th, 2024 at 08:28 AM.

  23. #23

    Thread Starter
    Hyperactive Member
    Join Date
    Jul 2017
    Posts
    371

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    https://learn.microsoft.com/en-us/mi...framework-apps

    Here it says that the background color of WV2 can be set to transparent.

    What I want to do it is make RC6's WV2 control full screen and transparent, and that would show the particles on the screen as I need.

    However, I need to make the hosting form transparent, but if I do that, the form and its control will be transparent, so WV2 will also be transparent.
    I need to check that.

  24. #24

    Thread Starter
    Hyperactive Member
    Join Date
    Jul 2017
    Posts
    371

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    Olaf, does RC6's WV2 expose the properties that I would perhaps need to achieve what I need? Thank you for your spending your time on answering this, I appreciate it very much.

  25. #25

    Thread Starter
    Hyperactive Member
    Join Date
    Jul 2017
    Posts
    371

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    My question was stupid. WV2 is closed source and what I would need is not exposed by Microsoft, so it makes no sense to ask Olaf about it.
    Sorry, I thought it was much easier, and it would perhaps have been if MS offered an API for that.

  26. #26
    Addicted Member
    Join Date
    Feb 2022
    Posts
    189

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    Quote Originally Posted by tmighty2 View Post
    My question was stupid...
    There are no stupid questions here. Especially from someone like yourself --- eager to learn, and seek solutions.
    Cheers

  27. #27
    PowerPoster Arnoutdv's Avatar
    Join Date
    Oct 2013
    Posts
    5,979

    Re: Enhancing a VB6 App with Interactive Particle Effects Using RichClient6 & WebView

    Better explain why you want an animation which is playing in a browser to be shown as the background of your form

Tags for this Thread

Posting Permissions

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



Click Here to Expand Forum to Full Width