Create a toolbar

Deploying to Mac OS? Ask Mac OS specific questions here.

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

Mag
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 802
Joined: Fri Nov 16, 2012 10:51 pm

Create a toolbar

Post by Mag » Thu Feb 28, 2013 1:57 am

As there is no support for the OS X toolbar, I decided to create one using a graphic object and buttons.

Does anyone have advice for me for the artwork, I would use a button with an icon containing a image gradient. it is possible to use as icon in a button that acts as a pattern that repeats itself?

Second, as we know with the toolbar, you can drag the window, this is achievable?

shaosean
Posts: 906
Joined: Thu Nov 04, 2010 7:53 am

Re: Create a toolbar

Post by shaosean » Thu Feb 28, 2013 7:15 am

If they would set the "composite" flag of the windows to true (this can only be done when the window is created and cannot be changed afterwards so cannot achieve it with an external) then it would be trivial to create toolbars for Mac OS X..

ibe
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 61
Joined: Sun Oct 04, 2009 12:15 pm

Re: Create a toolbar

Post by ibe » Thu Feb 28, 2013 12:42 pm

Dragging the window is simple. If your toolbar is for example a rectangle, just add a dragging script to it. You can cut and copy the code from the 'How to make a stack with a window shape' lesson on the RunRev site:
http://lessons.runrev.com/s/lessons/m/4 ... ndow-shape
Look for the code in the chapter 'Add script to move your new stack'

Mag
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 802
Joined: Fri Nov 16, 2012 10:51 pm

Re: Create a toolbar

Post by Mag » Fri Mar 01, 2013 1:50 pm

shaosean wrote:If they would set the "composite" flag of the windows to true (this can only be done when the window is created and cannot be changed afterwards so cannot achieve it with an external) then it would be trivial to create toolbars for Mac OS X..
I shaosean, thank you for the message, I will try to just to add it below the real titlebar (see picture). I know, it's not the state of the art of OS X interface but I seem to recall that at the begin the toolbars are used to be implemented in that way.


Thank you Ibe! It works fine!

Does anyone advise me on how to make a gradient similar to that of the real toolbar using a graphic element with graphic effects?

PS
Or maybe it could it be better to use a button with an image as icon?
Attachments
545454.png
545454.png (13.96 KiB) Viewed 13950 times

Klaus
Posts: 14177
Joined: Sat Apr 08, 2006 8:41 am
Contact:

Re: Create a toolbar

Post by Klaus » Fri Mar 01, 2013 5:31 pm

Hi Mag,

load the attached image and set it as the FILL pattern for a button, like I did in one of my projects :D
It is actually a screenshot from a "real" OS X toolbar.


Best

Klaus
Attachments
top_bar.jpg
top_bar.jpg (5.02 KiB) Viewed 13937 times

Mag
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 802
Joined: Fri Nov 16, 2012 10:51 pm

Re: Create a toolbar

Post by Mag » Fri Mar 01, 2013 6:01 pm

Thank you so much Klaus!

PS
Somebody has a retina Mac so to take a screen of the @2x version? :oops:

Mag
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 802
Joined: Fri Nov 16, 2012 10:51 pm

Re: Create a toolbar

Post by Mag » Wed Mar 06, 2013 5:40 pm

