Modelica Playground Presentation from AMC 2022

amc2022.json

{
  "title": "Modelica Playground",
  "entities": [
    {
      "rel": [
        "item"
      ],
      "title": "Playground?",
      "class": [
        "lesson"
      ],
      "properties": {
        "explanation": "# Playgrounds\n\n<div style=\"font-size:150%; margin: 20px\">\n\nA language playground is a site where users can \"play\" with\na language without having to install any tooling.\n\nExamples include:\n\n<br/>\n\n<div style=\"margin-left: 30px\">\n\n- Go Playground: [https://go.dev/play/](https://go.dev/play/)\n- TypeScript Playground: [https://www.typescriptlang.org/play](https://www.typescriptlang.org/play)\n- Rust Playground: [https://play.rust-lang.org/](https://play.rust-lang.org/)\n\n</div>\n\n</div>\n",
        "model": ""
      }
    },
    {
      "rel": [
        "item"
      ],
      "title": "Goals",
      "class": [
        "lesson"
      ],
      "properties": {
        "explanation": "# Goals\n\n<div style=\"font-size:150%; margin: 20px\">\n\nFor this project, I had several goals:\n\n<br/>\n\n<div style=\"margin-left: 30px\">\n\n- Should be freely available\n- Allow using Modelica without installing tools\n- Easy to share your work\n- Support visualization\n- Allow **others** to create content\n- <span style=\"color: red\">No cookie consent banners</span>\n\n</div>\n\n</div>\n"
      }
    },
    {
      "rel": [
        "item"
      ],
      "title": "Editor",
      "class": [
        "lesson"
      ],
      "properties": {
        "explanation": "# Editor\n\n<div style=\"font-size:150%; margin: 20px\">\n\n- Based on [Monaco](https://microsoft.github.io/monaco-editor/playground.html).\n\n- Leverages [`tree-sitter`](https://tree-sitter.github.io/tree-sitter/) to implement [`modelica-tree-sitter`](https://github.com/mtiller/modelica-tree-sitter).\n\n- Implemented in [WebAssembly](https://webassembly.org/) for speed and interactivity.\n\n- No top level `model`\n\n- No diagram viewing/editing supported\n",
        "model": "Real x = 20.0;\nReal y;\n\nequation\n\ny = sin(time);",
        "report": "Our solution for $x$ was {{ now.x }} and our solution for $y$ depends on time.\nCurrently, $t={{ now.time.toFixed(2) }}$ which means that $y={{ now.y.toFixed(2)\n}}$.\n\n<chart signals=\"y\"></chart>\n\n_(Note: you can change the value of time by using the slider above.)_\n"
      }
    },
    {
      "rel": [
        "item"
      ],
      "title": "Simulation",
      "class": [
        "lesson"
      ],
      "properties": {
        "explanation": "# Simulation\n\nUses [OpenModelica](https://openmodelica.org/) as the compiler behind the scenes. Leverages a Web API to make simulation requests on the server.\n\n<div style=\"margin-left: 30px; margin-bottom: 20px\">\n\n- Written in Go\n- Queues jobs\n- Run on a small Kubernetes Cluster\n\n</div>\n\nSupports the Modelica Standard Library via `import` statements:\n",
        "model": "import Modelica;\n\nModelica.Electrical.Analog.Basic.Ground ground;\nModelica.Electrical.Analog.Basic.Resistor resistor(R = 100);\nModelica.Electrical.Analog.Basic.Capacitor capacitor(C = 1e-3);\nModelica.Electrical.Analog.Basic.Inductor inductor(L = 1);\nModelica.Electrical.Analog.Sources.StepVoltage stepVoltage(startTime = 2, V = 24);\n\ninitial equation\n  inductor.i = 0;\n  capacitor.v = 0;\n\nequation\n  connect(stepVoltage.p, inductor.p);\n  connect(inductor.n, resistor.p);\n  connect(inductor.n, capacitor.p);\n  connect(capacitor.n, ground.p);\n  connect(resistor.n, ground.p);\n  connect(ground.p, stepVoltage.n);",
        "preamble": "{% macro commentary(now) %}\n\nOur solution for $x$ was {{ now.x }} and our solution for $y$ depends on time. Currently, $t={{ now.time.toFixed(2) }}$ which means that $y={{ now.y.toFixed(2) }}$.\n\n{% endmacro %}\n",
        "report": "Simulations take a bit longer when the MSL needs to be loaded, but as you can see, it does work:\n\n<chart signals=\"capacitor.v,stepVoltage.v\">\n"
      }
    },
    {
      "rel": [
        "item"
      ],
      "title": "Results",
      "class": [
        "lesson"
      ],
      "properties": {
        "explanation": "# Results\n\nPost-processing supports various ways to bring simulation results to life.\n\nPipeline: Nunjucks ⇢ Markdown ⇢ HTML ⇢ Math ⇢ Sanitize\n\nChange model or report: custom link\n",
        "model": "  import Modelica.SIunits.*;\n  parameter Real e=0.8 \"Coefficient of restitution\";\n  parameter Height h0=7.0 \"Initial height\";\n  constant Height eps=1e-3 \"Small height\";\n  Boolean done \"Flag when to turn off gravity\";\n  Height h \"Height\";\n  Velocity v \"Velocity\";\n\ninitial equation\n  h = h0;\n  v = 0.0;\n  done = false;\nequation\n  v = der(h);\n  der(v) = if done then 0 else -9.81;\n  when {h<0,h<-eps} then\n    done = h<-eps;\n    reinit(v, -e*(if h<-eps then 0 else pre(v)));\n  end when;",
        "report": "### Chart\n\n<chart signals=\"h\"></chart>\n\n### SVG\n\n<svg height=\"400\" width=\"100%\" viewbox=\"0 0 400 400\">\n  <circle cx=\"{{ 100+now.time*25 }}\" cy=\"{{ 100+7*25 -25*now.h }}\" r=\"40\" stroke=\"black\" stroke-width=\"3\" fill=\"red\" />\n  <rect x=\"0\" y=\"{{140+7*25}}\" width=\"400\" height=\"10\" stroke=\"black\"/>\n</svg>\n\n### 3D Animation\n\n<x3d style=\"width: 80%; margin-left: auto; margin-right: auto; border: 1px solid black; margin-top: 10px; margin-bottom: 10px\">\n    <scene>\n    <transform translation='{{ now.time-5 }} {{ now.h/3.0 }} 0'> \n    <shape> \n        <appearance> \n        <material diffuseColor='1 0 0'></material> \n        </appearance> \n        <sphere></sphere> \n    </shape> \n    </transform>\n    <transform translation='0 -2 0' scale=\"10 1 3\"> \n    <shape>\n        <appearance> \n        <material diffuseColor='.2 0.2 0.5'></material> \n        </appearance> \n        <box size=\"2 2 2\"></box>\n    </shape>\n    </transform> \n    </scene>\n</x3d>\n\n### Vega\n\n<vega>\n{\n  \"description\": \"Bouncing Ball Height\",\n  \"data\": { \"name\": \"trajectory\" },\n  \"mark\": \"line\",\n  \"width\": 500,\n  \"encoding\": {\n    \"x\": { \"field\": \"time\", \"type\": \"temporal\" },\n    \"y\": { \"field\": \"h\", \"type\": \"quantitative\" }\n  }\n}\n</vega>\n"
      }
    },
    {
      "rel": [
        "item"
      ],
      "title": "Structured Content",
      "class": [
        "lesson"
      ],
      "properties": {
        "explanation": "# Structured Content\n\nTable of contents with multiple pages, each with:\n\n<div style=\"margin-left: 30px>\n\n- Explanatory text (`explanation.md`)\n- Model (`model.mo`)\n- Report Template (`report.md`)\n- Metadata (`index.json`)\n- Macros (`preamble.md`), _e.g.,_\n\n<br>\n\nCompiled down to a single JSON file you can host [locally](http://localhost:8000/amc2022.json) or as [a single Gist](https://gist.github.com/mt35-rs/1884b1912320dcbb21137fa6523d54c0/revisions), for example. Just enter URL from the \"Lesson Gallery\".\n",
        "model": "// This is where the model text goes, e.g.,\n\nReal x = 20.0;\nReal y;\n\nequation\n\ny = sin(time);",
        "preamble": "{% macro commentary(now) %}\n\nOur solution for $x$ was {{ now.x }} and our solution for $y$ depends on time. Currently, $t={{ now.time.toFixed(2) }}$ which means that $y={{ now.y.toFixed(2) }}$.\n\n{% endmacro %}\n",
        "report": "{{ commentary(now) }}\n"
      }
    },
    {
      "rel": [
        "item"
      ],
      "title": "Conclusions",
      "class": [
        "lesson"
      ],
      "properties": {
        "explanation": "# Conclusion\n\n## Goals\n\n- Modelica is long overdue for a playground.\n- Gives people a chance to try the language or try something out quickly.\n- Support collaboration via link sharing (_e.g.,_ turn links in as homework).\n- Supports structured content so people can build their own lessons on top of the playground.\n\n<br>\n\n## Thoughts\n\n- Models are software\n- Models should be ubiquitous (HiL, Testing, Browsers, CI/CD)\n- Models deserve amazing UIs, Services and Integration\n",
        "model": "// One last simulation\n",
        "report": "<img alt=\"File:Thank You pink white.svg\" src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Thank_You_pink_white.svg/600px-Thank_You_pink_white.svg.png?20200609145449\" decoding=\"async\" srcset=\"https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Thank_You_pink_white.svg/900px-Thank_You_pink_white.svg.png?20200609145449 1.5x, https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Thank_You_pink_white.svg/1200px-Thank_You_pink_white.svg.png?20200609145449 2x\" data-file-width=\"600\" data-file-height=\"600\" width=\"600\" height=\"600\">\n"
      }
    }
  ]
}