src_aurelia-bodylight-plugin/src/elements/fmi.html
<template>
<require from="./w3.css"></require>
<!--require from="font-awesome/css/font-awesome.min.css"></require>
<require from="font-awesome/fonts/fontawesome-webfont.woff"></require>
<require from="font-awesome/fonts/fontawesome-webfont.ttf"></require>
<require from="font-awesome/fonts/fontawesome-webfont.woff2"></require-->
<div show.bind="simplecontrols">
<button class="w3-button w3-theme" click.delegate="startstop()" title="Start/Stop simulation"><i class.bind="animationstarted? 'fa fa-stop':'fa fa-play'"></i> </button>
</div>
<div show.bind="showcontrols">
<table>
<tr>
<td>
<button class="w3-button w3-theme" click.delegate="startstop()" title="Start/Stop simulation"><i class.bind="animationstarted? 'fa fa-stop':'fa fa-play'"></i> </button>
</td>
<td>
<button class="w3-button w3-theme" click.delegate="step()" title="Do simulation step"><i class="fa fa-step-forward"> <sub><b>1</b></sub></i> </button>
</td>
<td>
<button class="w3-button w3-theme" click.delegate="reset()" title="Reset simulation"><i class="fa fa-refresh"></i> </button>
</td>
<td class="w3-tiny">
<table>
<tr><td><input type="checkbox" checked.bind="measurefps"/>
<i show.bind="measurefps" title="FMI: ${fminame}">FPS:${fps}</i></td>
<td show.bind="measurefps">
<label><input type="radio" name="fmuspeed" checked.bind="fmuspeed" model.bind="0.1"/>0.1 x</label>
<label><input type="radio" name="fmuspeed" checked.bind="fmuspeed" model.bind="1"/>1.0 x</label>
</td>
</tr>
<tr><td show.bind="measurefps"><input type="number" min="1" max="60" value.bind="fpslimit" style="width:8ch" /></td>
<td show.bind="measurefps">
<label><input type="radio" name="fmuspeed" checked.bind="fmuspeed" model.bind="10"/>10 x</label>
<label><input type="radio" name="fmuspeed" checked.bind="fmuspeed" model.bind="100"/>100 x</label>
</td>
</tr>
</table>
</td>
<td show.bind="showtime">
<table style="font-family:Consolas,'courier new';line-height: 1.0;" title="simulation time">
<tr><td><span>d hh:mm:ss</span></td></tr>
<tr><td><span>${simulationtime}</span></td></tr>
</table>
</td>
</tr>
</table>
</div>
</template>