jddd Training for advanced users
Elke Sombrowski
jddd panels at Desy
MPS Interlock Übersicht
HASYLAB - FLASH
Control Center
AMTF Interlock Bedienfeld
mit freundlicher Genehmigung von M. Trompeter
MVS Vakuum Übersicht
mit freundlicher Genehmigung von M. Boehnert
mit freundlicher Genehmigung von S. May
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 2
Statistics
The number of created panel is growing
rapidly at Desy.
Nearly 100 Desy people attended a
basic jddd training.
In this new training you will learn how to
design “good” panels using advanced
jddd features.
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 3
Content
What is “good” panel design?
> Optimal panel size
> Design hints for colors
> Design hint for On/Off Switches
> Structure your panel
> Tips to avoid long panel startup times
Making complex panels
> The LocationChooser: Paint one panel for all locations
> Using dynamic components
> Buttons with special functions
> Exercises 1
> Plots…
> Tables, AliveComponent
> JavaScript for simple calculations
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 4
Content
> Using an indirect address
> Layers
> Exercises 2
Debugging methods
> How to monitor the panel performance
> Panel runtime during the last 365 days
> File dependencies
Miscellaneous
> SVN folder structure
> Tips for ddd to jddd panel conversion
> How to start jddd
> Save sessions
> Status displays
> How to make bug reports
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 5
What is “good” panel design?
Optimal panel size
Design hint for panel size:
> If the panel if permanently running, use a full screen or half screen size.
> If the panel is running only short times on demand, don’t use a full
screen size, because you can’t see the panels behind.
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 6
What is “good” panel design?
Design hints for colors
A panel with design hints for
colors is available in the
SVN:
/svn/examples/design_hints.
xml
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 7
What is “good” panel design?
Design hint for On/Off Switches
Using a ToggleButton for switching a device on and off is dangerous,
because it’s not clear if the button text describes the state or the action.
In ddd there are different solutions how to display On/Off Switches.
In jddd we propose to use a checkbox with “bigSize” setting.
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 8
What is “good” panel design?
Structure your panel
> Use TabbedPanes
> Use LayeredPanes instead of groups
> Use Include Components for identical components
with different base address
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 9
What is “good” panel design?
Tips to avoid long panel startup times
Graphical widgets in Java have slow startup times  try to reduce the
number of widgets in your panel:
> If possible replace nested If components by a Switch
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 10
What is “good” panel design?
Tips to avoid long panel startup times
Graphical widgets in Java have slow startup times  try to reduce the
number of widgets in your panel:
> Replace If component containing coloured rectangles by a
ColouredIndicator
> Use IncludeComponents and images in their original size to avoid size
recalculation.
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 11
Making complex panels
The LocationChooser: Paint one panel for all locations
A LocationChooser changes the base address of the whole panel.
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 12
Making complex panels
The LocationChooser: Paint one panel for all locations
A LocationChooser in the
new “rpc_test” panel:
/svn/global/propertiesTable.x
ml
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 13
Making complex panels
Using dynamic components
Dynamic list:
> Place only one “row” of
components in the editor
> Set base address for the list:
TTF2.VAC/PUMP_STATION/*/
> Set address for all components,
e.g. ///DREHZAHL
> In run mode all locations are
read from DOOCS
> The list is automatically filled for
all locations
> Optional: use “regexFilter” and
“checkAdr”
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 14
Making complex panels
Using dynamic components
Dynamic includes for displaying BPMs
paint a single
component
read x, z-pos from DOOCS
use dynamic include component
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 15
Making complex panels
Using dynamic components
Dynamic includes for displaying BPMs
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 16
Making complex panels
Buttons with special functions
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 17
Making complex panels
Buttons with special functions
Restore button:
A button with “restore” function highlights all restorable values on mouse over
(values with expert property “restoreValue”).
A mouse click restores the highlighted values.
See also: /svn/examples/RestoreButton.xml
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 18
Exercises 1
> Exercises
 1a) Create a panel with a DynamicList for pump stations including pump
station name, Drehzahl, online status (base address of the dynamic list is:
TTF2.VAC/PUMP_STATION/*/).
 1b) Add a button with “Set component property” function to set a regex filter
