From BlenderWiki

Jump to: navigation, search
Note: This is an archived version of the Blender Developer Wiki. The current and active wiki is available on wiki.blender.org.

Floating Buttons Proposal

Overview

Currently in Blender, all existing controls are docked in panels and headers. These panels are sometimes cluttered and contain a lot of information not all of which is relevant to the user. These panels also take up screen real estate, but are no longer usable once they're collapsed.

Floating controls over the 3D view are a solution to these problems. They take up a minimal amount of space since they don't monopolize an entire strip of screen space. They can adopt the most relevant controls into an area more visible to users, reducing the need to open the N panel and properties panel.

Some examples of proposals requiring floating controls include:

Requirements

  1. Python. The controls in the 3D view should be driven by Python scripts. They should be created and laid out and all possible functionality assigned by the scripts.
  2. Controls. These controls should be available:
    1. Label
    2. Image - For creating backgrounds for designs
    3. Button
    4. Dropdown menu
  3. Alignment and layout. The 3D view is a little different from button panels, so its layout properties should work differently:
    1. Horizontal alignment - Left/Center/Right
    2. Vertical alignment - Top/Center/Bottom
    3. Grouping - Button grouping like the "align" feature in the current layout system
  4. Configuration. The amount of configuration for the end user will be limited.
    1. The designer can use a Blender configuration value to allow the user to switch between different arrangement presets. This should not need to be explicitly supported by the floating buttons code. See an example at the end of this document.
    2. Global toggle - A global configuration option to block all rendering of all floating controls, for the user who feels the need to clear her working space.

Issues

Should the floating buttons be available in other views? No. It's mostly needed in the 3D view, so we should focus on that for now. Expanding the system to use other views shouldn't be exceedingly difficult, so we can add other views later if need be.

Should we include more controls? No. List boxes or text areas are for data input. Data input should be handled in settings and properties panels. Labels for presenting information and buttons and dropdown for choosing tools should be sufficient.

Should the alignment/layout model imitate or reuse code from the panel layouts? No. The layout model used for the properties panels and N/T regions are modeled for the specific purpose of laying out controls with the most space efficiency in those areas. The 3D view is a different size and controls should behave differently. They don't need to expand to fill all areas and they need more and better alignment options than can be given by the existing layout options.

Should the user have more control over the layout and arrangement of buttons? No. This system is designed for Blender designers to be able to quickly design floating controls for Blender users. Blender users would not typically modify their floating buttons setup (other than to choose between preset configurations) any more than they would modify the header buttons or a properties panel.

Example

This is an example, and may not represent the final implementation

button = layout.button("icon.png")
button.align_vertical = 'CENTER'
button.y = -25  # 25 pixels above center
button.h = 20
button.align_horizontal = 'LEFT'
button.x = 10   # 10 pixels from the left
button.w = 20

button = layout.button("icon2.png")
button.align_vertical = 'CENTER'
button.y = 5    # 5 pixels below center
button.h = 20
button.align_horizontal = 'LEFT'
button.x = 10   # 10 pixels from the left
button.w = 20

This would produce two buttons, centered on the left of the screen, each 20x20 pixels wide, with 10 pixels between them.

More advanced layout functions may look like this:

column = layout.column(10)   # 10 pixels between each button
column.align_vertical = 'CENTER'
column.align_horizontal = 'LEFT'
column.x = 10
button = column.button("icon.png")
button = column.button("icon2.png")
button = column.button("icon3.png")

Here, the "column" object would automatically lay out each button in a column centered on the left of the 3d view.

The designer may use a global configuration value to change the appearance of the buttons.

if context.area.buttons_left:
    column = layout.column(group=True)
    column.align_vertical = 'CENTER'
    column.align_horizontal = 'LEFT'
    column.x = 10
    button = column.button("icon.png")
    button = column.button("icon2.png")
    button = column.button("icon3.png")
else if context.area.buttons_bottom:
    row = layout.row(group=True)
    row.align_vertical = 'CENTER'
    row.align_horizontal = 'BOTTOM'
    row.y = 10
    button = row.button("icon.png")
    button = row.button("icon2.png")
    button = row.button("icon3.png")