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

[tmighty2]

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.

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

[Schmidt]

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):

Option Explicit

Public fTransparent As New cfTransparent

Sub Main()
  fTransparent.Form.Show vbModal
End Sub

Next, create a Private Particle-Class, named cParticle:

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:

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

[tmighty2]

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.

[tmighty2]

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.

[tmighty2]

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.

[tmighty2]

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.

[cafeenman]

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

[jpbro]

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

https://vbrichclient.com/#/en/Downloads.htm

[cafeenman]

Thanks. Which one do I want?

[jpbro]

Thanks. Which one do I want?

RC6BaseDlls.zip

[cafeenman]

Thanks.

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

[SmUX2k]

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

[cafeenman]

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?

[jpbro]

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.

[SmUX2k]

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

[cafeenman]

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.

[VanGoghGaming]

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

[taishan]

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

[cafeenman]

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

[tmighty2]

I would like to ask if there is any way to get the same cCairoSurface that I can get using for example this 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.

[Arnoutdv]

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.

[tmighty2]

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?

[tmighty2]

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.

[tmighty2]

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.

[tmighty2]

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.

[taishan]

My question was stupid...

There are no stupid questions here. Especially from someone like yourself --- eager to learn, and seek solutions.
Cheers

[Arnoutdv]

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