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.
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 requires both modifying the SVG file itself and modifying the panel in StreamLab.
To prepare the SVG:
.SLDATA-<value-in-column>
.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.
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.
The default panel contains an SVG document showing the SQLstream logo. This panel has the following fields assigned to its paths:
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.
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
To write data to the stream:
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.