EDGE Simple Overlay

« Using the Command Console | EDGE User’s Guide | Adding a simple 3D overlay »

One of the common items to be added on to a graphics scene that is visualizing a simulation is some simple overlays which show numerical data from the simulation. This tutorial shows a bare-bones overlay with text fields and a dynamically updating field using a value from a node.

Simple directions

1. Add the following code into a tcl script and source it in your "$USERDATA/user.cfg" (See Adding a Tcl Script if you need help doing this), or, just paste the following commands into your tcl command console:

   doug.load_plugin dsp_canvas doug.load_plugin dsp_drawcanvas

   dsp_canvas create .example -background NONE -foreground #00ff00 -font arial -nrows 40 -ncols 60 set myvariable 0.0 .example create text 1 1 -anchor w -textscale 1.0 1.0 -text "Some text to display!" -foreground #ffff00 -tag "text1 text2" .example create text 1 3 -anchor w -textscale 1.0 1.0 -text "Some more text in green" -foreground green -tag text3 .example create text 1 5 -anchor w -textscale 1.0 1.0 -textvariable myvariable -foreground pink -background black doug.callback add update -nodes "CM_Cam" { set myvariable [format "%.2f" [doug.node CM_Cam get -x]] }

   set mapping "[dsp.view MAIN get -mapping].MAIN" dsp_canvas place .example -in_display ${mapping}

2. Run "./run_graphics" to see the overlay example

A simple overlay in EDGE with a dynamic field

What's really going on

Let's look at each of the sections of lines and discuss what they do.

The top section just confirms that the canvas and drawcanvas plugins are loaded. These lines are not required, although you will get an error if you happen to be running in an instance of EDGE that does not have these plugins loaded.

doug.load_plugin dsp_canvas
doug.load_plugin dsp_drawcanvas

Next, we create a canvas. You can specify how many rows and cols you want it broken up into and other properties such as colors and fonts to use. This creates a new tcl command that is the name of your canvas that you can use later.

dsp_canvas create .example -background NONE -foreground #00ff00 -font arial -nrows 40 -ncols 60

Then, you can create all sort of elements and add them to the canvas. Use the new tcl command for your canvas to add items such as text, lines, arcs, rectangles, circles, polygons, and images. Each element can have as many tags as you want also, which can be extremely useful for configuring a group of items at once. For example, lets say that when an instrument is not calibrated, certain text elements should appear in yellow, then make sure as you create those elements they all share some tag, such as "CALIBRATION" so that when the calibration state changes, you can configure the background color of the tag "CALIBRATION" and all of those items will turn yellow.

set myvariable 0.0
.example create text 1 1 -anchor w -textscale 1.0 1.0 -text "Some text to display!" -foreground #ffff00 -tag "text1 text2"
.example create text 1 3 -anchor w -textscale 1.0 1.0 -text "Some more text in green" -foreground green -tag text3
.example create text 1 5 -anchor w -textscale 1.0 1.0 -textvariable myvariable -foreground pink -background black

Now anytime we update myvariable, that canvas element should update to reflect its value. Here is an example where anytime the CM_Cam node is updated, we will grab the X value and update our variable value formatting it to two decimal places.

doug.callback add update -nodes "CM_Cam" { set myvariable [format "%.2f" [doug.node CM_Cam get -x]] }

Now we need to tell the canvas plugin where to place the canvas. We can place it into the scene by attaching it to a node, or just attach it to the foreground on the display, or attach it to a particular viewport on the display. To attach it to a viewport, we first get the mapping to the display to put it on, then add the viewport name to the end. For the viewport named "MAIN", we might do:

set mapping "[dsp.view MAIN get -mapping].MAIN"
dsp_canvas place .example -in_display ${mapping}

There are many capabilities in the canvas plugins and you can do amazing things with it. Hopefully this tutorial gets you started with a simple template that you can customize.

Notes:

Recently, a user was asking how they might dynamically position elements based off of how many were on. Meaning, items would slide into view from the bottom as more canvas elements were enabled, and slide back down as they were removed. Here is the email response which may help some others with positioning, or getting the flags from elements with a particular tag.

ok, well it depends if you have each element (or field) in a separate canvas, or they are just different text elements on a single canvas (more likely I suppose).

First step is to make sure you have various tags on all your elements so you can easily group them. Something like "text" should be a tag in all of your text elements. A tag like "LVLH" would probably only be in the fields for LVLH.

Next, to see if it is currently on, you can run an itemconfigure on the flags without setting it. like this:

set flaglist [.can itemconfigure tag1 -flags]

It returns a list of flags. If "HIDE" is in the list, then it is currently hidden. If it isn't in the list, then it is being shown (assuming the canvas is on). A simple check to see if the HIDE flag is in the list might look like:

if { [lsearch -exact [.can itemconfigure tag1 -flags] "HIDE"] < 0 } {
     # HIDE is not in the list of flags, so element is NOT hidden
 }

of course, to hide or unhide an element, you would set the flags rather than query them:

.can itemconfigure tag1 -flags HIDE  # To hide any tag1 elements
 .can itemconfigure tag1 -flags !HIDE # To unhide any tag1 elements

If you just want to move them around based off of the number turned on (for example slide them to the left or up as you turn on new ones at the bottom), then you really just need to keep track of which ones are on. You can keep track of it yourself, or just show/hide them with the itemconfigure commands and then figure out if they are on or off using the technique above. Then, anytime the state changes (someone turns one on or off), you just have a loop around all the elements to reposition them all starting with a zero offset. Everytime you find one that is on, you use the count to multiply by an offset for the next one. So, for example, if your margin is set to 20, you would go through the loop and find the first one enabled and move it to 0 (020). You go on, skipping items that are off, and position the next one at 0 (120). And so on. To reposition elements on a canvas, you can use:

.example coords text1 10 10

Hope that helps.

« Using the Command Console | EDGE User’s Guide | Adding a simple 3D overlay »