https://github.com/riclolsen/scadavis

HTML5 Synoptic Graphics Toolkit. SCADA-like realtime visualization tools for the web.
https://github.com/riclolsen/scadavis

html5 library scada svg

Last synced: about 1 year ago
JSON representation

HTML5 Synoptic Graphics Toolkit. SCADA-like realtime visualization tools for the web.

• Host: GitHub
• URL: https://github.com/riclolsen/scadavis
• Owner: riclolsen
• License: gpl-3.0
• Created: 2022-11-12T20:31:48.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-11-24T12:24:04.000Z (over 2 years ago)
• Last Synced: 2024-05-18T07:41:39.027Z (about 2 years ago)
• Topics: html5, library, scada, svg
• Language: JavaScript
• Homepage: https://scadavis.io
• Size: 1.74 MB
• Stars: 10
• Watchers: 1
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          


    



[SCADAvis.io](https://scadavis.io/)

============

HTML5 Synoptic Graphics Toolkit. SCADA-like realtime visualization tools for the web.

![](https://img.shields.io/badge/license-GPL-green "License GPL")

## Mission Statement

To provide a powerful toolkit for the producing of SCADA-like SVG displays for modern web browser platforms.

## Major features

* Pure HTML5/Javascript/SVG runtime.

* Use a custom Inkscape SVG Editor to create displays.

* Link tagged realtime data to SVG animations at runtime.

* Mobile friendly, framework agnostic.

* No special server requirements needed.

## Example Javascript code

    scadavis({

        container: "div1",

        iframeparams: 'frameborder="0" height="490" width="555"',

        svgurl: "https://raw.githubusercontent.com/riclolsen/displayfiles/master/office.svg"

    }).then( function (sv) {

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

        }, 2500);

        sv.zoomTo(0.65);  

    })

## Substation Simulation Example

https://codepen.io/ricardolo/pen/MWXmPpB