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

As the title says, the demo shows, how a fully transparent Widget-Form can be generated,
directly from a PhotoShop *.psd-File... by auto-creating clickable Widget-instances for each Layer in the PSD.

This Demo has the following pre-requisites:
- the newest RC6-version 6.0.15 has to be downloaded from vbRichClient.com (the RC6BaseDlls.zip)
- after that the RC6.dll as well as the RC6Widgets.dll have to be registered (via the little Scripts in the BaseDlls-Folder)
- before running the Demo, an about 4MB large *.psd File has to be downloaded from the following link:
.. https://vbrichclient.com/Downloads/tank-clock-mk1.psd
and then placed in the \Res\ Subfolder of the unzipped Demo-Project

The Demo-Project itself is quite small, and downloadable here:
Attachment 188518

After everything is correctly set up, the demo should produce the following:

https://www.vbforums.com/images/ieimages/2023/07/13.png

- the App-Window is movable when clicking on the "outer, dark-grey frame" of the render-output,
- any PSD-Layer of the Widget-Form is "hoverable" in different Colors (the smaller red-hours-circle is an example)
- ToolTips for each of the Widget-converted Layers are shown
- there is an (optional) little close-button to be able to close the App via Mouse (coming from a separate resource-image)
- in IDE-Mode the App-Window will get a TaskBar-entry (not so, when running compiled)
- the App-Window is zoomable (via Touchpad- or OnScreen-two-finger-gesture, or via the matching Mouse Std-Op: <Ctrl>+MouseWheel)

Have fun with it,

Olaf

Superb, Olaf, I will give that a go now!

OK. I am really impressed.

I will dig into that code and see how you have done what you have achieved. Fascinated that you have changed my initial requirement to read from a series of PSD extracted PNGs and have expanded that to extract directly from the PSD file. That does away with my extraction script (.js) and potentially makes the whole design process a lot easier, matching it in ease with the old YWE widget build process. I can design in Photoshop and create VB6 widgets. Feck me! That is impressive.

My desktop with the Panzer StopWatch PSD design being displayed (full centre) using VB6 and RC6 6.0.15
https://www.vbforums.com/images/ieimages/2023/07/14.png

Note, that clock works, the widget is resizable, the various layers respond to events. Best of all it is designed in Photoshop and written in VB6!

Quote:

---

Originally Posted by yereverluvinuncleber

I will dig into that code and see how you have done what you have achieved.

---

It's commented in sufficient detail (I think) - so that should help...

What was costing a bit of extra-time on my end (when working with *that* specific PSD) was basically 2 things:

1) better "PSD-group- and layer-naming" would have helped (psd-layer-group-paths will become the future Widget- and ImageList-Keys)
.. (as it was, I always had to "visualize and click" a layer for Debug-Printing its Path-Key -
.. more intuitive namings, resulting in paths like e.g. "grpBigClock/hour-hand", "grpBigClock/minute-hand" would have helped


2) when producing a PSD for "rotational stuff" - it would be good with regards to "auto-calculations",
.. to ensure the "rotation-center" exactly at PsdWidth/2 and PsdHeight/2
2.1) same for other layers (like e.g. the clock-hands) which have to be rotated around their own "sub-center-point" -
.. better to prepare them in "centerpoint-symmetric" stripes (either vertically or horizontally).
.. (had to fumble a bit, until I got these "internal clock-hand center-rotation-offsets" right in cwOverlay-Paint)


Olaf

It is impressive, fully commented and I am able to comprehend. I will set about converting it into something that approximates one of my YWE widgets and then I will start to add any functionality that is missing. In that way I will better understand the code and the issues it raises in my mind.

If anyone reading this fails to understand the importance of what Olaf has just created in the latest version on RC6, it is this:

***** You can now use Photoshop as an IDE for advanced VB6 GUI design *****

Don't underestimate the importance of this. You now have a graphical IDE for RichClient apps in Photoshop!

Quote:

---

Originally Posted by Schmidt

It's commented in sufficient detail (I think) - so that should help...

What was costing a bit of extra-time on my end (when working with *that* specific PSD) was basically 2 things:

1) better "PSD-group- and layer-naming" would have helped (psd-layer-group-paths will become the future Widget- and ImageList-Keys)
.. (as it was, I always had to "visualize and click" a layer for Debug-Printing its Path-Key -
.. more intuitive namings, resulting in paths like e.g. "grpBigClock/hour-hand", "grpBigClock/minute-hand" would have helped

---

You are quite correct in that and apologies for the poor naming. Most of my PSDs have layers named exactly as you suggest. In my defence I was under time constraints when I created that PSD file and so I just banged it out as quickly as I could. Once done, I renamed the layers in the resulting XML descriptor file and never looked back. I simply copied that XML descriptor for future widgets so it didn't really matter.

For the future, for any new designs I will meticulously ensure the naming of layers is appropriate to its function and identification within the widget and imageList keys. I do that anyway for most of my widget designs, though laziness does creep in on occasion.

Directly parsing PSD files and generating transparent widget-forms, I have to say that this is really creative and amazing.

I now have a bold idea: make a PsdViewer or PhotoshopViewer. :D

Quote:

---

Originally Posted by yereverluvinuncleber

I will set about converting it into something that approximates one of my YWE widgets...

---

Before you make a copy of the demo-source to do that, please note that I made a small update on the code-zip in post #1
(forgot to enable regfree-Mode for the RC6Widgets.dll, which is part of the Project - which the new zip-link now includes).

Olaf

Quote:

---

Originally Posted by SearchingDataOnly

I now have a bold idea: make a PsdViewer or PhotoshopViewer. :D

---

Yup, I use XnView to view folders of PSD files but now is your chance SDO to create a tool that does the same. I think Faf could use this functionality as it is something that base Windows explorer lacks.

Quote:

---

Originally Posted by Schmidt

Before you make a copy of the demo-source to do that, please note that I made a small update on the code-zip in post #1
(forgot to enable regfree-Mode for the RC6Widgets.dll, which is part of the Project - which the new zip-link now includes).

Olaf

---

Will comply.

P.S Still impressed.

Quote:

---

Originally Posted by yereverluvinuncleber

Yup, I use XnView to view folders of PSD files but now is your chance SDO to create a tool that does the same. I think Faf could use this functionality as it is something that base Windows explorer lacks.

---

Careful with these plans... because the Parser-Class is named cSimplePSD for a reason... ;)

Whilst it fully supports the Photoshop-produced "normal Layering with Alpha" (which is the "bread-and-butter" in Photoshop) -
there's additional settings per Layer (like Masking or Clipping) - which are currently not (or only partially) supported by cSimplePSD.

As a companion in a "PhotoShop-powered Form-Editing-scenario" (useful for Game-Designers and Desk-Modders),
cSimplePSD should do a decent enough job though.

Olaf

It is a significant step forward and it indicates a path for this type and method of design. I had already committed (in my mind) to some simple eye-candy type desktop 'widgets' that had a minimal UI (sysmetric gauges &c) with all the user controls and events reverted to menus and preferences.

Instead, what you have provided is a significant improvement on that and I am fairly sure it will do all that I require. It is time to experiment.

Crikey, VB6 program transparency with potentially multi-platform graphical controls, seems now to be here, soon it will be 64bit with TwinBasic, is the future finally arriving?

If the PSD file has 6 layers, is it possible to read the name of each layer, the coordinates in the picture, and also the layer size?
Then how to get the PNG image of each layer to memory bytes? Convenient for GDIPLUS to load as image object?

Call FreeImage, you can operate freely on all graphics and images, just like ps
This is an open source library
If only for psd, go directly to github to find the code: https://github.com/MolecularMatters/psd_sdk
Vb6 calls: compile c++ into static dll calls or directly call FreeImage

