hrmaccevents - Allow downloading files directly from customizer

pull/2015/head
Martin Boonk 2022-07-03 01:58:52 +02:00
parent 72f5769486
commit ac92a6995a
2 changed files with 80 additions and 20 deletions

View File

@ -1,18 +1,42 @@
<html> <html>
<head> <head>
<title>Bangle.js Accelerometer streaming</title> <title>Bangle.js Accelerometer streaming</title>
<link rel="stylesheet" href="../../css/spectre.min.css">
</head> </head>
<body> <body>
<script src="https://www.puck-js.com/puck.js"></script> <script src="https://www.puck-js.com/puck.js"></script>
<p></div><input type="checkbox" id="chkLocal">Store on Bangle (file named log.csv, download with IDE)</input></p>
<p> <p>
<button id="btnConnect">Start</button> <div class="form-group">
<button id="btnStop">Stop</button> <label class="form-switch">
<button id="btnReset">Reset</button> <input type="checkbox" id="chkLocal">
<button id="btnSave">Save CSV</button> <i class="form-icon"></i> Store on bangle (file named log.csv)
</label>
</div>
</p>
<p>
<button id="btnConnect" class="btn btn-primary">Start</button>
<button id="btnStop" class="btn btn-secondary">Stop</button>
<button id="btnReset" class="btn btn-secondary">Reset</button>
<button id="btnSave" class="btn btn-primary">Save CSV</button>
<button id="btnDownload" class="btn btn-primary">Download CSV</button>
</p> </p>
<p id="result"></p> <p id="result"></p>
<script> <script>
function saveCSV(filename, csvData) {
let a = document.createElement("a"),
file = new Blob([csvData], {type: "Comma-separated value file"});
let url = URL.createObjectURL(file);
a.href = url;
a.download = filename+".csv";
document.body.appendChild(a);
a.click();
setTimeout(function() {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 0);
}
function createCode(){ function createCode(){
//modes: 1 BT, 2 File //modes: 1 BT, 2 File
return "var method=" + (document.getElementById("chkLocal").checked ? 2 : 1) + ";\n" + String.raw` return "var method=" + (document.getElementById("chkLocal").checked ? 2 : 1) + ";\n" + String.raw`
@ -164,7 +188,6 @@ function createCode(){
var connection; var connection;
var lineCount=-1; var lineCount=-1;
function stop (){ function stop (){
connection.reconnect((c)=>{ connection.reconnect((c)=>{
c.write("load();\n"); c.write("load();\n");
@ -173,32 +196,74 @@ function stop (){
}); });
} }
document.getElementById("chkLocal").addEventListener("click", function() { function updateButtons(){
document.getElementById("btnSave").disabled = document.getElementById("chkLocal").checked; document.getElementById("btnSave").disabled = document.getElementById("chkLocal").checked;
document.getElementById("btnDownload").disabled = !document.getElementById("chkLocal").checked;
document.getElementById("btnReset").disabled = document.getElementById("chkLocal").checked; document.getElementById("btnReset").disabled = document.getElementById("chkLocal").checked;
document.getElementById("btnStop").disabled = document.getElementById("chkLocal").checked; document.getElementById("btnStop").disabled = document.getElementById("chkLocal").checked;
}
updateButtons();
document.getElementById("chkLocal").addEventListener("click", function() {
reset();
updateButtons();
});
window.addEventListener("message", function(event) {
let msg = event.data;
if (msg.type=="readstoragefilersp") {
saveCSV("log.csv", msg.data);
}
}, false);
document.getElementById("btnDownload").addEventListener("click", function() {
if (connection) {
stop();
}
console.log("Loading data from BangleJs...");
try {
window.postMessage({type:"readstoragefile",data:"log.csv",id:0});
} catch(ex) {
console.log("(Warning) Could not load apikey from BangleJs.");
console.log(ex);
}
}); });
document.getElementById("btnSave").addEventListener("click", function() { document.getElementById("btnSave").addEventListener("click", function() {
var h = document.createElement('a'); saveCSV("log.csv", localStorage.getItem("data"));
h.href = 'data:text/csv;charset=utf-8,' + encodeURI(localStorage.getItem("data"));
h.target = '_blank';
h.download = "DATA.csv";
h.click();
}); });
function reset(){
document.getElementById("result").innerText="";
}
document.getElementById("btnReset").addEventListener("click", function() { document.getElementById("btnReset").addEventListener("click", function() {
if (connection) { if (connection) {
stop(); stop();
} }
document.getElementById("result").innerText="";
lineCount=-1; lineCount=-1;
localStorage.removeItem("data"); localStorage.removeItem("data");
reset();
}); });
document.getElementById("btnStop").addEventListener("click", function() { document.getElementById("btnStop").addEventListener("click", function() {
if (connection) { if (connection) {
stop(); stop();
} }
}); });
function connect(connectionHandler){
Puck.connect(function(c) {
if (!c) {
console.log("Couldn't connect!\n");
return;
}
connection = c;
connectionHandler(c);
});
}
document.getElementById("btnConnect").addEventListener("click", function() { document.getElementById("btnConnect").addEventListener("click", function() {
localStorage.setItem("data", ""); localStorage.setItem("data", "");
lineCount=-1; lineCount=-1;
@ -206,12 +271,7 @@ document.getElementById("btnConnect").addEventListener("click", function() {
stop(); stop();
document.getElementById("result").innerText="0"; document.getElementById("result").innerText="0";
} }
Puck.connect(function(c) { connect(function(connection) {
if (!c) {
console.log("Couldn't connect!\n");
return;
}
connection = c;
var buf = ""; var buf = "";
connection.on("data", function(d) { connection.on("data", function(d) {
buf += d; buf += d;

View File

@ -9,7 +9,7 @@
"tags": "debug", "tags": "debug",
"supports": ["BANGLEJS","BANGLEJS2"], "supports": ["BANGLEJS","BANGLEJS2"],
"custom": "custom.html", "custom": "custom.html",
"customConnect": false, "customConnect": true,
"readme": "README.md", "readme": "README.md",
"storage": [ ] "storage": [ ]
} }