Toolbar Status

classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|

Toolbar Status

Christopher Schmidt-2
As part of the development efforts on the vector branch, we've developed
a toolbar functionality plan. I'm going to post some more on this, but
we're coming down on the tail end of a ~14 hour hack session, so I'm
just posting some of the results now.

So:

 http://dev.openlayers.org/sandbox/vector-2.4/lib/OpenLayers/Control/Panel.js

This panel implments a toolbar. A toolbar gathers a set of controls.
Controls which can be put on a toolbar include any tools which include
either:
 * activate/deactivate -- Modal and 'toggle' tools will use this
 * trigger -- 'buttons' (a la zoomToMaxExtent) will use this
 
We've already got modal tools working: The MouseToolbar code has been
rewritten with this:

http://dev.openlayers.org/sandbox/vector-2.4/examples/mousetoolbar.html

You can see that the code is now only about a half dozen lines of real
code:

http://dev.openlayers.org/sandbox/vector-2.4/lib/OpenLayers/Control/MouseToolbar.js

If you look to the bottom of
http://dev.openlayers.org/sandbox/vector-2.4/theme/default/style.css
you'll see where all images are defined. This means that by just editing
CSS, you can change the position, size, and images of your toolbar.

You can see this in action on
http://dev.openlayers.org/sandbox/vector-2.4/examples/panel.html , which
overrides the CSS and displays images from different places, as well as
using a blank div for one control (in this case, the zoombox).