Quote:

---

Originally Posted by xiaoyao

If the PSD file has 6 layers, is it possible to read the name of each layer, the coordinates in the picture, and also the layer size?
Then how to get the PNG image of each layer to memory bytes? Convenient for GDIPLUS to load as image object?

---

The Demo contains an enumeration-loop over all PSD-layers already...
(including coord-, dimension-, and layer-surface-object-access).

The .LayerSurface(i)-Prop returns a cCairoSurface (which in turn opens up all kind of exports via its own methods).

Olaf

CAN you make a sample ,thank you.
if layer info like json:
lyaer1>>layer1-a show=true
layer1>>layer1-b show=false
and how to export to png byte.
i want to use psd file like a resource file
Otherwise, I still need to copy each layer and create a new PSD file, and export each PNG file, which is a lot of work

thank you

Dear Olaf, Please check your latest RC6 + RC6Widgets Package, It seems that
LayerPath is not existed in following line:
Cairo.ImageList.AddSurface .LayerPath(i), .LayerSurface(i)

Thanks.
John

I'd be interested to hear that too. It would add flexibility to existing apps that use images by default and resolving a storage issue as a byproduct.

Quote:

---

Originally Posted by JT870

Dear Olaf, Please check your latest RC6 + RC6Widgets Package, It seems that
LayerPath is not existed in following line:
Cairo.ImageList.AddSurface .LayerPath(i), .LayerSurface(i)

---

When you open an RC6-referenced project in the VB6-IDE -
what's the output in your immediate-window for:
?New_c.Version

What I mean is, the cSimplePSD-Class was newly introduced in 6.0.13 -
but LayerPath was added to this class only in 6.0.15 (along with a few "hardening-fixes" in cSimplePSD)

Remember, a simple "copy-over" (of new files from a recently downloaded, unpacked RC6BaseDlls-Zip) into your local RC6-Folder is not enough.
You will always have to follow up with registering (either via \SysWow64\regsvr32.exe or the two RegisterInPlace-scripts).

Olaf

Quote:

---

Originally Posted by yereverluvinuncleber

I'd be interested to hear that too.

---

You mean XiaoYaos question, how to export all Layers to *.png-Files?

I thought I've answered this sufficiently already in #16...
(especially my mentioning of .LayerSurface(i) being of type cCairoSurface should have cleared all doubts, regarding PNG or JPG-export)

But Ok - here's "a hand-out" again (most of the loop-construct, copied from what was already written in the cfAlpha.InitFromPSD-routine):

Code:

---

Sub ExportPngs(PSD_FileNameOrByteArray, ByVal PngFolder As String)
  New_c.FSO.EnsurePath PngFolder 'make sure the PngFolder-Path "materializes itself" in the FileSystem
  New_c.FSO.EnsurePathEndSep PngFolder 'add a backslash to the PngFolder-param (in case it was missing)
 
  With New_c.SimplePSD(PSD_FileNameOrByteArray)  'create a new PSD-Parser.instance (and load the passed content)
    Dim i As Long
    For i = 0 To .LayersCount - 1 'loop over all the Layers in the PSD
      If .LayerByteSize(i) Then  'this is an Alpha-Surface-Layer with "meat" (and not a group-specification)
        .LayerSurface(i).WriteContentToPngFile PngFolder & Replace(.LayerPath(i), "/", "_") & ".png"
      End If
    Next
  End With
End Sub

---

If you place the above routine in modMain.bas, you can call it from everywhere, e.g. in Sub Main itself via:

Code:

---

  ExportPngs App.Path & "\Res\tank-clock-mk1.psd", App.Path & "\PngExport"

---

HTH

Olaf

Very good. Still digging into your code and merging my own. Lots to think about and absorb... I'll get there.

After registering again, It's OK now. Thanks a lot.
John

Quote:

---

Originally Posted by Schmidt

You mean XiaoYaos question, how to export all Layers to *.png-Files?

