So ich möchte heute mal ein Script mit euch teilen, welches die Shelly httpEndpoint Funktion nutzt um eine Webseite lokal über den Shelly zu erstellen.
Theoretisch könnte man sich so eigene mini Info-Boards oder Grafiken lokal zusammenstellen, bisher war das nur ein kleines Experiment von mir, ob sowas überhaupt möglich ist.
Hoffe jemand kann damit etwas anfangen. 
Hier das Script dazu:
HTML
let newEndpoint = HTTPServer.registerEndpoint, localIP = Shelly.getComponentStatus('wifi').sta_ip, htmlBody = '<!DOCTYPE html>' +
'<html>' +
'<head>' +
'<title>Hallo Shelly World</title>' +
'<style>' +
'body {' +
' display: flex;' +
' flex-direction: column;' +
' align-items: center;' +
' justify-content: center;' +
' height: 100vh;' +
' background-color: black;' +
'}' +
'.circle {' +
' display: flex;' +
' justify-content: center;' +
' align-items: center;' +
' width: 400px;' +
' height: 400px;' +
' border-radius: 50%;' +
' background-color: red;' +
' animation: moveAnimationCircle 10s linear infinite;' +
'}' +
'.text {' +
' font-size: 40px;' +
' font-family: "Roboto", sans-serif;' +
' text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);' +
' color: white;' +
' font-weight: bold;' +
'}' +
'.button {' +
' display: flex;' +
' font-size: 30px;' +
' font-family: "Roboto", sans-serif;' +
' text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);' +
' font-weight: bold;' +
' justify-content: center;' +
' align-items: center;' +
' width: 220px;' +
' height: 100px;' +
' border-radius: 25px;' +
' margin-top: 20px;' +
' background-color: red;' +
' cursor: pointer;' +
' animation: moveAnimationButton 10s linear infinite;' +
'}' +
'@keyframes moveAnimationCircle {' +
' 0% {' +
' transform: translate(0);' +
' background-color: red;' +
' }' +
' 25% {' +
' transform: translate(200px, 0);' +
' background-color: green;' +
' }' +
' 50% {' +
' transform: translate(200px, 200px);' +
' background-color: blue;' +
' }' +
' 75% {' +
' transform: translate(0, 200px);' +
' background-color: yellow;' +
' }' +
' 100% {' +
' transform: translate(0);' +
' background-color: red;' +
' }' +
'}' +
'@keyframes moveAnimationButton {' +
' 0% {' +
' transform: translate(0);' +
' background-color: red;' +
' }' +
' 25% {' +
' transform: translate(-200px, 0);' +
' background-color: green;' +
' }' +
' 50% {' +
' transform: translate(-200px, -200px);' +
' background-color: blue;' +
' }' +
' 75% {' +
' transform: translate(0, -200px);' +
' background-color: yellow;' +
' }' +
' 100% {' +
' transform: translate(0);' +
' background-color: red;' +
' }' +
'}' +
'</style>' +
'</head>' +
'<body>' +
'<div class="circle">' +
'<span class="text">Hello Shelly World</span>' +
'</div>' +
'<button class="button" onclick="moveElement()">Klick mich!</button>' +
'<script>' +
'let isAnimationRunning = false;' +
'document.querySelector(".circle").style.animation = "none";' +
'document.querySelector(".button").style.animation = "none";' +
'function moveElement() {' +
' if (!isAnimationRunning) {' +
' document.querySelector(".circle").style.animation = "moveAnimationCircle 10s linear infinite";' +
' document.querySelector(".button").style.animation = "moveAnimationButton 10s linear infinite";' +
' document.querySelector(".text").innerText = "JavaScript geht!";' +
' isAnimationRunning = true;' +
' } else {' +
' document.querySelector(".circle").style.animation = "none";' +
' document.querySelector(".button").style.animation = "none";' +
' document.querySelector(".text").innerText = "Hallo Shelly Welt";' +
' isAnimationRunning = false;' +
' }' +
'}' +
'</script>' +
'</body>' +
'</html>';
function Hallo_Shelly_World(request,response) {
print('Endpoint Triggered!');
response.code = 200;
response.headers = [["Content-Type", "text/html"]];
response.body = htmlBody;
response.send();
}
print('Endpoint_Link: http://' + localIP + newEndpoint('Hallo_Shelly_World', Hallo_Shelly_World));So sollte die lokale Shelly Webseite aussehen.