for the dynamic list.
 2) Create a panel with a DynamicIncludes component for BPMs. The BPM
component should change it’s color if it is enabled (use e.g.
TTF2.FEEDBACK/ORBIT/9ACC2.X/BPM_ENABLE).
 3) Create a panel with arbitrary singenerator settings and use a “Restore”
button for restoring old values.
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 19
Making complex panels
History Plots: Scales and Data Tip
unused
Limits during run-time
Scale info
from server
xxx.EGU
@ start of plot
Data Tip: store user comments
Enable Data Tips
in editor
Or
Run-time
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 20
Making complex panels
Plots
Historien und Zeitreihendarstellungen
Maximum; tmax
candlestick representation
2 x standard deviation
mean value
Minimum; tmin
fourier transformation
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 21
Time Domain Correlation Plot
> refAdr: data for X-scale
> adr0..adrN:
can be xxx.TD
or single values with
“interpretation” as I or Q
> Run-time:
single values are
displayed as horizontal
or vertical lines
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 22
Time Domain Plots
Enables “Persistence Mode”
1/16 resolution
Full resolution
Mean of 16 values or
max value, calculated
on server
Auto mode:
No more than one
value per pixel:
speed-up drawing
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 23
Making complex panels
Plots
Master scale
> Plots with the same masterXScale zoom simultaneously within a jddd
application
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 24
Making complex panels
Tables
A table displays the
content of an array.
A colormap can be
used to highlight
values.
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 25
Making complex panels
Alive Component
> The Alive component is a transparent layered pane where one or
multiple components can be placed.
> In run mode the components change their position or size related
to control system values.
> Example: BPM position display
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 26
Making complex panels
JavaScript for simple calculations
The "dataOp" property is used to perform mathematical operations with control
system values using JavaScript syntax. This property is an expert property and
is available for the jddd components Button, Value, ProgressBar,
ColouredIndicator, StatusRegister and Switch.
An example how to use this property is available as tooltiptext in the properties
table, e.g.:
dataOp = $adr*2+${FAC/DEV/LOC/PROP}
At runtime "$adr" and "${FAC/DEV/LOC/PROP}" are replaced by the values
read from the corresponding addresses.
See also:
/svn/examples/dataOp.xml
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 27
Making complex panels
Using an indirect address
The property "indirectAdr" is a control system value containing an address string.
The indirect address can be placed either in the "indirectAdr" property or directly
in the "adr" or the buttons "xmlFile" property. In the "adr” or "xmlFile" property an
indirect address string has to be marked by "${indirect address string}".
For example:
indirectAdr = ///ADR_SV.LEFT
adr = ${///SADR}
xmlFile = commonFCT_CODE_${///FCT_CODE}.xml
See also:
/svn/examples/IndirectAddress.xml
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 28
Making complex panels
Layers
> Each component can be placed on a
specific layer, which is visible or invisibe at
runtime.
> The predefined layers are "NONE" and
"EDIT". Additional layer names may be set
in the expert property "layerList" of the
background "EditorPanel”.
> By default new components are placed at
layer "NONE", which means that they are
always visible at runtime.
> The "EDIT" layer is used for components,
which are only visible in edit mode.
> If a layer name starts with "!" it is invisible at
panel startup.
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 29
Making complex panels
Layers
Layers can be toggled at runtime:
> In the context menu
> With a Checkbox
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 30
Exercises 2
> Exercises
 1) Plot Exercise…
 2a) Create a panel containing 3 different spectrum plots of singenerator data (e.g.
TEST.DOOCS/SINGENERATOR/SIN/DATA.TD). Use the master scale to zoom all
plots at the same time.
 2b) Start the panel twice and test the zoom functionality.
 3) Create a panel with an AliveComponent, which moves a circle. Use singenerator
