VB6 + RC6 Auto-generated Widget-Forms via direct PSD-FileParsing

[yereverluvinuncleber]

In larger size, adjacent to each other, RC version on the left. It might not seem much of a difference but the deeper shadows change the viewers perception without them knowing it and of course I notice it! You can really see it around the locking pin top left of each widget and underneath the main body and on the cables that connect the speakers.

The RC one (left) has the advantage of being DPI aware so it looks a lot more crisp. Very nice.

PS. You will see slight changes to items that have/have no shadows, I am still experimenting.

[yereverluvinuncleber]

This is the PSD file for reference, with a white background:



FYI, I can make the shadows much lighter in Photoshop (9%) rather than 27% and then I can make the resulting graphic appear as I want it to using RC. However that involves changing the shadows on every layer of the original PSD, doing some guess work as to how it is going to look, then flattening all the layer sets (groups) to correspond with the program. It take several iterations back and forth to get it right and it is quite a bit of work - that I'd really like to avoid.

[Schmidt]

This is the PSD file for reference, with a white background:

Could you upload the original PSD-File somewhere - (not as *.png-render-output)?
...so that I can step through the Parsing-Code, and see where exactly the Parser is "missing some Layer-Info"...

Olaf

[yereverluvinuncleber]

Will do, thankyou Olaf, coming by email!

[yereverluvinuncleber]

the new Code-Zip-Link now contains the cwAlphaImg.cls (as code) directly (so that no dependency to RC6Widgets exists)...

Thankyou Olaf, that works a treat.

[Schmidt]

Will do, thankyou Olaf, coming by email!

Have just downloaded and checked your PSD,
but I have absolute identical results in my IrfanView-PSD-viewer,
compared with the VB6-Output generated by this code:

Private Sub Form_Load()
  Const PSDFile As String = "c:\temp\dieselVolumeMerged.psd"
  
  Dim PSD As cSimplePSD, i As Long, CC As cCairoContext
  Set PSD = New_c.SimplePSD(PSDFile) 'create the PSD-parser-instance (on the given File)
 
  For i = 0 To PSD.LayersCount - 1 'loop over all the Layers in the PSD
      Debug.Print PSD.LayerAlphaPercent(i), PSD.LayerPath(i) 'LayerAlpha-Percentages and Layer-Names
  Next
    
  PSD.AllLayersSurface.WriteContentToPngFile PSDFile & ".png" 'write all "stacked-layers" as a *.png-file
  
  'output of the just written PNG on the VB-Form (ensuring white background)
  Set CC = Cairo.ImageList.AddImage("", PSDFile & ".png").CreateContext
      CC.Operator = CAIRO_OPERATOR_DEST_ATOP 'ensures, that the next drawing-op happens "underneath"
      CC.Paint 1, Cairo.CreateSolidPatternLng(vbWhite) 'add white "underneath" the PNGs Alpha-Channel
  Set Picture = CC.Surface.Picture
End Sub

My debug.printed enumeration of the separate "Sub-Layers" in that *.psd -
does show all SubLayerAlpha-Values at 1 aka 100% (and not 25% for some of them, as you claimed).

Here is the Parser-generated PNG-Output:





Olaf

[yereverluvinuncleber]

Strange, but as you can see the shadow on the two earlier images shown side by side certainly indicate a difference. Much denser shadows. Must be something else that is adding extra shadow, if it is my code then it is doing so unwittingly. It ios not something I have deliberately added. I'll carry on and finish the volume control functionality and if you don't mind, when done, I'll ask you to test the finished program on your desktop and then we can compare.

[Schmidt]

Have now found, what you meant...

The darker Alpha-Blur is not happening whilst "parsing out the SubLayer-Images" of the PSD... these work just fine...
it is generated when these SubLayer-Images are rendered from "within a Widget" (on a non-deep-cleared BackGround).

We had this topic already in another thread (RC6 does no deep "Auto-Clearance" on its own anymore, due to performance-optimizations compared to RC5).

So, your "workhorse-widget" (cwAlphaImg.cls, which you now have as source-code) -
needs the same update in its Paint-Event as the "Blend-Animation-fix" in the other thread:

Private Sub W_Paint(CC As RC6.cCairoContext, ByVal xAbs As Single, ByVal  yAbs As Single, ByVal dx_Aligned As Single, ByVal dy_Aligned As Single,  UserObj As Object)
  CC.Operator = CAIRO_OPERATOR_CLEAR
  CC.Paint
  CC.Operator = CAIRO_OPERATOR_OVER
  
  Dim Srf As cCairoSurface
  If Cairo.ImageList.Exists(W.ImageKey) Then Set Srf = Cairo.ImageList(W.ImageKey) Else Exit Sub
 
  CC.RenderSurfaceContent Srf, 0, 0, W.Width, W.Height, ,  W.AlphaInherited 'render the current W.ImageKey-Surface (as loaded  priorily into the ImageList)

  If W.MouseOver And W.HoverColor <> -1 Then 'render a colored,  slightly blurred copy of the Srf with 25% Alpha (in case of being  hovered)
     CC.RenderSurfaceContent Srf.GaussianBlur(0.1, , True, W.HoverColor), 0, 0, W.Width, W.Height, , W.Tag * W.AlphaInherited
  End If