I thought I've answered this sufficiently already in #16...
(especially my mentioning of .LayerSurface(i) being of type cCairoSurface should have cleared all doubts, regarding PNG or JPG-export)

But Ok - here's "a hand-out" again (most of the loop-construct, copied from what was already written in the cfAlpha.InitFromPSD-routine):

Code:

---

Sub ExportPngs(PSD_FileNameOrByteArray, ByVal PngFolder As String)
  New_c.FSO.EnsurePath PngFolder 'make sure the PngFolder-Path "materializes itself" in the FileSystem
  New_c.FSO.EnsurePathEndSep PngFolder 'add a backslash to the PngFolder-param (in case it was missing)
 
  With New_c.SimplePSD(PSD_FileNameOrByteArray)  'create a new PSD-Parser.instance (and load the passed content)
    Dim i As Long
    For i = 0 To .LayersCount - 1 'loop over all the Layers in the PSD
      If .LayerByteSize(i) Then  'this is an Alpha-Surface-Layer with "meat" (and not a group-specification)
        .LayerSurface(i).WriteContentToPngFile PngFolder & Replace(.LayerPath(i), "/", "_") & ".png"
      End If
    Next
  End With
End Sub

---

If you place the above routine in modMain.bas, you can call it from everywhere, e.g. in Sub Main itself via:

Code:

---

  ExportPngs App.Path & "\Res\tank-clock-mk1.psd", App.Path & "\PngExport"

---

HTH

Olaf

---

thank you,Every other line is like a mountain, and your technology will always surpass us.

Quote:

---

Originally Posted by Schmidt

Careful with these plans... because the Parser-Class is named cSimplePSD for a reason... ;)

---

The classes of your cSimpleXXXX family are easy to integrate, easy to extend, and extremely creative and inspiring.

Your cwSpread(cSimpleSpread) only has 104 lines of code, but I used it as the starting-point and foundation to develop a professional Spread control with more than 30,000 lines of code.

Your Simple-PropertyGrid is so simple that few people will pay attention to it, but I used it as a basis to make a PropertyGrid that perfectly meets my IDE needs. (You know I developed my own PropertyGrid, which was very complex, but powerful enough to meet my project needs, but in the end I decided to choose your Simple-PropertyGrid as the prototype and develop a new PropertyGrid based on your Simple-PropertyGrid. The final effect of the control proves that my choice is very correct)

Your Virtual-ComboBox is also very simple, but it's easy to integrate and extensible, and I've applied it to my Property-Window, which accurately simulates some of the valuable details of the VB6-IDE.

The same goes for cSimpleTab.

For me, the classes of your cSimpleXXXX series are like precious and excellent seeds that I can cultivate into beautiful flowers through my own efforts.

What I need most now is a cSimpleCodeEditor and cSimpleCodeDebugger as a starting point for my next step.

If you could find the time to write a cSimpleCodeEditor, then maybe I can use your cSimpleCodeEditor as a prototype and starting point to develop a better CodeEditor than Scintilla. If you don't have time to write such an example, I'm going to follow your previous tips and develop a CodeEditor based on VList (or cwVList) that meets my needs. Without your help, I'm doomed to take many detours.

Olaf, question specifically for you I am afraid.

In general I am working well with your above supplied code, becoming familiar with it and modifying this and that, so far successful.

One thing I don't seem to be able to switch OFF within InitFromPSD is the W.HoverColor = vbColour

I have set the majority of the layers to W.HoverColor = -1 which makes them click-through with no resulting colour overlay.

However, if I want a fully or partially transparent HoverColor, that does not currently seem to be possible.

I am using W.HoverColor = 0 on the grey image sections of my PSD which simply makes those grey sections change greyness during a hover over - that is acceptable.

Is there a way of altering the opacity of the overlays so they are not quite so intrusive overall? I appreciate they are overlays and I can change the individual colours to suit the item being hovered over - but I'd really like to make them non-intrusive if that is possible by reducing their opacity.

