Sign in to follow this  
Followers 0
orbs

Firefox menu button - how did they do it?

8 posts in this topic

did you notice the Firefox menu button? it may seem simple but it's interesting: as i understand, it is a graphic element located on the title bar, replacing standard icon and title, it changes color when hover on it, it has its own edges which integrates gracefully with the window edge, and although it has no visible upper edge, it is "draggable" like any other edge of the window.

post-47848-0-35442000-1390718767_thumb.p

i was wondering - how did they do it?

(yes i know it's open source, but i'm no programmer, and i favor AutoIt for its ability to speak English, while other programming languages speak "Computerish" which i can't understand).

i know how to show a context-menu upon click, and how to change graphic appearance on hover, and i have seen solutions on how you can attach your own "mini"-GUI to any window title bar. but this one seems way too "neat" to use that technique.

if i wanted to do a similar thing with my GUI, how would i go about it?

thanks for any thoughts

Share this post


Link to post
Share on other sites



Hi orbs,

  The part you said you don't know how to to do would be be the graphic?

Opera has the same basic button and if you have a look at appearances it shows the button without background

post-56351-0-13336500-1390750198_thumb.j

So all you would have to do is make 2 or 3 buttons for base, hover and click and integrate them into this position in your GUI.

Personally never done it but in theory doesn't seem too difficult.

cya

Bill

Share this post


Link to post
Share on other sites

thanks l3ill, but actually i'm ok with that part. what i can't figure out is how to put my graphic on the title bar, instead of the icon and title text, and make it so elegantly mimic the native window style.

Share this post


Link to post
Share on other sites

at first glance it appears that the code is writing the GUI completely from scratch - GUICreate with style $WS_POPUP. that may be the way to go, but i was hoping to avoid that and let Windows draw the window using the native style. i'll take a closer look. thanks for the reference!

Share this post


Link to post
Share on other sites

#8 ·  Posted (edited)

ok, completely not what i had in mind, but still... i made a simple non-resizable smartphone-like GUI, with a button at the top, like this:

post-47848-0-66089700-1390853755_thumb.p

what i'm now struggling with is to draw a contour line around the GUI, same color as the sunken edge of the button. i've been trying to follow the line with PixelGetColor() but that failed miserably. there must be a simpler way to this?

#include <StaticConstants.au3>
#include <Array.au3>
#include <WindowsConstants.au3>
#include <GuiConstants.au3>

Opt('PixelCoordMode',0)

$my_gui = GuiCreate('', 290, 500, Default,Default,$WS_POPUP)
GUISetBkColor(0x333340)

_GuiRoundCorners($my_gui, 0, 0, 40, 40)

$gArea=GUICtrlCreateGraphic(0,0,290,500)

; button
Global $cHeadButtonColor=0xCCDDEE
$gHeadButtonPaddingTop=GUICtrlCreateLabel('',81,0,200-81,3,$SS_CENTER)
GUICtrlSetBkColor(-1,$cHeadButtonColor)
GUICtrlSetCursor(-1,0)
$gHeadButtonLabel=GUICtrlCreateLabel('My App Title',81,3,200-81,20,$SS_CENTER)
GUICtrlSetBkColor(-1,$cHeadButtonColor)
GUICtrlSetCursor(-1,0)
GUICtrlSetFont(-1,Default,800)
; button sunken edge
GUICtrlSetGraphic($gArea, $GUI_GR_COLOR, 0x77CCCC)
GUICtrlSetGraphic($gArea,$GUI_GR_MOVE,79,0)
GUICtrlSetGraphic($gArea,$GUI_GR_LINE,79,24)
GUICtrlSetGraphic($gArea,$GUI_GR_LINE,280-79,24)
GUICtrlSetGraphic($gArea,$GUI_GR_LINE,280-79,-1)

GUICtrlSetState($gArea,$GUI_DISABLE)
GuiSetState()

GUIRegisterMsg($WM_NCHITTEST, 'WM_NCHITTEST')

While True
    $msg=GuiGetMsg()
    Switch $msg
        Case $GUI_EVENT_CLOSE
            ExitLoop
        Case $gHeadButtonLabel,$gHeadButtonPaddingTop
            MsgBox(0,'','Head Button pressed')
    EndSwitch
WEnd

Exit

Func _GuiRoundCorners($h_win, $i_x1, $i_y1, $i_x3, $i_y3)
   Dim $pos, $ret, $ret2
   $pos = WinGetPos($h_win)
   $ret = DllCall("gdi32.dll", "long", "CreateRoundRectRgn", "long", $i_x1, "long", $i_y1, "long", $pos[2], "long", $pos[3], "long", $i_x3, "long", $i_y3)
   If $ret[0] Then
      $ret2 = DllCall("user32.dll", "long", "SetWindowRgn", "hwnd", $h_win, "long", $ret[0], "int", 1)
      If $ret2[0] Then
         Return 1
      Else
         Return 0
      EndIf
   Else
      Return 0
   EndIf
EndFunc  ;==>_GuiRoundCorners

Func WM_NCHITTEST($hWnd, $iMsg, $wParam, $lParam)
    #forceref $hWnd, $iMsg, $wParam, $lParam
    Return $HTCAPTION
EndFunc   ;==>WM_NCHITTEST
Edited by orbs
1 person likes this

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0