Add extracted tools: CitrineOS, OpenOCPP, ShapeShifter
- CitrineOS core extracted (CSMS OCPP 2.0.1) - OpenOCPP extracted (firmware OCPP 1.6J/2.0.1) - ShapeShifter library installed (pip install -e) - ShapeShifter specification extracted - EVerest extracted TODO updated with progress
This commit is contained in:
Eric F
495
tools/openocpp/demo-esp32/main/web/web_setup.html
Normal file
495
tools/openocpp/demo-esp32/main/web/web_setup.html
Normal file
@@ -0,0 +1,495 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Test Charger</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
||||
<meta http-equiv="Content-Security-Policy" content="script-src 'unsafe-inline'; style-src 'unsafe-inline'">
|
||||
<style type="text/css">
|
||||
body {
|
||||
font-family: Trebuchet MS, Tahoma, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=password] {
|
||||
width: 100%;
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
padding: 14px 20px;
|
||||
margin: 8px 0;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.cancelbtn {
|
||||
width: auto;
|
||||
padding: 10px 18px;
|
||||
background-color: #f44336;
|
||||
}
|
||||
|
||||
.imgcontainer {
|
||||
text-align: center;
|
||||
margin: 24px 0 12px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
img.avatar {
|
||||
width: 40%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
span.psw {
|
||||
float: right;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0, 0, 0);
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: 5% auto 15% auto;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 0;
|
||||
color: #000;
|
||||
font-size: 35px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: red;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.animate {
|
||||
-webkit-animation: animatezoom 0.6s;
|
||||
animation: animatezoom 0.6s
|
||||
}
|
||||
|
||||
@-webkit-keyframes animatezoom {
|
||||
from {
|
||||
-webkit-transform: scale(0)
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: scale(1)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animatezoom {
|
||||
from {
|
||||
transform: scale(0)
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1)
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 300px) {
|
||||
span.psw {
|
||||
display: block;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.cancelbtn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #5DA2E1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 28px;
|
||||
line-height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #1F1F1F;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
color: #1F1F1F;
|
||||
}
|
||||
|
||||
select {
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
background-color: #F5F6F8;
|
||||
border-radius: 4px;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #ADADAD;
|
||||
padding: 12px 20px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: 97%;
|
||||
background-position-y: 12px;
|
||||
}
|
||||
|
||||
.black {
|
||||
color: #1F1F1F;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.bolden {
|
||||
font-family: "Arial Black"
|
||||
}
|
||||
|
||||
input[type='password'],
|
||||
input[type='text'] {
|
||||
border: none;
|
||||
background-color: #F5F6F8;
|
||||
border-radius: 4px;
|
||||
height: 48px;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #ADADAD;
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: 95%;
|
||||
background-position-y: 12px;
|
||||
background-size: 22px;
|
||||
}
|
||||
|
||||
input:not(:placeholder-shown) {
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 20px;
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
height: 60px;
|
||||
background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABDUlEQVQ4jd2SvW3DMBBGbwQVKlyo4BGC4FKFS4+TATKCNxAggkeoSpHSRQbwAB7AA7hQoUKFLH6E2qQQHfgHdpo0yQHX8T3exyPR/ytlQ8kOhgV7FvSx9+xglA3lM3DBgh0LPn/onbJhcQ0bv2SHlgVgQa/suFHVkCg7bm5gzB2OyvjlDFdDcoa19etZMN8Qp7oUDPEM2KFV1ZAQO2zPMBERO7Ra4JQNpRa4K4FDS0R0IdneCbQLb4/zh/c7QdH4NL40tPXrovFpjHQr6PJ6yr5hQV80PiUiIm1OKxZ0LICS8TWvpyyOf2DBQQtcXk8Zi3+JcKfNafVsjZ0WfGgJlZZQxZjdwzX+ykf6u/UF0Fwo5Apfcq8AAAAASUVORK5CYII=);
|
||||
filter: brightness(0);
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.eye-hide {
|
||||
width: 20px;
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
height: 65px;
|
||||
background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpjYWVjOWZiYi00ZDU4LTQxMmYtODcwMi0zYWMxYzc4ZTU0MWQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNDQTYwNTJFRjM3MTFFOEI1MDlFMjg4NDlCM0IyMjIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNDQTYwNTFFRjM3MTFFOEI1MDlFMjg4NDlCM0IyMjIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpkMTgzYmMzOC1mMzlmLTQ2OTQtYjI3ZC0xOWVhZDBjN2RhZWMiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpjNzAwNzcyYi0yYzg4LWQzNDMtOTMwNi03ZjAyZDE2ZTBjOTgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz53I3B2AAABVklEQVR42sTTyytFURTH8XOFzMRA3RQDlCITQqSk/AMmkomBx+QWE8XAUIqZZEJedVMkAymPMkCuN3kUEckjUoqJCY7v0u/oZHoGdn3q7NNea6+99jkh13WdICPOCThCf+ZJKEAtqhHGJ26xjllsIgMN2PcH28shBdi5jtGFHc1dJWnGFZ7Q6QXn4QBHuMQ2itCGGzxjHGP4wioqveCwgueRq7LqMapd99CrRHdoRbdiMq0Hw9rNMqZiDVtKZuUnoA6LqszWx2Nax3Q+EFE1aVjBKfpxjQcMKOkJ0rW2SbE/Z7Mys3QrNZhT+TMYwYvm7QpOQQxRr/uH6EGLdr3HIM58N9CHRCRjAefWA6+RZVhSh62iHOSjQ00r0bpynfsChV6wlfWojyWi0mJ6rlJzG7GMV0wh2/8l2plLManmVegai1WujTfsYgIbeP9N8O8/U+AE3wIMAOAeYTJHg1SWAAAAAElFTkSuQmCC);
|
||||
filter: brightness(0);
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus {
|
||||
border: solid 1px #000 !important;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type='submit'] {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
background: #5DA2E1;
|
||||
border-radius: 4px;
|
||||
padding: 16px 20px;
|
||||
border: none;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
font-size: 11px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mb-12 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.mb-8 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mt {
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function _el(s) { return document.getElementById(s); }
|
||||
window.onclick = function (event) {
|
||||
var el = _el('id01');
|
||||
if (event.target == el) {
|
||||
el.style.display = "none";
|
||||
}
|
||||
}
|
||||
var u = 'http://', z = "********", z1 = "", prev_el = null, u1 = 'acharger.ca';
|
||||
function sendReq(r, cb) {
|
||||
var x = new XMLHttpRequest();
|
||||
x.onreadystatechange = function () {
|
||||
if (this.readyState == 4 && (this.status == 200 || this.status == 0)) {
|
||||
if (cb) cb(this.responseText);
|
||||
}
|
||||
};
|
||||
x.open("GET", r, true);
|
||||
x.send();
|
||||
}
|
||||
function liclk(e) {
|
||||
if (e && e.innerText) {
|
||||
var q = e.innerText.split(" "), t = e.style;
|
||||
if (q.length >= 3) {
|
||||
z1 = q[0];
|
||||
var el = _el("uname");
|
||||
el.value = z1;
|
||||
el = _el("m_si");
|
||||
el.value = z;
|
||||
if (t) {
|
||||
t.backgroundColor = "#00FFBF";
|
||||
if (prev_el)
|
||||
prev_el.backgroundColor = "#FFFFFF";
|
||||
prev_el = t;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function checkFormValidation() {
|
||||
document.getElementById("networkUrlError").style.display = "none";
|
||||
document.getElementById("ocppIdError").style.display = "none";
|
||||
var valid = true;
|
||||
|
||||
let password = document.getElementById("Password").value;
|
||||
let confirmPassword = document.getElementById("Confirmpassword").value;
|
||||
if (password !== "" && password !== confirmPassword) {
|
||||
document.getElementById("PasswordMatchError").style.display = "block";
|
||||
valid = false;
|
||||
} else {
|
||||
document.getElementById("PasswordMatchError").style.display = "none";
|
||||
}
|
||||
|
||||
if (document.getElementById("networkUrl").value == "") {
|
||||
document.getElementById("networkUrlError").style.display = "block";
|
||||
valid = false;
|
||||
}
|
||||
|
||||
if (document.getElementById("ocppId").value == "") {
|
||||
document.getElementById("ocppIdError").style.display = "block";
|
||||
valid = false;
|
||||
}
|
||||
|
||||
return valid;
|
||||
}
|
||||
|
||||
function submitData() {
|
||||
if (!checkFormValidation()) {
|
||||
return;
|
||||
}
|
||||
|
||||
fetch("submitSetup", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
ssid: document.getElementById("wifi").value,
|
||||
password: document.getElementById("Password").value,
|
||||
networkUrl: document.getElementById("networkUrl").value,
|
||||
ocppId: document.getElementById("ocppId").value,
|
||||
ocppProtocol: document.getElementById("ocppProtocol").value
|
||||
})
|
||||
})
|
||||
.then(()=>{
|
||||
document.getElementById("step1").style.display = "none";
|
||||
document.getElementById("step2").style.display = "block";
|
||||
})
|
||||
.catch(error => {
|
||||
console.log("Submit failed with error: ", error);
|
||||
});
|
||||
}
|
||||
|
||||
function toggleShowPassword() {
|
||||
if (document.getElementById('PasswordEye').className === "eye-hide") {
|
||||
document.getElementById('Password').type = "text";
|
||||
document.getElementById('Confirmpassword').type = "text";
|
||||
document.getElementById('PasswordEye').className = "eye";
|
||||
document.getElementById('ConfirmpasswordEye').className = "eye";
|
||||
} else {
|
||||
document.getElementById('Password').type = "password";
|
||||
document.getElementById('Confirmpassword').type = "password";
|
||||
document.getElementById('PasswordEye').className = "eye-hide"
|
||||
document.getElementById('ConfirmpasswordEye').className = "eye-hide";
|
||||
}
|
||||
}
|
||||
|
||||
sendReq("networks", function (s) {
|
||||
const networks = JSON.parse(s);
|
||||
console.log(networks);
|
||||
|
||||
if (networks) {
|
||||
var select = document.getElementById('wifi');
|
||||
var opt = document.createElement('option');
|
||||
opt.value = "";
|
||||
opt.innerHTML = "WiFi name";
|
||||
select.appendChild(opt);
|
||||
for (let i = 0; i < networks.length; i++) {
|
||||
const entry = networks[i];
|
||||
var opt = document.createElement('option');
|
||||
opt.value = entry.ssid;
|
||||
opt.innerHTML = entry.ssid;
|
||||
select.appendChild(opt);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="step2" style="display: none;">
|
||||
<h2>Charger successfully updated </h2>
|
||||
<h3>Your charger's settings have been updated. </h3>
|
||||
<h3>You may now close this web page.</h3>
|
||||
</div>
|
||||
<div id="step1">
|
||||
<h2 class="mb-12">Test Charger setup</h2>
|
||||
|
||||
<div class="blue">*Case sensitive</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>WiFi name</label>
|
||||
<div class="form-control">
|
||||
<select onchange="javascript:wifiChanged(this);checkFormValidation('wifi')" id="wifi"
|
||||
name="wifi"></select>
|
||||
<span id="wifiError" class="error">Wifi name is required!</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<div class="form-control">
|
||||
<input id="Password" onblur="javascript:checkFormValidation()" name="Password" type="password"
|
||||
placeholder="Password">
|
||||
<span class="eye-hide" id="PasswordEye" onclick="javascript:toggleShowPassword()"></span>
|
||||
<span id="PasswordError" class="error">Password is required!</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Confirm password</label>
|
||||
<div class="form-control">
|
||||
<input id="Confirmpassword" onblur="javascript:checkFormValidation()"
|
||||
name="Confirmpassword" type="password" placeholder="Confirm password">
|
||||
<span class="eye-hide" id="ConfirmpasswordEye"
|
||||
onclick="javascript:toggleShowPassword()"></span>
|
||||
<span id="ConfirmpasswordError" class="error">Confirm password is required!</span>
|
||||
<span id="PasswordMatchError" class="error">Password and Confirm password does not match!</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="divNetworkUrl" style="display: block;">
|
||||
<label>Enter network URL</label>
|
||||
<div class="form-control">
|
||||
<input type="text" onblur="javascript:checkFormValidation()" placeholder="Enter network URL" id="networkUrl" name="networkUrl">
|
||||
<span id="networkUrlError" class="error">Network URL is required!</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="divOcppId" style="display: block;">
|
||||
<label>Enter OCPP ID</label>
|
||||
<div class="form-control">
|
||||
<input type="text" onblur="javascript:checkFormValidation()" placeholder="Enter OCPP ID" id="ocppId" name="ocppId">
|
||||
<span id="ocppIdError" class="error">OCPP ID is required!</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="divOcppProtocol" style="display: block;">
|
||||
<label>Select OCPP protocol</label>
|
||||
<div class="form-control">
|
||||
<select id="ocppProtocol" name="ocppProtocol">
|
||||
<option value="OCPP16">OCPP 1.6</option>
|
||||
<option value="OCPP20" selected>OCPP 2.0.1</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group mt">
|
||||
<input type="submit" onclick="javascript:submitData()" value="Submit" />
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user