Results 1 to 19 of 19

Thread: [RESOLVED] Cairo Wiget / Form setout question

  1. #1

    Thread Starter
    Hyperactive Member -Corso->'s Avatar
    Join Date
    Oct 2021
    Posts
    379

    Resolved [RESOLVED] Cairo Wiget / Form setout question

    Hi to the Cairo Squad,

    I finally found 'right' widget tutorial batch to start at, but I've a question regarding setout of things.

    At the moment, I'm printing image tiles to a standard form's Picturebox. However, I'd like to create a floating widget with buttons to use above that.

    Do I need to: Stop using the Standard Form with Picturebox and move to a Widget Form only? As in put the picture box inside the Widget Form? Is that even achievable?

    Name:  Widget Wombles.jpg
Views: 429
Size:  155.6 KB

    This is what I'm sort of planning but am unsure of what to do. Don't know why I'm having trouble picking up Widget tuts. I seem to be missing something...
    Thanks for advice(!)

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

    Re: Cairo Wiget / Form setout question

    Quote Originally Posted by -Corso-> View Post
    Don't know why I'm having trouble picking up Widget tuts. I seem to be missing something...
    It's not just you, I've been using (and been a proponent of) Olaf's library for mostly non-UI stuff well over a decade, but there's something about the Widget engine that I struggle with to this day. I think a big part of it is that it's hard to just "twiddle" about with it to figure out how it works. You kinda have to know what you want and what you are doing before you can really bend it to your will.

    Beyond Olaf - Reexre and ColinE66 here at the forum have been able to grok the RC* widget engine, so hopefully you will get some expert help.

    Failing that, I'm willing to give it a shot if you can post a small sample project for me to muck about with.

  3. #3

    Thread Starter
    Hyperactive Member -Corso->'s Avatar
    Join Date
    Oct 2021
    Posts
    379

    Re: Cairo Wiget / Form setout question

    Hi JpBro, ahh, I thought I was going mildly insane with the Widget stuff. I thought it was going to be easy, but it's the 'where do I find what this does' issue. One needs to have the divine powers of prescience.
    The test program is 2.2 gig, so I'll make a mini form assembly in a while.

  4. #4

    Thread Starter
    Hyperactive Member -Corso->'s Avatar
    Join Date
    Oct 2021
    Posts
    379

    Re: Cairo Wiget / Form setout question

    Hi again JpBro.
    Ok, shamelessly, I've done nothing of consequence, I've only made a form with a picturebox on it, with the central backdrop. I made a large circle starfield for collecting the planets within, and then some small planet images which would be buttons.
    So, really, I've done nothing, as I just don't know where to start. As before, do we only make this large, moveable widget on a widget form, or is it safe on the normal form? I have zero idea.

    Name:  Widget Sample Test.jpg
Views: 419
Size:  102.3 KB

    Anyway, it's not the test RPG spell book or anything neat yet, (as I'm still designing it), but functionality-wise it does represent everything I'm trying to do with it.

    Widget Testing.zip

  5. #5
    PowerPoster
    Join Date
    Aug 2010
    Location
    Canada
    Posts
    2,412

    Re: Cairo Wiget / Form setout question

    First, I don't know if it's possible to show RC6 widgets on a normal VB6 form or not. It might be, but I suspect it will complicated, especially compare to using an RC6 form.

    Have you had a look at the RC5 Widgets tutorial demos? They're here and might be useful: https://www.vbrichclient.com/Downloa...tsTutorial.zip

  6. #6

    Thread Starter
    Hyperactive Member -Corso->'s Avatar
    Join Date
    Oct 2021
    Posts
    379

    Re: Cairo Wiget / Form setout question

    First, I don't know if it's possible to show RC6 widgets on a normal VB6 form or not. It might be, but I suspect it will complicated, especially compare to using an RC6 form.
    And this sounds like a very big problem, that would mean having to build every type of added control from scratch... Checkboxes to drop menus to everything else. I don't have the skills to do that yet.
    Yep, that's the tutorial set I recently found.

  7. #7
    PowerPoster
    Join Date
    Aug 2010
    Location
    Canada
    Posts
    2,412

    Re: Cairo Wiget / Form setout question

    I could be wrong about it not being possible to use an RC6 widget on a VB6 form. Hopefully Olaf will be able to provide an answer.

    There are a bunch of pre-written Widgets in the vbWidgets.dll though, currently:

    • Accordeon
    • Button
    • DirList
    • DropDown
    • DropDownList
    • FileList
    • Frame
    • GlowButton
    • Grid
    • HScrollBar
    • Image
    • Label
    • LabeledTextBox
    • MDIMock
    • Menu
    • MenuBar
    • ProgressBar
    • Resizer
    • ScoringLabel
    • ScrollBar
    • StatusBar
    • TextBox
    • Toolbar
    • Tree
    • UpDown
    • VList
    • VScrollBar


    So you wouldn't have to create all of your own controls.

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

    Re: Cairo Wiget / Form setout question

    So here's an example of the kind of difficulties I'm facing when trying to put together a small demo.

    First thing I wanted to do is put a background image on a form, but there's no RC6 form Picture or Image property. I do see a Form_Paint event, so I figured I'd just try drawing the background myself.

    Fortunately, I have used Cairo a bit, so I know I am looking for a Surface (from which I can create a drawing context) or a Context (to which I can draw directly). I see that there is Form.WidgetRoot.Context property, and this sounds promising as I suspect it's a context for the form's client area to which I should be able to draw my background image.

    So I add the background image to the Form.WidgetRoot.Cairo.ImageList collection with a key called "bg" as follows:

    Code:
    Private Sub Class_Initialize()
      Set Form = Cairo.WidgetForms.Create(vbSizable, "Main Form")  ' Create a form
      Form.WidgetRoot.Cairo.ImageList.AddImage "bg", App.Path & "\Background Image.jpg" ' Add the background image to the Form's Cairo image list
    End Sub
    And then I draw the background onto the form's context in the Form_Paint event:

    Code:
    Private Sub Form_Paint()
       With Form.WidgetRoot.context
          .RenderSurfaceContent "bg", 0, 0, Form.Width, Form.Height
       End With
    End Sub
    Feeling pretty confident, I press F5. Well, crap:

    Name:  2022-05-13_21-43-33.jpg