I suspect it may not be possible but if you do know how then do let me know how. Thanks in advance.

https://www.vbforums.com/images/ieimages/2023/07/25.png

Quote:

---

Originally Posted by yereverluvinuncleber

Is there a way of altering the opacity of the overlays so they are not quite so intrusive overall?

---

The applied Hover(Color)-effect is currently using a "hard-wired" Alpha-Value of 0.25...

Well - for the next release of RC6/RC6Widgets -
I've adjusted cwAlphaImg to use the so far unused W.Tag (general purpose Variant-Prop) for that -
pre-initialized to 0.25 (but now changeable on the outside, to what you prefer).

If you don't want to wait for that next release, you can "hang-in" the cwAlphaImg-Class manually -
as a Project-Private Class from this identical code (out of RC6Widgets):

Code:

---

Option Explicit 'a very simple Image-Widget, which expects an ImageKey - and ensures ClickThrough-behaviour
 
Private WithEvents W As cWidgetBase

Private Sub Class_Initialize()
  Set W = Cairo.WidgetBase
      W.BackColor = -1  'we don't use any BackColor here
      W.HoverColor = vbRed 'show no Hover-Effect by default
      W.ImplementsHitTest = True 'when at False, no HitTest-Event would be triggered
      W.ImplementsWheelMessages = True
      W.Tag = 0.25 'we use this common cWidgetBase-Property here, to allow influencing the HoverColor-Alpha
End Sub

Public Property Get Widget() As cWidgetBase: Set Widget = W: End Property
Public Property Get Widgets() As cWidgets: Set Widgets = W.Widgets: End Property
 
Private Sub W_HitTest(ByVal x As Single, ByVal y As Single, HitResultHit As Boolean) 'ensure ClickThrough-behaviour in ImagePixels which are "fully Alpha"
  HitResultHit = False
  Dim Srf As cCairoSurface, Pxl() As Long
  If Cairo.ImageList.Exists(W.ImageKey) And W.HoverColor <> -1 Then Set Srf = Cairo.ImageList(W.ImageKey) Else Exit Sub
  If Not Srf.BindToArrayLong(Pxl) Or W.Width = 0 Or W.Height = 0 Then Exit Sub
    HitResultHit = Pxl(x * Srf.Width / W.Width, y * Srf.Height / W.Height) 'only when the Pixel==0==FullAlpha, will HitResultHit be returned False
  Srf.ReleaseArrayLong Pxl
End Sub

Private Sub W_MouseEnter(ByVal MouseLeaveWidget As RC6.cWidgetBase)
  W.Parent.Refresh 'if we want to support widget-refreshs "on-hover", we have to trigger a Re-Paint
End Sub
Private Sub W_MouseLeave(ByVal MouseEnterWidget As RC6.cWidgetBase)
  W.Parent.Refresh 'same here (trigger dynamic re-rendering, when the hover-state changes)
End Sub

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)
  Dim Srf As cCairoSurface ', x As Single, y As Single
  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.Alpha '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
  End If
End Sub

---

Note, that you will then have to adapt the (I think it was 2) instancing-expressions from:
New_W("cwAlphaImg")
to
New cwAlphaImg
inside the cfAlpha Form-Class...

Olaf

That's fine Olaf. I appreciate the changes you are making. I will attempt the code above and in any case as a new version of RC6 is in the pipeline it is not an issue. I can simply wait knowing it is going to come.

For the moment I have just encountered a bump-in-the-road but now I have a new understanding. All good.

Quote:

---

Originally Posted by SearchingDataOnly

The classes of your cSimpleXXXX family are easy to integrate, easy to extend, and extremely creative and inspiring.

Your cwSpread(cSimpleSpread) only has 104 lines of code, but I used it as the starting-point and foundation to develop a professional Spread control with more than 30,000 lines of code.