End Sub

Olaf

[yereverluvinuncleber]

That does it, perfectly.

[taishan]

I'm sure Olaf is way ahead of me, but it must be the way the alpha Channel processes transparencies...?

[yereverluvinuncleber]

We have it sorted now. Three missing Cairo commands required for RC6. I just have to ensure they are replicated within the W_PAINT functions.

[yereverluvinuncleber]

Olaf, will it be possible some time to implement the Simple PSD parser into RC5 as well? I'd like to eventually back port my desktop widgets to run on XP and ReactOS. I have a few basic RC5 widgets that use just a single image or two and those will probably operate well on XP/ReactOS - I'm going to test soon - but the more complex programs whose graphics are rooted in a PSD file, won't run on XP and probably won't run on ReactOS for a while yet, until they have an NT6 compatible version.

[xiaoyao]

psdParse and export PNG. Can this function be compiled into a small DLL by itself? Maybe only 500 kb.Do a 64-bit, 32-bit can be used.

Many excellent things would be better if they could be made into independent components. Like nuget. Exe, NPM. Exe.

We can package a complete DLL, or download multiple DLLs at a time, or make some functions into a separate ddll.

psd image Is the format a vector diagram? Maybe it can be enlarged arbitrarily without blurring.

If the picture is only in pixel format, it cannot be vector enlarged.
The simplest way is to convert it into multiple transparent PNG images.
Winxp, Linux, mac, all have different ways to show the effect of animation.

[yereverluvinuncleber]

Just a gentle BUMP for Olaf to read and hopefully respond to my last query

Olaf, will it be possible some time to implement the Simple PSD parser into RC5 as well? I'd like to eventually back port my desktop widgets to run on XP and ReactOS. I have a few basic RC5 widgets that use just a single image or two and those will probably operate well on XP/ReactOS - I'm going to test soon - but the more complex programs whose graphics are rooted in a PSD file, won't run on XP and probably won't run on ReactOS for a while yet, until they have an NT6 compatible version.

[yereverluvinuncleber]

BUMP for Olaf.

[yereverluvinuncleber]

No need to backport the simple PSD parser to RC5. I have now implemented a workaround for RC5.

The workflow is slightly different.

