feat: notes app

Author: g.gorbovskoy

.gitignore

@@ -1,4 +1,6 @@
 .DS_Store
 .vscode
 node_modules
-yarn.lock
+yarn.lock
+build
+dist

app.json

@@ -2,11 +2,11 @@
   "app": {
     "appId": 1973010481,
     "appIdType": 0,
-    "appName": "notes",
+    "appName": "BandNotes",
     "appType": "app",
     "description": "",
     "icon": "icon.png",
-    "vender": "root",
+    "vender": "gbowsky",
     "version": {
       "code": 1,
       "name": "1.0.0"
@@ -18,25 +18,21 @@
   "module": {
     "page": {
       "pages": [
-        "page/IndexPage"
-      ],
-      "window": {
-        "backgroundColor": "#eeeeee",
-        "backgroundTextStyle": "light",
-        "navigationBarBackgroundColor": "#ffffff",
-        "navigationBarTextStyle": "black",
-        "navigationBarTitleText": ""
-      }
+        "page/IndexPage",
+        "page/ImagePage",
+        "page/SettingsPage"
+      ]
     }
   },
-  "permissions": [
-    "gps"
-  ],
+  "permissions": [],
   "runtime": {
     "apiVersion": {
       "compatible": "1.0.0",
       "minVersion": "1.0.0",
       "target": "1.0.1"
     }
-  }
+  },
+  "externalFilesList": [
+    "/storage/bn_settings.json"
+  ]
 }

assets/icon.png

@@ -0,0 +1,4 @@
+[{
+  "name": "Glasses",
+  "content": "She needed glasses. It wasn't that she couldn't see without them, but what she could see with them. When she wore glasses, her eyes focused so deeply that she could see not only the physical but also beyond. It was like a superpower. But she needed glasses."
+}]

assets/icons/Slider/contrast.png

@@ -1,9 +1,10 @@
+// Export module
+let currentScreen = null;
 let __$$app$$__ = __$$hmAppManager$$__.currentApp;
