S. Fargier & M. Donzé
15/07/2020
Animated Graphics & Dashboard Project
Aka "Flow" project
Animated Graphics
"SSVG"
Stateful SVG
Example: SVG demonstrating logical state versus graphical state
- Add a logical state to a graphical object
- Embedded within the SVG file
- Describes its relations with the graphical state
-
Portable
- Additional metadata on a self-contained SVG file
- Can be implemented with any framework (Java, Qt, Web ...)
- With different animation technologies (SMIL, CSS3, JS, C++ ...)
Stateful SVG
<state>
<transition duration="200ms" />
<property name="range" min="0" max="100" type="number" initial="0">
<relation query-selector="#rect1" attribute-name="width" from="100%" to="0%" />
<relation query-selector="#rect1" attribute-name="fill" to="blue" />
</property>
</state>-
Declarative
- Separate description from operation
- Focus on what not on how
- Modular
- Low dependency standalone "engine"
- Direct DOM integration
Example: SSVG state declaration
-
SSVG-Engine: GitLab / Playground / Distribution
- Only depends on subparts of D3.js
- ~160kB bundled size
- Written according to EN-SMM and EN-SMM-APC guidelines
- >90% code-coverage, type-checking, linting, front-end automated tests
Stateful SVG: State of Art
Demo !
- SSVG Widget Editor
- Web based metadata editor
- Does not replace SVG editors, focuses on animations
- Designed for basic animations (translations, rotations, scaling ...)
- Purpose
- To ease and fasten widget development
- To lower the tech learning curve
Stateful SVG: Next Steps
Flow Dashboards
- Solution for devices monitoring and supervision
- Self-service, accessible to non-developers
- Scalable and Modular
- Micro-service oriented, sustending heavy loads
- Easy to extend and grew (ex: ssvg, RDA3 ...)
- MALT compliant, and opensource oriented
- Based on a major opensource project
Goals and Purpose
Flow Project
- Flow-Based programming: Node-RED
- Strong opensource presence
- Part of the JS Foundation (Apache 2.0 license)
- Created by IBM (in 2013)
-
Deeply nested IOT and home-automation
- Pre-installed on Raspbian
- Available on BeagleBone, Android and Docker
- Integrates major clouds: IBM, AWS, Azure ...
- Compatible with most protocols: MQTT, WebSocket, HTTP, TCP, S7, WinCCOA ...
Node-RED
Node-RED
Demo !
State of Art
Questions ?
Dashboard Project
By Sylvain fargier
Dashboard Project
Dashboard Project Introduction