Views: 392
Size:  9.0 KB

    Just an empty form. I go back and try using Form.WidgetRoot.Surface.CreateContext to start a new context in case that's necessary, but no luck. I fiddle around with a few more things, double-chceck that the image is loading properly by writing it back out to disk after loading, etc...but nothing.

    For some reason I load the original code back up and drag the window part way off the screen then drag it back on-screen again. The part of the window that was dragged off-screen now shows the background image!

    Name:  2022-05-13_21-44-02.jpg
Views: 370
Size:  19.8 KB

    Why? I don't know. Why isn't it showing before being dragged off-screen? I don't know that either.

    I figure there's got to be something is one of Olaf's demos, so I start looking through them. The Widgets and Theme Engine demo sounds promising - I can imagine image related stuff might be in a "theming" demo, but unfortunately the folder only has a file named "(not ready yet...)". Nevermind, maybe in Widgets (MouseCursors and ImageKeys). The MouseCursors part doesn't sound relevant, but I know I'm going to be working with an ImageList, so the ImageKeys part has promise.

    So I run the demo, and the form has a background image. This looks like the right track. Here's the code I find:

    Code:
          Form.WidgetRoot.ImageKeyRenderBehaviour = ImgKeyRenderRepeat
          Form.WidgetRoot.ImageKey = "bgWood"
    There are no comments, but that sure looks like the magic formula to me. After changing my demo's code to the following:

    Code:
    Option Explicit
    
    Public WithEvents Form As cWidgetForm
    
    Private Sub Class_Initialize()
      Set Form = Cairo.WidgetForms.Create(vbSizable, "Main Form")
      Form.WidgetRoot.Cairo.ImageList.AddImage "bg", App.Path & "\Background Image.jpg"
      
      Form.WidgetRoot.ImageKey = "bg"
      Form.WidgetRoot.ImageKeyRenderBehaviour = ImgKeyRenderStretched
    End Sub
    We finally have liftoff! An automatically rendered/resized/stretched background image on an RC6 Form:

    Name:  2022-05-13_21-54-36.jpg
