aboutsummaryrefslogtreecommitdiff
path: root/webPage
diff options
context:
space:
mode:
authorJakob Stendahl <jakst070500@ntvgs.no>2017-10-23 14:16:27 +0200
committerJakob Stendahl <jakst070500@ntvgs.no>2017-10-23 14:16:27 +0200
commit2d7d728e184f24961e4a0871f4d5bed3e2fe652a (patch)
tree52147439c27002cc5ccabef86fd8156dc50a588f /webPage
parentc962ad1b2ade35022cc614dd4cc0e5e6d17ddb91 (diff)
downloadLuxcena-cs-2d7d728e184f24961e4a0871f4d5bed3e2fe652a.tar.gz
Luxcena-cs-2d7d728e184f24961e4a0871f4d5bed3e2fe652a.zip
Moved everything into the new REPO
Diffstat (limited to 'webPage')
-rw-r--r--webPage/index.html127
-rw-r--r--webPage/settings.html167
-rw-r--r--webPage/style.css148
3 files changed, 442 insertions, 0 deletions
diff --git a/webPage/index.html b/webPage/index.html
new file mode 100644
index 0000000..c80ee61
--- /dev/null
+++ b/webPage/index.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html>
+
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+ <title>{{NAME}}</title>
+
+ <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
+ <link rel="stylesheet" href="./style.css">
+ </head>
+
+
+ <body>
+
+ <nav class="navbar navbar-dark bg-dark">
+ <a class="navbar-brand" href="/">IOT Device</a>
+ <a class="navbar-toggler navbar-toggler-right" href="/settings">
+ &#9881;
+ </a>
+ </nav>
+
+ <div class="container-fluid pt-3">
+
+ <div class="card card-inverse bg-dark text-white">
+ <div class="card-body">
+
+ <div class="card-title">
+ <h3>
+ {{NAME}}
+ <span class="text-align:right;">
+ <label class="switch float-right">
+ <input type="checkbox" id="lampActive">
+ <span class="slider round"></span>
+ </label>
+ </span>
+ </h3>
+ </div>
+ <h6 class="card-subtitle mb-2 text-muted">{{Location}}</h6>
+
+ <hr />
+ <div class="toggle-button toggle-button--tuli">
+ <input id="sensorActive" type="checkbox">
+ <label for="sensorActive">Clap sensor</label>
+ <div class="toggle-button__icon"></div>
+ </div>
+
+ </div>
+ </div>
+
+ </div>
+
+
+ <script type="text/javascript">
+ var pollingActive = true; // Prevent states from being updated while trying to change them.
+ document.getElementById("lampActive").addEventListener("change", changLampState);
+ document.getElementById("sensorActive").addEventListener("change", changSensorState);
+ setInterval(getStates, 1000);
+
+ function ajax_request(adress, callback_function) {
+ /* A simple ajax request wrapper
+ Doesn´t return anything else than the callback */
+ var xhttp = new XMLHttpRequest();
+ xhttp.onreadystatechange = function() {
+ if (this.readyState == 4 && this.status == 200) {
+ callback_function(this.responseText);
+ }
+ };
+ xhttp.open("POST", adress, true);
+ xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+ xhttp.send();
+ }
+
+ function changLampState() {
+ var boxState = document.getElementById("lampActive").checked;
+ if (boxState) {
+ pollingActive = false;
+ ajax_request("/j?lamp=1", function(e) {
+ pollingActive = true;
+ console.log(e);
+ });
+ } else {
+ pollingActive = false;
+ ajax_request("/j?lamp=0", function(e) {
+ pollingActive = true;
+ console.log(e);
+ });
+ }
+ }
+
+ function changSensorState() {
+ var sensorState = document.getElementById("sensorActive").checked;
+ if (sensorState) {
+ pollingActive = false;
+ ajax_request("/j?sens=1", function(e) {
+ pollingActive = true;
+ console.log(e);
+ });
+ } else {
+ pollingActive = false;
+ ajax_request("/j?sens=0", function(e) {
+ pollingActive = true;
+ console.log(e);
+ });
+ }
+ }
+
+ function getStates() {
+ if (pollingActive) {
+ ajax_request("/j/", function(e) {
+ result = JSON.parse(e);
+
+ var lampOn = false;
+ var sensorOn = false;
+ if (result['lampOn'] == 1) { lampOn = true; }
+ if (result['sensorOn'] == 1) { sensorOn = true; }
+
+ document.getElementById("lampActive").checked = lampOn;
+ document.getElementById("sensorActive").checked = sensorOn;
+ });
+ }
+ }
+ </script>
+ </body>
+
+</html>
diff --git a/webPage/settings.html b/webPage/settings.html
new file mode 100644
index 0000000..cdda75a
--- /dev/null
+++ b/webPage/settings.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+ <title>{{NAME}}</title>
+
+ <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
+ <link rel="stylesheet" href="./style.css">
+</head>
+
+
+<body>
+
+ <nav class="navbar navbar-dark bg-dark">
+ <a class="navbar-brand" href="/">IOT Device</a>
+ <a class="navbar-toggler navbar-toggler-right" href="/settings">
+ &#9881;
+ </a>
+ </nav>
+
+ <div class="container-fluid pt-3 pb-3">
+
+ <div id="success-box" class="alert alert-success" role="alert">
+ {{SUCCESSMSG}}
+ </div>
+
+ <div class="alert alert-danger" role="alert">
+ <b>Warning:</b> The password-protection does not work yet! Make sure to don´t expose the device.
+ </div>
+
+ <div class="card card-inverse bg-dark text-white mt-3">
+ <div class="card-body">
+
+ <div class="card-title">
+ <h3>Password</h3>
+ </div>
+
+ <div class="container">
+ <form>
+
+ <h5 class="small text-muted">To change any settings, you must enter the correct password"</h5>
+ <div class="form-group row">
+
+ <div class="col-sm-12">
+ <input type="password" class="form-control" id="" placeholder="Device password" readonly>
+ </div>
+ </div>
+
+ </form>
+ </div>
+
+ </div>
+ </div>
+
+ <div class="card card-inverse bg-dark text-white mt-3">
+ <div class="card-body">
+
+ <div class="card-title">
+ <h3>Settings</h3>
+ </div>
+
+ <div class="container">
+ <form method="post">
+
+ <input type="hidden" name="type" value="settings">
+
+ <h5 class="small text-muted">Device settings:</h5>
+ <div class="form-group row">
+ <label for="lblDeviceName" class="col-sm-2 col-form-label">Device name</label>
+ <div class="col-sm-10">
+ <input type="text" class="form-control" name="txtDeviceName" id="txtDeviceName" placeholder="Ex. Rooflight">
+ </div>
+ </div>
+
+ <div class="form-group row">
+ <label for="lblDeviceLocation" class="col-sm-2 col-form-label">Location</label>
+ <div class="col-sm-10">
+ <input type="text" class="form-control" name="txtDeviceLocation" id="txtDeviceLocation" placeholder="Ex. Bathroom">
+ </div>
+ </div>
+
+ <h5 class="small text-muted">Wifi settings:</h5>
+ <div class="form-group row">
+ <label for="lblSSID" class="col-sm-2 col-form-label">SSID</label>
+ <div class="col-sm-10">
+ <input type="name" class="form-control" name="txtSSID" id="txtSSID" placeholder="Name of router">
+ </div>
+ </div>
+
+ <div class="form-group row">
+ <label for="lblPassword" class="col-sm-2 col-form-label">Pasword</label>
+ <div class="col-sm-10">
+ <input type="name" class="form-control" name="txtPassword" id="txtPassword" placeholder="Passphrase (If open, write nothing)">
+ </div>
+ </div>
+
+ <div class="form-group row">
+ <div class="col-sm-10">
+
+ <button type="submit" class="btn btn-primary">Save</button>
+ <br /><span class="small text-muted"> <b> Note:</b> The device will reboot and turn of any connected appliances when you save the settings.</span>
+ <br /><span class="small text-muted"> <b> Note:</b> Empty or unchanged fields will not be updated.</span>
+ </div>
+ </div>
+
+ </form>
+ </div>
+
+ </div>
+ </div>
+
+ <div class="card card-inverse bg-dark text-white mt-3">
+ <div class="card-body">
+
+ <div class="card-title">
+ <h3>Version & OTA</h3>
+ </div>
+
+ <div class="container">
+ <form>
+ <h5>Device type: <b>clapSensor</b></h5>
+ <h5>Current version: <b>1.0.0</b></h5>
+ <hr />
+ <div class="form-group row">
+ <label for="inputEmail3" class="col-sm-2 col-form-label">Update file:</label>
+ <div class="col-sm-10">
+ <input type="file" class="form-control-file" id="exampleFormControlFile1">
+ </div>
+ </div>
+
+ <div class="form-group row">
+ <div class="col-sm-10">
+ <button type="submit" class="btn btn-danger">Flash new version</button>
+ <br /><span class="small text-muted"> <b> Note:</b> The device will reboot and turn of any connected appliances when you flash a new version.</span>
+ </div>
+ </div>
+
+ </form>
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+
+ <script type="text/javascript">
+ var successAlert = document.getElementById('success-box');
+
+ updatePlaceholder("txtDeviceName", "{{DEVICENAME}}");
+ updatePlaceholder("txtDeviceLocation", "{{DEVICELOCATION}}");;
+
+ if (successAlert.innerHtml == "") {
+ successAlert.style.display = "none";
+ }
+
+ function updatePlaceholder(elemId, textToInsert) {
+ var field = document.getElementById(elemId);
+ if (textToInsert != "") { field.placeholder = "Curr; " + textToInsert }
+ }
+
+ </script>
+</body>
+
+</html>
diff --git a/webPage/style.css b/webPage/style.css
new file mode 100644
index 0000000..63663d5
--- /dev/null
+++ b/webPage/style.css
@@ -0,0 +1,148 @@
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+ font-size: 1rem;
+ font-weight: normal;
+ line-height: 1.5;
+ background-color: #222;
+}
+
+/* SWITCH */
+ .switch {
+ position: relative;
+ display: inline-block;
+ width: 60px;
+ height: 34px;
+}
+
+.switch input {display:none;}
+
+.slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccc;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+.slider:before {
+ position: absolute;
+ content: "";
+ height: 26px;
+ width: 26px;
+ left: 4px;
+ bottom: 4px;
+ background-color: white;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+input:checked + .slider {
+ background-color: #2196F3;
+}
+
+input:focus + .slider {
+ box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+}
+
+.slider.round {
+ border-radius: 34px;
+}
+
+.slider.round:before {
+ border-radius: 50%;
+}
+/* ./SWITCH */
+
+.toggle-button {
+ position: relative;
+ display: inline-block;
+ color: #fff;
+}
+
+ .toggle-button label {
+ display: inline-block;
+ text-transform: uppercase;
+ cursor: pointer;
+ text-align: left;
+}
+
+.toggle-button input {
+ display: none;
+}
+
+ .toggle-button__icon {
+ cursor: pointer;
+ pointer-events: none;
+}
+
+.toggle-button__icon:before, .toggle-button__icon:after {
+ content: "";
+ position: absolute;
+ top: 45%;
+ left: 35%;
+ transition: 0.2s ease-out;
+}
+
+.toggle-button--tuli label {
+ line-height: 20px;
+ text-indent: 30px;
+}
+
+.toggle-button--tuli input[type=checkbox]:checked ~ .toggle-button__icon {
+ background: #fff;
+}
+
+.toggle-button--tuli input[type=checkbox]:checked ~ .toggle-button__icon:before, .toggle-button--tuli input[type=checkbox]:checked ~ .toggle-button__icon:after {
+ opacity: 1;
+}
+
+.toggle-button--tuli .toggle-button__icon {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 20px;
+ height: 20px;
+ transition: all 0.2s;
+ border: 2px solid #fff;
+ border-radius: 1px;
+ box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+ text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+}
+
+.toggle-button--tuli .toggle-button__icon:before, .toggle-button--tuli .toggle-button__icon:after {
+ top: 5px;
+ left: 2px;
+ width: 12px;
+ height: 2px;
+ border-radius: 3px;
+ background: #fff;
+ box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+ top: 35%;
+ background: #61B136;
+ opacity: 0;
+ transform-origin: left center;
+}
+
+.toggle-button--tuli .toggle-button__icon:before {
+ transform: translate(0, 0) rotate(45deg) scale(0.6, 1);
+}
+
+.toggle-button--tuli .toggle-button__icon:after {
+ transform: translate(4px, 6px) rotate(-45deg);
+}
+
+.toggle-button--tuli:hover input[type=checkbox]:not(:checked) ~ .toggle-button__icon {
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
generated by cgit v1.2.3 (git 2.39.1) at 2025-06-27 04:25:09 +0000