是否可以显示设置页面并使用 Pebble.js 和 CloudPebble 与 phone 通信?
Is it possible to display a settings page and communicate with a phone using Pebble.js and CloudPebble?
是否可以在 phone 上获取用户输入并对其进行处理,然后仅使用 Pebble.js 和 CloudPebble 将一些结果显示到 pebble 手表上?
对于这种情况,我想我需要 PebbleKit JS 或 PebbleKit Android/iOS 才能在 phone 和 watch.. 之间进行通信,对吗?
Pebble.js 是使用 PebbleKit JS 构建的,因此您可以使用 PebbleKit JS 做的任何事情都可以在 Pebble.js 中完成,包括设置页面。
要使用 CloudPebble,您必须对配置页面进行一些更改。首先,您将像使用常规应用程序一样在 Web 上托管该页面。但是,对于 Pebble.js 和 CloudPebble 测试,您需要使用从 CloudPebble 传递给您的 return_to 查询字符串值将配置数据发送回您的模拟器。
这是一个例子(在配置网页顶部的脚本部分)
function getQuerystring(key, default_) {
if (default_ == null) default_ = "";
key = key.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\?&]" + key + "=([^&#]*)");
var qs = regex.exec(window.location.href);
if (qs == null)
return default_;
else
return qs[1];
}
// set this value from the "options" query string value.
// This is the value of the options that you'll receive from your app
var optionsString = getQuerystring("options", "{username:''}");
var options = JSON.parse(optionsString);
// get the return to value from query string. Set it to blank if it's not there
var returnTo = getQuerystring("return_to","");
function sendConfigData() {
var options = { username: txtUsername.value };
if (returnTo != '') {
document.location = returnTo + JSON.stringify(options);
}
else {
document.location = 'pebblejs://close#' + encodeURIComponent(JSON.stringify(options));
}
}
function cancel() {
if (returnTo != '') {
document.location = returnTo;
}
else {
document.location = "pebblejs://close";
}
}
然后,在您的表单中,设置提交按钮以调用适当的函数。
<input type="text" id="txtUsername" placeholder="User Name" />
<input type="button" value="Save" onclick="sendConfigData()" />
<input type="button" value="Cancel" onclick="cancel()" />
在配置 Web 表单的底部,输入以下内容 JavaScript:
txtUsername.value = options.username;
在 CloudPebble 的 app.js 文件中,调用配置屏幕的方式如下:
var options = { username : 'default' };
var OPTIONS_SETTING_KEY = 0;
function showConfiguration(){
console.log("showing configuration");
Pebble.openURL('http://yourwebsite.com/PebbleConfig?options=' + encodeURIComponent(JSON.stringify(options)));
}
Pebble.addEventListener("showConfiguration", function() {
showConfiguration();
});
Pebble.addEventListener("webviewclosed", function(e) {
console.log("configuration closed");
// webview closed
//Using primitive JSON validity and non-empty check
console.log('response: ' + e.response);
if (e.response.charAt(0) == "{" && e.response.slice(-1) == "}" && e.response.length > 5) {
options = JSON.parse(decodeURIComponent(e.response));
// Write a key with associated value
localStorage.setItem(OPTIONS_SETTING_KEY, JSON.stringify(options));
console.log("Options = " + JSON.stringify(options));
} else {
console.log("Cancelled");
}
});
var optionString = localStorage.getItem(OPTIONS_SETTING_KEY);
if(optionString === null || optionString === ''){
console.log('Using default username');
}
else {
options = JSON.parse(optionString);
console.log('Set username: ' + options.username);
}
现在您可以在整个应用程序中使用您的选项。当您将此应用部署到应用商店的生产环境时,网页会检测到缺少 return_to 查询字符串,并会使用适当的关闭机制 (document.location = 'pebblejs://close#' + encodeURIComponent(JSON.stringify(options));
) 并将配置发回您的手表.
是否可以在 phone 上获取用户输入并对其进行处理,然后仅使用 Pebble.js 和 CloudPebble 将一些结果显示到 pebble 手表上?
对于这种情况,我想我需要 PebbleKit JS 或 PebbleKit Android/iOS 才能在 phone 和 watch.. 之间进行通信,对吗?
Pebble.js 是使用 PebbleKit JS 构建的,因此您可以使用 PebbleKit JS 做的任何事情都可以在 Pebble.js 中完成,包括设置页面。
要使用 CloudPebble,您必须对配置页面进行一些更改。首先,您将像使用常规应用程序一样在 Web 上托管该页面。但是,对于 Pebble.js 和 CloudPebble 测试,您需要使用从 CloudPebble 传递给您的 return_to 查询字符串值将配置数据发送回您的模拟器。
这是一个例子(在配置网页顶部的脚本部分)
function getQuerystring(key, default_) {
if (default_ == null) default_ = "";
key = key.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\?&]" + key + "=([^&#]*)");
var qs = regex.exec(window.location.href);
if (qs == null)
return default_;
else
return qs[1];
}
// set this value from the "options" query string value.
// This is the value of the options that you'll receive from your app
var optionsString = getQuerystring("options", "{username:''}");
var options = JSON.parse(optionsString);
// get the return to value from query string. Set it to blank if it's not there
var returnTo = getQuerystring("return_to","");
function sendConfigData() {
var options = { username: txtUsername.value };
if (returnTo != '') {
document.location = returnTo + JSON.stringify(options);
}
else {
document.location = 'pebblejs://close#' + encodeURIComponent(JSON.stringify(options));
}
}
function cancel() {
if (returnTo != '') {
document.location = returnTo;
}
else {
document.location = "pebblejs://close";
}
}
然后,在您的表单中,设置提交按钮以调用适当的函数。
<input type="text" id="txtUsername" placeholder="User Name" />
<input type="button" value="Save" onclick="sendConfigData()" />
<input type="button" value="Cancel" onclick="cancel()" />
在配置 Web 表单的底部,输入以下内容 JavaScript:
txtUsername.value = options.username;
在 CloudPebble 的 app.js 文件中,调用配置屏幕的方式如下:
var options = { username : 'default' };
var OPTIONS_SETTING_KEY = 0;
function showConfiguration(){
console.log("showing configuration");
Pebble.openURL('http://yourwebsite.com/PebbleConfig?options=' + encodeURIComponent(JSON.stringify(options)));
}
Pebble.addEventListener("showConfiguration", function() {
showConfiguration();
});
Pebble.addEventListener("webviewclosed", function(e) {
console.log("configuration closed");
// webview closed
//Using primitive JSON validity and non-empty check
console.log('response: ' + e.response);
if (e.response.charAt(0) == "{" && e.response.slice(-1) == "}" && e.response.length > 5) {
options = JSON.parse(decodeURIComponent(e.response));
// Write a key with associated value
localStorage.setItem(OPTIONS_SETTING_KEY, JSON.stringify(options));
console.log("Options = " + JSON.stringify(options));
} else {
console.log("Cancelled");
}
});
var optionString = localStorage.getItem(OPTIONS_SETTING_KEY);
if(optionString === null || optionString === ''){
console.log('Using default username');
}
else {
options = JSON.parse(optionString);
console.log('Set username: ' + options.username);
}
现在您可以在整个应用程序中使用您的选项。当您将此应用部署到应用商店的生产环境时,网页会检测到缺少 return_to 查询字符串,并会使用适当的关闭机制 (document.location = 'pebblejs://close#' + encodeURIComponent(JSON.stringify(options));
) 并将配置发回您的手表.