User manual
4. Als nächstes ist das User-Interface des Dashboards zu erzeugen. Dieses befindet sich zusammen mit dem
JavaScript-Code im Body-Abschnitt der html-Datei. Zur besseren Übersicht wurde die Erstellung des JavaScript-Codes
auf die nächsten toto Schritte aufgeteilt. Der Code ist unter der Kommentarzeile "<!-- JavaScript-Code (siehe
Schritt 5 bis 9) -->" einzufügen.
Hinweis: Bitte beachten Sie, dass sowohl die Login-Page als auch die Content-Page aufgrund der Definition
der Klasse "page" zunächst ausgeblendet sind und erst durch den JavaScript-Code situationsabhängig
eingeblendet werden.
<body>
<div id="uapi_msg">.</div> <!-- Statusanzeige -->
<h1>rapidM2M UAPI SAMPLE</h1> <!-- Name des Dashboards -->
<div class="master"> <!-- für mittige Ausrichtung bei Größenänderung des Fensters -->
<div class="spacer"></div> <!-- Spacer links von der Login-Page bzw. Content-Page -->
<div id="pg_login" class="page"> <!-- Login-Page -->
<h2>LOGIN</h2> <!-- Titel der Login-Page -->
<div> <!-- Anzeige der Web-Adresse des Servers -->
To be used with an IOT-Box account on
<a href="https://c-control.elco-automation.de">c-control.elco-automation.de</a>
</div>
<div>
<!-- Eingabefeld für den Benutzernamen, Hinweistext auf "username" setzen , bekommt Focus -->
<input id="login_usr" type="text" placeholder="username" autofocus></input>
<!-- Eingabefeld für das Passwort, Hinweistext auf "password" setzen -->
<input id="login_pwd" type="password" placeholder="password"></input>
<!-- Login-Button zum Prüfen der User Credentials und Wechsel zur Content-Page -->
<button id="btn_login">LOGIN</button>
</div>
</div>
<div id="pg_content" class="page"> <!-- Content-Page -->
<h2>CONTENT</h2> <!-- Titel der Content-Page -->
<div id="me">loading...</div> <!-- Anzeige von Kunden-, Benutzer- u. Messstellenname -->
<div> <!-- Anzeige der letzten Messwerte (inkl. Zeitstempel) -->
Current status: <span id="status">loading...</span>
</div>
<div>
<!-- Eingabefeld für das Aufzeichnungsintv., Hinweistext "new value + ENTER", bekommt Focus -->
Set new recording interval and press ENTER to send:
<input id="ed_reciv" type="text" placeholder="new value + ENTER" autofocus></input>
</div>
<!-- Button zum Abmelden des aktiven Benutzers und Wechsel zur Login-Page -->
<button id="btn_logout">LOGOUT</button>
</div>
<div class="spacer"></div> <!-- Spacer rechts von der Login-Page bzw. Content-Page -->
</div>
<!-- Einbinden der jQuery-Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Einbinden der rapidM2M UAPI Library -->
<script src="https://cdn.microtronics.at/libs/fe/rapidm2m-uapi.js"></script>
<script>
<!-- JavaScript-Code (siehe Schritt 5 bis 9) -->
</script>
</body>
40 Rev. 01