This can be easily put into a seperate div: simply pass a {div:
$('mydiv")} option into the constructor.

I *think* this encapsulates much of the functionality that existing
button bars have demonstrated. Controls continue to have their own div
-- which can be placed inside the map or not -- and panels control the
display of the items -- via CSS, which allows you to do funky things
like 'hover', etc.

(Some of this doesnt work in IE yet. I know.)

So, the goal is to have 3 types of controls:
  * Button: A click triggers an action (like zoom in)
  * Modal: Turns state on temporarily. Drawing tools  probably use
    this.
  * Toggles. Auto-pan might fall under this: when it's active, the map
    responds. when it's not, it doesn't.

Do these fit all the needs address by buttons?    

Regards,
--
Christopher Schmidt
MetaCarta
_______________________________________________
Dev mailing list
[hidden email]
http://openlayers.org/mailman/listinfo/dev
Reply | Threaded
Open this post in threaded view
|

Re: Toolbar Status

Christopher Schmidt-2
On Fri, Mar 09, 2007 at 05:15:08AM -0500, Christopher Schmidt wrote:

> As part of the development efforts on the vector branch, we've developed
> a toolbar functionality plan. I'm going to post some more on this, but
> we're coming down on the tail end of a ~14 hour hack session, so I'm
> just posting some of the results now.
>
> So:
>
>  http://dev.openlayers.org/sandbox/vector-2.4/lib/OpenLayers/Control/Panel.js
>
> This panel implments a toolbar. A toolbar gathers a set of controls.
> Controls which can be put on a toolbar include any tools which include
> either:
>  * activate/deactivate -- Modal and 'toggle' tools will use this
>  * trigger -- 'buttons' (a la zoomToMaxExtent) will use this

buttons are now implemented. ZoomToMaxExtent is a demo.

Regards,
--
Christopher Schmidt
MetaCarta
_______________________________________________
Dev mailing list
[hidden email]
http://openlayers.org/mailman/listinfo/dev
Reply | Threaded
Open this post in threaded view
|

Re: Toolbar Status

Stephen Woodbridge
In reply to this post by Christopher Schmidt-2
Christopher Schmidt wrote:

> As part of the development efforts on the vector branch, we've developed
> a toolbar functionality plan. I'm going to post some more on this, but
> we're coming down on the tail end of a ~14 hour hack session, so I'm
> just posting some of the results now.
>
> So:
>
>  http://dev.openlayers.org/sandbox/vector-2.4/lib/OpenLayers/Control/Panel.js
>
> This panel implments a toolbar. A toolbar gathers a set of controls.
> Controls which can be put on a toolbar include any tools which include
> either:
>  * activate/deactivate -- Modal and 'toggle' tools will use this
>  * trigger -- 'buttons' (a la zoomToMaxExtent) will use this
>  
> We've already got modal tools working: The MouseToolbar code has been
> rewritten with this:
>
> http://dev.openlayers.org/sandbox/vector-2.4/examples/mousetoolbar.html
>
> You can see that the code is now only about a half dozen lines of real
> code:
>
> http://dev.openlayers.org/sandbox/vector-2.4/lib/OpenLayers/Control/MouseToolbar.js
>
> If you look to the bottom of
> http://dev.openlayers.org/sandbox/vector-2.4/theme/default/style.css
> you'll see where all images are defined. This means that by just editing
> CSS, you can change the position, size, and images of your toolbar.
>
> You can see this in action on
> http://dev.openlayers.org/sandbox/vector-2.4/examples/panel.html , which
> overrides the CSS and displays images from different places, as well as
> using a blank div for one control (in this case, the zoombox).
>
> This can be easily put into a seperate div: simply pass a {div:
> $('mydiv")} option into the constructor.
>
> I *think* this encapsulates much of the functionality that existing
> button bars have demonstrated. Controls continue to have their own div
> -- which can be placed inside the map or not -- and panels control the
> display of the items -- via CSS, which allows you to do funky things
> like 'hover', etc.
>
> (Some of this doesnt work in IE yet. I know.)
>
> So, the goal is to have 3 types of controls:
>   * Button: A click triggers an action (like zoom in)
>   * Modal: Turns state on temporarily. Drawing tools  probably use
>     this.
>   * Toggles. Auto-pan might fall under this: when it's active, the map
>     responds. when it's not, it doesn't.
>
> Do these fit all the needs address by buttons?    

Is there a need for something like a radio set for modal buttons that
are mutually exclusive? It can probably be built from the Modal buttons,
but it might be nice to provide and easy way to do this in the api.

-Steve
_______________________________________________
Dev mailing list
[hidden email]
http://openlayers.org/mailman/listinfo/dev
Reply | Threaded
Open this post in threaded view
|

Re: Toolbar Status

Steven Ottens

On Mar 9, 2007, at 2:58 PM, Stephen Woodbridge wrote:

> Christopher Schmidt wrote:
>>
>>
>> So, the goal is to have 3 types of controls:
>>   * Button: A click triggers an action (like zoom in)
>>   * Modal: Turns state on temporarily. Drawing tools  probably use
>>     this.
>>   * Toggles. Auto-pan might fall under this: when it's active, the  
>> map
>>     responds. when it's not, it doesn't.
>>
>> Do these fit all the needs address by buttons?
>
> Is there a need for something like a radio set for modal buttons that
> are mutually exclusive? It can probably be built from the Modal  
> buttons,
> but it might be nice to provide and easy way to do this in the api.

A radio set would be useful; if you have for instance a series of  
editing buttons; point,line,polygon you want to be able to select on  
of the three buttons and deselect the other 2. Also if they are a  
radio set you can have multiple toolbars with mutually exclusive buttons

Steven


_______________________________________________
Dev mailing list
[hidden email]
http://openlayers.org/mailman/listinfo/dev
Reply | Threaded
Open this post in threaded view
|

Re: Toolbar Status

Christopher Schmidt-2
In reply to this post by Stephen Woodbridge
On Fri, Mar 09, 2007 at 08:58:45AM -0500, Stephen Woodbridge wrote:

> Christopher Schmidt wrote:
> >So, the goal is to have 3 types of controls:
> >  * Button: A click triggers an action (like zoom in)
> >  * Modal: Turns state on temporarily. Drawing tools  probably use
> >    this.
> >  * Toggles. Auto-pan might fall under this: when it's active, the map
> >    responds. when it's not, it doesn't.
> >
> >Do these fit all the needs address by buttons?    
>
> Is there a need for something like a radio set for modal buttons that
> are mutually exclusive? It can probably be built from the Modal buttons,
> but it might be nice to provide and easy way to do this in the api.

Ah, right, Tim brought that up. The solution to that is to create a
subclass of Panel -- like MouseToolbar is, and EditingToolbar will be --
and use that as a control. So, you have:

 MainPanel.addControls( [
  -> Control.MouseToolBar
  -> Control.EditingToolbar
 ] )

deactivate on these can probably even be implemented on the Panel super
class -- deactivate simply iterates through this.controls and turns them
all off, and subclasses can then change display properties appropriately.

So, I've just done that -- now anything that subclasses off panel can
be used as a 'tool' in a panel. When panels are deactivated, they
dissappear, and their buttons no longer have any affect: all the
controls on them are turned off. In the process, I also  added support
for a defaultControl option. That's committed as 2629.
 
Regards,
--
Christopher Schmidt
MetaCarta
_______________________________________________
Dev mailing list
[hidden email]
http://openlayers.org/mailman/listinfo/dev
Reply | Threaded
Open this post in threaded view
|

Re: Toolbar Status

Christopher Schmidt-2
In reply to this post by Steven Ottens
On Fri, Mar 09, 2007 at 03:30:47PM +0100, Steven M. Ottens wrote:

>
> On Mar 9, 2007, at 2:58 PM, Stephen Woodbridge wrote:
>
> >Christopher Schmidt wrote:
> >>
> >>
> >>So, the goal is to have 3 types of controls:
> >>  * Button: A click triggers an action (like zoom in)
> >>  * Modal: Turns state on temporarily. Drawing tools  probably use
> >>    this.
> >>  * Toggles. Auto-pan might fall under this: when it's active, the  
> >>map
> >>    responds. when it's not, it doesn't.
> >>
> >>Do these fit all the needs address by buttons?
> >
> >Is there a need for something like a radio set for modal buttons that
> >are mutually exclusive? It can probably be built from the Modal  
> >buttons,
> >but it might be nice to provide and easy way to do this in the api.
>
> A radio set would be useful; if you have for instance a series of  
> editing buttons; point,line,polygon you want to be able to select on  
> of the three buttons and deselect the other 2. Also if they are a  
> radio set you can have multiple toolbars with mutually exclusive buttons

Yeah, that's what 'modal' buttons are: one modal button turns off all
the others within the same panel. 'toggles' are checkboxes -- they can
be on at the same time as other controls. And as I just replied to
Steven, I just made the idea of creating a toolbar of toolbars
'trivial'.

Regards,
--
Christopher Schmidt
MetaCarta
_______________________________________________
Dev mailing list
[hidden email]
http://openlayers.org/mailman/listinfo/dev
Reply | Threaded
Open this post in threaded view
|

Re: Toolbar Status

Cameron Shorter
In reply to this post by Christopher Schmidt-2
Apologies for my late response, I'm a bit behind on my emails.

Regarding the toolbar:

* I'm not sure if I've missed the boat for picking names, but I suggest
using names already used by by HTML/Java/etc. This should reduce
confusion for developers later. I'd be looking for the terms: Button,
Checkbox, Radio.

* Regarding  setting button images and placement, it seems that a user
would need to edit CSS? I've been tripped up on OL CSS before (ie, my
lack of understanding of it). If you are using CSS, it would probably be
wise to have a tutorial explaining how to use it.

* Is there an attribute like alignment="verticle/horizontal" that a user
can set?


Christopher Schmidt wrote:

> As part of the development efforts on the vector branch, we've developed
> a toolbar functionality plan. I'm going to post some more on this, but
> we're coming down on the tail end of a ~14 hour hack session, so I'm
> just posting some of the results now.
>
> So:
>
>  http://dev.openlayers.org/sandbox/vector-2.4/lib/OpenLayers/Control/Panel.js
>
> This panel implments a toolbar. A toolbar gathers a set of controls.
> Controls which can be put on a toolbar include any tools which include
> either:
>  * activate/deactivate -- Modal and 'toggle' tools will use this
>  * trigger -- 'buttons' (a la zoomToMaxExtent) will use this
>  
> We've already got modal tools working: The MouseToolbar code has been
> rewritten with this:
>
> http://dev.openlayers.org/sandbox/vector-2.4/examples/mousetoolbar.html
>
> You can see that the code is now only about a half dozen lines of real
> code:
>
> http://dev.openlayers.org/sandbox/vector-2.4/lib/OpenLayers/Control/MouseToolbar.js
>
> If you look to the bottom of
> http://dev.openlayers.org/sandbox/vector-2.4/theme/default/style.css
> you'll see where all images are defined. This means that by just editing
> CSS, you can change the position, size, and images of your toolbar.
>
> You can see this in action on
> http://dev.openlayers.org/sandbox/vector-2.4/examples/panel.html , which
> overrides the CSS and displays images from different places, as well as
> using a blank div for one control (in this case, the zoombox).
>
> This can be easily put into a seperate div: simply pass a {div:
> $('mydiv")} option into the constructor.
>
> I *think* this encapsulates much of the functionality that existing
> button bars have demonstrated. Controls continue to have their own div
> -- which can be placed inside the map or not -- and panels control the
> display of the items -- via CSS, which allows you to do funky things
> like 'hover', etc.
>
> (Some of this doesnt work in IE yet. I know.)
>
> So, the goal is to have 3 types of controls:
>   * Button: A click triggers an action (like zoom in)
>   * Modal: Turns state on temporarily. Drawing tools  probably use
>     this.
>   * Toggles. Auto-pan might fall under this: when it's active, the map
>     responds. when it's not, it doesn't.
>
> Do these fit all the needs address by buttons?    
>
> Regards,
>  


--
Cameron Shorter
Systems Architect, http://lisasoft.com.au
Tel: +61 (0)2 8570 5011
Mob: +61 (0)419 142 254

_______________________________________________
Dev mailing list
[hidden email]
http://openlayers.org/mailman/listinfo/dev
Reply | Threaded
Open this post in threaded view
|

Re: Toolbar Status

Christopher Schmidt-2
On Tue, Mar 13, 2007 at 01:38:37PM +1100, Cameron Shorter wrote:
> Apologies for my late response, I'm a bit behind on my emails.
>
> Regarding the toolbar:
>
> * I'm not sure if I've missed the boat for picking names, but I suggest
> using names already used by by HTML/Java/etc. This should reduce
> confusion for developers later. I'd be looking for the terms: Button,
> Checkbox, Radio.

The reason to *not* choose these names is exactly as you've mentioned:
they already have a context that does not match what this does. Radio
buttons and checkboxes are visual elements in an HTML/Java page: these
are explicitly designed to be elements in the page which have a very
different visual look and feel.

The 'button' naming was matched, because there is no concept in HTML of
a 'button' that I know of, so we're not stomping on visual concepts
there.

There's still time to change this: convince someone else that I'm wrong,
and I'll reevaluate :)

> * Regarding  setting button images and placement, it seems that a user
> would need to edit CSS? I've been tripped up on OL CSS before (ie, my
> lack of understanding of it). If you are using CSS, it would probably be
> wise to have a tutorial explaining how to use it.

Agreed. Documentation is as of yet incomplete, but that's certainly a
requirement pre-release. (I started working on it at one point, then
realized I had three levels of documentation to do before I got to the
toolbar CSS :))

> * Is there an attribute like alignment="verticle/horizontal" that a user
> can set?

That's controlled by CSS. The difference:

Vertical:
.olControlMouseToolbar div {
  display:block;
  width:  28px;
  height: 28px;
  top: 300px;
  left: 6px;
  position: relative;
}


Horizontal:
.olControlEditingToolbar div {
  float:right;
  width:  24px;
  height: 24px;
  margin: 5px;
}

Regards,
--
Christopher Schmidt
MetaCarta
_______________________________________________
Dev mailing list
[hidden email]
http://openlayers.org/mailman/listinfo/dev