diff --git a/apps.json b/apps.json index eb8a7e5dd..28798fa12 100644 --- a/apps.json +++ b/apps.json @@ -2793,8 +2793,8 @@ "name": "Test User Input", "shortName":"Test User Input", "icon": "app.png", - "version":"0.03", - "description": "Basic app to test the bangle.js input interface. It displays the user action in text or an on/off switch image for swipe movement.", + "version":"0.04", + "description": "Basic app to test the bangle.js input interface. It displays the user action in text, an option round element or an on/off switch image for swipe movements.", "readme": "README.md", "tags": "input,interface,buttons,touch", "storage": [ @@ -2855,5 +2855,30 @@ "storage": [ {"name":"widhrt.wid.js","url":"widget.js"} ] +}, +{ "id": "countdowntimer", + "name" : "Countdown Timer", + "icon": "countdowntimer.png", + "version": "0.01", + "description": "A simple countdown timer with a focus on usability", + "tags": "timer, tool", + "readme": "README.md", + "storage": [ + {"name": "countdowntimer.app.js", "url": "countdowntimer.js"}, + {"name": "countdowntimer.img", "url": "countdowntimer-icon.js", "evaluate": true} + ] +}, +{ "id": "helloworld", + "name": "hello,world!", + "shortName":"helloworld", + "icon": "app.png", + "version":"0.01", + "description": "A cross cultural hello world!/hola mundo! app with colors and languages", + "readme": "README.md", + "tags": "input,interface,buttons,touch", + "storage": [ + {"name":"helloworld.app.js","url":"app.js"}, + {"name":"helloworld.img","url":"app-icon.js","evaluate":true} + ] } ] diff --git a/apps/countdowntimer/ChangeLog b/apps/countdowntimer/ChangeLog new file mode 100644 index 000000000..624f1b0fb --- /dev/null +++ b/apps/countdowntimer/ChangeLog @@ -0,0 +1 @@ +0.01: Initial version \ No newline at end of file diff --git a/apps/countdowntimer/README.md b/apps/countdowntimer/README.md new file mode 100644 index 000000000..3ad0eea84 --- /dev/null +++ b/apps/countdowntimer/README.md @@ -0,0 +1,12 @@ +# countdown-timer + +A basic bangle.js timer with a focus on usability. + +* Start or Pause the timer with BTN1 +* Reset the timer with BTN2 +* Exit the application with BTN3 +* Touch the right side of the screen to increase the time amount by 1 second +* Touch the left side of the scren to decrease the time amount by 1 second +* Touching and holding the screen will increase or decrease the time amount by 60 seconds at a time. + +Icons made by [Freepik](https://www.freepik.com) from [Flaticon](https://www.flaticon.com/). diff --git a/apps/countdowntimer/countdowntimer-icon.js b/apps/countdowntimer/countdowntimer-icon.js new file mode 100644 index 000000000..bf5972683 --- /dev/null +++ b/apps/countdowntimer/countdowntimer-icon.js @@ -0,0 +1 @@ +require("heatshrink").decompress(atob("mEwwgMJhvd7tEogkSC4lAC6xWUgUgNysiC6hGBL58BiMQLoYXDMJkRAAIWEC4gYJFwIABCwgXFDBAWCpoXLMYwuCigUD6czmUSmQYKC4QuD6f//8xiUzmckJJIuECwQXEDAgXGFwc/C4XykYXCmZIJCwVPCwQABCwczmgwHXYXUCwgXFGBAXC74XLGAQXELowXIVgYXF6QWF+Z3EJAhGFUganHJAoXFRooXLMAQXCLwwXHMAQXUMAQXCRwQWFC9HSiMvC40iCocxiKoEC4cTC4sRiLBDC5MiF4wXFmQXHL4/zkRHEO6H/OwwXFX5IXfd5HfC5s0C4/TC5skRwZ4LLxAXHMAxeIC4hIJLxYXEJAxGMJAgwFFw4XGGAZhD+UjLoxGEC4owDmMSIoouGJAgYBGIIXDCwYuGGAoABIQMiaIQuKDA/dCoguJJIwXHCxQYGCyIYFCyRjELZYA=")) \ No newline at end of file diff --git a/apps/countdowntimer/countdowntimer.js b/apps/countdowntimer/countdowntimer.js new file mode 100644 index 000000000..b57372864 --- /dev/null +++ b/apps/countdowntimer/countdowntimer.js @@ -0,0 +1,232 @@ +const heatshrinkDecompress = require("heatshrink").decompress; + +const playIcon = heatshrinkDecompress(atob("jEYwhC/gFwBZV3BhV3u4LLBhILCEpALCBhALDu9gBaojKHZZrVQZSbLAG4A=")); +const pauseIcon = heatshrinkDecompress(atob("jEYwhC/xGIAYoL/Bf4LfAHA=")); +const resetIcon = heatshrinkDecompress(atob("jEYwg30h3u93gAgIKHBgXuBYgIBoEEBoQWFAgQMCBYgrBE4giEBYYjGAgY+DBY4AHBZlABZQ7DLIpTFAo5ZJLYYDFTZKzLAGQA==")); +const closeIcon = heatshrinkDecompress(atob("jEYwhC/4AEDhgKEhnMAofMCIgGECAoHFCwwIDCw4YDCxAYCCxALMEZY7KKZZrKQZibKAHIA=")); + +const timerState = { + IDLE: 0, + RUNNING: 1 +}; + +let currentState = timerState.IDLE; +let remainingSeconds = 0; +let countdownInterval = null; +let increasingInterval = null; +let decreasingInterval = null; +let isDecreasingRemainingSeconds = false; +let isIncreasingRemainingSeconds = false; + +function main() { + g.clear(); + g.setFont("Vector", 40); + g.setFontAlign(0, 0); + + registerInputHandlers(); + + draw(); +} + +function registerInputHandlers() { + setWatch(onPrimaryButtonPressed, BTN1, { repeat: true }); + setWatch(onResetButtonPressed, BTN2, { repeat: true }); + setWatch(onExitButtonPressed, BTN3, { repeat: true }); + setWatch(onDecreaseRemainingSecondsPressed, BTN4, { repeat: true, edge: "rising" }); + setWatch(onIncreaseRemainingSecondsPressed, BTN5, { repeat: true, edge: "rising" }); + setWatch(onDecreaseRemainingSecondsReleased, BTN4, { repeat: true, edge: "falling" }); + setWatch(onIncreaseRemainingSecondsReleased, BTN5, { repeat: true, edge: "falling" }); +} + +function draw() { + g.clearRect(200, 0, 240, 240); + g.clearRect(0, 0, 240, 80); + + drawRemainingSecondsPanel(); + + g.drawImage(resetIcon, 216, 108); + g.drawImage(closeIcon, 216, 188); + + if (currentState == timerState.IDLE) { + g.drawImage(playIcon, 216, 28); + } else { + g.drawImage(pauseIcon, 216, 28); + } + + g.flip(); +} + +function drawRemainingSecondsPanel() { + g.clearRect(0, 100, 200, 140); + g.drawString(formatRemainingSeconds(), 105, 120); + + if (currentState == timerState.IDLE) { + drawSubtractRemainingSeconds(); + drawIncreaseRemainingSeconds(); + } else { + g.setColor(0.4, 0.4, 0.4); + drawSubtractRemainingSeconds(); + drawIncreaseRemainingSeconds(); + g.setColor(-1); + } +} + +function drawSubtractRemainingSeconds() { + if (isDecreasingRemainingSeconds) { + drawFilledCircle(22, 117, 15); + } + + g.drawString("-", 25, 120); +} + +function drawIncreaseRemainingSeconds() { + if (isIncreasingRemainingSeconds) { + drawFilledCircle(182, 117, 15); + } + + g.drawString("+", 185, 120); +} + +function drawFilledCircle(x, y, radians) { + g.setColor(0.1, 0.37, 0.87); + g.fillCircle(x, y, radians); + g.setColor(-1); +} + +function formatRemainingSeconds() { + const minutes = Math.floor(remainingSeconds / 60); + const minutesTens = Math.floor(minutes / 10); + const minutesUnits = minutes % 10; + + const seconds = remainingSeconds % 60; + const secondsTens = Math.floor(seconds / 10); + const secondsUnits = seconds % 10; + + return `${minutesTens}${minutesUnits}:${secondsTens}${secondsUnits}`; +} + +function onPrimaryButtonPressed() { + if (isIncreasingRemainingSeconds || isDecreasingRemainingSeconds) return; + + if (currentState == timerState.IDLE) { + if (remainingSeconds == 0) return; + currentState = timerState.RUNNING; + beginCountdown(); + draw(); + } else { + currentState = timerState.IDLE; + stopCountdown(); + draw(); + } +} + +function beginCountdown() { + countdownInterval = setInterval(countdown, 1000); +} + +function countdown() { + --remainingSeconds; + + if (remainingSeconds <= 0) { + remainingSeconds = 0; + stopCountdown(); + } + + drawRemainingSecondsPanel(); + + if (remainingSeconds <= 0) { + drawStopMessage(); + } +} + +function drawStopMessage() { + draw(); + Bangle.buzz(800); + g.setFont("Vector", 30); + g.setColor(1.0, 0.91, 0); + g.drawString("Time's Up!", 105, 40); + g.setColor(-1); + g.setFont("Vector", 40); +} + +function stopCountdown() { + clearInterval(countdownInterval); + countdownInterval = null; + currentState = timerState.IDLE; +} + +function onResetButtonPressed() { + currentState = timerState.IDLE; + remainingSeconds = 0; + draw(); +} + +function onExitButtonPressed() { + Bangle.showLauncher(); +} + +function onIncreaseRemainingSecondsPressed() { + if (currentState == timerState.RUNNING) return; + incremementRemainingSeconds(); + + increasingInterval = setInterval(() => { + remainingSeconds += 60; + + if (remainingSeconds >= 5999) { + remainingSeconds = 5999; + } + + drawRemainingSecondsPanel(); + }, 250); + + isIncreasingRemainingSeconds = true; + + drawRemainingSecondsPanel(); +} + +function incremementRemainingSeconds() { + if (remainingSeconds >= 5999) return; + ++remainingSeconds; +} + +function onIncreaseRemainingSecondsReleased() { + if (currentState == timerState.RUNNING) return; + clearInterval(increasingInterval); + isIncreasingRemainingSeconds = false; + drawRemainingSecondsPanel(); +} + +function onDecreaseRemainingSecondsPressed() { + if (currentState == timerState.RUNNING) return; + decreaseRemainingSeconds(); + + decreasingInterval = setInterval(() => { + remainingSeconds -= 60; + + if (remainingSeconds < 0) { + remainingSeconds = 0; + } + + drawRemainingSecondsPanel(); + }, 250); + + isDecreasingRemainingSeconds = true; + + drawRemainingSecondsPanel(); +} + +function decreaseRemainingSeconds() { + if (remainingSeconds <= 0) return; + --remainingSeconds; +} + +function onDecreaseRemainingSecondsReleased() { + if (currentState == timerState.RUNNING) return; + + clearInterval(decreasingInterval); + + isDecreasingRemainingSeconds = false; + draw(); +} + +main(); \ No newline at end of file diff --git a/apps/countdowntimer/countdowntimer.png b/apps/countdowntimer/countdowntimer.png new file mode 100644 index 000000000..fe59fab3b Binary files /dev/null and b/apps/countdowntimer/countdowntimer.png differ diff --git a/apps/helloworld/Changelog b/apps/helloworld/Changelog new file mode 100644 index 000000000..75bbc9866 --- /dev/null +++ b/apps/helloworld/Changelog @@ -0,0 +1 @@ +0.01: 1st version ! diff --git a/apps/helloworld/README.md b/apps/helloworld/README.md new file mode 100644 index 000000000..370ec349b --- /dev/null +++ b/apps/helloworld/README.md @@ -0,0 +1,47 @@ +# hello, world! + +A cross cultural hello world!/hola mundo! app +The most common testing sentence in several languages ;) + + +## Pictures: + +Launcher icon + +![](helloworld_icon.png) + +Screen - Spanish + +![](helloworld_es.png) + +Screen - English + +![](helloworld_en.png) + +Screen - Japanese + +![](helloworld_jp.png) + + + +## Usage + +Open and see a hello, World! in the screen +interact to change language, color or quit. + +## Features + +Colours, all inputs , graph, widgets loaded +Counter for Times Display + + +## Controls + +finger swipe +button 1,2 and 3 +touch screen left, center or right + + +## Creator + +Daniel Perez \ No newline at end of file diff --git a/apps/helloworld/app-icon.js b/apps/helloworld/app-icon.js new file mode 100644 index 000000000..bade48459 --- /dev/null +++ b/apps/helloworld/app-icon.js @@ -0,0 +1 @@ +require("heatshrink").decompress(atob("mEw4kA///t0up0upsutsuIm0RiIWUgIXBiAFDC58hC4MRkA0CDgQuOJAQ0FLpoSDDYYukC4YuSC4guSCQouRC4guSR4cSFySQGFyLAFD4Z5UDo4vNJqYuJGBouJGBoNEC6iTGC54MDC6IKFC6KDFC6TsFC9zXRC5a+NPJIWKC5DfFC6QAOC7UgC6wAIEBYXLDBYXMNRQXNbJMBGC8hC6w0NJBIX/C/4XTAEw")) \ No newline at end of file diff --git a/apps/helloworld/app.js b/apps/helloworld/app.js new file mode 100644 index 000000000..eb76e160c --- /dev/null +++ b/apps/helloworld/app.js @@ -0,0 +1,142 @@ +//HolaMundo v2021 +// place your const, vars, functions or classes here +{ + var contador=1; + var v_color_statictxt='#e56e06'; //orange RGB format rrggbb + //white,Orange,DarkGreen,Yellow,Maroon,Blue,green,Purple,cyan,olive,DarkCyan,pink + var a_colors= Array(0xFFFF,0xFD20,0x03E0,0xFFE0,0x7800,0x001F,0x07E0,0x780F,0x07FF,0x7BE0,0x03EF,0xF81F); + var v_color_lines=0xFFFF; //White hex format + var v_font1size='32'; + var v_font2size='12'; + var v_font3size='12'; + var v_arraypos=0; + var v_acolorpos=0; + var a_string1 = Array('hola', 'hello', 'saluton', 'ola','ciao', 'salut','czesc','konnichiwa'); + var a_string2 = Array('mundo!', 'world!', 'mondo!','mundo!','mondo!','monde!','swiat!','sekai!'); + var mem=process.memory(); + } + + // special function to handle display switch on + Bangle.on('lcdPower', (on) => { + if (on) { + contador=contador+1; + PrintHelloWorld(); + // call your app function here + // If you clear the screen, do Bangle.drawWidgets(); + } + }); + + //Clear/fill dynamic area except widget area, right and bottom status line + function ClearActiveArea(){ + var colorbackg='#111111';//black + g.setColor(colorbackg); + g.fillRect(0,32,195,150); + g.flip(); + } + + //function Graphics.setColor(r, g, b) binary + // banglejs.com/reference#l_Graphics_setColor + + function PrintHelloWorld(){ + ClearActiveArea(); //except widgets and bottom + + console.log("drawing a "+a_string1[v_arraypos]+" "+a_string2[v_arraypos]); + + g.setColor(a_colors[v_acolorpos]); //dynamic color + g.setFont("Vector",35); + g.drawString(a_string1[v_arraypos],2,55); + //line below 2nd string + g.drawLine(10, 149, 150, 149); + g.flip(); + + g.setColor(a_colors[v_acolorpos+1]); //dynamic color + g.drawString(a_string2[v_arraypos],5,85); + g.flip(); + + g.setFont("Vector",v_font3size); + g.setColor(0,0,1); //blue + g.drawString("Display count: "+contador ,10,115); + mem=process.memory(); + //console.log("Mem free/total: "+mem.free+"/"+mem.total); + g.drawString("Free mem: "+mem.free+"/"+mem.total,10,135); + g.flip(); + } + + function PrintMainStaticArea(){ + g.setColor(v_color_statictxt); + g.setFont("Vector",v_font3size); + g.drawString("#for #bangle.js",10,170); + g.drawString("#javascript #espruino",10,185); + + var img_obj_RedHi = { + width : 40, height : 40, bpp : 4, + transparent : 0, + buffer : require("heatshrink").decompress(atob("AFkM7vd4EAhoTNhvQhvcgHdAQIAL5oWCFIPdExo+CEoIZCABI0DhvADIZhJL4IXDHRkMEAQmOCYgmOAAIOBHwImNRQgmPHgYmCUIIXMJobfB3jgCWZJNDEga1JYQQQCMYZoJJAJNDBwgTICQPdCY7lDRQx4DVIwTIHYZzEHZATFBwblDCZRKEO5ITFWAbIJCYrHBAAImICYwEB5raKCYwAMCYXc5gADE5hLDAAgTIBJLkBBJAyKHw5hKBRJJKKJSuII5Q0IhqPKCbjRKCc4AgA==")) + } + g.drawImage(img_obj_RedHi,155,160); + g.flip(); + } + + + //inc var postion for text array + function ChangeLang(){ + if (v_arraypos { + if(dir == 1) ChangeLang(); //func load() to quit + else ChangeLang(); + }); + } + + console.log("**************************"); + console.log("Log: *** hola mundo app"); + g.clear(); + Bangle.loadWidgets(); + Bangle.drawWidgets(); + g.setColor(0,1,0); //green + + // top or bottom 24px of the screen (reserved for Widgets) + g.setFontVector(v_font2size).drawString("BTN1", 202,37); + g.setFontVector(v_font2size).drawString("Lang", 202,51); + g.setFontVector(v_font2size).drawString("Color<", 197,110); + g.setFontVector(v_font2size).drawString("BTN2", 202,124); + g.setFontVector(v_font2size).drawString("Swipe <- -> (Lang)", 15,223); + g.setFontVector(v_font2size).drawString("Quit<", 200,209); + g.setFontVector(v_font2size).drawString("BTN3", 201,223); + g.flip(); + UserInput(); + PrintMainStaticArea(); + PrintHelloWorld(); + \ No newline at end of file diff --git a/apps/helloworld/app.png b/apps/helloworld/app.png new file mode 100644 index 000000000..ebbd0525a Binary files /dev/null and b/apps/helloworld/app.png differ diff --git a/apps/helloworld/helloworld.img b/apps/helloworld/helloworld.img new file mode 100644 index 000000000..b17c4877d --- /dev/null +++ b/apps/helloworld/helloworld.img @@ -0,0 +1 @@ +00ˆþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>þþþþþþ>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>>>>þþþ>>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>>>>þþþ>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>>>>þþþ>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>>>>þþþ>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>>>þþþ>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>>þþþ>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>þþþ>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>þþ>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>>>þþþþþþþ>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>þþþþþ>>>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>þþþþþ>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>þþþþþ>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>þþþþþ>>>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþþþ>>>>>þþþþþþ>>>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþþþ>>>>þþþþþþ>>>>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþþþ>>>þþþþþþþ>>>>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþ>þþþþþþþþþþþ>>>>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþ>>þþþþþþþþþþ>>>>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþ>>>>>>þþþþþþþ>>>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþ>>>>>>þþþþþþþ>>>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþ>>>>>>þþþþþþþþ>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþþ>>>>>>þþþþþþþþ>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþþþ>>>>>>þþþþþþþþþþ>>>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>þþþþþþþþþþþþ>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>>>>>>>>>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþþþ>>>>>>>>>>>>>>>>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþ>>>>>>>>>>>>>>>>>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþ>>>>>>>>>>>>>>>>>>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþ>>>>>>>>>>>>>>>>>>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþ>>>>>>>>>>>>>>>>>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>>>>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>>>>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>>>>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>>>>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>>>>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>>>>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþ>>>>>>>>>>>>>>>>>>>>þþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþþ \ No newline at end of file diff --git a/apps/helloworld/helloworld_en.png b/apps/helloworld/helloworld_en.png new file mode 100644 index 000000000..f262d1248 Binary files /dev/null and b/apps/helloworld/helloworld_en.png differ diff --git a/apps/helloworld/helloworld_es.png b/apps/helloworld/helloworld_es.png new file mode 100644 index 000000000..2534d39e9 Binary files /dev/null and b/apps/helloworld/helloworld_es.png differ diff --git a/apps/helloworld/helloworld_icon.png b/apps/helloworld/helloworld_icon.png new file mode 100644 index 000000000..369929072 Binary files /dev/null and b/apps/helloworld/helloworld_icon.png differ diff --git a/apps/helloworld/helloworld_jp.png b/apps/helloworld/helloworld_jp.png new file mode 100644 index 000000000..7a4e8142e Binary files /dev/null and b/apps/helloworld/helloworld_jp.png differ diff --git a/apps/testuserinput/ChangeLog b/apps/testuserinput/ChangeLog index 35dbd45dd..de61a1b35 100644 --- a/apps/testuserinput/ChangeLog +++ b/apps/testuserinput/ChangeLog @@ -1,3 +1,4 @@ 0.01: New App! 0.02: Tweaks for app loader -0.03: Fix app icon, add change of colors \ No newline at end of file +0.03: Fix app icon, add change of colors +0.04: Improvements and new round check option elements \ No newline at end of file diff --git a/apps/testuserinput/README.md b/apps/testuserinput/README.md index 5fc5f3864..3202ae752 100644 --- a/apps/testuserinput/README.md +++ b/apps/testuserinput/README.md @@ -4,12 +4,19 @@ This very basic app, allows to *test the bangle.js input interface*, and display Launcher icon + ![](testUserInput_ss0.png) + 1st screen - Help/Intro + ![](testUserInput_ss1.png) + 2nd screen - interface and a result + ![](testUserInput_ss2.png) + 3rd screen - interface and a result + ![](testUserInput_ss3.png) diff --git a/apps/testuserinput/app-icon.js b/apps/testuserinput/app-icon.js index 381134172..5efac11e2 100644 --- a/apps/testuserinput/app-icon.js +++ b/apps/testuserinput/app-icon.js @@ -1 +1 @@ -require("heatshrink").decompress(atob("MDDCAP//Bv7m/RF8AAAAAAAAAAAAAAAAAAAAAP/AAAAAAAAAAAAAD//8AAAAAAAAAAAAP///AAAAAAAAAAAA////wAAAAAAAAAAA////wAAAAAAAAAAD/9X/8AAAAAAAAAAD/1V/8AAAAAAAAAAD/1V/8AAAAAAAAAAD/1V/8AAAAAAAAAAD/1V/8AAAAAAAAAAA/1V/wAAAAAAAAAAA/1V/wAAAAAAAAAAAP1V/AAAAAAAAAAAAD1V8AAAAAAAAAAAAAFVAAAAAAAAAAAAAAFVAAAAAAAAAAAAAAFVAAAAAAAAAAAAAAFVAAAAAAAAAAAAAAFVlQAAAAAAAAAAAAFVlVVQAAAAAAAAAAFVVVVVUAAAAAAAAAFVVVVVVQAAAAAAAAFVVVVVVQAAAAFYAAFVVVVVVUAAAAFWAAFVVVVVVUAAAAFVgAFVVVVVVUAAAAFVaAlVVVVVVUAAAABVWqlVVVVVVUAAAAAVVqlVVVVVVUAAAAAFValVVVVVVYAAAAABVWlVVVVVVoAAAAAAVVlVVVVVWoAAAAAAFVVVVVVVaoAAAAAAFVVVVVVVqoAAAAAABVVVVVVWqoAAAAAAAVVVVVVqqoAAAAAAAFVVVVWqqoAAAAAAABVVVVaqqoAAAAAAAAVVVVqqqgAAAAAAAAFVVWqqqgAAAAAAAABVVaqqqAAAAAAAAAAFVqqqgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA")) +require("heatshrink").decompress(atob("mEwwgjgkUikAWVDCkCkUz+cykQuSkf///zGCUin4XB/8yC6ECFwM+90/GAIXS8fzC6cv//vAIQvS+YvBAIIXT93uC6UAiUzC4UyiAXQiMjC4UhC6MBiIXB8MRd6IwBC4QuRAAQXB8AWTC/4XK8gZUC4PtAQI0SCgYAEDJwXIDBwXRBIIXNBwihIC6YJDC6gKBhoXRhwKC9vdC6IwEC6YwEC6RzLC5gwDC6YwOC8JINC5IwNC5QwMC5QwMC5YwK8AXLGBQXNGBIWMDBIWOAH4AvA=")) \ No newline at end of file diff --git a/apps/testuserinput/app.js b/apps/testuserinput/app.js index 82328ab23..106d7d9fc 100644 --- a/apps/testuserinput/app.js +++ b/apps/testuserinput/app.js @@ -1,6 +1,5 @@ /* Test bangle.js input interface */ - var colbackg='#111111';//black - //var coldarkred='#CC3333'; + var colbackg='#111111';//black var colorange='#e56e06'; //RGB format rrggbb var v_color_lines=0xFFFF; //White hex format var v_color_b_area=colbackg; @@ -8,76 +7,21 @@ var v_clicks='0'; console.log("*** Test input interface ***"); - function ClearActiveArea(){ + +function ClearActiveArea(){ g.setColor(colbackg); g.fillRect(0,32,239,239); //fill all screen except widget area g.flip(); } -function ChangeColorBannerArea(v_color){ - if (v_color=='#111111') v_color='#f3f3f1'; - else if (v_color=='#f3f3f1') v_color='#51504f'; - else if (v_color=='#51504f') v_color=0x7800;// Maroon - else if (v_color==0x7800) v_color='#111111'; - return (v_color); -} -function ClearBannerArea(){ - g.setColor(v_color_b_area); - g.fillRect(50,32,190,85); //fill an specific area - g.flip(); -} - -function PrintUserInput(boton){ - console.log("Pressed touch/BTN",boton); - if (v_clicks=='0') PrintAreas(); - ClearBannerArea(); - - if (boton==' <---') { - var img_off = { - width : 48, height : 48, bpp : 2, - transparent : 0, - palette : new Uint16Array([65535,63968,40283,50781]), - buffer : E.toArrayBuffer(atob("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//AAAAAAAAAAAAA///9VVVVVVVQAAAD/qq/1VVVVVVVAAAP6qqv9VVVVVVVUAA/qqqv/VVVVVVVVAD+qqq//1VVVVVVVQP6qqq//1VVVVVVVQPqqqr//9VVVVVVVUvqqqr//9VVVVVVVU+qqqv/+uVVVVVVVV+qqqv+quVVVVVVVV+qqq+qqvVVVVVVVV+qqvqqqvVVVVVVVV+qv+qqquVVVVVVVV+r/+qqquVVVVVVVVv//6qqq9VVVVVVVUP//6qqq9VVVVVVVUP//qqqr1VVVVVVVQD//qqqv1VVVVVVVQA/+qqq/VVVVVVVVAAP+qqr9VVVVVVVUAAD/qq/1VVVVVVVAAAA///9VVVVVVVQAAAAA//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA")) - }; - g.drawImage(img_off,90,35); - } - else if (boton==' --->') { - var img_on = { - width : 48, height : 48, bpp : 2, - transparent : 0, - palette : new Uint16Array([65535,36361,27879,40283]), - buffer : E.toArrayBuffer(atob("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//AAAAABVVVVVqqf///AAAAVVVVVWqn////wAAFVVVVVWqf////8AAVVVVVVap//////ABVVVVVVqr//////wBVVVVVVqn//////8FVVVVVVqv//////8FVVVVVWqf///////VVVVVVWq////////VVVVVVWq////////VVVVVVWq////////VVVVVVWq////////VVVVVVWq////////VVVVVVWq////////FVVVVVWqf///////FVVVVVVqv//////8BVVVVVVqn//////8BVVVVVVar//////wAVVVVVVap//////AAFVVVVVWqf////8AAAVVVVVWqn////wAAABVVVVVqqf///AAAAAAAAAAAAA//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA")) - }; - g.drawImage(img_on,90,35); - } - else - { //no swipe /slide - g.setColor(colorange); - g.setFontVector(32).drawString(boton, 60, 65); - } - g.flip(); - v_clicks++; -} -function PrintBtn1(boton){ - console.log("Pressed BTN1"); - if (v_clicks=='0') PrintAreas(); - PrintUserInput("Button1"); - v_clicks++; -} - -function PrintBtn2(boton){ - console.log("Pressed BTN2"); - v_color_b_area=ChangeColorBannerArea(v_color_b_area); - if (v_clicks=='0') PrintAreas(); - PrintUserInput("Button2"); - v_clicks++; -} function PrintHelp(){ console.log("********************************"); console.log("Log: *** Print help in screen"); ClearActiveArea(); + g.setColor(colorange); + g.setFontVector(18).drawString("To test the input, try :",25,90); + g.flip(); g.setColor(0,1,0); //green - g.setFontVector(v_font1size).drawString("To test the input, try :", 30, 90); g.setFontVector(v_font1size).drawString("Swipe right -->", 30, 115); g.setFontVector(v_font1size).drawString("Swipe left <--", 30, 130); g.setFontVector(v_font1size).drawString("Click Left area", 30, 145); @@ -89,15 +33,121 @@ function PrintHelp(){ g.flip(); } + +function ChangeColorBannerArea(v_color){ + if (v_color=='#111111') v_color='#f3f3f1'; + else if (v_color=='#f3f3f1') v_color='#51504f'; + else if (v_color=='#51504f') v_color=0x7800;// Maroon + else if (v_color==0x7800) v_color='#CC3333';//coldarkred + else if (v_color=='#CC3333') v_color='#111111'; + return (v_color); +} +//Clean fill top area with a color +function ClearBannerArea(){ + g.setColor(v_color_b_area); + g.fillRect(55,32,185,78); + g.flip(); +} + + function DrawRoundOption(area){ + //draw a img from an Image object + var img_obj_check = { + width : 30, height : 30, bpp : 4, + transparent : 0, + palette : new Uint16Array([65535,28436,38872,4838,6951,34711,26355,24242,32630,36792,30517,32598,40953,26323,9129,7016]), + buffer : E.toArrayBuffer(atob("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADMwiKZmQAAAAAAAAAAAMzMIimZVVUAAAAAAAAADMzCIpmVVViAAAAAAAAAzMwiKZlVVYi7AAAAAAAMzMIimZVVWIu7oAAAAADMzCIpmVVViLu6qgAAAADMwiKZlVVYi7uqoQAAAAzMIimZVVWIu3eqERAAAAzCIpmVVViLtzNxERAAAAwiKZlVVYi7czRxEWAAAAIimZe1WIu3M0cRFmAAAAIpmePqiLtzNHERZmAAAAKZleM+q7czRxEWZtAAAAmZVV4z4XQ0cRFmbdAAAAmVVVjjPjNHERZm3XAAAAlVVYi+MzRxEWZt13AAAAlVWIu640cRFmbdd3AAAABViLu6p3ERZm3XdwAAAABYi7uqoREWZt13dwAAAAAIu7qqERFmbdd3cAAAAAAAu6qhERZm3Xd3AAAAAAAACqoREWZt13dwAAAAAAAAAKERFmbdd3cAAAAAAAAAAAARZm3XdwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA")) + }; + var img_obj_uncheck = { + width : 30, height : 30, bpp : 4, + transparent : 0, + palette : new Uint16Array([65535,63422,9532,13789,59197,57084,34266,28220,63390,65503,61310,61277,57116,55003,61309,40604]), + buffer : E.toArrayBuffer(atob("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAzMzMzMwAAAAAAAAAAADMzf//3MzMAAAAAAAAAAzPxmZkRrzMwAAAAAAAAM3mZmZmRiKczAAAAAAADP5mZmZmRiKpjMAAAAAAzeZmZmZkRiKq3MwAAAAAzGZmZmZkRiKq8MwAAAAM/mZmZmZkYiKtE8iAAAAMxmZmZmZEYiqtEUiAAAAN5mZmZmRGIiqtExyAAAAPxmZmZkRiIqrRMViAAAAPxEREREYiKq7RMViAAAAP4ERERiIiqq0TFViAAAAP4iIiIiIqqtETFViAAAAN6iIiIiqq7RExV1yAAAAM0qqqqqru0RMVd0iAAAAM/uqqru7RETFXdYiAAAAAzS7u7RERMxV3dIgAAAAAzdEREREzFVd3XIgAAAAADNkREzMVVXd1iIAAAAAAAM3VVVVVd3dciAAAAAAAAAzNtVd3d1iIgAAAAAAAAADMidmZnIiIAAAAAAAAAAAAiIiIiIgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA")) + }; + if (area=='Touch 1') { + g.drawImage(img_obj_check,20,80); + console.log("Draw option check left"); + } + else g.drawImage(img_obj_uncheck,20,80); + if (area=='Touch 2') { + g.drawImage(img_obj_check,190,80); + console.log("Draw option check right"); + } + else g.drawImage(img_obj_uncheck,190,80); +} + +function DrawSwitch(swipedir){ +if (swipedir==' <---') { + console.log("Draw switch <--"); + var img_off = { + width : 48, height : 48, bpp : 2, + transparent : 0, + palette : new Uint16Array([65535,63968,40283,50781]), + buffer : E.toArrayBuffer(atob("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//AAAAAAAAAAAAA///9VVVVVVVQAAAD/qq/1VVVVVVVAAAP6qqv9VVVVVVVUAA/qqqv/VVVVVVVVAD+qqq//1VVVVVVVQP6qqq//1VVVVVVVQPqqqr//9VVVVVVVUvqqqr//9VVVVVVVU+qqqv/+uVVVVVVVV+qqqv+quVVVVVVVV+qqq+qqvVVVVVVVV+qqvqqqvVVVVVVVV+qv+qqquVVVVVVVV+r/+qqquVVVVVVVVv//6qqq9VVVVVVVUP//6qqq9VVVVVVVUP//qqqr1VVVVVVVQD//qqqv1VVVVVVVQA/+qqq/VVVVVVVVAAP+qqr9VVVVVVVUAAD/qq/1VVVVVVVAAAA///9VVVVVVVQAAAAA//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA")) + }; + g.drawImage(img_off,99,33); + } + else if (swipedir==' --->') { + console.log("Draw switch -->"); + var img_on = { + width : 48, height : 48, bpp : 2, + transparent : 0, + palette : new Uint16Array([65535,36361,27879,40283]), + buffer : E.toArrayBuffer(atob("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//AAAAABVVVVVqqf///AAAAVVVVVWqn////wAAFVVVVVWqf////8AAVVVVVVap//////ABVVVVVVqr//////wBVVVVVVqn//////8FVVVVVVqv//////8FVVVVVWqf///////VVVVVVWq////////VVVVVVWq////////VVVVVVWq////////VVVVVVWq////////VVVVVVWq////////VVVVVVWq////////FVVVVVWqf///////FVVVVVVqv//////8BVVVVVVqn//////8BVVVVVVar//////wAVVVVVVap//////AAFVVVVVWqf////8AAAVVVVVWqn////wAAABVVVVVqqf///AAAAAAAAAAAAA//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA")) + }; + g.drawImage(img_on,99,33); + } +} + + +function PrintUserInput(boton){ + console.log("Pressed touch/BTN",boton); + if (v_clicks=='0') { + PrintAreas(); + v_clicks=1; + } + ClearBannerArea(); + + if (boton==' <---') DrawSwitch(boton); + else if (boton==' --->') DrawSwitch(boton); + else + { //a BUTTON or AREA AND NO swipe /slide + if (boton=='Touch 1'||boton=='Touch 2') DrawRoundOption(boton); + g.setColor(colorange); + g.setFontVector(30).drawString(boton, 63, 55); + } + g.flip(); +} + +function PrintBtn1(boton){ + console.log("Pressed BTN1"); + if (v_clicks=='0'){ + PrintAreas(); + v_clicks=1; + } + PrintUserInput("Button1"); + +} + +function PrintBtn2(boton){ + console.log("Pressed BTN2"); + v_color_b_area=ChangeColorBannerArea(v_color_b_area); + if (v_clicks=='0'){ + PrintAreas(); + v_clicks=1; + } + PrintUserInput("Button2"); +} + + function PrintAreas(){ console.log("********************************"); console.log("Log: *** Print Areas in screen"); ClearActiveArea(); g.setColor(v_color_lines); - g.drawLine(1, 140, 1, 200);//side border - g.drawLine(239, 140, 239, 200);//side border - g.drawLine(120, 100, 120, 135);//middle separation top - g.drawLine(120, 170, 120, 200);//middle separation bottom + g.drawLine(1, 140, 1, 200);//vline left border + g.drawLine(239, 140, 239, 200);//vlide right border + g.drawLine(120, 100, 120, 135);//vline middle separation top + g.drawLine(120, 170, 120, 200);//vline middle separation bottom //BTN1 g.setFontVector(v_font1size).drawString("Color<-", 130,125); diff --git a/apps/testuserinput/testUserInput_ss2.png b/apps/testuserinput/testUserInput_ss2.png index ba680a366..c2fd19ae4 100644 Binary files a/apps/testuserinput/testUserInput_ss2.png and b/apps/testuserinput/testUserInput_ss2.png differ diff --git a/apps/testuserinput/testUserInput_ss3.png b/apps/testuserinput/testUserInput_ss3.png index 8c0765911..421f44e49 100644 Binary files a/apps/testuserinput/testUserInput_ss3.png and b/apps/testuserinput/testUserInput_ss3.png differ