55
GUIs with dynamic panes A technique for flexible front panel scaling

GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

GUIs with dynamic panes

A technique for flexible front panel scaling

Page 2: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Agenda

• Introduction

• A scaling VI

• A scaling class hierarchy

• Adding interaction

• Decoupling

• Afterthoughts

• Questions

Page 3: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Introduction (About)

• Wiebe Walstra

• Wiebe@CARYA

Page 4: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Introduction

Page 5: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Introduction

• What are dynamic panes?

• The code is not:• A product• Finished• Polished

• The code is:• Working for me• Flexible• Freely available

• Omitting 90% of the details

Page 6: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Introduction

DEMO

Page 7: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

A Scaling VI

Page 8: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

A Scaling VI

• Scaling anything\everything is a problem

• GObject Position is read\write

• GObject Bounds is read only

• Set Size is a pain

Page 9: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

A Scaling VI

Page 10: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

A Scaling VI

Page 11: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

A Scaling VI

Page 12: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

A Scaling VISpecial scaling for graphs

and subpanels

Page 13: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

A Scaling VI

Page 14: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

A Scaling VI

Page 15: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

A Scaling VI

DEMO

Object

+ Init Object+ Scale

Page 16: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

A Scaling VI

0.0 1.0

Bounds x’ = Ax + B

0.0

1.0y’ = Ay + B

Page 17: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

A Scaling VI

DEMO

Page 18: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

A scaling class hierarchy

Page 19: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

A scaling class hierarchy

Page 20: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

A scaling class hierarchy

Page 21: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

A Scaling VI

Object

+ Init Object+ Resize

Viewport

+ Init Viewport+ Resize

Page 22: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

A scaling class hierarchy

DEMO

Page 23: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

A Scaling VI

Object

+ Init Object+ Resize

Viewport

+ Init Viewport+ Resize

Divider

+ Init Divider+ Resize

Page 24: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

A scaling class hierarchy

DEMO

Page 25: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

A Scaling VI

Object

+ Init Object+ Resize

Viewport

+ Init Viewport+ Resize

Divider

+ Init Divider+ Resize

Common parent. (Why?)

Page 26: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

A Scaling VI

Object

+ Init Object+ Resize

Viewport

+ Init Viewport+ Resize

Splitter

+ Init Splitter+ Resize

IObject

+ Resize

What if splitter has a splitter?

Page 27: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

A Scaling VI

Object

+ Init Object+ Resize

Viewport

+ Init Viewport+ Resize

Splitter

+ Init Splitter+ Resize

IObject

+ Resize

Splitter and Viewport mostly

the same!

Page 28: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Object

+ Init Object+ Resize

IContainer

# Set Items+ Resize

Viewport

+ Init Viewport

IObject

+ Resize

Splitter

+ Init Splitter

How does Icontainerknow how to scale?

Page 29: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Object

+ Init Object+ Resize

IContainer

# Set Items# Distribute+ Resize

Viewport

# Distribute+ Init Viewport

IObject

+ Resize

Splitter

# Distribute+ Init Splitter

CLASSHIERARCHY

Page 30: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

OBJECTHIERARCHY

Page 31: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Adding interaction

Page 32: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Object

IContainer

…+Show Hide (Label)

IObject

…+ Set Label+ Show Hide (Label)

Show\hide

Page 33: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

DEMO

Page 34: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Adding interaction

Page 35: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Adding interaction

Page 36: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Adding interaction

Page 37: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Object

IContainer

Viewport

IObject

Splitter

Interaction

Page 38: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Object

IContainer

Viewport

IObject

Splitter

Interaction

…+ On Mouse Move

Page 39: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Object

IContainer

…# Hit Splitter

Viewport

IObject

…# Hit Splitter

Splitter

…# Hit Splitter

Interaction

…+ On Mouse Move

Page 40: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Object

IContainer

…# Hit Splitter+ Resize Pane

Viewport

IObject

…# Hit Splitter

Splitter

…# Hit Splitter+ Resize Pane

Interaction

…+ On Mouse Move

Page 41: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Adding interaction

Start splitter VIs

Handled by class

Page 42: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Adding interaction

Page 43: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Adding interaction

DEMO

Page 44: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Decoupling

Page 45: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Decoupling

Page 46: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Object

IContainer

Viewport

IObject

Splitter

Interaction

Interaction by reference

+ Init Interaction by referenceALL METHODS

Page 47: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Decoupling

Page 48: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Decoupling

Page 49: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Decoupling

DEMO

Page 50: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Afterthoughts

Page 51: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Afterthoughts

Page 52: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Afterthoughts

• Plays nice with SubPanels

• More icing on the cake

• Min, max

• Hit detect

• Show Hide is a reg.ex.

• Query visibility

• Events

• Alternatives container

• Update objects in a container

• Load\store screen (coming)

Page 53: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Afterthoughts

• Place to put it

• Documentation, Examples, Manual

• Nasty LV bug

Page 54: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

https://github.com/Carya-Automatisering

/Dynamic-Scaling

Page 55: GUIs with dynamic panes - Argenta · Introduction •What are dynamic panes? •The code is not: •A product •Finished •Polished •The code is: •Working for me •Flexible

Questions