[//]: # (Presentation Setup)
Lively Simulation

Leonardo Hübscher, Juliane Kleinknecht

End User Development Seminar SS 20
Software Architectures

14.07.2020
---
14.07.2020
End User Development SS 20
Lively Simulation
Leonardo Hübscher, Juliane Kleinknecht

Outline

  1. Simulations
  2. Motivation
  3. Project Goal
  4. Energy Simulation
  5. Demo
  6. Improve End User Experience
  7. What's Next?
---
14.07.2020
End User Development SS 20
Lively Simulation
Leonardo Hübscher, Juliane Kleinknecht

Simulations

Real system 🌎 → Too complex ❔ 😰 → Model 📝 → Simulation ⚙

  • Experimenting in simulation → finding hypothesis
  • Understanding the behavior of systems
  • Dynamic simulations: time dependent 🕑
    • → observe processes and flows

Bouncing Ball Example

---
14.07.2020
End User Development SS 20
Lively Simulation
Leonardo Hübscher, Juliane Kleinknecht

Demo Bouncing Ball

---
14.07.2020
End User Development SS 20
Lively Simulation
Leonardo Hübscher, Juliane Kleinknecht

Motivation

We want to enable end-users to create simulations in a visually structured way
---
14.07.2020
End User Development SS 20
Lively Simulation
Leonardo Hübscher, Juliane Kleinknecht

Project Goal

We want to enable end-users to create simulations in a visually structured way
Idea Build a semi-graphical simulation framework
  • Starting point: PoC* in Lively Webwerkstatt (legacy)
  • Allow documentation to be part of simulation
  • Provide a way that allows simulation result investigation
  • Proper Lively integration
  • Port existing energy simulation from legacy
*PoC...Proof of concept
---
14.07.2020
End User Development SS 20
Lively Simulation
Leonardo Hübscher, Juliane Kleinknecht

Energy Simulation

  • Simulate energy flow
  • Fuel → transformer → consumer
  • Possible hypothesis:
    • Is heat storage big enough?
    • Is a backup system required?

Energy simulation in Lively Webwerkstatt [1]

[1] https://lively-kernel.org/repository/webwerkstatt/demos/EnergySimulationScripted.xhtml
---

Demo

Energy Simulation Port

---
14.07.2020
End User Development SS 20
Lively Simulation
Leonardo Hübscher, Juliane Kleinknecht

Demo

Let's use our framework for the energy simulation!

What we want to show:
  1. Ported simulation is working
  2. How the simulation is being edited
  3. Cell locality
  4. Cell state visualization
---
14.07.2020
End User Development SS 20
Lively Simulation
Leonardo Hübscher, Juliane Kleinknecht

Demo

---
14.07.2020
End User Development SS 20
Lively Simulation
Leonardo Hübscher, Juliane Kleinknecht

Demo

Let's use our framework for the energy simulation!

What we have seen:
  1. Ported simulation works ✅
  2. Loading a simulation and adding a cell ✅
  3. Independent cells/ global state access ✅
  4. Log tables and charts ✅
---

Design Improvements

Improve end user experience

---
14.07.2020
End User Development SS 20
Lively Simulation
Leonardo Hübscher, Juliane Kleinknecht

Managing State and Behavior

---
14.07.2020
End User Development SS 20
Lively Simulation
Leonardo Hübscher, Juliane Kleinknecht

Managing State and Behavior

Image based on: Smith, R. B., Maloney, J., & Ungar, D. (1995, October). The Self-4.0 user interface: manifesting a system-wide vision of concreteness, uniformity, and flexibility. In Proceedings of the tenth annual conference on Object-oriented programming systems (pp. 47-60).
---
14.07.2020
End User Development SS 20
Lively Simulation
Leonardo Hübscher, Juliane Kleinknecht

Cell Views

  • Legacy had one centralized log/ chart
  • Each cell represents one simulation unit

An environment that works the way nonprogrammers expect is more inviting and helps users become more confident and productive. [2]

→ each unit should have it's own
     state/ behavior, log, chart

[2] Myers, B. A., Pane, J. F., & Ko, A. (2004). Natural programming languages and environments. Communications of the ACM, 47(9), 47-52.
---
14.07.2020
End User Development SS 20
Lively Simulation
Leonardo Hübscher, Juliane Kleinknecht

Cell Views

  • Legacy had one centralized log/ chart
  • Each cell represents one simulation unit

An environment that works the way nonprogrammers expect is more inviting and helps users become more confident and productive. [2]

→ each unit should have it's own
     state/ behavior, log, chart, ...custom view?!

[2] Myers, B. A., Pane, J. F., & Ko, A. (2004). Natural programming languages and environments. Communications of the ACM, 47(9), 47-52.
---
14.07.2020
End User Development SS 20
Lively Simulation
Leonardo Hübscher, Juliane Kleinknecht

Unit Support for DSL

Goal Allow usage of units in DSL and support automatic conversion Legacy Add units as comment to state only Solution Use mathjs [3] to parse the code and work with units

[Mathjs] features a flexible expression parser [...] and offers an integrated solution to work with [...] units, and matrices. Powerful and easy to use. [3] 

math.evaluate('5.08 cm + 2 inch')     // 10.16 cm
[3] https://mathjs.org/
---
14.07.2020
End User Development SS 20
Lively Simulation
Leonardo Hübscher, Juliane Kleinknecht

Outlook: Unit Support for DSL

Goal Allow usage of units in DSL and support automatic conversion Legacy Add units as comment to state only Solution Use mathjs [3] to parse the code and work with units

[Mathjs] features a flexible expression parser [...] and offers an integrated solution to work with [...] units, and matrices. Powerful and easy to use. [3] 

math.evaluate('5.08 cm + 2 inch')     // 10.16 cm
Mathjs does not fully support Javascript (f.e. loops, if/else)
User would have to learn mathjs to use it
[3] https://mathjs.org/
---
14.07.2020
End User Development SS 20
Lively Simulation
Leonardo Hübscher, Juliane Kleinknecht

What's Next?

Learnings 📚 Next Steps 🏃
---
14.07.2020
End User Development SS 20
Lively Simulation
Leonardo Hübscher, Juliane Kleinknecht

What's Next?

Future Work ➡️

→ Gas tank simulation shows functionality for further development
  • Variable number of entities of a cell
  • Creating a visualization component
---
14.07.2020
End User Development SS 20
Lively Simulation
Leonardo Hübscher, Juliane Kleinknecht

Project Goal

We want to enable end-users to create simulations in a visually structured way
Idea Build a semi-graphical simulation framework
  • Starting point: PoC* in Lively Webwerkstatt (legacy)
  • Allow documentation to be part of simulation
  • Provide a way that allows simulation result investigation
  • Proper Lively integration
  • Port existing energy simulation from legacy