Browse Source

add static files for demonstration

Helmut Pozimski 5 years ago
parent
commit
f87e4ab575
4 changed files with 207 additions and 1 deletions
  1. 1 1
      README.md
  2. 37 0
      html/index.html
  3. 98 0
      html/script.js
  4. 71 0
      html/style.css

+ 1 - 1
README.md

@@ -2,7 +2,7 @@
 
 DISCLAIMER: This Code has been written for demonstration purposes only, it offers no authentikation at all and should not be used in production!
 
-Simple http API to read and write RTC data via JSON implemented with kore and cJSON.
+Simple http API to read and write RTC data via JSON implemented with kore and cJSON. The directory `html` contains a simple web site to demonstrate the possibilities of the API.
 
 ## Getting Started
 

+ 37 - 0
html/index.html

@@ -0,0 +1,37 @@
+<html>
+<head>
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="container">
+<div id="deviceheader">
+blub
+</div>
+<div id="time">
+<div id="rtc-headline">
+RTC-Zeit:
+</div>
+<div id="rtc">
+</div>
+<div id="local-headline">
+Systemzeit:
+</div>
+<div id="local">
+</div>
+<div id="rtc-button">
+<button id="alarmbutton" onclick="changeRTC()">Ändern</button></div>
+</div>
+<div id="alarm">
+Alarm-Zeitpunkt:
+<div id="alarm-time"></div>
+<div id="alarm-button"></div>
+<div id="alarm-status"></div>
+<button id="alarmbutton" onclick="changeAlarm()">Ändern</button>
+</div>
+<div id="nvram">
+<textarea id="nvram-text"></textarea>
+<button id="nvbutton" onclick="submitNvRAM()">Absenden</button>
+</div>
+<div id="buttons"><button onclick="systoHC()">sync</button></div>
+</body>
+<script src="script.js"></script>
+</html>

+ 98 - 0
html/script.js

