Skip to content
joeherwig edited this page Aug 19, 2019 · 2 revisions

each panel folder should contain:

The index.html should always use the follwing base-structure:

<!DOCTYPE html>
<html>
  <head>
    <title>Aircraft Panel</title>
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1.0, user-scalable=yes">
    <link rel="stylesheet" href="panel.css">
    <script src="../../libs/jquery.min.js"></script>
    <script src="../../libs/d3.3.min.js"></script>
    <script src="../../libs/portable-sim-panels.js"></script>
    <script src="../../libs/findSuitablePanel.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

Where you just place your gauges in the body-tag. Here you configure

  • which gauges you want for this vehicle
  • if they should be grouped (eg. engine gauges together)

The Panel.css contains the panel specific style information. So here you define

  • placement and size of the instrument groups and gauges
  • colors, backgrounds By creating a clever set of index.html and panel.css you can even create responsive gauges that are great for being displayes on your big panel montior as well on your small smart phone display.

Aircraft specific gauge parameters See the config.json for a detailed description how to change the behaviour of the panels per each vehicle / livery. It is used to set the marks for the different speeds, set warning- and alert-marks for engine-gauges, etc.

index.pug & panel.sass

I prefer writing code for websites using a cleaner and less irritating format, which is the reason why my panel folders also contain those pug and sass-files. For both formats you need to "compile" them to HTML and CSS before using it within this repo. There is no need for you to work with those types, as you can use HTML and CSS directly.

is a short form how to write HTML / XML files in a shorter, easier to read form. See https://pugjs.org/language/attributes.html for details.

is a shorter form how to write CSS files in a shorter, easier to read form. It also enables much more flexibility to working with CSS. See https://sass-lang.com/ for details.