Views: 335
Size:  23.9 KB

  9. #9
    Frenzied Member
    Join Date
    Aug 2020
    Posts
    1,421

    Re: Cairo Wiget / Form setout question

    Quote Originally Posted by -Corso-> View Post
    And this sounds like a very big problem, that would mean having to build every type of added control from scratch... Checkboxes to drop menus to everything else. I don't have the skills to do that yet.
    Yep, that's the tutorial set I recently found.

    In most cases, I use a ucPanel to achieve the interaction between VB6-Forms and RC6.Widgets.

    If you search for the keyword "ucPanel" in vbForums, you will find many very useful RC5/RC6 examples.

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

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

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

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

    Re: Cairo Wiget / Form setout question

    Quote Originally Posted by SearchingDataOnly View Post
    In most cases, I use a ucPanel to achieve the interaction between VB6-Forms and RC6.Widgets.
    Those are great links, and my apologies for not including you in my list of RCx UI "pioneers" alongside reexre and ColinE66. I always forget you changed your name!

  11. #11
    Frenzied Member
    Join Date
    Aug 2020
    Posts
    1,421

    Re: Cairo Wiget / Form setout question

    Quote Originally Posted by jpbro View Post
    Those are great links, and my apologies for not including you in my list of RCx UI "pioneers" alongside reexre and ColinE66. I always forget you changed your name!
    Although I use RC5/RC6 a lot (including vbWidgets), my memory is very poor, and if I don't use vbWidgets for 3 months in a row, I'll forget a lot of these tips/tricks.

    ColinE66 is a real user-controls expert, but it seems he rarely comes to this forum, which is a big loss for RC5/RC6 enthusiasts.

  12. #12

    Thread Starter
    Hyperactive Member -Corso->'s Avatar
    Join Date
    Oct 2021
    Posts
    379

    Re: Cairo Wiget / Form setout question

    We finally have liftoff!
    Nice work JpBro! Getting there!

    SearchingDataOnly Ohhhh. An Panel insert.. Ah that also sounds like it might work. I'll start digging too. Thanks.

  13. #13
    PowerPoster
    Join Date
    Jun 2013
    Posts
    7,219

    Re: Cairo Wiget / Form setout question

    The Minimal-Code to ensure a Panel (with a BG-Image) on a normal VB6-Form is this:
    Code:
    Option Explicit
    
    Private WithEvents Panel As cWidgetForm
    
    Private Sub Form_Load()
      Cairo.ImageList.AddImage "bg", "c:\temp\tulips.jpg" 'add a resource-bg-image under a Key
      Cairo.ImageList.AddIconFromResourceFile "ico", "shell32", 167 'add a resource-ico under a Key
      
      Set Panel = Cairo.WidgetForms.CreateChild(hWnd)
          Panel.WidgetRoot.ImageKey = "bg" 'ensure a BG-Image on the WidgetForm-Panel
    End Sub
    
    Private Sub Form_Resize() 'ensure full Form-coverage of the Panel
      ScaleMode = vbPixels: Panel.Move 0, 0, ScaleWidth, ScaleHeight
    End Sub
    And in the rare case, one wants to draw stuff directly on such a cWidgetForm-instance,
    this can be ensured via the .WidgetRoot.VBDrawing Object...

    Here's additional "Paint-Event-triggered code", which can be added to the minimal-example above:
    Code:
    Private Sub Panel_Paint() '<- to ensure normal Drawings directly on the (Widget)Form-Object...
      With Panel.WidgetRoot.VBDrawing '... one can use the VBDrawing-Object of the WidgetRoot
        .Cls 'this will clear any previous Drawings (but not the bg-image)
    
            .CC.RenderSurfaceContent "ICO", 150, 10 'then one can either use the Cairo-CC
    
            DrawOnFormDirectly Panel.WidgetRoot.VBDrawing '...or pass the VBDrawingObject along to use with VB6-Drawing-Commands
        .Refresh 'this will refresh the Form-BackBuffer (similar to when AutoRedraw was enabled on a normal VB-Form)
      End With
    End Sub
    
    Private Sub DrawOnFormDirectly(Canvas As Printer)
      'Canvas As Printer will cast and treat the passed VBDrawing-Object as a VB6-Canvas
      '(ensuring Cairo-AntiAliasing for all of the old VB6-Drawing-Methods)
      Canvas.FillColor = vbYellow: Canvas.FillStyle = vbFSSolid
      Canvas.ForeColor = vbCyan
      Canvas.Print "Some", "tabbed", "Text" 'this is the normal VB6-Print-Command
      Canvas.DrawWidth = 2
      Canvas.Circle (150, 150), 50, vbGreen
      Canvas.Line (0, 0)-(Canvas.ScaleWidth, Canvas.ScaleHeight), vbMagenta
    End Sub
    HTH

    Olaf

  14. #14
    PowerPoster
    Join Date
    Jun 2013
    Posts
    7,219

    Re: Cairo Wiget / Form setout question

    Quote Originally Posted by -Corso-> View Post
    ...I've only made a form with a picturebox on it, with the central backdrop.
    I made a large circle starfield for collecting the planets within, and then some small planet images which would be buttons.
    So, really, I've done nothing, as I just don't know where to start. As before, do we only make this large, moveable widget on a widget form, or is it safe on the normal form? I have zero idea.

    Name:  Widget Sample Test.jpg
