{# This simple template derives from ``base.html``. See ``base.html`` for
   more information about template inheritance. #}
{%- extends "base.html" %}

{# Loads some of the macros included with Flask-Bootstrap. We are using the
   utils module here to automatically render Flask's flashed messages in a
   bootstrap friendly manner #}
{% import "bootstrap/utils.html" as utils %}


{# Inside the ``content`` is where you should place most of your own stuff.
   This will keep scripts at the page end and a navbar you add on later
   intact. #}
{% block content %}
  <div class="container">
  {%- with messages = get_flashed_messages(with_categories=True) %}
  {%- if messages %}
    <div class="row">
      <div class="col-md-12">
        {{utils.flashed_messages(messages)}}
      </div>
    </div>
  {%- endif %}
  {%- endwith %}
    <div class="jumbotron">
      <h1>Tasmota SML Dekoder</h1>
      <p><a href="https://tasmota.github.io">Tasmota</a> unterstützt <a href="https://tasmota.github.io/docs/Smart-Meter-Interface/">
      verschiedene intelligente Stromzähler</a> und kann deren Daten auslesen und z.B. als MQTT Telegramm verschicken.</p>
      <p>Die Konfiguration des Stromzählers erfolgt hierbei mit der <a href="https://tasmota.github.io/docs/Scripting-Language/">
      Tasmota Scripting Language</a> um die verschiedenen auf dem Markt gebräuchlichen Stromzähler zu unterstützen.<p>
      <hr>
      <p>Diese Webseite hilft, den eigenen Stromzähler richtig zu konfigurieren, indem der "SML dump" von Tasmota dekodiert
      wird um zu erkennen, was der Stromzähler für Daten sendet. Damit kann dann einfach ein entsprechendes Tasmota Script
      gebaut werden um die gewünschten Daten zu extrahieren.</p>
    </div>
    <div>
      <h2>Ablauf</h2>

      <ol>
        <li>Tasmota Befehl <code>sensor53 d1</code> in der Konsole eingeben, damit die empfangenen SML Daten ausgegeben
        werden anstelle interpretiert zu werden.<br>
        Beispielhaft enthält die Tasmota Konsole anschließend Zeilen wie diese:<br>
        <pre>14:10:15.988 : 77 07 01 00 10 07 00 ff 01 01 62 1b 52 00 53 01 c6 01 
14:10:16.009 : 77 07 01 00 20 07 00 ff 01 01 62 23 52 ff 63 08 f2 01 
14:10:16.029 : 77 07 01 00 34 07 00 ff 01 01 62 23 52 ff 63 08 de 01 
14:10:16.050 : 77 07 01 00 48 07 00 ff 01 01 62 23 52 ff 63 08 ee 01 
14:10:16.070 : 77 07 01 00 1f 07 00 ff 01 01 62 21 52 fe 62 34 01 
14:10:16.089 : 77 07 01 00 33 07 00 ff 01 01 62 21 52 fe 62 23 01 
14:10:16.109 : 77 07 01 00 47 07 00 ff 01 01 62 21 52 fe 62 c7 01 
14:10:16.128 : 77 07 01 00 51 07 01 ff 01 01 62 08 52 00 62 f1 01 
14:10:16.145 : 77 07 01 00 51 07 02 ff 01 01 62 08 52 00 62 </pre></li>
        <li>Diese Ausgabe der gelesenen SML Daten in die Zwischenablage kopieren.</li>
        <li>Tasmota Befehl <code>sensor53 d0</code> in der Konsole eingeben um den "Dump" Modus zu beenden.</li>
        <li>Die in der Zwischenablage gespeicherten Daten in das Feld auf dieser Webseite eingeben und das Formular absenden.</li>
        <li>Dekodierte Daten anschauen und den Meter Definition Vorschlag gegebenenfalls anpassen.</li>
      </ol>

      <hr>

      <form name="smldump" action="/decode" method="POST">
        <div class="form-group">
          <label for="formGroupSMLDumpInput">SML Dump</label>
          <textarea class="form-control" id="formGroupSMLDumpInput" name="smldump" rows=10
            placeholder="14:10:15.988 : 77 07 01 00 10 07 00 ff 01 01 62 1b 52 00 53 01 c6 01 
14:10:16.009 : 77 07 01 00 20 07 00 ff 01 01 62 23 52 ff 63 08 f2 01 
14:10:16.029 : 77 07 01 00 34 07 00 ff 01 01 62 23 52 ff 63 08 de 01 
14:10:16.050 : 77 07 01 00 48 07 00 ff 01 01 62 23 52 ff 63 08 ee 01 
14:10:16.070 : 77 07 01 00 1f 07 00 ff 01 01 62 21 52 fe 62 34 01 
14:10:16.089 : 77 07 01 00 33 07 00 ff 01 01 62 21 52 fe 62 23 01 
14:10:16.109 : 77 07 01 00 47 07 00 ff 01 01 62 21 52 fe 62 c7 01 
14:10:16.128 : 77 07 01 00 51 07 01 ff 01 01 62 08 52 00 62 f1 01 
14:10:16.145 : 77 07 01 00 51 07 02 ff 01 01 62 08 52 00 62 "></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Dekodieren</button>
      </form>

    </div>
   </div>
{%- endblock %}