-__$$module$$__ = __$$app$$__.current;
+let __$$module$$__ = __$$app$$__.current;
 __$$module$$__.module = DeviceRuntimeCore.Page({
-  onInit() {
+  onInit(p) {
     new IndexPage().start();
   },
-  onDestroy() {
-  }
+  onDestroy: () => {}
 });

assets/icons/Slider/size.png

@@ -0,0 +1,15 @@
+export const DEFAULT_SETTINGS = {
+  contrast: 0,
+  fontSize: 20,
+  caffeinate: false,
+};
+
+export const PLACEHOLDER = "Lorem Ipsum Dolor Sit Amet";
+
+export const CONTRAST = [
+  0x404040,
+  0x636363,
+  0xa6a6a6,
+  0xd7d7d7,
+  0xffffff,
+]

assets/icons/accept.png

@@ -0,0 +1,230 @@
+export class FsUtils {
+	static writeText(fn, data) {
+		if(!fn.startsWith("/storage")) fn = FsUtils.fullPath(fn);
+
+		try {
+			hmFS.remove(fn);
+		} catch(e) {}
+
+		const buffer = FsUtils.strToUtf8(data);
+		const f = FsUtils.open(fn, hmFS.O_WRONLY | hmFS.O_CREAT);
+		hmFS.write(f, buffer, 0, buffer.byteLength);
+		hmFS.close(f);
+	}
+
+	static read(fn, limit=false) {
+		if(!fn.startsWith("/storage")) fn = FsUtils.fullPath(fn);
+		const [st, e] = FsUtils.stat(fn);
+		const f = FsUtils.open(fn, hmFS.O_RDONLY);
+
+		const size = limit ? limit : st.size;
+		const data = new ArrayBuffer(size);
+		hmFS.read(f, data, 0, size);
+		hmFS.close(f);
+
+		return data;
+	}
+
+	static fetchTextFile(fn, limit=false) {
+		const data = FsUtils.read(fn, limit);
+
+		const view = new Uint8Array(data);
+		let str = "";
+
+		return FsUtils.Utf8ArrayToStr(view);
+	}
+
+	static stat(path) {
+		path = FsUtils.fixPath(path);
+    return hmFS.stat_asset(path);
+  }
+
+  static fixPath(path) {
+    if(path.startsWith("/storage")) {
+      const statPath = "../../../" + path.substring(9);
+      return statPath;
+    }
+    return path;
+  }
+
+	static open(path, m) {
+      if(path.startsWith("/storage")) {
+        const statPath = "../../../" + path.substring(9);
+        return hmFS.open_asset(statPath, m);
+      }
+
+      return hmFS.open(path, m);
+	}
+
+	static fetchJSON(fn) {
+		const text = FsUtils.fetchTextFile(fn);
+		return JSON.parse(text);
+	}
+
+	static copy(source, dest) {
+		try {
+			hmFS.remove(dest);
+		} catch(e) {}
+
+		const buffer = FsUtils.read(source);
+		const f = FsUtils.open(dest, hmFS.O_WRONLY | hmFS.O_CREAT);
+		hmFS.write(f, buffer, 0, buffer.byteLength);
+		hmFS.close(f);
+	}
+
+	static isFolder(path) {
+	  const [st, e] = FsUtils.stat(path);
+	  return (st.mode & 32768) == 0;
+	}
+
+	static getSelfPath() {
+		if(!FsUtils.selfPath) {
+			const pkg = hmApp.packageInfo();
+			const idn = pkg.appId.toString(16).padStart(8, "0").toUpperCase();
+			return "/storage/js_" + pkg.type + "s/" + idn;
+		}
+
+		return FsUtils.selfPath;
+	}
+
+	static fullPath(path) {
+		return FsUtils.getSelfPath() + "/assets/" + path;
+	}
+
+	static rmTree(path) {
+		if(!path.startsWith("/storage")) path = FsUtils.fullPath(path);
+
+    const [files, e] = hmFS.readdir(path);
+    for(let i in files) {
+      FsUtils.rmTree(path + "/" + files[i]);
+    }
+
+    hmFS.remove(path);
+	}
+
+	static copyTree(source, dest, removeSource) {
+		if(!source.startsWith("/storage")) source = FsUtils.fullPath(source);
+		if(!dest.startsWith("/storage")) dest = FsUtils.fullPath(dest);
+
+		if(!FsUtils.isFolder(source)) {
+			console.log("copy", source, "->", dest);
+			FsUtils.copy(source, dest);
+		} else {
+	    const [files, e] = hmFS.readdir(source);
+	    hmFS.mkdir(dest);
+	    for(let i in files) {
+	      FsUtils.copyTree(source + "/" + files[i], dest + "/" + files[i], removeSource);
+	    }
+		}
+
+    if(removeSource) {
+    	console.log("Delete", source);
+    	hmFS.remove(source);
+    }
+	}
+
+	static sizeTree(path) {
+		if(!path.startsWith("/storage")) path = FsUtils.fullPath(path);
+
+    const [files, e] = hmFS.readdir(path);
+    let value = 0;
+
+    for(let fn in files) {
+      const file = path + "/" + files[fn];
+      const statPath = "../../../" + file.substring(9);
+      const [st, e] = hmFS.stat_asset(statPath);
+      value += st.size ? st.size : FsUtils.sizeTree(file);
+    }
+
+    return value;
+	}
+
+	// https://stackoverflow.com/questions/18729405/how-to-convert-utf8-string-to-byte-array
+	static strToUtf8(str) {
+    var utf8 = [];
+    for (var i=0; i < str.length; i++) {
+        var charcode = str.charCodeAt(i);
+        if (charcode < 0x80) utf8.push(charcode);
+        else if (charcode < 0x800) {
+            utf8.push(0xc0 | (charcode >> 6), 
+                      0x80 | (charcode & 0x3f));
+        } else if (charcode < 0xd800 || charcode >= 0xe000) {
+            utf8.push(0xe0 | (charcode >> 12), 
+                      0x80 | ((charcode>>6) & 0x3f), 
+                      0x80 | (charcode & 0x3f));
+        } else {
+            i++;
+            charcode = 0x10000 + (((charcode & 0x3ff)<<10)
+                      | (str.charCodeAt(i) & 0x3ff));
+            utf8.push(0xf0 | (charcode >>18), 
+                      0x80 | ((charcode>>12) & 0x3f), 
+                      0x80 | ((charcode>>6) & 0x3f), 
+                      0x80 | (charcode & 0x3f));
+        }
+    }
+
+    return new Uint8Array(utf8).buffer;
+	}
+
+	// source: https://stackoverflow.com/questions/13356493/decode-utf-8-with-javascript
+	static Utf8ArrayToStr(array) {
+		var out, i, len, c;
+		var char2, char3;
+
+		out = "";
+		len = array.length;
+		i = 0;
+		while (i < len) {
+			c = array[i++];
+			switch (c >> 4) {
+				case 0:
+				case 1:
+				case 2:
+				case 3:
+				case 4:
+				case 5:
+				case 6:
+				case 7:
+					// 0xxxxxxx
+					out += String.fromCharCode(c);
+					break;
+				case 12:
+				case 13:
+					// 110x xxxx   10xx xxxx
+					char2 = array[i++];
+					out += String.fromCharCode(
+						((c & 0x1f) << 6) | (char2 & 0x3f)
+					);
+					break;
+				case 14:
+					// 1110 xxxx  10xx xxxx  10xx xxxx
+					char2 = array[i++];
+					char3 = array[i++];
+					out += String.fromCharCode(
+						((c & 0x0f) << 12) |
+							((char2 & 0x3f) << 6) |
+							((char3 & 0x3f) << 0)
+					);
+					break;
+			}
+		}
+
+		return out;
+	}
+
+	static printBytes(val) {
+		if(this.fsUnitCfg === undefined)
+			this.fsUnitCfg = hmFS.SysProGetBool("mmk_tb_fs_unit");
+
+    const options = this.fsUnitCfg ? ["B", "KiB", "MiB"] : ["B", "KB", "MB"];
+  	const base = this.fsUnitCfg ? 1024 : 1000;
+
+    let curr = 0;
+    while (val > 800 && curr < options.length) {
+      val = val / base;
+      curr++;
+    }
+
+    return Math.round(val * 100) / 100 + " " + options[curr];
+  }
+}

assets/icons/cancel.png

@@ -0,0 +1,31 @@
+import { DEFAULT_SETTINGS } from "./defaults";
+import { FsUtils } from "./fs";
+
+const SETTINGS_PATH = "/storage/bn_settings.json";
+
+export function loadSettings() {
+  let result;
+
+  try {
+    result = FsUtils.fetchJSON(SETTINGS_PATH);
+  } catch {
+    result = DEFAULT_SETTINGS;
+    FsUtils.writeText(SETTINGS_PATH, JSON.stringify(DEFAULT_SETTINGS));
+  }
+
+  return result;
+}
+
+export function saveSettings({
+  fontSize,
+  caffeinate,
+  contrast,
+}) {
+  const newSettings = {
+    contrast,
+    fontSize,
+    caffeinate,
+  };
+
+  FsUtils.writeText(SETTINGS_PATH, JSON.stringify(newSettings));
+}

assets/icons/chevron_back.png

@@ -0,0 +1,47 @@
+export class TouchEventManager {
+	ontouch = null;
+	onlongtouch = null;
+	onlongtouchrepeatly = null;
+	ontouchdown = null;
+	ontouchup = null;
+	ontouchmove = null;
+
+	constructor(widget) {
+		this._init(widget);
+	}
+
+	_init(widget) {
+		let handleClick = true;
+		let timerLongTap = -1;
+
+		widget.addEventListener(hmUI.event.CLICK_UP, (e) => {
+			if(this.ontouchup) this.ontouchup(e);
+			if(handleClick && this.ontouch) this.ontouch(e);
+
+			handleClick = false;
+			timer.stopTimer(timerLongTap);
+		});
+
+		widget.addEventListener(hmUI.event.CLICK_DOWN, (e) => {
+			if(this.ontouchdown) this.ontouchdown(e);
+
+			handleClick = true;
+			timerLongTap = timer.createTimer(750, 150, () => {
+				if(handleClick && this.onlongtouch) {
+					this.onlongtouch(e);
+					handleClick = false;
+				}
+
+				if(this.onlongtouchrepeatly) 
+					this.onlongtouchrepeatly(e);
+			})
+		});
+
+		widget.addEventListener(hmUI.event.MOVE, (e) => {
+			if(this.ontouchmove) this.ontouchmove(e);
+			
+			handleClick = false;
+			timer.stopTimer(timerLongTap);
+		})
+	}
+}

assets/icons/settings.png

@@ -0,0 +1,224 @@
+import { TouchEventManager } from './touch';
+import { 
+  UI_HEADER_GROUP_WIDGET_STYLE,
+  UI_HEADER_TITLE_FULL_WIDGET_STYLE,
+  UI_HEADER_SUBTITLE_WIDGET_STYLE,
+  UI_HEADER_TITLE_ONLY_WIDGET_STYLE,
+  UI_SIMPLELIST_DIMENS_STYLE,
+  UI_SIMPLELIST_CONTROL_SETTINGS,
+  UI_ASSET_SETTINGS_56,
+  UI_ASSET_ACCEPT_56,
+  UI_ASSET_CANCEL_56,
+  UI_ICON_56_BOTTOM_DIMENS,
+  UI_BUTTON_WIDGET_STYLE
+} from './ui.styles';
+
+export function Header({
+  title = 'Title',
+  subtitle,
+  onBack,
+}) {
+  const group = hmUI.createWidget(hmUI.widget.GROUP, UI_HEADER_GROUP_WIDGET_STYLE);
+  
+  if (subtitle) {
+    group.createWidget(hmUI.widget.TEXT, {
+      ...UI_HEADER_TITLE_FULL_WIDGET_STYLE,
+      text: title,
+    });
+
+    group.createWidget(hmUI.widget.TEXT, {
+      ...UI_HEADER_SUBTITLE_WIDGET_STYLE,
+      text: subtitle,
+    });
+
+    return group;
+  }
+
+  if (onBack) {
+    group.createWidget(hmUI.widget.IMG, {
+      x: 6,
+      y: 70,
+      w: 10,
+      h: 18,
+      src: 'icons/chevron_back.png'
+    });
+
+    group.createWidget(hmUI.widget.TEXT, {
+      ...UI_HEADER_TITLE_ONLY_WIDGET_STYLE,
+      x: 16,
+      w: 192 - 16,
+      text: title,
+    });
+
+    const tappable = group.createWidget(hmUI.widget.IMG, {
+      x: 0,
+      y: 0,
+      w: 192,
+      h: 96,
+      src: '',
+    });
+
+    const touchManager = new TouchEventManager(tappable);
+    touchManager.ontouch = onBack;
+
+    return group;
+  }
+
+  group.createWidget(hmUI.widget.TEXT, {
+    ...UI_HEADER_TITLE_ONLY_WIDGET_STYLE,
+    text: title,
+  });
+  
+  return group;
+}
+
+export function Bottom({ icon, onClick }) {
+  let style = {
+    text: '',
+    click_func: onClick,
+    ...UI_ICON_56_BOTTOM_DIMENS,
+  }
+
+  hmUI.createWidget(hmUI.widget.FILL_RECT, {
+    ...UI_ICON_56_BOTTOM_DIMENS,
+  })
+
+  switch (icon) {
+    case 'settings':
+      style.normal_src = UI_ASSET_SETTINGS_56;
+      style.press_src = UI_ASSET_SETTINGS_56;
+      break;
+    case 'cancel':
+      style.normal_src = UI_ASSET_CANCEL_56;
+      style.press_src = UI_ASSET_CANCEL_56;
+      break;
+    default:
+      style.normal_src = UI_ASSET_ACCEPT_56; 
+      style.press_src = UI_ASSET_ACCEPT_56; 
+  }
+
+  return hmUI.createWidget(hmUI.widget.BUTTON, style);
+}
+
+export function SimpleList(
+  list = [],
+  onClick = (list, index) => { console.log(index) },
+  paddingTop = 0,
+  paddingBottom = 0,
+) {
+  return hmUI.createWidget(hmUI.widget.SCROLL_LIST, {
+    ...UI_SIMPLELIST_DIMENS_STYLE({ paddingTop, paddingBottom }),
+    ...UI_SIMPLELIST_CONTROL_SETTINGS,
+    data_array: list,
+    data_count: list.length,
+    item_click_func: onClick,
+    data_type_config: [{
+      start: 0,
+      end: list.length - 1,
+      type_id: 1
+    }],
+    data_type_config_count: 1
+  });
+}
+
+export function Slider({
+  x,
+  y,
+  mode,
+  onIncrement,
+  onDecrement,
+}) {
+  const group = hmUI.createWidget(hmUI.widget.GROUP, {
+    x,
+    y,
+    w: 192,
+    h: 64,
+  });
+
+  group.createWidget(hmUI.widget.FILL_RECT, {
+    color: 0x1c1c1c,
+    radius: 16,
+    x: 0,
+    y: 0,
+    w: 192,
+    h: 64,
+  })
+
+  group.createWidget(hmUI.widget.BUTTON, {
+    x: 0,
+    y: 0,
+    w: 192 / 3,
+    h: 64,
+    text: '-',
+    text_size: 24,
+    ...UI_BUTTON_WIDGET_STYLE,
+    click_func: onDecrement,
+  });
+
+  group.createWidget(hmUI.widget.FILL_RECT, {
+    color: 0x3c3c3c,
+    radius: 0,
+    x: 192 / 3 - 2,
+    y: (64 - 36) / 2,
+    w: 1,
+    h: 36,
+  })
+
+  switch (mode) {
+    case 'size':
+      group.createWidget(hmUI.widget.IMG, {
+        x: 192 / 3,
+        y: 0,
+        w: 192 / 3,
+        h: 64,
+        pos_y: (64 - 19) / 2,
+        pos_x: (64 - 30) / 2,
+        src: 'icons/Slider/size.png'
+      });
+      break
+    default:
+    case 'contrast':
+      group.createWidget(hmUI.widget.IMG, {
+        x: 192 / 3,
+        y: 0,
+        w: 192 / 3,
+        h: 64,
+        pos_y: (64 - 18) / 2,
+        pos_x: (64 - 34) / 2,
+        src: 'icons/Slider/contrast.png'
+      });
+  }
+
+  group.createWidget(hmUI.widget.FILL_RECT, {
+    color: 0x3c3c3c,
+    radius: 0,
+    x: 192 / 3 * 2 - 1,
+    y: (64 - 36) / 2,
+    w: 1,
+    h: 36,
+  })
+
+
+  group.createWidget(hmUI.widget.BUTTON, {
+    x: 192 / 3 * 2,
+    y: 0,
+    w: 192 / 3,
+    h: 64,
+    text: '+',
+    text_size: 24,
+    ...UI_BUTTON_WIDGET_STYLE,
+    click_func: onIncrement,
+  });
+}
+
+export function Button(x, y, w, h, text, onClick) {
+  return hmUI.createWidget(hmUI.widget.BUTTON, {
+    click_func: onClick,
+    text: text,
+    x: x,
+    y: y,
+    w: w,
+    h: h,
+    ...UI_BUTTON_WIDGET_STYLE,
+  });
+}

assets/notes.json

@@ -0,0 +1,135 @@
+const UI_WIDTH = 192;
+const UI_HEIGHT = 490;
+const UI_ROUND_ZONE_HEIGHT = 96;
+
+const UI_CHEVRON_WIDTH = 10;
+const UI_CORNER_RADIUS = 16;
+const UI_VERTICAL_SPACING = 12;
+const UI_CONTROL_HEIGHT = 64;
+
+const UI_TITLE_FONT_SIZE = 24;
+const UI_SUBTITLE_FONT_SIZE = 20;
+const UI_PRIMARY_FOREGROUND = 0xFFFFFF;
+const UI_SECONDARY_FOREGROUND = 0xC1C1C1;
+
+const UI_SECONDARY_BACKGROUND = 0x1C1C1C;
+const UI_ACTIVE_BACKGROUND = 0x2C2C2C;
+
+const UI_TITLE_TEXT_STYLE = {
+  text_size: UI_TITLE_FONT_SIZE,
+  align_h: hmUI.align.CENTER_H,
+  align_v: hmUI.align.BOTTOM,
+  color: UI_PRIMARY_FOREGROUND,
+};
+
+const UI_SUBTITLE_TEXT_STYLE = {
+  text_size: UI_SUBTITLE_FONT_SIZE,
+  align_h: hmUI.align.CENTER_H,
+  align_v: hmUI.align.CENTER_V,
+  color: UI_SECONDARY_FOREGROUND,
+};
+
+export const UI_HEADER_GROUP_WIDGET_STYLE = {
+  h: UI_ROUND_ZONE_HEIGHT,
+  w: UI_WIDTH,
+  x: 0,
+  y: 0,
+};
+
+const UI_HEADER_TITLE_W_SUB_DIMENS_STYLE = {
+  w: UI_WIDTH,
+  h: UI_ROUND_ZONE_HEIGHT - UI_SUBTITLE_FONT_SIZE,
+  x: 0,
+  y: 0,
+};
+
+const UI_HEADER_SUBTITLE_DIMENS_STYLE = {
+  w: UI_WIDTH,
+  h: UI_SUBTITLE_FONT_SIZE,
+  x: 0,
+  y: UI_HEADER_TITLE_W_SUB_DIMENS_STYLE.h,
+};
+
+/* Header({}) */
+
+export const UI_HEADER_TITLE_FULL_WIDGET_STYLE = {
+  ...UI_TITLE_TEXT_STYLE,
+  ...UI_HEADER_TITLE_W_SUB_DIMENS_STYLE,
+};
+
+export const UI_HEADER_SUBTITLE_WIDGET_STYLE = {
+  ...UI_SUBTITLE_TEXT_STYLE,
+  ...UI_HEADER_SUBTITLE_DIMENS_STYLE,
+};
+
+export const UI_HEADER_TITLE_ONLY_WIDGET_STYLE = {
+  ...UI_TITLE_TEXT_STYLE,
+  ...UI_HEADER_GROUP_WIDGET_STYLE,
+};
+
+/* SimpleList({}) */
+
+const UI_SIMPLELIST_TEXT_VIEW_STYLE = {
+  x: 0,
+  y: 0,
+  w: UI_WIDTH,
+  h: UI_CONTROL_HEIGHT,
+  key: 'name',
+  color: UI_PRIMARY_FOREGROUND,
+  text_size: UI_TITLE_FONT_SIZE,
+}
+
+const UI_SIMPLELIST_CONTROL_STYLE = {
+  type_id: 1,
+  item_bg_color: UI_SECONDARY_BACKGROUND,
+  item_bg_radius: UI_CORNER_RADIUS,
+  text_view: [UI_SIMPLELIST_TEXT_VIEW_STYLE],
+  text_view_count: 1,
+  item_height: UI_CONTROL_HEIGHT,
+}
+
+export const UI_SIMPLELIST_CONTROL_SETTINGS = {
+  item_space: UI_VERTICAL_SPACING,
+  item_config: [UI_SIMPLELIST_CONTROL_STYLE],
+  item_config_count: 1,
+}
+
+export const UI_SIMPLELIST_DIMENS_STYLE = ({paddingTop, paddingBottom}) => ({
+  x: paddingTop,
+  y: 96 + paddingTop,
+  h: UI_HEIGHT - UI_ROUND_ZONE_HEIGHT - paddingTop - paddingBottom,
+  w: 192,
+})
+
+/* Button({}) */
+
+export const UI_BUTTON_WIDGET_STYLE = {
+  normal_color: UI_SECONDARY_BACKGROUND,
+  press_color: UI_ACTIVE_BACKGROUND,
+  radius: UI_CORNER_RADIUS,
+}
+
+/* Top and bottom buttons */
+
+export const UI_ICON_56_SIZES = {
+  w: 56,
+  h: 56,
+};
+
+export const UI_ICON_56_TOP_DIMENS = {
+  x: 68,
+  y: 26,
+  ...UI_ICON_56_SIZES,
+};
+
+export const UI_ICON_56_BOTTOM_DIMENS = {
+  x: 0,
+  y: UI_HEIGHT - UI_ROUND_ZONE_HEIGHT,
+  w: UI_WIDTH,
+  h: UI_ROUND_ZONE_HEIGHT,
+  color: UI_SECONDARY_BACKGROUND,
+};
+
+export const UI_ASSET_CANCEL_56 = 'icons/cancel.png';
+export const UI_ASSET_ACCEPT_56 = 'icons/accept.png';
+export const UI_ASSET_SETTINGS_56 = 'icons/settings.png';

entrypoint.js

@@ -1,6 +1,7 @@
 {
   "dependencies": {},
   "devDependencies": {
+    "esbuild": "^0.17.0",
     "zeppos-device-types-v1": "^1.0.9"
   }
 }

lib/defaults.js

@@ -1,23 +1,38 @@
+import { FsUtils } from "../lib/fs";
+import { Bottom, Header, SimpleList } from "../lib/ui";
+
 class IndexPage {
-    start() {
-        hmUI.createWidget(hmUI.widget.TEXT, {
-            x: 0,
-            y: 0,
-            w: 196,
-            h: 96,
-            text: 'hello world',
-            fontSize: 16,
-            align_h: hmUI.align.CENTER_H,
-            align_v: hmUI.align.CENTER_V,
-            color: 0xffffff,
-          });
-    }
+  openSettings() {
+    hmApp.gotoPage({
+      url: 'page/SettingsPage',
+    });
+  }
+  openNote(index) {
+    hmApp.gotoPage({
+      url: 'page/NotePage',
+      param: index,
+    });
+  }
+  start() {
+    this.data = FsUtils.fetchJSON("notes.json");
+
+    Header({
+      title: 'BandNotes',
+    })
+    SimpleList(this.data, (_, index) => {
+      this.openNote(index);
+    }, 0, 96);
+
+    Bottom({ icon: 'settings', onClick: () => {
+      this.openSettings();
+    }});
+  }
 }
 
 let __$$app$$__ = __$$hmAppManager$$__.currentApp;
 __$$module$$__ = __$$app$$__.current;
 __$$module$$__.module = DeviceRuntimeCore.Page({
-  onInit(p) {
+  onInit() {
     new IndexPage().start();
   }
 });

lib/fs.js

@@ -0,0 +1,44 @@
+import { CONTRAST } from "../lib/defaults";
+import { FsUtils } from "../lib/fs";
+import { loadSettings } from "../lib/settings";
+import { Header } from "../lib/ui";
+
+class NotePage {
+  constructor(index) {
+    this.start(FsUtils.fetchJSON("notes.json")[index]);
+  }
+
+  start(note) {
+    const { fontSize, contrast } = loadSettings();
+    const { name, content } = note;
+    const { height } = hmUI.getTextLayout(content, {
+      text_size: fontSize,
+      text_width: 192,
+      wrapped: 1,
+    });
+
+    Header({
+      title: name,
+      leftIcon: true,
+    });
+
+    hmUI.createWidget(hmUI.widget.TEXT, {
+      x: 0,
+      y: 96,
+      h: height + 96,
+      w: 192,
+      text: content,
+      color: CONTRAST[contrast],
+      text_size: fontSize,
+      text_style: hmUI.text_style.WRAP,
+    });
+  }
+}
+
+let __$$app$$__ = __$$hmAppManager$$__.currentApp;
+__$$module$$__ = __$$app$$__.current;
+__$$module$$__.module = DeviceRuntimeCore.Page({
+  onInit(index) {
+    new NotePage(index);
+  }
+});

lib/settings.js

@@ -0,0 +1,84 @@
+import { CONTRAST, PLACEHOLDER } from "../lib/defaults";
+import { loadSettings, saveSettings } from "../lib/settings";
+import { Bottom, Header, Slider } from "../lib/ui";
+
+class SettingsPage {
+  onSizeDecrement() {
+    if (this.settings.fontSize >= 14) {
+      this.settings.fontSize -= 2;
+      this.text.setProperty(hmUI.prop.TEXT_SIZE, this.settings.fontSize);
+    }
+  }
+
+  onSizeIncrement() {
+    if (this.settings.fontSize <= 32) {
+      this.settings.fontSize += 2;
+      this.text.setProperty(hmUI.prop.TEXT_SIZE, this.settings.fontSize);
+    }
+  }
+
+  onContrastDecrement() {
+    if (this.settings.contrast - 1 >= 0) {
+      this.settings.contrast --;
+      this.text.setProperty(hmUI.prop.COLOR, CONTRAST[this.settings.contrast]);
+    }
+  }
+
+  onContrastIncrement() {
+    if (this.settings.contrast + 1 <= 4) {
+      this.settings.contrast ++;
+      this.text.setProperty(hmUI.prop.COLOR, CONTRAST[this.settings.contrast]);
+    }
+  }
+
+  start() {
+    this.settings = loadSettings();
+
+    Header({
+      title: 'Settings',
+      onBack: () => hmApp.goBack(),
+    })
+
+    this.text = hmUI.createWidget(hmUI.widget.TEXT, {
+      x: 0,
+      y: 96 + 12,
+      h: 100,
+      w: 192,
+      text: PLACEHOLDER,
+      text_size: this.settings.fontSize,
+      color: CONTRAST[this.settings.contrast],
+      text_style: hmUI.text_style.WRAP,
+    });
+
+    Slider({
+      x: 0,
+      y: 96 + 112 + 12,
+      onIncrement: () => this.onSizeIncrement(),
+      onDecrement: () => this.onSizeDecrement(),
+      mode: 'size'
+    })
+
+    Slider({
+      x: 0,
+      y: 96 + 112 + 12 + 64 + 12,
+      onIncrement: () => this.onContrastIncrement(),
+      onDecrement: () => this.onContrastDecrement(),
+      mode: 'contrast'
+    })
+
+    Bottom({
+      onClick: () => {
+        saveSettings(this.settings);
+        hmApp.goBack();
+      }
+    });
+  }
+}
+
+let __$$app$$__ = __$$hmAppManager$$__.currentApp;
+__$$module$$__ = __$$app$$__.current;
+__$$module$$__.module = DeviceRuntimeCore.Page({
+  onInit(p) {
+    new SettingsPage().start();
+  }
+});

lib/touch.js

@@ -1,4 +1,7 @@
 {
-    "esbuild": false,
-    "esbuild_params": "--bundle"
+    "esbuild": true,
+    "esbuild_params": "--bundle",
+    "adb_install": true,
+    "adb_path": "/storage/emulated/0/Download/",
+    "add_preview_asset": true
 }