Your Simple-PropertyGrid is so simple that few people will pay attention to it, but I used it as a basis to make a PropertyGrid that perfectly meets my IDE needs. (You know I developed my own PropertyGrid, which was very complex, but powerful enough to meet my project needs, but in the end I decided to choose your Simple-PropertyGrid as the prototype and develop a new PropertyGrid based on your Simple-PropertyGrid. The final effect of the control proves that my choice is very correct)

Your Virtual-ComboBox is also very simple, but it's easy to integrate and extensible, and I've applied it to my Property-Window, which accurately simulates some of the valuable details of the VB6-IDE.

The same goes for cSimpleTab.

For me, the classes of your cSimpleXXXX series are like precious and excellent seeds that I can cultivate into beautiful flowers through my own efforts.

What I need most now is a cSimpleCodeEditor and cSimpleCodeDebugger as a starting point for my next step.

If you could find the time to write a cSimpleCodeEditor, then maybe I can use your cSimpleCodeEditor as a prototype and starting point to develop a better CodeEditor than Scintilla. If you don't have time to write such an example, I'm going to follow your previous tips and develop a CodeEditor based on VList (or cwVList) that meets my needs. Without your help, I'm doomed to take many detours.

---

If you extract a simple version from your 30,000 lines of code, 1000-3000 lines of code may not be easy.
Sometimes we need the simplest table control, sometimes we need more features, and sometimes we need the most full-featured controls.
So it is a good choice to keep multiple versions of the source code.
For example, 1,000 lines of code, 5,000 lines of code, 15,000 lines of code, 20,000 lines, and 30,000 lines, respectively save the complete source code of each version.
Like VB3.0, VB5, VB6, -Visual Studio.NET 7.0, VB.NET 2005.

For example, I want the simplest table control: you can adjust the column width, or automatically set the column width, set the number of rows, the number of columns, code to modify the cell text, set the cell background and font color, bold

get psd layer name,szie ,png byte data,like this?

Code:

---

dim pngbyte() as byte
For i = 0 To .LayersCount - 1
    Debug.Print "LayerName:" & i + 1 & "--" & .LayerPath(i),
    Debug.Print "--Layer Left,Top,Width,Height=" & .LayerX(i), .LayerY(i), .LayerWidth(i), .LayerHeight(i)
    .LayerSurface(i).WriteContentToPngByteArray pngbyte()
next

---

Olaf, there is a new PSD with the layers and groups named more succinctly.

https://www.vbforums.com/images/ieimages/2023/07/27.png

sub main will need to be modified accordingly:

Code:

---

Sub Main()
  Cairo.SetDPIAwareness

  Cairo.ImageList.AddImage "app-exit", App.Path & "\Res\app-exit.svgz" 'add the image-key and resource for the close-widget

    fAlpha.FX = 222 'init position- and zoom-values (directly set on Public-Props of the Form-hosting Class)
    fAlpha.FY = 111
    fAlpha.FZ = 1

    'every PSD-Path we exclude here from the normal PSD-Widget-Loading, will later be rendered in cwOverlay (in that exact order)
    With fAlpha.PSDExcludePaths
          .Add Empty, "stopwatch/face/swSecondHand" 'arrow-hand-top
          .Add Empty, "stopwatch/face/swMinuteHand"      'arrow-hand-right
          .Add Empty, "stopwatch/face/swHourHand"      'arrow-hand-bottom

          .Add Empty, "stopwatch/face/hourShadow" 'clock-hand-hours-shadow
          .Add Empty, "stopwatch/face/hourHand" 'clock-hand-hours

          .Add Empty, "stopwatch/face/minuteShadow" 'clock-hand-minutes-shadow
          .Add Empty, "stopwatch/face/minuteHand" 'clock-hand-minutes

          .Add Empty, "stopwatch/face/secondShadow" 'clock-hand-seconds-shadow
          .Add Empty, "stopwatch/face/secondHand" 'clock-hand-seconds

          .Add Empty, "stopwatch/bigReflection" 'all reflections
          .Add Empty, "stopwatch/windowReflection"
    End With

    fAlpha.InitFromPSD App.Path & "\Res\tank-clock-mk1.psd", "stopwatch/face/housing/surround", "app-exit"

  Cairo.WidgetForms.EnterMessageLoop

  Debug.Print "App-ShutDown (one can buffer these values for the next run):"; fAlpha.FX; fAlpha.FY; fAlpha.FZ
End Sub

---

InitFromPSD will need to be modified:

Code:

---

        Case "stopwatch/face/housing/startButton", "stopwatch/face/housing/stopButton", "stopwatch/face/housing/switchFacesButton" 'three Widget-Keys, picked for "special click-behaviour"
                W.HoverColor = vbCyan
                W.MousePointer = IDC_HAND

---

in W_Paint:

Code:

---

            Case "stopwatch/face/hourShadow", "stopwatch/face/hourHand" 'hours-shadow- and hour-hand
                Set Pat.Matrix = Pat.Matrix.TranslateCoords(19, 160) 'shift to the "rotation-point" within the Pattern
                CC.TranslateDrawings W.Width * cxPerc, W.Height * cyPerc 'shift to the center-point of the Overlay-Widget-area
                CC.RotateDrawingsDeg -7 + HDeg 'now we can rotate (the leading negative degrees are the rotation-offsets for 12 o'clock)

            Case "stopwatch/face/minuteShadow", "stopwatch/face/minuteHand" 'minutes-shadow- and minutes-hand
                Set Pat.Matrix = Pat.Matrix.TranslateCoords(44, 105) 'shift to the "rotation-point" within the Pattern
                CC.TranslateDrawings W.Width * cxPerc, W.Height * cyPerc 'shift to the center-point of the Overlay-Widget-area
                CC.RotateDrawingsDeg -61 + MDeg

              Case "stopwatch/face/secondShadow", "stopwatch/face/secondHand" 'seconds-shadow- and seconds-hand
                Set Pat.Matrix = Pat.Matrix.TranslateCoords(60, 160) 'shift to the "rotation-point" within the Pattern
                CC.TranslateDrawings W.Width * cxPerc, W.Height * cyPerc 'shift to the center-point of the Overlay-Widget-area
                CC.RotateDrawingsDeg -50 + SDeg

---

Apologies the various layers and groups were not named properly beforehand.

The forum won't let me upload the PSD file as an attachment, even zipped so I will email you the updated version.

Quote:

---

Originally Posted by yereverluvinuncleber

...there is a new PSD with the layers and groups named more succinctly.
...
The forum won't let me upload the PSD file as an attachment,
even zipped so I will email you the updated version.

---

Ok, will see that I update post 1 (with a new code-zip and a new PSD-Download-Link)...

Thanks for the cleanup (nice that you aggregated the reflections into only 2 Layers now)...

Olaf

I will probably have to overhaul each of my PSDs to create something similar to the above for each desktop widget that I want to create, building a new and distinct 'finished' PSD directly for use with RC6 and VB6.

In the past I have tended to leave the components broken up into all the minute pieces that constitute the whole, just so I can disassemble and create different versions - or copy components between PSDs to create variations. Unfortunately, that is what I gave you originally as it was the only one that was partially complete. A bit unstructured as it was a 'work in progress'. I feel bad for that now. Any others that I supply will be better constructed.

PS. That .LayerSurface(i).WriteContentToPngFile is going to be a game-changer for me, coupled with the PSDParser and widget layers. I keep struggling to determine which I want to play with next. I am working on the former but want to play with the latter. It potentially solves a few problems...

Really good stuff.

Quote:

---

Originally Posted by yereverluvinuncleber

...Crikey, VB6 program transparency with potentially multi-platform graphical controls, seems now to be here, soon it will be 64bit with TwinBasic, is the future finally arriving?

---

I feel you. Excellent work guys! Incredibly mind blowing and inspirational. Thanks!

Latest RC6 question moved here:

https://www.vbforums.com/showthread....81#post5614081

Quote:

---

Originally Posted by yereverluvinuncleber

...there is a new PSD with the layers and groups named more succinctly.

---

Have just adapted both download-links in post #1...

The PSD-Download now points to the "nicer named" PSD-File (which is also a bit smaller)...

And the new Code-Zip-Link now contains the cwAlphaImg.cls (as code) directly (so that no dependency to RC6Widgets exists)...
Also included is a new Widget-Class, which shows how one can override the built-in Tooltip with a "userdefined one" (cwUserTooltip.cls).

Olaf

Quote:

---

Originally Posted by Schmidt

The applied Hover(Color)-effect is currently using a "hard-wired" Alpha-Value of 0.25...

Well - for the next release of RC6/RC6Widgets -
I've adjusted cwAlphaImg to use the so far unused W.Tag (general purpose Variant-Prop) for that -
pre-initialized to 0.25 (but now changeable on the outside, to what you prefer).

If you don't want to wait for that next release...

---

Olaf is this next release imminent? I'd like to have this feature built-in so that I can experiment with it.

Quote:

---

Originally Posted by yereverluvinuncleber

Olaf is this next release imminent? I'd like to have this feature built-in so that I can experiment with it.

---

Since post #36 (mentioning the updated download-zips in post #1), there is no need to wait anymore...

The new Demo works with private cwAlphaImg and cwUserTooltip Classes -
(cwAlphaImg containing the new HoverAlpha-Adjustments via .Tag-Property).

Olaf

Righto, will have a look.

Excuse me for tacking this onto the end Olaf, it relates to the above. The facility to extract PNG layers from the PSD is a superb feature that I flying with, really enjoying. I am creating several of my old-style gauges and controls using it now. Simple ones at first and now I am experimenting with more complex shapes.

I do notice one thing though when using my volume widget PSD. The drop shadows that are extant within the PSD are recreated in a much harsher, darker aspect than expected. If I use the old Photoshop script to extract the various layers and use either of my other two engines (Yahoo and Xwidget) to place them on the desktop, the shadows in the transparent areas appear exactly as per the original PSD, they are replicated faithfully. If I use your simple PSD to extract the same layers and display them in my VB6 program the shadows are far deeper and much more pronounced.

Is there a Cairo switch or a configuration that I can tweak to make the shadows less harsh so that they appear exactly as per the PSD? Is there a Cairo quality setting I can tinker with or does this occur during extraction?

Forgive the quality of the images, they lost a bit of quality transferring from my 4K monitor through imgur to here. These are tiny little desktop widgets that sit top right of the monitor and so when expanded they look a little blurry.

https://www.vbforums.com/images/ieimages/2023/12/1.png


https://www.vbforums.com/images/ieimages/2023/12/2.png

You should be able to see that the top image is that produce by your simple PSD parser and that those images have deeper shadows, whereas the bottom image's shadows appear lighter are, in fact exactly as per the PSD. If there is anything I can do to correct this please let me know.

https://www.vbforums.com/images/ieimages/2023/12/3.png

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.

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

https://www.vbforums.com/images/ieimages/2023/12/4.png

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.

Quote:

---

Originally Posted by yereverluvinuncleber

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

https://www.vbforums.com/images/ieimages/2023/12/4.png

---

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

Will do, thankyou Olaf, coming by email!

Quote:

---

Originally Posted by Schmidt

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.

Quote:

---

Originally Posted by yereverluvinuncleber

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:

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:

https://www.vbforums.com/images/ieimages/2023/12/6.png



Olaf

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.

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:

Code:

---

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

That does it, perfectly.

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

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.

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.

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.

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

Quote:

---

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.

---

BUMP for Olaf.

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.

Code:

---

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

https://www.vbforums.com/images/ieimages/2025/09/1.png

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