Sylvain Fargier (EN-SMM-APC)

28/11/19

Animated Graphics

Aka "SCADA Web" project

Introduction

• Graphically render and animate a system state
  • ​Mechanical plans, synoptics views, logical ...

• Allow user interactions with it
  • Control, link to historical data ...

Introduction: Goals and Purpose

• At CERN: there's a need for this kind of technology
  • ​ex: FBI, TimWeb, TIDVG

• Externally: a lot of solutions exists
  • Some commerical ex: Archer, a couple of open-source ex: FUXA

Introduction: State of Art

• No ideal solution
  • ​Always rely on a specific technology or language (Node, Python ...)
  • Often not modular and hard to re-use
  • Licenses and business models (see CERN MALT)
  • Community support and stability

• All relies on a common mature technology​: SVG 1.1

Introduction: State of Art

Tech proposal: Stateful SVG

• Add a logical state to an SVG
  • Describes its relations with the graphical state
  • Directly embedded within the SVG file​

• Similar to what SMIL and events provides
  • But at a logical level (in opposition to the graphical level)
  • The SVG knows how it should be rendered according to its logical state​

Tech proposal: Stateful SVG

• Separates design job from software development
  • ​The designer decides how his graphics should animate and be displayed
  • No programmatic skills needed to create a system view

Tech proposal: Stateful SVG

Example: SVG demonstrating logical state versus graphical state

Project

• One "Stateful SVG" specification

• Four work packages:
  • ​Stateful SVG Engine
  • Stateful SVG widget editor
  • DataSources Plugin
  • Stateful SVG binding tool

Project: Overview

• Modular
  • Separate "core" business from applicative part
  • Implement additional features as "plugins"
• ​Declarative
  • Separate the description from the operation
  • Focus on what not on how
• 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++ ...)

Project: Guidelines

• Stateful SVG Specification
  • Describes the declarative metadata domain specific language
  • Relies on SVG 1.1 and other techs yet to be defined (XML, Json ...)
  • RFC style writing and reviews

​​

• Purpose
  • To not write an additional un-specified/un-documented animation engine !
  • To agree on a common format

Project: Stateful SVG Specification

• Stateful SVG Engine
  • First version designed for web-browsers
  • Does not rely on any Applicative framework (Vue.js, React, Angular ...)
  • May rely on existing animation frameworks (anime.js, SnapSVG, GreenSock ...)

​​

• Purpose
  • To load Stateful SVG metadata
  • To Reflect state changes on the graphical layer by running animations

Project: Stateful SVG Engine

• Stateful SVG 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

Project: Stateful SVG widget editor

• DataSources plugin
  • An extension to the Stateful SVG specification
  • First version designed for web-browsers
  • Should be URI/URL based, granting access to several middleware (CMW, C2MON, DIM ...)

​​

• Purpose
  • To link Stateful SVG with devices
  • To have standalone self-contained SVG apps

Project: DataSources plugin

• Stateful SVG binding tool
  • Drag and drop tool to instantiate and place widgets
  • First version designed for web-browsers
  • Editor for the DataSources metadata

​​

• Purpose
  • To ease and fasten final views design
  • To lower the tech learning curve

Project: Stateful SVG binding tool

Questions ?