@@ -0,0 +1,98 @@
+fetch("https://169.254.175.168:8888/device").then( function(text) { return text.text() } ).then( function(text2) { element = document.getElementById("deviceheader"); element.innerText = text2} )
+
+function getTime() {
+	fetch("https://169.254.175.168:8888/time"). then( function(text) { return text.text() }).then( function(text2) { timeobj = JSON.parse(text2); element = document.getElementById("rtc"); element.innerText = timeobj.mday + "." + (timeobj.month +1) + "." + (timeobj.year + 1900) + " " + addZero(timeobj.hour) + ":" + addZero(timeobj.minutes) + ":" + addZero(timeobj.seconds) })
+}
+
+function addZero(num) {
+	if (num < 10) {
+		return "0" + num;
+	}
+	return num;
+}
+
+function getSystemTime() {
+	date = new Date();
+	element = document.getElementById("local");
+	element.innerText = date.getDate() + "." + (date.getMonth() + 1) + "." + date.getYear() + " " + addZero(date.getHours()) + ":" + addZero(date.getMinutes()) + ":" + addZero(date.getSeconds());
+}
+
+function getAlarm() {
+	fetch("https://169.254.175.168:8888/wkalrm").then(function(text) {return text.text() }).then( function(text2) { alarmdiv = document.getElementById("alarm"); alarmdiv.style.visibility="visible"; alarmtime=document.getElementById("alarm-time"); alarmobj=JSON.parse(text2); alarmtime.innerText = alarmobj.mday + "." + (alarmobj.month +1) + "." + (alarmobj.year + 1900) + " " + addZero(alarmobj.hour) + ":" + addZero(alarmobj.minutes) + ":" + addZero(alarmobj.seconds); alarm_status=document.getElementById("alarm-status"); alarm_status.innerText="Status: "; alarm_status.innerText += alarmobj.enabled ? " aktiviert" : " deaktiviert"; alarm_status.innerText += "\nAusgelöst: "; alarm_status.innerText += alarmobj.pending ? " ja" : " nein"})
+}
+getSystemTime()
+getNVRAM()
+getAlarm()
+getTime()
+
+function getNVRAM()  {
+	fetch("https://169.254.175.168:8888/nvmem").then(function(text) { return text.text() }).then( function(text2) { nvobj = JSON.parse(text2); element = document.getElementById("nvram-text"); element.innerText = nvobj.content; element2 = document.getElementById("nvram"); element2.style.visibility="visible"; })
+}
+
+function submitNvRAM() {
+	nvobj = {};
+	element = document.getElementById("nvram-text");
+	nvobj.content = element.value;
+	fetch("https://169.254.175.168:8888/nvmem", {method: "POST", body: JSON.stringify(nvobj)}).then(getNVRAM())
+}
+
+function changeAlarm() {
+	element = document.getElementById("alarm-time");
+	if (element.childElementCount === 0) {
+		fetch("https://169.254.175.168:8888/wkalrm").then(function(text) {return text.text() }).then( function(text2) { element.innerText = ""; textarea = document.createElement("textarea"); textarea.id = "alarmtext"; textarea.rows=1; textarea.cols=20; alarmobj = JSON.parse(text2); textarea.innerText = alarmobj.mday + "." + (alarmobj.month +1) + "." + (alarmobj.year + 1900) + " " + addZero(alarmobj.hour) + ":" + addZero(alarmobj.minutes) + ":" + addZero(alarmobj.seconds); element.appendChild(textarea)})
+	} else {
+		textelement = document.getElementById("alarmtext");
+		alstring = textelement.value.split(" ");
+		date = alstring[0].split(".");
+		time = alstring[1].split(":");
+		alobj = {
+			"seconds": parseInt(time[2]),
+			"minutes": parseInt(time[1]),
+			"hour": parseInt(time[0]),
+			"mday": parseInt(date[0]),
+			"month": parseInt(date[1]) -1,
+			"year": parseInt(date[2]) -1900,
+			"wday": 0,
+			"enabled": 1,
+			"pending": 0
+		}
+		fetch("https://169.254.175.168:8888/wkalrm", {method: "POST", body: JSON.stringify(alobj)}).then(function() {textelement.remove(); getAlarm();}) 	
+	}
+}
+
+function changeRTC() {
+	element = document.getElementById("rtc");
+	if (element.childElementCount === 0) {
+		fetch("https://169.254.175.168:8888/time").then(function(text) {return text.text() }).then( function(text2) { element.innerText = ""; textarea = document.createElement("textarea"); textarea.id = "rtctext"; textarea.rows=1; textarea.cols=20; timeobj = JSON.parse(text2); textarea.innerText = timeobj.mday + "." + (timeobj.month +1) + "." + (timeobj.year + 1900) + " " + addZero(timeobj.hour) + ":" + addZero(timeobj.minutes) + ":" + addZero(timeobj.seconds); element.appendChild(textarea);})
+	} else {
+		textelement = document.getElementById("rtctext");
+		alstring = textelement.value.split(" ");
+                date = alstring[0].split(".");
+                time = alstring[1].split(":");
+                tobj = {
+                        "seconds": parseInt(time[2]),
+                        "minutes": parseInt(time[1]),
+                        "hour": parseInt(time[0]),
+                        "mday": parseInt(date[0]),
+                        "month": parseInt(date[1]) -1,
+                        "year": parseInt(date[2]) -1900,
+                        "wday": 1
+                }
+		fetch("https://169.254.175.168:8888/time", {method: "POST", body: JSON.stringify(tobj)}).then(function() {textelement.remove(); getTime();})
+	}
+}
+
+function systoHC() {
+        date = new Date();
+	tobj = {
+		"seconds": date.getSeconds(),
+		"minutes": date.getMinutes(),
+		"hour": date.getHours(),
+		"mday": date.getDate(),
+		"month": date.getMonth(),
+		"year": date.getYear(),
+		"wday": 6
+	}
+	console.log(tobj)
+	fetch("https://169.254.175.168:8888/time", {method: "POST", body: JSON.stringify(tobj)}).then(function() {getTime();})
+}

+ 71 - 0
html/style.css

@@ -0,0 +1,71 @@
+.container {
+	height: 100vh;
+	display: grid;
+	grid-template-rows: 1fr 1fr 1fr;
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-template-areas:
+	"header1 header2 header3"
+	"mid1 mid2 mid3"
+	"footer1 footer2 footer3";
+	font-family: sans-serif;
+}
+
+#deviceheader {
+	grid-area: header2;
+	text-align: center;
+	line-height: 200px;
+	font-size: 10vh;
+	font-family: sans-serif;
+}
+
+#time {
+	grid-area: mid2;
+}
+
+#rtc-headline {
+	text-align: left;
+	font-size: 4vh;
+}
+
+#rtc {
+	text-align: center;
+	font-size: 5vh;
+}
+
+#local-headline {
+        text-align: left;
+        font-size: 4vh;
+}
+
+#local {
+	text-align: center;
+	font-size: 5vh;
+}
+#alarm {
+	grid-area: mid3;
+	text-align: center;
+	font-size: 4vh;
+	visibility: hidden;
+}
+
+#alarm-time {
+	font-size: 5vh;
+}
+
+#alarm-button {
+	text-align: left;
+}
+
+#nvram {
+	grid-area: footer3;
+	visibility:hidden;
+}
+
+#nvram-text {
+	width:30vw;
+	height:15vh;
+}
+
+#buttons {
+	grid-area: footer2;
+}