data (TEST.DOOCS/SINGENERATOR/SIN/DATA.TD) for testing.
 4) Repaint the /svn/examples/dataOp.xml panel.
 5) Create a panel with an Oval and a Rectangle. Use layers to show/hide these
components.
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 31
Debugging methods
How to monitor the panel performance
> Watch the memory bar (in the upper right corner of the application)
 It displays Used/Max memory
> In the About panel:
 Check the component count
 Check the number of calls per second
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 32
Debugging methods
Panel runtime during the last 365 days
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 33
Debugging methods
File dependencies
Jddd provides information about
SVN file dependencies:
> 1.Tab: displays all file paths
with the wanted file name
> 2. Tab: displays all include
components and files opened
on a button click
> 3. Tab: displays where the file is
used as include component and
from which panels it can be
started
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 34
Miscellaneous
SVN folder structure
Conventions for SVN file names
and folder structure:
> The main panel has to contain the
word “main”. This file is displayed
in bold letters in the SVN browser.
> Use “images” folder for image
files.
> Use “includes” folder for included
components.
> Use “expert” folder for expert
panels.
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 35
Miscellaneous
Tips for ddd to jddd panel conversion
> To convert from ddd into jddd one has to start ddd, load a, select the
panel in the list (e.g. "main_select"), click on file and on "Test: Save as
XML".
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 36
Miscellaneous
Tips for ddd to jddd panel conversion
Reworking the converted panel:
> Buttons which are placed on top of each other have to be replaced by a single
button in jddd.
> Alive and StatusRegister components have to be reworked, because they
cannot be converted correctly.
> Use LayeredPanes instead of rectangles to structure your panel.
> Replace nested "If" components by a "Switch” component if possible.
> Replace “If” components showing coloured rectangles by a ColouredIndicator if
possible.
> Use a TabbedPane to combine standard and expert view in one panel.
> Think about using new jddd widgets like DynamicList, DynamicIncludes,
Tables…
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 37
Miscellaneous
How to start jddd
> Start jddd via Java Webstart from your browser
> Start jddd via command line (works only at Desy and only on Linux or
Mac):
 jddd-run -file /svn/examples/test.xml
 jddd-launcher -file /svn/examples/test.xml
 (see jddd help page for command line options)
> Your Java Webstart link for special panels:
 javaws
‘http://ttfinfo2.desy.de//common/applications/jddd_xml/svn_jnlp.jsp?run=true&file=/svn
/global/WatchdogOverview.xml&address=TTF2.SYSTEM/TTF2DAQ5.WATCH//'
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 38
Miscellaneous
Save sessions
A session saves a set of jddd panel
names, sizes, positions and special
settings.
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 39
Miscellaneous
Status displays
jddd panels can be saved as png files on a local disk with a selected update rate (the default is 60
seconds). For writing png's with jddd you have to use the -png option like:
jddd-run -file /svn/examples/singenerator.xml -png /home/elkes –rate 10
Here is an example how to display these panel pictures in a web browser:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test jddd png Output</title>
<script type="text/javascript">
setInterval('reloadImage()', 2000); // 2 seconds
function reloadImage()
{
img = document.getElementById('theimage');
img.src = '/home/elkes/singenerator.png?' + Math.random();
}
</script>
</head>
<body>
<h1>Test png file creation!</h1>
<p><img src="/home/elkes/singenerator.png" name="testbild"id="theimage"></p>
</body>
</html>
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 40
Miscellaneous
How to make bug reports
> The bug report should contain the following information:
 Operating system
 jddd version number
 Panel name and path in SVN
 Screenshot
 Detailed description
> Please send your bug report to jddd@desy.de
Elke Sombrowski | Training for advanced jddd users | May 2013 | Seite 41