PureBasic Forums - English

http://www.purebasic.com
https://www.purebasic.fr/english/

IceDesign GUI designer

https://www.purebasic.fr/english/viewtopic.php?t=74711

Page 4 of 49

Re: IceDesign

Posted: Sun Mar 14, 2021 4:41 pm
by ChrisR
Thank you for your feedback, it is appreciated :)

You are right, it is sharper and clearer without the transparency.
I was a little hesitant about the transparency to see possible gadgets hiden behind

And It's perfect for the specific Frame case, with a full transparency, to see the gadgets behind and be able to select them 8)

For the Frame, in addition, I have drawn the borders to look like the real one, if it is good to have

Code: Select all

If GadgetType(\Gadget) = #PB_GadgetType_Frame
  DrawAlphaImage(ImageID(\Capture), \X, \Y)
  DrawingMode(#PB_2DDrawing_Outlined)
  Line(\X+1, \Y+1, 1, \Height-2, $A0A0A0) : Line(\X+2, \Y+2, 1, \Height-4, $696969)
  Line(\X+1, \Y+1, \Width-2, 1, $A0A0A0)  : Line(\X+2, \Y+2, \Width-4, 1, $696969)
  Line(\X+\Width-2, \Y+1, 1, \Height-2, $FFFFFF) : Line(\X+\Width-3, \Y+2, 1, \Height-4, $E3E3E3)
  Line(\X+1, \Y+\Height-2, \Width-2, 1, $FFFFFF) : Line(\X+2, \Y+\Height-3, \Width-4, 1, $E3E3E3)
  DrawingMode(#PB_2DDrawing_AlphaBlend)
  DrawingFont(GetGadgetFont(\Gadget))
  DrawText(\X + 9, \Y, GetGadgetText(\Gadget), RGBA(0,0,0,235), RGBA(0,0,0,0))
Looking at the Frames allowed me to see a big bug with an endless loop :?
If 2 frames are overlapping each other with a click at the intersection (related to MoveElement #PB_List_Last and continue the loop in case of Frames)
It's fixed now

I updated with the link in the 1st post

Re: IceDesign

Posted: Sun Mar 14, 2021 6:49 pm
by Amitris_de
you're welcome, It got much better. :wink:
can this codes help you that to detect clicking on panel tabs ??
that's mean : change the top layer panel tab and see the contents of the tab without opening the container.
of course, I did not test for Dpi aware mode.

X = MouseX
Y = MouseY

Code: Select all

If CountGadgetItems(Gadget)
  For i=0 To CountGadgetItems(Gadget)-1
    SendMessage_(GadgetID(Gadget),#TCM_GETITEMRECT,i,@r.rect) 
    If (Y >= GadgetY(Gadget) And Y <= GadgetY(Gadget) + (r\bottom-r\top))  And
       (X >= GadgetX(Gadget)+r\left And X <= GadgetX(Gadget)+r\left+(r\right-r\left))
      SetGadgetState(Gadget,i)
    EndIf            
  Next          
EndIf

Re: IceDesign

Posted: Sun Mar 14, 2021 7:54 pm
by ChrisR
Interesting idea :)
I will look on how it could be done, it is not only SetGadgetState(PanelGadget,i) in my case.
In the current code, it would be rather, open the panel, change tabs and close the panel

To note that when I close a container, the internal drawing area is enlarged with the "disabled grid" drawn
It allows to keep the design of the grid if the panel (or other containers) is enlarged.

Re: IceDesign

Posted: Sun Mar 14, 2021 11:19 pm
by ChrisR
Amitris_de wrote:change the top layer panel tab and see the contents of the tab without opening the container.
of course, I did not test for Dpi aware mode.
It's done, thanks for this great idea :)
It looks OK with windows 10 by changing the scaling to 150%.
But I did not test it with Windows 7 DPI awareness (I only have it in Virtual Machine)

Re: IceDesign

Posted: Sun Mar 14, 2021 11:47 pm
by BarryG
Looks and feels good; I like it! Keep going.

Re: IceDesign

Posted: Mon Mar 15, 2021 6:53 am
by Amitris_de
@ChrisR : You're welcome, glad you liked it. :)

Re: IceDesign

Posted: Mon Mar 15, 2021 3:02 pm
by ChrisR
@BarryG
Glad that you like it, I will try to get to the end this time.
It's a big job so you have to be patient, me too :wink:

@Amitris
The tab change is a good point. I guess it will be useful to you if you are working on a single canvas, as in the great Editor Factory
I guess it is much more complicated to simulate the functioning of the ScrollbBar of a ScrollArea, to work as in a real Gadget.

I have updated with:
- changing the tab of a Panel to see its content without the need to open the Panel
- the window is drawn without transparency to be clearer
- auto resizing some components depending on the scaling rate, especially for Windows 7 DPI awareness
  • 125% is supported for Windows 7 but not really 150%. There would be a little more work to do
    There is no problem at any rate with Windows 10 which works like a zoom

Re: IceDesign

Posted: Fri Apr 02, 2021 11:15 am
by ChrisR
I continued with:

Redraw the captured window and the "chrome" buttons
IceDesign with Properties, toolbar, settings should be DPI aware now
At choice, dark or light theme for toolbar and progress bar
Added Settings panel with auto close on lost focus
And mainly, a new property grid, I hope it will be appreciated
In properties, fonts and images are not yet done
but other properties should be operational
with included, the Vertical or Horizontal ScrollBar flags (#PBS_VERTICAL, #SBS_VERT or #TBS_VERT). To see if it would be interesting to update other constants

There is still some work to do (font, images, code creation,...) but it's progressing.

I'm a bit tired, saturated with all the tests to do, your feedbacks are appreciated :)

The link to IceDesign_beta78.exe is on 1st post

Re: IceDesign

Posted: Sat Apr 10, 2021 5:42 pm
by ShadowStorm
Very good work, this is a huge project, nice interface :)

Re: IceDesign

Posted: Tue Apr 13, 2021 3:48 pm
by ChrisR
Thanks Shadow, it's appreciated :)
I continue, slowly, depending on the time available.
Updates properties for dimension, font, backColor, frontColor, lock, disable orhiden are now also done in the case of a selection of multiple Gadgets or groups. If they have the same property, of course
and I'm on the right way for the code generation

Re: IceDesign

Posted: Sat Apr 17, 2021 2:14 pm
by ShadowStorm
I follow all this with attention :)

Re: IceDesign

Posted: Wed Apr 21, 2021 11:51 pm
by ChrisR
I got to the End of what I wanted to do to get a modern and functional GUI designer 8)
With code creation, preview (compiled code), saving and opening of IceDesign forms GUI

Here is the 1st beta of IceDesign in demo version

IceDesign_Demo_Beta1.exe


Image

The demo version is limited to 16 gadgets, which should be enough to test and see possibilities and also to build basic interfaces without any further limitation.

Features:
  • DPI aware
  • Light and Dark theme
  • Create Gadget With the selection rectangle (Lasso), double clic or Drag'n Drop from the Gadgets list
  • Select a Gadget with Left Click or Lasso
  • Multiple Selection by lasso or with Ctrl+Left Click
  • Grouped movement and resizing
  • Update properties with multiple selections or group
  • Cut, Copy, Paste and Clone. Can be done between different levels
  • Group, UnGroup Gadget
  • Align to Left, Right, Bottom, Top. Resize with Same Width, Height
  • Left Doucle Click or use the toolbar button to Open a Container (Container, Panel and ScrollArea). Up to 9 levels
  • Select directly a Child Gadget from a Container with Left Triple Click
  • Right Doucle Click or use the toolbar button to Close a Container and go back to the previous level
  • Grid, Grid size and Snap to Grid
  • Contextual menu according to the available options for the current item
  • Change the tab of a Panel to see its content without the need to open the Panel
  • Up, Down, Left and Right arrows to Move a Gadget
  • Shift + Up, Down, Left and Right to Resize a Gadget
  • Del Key to Delete the Selected Gadget or Container
  • Full Color Requester with saving custom colors in IceDesign.ini
  • Save, Save As or Open IceDesign Form GUI
  • Preview from the generated code, compiled. Use the Esc key or click on the main window to close the preview.
  • Create the code with multiple options: Copy to Clipboard, Save and open in a new Tab, Save the code As
    • For the code creation, choose between using constants or variables with Prefix and suffix for the variables name.
    • Hexa or RGB for the colors.
    • Define the indentation between a number of spaces or Tab.
    • Include or not Gadget item examples.
    • Include the event loop or the minimum required to run it.
    • The title block can be customized in IceDesign.ini file.
  • .....
Have fun :)

Re: IceDesign (New) modern GUI designer

Posted: Thu Apr 22, 2021 3:26 am
by Amitris_de
@ChrisR: Excellent, I worked with it a bit, everything was perfect.
think about the commercial version of this software, I think it is definitely worth it. you must get the answer to your efforts. :wink:

Re: IceDesign (New) modern GUI designer

Posted: Thu Apr 22, 2021 9:05 am
by Mesa
On my windows 10 64b, i've got a lag when i create or move a gadget, at least 1 seconde.

Any one else ?

M.

Re: IceDesign (New) modern GUI designer

Posted: Thu Apr 22, 2021 10:00 am
by ChrisR
Amitris_de wrote: Thu Apr 22, 2021 3:26 am @ChrisR: Excellent, I worked with it a bit, everything was perfect.
Thanks Amitris, a pleasure to read you. I wish you success in your projects :wink:
Glad to see that everything works well for you. :)

It remains in beta 1 for now and considering the number of lines of code and that I'm not a robot, there will inevitably be some bugs that will happen.
As in the case of Mesa, below :(
The difficulty is to catch them, to try to reproduce in order to fix them
Amitris_de wrote: Thu Apr 22, 2021 3:26 am think about the commercial version of this software, I think it is definitely worth it. you must get the answer to your efforts. :wink:
I didn't come for this at first but I changed my mind due to the amount of work it requires.
The goal is not to set up a commercial business, just to finance a little the work done.
If I market it, it would also be an incentive to continue and improve the tool
I don't know yet, it's still in the thinking stage...
All times are UTC+01:00
Page 4 of 49

Powered by phpBB® Forum Software © phpBB Limited