HTML5 Synoptic Toolkit
Data animated graphics

Create and embed live graphics into web apps
 

Powerful SCADA-like visualization tools, free-form synoptic graphics for real-time data display.
Use our Synoptic API to bind your real-time data to graphics created with our SVG Editor and that's it!
A pure HTML5 solution, mobile friendly, no client plugins or special server requirements needed.
All your data and graphics stay on your servers and clients.
Free Grafana panel plugin available here!
Our MS Power BI custom visual is here!

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:
        var office = new scadavis({
          container: "div1",
          iframeparams: 'frameborder="0" height="490" width="555"',
          svgurl: "https://raw.githubusercontent.com/riclolsen/displayfiles/master/office.svg"
        });
        setInterval(function () {
          office.storeValue("TAG1", Math.random() * 100);
          office.storeValue("TAG2", 100 + Math.random() * 80);
          office.storeValue("TAG3", 120 + Math.random() * 60);
          office.storeValue("TAG4", 150 + Math.random() * 60);
          office.storeValue("TAG5", 110 + Math.random() * 30);
          office.storeValue("TAG6", 200 + Math.random() * 100);
          office.storeValue("TAG7", 130 + Math.random() * 40);
          office.updateValues();
        }, 5000);
        office.zoomTo(0.65);
      
Interactive Substation Simulation:

SCADAvis.io Synoptic Editor
SCADAvis.io Editor

Available only for Windows 10 computers in the Microsoft Store.
Based on the popular and powerful Inkscape SVG Editor.
Inkscape was modified to allow for markup of data-linked animations directly in the SVG file.
There are plenty of free resources for learning Inkscape.



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 standard service is free to use. Paying customers have access to advanced services.
Pay with PayPal or money transfer. We do not request Credit Card numbers!
Basic Pro Enterprise
Service Price  Free   US$399 anually   US$1499 anually 
Unlimited clients 

 


 


 
Data and graphics privacy

 


 


 
SVG Editor BuyonWindows Store BuyonWindows Store BuyonWindows Store
Support
Forum
 
ForumEmailStandard priority ForumEmailHigh priority
Code hosted by
SCADAvis.io
 

SCADAvis.io
 
SCADAvis.io
and
Client (On-premises) 
Release cycle
Rolling release
 
Rolling releaseandShort term stable Rolling releaseand5 years LTS
Best for PersonalSmall BusinessEvaluation Medium businessCorporate web appsEducation Large corpsHigh-traffic publishingEmbedding
* Standard plans do not apply to SCADA/IoT cloud services providers.

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.