Add buttons inside javascript code
I want to add a button to javascript code that stores heart rate from Gear 2 using Tizen sdk. In my code, the main div is inserted into the javascript code. I am using the following code:
//HTML CODE:
<div id="chartContainer" class="chart"></div>
//JAVASCRIPT CODE:
var chart = new CanvasJS.Chart("chartContainer",{
title :{
fontColor: "#ccc",
text: "Heart Rate"
},
backgroundColor: "#222",
data: [{
color: "#CD5C5C",
type: "line",
dataPoints: dps
}]
});
var lastSecond = -1;
var updateChart = function (heartrate) {
time = new Date().getTime() - initial;
console.log("[" + time + ", " + heartrate + "]");
temp = heartrate;
console.log("tempVar"+ temp);
tizen.filesystem.resolve(
'documents',
function(dir){
documentsDir = dir; dir.listFiles(onsuccess,onerror);
}, function(e) {
console.log("Error" + e.message);
}, "a"
);
dps.push({
x: time / 1000.0,
y: heartrate
});
if (dps.length > dataLength)
{
dps.shift();
}
var second = Math.round(time / 1000.0);
console.log(history.length);
if(lastSecond != second) {
// TODO use avg heart rate instead of smapshot.
history.push({
x: second,
y: heartrate
});
if(history.length > historyDataLength) {
history.shift();
}
lastSecond = second;
}
if(dps.length >= dataLength) {
chart.render();
}
var hrchart = "<center>" + heartrate + "bps</center><table width='100%' cellpadding=4px>";
for(var i = history.length - historyDataLength; i >= 0 && i < history.length; i++) {
hrchart += "<tr><td align='right' width='50%'>" + history[i].x + "s</td><td width='50%'>" + history[i].y + "bps</td></tr>";
}
hrchart += "</table>";
$('#textbox').html(hrchart);
};
updateChart(0);
updateChart(250);
for(var i = 0; i < dataLength; i++) {
updateChart(0);
}
I want to create two buttons to close the application on click and one to store data when clicked. How do I add these two buttons to javascript code? Secondly, is anyone familiar with the "tizenhwkey" key? What is the key? Third, I open the heart rate sensor using the following command window.webapis.motion.start("HRM", onchangedCB)
. How do I cover the heart rate sensor? The onchangeCB function is as follows:
function onchangedCB(hrmInfo)
{
if(hrmInfo.heartRate > 0) {
// add eventListener for tizenhwkey
document.addEventListener('tizenhwkey', function(e) {
if(e.keyName == "back")
tizen.application.getCurrentApplication().exit();
});
updateChart(hrmInfo.heartRate);
} else {
$('#textbox').html("No heart rate detected.");
}
}
Let's say you close the application by clicking the Back button. However, gear 2 only has one button. Is this button a symbol? For hrm I am using the following code . To write to a file, I use:
function onsuccess(files) {
var testFile = null;
try{
testFile = documentsDir.createFile("test.txt");
if (testFile !== null) {
testFile.openStream(
"a",
function(fs){
fs.write(temp+"\n\n\n");
fs.close();
}, function(e){
console.log("Error " + e.message);
}, "UTF-8"
);
}
}
catch (e) { // file already exist -> append content
testFile = documentsDir.resolve('test.txt');
if(testFile !== null)
{
testFile.openStream(
"a",
function(fs){
fs.write(temp+"\n\n\n");
fs.close();
}, function(e){
console.log("Error " + e.message);
}, "UTF-8"
);
}
}
}
function onerror(error) {
console.log("The error " + error.message + " occurred when listing the files in the selected folder");
}
and
temp = heartrate;
tizen.filesystem.resolve(
'documents',
function(dir){
documentsDir = dir;
dir.listFiles(onsuccess,onerror);
}, function(e) {
console.log("Error" + e.message);
}, "a"
);
source to share
1. Create a button in JS-code
var b1 = document.createElement("BUTTON"); // Create Button
var b2 = document.createElement("BUTTON");
// Assign text to your button
b1.textContent = "Start";
b2.textContent = "Exit";
// Register click handlers to call respective functions
b1.onclick = function() {/*Code here*/};
b2.onclick = function() {/*Code here*/};
// Append them in your DOM i.e to show it on your page.
// Suppose to append it to an existing element in your page with id as "appp".
var attachTo = document.getElementById("appp");
attachTo.appendChild(b1);
attachTo.appendChild(b2);
2. TIZENHWKEY
On Gear, tizenhwkey "means" Scroll down "gesture and Swipe up " gesture.
Scrolling down acts like a back key , similar to how it works on a phone. Scrolling up acts like a menu button , similar to how it works on a phone
You can use the below code to handle both of the gestures I mentioned above.
document.addEventListener('tizenhwkey', function(e) {
if(e.keyName == "menu") {
}
if(e.keyName == "back") {
// you need to write exit statement
tizen.application.getCurrentApplication().exit();
}
}
-
As for stopping HRM - use this to stop HRM monitoring.
webapis.motion.stop ("HRM");
-
New Line Problem - Try it.
fs.write (temp + "\ n \ n \ n");
source to share
I'm still a beginner but I know the basics of how to open a window and close it. Maybe this can help you.
<button onclick="openWin()">Open "myWindow"</button>
<button onclick="closeWin()">Close "myWindow"</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "myWindow", "width=200, height=100");
myWindow.document.write("<p>This is 'myWindow'</p>");
}
function closeWin(){
myWindow.close();
}
source to share