mirror of https://github.com/espruino/BangleApps
499 lines
17 KiB
JavaScript
499 lines
17 KiB
JavaScript
let Layout = require('Layout');
|
|
|
|
let ScreenWidth = g.getWidth(), halfWidth = ScreenWidth/2;
|
|
let ScreenHeight = g.getHeight();
|
|
|
|
let normalizedColorSet = {
|
|
black:g.toColor(0,0,0), white: g.toColor(1,1,1),
|
|
red: g.toColor(1,0,0), yellow: g.toColor(1,1,0),
|
|
green:g.toColor(0,1,0), magenta:g.toColor(1,0,1),
|
|
blue: g.toColor(0,0,1), cyan: g.toColor(0,1,1)
|
|
};
|
|
|
|
let activeTheme = g.theme; // currently active theme
|
|
let pendingTheme = Object.assign({},activeTheme);
|
|
let chosenDetail = null; // one of 'fg','bg','fg2','bg2','fgH','bgH'
|
|
|
|
/**** Label ****/
|
|
|
|
function Label (Text, Options) {
|
|
function renderLabel (Details) {
|
|
let halfWidth = Details.w/2, xAlignment = Details.halign || 0;
|
|
let halfHeight = Details.h/2, yAlignment = Details.valign || 0;
|
|
let Padding = Details.pad || 0;
|
|
|
|
g.setColor(Details.col || g.theme.fg || '#000000');
|
|
|
|
if (Details.font != null) { g.setFont(Details.font); }
|
|
g.setFontAlign(xAlignment,yAlignment);
|
|
|
|
let x = Details.x + halfWidth + xAlignment*(halfWidth+Padding);
|
|
let y = Details.y + halfHeight + yAlignment*(halfHeight+Padding);
|
|
|
|
g.drawString(Details.label, x,y);
|
|
if (Details.bold) {
|
|
g.drawString(Details.label, x+1,y);
|
|
g.drawString(Details.label, x,y+1);
|
|
g.drawString(Details.label, x+1,y+1);
|
|
}
|
|
}
|
|
|
|
let Result = Object.assign((
|
|
Options == null ? {} : Object.assign({}, Options.common || {}, Options)
|
|
), {
|
|
type:'custom', render:renderLabel, label:Text || ''
|
|
});
|
|
let TextMetrics;
|
|
if (! Result.width || ! Result.height) {
|
|
if (Result.font != null) { g.setFont(Result.font); }
|
|
TextMetrics = g.stringMetrics(Result.label);
|
|
}
|
|
|
|
Result.width = Result.width || TextMetrics.width + 2*(Result.pad || 0);
|
|
Result.height = Result.height || TextMetrics.height + 2*(Result.pad || 0);
|
|
return Result;
|
|
}
|
|
|
|
if (g.drawRoundedRect == null) {
|
|
g.drawRoundedRect = function drawRoundedRect (x1,y1, x2,y2, r) {
|
|
let x,y;
|
|
if (x1 > x2) { x = x1; x1 = x2; x2 = x; }
|
|
if (y1 > y2) { y = y1; y1 = y2; y2 = y; }
|
|
|
|
r = Math.min(r || 0, (x2-x1)/2, (y2-y1)/2);
|
|
|
|
let cx1 = x1+r, cx2 = x2-r;
|
|
let cy1 = y1+r, cy2 = y2-r;
|
|
|
|
this.drawLine(cx1,y1, cx2,y1);
|
|
this.drawLine(cx1,y2, cx2,y2);
|
|
this.drawLine(x1,cy1, x1,cy2);
|
|
this.drawLine(x2,cy1, x2,cy2);
|
|
|
|
x = r; y = 0;
|
|
|
|
let dx,dy, Error = 0;
|
|
while (y <= x) {
|
|
dy = 1 + 2*y; y++; Error -= dy;
|
|
if (Error < 0) {
|
|
dx = 1 - 2*x; x--; Error -= dx;
|
|
}
|
|
|
|
this.setPixel(cx1 - x, cy1 - y); this.setPixel(cx1 - y, cy1 - x);
|
|
this.setPixel(cx2 + x, cy1 - y); this.setPixel(cx2 + y, cy1 - x);
|
|
this.setPixel(cx2 + x, cy2 + y); this.setPixel(cx2 + y, cy2 + x);
|
|
this.setPixel(cx1 - x, cy2 + y); this.setPixel(cx1 - y, cy2 + x);
|
|
}
|
|
};
|
|
}
|
|
|
|
|
|
/**** Button ****/
|
|
|
|
function Button (Text, Options) {
|
|
function renderButton (Details) {
|
|
let x = Details.x, Width = Details.w, halfWidth = Width/2;
|
|
let y = Details.y, Height = Details.h, halfHeight = Height/2;
|
|
let Padding = Details.pad || 0;
|
|
|
|
g.setColor(Details.col || g.theme.fg || '#000000');
|
|
|
|
if (Details.font != null) { g.setFont(Details.font); }
|
|
g.setFontAlign(0,0);
|
|
|
|
g.drawRoundedRect(x+Padding,y+Padding, x+Width-Padding-1,y+Height-Padding-1,8);
|
|
g.drawString(Details.label, x+halfWidth,y+halfHeight);
|
|
g.drawString(Details.label, x+halfWidth+1,y+halfHeight);
|
|
g.drawString(Details.label, x+halfWidth,y+halfHeight+1);
|
|
g.drawString(Details.label, x+halfWidth+1,y+halfHeight+1);
|
|
}
|
|
|
|
let Result = Object.assign((
|
|
Options == null ? {} : Object.assign({}, Options.common || {}, Options)
|
|
), {
|
|
type:'custom', render:renderButton, label:Text || 'Tap'
|
|
});
|
|
let TextMetrics;
|
|
if (! Result.width || ! Result.height) {
|
|
if (Options.font != null) { g.setFont(Options.font); }
|
|
TextMetrics = g.stringMetrics(Result.label);
|
|
}
|
|
|
|
Result.width = Result.width || TextMetrics.width + 2*10 + 2*(Result.pad || 0);
|
|
Result.height = Result.height || TextMetrics.height + 2*5 + 2*(Result.pad || 0);
|
|
return Result;
|
|
}
|
|
|
|
/**** ColorDemo ****/
|
|
|
|
function ColorDemo (Text, Options) {
|
|
function renderDemo (Details) {
|
|
let x = Details.x, Width = Details.w, halfWidth = Width/2;
|
|
let y = Details.y, Height = Details.h, halfHeight = Height/2;
|
|
let Padding = Details.pad || 0;
|
|
|
|
if (Details.font != null) { g.setFont(Details.font); }
|
|
g.setFontAlign(0,0);
|
|
|
|
g.setColor(Details.bg); // do not use "bgCol"!
|
|
g.fillRect(x+Padding, y+Padding, x+Width-Padding, y+Height-Padding);
|
|
|
|
g.setColor(Details.fg);
|
|
g.drawString(Details.label, x+halfWidth,y+halfHeight);
|
|
}
|
|
|
|
let Result = Object.assign((
|
|
Options == null ? {} : Object.assign({}, Options.common || {}, Options)
|
|
), {
|
|
type:'custom', render:renderDemo, label:Text || 'Test'
|
|
});
|
|
let TextMetrics;
|
|
if (! Result.width || ! Result.height) {
|
|
if (Result.font != null) { g.setFont(Result.font); }
|
|
TextMetrics = g.stringMetrics(Result.label);
|
|
}
|
|
|
|
Result.width = Result.width || TextMetrics.width + 2*2 + 2*(Result.pad || 0);
|
|
Result.height = Result.height || TextMetrics.height + 2*2 + 2*(Result.pad || 0);
|
|
return Result;
|
|
}
|
|
|
|
|
|
/**** ColorView ****/
|
|
|
|
function ColorView (Color, Options) {
|
|
function renderColorView (Details) {
|
|
let x = Details.x, Width = Details.w;
|
|
let y = Details.y, Height = Details.h;
|
|
let Padding = Details.pad || 0;
|
|
|
|
g.setColor('#000000');
|
|
g.drawRect(x+Padding,y+Padding, x+Width-Padding-1,y+Height-Padding-1);
|
|
|
|
g.setColor(Details.col);
|
|
g.fillRect(x+Padding+2, y+Padding+2, x+Width-Padding-3, y+Height-Padding-3);
|
|
}
|
|
|
|
let Result = Object.assign((
|
|
Options == null ? {} : Object.assign({}, Options.common || {}, Options)
|
|
), {
|
|
type:'custom', render:renderColorView, col:Color
|
|
});
|
|
Result.width = Math.max(10, Result.width || 10) + 2*(Result.pad || 0);
|
|
Result.height = Math.max(10, Result.height || 10) + 2*(Result.pad || 0);
|
|
return Result;
|
|
}
|
|
|
|
|
|
/**** ColorSelectionView ****/
|
|
|
|
function ColorSelectionView (Color, Options) {
|
|
function renderColorView (Details) {
|
|
let x = Details.x, Width = Details.w;
|
|
let y = Details.y, Height = Details.h;
|
|
let Padding = Details.pad || 0;
|
|
|
|
if (Details.selected) {
|
|
g.setColor(Details.selected ? '#FF0000' : '#000000');
|
|
g.fillRect(x+Padding,y+Padding, x+Width-Padding-1,y+Height-Padding-1);
|
|
|
|
g.setColor('#FFFFFF');
|
|
g.drawRect(x+Padding+4,y+Padding+4, x+Width-Padding-5,y+Height-Padding-5);
|
|
} else {
|
|
g.setColor('#000000');
|
|
g.drawRect(x+Padding+3,y+Padding+3, x+Width-Padding-4,y+Height-Padding-4);
|
|
}
|
|
|
|
g.setColor(Details.col);
|
|
g.fillRect(x+Padding+5, y+Padding+5, x+Width-Padding-6, y+Height-Padding-6);
|
|
}
|
|
|
|
let Result = Object.assign((
|
|
Options == null ? {} : Object.assign({}, Options.common || {}, Options)
|
|
), {
|
|
type:'custom', render:renderColorView, col:Color
|
|
});
|
|
Result.width = Math.max(10, Result.width || 10) + 2*(Result.pad || 0);
|
|
Result.height = Math.max(10, Result.height || 10) + 2*(Result.pad || 0);
|
|
return Result;
|
|
}
|
|
|
|
|
|
/**** EventConsumerAtPoint ****/
|
|
|
|
function EventConsumerAtPoint (HandlerName, x,y) {
|
|
let Layout = (activeLayout || {}).l;
|
|
if (Layout == null) { return; }
|
|
|
|
function ConsumerIn (Control) {
|
|
if (
|
|
(x < Control.x) || (x >= Control.x + Control.w) ||
|
|
(y < Control.y) || (y >= Control.y + Control.h)
|
|
) { return undefined; }
|
|
|
|
if (typeof Control[HandlerName] === 'function') { return Control; }
|
|
|
|
if (Control.c != null) {
|
|
let ControlList = Control.c;
|
|
for (let i = 0, l = ControlList.length; i < l; i++) {
|
|
let Consumer = ConsumerIn(ControlList[i]);
|
|
if (Consumer != null) { return Consumer; }
|
|
}
|
|
}
|
|
|
|
return undefined;
|
|
}
|
|
|
|
return ConsumerIn(Layout);
|
|
}
|
|
|
|
/**** dispatchTouchEvent ****/
|
|
|
|
function dispatchTouchEvent () {
|
|
function handleTouchEvent (Button, xy) {
|
|
let Control = EventConsumerAtPoint('onTouch', xy.x,xy.y);
|
|
if (Control != null) {
|
|
Control.onTouch(Control, Button, xy);
|
|
}
|
|
}
|
|
Bangle.on('touch',handleTouchEvent);
|
|
}
|
|
dispatchTouchEvent();
|
|
|
|
/**** dispatchStrokeEvent ****/
|
|
|
|
function dispatchStrokeEvent () {
|
|
function handleStrokeEvent (Coordinates) {
|
|
let Control = EventConsumerAtPoint('onStroke', Coordinates.xy[0],Coordinates.xy[1]);
|
|
if (Control != null) {
|
|
Control.onStroke(Control, Coordinates);
|
|
}
|
|
}
|
|
Bangle.on('stroke',handleStrokeEvent);
|
|
}
|
|
dispatchStrokeEvent();
|
|
|
|
let ScreenSet = {};
|
|
|
|
g.setFont12x20(); // does not seem to be respected in layout!
|
|
let leftColumnWidth = Math.max(
|
|
g.stringWidth('Normal '), g.stringWidth('Accented '), g.stringWidth('Hilighted ')
|
|
);
|
|
|
|
let StdFont = { font:'12x20' };
|
|
let legible = Object.assign({ col:'#000000', bgCol:'#FFFFFF' }, StdFont);
|
|
let leftAligned = Object.assign({ halign:-1, valign:0 }, legible);
|
|
let MainLabel = Object.assign({ pad:4, width:leftColumnWidth }, leftAligned);
|
|
let halfWidthButton = Object.assign({ pad:4, width:halfWidth }, legible);
|
|
|
|
ScreenSet['MainScreen'] = new Layout({
|
|
type:'v', c:[
|
|
Label('Current Theme', { common:legible, pad:8, bold:true, filly:1 }),
|
|
{ type:'h', c:[
|
|
Label('Normal', { common:MainLabel }),
|
|
ColorDemo(' Demo ',{ common:StdFont, pad:2, id:'NormalDemo' }),
|
|
] },
|
|
{ type:'h', c:[
|
|
Label('Accented', { common:MainLabel }),
|
|
ColorDemo(' Demo ',{ common:StdFont, pad:2, id:'AccentedDemo' }),
|
|
] },
|
|
{ type:'h', c:[
|
|
Label('Hilighted', { common:MainLabel }),
|
|
ColorDemo(' Demo ',{ common:StdFont, pad:2, id:'HilitedDemo' }),
|
|
] },
|
|
{ height:4 },
|
|
{ type:'h', c:[
|
|
Button('Exit', { common:halfWidthButton, onTouch:() => load() }),
|
|
Button('Config', { common:halfWidthButton, onTouch:() => gotoScreen('DetailSelectionScreen') })
|
|
], filly:1 }
|
|
]
|
|
});
|
|
|
|
let LabelWidth = Math.max(
|
|
g.stringWidth('Fg '), g.stringWidth('Fg2 '), g.stringWidth('FgH '),
|
|
g.stringWidth('Bg '), g.stringWidth('Bg2 '), g.stringWidth('BgH ')
|
|
);
|
|
let LabelHeight = g.stringMetrics('FgH').height;
|
|
|
|
let DetailLabel = Object.assign({ pad:4, width:LabelWidth }, leftAligned);
|
|
let DetailView = { width:30, height:LabelHeight, pad:2 };
|
|
|
|
ScreenSet['DetailSelectionScreen'] = new Layout({
|
|
type:'v', c:[
|
|
Label('Configure Detail', { font:'12x20', pad:8, col:'#000000', bgCol:'#FFFFFF', bold:true, filly:1 }),
|
|
{ type:'h', c:[
|
|
Label('fg', { common:DetailLabel, onTouch:() => configureDetail('fg') }),
|
|
ColorView(0, { common:DetailView, onTouch:() => configureDetail('fg'), id:'fgView' }),
|
|
{ width:20 },
|
|
Label('bg', { common:DetailLabel, onTouch:() => configureDetail('bg') }),
|
|
ColorView(0, { common:DetailView, onTouch:() => configureDetail('bg'), id:'bgView' }),
|
|
] },
|
|
{ type:'h', c:[
|
|
Label('fg2', { common:DetailLabel, onTouch:() => configureDetail('fg2') }),
|
|
ColorView(0, { common:DetailView, onTouch:() => configureDetail('fg2'), id:'fg2View' }),
|
|
{ width:20 },
|
|
Label('bg2', { common:DetailLabel, onTouch:() => configureDetail('bg2') }),
|
|
ColorView(0, { common:DetailView, onTouch:() => configureDetail('bg2'), id:'bg2View' }),
|
|
] },
|
|
{ type:'h', c:[
|
|
Label('fgH', { common:DetailLabel, onTouch:() => configureDetail('fgH') }),
|
|
ColorView(0, { common:DetailView, onTouch:() => configureDetail('fgH'), id:'fgHView' }),
|
|
{ width:20 },
|
|
Label('bgH', { common:DetailLabel, onTouch:() => configureDetail('bgH') }),
|
|
ColorView(0, { common:DetailView, onTouch:() => configureDetail('bgH'), id:'bgHView' }),
|
|
] },
|
|
{ type:'h', c:[
|
|
Button('Save', { common:halfWidthButton, onTouch:() => { applyChanges(); gotoScreen('MainScreen'); } }),
|
|
Button('Cancel', { common:halfWidthButton, onTouch:() => gotoScreen('MainScreen') })
|
|
], filly:1 },
|
|
]
|
|
});
|
|
|
|
let StdSelectionView = { width:40, height:40, pad:2 };
|
|
|
|
ScreenSet['ColorSelectionScreen'] = new Layout({
|
|
type:'v', c:[
|
|
Label('Choose Color', { font:'12x20', pad:8, col:'#000000', bgCol:'#FFFFFF', bold:true, filly:1 }),
|
|
{ type:'h', c:[
|
|
ColorSelectionView('#000000',{ common:StdSelectionView, id:'black',
|
|
onTouch:() => selectColor(0,0,0) }),
|
|
ColorSelectionView('#FF0000',{ common:StdSelectionView, id:'red',
|
|
onTouch:() => selectColor(1,0,0) }),
|
|
ColorSelectionView('#00FF00',{ common:StdSelectionView, id:'green',
|
|
onTouch:() => selectColor(0,1,0) }),
|
|
ColorSelectionView('#0000FF',{ common:StdSelectionView, id:'blue',
|
|
onTouch:() => selectColor(0,0,1) }),
|
|
] },
|
|
{ type:'h', c:[
|
|
ColorSelectionView('#FFFFFF',{ common:StdSelectionView, id:'white',
|
|
onTouch:() => selectColor(1,1,1) }),
|
|
ColorSelectionView('#FFFF00',{ common:StdSelectionView, id:'yellow',
|
|
onTouch:() => selectColor(1,1,0) }),
|
|
ColorSelectionView('#FF00FF',{ common:StdSelectionView, id:'magenta',
|
|
onTouch:() => selectColor(1,0,1) }),
|
|
ColorSelectionView('#00FFFF',{ common:StdSelectionView, id:'cyan',
|
|
onTouch:() => selectColor(0,1,1) }),
|
|
] },
|
|
{ height:4 },
|
|
{ type:'h', c:[
|
|
Button('Back', { common:halfWidthButton, onTouch:() => gotoScreen('DetailSelectionScreen') }),
|
|
Button('Preview', { common:halfWidthButton, onTouch:() => gotoScreen('ThemePreviewScreen') })
|
|
], filly:1 },
|
|
]
|
|
});
|
|
|
|
ScreenSet['ThemePreviewScreen'] = new Layout({
|
|
type:'v', c:[
|
|
Label('Theme Preview', { common:legible, bold:true, filly:1 }),
|
|
{ type:'h', c:[
|
|
Label('Normal', { common:MainLabel }),
|
|
ColorDemo(' Test ',{ common:StdFont, pad:2, id:'NormalTest' }),
|
|
] },
|
|
{ type:'h', c:[
|
|
Label('Accented', { common:MainLabel }),
|
|
ColorDemo(' Test ',{ common:StdFont, pad:2, id:'AccentedTest' }),
|
|
] },
|
|
{ type:'h', c:[
|
|
Label('Hilighted', { common:MainLabel }),
|
|
ColorDemo(' Test ',{ common:StdFont, pad:2, id:'HilitedTest' }),
|
|
] },
|
|
{ height:4 },
|
|
{ type:'h', c:[
|
|
Button('Back', { common:legible, pad:4, onTouch:() => gotoScreen('ColorSelectionScreen') })
|
|
], filly:1 }
|
|
]
|
|
});
|
|
|
|
|
|
/**** applyChanges ****/
|
|
|
|
function applyChanges () {
|
|
let pendingBg = pendingTheme.bg;
|
|
let R = ((pendingBg >> 11) & 0b11111) / 0b11111;
|
|
let G = ((pendingBg >> 5) & 0b111111) / 0b111111;
|
|
let B = (pendingBg & 0b11111) / 0b11111;
|
|
pendingTheme.dark = (0.2126*R + 0.7152*G + 0.0722*B < 0.5);
|
|
|
|
activeTheme = Object.assign(activeTheme,pendingTheme);
|
|
|
|
let globalSettings = Object.assign(
|
|
require('Storage').readJSON('setting.json', true) || {},
|
|
{ theme:activeTheme }
|
|
);
|
|
require('Storage').writeJSON('setting.json', globalSettings);
|
|
}
|
|
|
|
/**** configureDetail ****/
|
|
|
|
function configureDetail (Detail) {
|
|
chosenDetail = Detail;
|
|
gotoScreen('ColorSelectionScreen');
|
|
}
|
|
|
|
/**** updateColorSelection ****/
|
|
|
|
function updateColorSelection () {
|
|
let selectedColor = pendingTheme[chosenDetail];
|
|
|
|
for (let Key in normalizedColorSet) {
|
|
if (normalizedColorSet.hasOwnProperty(Key)) {
|
|
activeLayout[Key].selected = (selectedColor === normalizedColorSet[Key]);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**** selectColor ****/
|
|
|
|
function selectColor (R,G,B) {
|
|
let selectedColor = g.toColor(R,G,B);
|
|
pendingTheme[chosenDetail] = selectedColor;
|
|
|
|
updateColorSelection();
|
|
g.clear();
|
|
activeLayout.render();
|
|
}
|
|
|
|
/**** gotoScreen ****/
|
|
|
|
let activeLayout;
|
|
|
|
function gotoScreen (ScreenName) {
|
|
activeLayout = ScreenSet[ScreenName];
|
|
|
|
switch (ScreenName) {
|
|
case 'MainScreen':
|
|
activeLayout['NormalDemo'].fg = activeTheme.fg;
|
|
activeLayout['NormalDemo'].bg = activeTheme.bg;
|
|
activeLayout['AccentedDemo'].fg = activeTheme.fg2;
|
|
activeLayout['AccentedDemo'].bg = activeTheme.bg2;
|
|
activeLayout['HilitedDemo'].fg = activeTheme.fgH;
|
|
activeLayout['HilitedDemo'].bg = activeTheme.bgH;
|
|
break;
|
|
case 'DetailSelectionScreen':
|
|
activeLayout['fgView'].col = pendingTheme.fg;
|
|
activeLayout['bgView'].col = pendingTheme.bg;
|
|
activeLayout['fg2View'].col = pendingTheme.fg2;
|
|
activeLayout['bg2View'].col = pendingTheme.bg2;
|
|
activeLayout['fgHView'].col = pendingTheme.fgH;
|
|
activeLayout['bgHView'].col = pendingTheme.bgH;
|
|
break;
|
|
case 'ColorSelectionScreen':
|
|
updateColorSelection();
|
|
break;
|
|
case 'ThemePreviewScreen':
|
|
activeLayout['NormalTest'].fg = pendingTheme.fg;
|
|
activeLayout['NormalTest'].bg = pendingTheme.bg;
|
|
activeLayout['AccentedTest'].fg = pendingTheme.fg2;
|
|
activeLayout['AccentedTest'].bg = pendingTheme.bg2;
|
|
activeLayout['HilitedTest'].fg = pendingTheme.fgH;
|
|
activeLayout['HilitedTest'].bg = pendingTheme.bgH;
|
|
}
|
|
|
|
g.setColor('#000000'); g.setBgColor('#FFFFFF'); // assert legibility
|
|
g.clear();
|
|
|
|
activeLayout.render();
|
|
}
|
|
gotoScreen('MainScreen');
|
|
|