Al worked great until I create some menus using Menu Builder. If I set the checkbox "Set as stack menu bar" to true, when you drag using the toolbar you see that the window moves by some pixels (as if there where a menubar present in the window, that actually there isn't).

Code: Select all

local sgDragging, sgLeftOffset, sgTopOffset

on mouseDown 
       put item 1 of the mouseLoc into sgLeftOffset 
       put item 2 of the mouseLoc into sgTopOffset 
       put true into sgDragging 
end mouseDown

on mouseMove 
    lock screen
    if sgDragging is true then 
        set the left of this stack to item 1 of globalloc(the mouseLoc) - sgLeftOffset 
        set the top of this stack to item 2 of globalloc(the mouseLoc) - sgTopOffset 
    end if 
    unlock screen 
end mouseMove

on mouseRelease 
    put false into sgDragging 
end mouseRelease

on mouseUp 
    put false into sgDragging 
end mouseUp
Last edited by Mag on Thu Mar 07, 2013 5:30 pm, edited 1 time in total.

PBH
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 132
Joined: Sun Feb 20, 2011 4:26 pm
Contact:

Re: Create a toolbar

Post by PBH » Thu Mar 07, 2013 2:44 am

Mag, try…

Code: Select all

local sgDragging, sgLeftOffset, sgTopOffset

on mouseDown 
       put item 1 of the mouseLoc into sgLeftOffset 
       put item 2 of the mouseLoc into sgTopOffset 
       put true into sgDragging 
end mouseDown

on mouseMove 
    lock screen
    if sgDragging is true then 
        set the left of this stack to item 1 of globalloc(the mouseLoc) - sgLeftOffset 
        set the top of this stack to item 2 of globalloc(the mouseLoc) - sgTopOffset +22 ## Allowance for MenuBar
    end if 
    unlock screen 
end mouseMove

on mouseRelease 
    put false into sgDragging 
end mouseRelease

on mouseUp 
    put false into sgDragging 
end mouseUp
Paul

Klaus
Posts: 14177
Joined: Sat Apr 08, 2006 8:41 am
Contact:

Re: Create a toolbar

Post by Klaus » Thu Mar 07, 2013 12:07 pm

HI all,

or even shorter :D

Hint: No LOCK/UNLOCK SCREEN necessary!

Code: Select all

local maydrag

on mouseDown
  put mouseH() & "," & mouseV() into maydrag
end mouseDown

on mouseMove
  if maydrag is not empty then
    set the topLeft of this stack to (item 1 of the screenMouseLoc - item 1 of maydrag),()item 2 of the screenMouseLoc - item 2 of maydrag
  end if
end mouseMove

on mouseUp
  put empty into maydrag
end mouseUp

on mouserelease
  mouseup
end mouserelease
Best

Klaus

ibe
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 61
Joined: Sun Oct 04, 2009 12:15 pm

Re: Create a toolbar

Post by ibe » Thu Mar 07, 2013 4:04 pm

I've been playing around with implementing a toolbar and have an almost workable solution. The project description and source code can be found at http://bergroth.on-rev.com/ibTools/styled-3/index.html

Here is a picture of the current version:
Attachments
ibmacwindow.jpg

Mag
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 802
Joined: Fri Nov 16, 2012 10:51 pm

Re: Create a toolbar

Post by Mag » Thu Mar 07, 2013 5:29 pm

Thank you Klaus, I'm trying to implement it but I get this error:
button "toolbarButton": compilation error at line 10 (Expression: missing factor) near ")", char 89

Mag
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 802
Joined: Fri Nov 16, 2012 10:51 pm

Re: Create a toolbar

Post by Mag » Thu Mar 07, 2013 5:30 pm

ibe wrote:I've been playing around with implementing a toolbar and have an almost workable solution. The project description and source code can be found at http://bergroth.on-rev.com/ibTools/styled-3/index.html

Here is a picture of the current version:
Wow! Very impressive!! :shock:

Mag
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 802
Joined: Fri Nov 16, 2012 10:51 pm

Re: Create a toolbar

Post by Mag » Thu Mar 07, 2013 5:31 pm

Thank you Paul!

And for Retina I guess I have to double that value...

Klaus
Posts: 14177
Joined: Sat Apr 08, 2006 8:41 am
Contact:

Re: Create a toolbar

Post by Klaus » Thu Mar 07, 2013 5:48 pm

Hi Mag,
Mag wrote:Thank you Klaus, I'm trying to implement it but I get this error:
button "toolbarButton": compilation error at line 10 (Expression: missing factor) near ")", char 89
sorry, my fault, a little typo, change the "mousemove" handler to:

Code: Select all

on mouseMove
  if maydrag is not empty then
    set the topLeft of this stack to (item 1 of the screenMouseLoc - item 1 of maydrag),(item 2 of the screenMouseLoc - item 2 of maydrag)
  end if
end mouseMove
Best

Klaus

Mag
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 802
Joined: Fri Nov 16, 2012 10:51 pm

Re: Create a toolbar

Post by Mag » Thu Mar 07, 2013 8:56 pm

Klaus wrote:Hi Mag,
Mag wrote:Thank you Klaus, I'm trying to implement it but I get this error:
button "toolbarButton": compilation error at line 10 (Expression: missing factor) near ")", char 89
sorry, my fault, a little typo, change the "mousemove" handler to:

Code: Select all

on mouseMove
  if maydrag is not empty then
    set the topLeft of this stack to (item 1 of the screenMouseLoc - item 1 of maydrag),(item 2 of the screenMouseLoc - item 2 of maydrag)
  end if
end mouseMove
Best

Klaus
Hi Klaus, this works well, thanks.

PS
This also have the problem that jumps of 22 pixels due that thinks that there is a menubar in the window (but there is not).

Post Reply