SweetyVD (Visual Designer)

Share your advanced PureBasic knowledge/code with the community.
Bitblazer
Enthusiast
Enthusiast
Posts: 732
Joined: Mon Apr 10, 2017 6:17 pm
Location: Germany
Contact:

Re: SweetyVD (Visual Designer)

Post by Bitblazer »

The UI look has been a topic of discussion for a while. I remember the licensing of sciter was discussed, but i assume it was simply not affordable.

What i did previously, was to use a skin engine like Skincrafter or a windowblinds compatible engine to offer a more modern application look. But i stopped offering skinned apps as they usually just create more problems. Especially for those people who care enough about their desktop look, they mostly hate skinned applications because that usually interferes with their personal desktop software and their own UI design choice.

But an integrated sciter based solution would be very useful.
webpage - discord chat links -> purebasic GPT4All
User avatar
Caronte3D
Addict
Addict
Posts: 1027
Joined: Fri Jan 22, 2016 5:33 pm
Location: Some Universe

Re: SweetyVD (Visual Designer)

Post by Caronte3D »

mohsen wrote:I'm building a new designer...
Wow! :shock:
It Looks very promissing!
I will be happy to be an alpha tester :wink:
User avatar
ChrisR
Addict
Addict
Posts: 1127
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

Re: SweetyVD (Visual Designer)

Post by ChrisR »

Updated v2.1.0

Well, it's been a little while, but I've restarted a bit, the dev of my baby's...

There's been a lot of changes, I've been trying to structure the code better.
so I don't get lost myself :wink:

Main points:
Decrease the flickering (on Windows) due to the overlap of Gadgets and Canvas
Design changed with a pseudo ribbon and a setting panel
Selection of multiple gadgets to move them together
Group Gadgets for future selections
Align Gadget to Left, Right, Top, Bottomand Same Width, Height
Play (Compil and Run)
...
Maybe it will avoid the project going to the trash.
It' s still Open on GitHub, the links are on 1st post.


Image


Note on Linux:
Use Purebasic version 5.61 (or 5.60). The Gadgets are Not drawn over the canvas with the following versions (5.62, 5.70, 5.71). I don't know why!
Screenshot available on the 2nd post

Thanks for your feedbacks, they are Welcome :)
FlatEarth

Re: SweetyVD (Visual Designer)

Post by FlatEarth »

@ChrisR : Very promising, congratulations. :wink:

My Comments Only For Windows Platform:

To reduce flicker in Windows, it may be better to use capture gadgets instead of using (overlap of Gadgets and Canvas).
viewtopic.php?f=5&t=70746&hilit=capture ... B+64bit%3B

For multiple selection by dragging the rectangle, the IntersectRect_ function can also be used to detect selection controls.
User avatar
ChrisR
Addict
Addict
Posts: 1127
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

Re: SweetyVD (Visual Designer)

Post by ChrisR »

Thanks for your feedback. Have you tried it ?

I used 2 things to reduce flicker in Windows:
Hide the Canvas Gadget(s) while moving or resizing and then make them visible again.
Add #WS_CLIPCHILDREN GWL_STYLE On the drawing area canvas, the grid.

It's not perfect, but it's already much better than before, really better.
The flicker on windows is a big headache
and I try to avoid using the APIs as much as possible for cross platform compatibility.

Thanks for your link on capture gadgets!, I'll check it out later
:)
FlatEarth

Re: SweetyVD (Visual Designer)

Post by FlatEarth »

ChrisR wrote:Thanks for your feedback. Have you tried it ?
you're welcome ,I've tried it and I'm pretty sure :D :wink:
the #WM_PRINT can capture hidden controls so the main control will remain hidden forever and you use the image of it on the canvas.

This code is also effective in reducing flicker, for example: when you want to move controls with handles

Code: Select all

Procedure SetRedraw(MainForm, State)
  If State = #False
    SendMessage_(GadgetID(MainForm),#WM_SETREDRAW,0,0)
  Else 
    SendMessage_(GadgetID(MainForm),#WM_SETREDRAW,1,0)
    RedrawWindow_(GadgetID(MainForm),0,0,#RDW_INVALIDATE|#RDW_ERASE|#RDW_ALLCHILDREN|#RDW_UPDATENOW)   
  EndIf
EndProcedure

User avatar
ChrisR
Addict
Addict
Posts: 1127
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

Re: SweetyVD (Visual Designer)

Post by ChrisR »

I have basically the same procedure in the Sweetymodule.pbi, but I don't use it currently

Code: Select all

  Procedure SetWinRedrawON(Gadget.i, State.b=#True)
    CompilerIf #PB_Compiler_OS = #PB_OS_Windows
      If DisplayHandleCornerOnMove = #False
        SendMessage_(GadgetID(Gadget),#WM_SETREDRAW,State,0)
        If State = #True
          ;InvalidateRect_(GadgetID(Gadget), #Null, State)
          RedrawWindow_(GadgetID(Gadget), #Null, #Null, #RDW_INVALIDATE | #RDW_UPDATENOW)     ;#RDW_ERASE | #RDW_FRAME | #RDW_INVALIDATE | #RDW_ALLCHILDREN
        EndIf
      EndIf
    CompilerEndIf
  EndProcedure
On the Main Canvas Container,

Code: Select all

SetWindowLong_(GadgetID(#DrawArea), #GWL_STYLE, GetWindowLong_(GadgetID(#DrawArea), #GWL_STYLE) | #WS_CLIPCHILDREN)
Gives approximately the same result without having to call the procedure before and after each moving.

I'm going to watch to Capture Gadget, sounds really interesting If I understand correctly.
With the captured Gadget visible and the real gadget hidden
And all that play between what's hidden and what's visible... with handle corner on top and self-managed ZOrder Gadget...
But it seems only for Windows
Thanks :)
Last edited by ChrisR on Wed Jan 29, 2020 5:23 pm, edited 1 time in total.
FlatEarth

Re: SweetyVD (Visual Designer)

Post by FlatEarth »

Yes I also said in the first post that my comments are for Windows.
However, this method has disadvantages that need to manage. few controls such as spin,ExplorerCombo,Editor not capture properly.

Of course, another method comes to my mind, but I haven't tested it. I'll try and say the result.
BarryG
Addict
Addict
Posts: 3292
Joined: Thu Apr 18, 2019 8:17 am

Re: SweetyVD (Visual Designer)

Post by BarryG »

You need to use GetWindowLongPtr_() and SetWindowLongPtr_() instead of GetWindowLong_() and SetWindowLong_(), too. This was mentioned in a PureBasic blog post some time ago, when PureBasic became 64-bit. Just a simple search-and-replace in your sources.
User avatar
ChrisR
Addict
Addict
Posts: 1127
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

Re: SweetyVD (Visual Designer)

Post by ChrisR »

Yes, thanks :)
Not the first time I've forgotten these two WindowLongPtr, the copy-paste defect also.
It is fixed now and updated on Github.

Edit: With my 100th post, I've moved to Enthusiast but I already was :wink:
User avatar
Caronte3D
Addict
Addict
Posts: 1027
Joined: Fri Jan 22, 2016 5:33 pm
Location: Some Universe

Re: SweetyVD (Visual Designer)

Post by Caronte3D »

Hi, your app is very nice, I like it, but... why not add load/import functionality? :?
Without this possibility it's almost unusable for complex interfaces where we must do changes over time.
User avatar
ChrisR
Addict
Addict
Posts: 1127
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

Re: SweetyVD (Visual Designer)

Post by ChrisR »

Caronte3D wrote:Hi, your app is very nice, I like it, but... why not add load/import functionality? :?
Thanks :)
Load/Open should be the next step now that it's flashing a little bit less and that it has the multi-selection and the grouped moving.

For the moment the sheet is blank. I can't promise anything for the time it will take.
SweetyVD is just an exercice for me, for the fun in my spare time.
But it's an exciting subject and I've already gone a lot further than I originally thought.
I'll try to continue a little more.

I believed a lot in Amitris, but I don't know what happened behind the scenes :!:
I hope Moshen will continue his project because the first beta was very beautiful, very fluid and without flickering ...
Only the properties grid was too complicated to my taste... (it's probably not so nice, in SweetyVD without a real grid but everything is easily accessible in 1 click).
It was seeing the promising Amitris that made me want to go on a little longer.
User avatar
ChrisR
Addict
Addict
Posts: 1127
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

Re: SweetyVD (Visual Designer)

Post by ChrisR »

FlatEarth wrote:However, this method has disadvantages that need to manage. few controls such as spin,ExplorerCombo,Editor not capture properly.

Of course, another method comes to my mind, but I haven't tested it. I'll try and say the result.
I've tested Rashad's CaptureGadget examples.
Only Windows but I understand All the interest for a designer, really interesting.
The suggested example (without moving) of SpinGadget Capture seems to work, what's the concern about the few contols not properly captured ?
Let us know for the other method.
FlatEarth

Re: SweetyVD (Visual Designer)

Post by FlatEarth »

ChrisR wrote:Let us know for the other method.
I wrote a few lines of code to illustrate what I mean.Of course the codes are dirty and not optimized.
In these codes, instead of using a dedicated canvas for each gadget, I only use one canvas that sits on the main canvas.
Of course requires more work but the result seems to me desirable because :

1-Prevents the creation of additional canvas.
2-The controls are moved without flickering

I do not know maybe not good. :D

Code: Select all

Procedure SetGadgetZOrder(gadget, zorder=0) 
  If IsGadget(gadget)
    If zorder = 0   ;Call with zorder=0 just after creating each gadget
      SetWindowLong_(GadgetID(gadget), #GWL_STYLE, GetWindowLong_(GadgetID(gadget), #GWL_STYLE) | #WS_CLIPSIBLINGS)
    ElseIf zorder = 1   ;Call with zorder=1 to later bring a gadget to the top of the z-order
      SetWindowPos_(GadgetID (gadget), #HWND_BOTTOM, 0,0,0,0, #SWP_NOSIZE | #SWP_NOMOVE)
    Else   ;Call with zorder=-1 to later bring a gadget to the bottom of the z-order
      SetWindowPos_(GadgetID(gadget), #HWND_TOP, 0, 0, 0, 0, #SWP_NOSIZE | #SWP_NOMOVE)
    EndIf
  EndIf
EndProcedure

Structure VDG_Data
  Btn.i
  IsSelected.b
EndStructure  

Global NewList  GList.VDG_Data()

Enumeration 
  #UnderForm
  #OverForm
  #AddGadget
EndEnumeration

Procedure CreateGadget(X,Y,W,H)
  OpenGadgetList(#UnderForm)
    AddElement(GList())
    GList()\Btn = ExplorerComboGadget(#PB_Any,X,Y,W,H,"")
  CloseGadgetList() 
EndProcedure

Procedure IsMouseOverGadget(dummyX,dummyY,GX,GW,GY,GH)
  If (dummyX > GX) And ( dummyX < (GX + GW) ) And 
     (dummyY > GY) And ( dummyY < (GY + GH) )   
    ProcedureReturn 1
  EndIf
EndProcedure

Procedure Canvas_Events_Handler()
  
  Protected  eg,et,MMX,MMY,_Gadget
  Static g_Drag,LBD_X,LBD_Y
   
  eg = EventGadget()
  et = EventType()

  Select et    
    Case #PB_EventType_LeftButtonDown
      
      LBD_X = GetGadgetAttribute(eg,#PB_Canvas_MouseX)
      LBD_Y = GetGadgetAttribute(eg,#PB_Canvas_MouseY)  
      
      ResetList(GList())
      ForEach GList()
        _Gadget = GList()\Btn
        If IsMouseOverGadget(LBD_X,LBD_Y,GadgetX(_Gadget),GadgetWidth(_Gadget),GadgetY(_Gadget),GadgetHeight(_Gadget))
          g_Drag = #True
          GList()\IsSelected = #True
        EndIf
      Next
      
    Case #PB_EventType_MouseMove
      
      If g_Drag
        MMX = GetGadgetAttribute(eg,#PB_Canvas_MouseX)  ;- LBD_X
        MMY = GetGadgetAttribute(eg,#PB_Canvas_MouseY)  ;- LBD_Y
        ResetList(GList())
        ForEach GList()
          If GList()\IsSelected
            ResizeGadget(GList()\Btn,MMX,MMY,#PB_Ignore,#PB_Ignore)
          EndIf
        Next
      EndIf         
      
    Case #PB_EventType_LeftButtonUp
      If g_Drag
        g_Drag = #False
        
        ResetList(GList())
        ForEach GList()
          If GList()\IsSelected 
            GList()\IsSelected = #False
          EndIf  
        Next    
      EndIf
      
  EndSelect 
EndProcedure  

If OpenWindow(0, 0, 0, 800, 600, "", #PB_Window_SystemMenu | #PB_Window_ScreenCentered|#PB_Window_SizeGadget)
  
  ButtonGadget(#AddGadget,650,20,100,30,"Add Gadget")
 
  CanvasGadget(#OverForm,0,0,600,600)
  SetGadgetZOrder(#OverForm) 
  SetGadgetZOrder(#OverForm,1) 
  BindGadgetEvent(#OverForm,@Canvas_Events_Handler())
  
  CanvasGadget(#UnderForm,0,0,600,600,#PB_Canvas_Container)
  CloseGadgetList()  
  
  Repeat
    Event = WaitWindowEvent()
    If Event = #PB_Event_Gadget
      Select EventGadget()
        Case #AddGadget : CreateGadget(20,20,100,30)  
      EndSelect
    EndIf     
  Until Event = #PB_Event_CloseWindow
EndIf
FlatEarth

Re: SweetyVD (Visual Designer)

Post by FlatEarth »

ChrisR wrote: The suggested example (without moving) of SpinGadget Capture seems to work, what's the concern about the few contols not properly captured ?
1- I have already tested the spin control, it works fine with a slight change in Rashad codes when moving and resizing.
2- For editor and shortcut it is easy to use string control because it is properly captured.
3- Nothing comes to my mind for ExplorerComboGadget. :D
Post Reply