Merge pull request #507 from gedankenstuecke/master

Adds a one-button-tracker widget
pull/510/head
Gordon Williams 2020-06-22 08:55:09 +01:00 committed by GitHub
commit e295f91bc4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 168 additions and 0 deletions

View File

@ -1958,5 +1958,21 @@
{"name":"miclock2.app.js","url":"clock-mixed.js"},
{"name":"miclock2.img","url":"clock-mixed-icon.js","evaluate":true}
]
},
{ "id": "1button",
"name": "One-Button-Tracker",
"icon": "widget.png",
"version":"0.01",
"interface": "interface.html",
"description": "A widget that turns BTN1 into a tracker, records time of button press/release.",
"tags": "tool,quantifiedself,widget",
"type": "widget",
"readme": "README.md",
"storage": [
{"name":"1button.wid.js","url":"widget.js"}
],
"data": [
{"name":"one_button_presses.csv","storageFile": true}
]
}
]

1
apps/1button/ChangeLog Normal file
View File

@ -0,0 +1 @@
0.01: New Widget!

31
apps/1button/README.md Normal file
View File

@ -0,0 +1,31 @@
# The One Button tracker
A simple widget that turns the `BTN1` of your Bangle.js into a one-button-tracker that can be used right from the clock face and everywhere else. Record when you're sneezing, yawning, eating, or whatever you think the button should track for you.
![](one-button.GIF)
## Usage
Every time you press & release the `BTN1` from the clockface this widget will record the time you pressed & released. While you press the button the Bangle will briefly vibrate and the green LED in the display will light up while you're keeping the button pressed.
Once you release `BTN1` both the start & end time of your button press will be saved in 2-column `one_button_presses.csv` CSV file on your _Bangle.js_. The CSV file can [be downloaded from the _My Apps_ tab on the Bangle.js app store](https://banglejs.com/apps/).
To not interfere with alternative usages of `BTN1` (eg when using it for menu navigation) you need to keep the button pressed for at least 130 milliseconds before it triggers a recording (the vibration & LED will inform you about having triggered it).
## Features
- Track whatever events you want with a simple button press on your wrist
- Track multiple things with a single button by using different length of button presses
- Easily export the data to visualize your presses in a tool of your choice
## Controls
Only makes use of `BTN1` (the top one) right now.
## Requests
[Reach out to Bastian](https://www.github.com/gedankenstuecke) if you have feature requests or notice bugs.
## Creator
Made by [Bastian Greshake Tzovaras](https://tzovar.as), inspired by the one-button tracker project by Thomas Blomseth Christiansen and Jakob Eg Larsen.

View File

@ -0,0 +1,84 @@
<html>
<head>
<link rel="stylesheet" href="../../css/spectre.min.css">
</head>
<body>
<div id="records"></div>
<script src="../../lib/interface.js"></script>
<script>
var domRecords = document.getElementById("records");
function saveRecord(record,name) {
var csv = `${record.map(rec=>[rec.start_time, rec.end_time].join(",")).join("\n")}`;
Util.saveCSV(name, csv);
}
function recordLineToObject(l) {
var t = l.trim().split(",");
var o = {
start_time: parseFloat(t[0]),
end_time: parseFloat(t[1]),
};
return o;
}
function downloadRecord(callback) {
Util.showModal("Downloading one-button tracker data...");
Util.readStorageFile(`one_button_presses.csv`,data=>{
Util.hideModal();
var record = data.trim().split("\n").map(l=>recordLineToObject(l));
callback(record);
});
}
function getRecordList() {
Util.showModal("Loading one button tracker records...");
domRecords.innerHTML = "";
var html = `<div class="container">
<div class="columns">\n`;
html += `
<div class="column col-12">
<div class="card-header">
<div class="card-title h5">One-Button Presses</div>
<div class="card-subtitle text-gray">Get all of your button presses</div>
</div>
<div class="card-body"></div>
<div class="card-footer">
<button class="btn btn-primary" task="download">Download</button>
<button class="btn btn-default" task="delete">Delete</button>
</div>
</div>
`;
html += `
</div>
</div>`;
domRecords.innerHTML = html;
Util.hideModal();
var buttons = domRecords.querySelectorAll("button");
for (var i=0;i<buttons.length;i++) {
buttons[i].addEventListener("click",event => {
var button = event.currentTarget;
var task = button.getAttribute("task");
if (task=="delete") {
Util.showModal("Deleting record...");
Util.eraseStorageFile(`one_button_presses.csv`,()=>{
Util.hideModal();
getRecordList();
});
}
if (task=="download") {
downloadRecord(record => saveRecord(record, `one_button_presses`));
}
});
}
}
function onInit() {
getRecordList();
}
</script>
</body>
</html>

BIN
apps/1button/one-button.GIF Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

36
apps/1button/widget.js Normal file
View File

@ -0,0 +1,36 @@
(() => {
var press_time = new Date();
// set widget text
function draw() {
g.reset(); // reset the graphics context to defaults (color/font/etc)
// add your code
g.fillCircle(this.x+6,this.y+6,4);
g.drawString("1BUTTON", this.x+13, this.y+4);
}
// listen to button press to get start time
setWatch(function(e) {
console.log("Button pressed");
digitalWrite(LED2,1);
press_time = new Date();
Bangle.buzz();
}, BTN1, { repeat: true, edge: 'rising', debounce: 130 });
// listen to button go to get end time & write data
setWatch(function(e) {
console.log("Button let go");
digitalWrite(LED2,0);
var unpress_time = new Date();
recFile = require("Storage").open("one_button_presses.csv","a");
recFile.write([press_time.getTime(),unpress_time.getTime()].join(",")+"\n");
}, BTN1, { repeat: true, edge: 'falling', debounce: 50 });
// add your widget
WIDGETS["1button"]={
area:"tl", // tl (top left), tr (top right), bl (bottom left), br (bottom right)
width: 100, // how wide is the widget? You can change this and call Bangle.drawWidgets() to re-layout
draw:draw // called to draw the widget
};
})()

BIN
apps/1button/widget.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB