Tool buttons with icons?

[2B||!2B]

Hello there,

I wonder if anyone has an idea about developing such GUI like the one on TeamSpeak options?

[hutch--]

Looks like a normal vertical toolbar with its own button artwork.

[habran]

Hi 2B||!2B,
You can check MDIRichEditMasm here
It is written in 32bit asm, long time ago, it contains source how to make similar toolbar

[zedd151]

Something like this?...

http://masm32.com/board/index.php?topic=953.msg8570#msg8570

[fearless]

Might even be a listview or treeview with icons and text (and no root lines or children or +/- buttons for the treeview)

[2B||!2B]

Looks like a normal vertical toolbar with its own button artwork.

Nice hutch, i think you are right. TeamSpeak uses QT library and that GUI i showed is the QToolButton Class.
https://forum.qt.io/topic/59049/left-align-qtoolbuttons-in-a-vertical-qtoolbar

Hi 2B||!2B,
You can check MDIRichEditMasm here
It is written in 32bit asm, long time ago, it contains source how to make similar toolbar

Hi habran,

Thanks for the link, i have checked that source but shows buttons with icons only.

Something like this?...

http://masm32.com/board/index.php?topic=953.msg8570#msg8570

Very good source, however, it does not have the text next to the button. Moreover, it does not have the properties to stay "clicked" after you press the button.

Might even be a listview or treeview with icons and text (and no root lines or children or +/- buttons for the treeview)

I think they are special buttons, because when you click an option it stays clicked.
Also, any option you hover on with your mouse it will highlight with a rectangle over that option.

[hutch--]

> Very good source, however, it does not have the text next to the button. Moreover, it does not have the properties to stay "clicked" after you press the button.

Two things, the capacity to stay clicked is just a toolbar style setting, to get text alongside an image, you do the artwork yourself as a button image does not have to be square. You would make a toolbar strip with your chosen artwork then set the bits as a vertical toolbar.

[zedd151]

How about this one?

Autohide Toolbar. It was a project I basically abandoned some time ago. You can reuse the code as you wish. You can set different images (including text) for each button that you need.

As is, it works as an 'Autohide Vertical Toolbar', just need to change a few thing to your exact specifications.

These are the important parts to create the toolbar as I have done in that example:

Code Select Expand


        ; The sizes aren't important here, as we will resize it in WM_SIZE
        ; in the WM_SIZE message handler
        ; create left "gripper"
        invoke CreateWindowEx,WS_EX_STATICEDGE or 201h, ADDR statClass, 0,
        WS_CHILD or WS_VISIBLE or SS_NOTIFY,1,1,LGripW,1,hWin,501,hInstance,0     
        mov hLeftGrip, eax
        ; create right "gripper"
        invoke CreateWindowEx,WS_EX_STATICEDGE or 201h, ADDR statClass, 0,
        WS_CHILD or WS_VISIBLE or SS_NOTIFY, 1,1,RGripW,1,hWin,502,hInstance,0
        mov hRightGrip, eax
        ; create right toolbar
        invoke CreateWindowEx,WS_EX_CLIENTEDGE, ADDR statClass, 0,
        WS_CHILD or WS_VISIBLE or SS_LEFT or SS_NOTIFY,1,1,1,1,hWin,503,hInstance,0
        mov hRightBar, eax
        ; set the window handler for the right toolbar
        invoke SetWindowLong, hRightBar, GWL_WNDPROC, TBRProc
       
        ; create left toolbar
       
        invoke CreateWindowEx,WS_EX_CLIENTEDGE,ADDR statClass, 0,
        WS_CHILD or WS_VISIBLE or SS_LEFT or SS_NOTIFY,1,1,1,1,hWin,504,hInstance,0
        mov hLeftBar, eax
       
        ; set the window handler for the left toolbar
        invoke SetWindowLong, hLeftBar, GWL_WNDPROC, TBLProc
        ; insert "BitMap Buttons" on toolbars
        ; params:
        ; <hParent>, Left, Top, <bmp 'up'>, <bmp 'down'>, Button ID
        ; :: use the buttons' ID when processing messages
        ;    from the button, in the parents' hWnd.
        ;for the left toolbar
        invoke BmpButton, hLeftBar, 2, 2,  203, 204, 801
        invoke BmpButton, hLeftBar, 2, 29, 203, 204, 802
        invoke BmpButton, hLeftBar, 2, 56, 203, 204, 803
        ; for the right toolbar
        invoke BmpButton, hRightBar, 2, 2,  203, 204, 804
        invoke BmpButton, hRightBar, 2, 29, 203, 204, 805
        invoke BmpButton, hRightBar, 2, 56, 203, 204, 806
        ; invoke ShowWindow,SW_SHOW, for both gripper controls
        ; since we want these visible at startup
       
        invoke ShowWindow, hLeftGrip, SW_SHOW
        invoke ShowWindow, hRightGrip, SW_SHOW
        ; ShowWindow with SW_HIDE for the toolbars
        ; we want 'em outta the way 'til needed
        invoke ShowWindow, hLeftBar, SW_HIDE
        invoke ShowWindow, hRightBar, SW_HIDE



[fearless]

Done a mockup of the Teamspeak Options. Few differences in my version:
- No gradient backgrounds (Teamspeak has these for selected, unselected, mouse over, active window selection, inactive window selection (grey color))
- Selection border is square (Teamspeak uses a slightly rounded border)
- keypress arrow up/down to move between the items doesnt work, only mouse selection. (Teamspeak keypress arrow up/down does move between items)

[2B||!2B]

> Very good source, however, it does not have the text next to the button. Moreover, it does not have the properties to stay "clicked" after you press the button.

Two things, the capacity to stay clicked is just a toolbar style setting, to get text alongside an image, you do the artwork yourself as a button image does not have to be square. You would make a toolbar strip with your chosen artwork then set the bits as a vertical toolbar.

Thanks hutch.
You are right, i found some articles about some Owner-Drawn controls in C++ that can be modified more than a default drawn controls.
Some of which can be done by just enabling the visual-style.
Just for the record, this is a good start if anyone is looking for it
https://docs.microsoft.com/en-us/windows/desktop/Controls/using-toolbar-controls

How about this one?

Autohide toolbar It was a project I basically abandoned some time ago. You can reuse the code as you wish. You can set different images (including text) for each button that you need.

As is, it works as an 'Autohide Vertical Toolbar', just need to change a few thing to your exact specifications.

These are the important parts to create the toolbar as I have done in that example:

Code Select Expand


        ; The sizes aren't important here, as we will resize it in WM_SIZE
        ; in the WM_SIZE message handler
        ; create left "gripper"
        invoke CreateWindowEx,WS_EX_STATICEDGE or 201h, ADDR statClass, 0,
        WS_CHILD or WS_VISIBLE or SS_NOTIFY,1,1,LGripW,1,hWin,501,hInstance,0     
        mov hLeftGrip, eax
        ; create right "gripper"
        invoke CreateWindowEx,WS_EX_STATICEDGE or 201h, ADDR statClass, 0,
        WS_CHILD or WS_VISIBLE or SS_NOTIFY, 1,1,RGripW,1,hWin,502,hInstance,0
        mov hRightGrip, eax
        ; create right toolbar
        invoke CreateWindowEx,WS_EX_CLIENTEDGE, ADDR statClass, 0,
        WS_CHILD or WS_VISIBLE or SS_LEFT or SS_NOTIFY,1,1,1,1,hWin,503,hInstance,0
        mov hRightBar, eax
        ; set the window handler for the right toolbar
        invoke SetWindowLong, hRightBar, GWL_WNDPROC, TBRProc
       
        ; create left toolbar
       
        invoke CreateWindowEx,WS_EX_CLIENTEDGE,ADDR statClass, 0,
        WS_CHILD or WS_VISIBLE or SS_LEFT or SS_NOTIFY,1,1,1,1,hWin,504,hInstance,0
        mov hLeftBar, eax
       
        ; set the window handler for the left toolbar
        invoke SetWindowLong, hLeftBar, GWL_WNDPROC, TBLProc
        ; insert "BitMap Buttons" on toolbars
        ; params:
        ; <hParent>, Left, Top, <bmp 'up'>, <bmp 'down'>, Button ID
        ; :: use the buttons' ID when processing messages
        ;    from the button, in the parents' hWnd.
        ;for the left toolbar
        invoke BmpButton, hLeftBar, 2, 2,  203, 204, 801
        invoke BmpButton, hLeftBar, 2, 29, 203, 204, 802
        invoke BmpButton, hLeftBar, 2, 56, 203, 204, 803
        ; for the right toolbar
        invoke BmpButton, hRightBar, 2, 2,  203, 204, 804
        invoke BmpButton, hRightBar, 2, 29, 203, 204, 805
        invoke BmpButton, hRightBar, 2, 56, 203, 204, 806
        ; invoke ShowWindow,SW_SHOW, for both gripper controls
        ; since we want these visible at startup
       
        invoke ShowWindow, hLeftGrip, SW_SHOW
        invoke ShowWindow, hRightGrip, SW_SHOW
        ; ShowWindow with SW_HIDE for the toolbars
        ; we want 'em outta the way 'til needed
        invoke ShowWindow, hLeftBar, SW_HIDE
        invoke ShowWindow, hRightBar, SW_HIDE



Hi zedd,

Thank you for your participating.
Very nice style of auto-hide toolbar.

Done a mockup of the Teamspeak Options. Few differences in my version:
- No gradient backgrounds (Teamspeak has these for selected, unselected, mouse over, active window selection, inactive window selection (grey color))
- Selection border is square (Teamspeak uses a slightly rounded border)
- keypress arrow up/down to move between the items doesnt work, only mouse selection. (Teamspeak keypress arrow up/down does move between items)

Absolutely amazing work man. Very nice GUI there. .
The differences are not that much important.
However, i couldn't compile it due to some errors in Windows.inc.

C:\masm32\include\windows.inc(16529) : error A2037: statement not allowed inside structure definition
szText(2): Macro Called From
  C:\masm32\include\windows.inc(16529): Include File
C:\masm32\include\windows.inc(16529) : error A2008: syntax error : db
szText(3): Macro Called From
  C:\masm32\include\windows.inc(16529): Include File
C:\masm32\include\windows.inc(16529) : error A2034: must be in segment block
szText(4): Macro Called From
  C:\masm32\include\windows.inc(16529): Include File
C:\masm32\include\windows.inc(16541) : error A2037: statement not allowed inside structure definition
szText(2): Macro Called From
  C:\masm32\include\windows.inc(16541): Include File
C:\masm32\include\windows.inc(16541) : error A2008: syntax error : db
szText(3): Macro Called From
  C:\masm32\include\windows.inc(16541): Include File
C:\masm32\include\windows.inc(16541) : error A2034: must be in segment block

EDIT: I fixed it by renaming the szText member of NMTTDISPINFOA structure to _szText. Same for NMTTDISPINFOW
it's weird but it worked.

BTW, is that you?
https://github.com/mrfearless/ModernUI

I must say that this is the best GUI coded in ASM i have ever seen.  :t

[fearless]

BTW, is that you?
https://github.com/mrfearless/ModernUI

I must say that this is the best GUI coded in ASM i have ever seen.  :t

Thanks :D Yes, that is me, i have a link to my github stuff at the bottom of my signature. Its available for anyone to contribute to or use. Plus there is an x64 version for uasm64 - https://github.com/mrfearless/ModernUI64 (not always as in sync with the x86 version). Still occasionally adding to it, or thinking up ideas/testing new controls that haven't been added yet. Some stuff hasn't been optimized and/or features i would like haven't been added in. Plus some stuff might have a few bugs im sure.
Here is a couple of screenshots of using those buttons and other controls with child dialogs to achieve an options type panel i used for a few x64dbg plugins:
Codeshot plugin: https://github.com/mrfearless/CodeShot-Plugin-x86


CopyToAsm plugin: https://github.com/mrfearless/CopyToAsm-Plugin-x86

Icons used in the menus are from https://github.com/Templarian/WindowsIcons

[2B||!2B]

BTW, is that you?
https://github.com/mrfearless/ModernUI

I must say that this is the best GUI coded in ASM i have ever seen.  :t

Thanks :D Yes, that is me, i have a link to my github stuff at the bottom of my signature. Its available for anyone to contribute to or use. Plus there is an x64 version for uasm64 - https://github.com/mrfearless/ModernUI64 (not always as in sync with the x86 version). Still occasionally adding to it, or thinking up ideas/testing new controls that haven't been added yet. Some stuff hasn't been optimized and/or features i would like haven't been added in. Plus some stuff might have a few bugs im sure.
Here is a couple of screenshots of using those buttons and other controls with child dialogs to achieve an options type panel i used for a few x64dbg plugins:
Codeshot plugin: https://github.com/mrfearless/CodeShot-Plugin-x86


CopyToAsm plugin: https://github.com/mrfearless/CopyToAsm-Plugin-x86

Icons used in the menus are from https://github.com/Templarian/WindowsIcons

Fabulous work man, the GUI there looks professional.

BTW, i have downloaded your Modern GUI (32-bit version) and i have encountered some troubles:

1- The dialogs (MUICaptionBar#) examples are not re sizable. Was this deliberately made?

2- I have added everything from "RadASM ModernUI Api files.zip" to the corresponding RadASM files. However, i am still unable to compile MUIMenu1 example.
Technically speaking, there a is missing parameter in the call to MUIApplyToDialog API. On the example it is called as so
Invoke MUIApplyToDialog, hWin, TRUE
however, its prototype has 3 parameters but that was easy to fix.
The other issue i faced is that the MUI_MENUITEM_DARKTHEME is not declared anywhere "Symbol not defined : MUI_MENUITEM_DARKTHEME" i couldn't find the declaration anywhere in the files provided.
I would really appreciate a hand over here.
Thanks.

[fearless]

I updated the radasm definition for that function MUIApplyToDialog, basically i added a third parameter to turn on/off clipping (true/false)
I renamed MUI_MENUITEM_DARKTHEME to MUI_MENUITEM_DARK_THEME for some reason, but didnt update the example to reflect this. They where stored in the ModernUI_Button.inc files - testing out easier way of setting all properties at once instead of individual calls to property settings.

Not sure which is best/easiest - from my own experience its awkward to set the values in the properties in the larger structures - easy to miss a setting, not provide enough commas etc, not as readable/easy to write/change setting in IDE - but once set, it is handier to call and use than individual calls to set properties. Each has its pros and cons i suppose.

I updated the MUIMenu1 example in the releases folder.
Yes the dialogs using the captionbar arent resizable currently in the normal traditional sense, but the min/max/restore works for that sizing. It was a feature i would like to add at some point, but i hadnt got round to coding that or deciding how best to do that. Some earlier prototypes i did do was to create a sizegrip control that handled that for the window, like the normal grip thing with dots you see on statusbars to indicate the window can be resized. It changed the cursor to a resize arrow when mouseover and did work but it was slightly odd - cant explain exactly, but i wasnt happy with that and so left that until i could figure out a better, more visually accurate way of handling that, probably to later also include sizing of all borders (detect mouse position with 2/3px of border and change cursor and subclass the parent to handle the resize, something like that)

[fearless]

Here is an example of the resize grip control (older pre modernui control) but should still work fine. To give an idea of what i had initially done as a starting point.

Rough example of usage based on a test program i had with it

Code Select Expand

    ; System Resize Grip   
    Invoke GetClientRect, hSF_StatusBar, Addr rect   
    mov eax, rect.right    sub eax, 22
    ;mov ebx, rect.bottom
    mov ebx, 6
    ;sub ebx, 22
    Invoke SmartResizeGripCreate, hSF_StatusBar, eax, ebx, 20, 18, IDC_RESIZEGRIP
    mov hSysResizeGrip, eax
    Invoke SendMessage, hSysResizeGrip, SRM_SETTEXTCOLOR, SRRGBCOLOR(111,121,149), 0
    Invoke SendMessage, hSysResizeGrip, SRM_SETBACKCOLOR, SRRGBCOLOR(38,50,56), 0
    Invoke SendMessage, hSysResizeGrip, SRM_SETRESIZEWIN, hWin, 0

[HSE]

Hi Fearless!

Codeshot plugin: https://github.com/mrfearless/CodeShot-Plugin-x86

How you make that RadAsm 2.2.2.3 can understand textfiles with 0A end of line? (CodeShot.asm as example)

Can ModernUI work with normal windows (WS_EX_OVERLAPPEDWINDOW) instead of dialogs? (obviously I failed to achive that  )

Tnaks.