mirror of https://github.com/espruino/BangleApps
Merge pull request #2332 from halemmerich/qcenter
qcenter - Fastload the clock on swipepull/2339/head
Gordon Williams
GitHub
commit
6d53b13079
|
|
@ -1 +1,2 @@
|
|||
0.01: New App!
|
||||
0.02: Fix fast loading on swipe to clock
|
||||
|
|
|
|||
|
|
@ -1,120 +1,129 @@
|
|||
{
|
||||
require("Font8x12").add(Graphics);
|
||||
|
||||
// load pinned apps from config
|
||||
var settings = require("Storage").readJSON("qcenter.json", 1) || {};
|
||||
var pinnedApps = settings.pinnedApps || [];
|
||||
var exitGesture = settings.exitGesture || "swipeup";
|
||||
let settings = require("Storage").readJSON("qcenter.json", 1) || {};
|
||||
let pinnedApps = settings.pinnedApps || [];
|
||||
let exitGesture = settings.exitGesture || "swipeup";
|
||||
|
||||
// if empty load a default set of apps as an example
|
||||
if (pinnedApps.length == 0) {
|
||||
pinnedApps = [
|
||||
{ src: "setting.app.js", icon: "setting.img" },
|
||||
{ src: "about.app.js", icon: "about.img" },
|
||||
];
|
||||
pinnedApps = [
|
||||
{ src: "setting.app.js", icon: "setting.img" },
|
||||
{ src: "about.app.js", icon: "about.img" },
|
||||
];
|
||||
}
|
||||
|
||||
// button drawing from Layout.js, edited to have completely custom button size with icon
|
||||
function drawButton(l) {
|
||||
var x = l.x + (0 | l.pad),
|
||||
y = l.y + (0 | l.pad),
|
||||
w = l.w - (l.pad << 1),
|
||||
h = l.h - (l.pad << 1);
|
||||
var poly = [
|
||||
x,
|
||||
y + 4,
|
||||
x + 4,
|
||||
y,
|
||||
x + w - 5,
|
||||
y,
|
||||
x + w - 1,
|
||||
y + 4,
|
||||
x + w - 1,
|
||||
y + h - 5,
|
||||
x + w - 5,
|
||||
y + h - 1,
|
||||
x + 4,
|
||||
y + h - 1,
|
||||
x,
|
||||
y + h - 5,
|
||||
x,
|
||||
y + 4,
|
||||
],
|
||||
bg = l.selected ? g.theme.bgH : g.theme.bg2;
|
||||
g.setColor(bg)
|
||||
.fillPoly(poly)
|
||||
.setColor(l.selected ? g.theme.fgH : g.theme.fg2)
|
||||
.drawPoly(poly);
|
||||
if (l.src)
|
||||
g.setBgColor(bg).drawImage(
|
||||
"function" == typeof l.src ? l.src() : l.src,
|
||||
l.x + l.w / 2,
|
||||
l.y + l.h / 2,
|
||||
{ scale: l.scale || undefined, rotate: Math.PI * 0.5 * (l.r || 0) }
|
||||
);
|
||||
let drawButton = function(l) {
|
||||
let x = l.x + (0 | l.pad),
|
||||
y = l.y + (0 | l.pad),
|
||||
w = l.w - (l.pad << 1),
|
||||
h = l.h - (l.pad << 1);
|
||||
let poly = [
|
||||
x,
|
||||
y + 4,
|
||||
x + 4,
|
||||
y,
|
||||
x + w - 5,
|
||||
y,
|
||||
x + w - 1,
|
||||
y + 4,
|
||||
x + w - 1,
|
||||
y + h - 5,
|
||||
x + w - 5,
|
||||
y + h - 1,
|
||||
x + 4,
|
||||
y + h - 1,
|
||||
x,
|
||||
y + h - 5,
|
||||
x,
|
||||
y + 4,
|
||||
],
|
||||
bg = l.selected ? g.theme.bgH : g.theme.bg2;
|
||||
g.setColor(bg)
|
||||
.fillPoly(poly)
|
||||
.setColor(l.selected ? g.theme.fgH : g.theme.fg2)
|
||||
.drawPoly(poly);
|
||||
if (l.src)
|
||||
g.setBgColor(bg).drawImage(
|
||||
"function" == typeof l.src ? l.src() : l.src,
|
||||
l.x + l.w / 2,
|
||||
l.y + l.h / 2,
|
||||
{ scale: l.scale || undefined, rotate: Math.PI * 0.5 * (l.r || 0) }
|
||||
);
|
||||
}
|
||||
|
||||
// function to split array into group of 3, for button placement
|
||||
function groupBy3(data) {
|
||||
var result = [];
|
||||
for (var i = 0; i < data.length; i += 3) result.push(data.slice(i, i + 3));
|
||||
return result;
|
||||
let groupBy3 = function(data) {
|
||||
let result = [];
|
||||
for (let i = 0; i < data.length; i += 3) result.push(data.slice(i, i + 3));
|
||||
return result;
|
||||
}
|
||||
|
||||
// generate object with buttons for apps by group of 3
|
||||
var appButtons = groupBy3(pinnedApps).map((appGroup, i) => {
|
||||
return appGroup.map((app, j) => {
|
||||
return {
|
||||
type: "custom",
|
||||
render: drawButton,
|
||||
width: 50,
|
||||
height: 50,
|
||||
pad: 5,
|
||||
src: require("Storage").read(app.icon),
|
||||
scale: 0.75,
|
||||
cb: (l) => Bangle.load(app.src),
|
||||
};
|
||||
});
|
||||
let appButtons = groupBy3(pinnedApps).map((appGroup, i) => {
|
||||
return appGroup.map((app, j) => {
|
||||
return {
|
||||
type: "custom",
|
||||
render: drawButton,
|
||||
width: 50,
|
||||
height: 50,
|
||||
pad: 5,
|
||||
src: require("Storage").read(app.icon),
|
||||
scale: 0.75,
|
||||
cb: (l) => load(app.src),
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
// create basic layout content with status info and sensor status on top
|
||||
var layoutContent = [
|
||||
{
|
||||
type: "h",
|
||||
pad: 5,
|
||||
fillx: 1,
|
||||
c: [
|
||||
{ type: "txt", font: "8x12", pad: 3, scale: 2, label: E.getBattery() + "%" },
|
||||
{ type: "txt", font: "8x12", pad: 3, scale: 2, label: "GPS: " + (Bangle.isGPSOn() ? "ON" : "OFF") },
|
||||
],
|
||||
},
|
||||
let layoutContent = [
|
||||
{
|
||||
type: "h",
|
||||
pad: 5,
|
||||
fillx: 1,
|
||||
c: [
|
||||
{ type: "txt", font: "8x12", pad: 3, scale: 2, label: E.getBattery() + "%" },
|
||||
{ type: "txt", font: "8x12", pad: 3, scale: 2, label: "GPS: " + (Bangle.isGPSOn() ? "ON" : "OFF") },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// create rows for buttons and add them to layoutContent
|
||||
appButtons.forEach((appGroup) => {
|
||||
layoutContent.push({
|
||||
type: "h",
|
||||
pad: 2,
|
||||
c: appGroup,
|
||||
});
|
||||
layoutContent.push({
|
||||
type: "h",
|
||||
pad: 2,
|
||||
c: appGroup,
|
||||
});
|
||||
});
|
||||
|
||||
// create layout with content
|
||||
|
||||
Bangle.loadWidgets();
|
||||
|
||||
var Layout = require("Layout");
|
||||
var layout = new Layout({
|
||||
type: "v",
|
||||
c: layoutContent,
|
||||
let Layout = require("Layout");
|
||||
let layout = new Layout({
|
||||
type: "v",
|
||||
c: layoutContent
|
||||
}, {
|
||||
remove: ()=>{
|
||||
Bangle.removeListener("swipe", onSwipe);
|
||||
delete Graphics.prototype.setFont8x12;
|
||||
}
|
||||
});
|
||||
g.clear();
|
||||
layout.render();
|
||||
Bangle.drawWidgets();
|
||||
|
||||
// swipe event listener for exit gesture
|
||||
Bangle.on("swipe", function (lr, ud) {
|
||||
if(exitGesture == "swipeup" && ud == -1) Bangle.showClock();
|
||||
if(exitGesture == "swipedown" && ud == 1) Bangle.showClock();
|
||||
if(exitGesture == "swipeleft" && lr == -1) Bangle.showClock();
|
||||
if(exitGesture == "swiperight" && lr == 1) Bangle.showClock();
|
||||
});
|
||||
let onSwipe = function (lr, ud) {
|
||||
if(exitGesture == "swipeup" && ud == -1) Bangle.showClock();
|
||||
if(exitGesture == "swipedown" && ud == 1) Bangle.showClock();
|
||||
if(exitGesture == "swipeleft" && lr == -1) Bangle.showClock();
|
||||
if(exitGesture == "swiperight" && lr == 1) Bangle.showClock();
|
||||
}
|
||||
|
||||
Bangle.on("swipe", onSwipe);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
{
|
||||
"id": "qcenter",
|
||||
"name": "Quick Center",
|
||||
"shortName": "QCenter",
|
||||
"version": "0.01",
|
||||
"description": "An app for quickly launching your favourite apps, inspired by the control centres of other watches.",
|
||||
"icon": "app.png",
|
||||
"tags": "",
|
||||
"supports": ["BANGLEJS2"],
|
||||
"readme": "README.md",
|
||||
"screenshots": [{ "url": "screenshot.png" }],
|
||||
"storage": [
|
||||
{ "name": "qcenter.app.js", "url": "app.js" },
|
||||
{ "name": "qcenter.settings.js", "url": "settings.js" },
|
||||
{ "name": "qcenter.img", "url": "app-icon.js", "evaluate": true }
|
||||
]
|
||||
"id": "qcenter",
|
||||
"name": "Quick Center",
|
||||
"shortName": "QCenter",
|
||||
"version": "0.02",
|
||||
"description": "An app for quickly launching your favourite apps, inspired by the control centres of other watches.",
|
||||
"icon": "app.png",
|
||||
"tags": "",
|
||||
"supports": ["BANGLEJS2"],
|
||||
"readme": "README.md",
|
||||
"screenshots": [{ "url": "screenshot.png" }],
|
||||
"storage": [
|
||||
{ "name": "qcenter.app.js", "url": "app.js" },
|
||||
{ "name": "qcenter.settings.js", "url": "settings.js" },
|
||||
{ "name": "qcenter.img", "url": "app-icon.js", "evaluate": true }
|
||||
],
|
||||
"data": [{"name":"qcenter.json"}]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,141 +1,133 @@
|
|||
// make sure to enclose the function in parentheses
|
||||
(function (back) {
|
||||
let settings = require("Storage").readJSON("qcenter.json", 1) || {};
|
||||
var apps = require("Storage")
|
||||
.list(/\.info$/)
|
||||
.map((app) => {
|
||||
var a = require("Storage").readJSON(app, 1);
|
||||
return (
|
||||
a && {
|
||||
name: a.name,
|
||||
type: a.type,
|
||||
sortorder: a.sortorder,
|
||||
src: a.src,
|
||||
icon: a.icon,
|
||||
}
|
||||
);
|
||||
})
|
||||
.filter(
|
||||
(app) =>
|
||||
app &&
|
||||
(app.type == "app" ||
|
||||
app.type == "launch" ||
|
||||
app.type == "clock" ||
|
||||
!app.type)
|
||||
);
|
||||
apps.sort((a, b) => {
|
||||
var n = (0 | a.sortorder) - (0 | b.sortorder);
|
||||
if (n) return n; // do sortorder first
|
||||
if (a.name < b.name) return -1;
|
||||
if (a.name > b.name) return 1;
|
||||
return 0;
|
||||
});
|
||||
let settings = require("Storage").readJSON("qcenter.json", 1) || {};
|
||||
var apps = require("Storage")
|
||||
.list(/\.info$/)
|
||||
.map((app) => {
|
||||
var a = require("Storage").readJSON(app, 1);
|
||||
return (
|
||||
a && {
|
||||
name: a.name,
|
||||
type: a.type,
|
||||
sortorder: a.sortorder,
|
||||
src: a.src,
|
||||
icon: a.icon,
|
||||
}
|
||||
);
|
||||
})
|
||||
.filter(
|
||||
(app) =>
|
||||
app &&
|
||||
(app.type == "app" ||
|
||||
app.type == "launch" ||
|
||||
app.type == "clock" ||
|
||||
!app.type)
|
||||
);
|
||||
apps.sort((a, b) => {
|
||||
var n = (0 | a.sortorder) - (0 | b.sortorder);
|
||||
if (n) return n; // do sortorder first
|
||||
if (a.name < b.name) return -1;
|
||||
if (a.name > b.name) return 1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
function save(key, value) {
|
||||
settings[key] = value;
|
||||
require("Storage").write("qcenter.json", settings);
|
||||
}
|
||||
function save(key, value) {
|
||||
settings[key] = value;
|
||||
require("Storage").write("qcenter.json", settings);
|
||||
}
|
||||
|
||||
var pinnedApps = settings.pinnedApps || [];
|
||||
var exitGesture = settings.exitGesture || "swipeup";
|
||||
var pinnedApps = settings.pinnedApps || [];
|
||||
var exitGesture = settings.exitGesture || "swipeup";
|
||||
|
||||
function showMainMenu() {
|
||||
var mainmenu = {
|
||||
"": { title: "Quick Center" },
|
||||
"< Back": () => {
|
||||
load();
|
||||
},
|
||||
};
|
||||
function showMainMenu() {
|
||||
var mainmenu = {
|
||||
"": { title: "Quick Center", back: back},
|
||||
};
|
||||
|
||||
// Set exit gesture
|
||||
mainmenu["Exit Gesture: " + exitGesture] = function () {
|
||||
E.showMenu(exitGestureMenu);
|
||||
};
|
||||
// Set exit gesture
|
||||
mainmenu["Exit Gesture: " + exitGesture] = function () {
|
||||
E.showMenu(exitGestureMenu);
|
||||
};
|
||||
|
||||
//List all pinned apps, redirecting to menu with options to unpin and reorder
|
||||
pinnedApps.forEach((app, i) => {
|
||||
mainmenu[app.name] = function () {
|
||||
E.showMenu({
|
||||
"": { title: app.name },
|
||||
"< Back": () => {
|
||||
showMainMenu();
|
||||
},
|
||||
"Unpin": () => {
|
||||
pinnedApps.splice(i, 1);
|
||||
save("pinnedApps", pinnedApps);
|
||||
showMainMenu();
|
||||
},
|
||||
"Move Up": () => {
|
||||
if (i > 0) {
|
||||
pinnedApps.splice(i - 1, 0, pinnedApps.splice(i, 1)[0]);
|
||||
save("pinnedApps", pinnedApps);
|
||||
showMainMenu();
|
||||
}
|
||||
},
|
||||
"Move Down": () => {
|
||||
if (i < pinnedApps.length - 1) {
|
||||
pinnedApps.splice(i + 1, 0, pinnedApps.splice(i, 1)[0]);
|
||||
save("pinnedApps", pinnedApps);
|
||||
showMainMenu();
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
});
|
||||
//List all pinned apps, redirecting to menu with options to unpin and reorder
|
||||
pinnedApps.forEach((app, i) => {
|
||||
mainmenu[app.name] = function () {
|
||||
E.showMenu({
|
||||
"": { title: app.name, back: showMainMenu },
|
||||
"Unpin": () => {
|
||||
pinnedApps.splice(i, 1);
|
||||
save("pinnedApps", pinnedApps);
|
||||
showMainMenu();
|
||||
},
|
||||
"Move Up": () => {
|
||||
if (i > 0) {
|
||||
pinnedApps.splice(i - 1, 0, pinnedApps.splice(i, 1)[0]);
|
||||
save("pinnedApps", pinnedApps);
|
||||
showMainMenu();
|
||||
}
|
||||
},
|
||||
"Move Down": () => {
|
||||
if (i < pinnedApps.length - 1) {
|
||||
pinnedApps.splice(i + 1, 0, pinnedApps.splice(i, 1)[0]);
|
||||
save("pinnedApps", pinnedApps);
|
||||
showMainMenu();
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
// Show pin app menu, or show alert if max amount of apps are pinned
|
||||
mainmenu["Pin App"] = function () {
|
||||
if (pinnedApps.length < 6) {
|
||||
E.showMenu(pinAppMenu);
|
||||
} else {
|
||||
E.showAlert("Max apps pinned").then(showMainMenu);
|
||||
}
|
||||
};
|
||||
// Show pin app menu, or show alert if max amount of apps are pinned
|
||||
mainmenu["Pin App"] = function () {
|
||||
if (pinnedApps.length < 6) {
|
||||
E.showMenu(pinAppMenu);
|
||||
} else {
|
||||
E.showAlert("Max apps pinned").then(showMainMenu);
|
||||
}
|
||||
};
|
||||
|
||||
return E.showMenu(mainmenu);
|
||||
}
|
||||
return E.showMenu(mainmenu);
|
||||
}
|
||||
|
||||
// menu for adding apps to the quick launch menu, listing all apps
|
||||
var pinAppMenu = {
|
||||
"": { title: "Add App" },
|
||||
"< Back": showMainMenu,
|
||||
};
|
||||
apps.forEach((a) => {
|
||||
pinAppMenu[a.name] = function () {
|
||||
// strip unncecessary properties
|
||||
delete a.type;
|
||||
delete a.sortorder;
|
||||
pinnedApps.push(a);
|
||||
save("pinnedApps", pinnedApps);
|
||||
showMainMenu();
|
||||
};
|
||||
});
|
||||
// menu for adding apps to the quick launch menu, listing all apps
|
||||
var pinAppMenu = {
|
||||
"": { title: "Add App", back: showMainMenu }
|
||||
};
|
||||
apps.forEach((a) => {
|
||||
pinAppMenu[a.name] = function () {
|
||||
// strip unncecessary properties
|
||||
delete a.type;
|
||||
delete a.sortorder;
|
||||
pinnedApps.push(a);
|
||||
save("pinnedApps", pinnedApps);
|
||||
showMainMenu();
|
||||
};
|
||||
});
|
||||
|
||||
// menu for setting exit gesture
|
||||
var exitGestureMenu = {
|
||||
"": { title: "Exit Gesture" },
|
||||
"< Back": showMainMenu,
|
||||
};
|
||||
exitGestureMenu["Swipe Up"] = function () {
|
||||
exitGesture = "swipeup";
|
||||
save("exitGesture", "swipeup");
|
||||
showMainMenu();
|
||||
};
|
||||
exitGestureMenu["Swipe Down"] = function () {
|
||||
exitGesture = "swipedown";
|
||||
save("exitGesture", "swipedown");
|
||||
showMainMenu();
|
||||
};
|
||||
exitGestureMenu["Swipe Left"] = function () {
|
||||
exitGesture = "swipeleft";
|
||||
save("exitGesture", "swipeleft");
|
||||
showMainMenu();
|
||||
};
|
||||
exitGestureMenu["Swipe Right"] = function () {
|
||||
exitGesture = "swiperight";
|
||||
save("exitGesture", "swiperight");
|
||||
showMainMenu();
|
||||
};
|
||||
// menu for setting exit gesture
|
||||
var exitGestureMenu = {
|
||||
"": { title: "Exit Gesture", back: showMainMenu }
|
||||
};
|
||||
exitGestureMenu["Swipe Up"] = function () {
|
||||
exitGesture = "swipeup";
|
||||
save("exitGesture", "swipeup");
|
||||
showMainMenu();
|
||||
};
|
||||
exitGestureMenu["Swipe Down"] = function () {
|
||||
exitGesture = "swipedown";
|
||||
save("exitGesture", "swipedown");
|
||||
showMainMenu();
|
||||
};
|
||||
exitGestureMenu["Swipe Left"] = function () {
|
||||
exitGesture = "swipeleft";
|
||||
save("exitGesture", "swipeleft");
|
||||
showMainMenu();
|
||||
};
|
||||
exitGestureMenu["Swipe Right"] = function () {
|
||||
exitGesture = "swiperight";
|
||||
save("exitGesture", "swiperight");
|
||||
showMainMenu();
|
||||
};
|
||||
|
||||
showMainMenu();
|
||||
showMainMenu();
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue