Creating a Custom Panel in s-Dashboard Using SVG

You can use SVG to create a custom panel in s-Dashboard. You will use the description () field of your SVG to link data from s-Server to your panel. In this field, you can 1) associate columns from s-Server with objects in your SVG, and 2) create clickable events that communicate with other dashboards.

For example, the following field links an object in the panel to a column called “beta”:

<desc>SLDATA=beta</desc>

In order to create a custom panel using SVG, it is helpful to have knowledge of SVG and custom style sheets as well as SQL and JavaScript to handle inter-panel interaction.

You can use this panel to animate any SVG document. If you don’t have one on hand, you can create these with the open source application Inkscape (available at https://inkscape.org/en/). You can also export a document from Adobe Illustrator in SVG format.

We recommend generating an optimized version of your SVG document, this will create classes for most of the styling in your document. To do so in Inkscape, for example, open the file, select Save As… , and choose the Optimized SVG type.

How It Works

Each SLDATA option selects a style class to be assigned to the SVG object. For example, let’s assume we’re reading a stream with a column called “alpha”. The column contains text, either a null string or the values “low”, “normal”, or “high”. You select a path in Inkscape and give it the description SLDATA=alpha.

Each time a row is received by s-Dashboard, the value of the “alpha” column will be used to select the class for the object. To make sure not to interfere with any other style classes in the SVG document, StreamLab adds the prefix SLDATA- to each class. If, then, a column named “alpha” contains the value “normal”, the path will have the class “SLDATA-normal”.

You can then reference these classes using custom style sheets:

.SLDATA-normal {
  fill: red
}

Creating a Custom Panel Using SVG

Creating a custom panel using SVG requires both modifying the SVG file itself and modifying the panel in StreamLab.

Preparing the SVG

To prepare the SVG:

  1. Open your SVG document in Inkscape or another editing program. You can also change the field directly in a text editor.
  2. Select an object that you want to animate. You want to drill down to the lowest level object, such as a path or rectangle. Use Object > Ungroup to drill down into grouped objects.
  3. Use Object > Object Properties to open the properties form.
  4. In the Description field, enter information for SLDATA or SLCLICK: SLDATA=. Selects a column to control this object’s class. An object can have more than one SLDATA option (leading to multiple style classes assigned to the object). These need to be separated by spaces, as in “SLDATA=alpha SLDATA=zeta”. If the column name or id contains spaces, it can be enclosed in double-quotes. SLCLICK=. Makes an object clickable and assigns an ID to it. You can use this to send data to other panels. See Sending Data to Other Panels below.
    sd_svg_custom_inkscape
  5. Click Set to save the description.

Modifying the Panel

  1. In s-Server or StreamLab, confirm that a stream or view exists that you can use to display data in the panel.
  2. Click Select Panel.
  3. Choose Customizable Panels > SVG Custom
  4. Select this stream as input.Select the Customizable Panels > SVG Custom in one of the frames on your s-Dashboard page. The panel opens with a pre-installed SVG of the SQLstream logo.
    sd_svg_custom
    You can send data to this panel using the steps in the section below called Sending Sample Data to the Built-in SVG Panel.
  5. Click Panel Preferences. The Panel Preferences for Customizable Panels: SVG Custom opens.
    sl_svg_custom_panel_prefs
  6. Here, you can enter code for your SVG object. The easiest way to do this is to open your SVG in a text editor, copy the text, and paste it into the SVG text field in the panel.
  7. In the Styles field, you can then create CSS that modifies objects with SLDATA in their field. CSS fields are created with the following structure:
.SLDATA-<value-in-column>
  1. If you have a column with values “low”, “normal”, and “high”, for example, StreamLab creates the following styles:

.SLDATA-low .SLDATA-normal .SLDATA-high ``` 9. Add CSS for these styles to change the appearance of the SVG objects referenced by them. For example, the following code changes the fill of objects with “SLDATA-low”, “SLDATA-normal”, and “SLDATA-high”. 10. When you are satisfied with both your SVG and CSS, click Update.

Sending Messages to Other Panels

Each object with a SLCLICK id can be clicked on by users. This sends a message to the s-Dashboard blackboard that contains the id, such as the following:

{"channel":"svg_element_selected","id":"click me","__fromPanel":"panel2"}

You can then set another panel’s input options to listen to this channel on the blackboard and rewrite its SELECT statement each time a message is sent. See Using the Inter Panel Blackboard for more details.

If the user clicks on the background of the SVG diagram, outside of any object, a blackboard message will be sent with an id of null.

Sending Sample Data to the Built-in SVG Panel

The default panel contains an SVG document showing the SQLstream logo. This panel has the following fields assigned to its paths:

  • Some paths are marked with SLDATA=alpha, SLDATA=beta, and SLDATA=gamma.
  • The letters “s”, “q”, and “l” have SLCLICK ids of S,Q, and L, respectively.

The panel expects a stream with columns alpha, beta, and gamma, each containing a null field, or the text “low”, “normal”, or “high”.

You can send data to this object using the links below. Each link opens up SQLstream’s WebAgent.

  1. First, use this link will to create SALES.SVGTEST:
  2. Paste the following into a browser:
    http://localhost:5580/?test_sqlstream_token=2&test_read_loadLimit=10&test_read_token=1&test_sqlstream_in=CREATE%20OR%20REPLACE%20STREAM%20%22SALES%22.%22SVGTEST%22%20(%0A%20%20%20%20%22alpha%22%20VARCHAR(32)%2C%0A%20%20%20%20%22beta%22%20VARCHAR(32)%2C%0A%20%20%20%20%22gamma%22%20VARCHAR(32)%0A)&long_status=true&test_get_map_format=true&test_continuous_map_format=true&test_read_multiplex=false&test_read_skip=false#test_sqlstream
    
  3. In the page that opens, click Open Socket. WebAgent opens a WebSocket to s-Server.
  4. Click Send. WebAgent creates the stream SALES.SVGTEST.

To write data to the stream:

  1. Click this link:

http://localhost:5580/?test_sqlstream_token=1&test_read_loadLimit=10&test_read_token=1&test_sqlstream_in=CREATE&test_write_command=INSERT%20EXPEDITED%20INTO%20%22SALES%22.%22SVGTEST%22%20(%22alpha%22%2C%20%22beta%22%2C%20%22gamma%22)%20VALUES%20(%3F%2C%3F%2C%3F)&test_write_row=%5B%22%7B%7Blow%7Cnormal%7Chigh%7D%7D%22%2C%22%7B%7Blow%7Cnormal%7Chigh%7D%7D%22%2C%22%7B%7B%7C%7C%7C%7C%7C%7C%7C%7C%7C%7C%7C%7C%7C%7C%7C%7C%7C%7C%7C%7C%7C%7C%7C%7C%7Clow%7Cnormal%7Chigh%7D%7D%22%5D&long_status=true&test_get_map_format=true&test_continuous_map_format=true&test_read_multiplex=false&test_read_skip=false#test_write> ``` 2. In the page that opens, click Open Socket. WebAgent opens a WebSocket to s-Server. 3. Click Send Command. WebAgent opens an Insert statement to the SALES.SVGTEST stream. 4. Click Send Row. WebAgent sends random rows to the SALES.SVGTEST stream. You can choose how often this row sends by clicking buttons in the Repeat field. 5. Return to the panel to see data flowing. 6. You can open a second panel in the dashboard and select System > Blackboard to view the messages sent when you click on the diagram.

sd_webagent_send_data