o The design is held within a PSD built/viewed/amended in Photoshop.
o A script is used to extract the layers to separate PNGs and create an XML descriptor providing the image properties, x, y, dx, dy &c (get that here https://github.com/yereverluvinuncle...toXMLconverter)
o The resulting XML and the PNGs are dropped into a RES/images folder
o A new bit of logic reads the XML and populates the image collections in the same manner as the simple PSD parser.

' ----------------------------------------------------------------
' Procedure Name: convertImageXMLToRcWidgets
' Purpose: code to read XML image data instead of reading it directly from PSD which is RC6 only, an alternative for RichClient5 use.
' Procedure Kind: Sub
' Procedure Access: Private
' Author: beededea
' Date: 28/08/2025
' ----------------------------------------------------------------
Private Sub convertImageXMLToRcWidgets()

    Dim W As cWidgetBase

    Dim answer As VbMsgBoxResult
    Dim answerMsg  As String: answerMsg = vbNullString

    Dim num_results As Integer: num_results = 0
    Dim windowWidth As String: windowWidth = vbNullString
    Dim windowHeight As String: windowHeight = vbNullString
    Dim sSrc  As String: sSrc = vbNullString
    Dim sName As String: sName = vbNullString
    Dim sWidth As String: sWidth = vbNullString
    Dim sHeight As String: sHeight = vbNullString
    Dim sHOffset As String: sHOffset = vbNullString
    Dim sVOffset As String: sVOffset = vbNullString
    Dim sOpacity As String: sOpacity = vbNullString
    Dim Width As Long: Width = 0
    Dim Height As Long: Height = 0
    Dim hOffset As Long: hOffset = 0
    Dim vOffset As Long: vOffset = 0
    Dim opacity As Integer: opacity = 0
    Dim someOpacity As Double: someOpacity = 0
    Dim xmlFileToLoad As String: xmlFileToLoad = vbNullString
    Dim pngFileToLoad As String: pngFileToLoad = vbNullString
    
    Dim nodeList As MSXML2.IXMLDOMNodeList
    Dim objxmldoc As MSXML2.DOMDocument
   
    Set objxmldoc = New MSXML2.DOMDocument
    
    Dim node As MSXML2.IXMLDOMNode
    Dim MainNode As MSXML2.IXMLDOMNode
    Dim ImageNode As MSXML2.IXMLDOMNode
    Dim ImageNodes As MSXML2.IXMLDOMNodeList
    
    On Error GoTo convertImageXMLToRcWidgets_Error
    
    someOpacity = Val(mOpacity) / 100
    xmlFileToLoad = App.Path & "\RES\Panzer-CPU-gauge-VB6.xml"
    
    If fFExists(xmlFileToLoad) Then
        objxmldoc.Load xmlFileToLoad
    Else
        MsgBox "The XML file that contains the image data is missing " & xmlFileToLoad
    End If
    
    ' obtain the overall widget width and height
    Set MainNode = objxmldoc.selectSingleNode("widget/window")
            
    windowWidth = MainNode.selectSingleNode("@width").Text
    windowHeight = MainNode.selectSingleNode("@height").Text

    pvtPSDWidth = CLng(windowWidth)
    pvtPSDHeight = CLng(windowHeight)
    
    ' get the image values from the XML data, the num results should be non-zero
    Set nodeList = objxmldoc.selectNodes("widget/window/image")
    num_results = nodeList.Length
    
    ' no results found, go on as normal using the sampling interval
    If num_results = 0 Then
        answerMsg = "1. There is a problem with the XML data file that describes the image, seems to contain no valid data"
        answer = msgBoxA(answerMsg, vbOKOnly + vbExclamation, "XML Warning", True, "convertImageXMLToRcWidgetsPollingWarning")
        Exit Sub ' Return
    End If

    If Not nodeList Is Nothing Then
         For Each node In nodeList
         
            sSrc = node.selectSingleNode("@src").Text
            sSrc = Replace(sSrc, "/", "\")
            sName = node.selectSingleNode("@name").Text
            sWidth = node.selectSingleNode("@width").Text
            Width = CLng(Left$(sWidth, (InStr(sWidth, " px") - 1)))
            
            sHeight = node.selectSingleNode("@height").Text
            Height = CLng(Left$(sHeight, (InStr(sHeight, " px") - 1)))
            
            hOffset = CLng(node.selectSingleNode("@hOffset").Text)
            vOffset = CLng(node.selectSingleNode("@vOffset").Text)
            opacity = CInt(node.selectSingleNode("@opacity").Text) / 2.55
            
            If opacity = 100 Then  ' only handles layers that have an opacity greater than 0 - need to note this for the future, this will cause a problem!
            
               'add each current Layer path and surface object into the global ImageList collection (using LayerPath as the ImageKey)
                pngFileToLoad = App.Path & "\RES\" & sSrc
                If fFExists(pngFileToLoad) Then
                    Cairo.ImageList.AddSurface sName, Cairo.CreateSurface(Width, Height, PSSurface, pngFileToLoad)
                Else
                    MsgBox "Error, this PNG resource file seems to be missing " & pngFileToLoad
                End If
                
                ' check if each layer is in the layer exclude list, if it IS then we add it to a collection for non UI elements (ie. do not create Widgets)
                If collPSDNonUIElements.Exists(sName) Then
                  
                     'we add layer info. (used later in cwOverlay) to the excluded layers that will form the overlay.
                     collPSDNonUIElements(sName) = Array(hOffset, vOffset, someOpacity)  'here we update the so far empty slots with the PSD-offsets
                Else

                     'create a widget instance for all layers in the PSD, excluding any layers entered into the exclude-list
                     Set W = gaugeForm.Widgets.Add(New cwAlphaImg, LCase$(sName), hOffset, vOffset, Width, Height).Widget

                     W.ImageKey = W.Key 'W.Key equals ImageList-Key, set above - and sName at this point ... set it also as the ImageKey of our new created Widget
                     W.Alpha = 1

                     ' note: the clickable layers characteristics are set in adjustMainControls
                     ' all non-clickable Layer-Widgets will be -1 or "non-hoverable" and "fully click-through"
                     W.HoverColor = -1
                     If gblGaugeTooltips = "1" Then W.ToolTip = "Ctrl + mouse scrollwheel up/down to resize, you can also drag me to a new position."
                     W.MousePointer = IDC_SIZEALL

                 End If
            End If
          Next node
    End If
   
    'Cleanup
    Set nodeList = Nothing
    Set MainNode = Nothing
    
    On Error GoTo 0
    Exit Sub

convertImageXMLToRcWidgets_Error:

    MsgBox "Error " & Err.Number & " (" & Err.Description & ") in procedure convertImageXMLToRcWidgets, line " & Erl & "."

End Sub

There are two new manual steps but they are easy enough to do. In this way the older RC5 widget engine can extract the various elements from a PSD and use them to create a desktop program comprising multiple image-widgets.

[yereverluvinuncleber]

Using the above method in my Panzer-CPU-Gauge-RC5-VB6 that you can find here: https://github.com/yereverluvinuncle...-Gauge-RC5-VB6