Views: 419
Size:  102.3 KB
    Widget Testing.zip
    The most performant way to ensure a (widget-based) UI in a Game is,
    to host the UI in a separate TopLevel-"Overlay-Form", which is fully transparent ...
    (on Top of the MainForm, which shall only be responsible for rendering GameStuff in its Render-Loop).

    The following Demo shows, how to do that (including two self-implemented small Widgets):
    GameOverlayDemo.zip

    HTH

    Olaf

  15. #15
    Hyperactive Member
    Join Date
    Jul 2013
    Posts
    400

    Re: Cairo Wiget / Form setout question

    Hi Olaf,
    I sent you a PM a few weeks ago and got no answer, I wonder if I'm in your black list

    (sorry for jeopardize the thread, a useful one btw)
    Carlos

  16. #16

    Thread Starter
    Hyperactive Member -Corso->'s Avatar
    Join Date
    Oct 2021
    Posts
    379

    Re: Cairo Wiget / Form setout question

    And as the Vb Monkeys waded into the seaside silt and scuffled their arms about, they began diligently, sifting through the opaque mud for pippies and small clams. With a resounding roar of two twin Mercury motors, Olaf powers his sleek Phantom Cruiser to shore and then proceeds to tip a drum of open bananas into the surf. “There you go fellas!” And the boat powers off again.
    *Loud monkey screeching.*

    Thanks Olaf!

    Ahhhah, now, no doubt I'll have to transfer all the Picturebox mouse events to the invisible form for X/Y and click trapping. Plus my vb controls already on the form will be behind this glass wall too... I'll have to edit the main program a bit. But all the same, thanks for doing this Olaf, I'll be able to turn this into something that's not been seen in any RPG game before. (But super handy!)

    Name:  satania-excited.jpg
Views: 343
Size:  19.9 KB

  17. #17
    PowerPoster
    Join Date
    Jun 2013
    Posts
    7,219

    Re: Cairo Wiget / Form setout question

    Quote Originally Posted by -Corso-> View Post
    Ahhhah, now, no doubt I'll have to transfer all the Picturebox mouse events to the invisible form for X/Y and click trapping.
    Plus my vb controls already on the form will be behind this glass wall too...
    No, the areas on the UI-OverlayForm which are 100% transparent, are "fully click-through"
    (thus nothing needs to be changed on the existing Game-MainForm regarding MouseEvents).

    The only thing which needs to be handled with a bit of extra-code,
    is the KeyBoard-Focus (the UI-Overlay-Form will steal it from the Game-Form,
    when a Widget is clicked on it...).

    But that's easy enough to fix - by:
    - making the KeyDown/KeyPress/KeyUp-Handlers on the Game-MainForm Public instead of Private
    - and then re-delegating from inside the (still Private) Key-Handlers of the UI-OverlayForm ... e.g.
    Code:
    'from an existing Key-Handler in the cfOverlay-Form-Class, we delegate all Keys to the GameForm
    Private Sub Form_KeyDown(KeyCode As Integer, Shift As Integer)
      If KeyCode = vbKeyEscape Then Form.Unload 'internal, UI-Overlay-Form related KeyHandling
      fMain.Form_KeyDown KeyCode, Shift '<- make all Key-Downs known also in the GameForm
    End Sub
    HTH

    Olaf

  18. #18
    PowerPoster
    Join Date
    Jun 2013
    Posts
    7,219

    Re: Cairo Wiget / Form setout question

    Quote Originally Posted by Carlos Rocha View Post
    Hi Olaf,
    I sent you a PM a few weeks ago and got no answer, I wonder if I'm in your black list

    (sorry for jeopardize the thread, a useful one btw)
    Sorry, had it on my "to-reply-soon"-stack - but then missed to come back to it...

    Will try to finish the RC6 (into its "final, bin-compatible form") soon -
    but there's still a few "opened up and not yet closed" cases (e.g. WebView2, new SQLite-version etc.).

    Regards,

    Olaf

  19. #19

    Thread Starter
    Hyperactive Member -Corso->'s Avatar
    Join Date
    Oct 2021
    Posts
    379

    Re: [RESOLVED] Cairo Wiget / Form setout question

    No, the areas on the UI-OverlayForm which are 100% transparent, are "fully click-through"
    (thus nothing needs to be changed on the existing Game-MainForm regarding MouseEvents).
    Ah! I'm playing with it, and I JUST found that out. I was going to say, but you beat me to the punch. I was REALLLY surprised that it has this function. It is particularly Awesome. Thanks again!

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