Open Source HTML5 Synoptic Toolkit
Realtime data animated graphics

Get Started!

Create and embed live graphics into web apps
 

Powerful SCADA-like visualization tools, free-form synoptic graphics for real-time data display.
A pure HTML5 solution, mobile friendly, framework agnostic, with no special server requirements needed.
All your data and graphics stay on your servers and clients.

Download the toolkit from Github Github to use it on-premises or load it from our servers.

Apply the compatible SVG graphics to 3rd party apps also...

MQTT/Sparkplug-B directly on the web browser see here! MQTT
Free Google Data Studio community visualization, see here! GDS
Create user interfaces for Node-RED. Learn here! NodeRed
Free Grafana panel plugin available, see here! Grafana
Our MS Power BI custom visual is here! Power BI

create

1. Draw

Create high-quality vector graphics using our powerful Inkscape-based editor. Easily animate the graphics properties linking to your data using tags. Animate fill/stroke colors, text, rotation, size, position, add interactivity and much more. All graphics properties are high-level DOM objects.

code

2. Embed

Embed the Javascript Synoptic API into your web pages: just one line in the HTML file. This API employs an iframe based, framework agnostic, sandboxed method that isolates your site code from the visualization component code. It also provides data privacy without requiring changes in the server and frontend environments.

play_circle_outline

3. Showtime

Pass the SVG file and tagged data in real time using the Synoptic API. The API manages all the complexity providing a few simple calls. No data and no graphics are ever sent to our servers. The under the hood postMessage mechanism makes the cross-domain collaboration easy, safe and efficient.

Sample Usage:

Code: 
       
        scadavisInit({
            container: "div1",
            iframeparams: 'frameborder="0" height="490" width="555"',
            svgurl: "https://raw.githubusercontent.com/riclolsen/displayfiles/master/office2.svg"
          }).then( sv => {
              sv.zoomTo(0.65);
              setInterval(function () {
              sv.storeValue("TAG1", Math.random() * 100);
              sv.storeValue("TAG2", 100 + Math.random() * 80);
              sv.storeValue("TAG3", 120 + Math.random() * 60);
              sv.storeValue("TAG4", 150 + Math.random() * 60);
              sv.storeValue("TAG5", 110 + Math.random() * 30);
              sv.storeValue("TAG6", 200 + Math.random() * 100);
              sv.storeValue("TAG7", 130 + Math.random() * 40);
              sv.updateValues();
              }, 1000);
          })
Interactive Substation Simulation:

SCADAvis.io™ Synoptic Editor
SCADAvis.io Editor

Available only for Windows 10/11 computers on the Microsoft Store.
Based on the popular and powerful open source Inkscape SVG Editor.
Inkscape has been modified to allow for markup of data-linked animations directly in the SVG file.
With this same editor it is possible to create SVG files for the HTML5 Toolkit, Grafana, Node-Red, Power BI and Google Data Studio.
Out-of-store version of the editor costs US$ 129.99 per user (request license here [email protected]).



SCADAvis.io™ Architecture
System Architecture
Our solution workflow clearly separates graphics creation from data binding, so designers can create graphics with no required programming skills and web programmers can easily bind corporate real-time data to the created graphics. All that without compromising data and graphics privacy.

Pricing
The SCADAvis.io basic service for the HTML5 Toolkit is free to use online or on-premises. Paying customers have access to advanced services. Pay with PayPal or money transfer. We do not request Credit Card numbers!
Basic Enterprise
Service Price  Free   US$899 anually 
Unlimited clients 
✓
 
✓
 
Data and graphics privacy
✓
 
✓
 
SVG Editor Windows StoreorOff-Store Windows StoreorOff-Store
Support
No
 		 EmailHigh priority
Code hosted by SCADAvis.io
or
Client (On-premises) 		 SCADAvis.io
or
Client (On-premises) 
Release cycle
Rolling release
 		 Rolling releaseand5 years LTS
Best for PersonalSmall BusinessEvaluation Large corpsHigh-traffic publishingEmbedding

FAQ
help_outline Is my data really safe? The security of your data and graphics only depends on your systems and policies. Our visualization component does not send any of your data to our servers or anywhere else, it just renders the graphics directly on the client machine.
help_outline I need somebody to develop graphics for me. We can develop custom graphics based on your specifications, please contact us: [email protected]
help_outline What about training? We can provide dedicated remote training sessions for your needs, please contact us: [email protected]
help_outline Partnerships? We welcome partnerships with SCADA/IoT cloud services providers, device manufacturers, etc. Please contact us: [email protected]
help_outline I have other questions. Please contact us: [email protected]
HTML5 SVG SVG
Browsers
Compatible with modern HTML5 desktop and mobile browser platforms.