HTML5 Synoptic Toolkit
Real Time Data Visualization

 

 

Embed synoptic graphics into web apps
without losing control of the data!

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.

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);
      

SCADAvis.io Synoptic Editor
SCADAvis.io Editor

Available for Windows 10 computers in the Microsoft Store for only US$19.99 US$9.99.
Based on the powerful Inkscape SVG Editor (open source).
Inkscape was modified to allow markup of SCADA-like animations directly in the SVG file.
The created graphics can be later animated by your real-time data using our simple Javascript Synoptic API.
There are plenty of free resources on the web for learning Inkscape (tutorials, books, videos, examples, etc.).


English badge

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 service is free to use. Pro/Enterpise customers have access to support, stable/LTS versions and out-of-store editor. Pay with PayPal. We do not request Credit Card numbers!
Basic Pro Enterprise
Service Price  Free   US$299 anually   US$1499 anually 
Unlimited clients 

 


 


 
Data and graphics privacy

 


 


 
Editor BuyonWindows Store Windows StoreandOut-of-Store Windows StoreandOut-of-Store
Support
No
 

Standard
 

High 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 CorpsService providersEmbedding
* 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.