diff --git a/apps/mixdiganclock/ChangeLog b/apps/mixdiganclock/ChangeLog index 5354e44a7..13f27c06c 100644 --- a/apps/mixdiganclock/ChangeLog +++ b/apps/mixdiganclock/ChangeLog @@ -1,3 +1,4 @@ 0.01: fork from miclock, Added compatib with b widgets, devices(dynamic x,y) and themes(dynamic colors) 0.02: Code refactored, change colors in real time -0.03: Hour point size can be modified on real time. \ No newline at end of file +0.03: Hour point size can be modified on real time. +0.04: Background color can be changed on real time, it will change also the list of fg color \ No newline at end of file diff --git a/apps/mixdiganclock/README.md b/apps/mixdiganclock/README.md index aa860b4d4..d5efbc126 100644 --- a/apps/mixdiganclock/README.md +++ b/apps/mixdiganclock/README.md @@ -6,26 +6,28 @@ Compatible with BangleJS1,BangleJS2,and EMSCRIPTENx emulators ## Pictures: -Bangle JS1 - +Bangle.JS1 ![](photo_mixdigan_bjs1.jpg) -Screenshot emulator BJS2 - +Screenshot emulator (BJS2) ![](ss_mixdigan_ems2.png) -Screenshot emulator BJS1 - +Screenshot emulator (BJS1) ![](ss_mixdigan_ems.png) +SS emulator (BJS1) -color ans aspect changed +![](ss_mixdigan_ems_aspect.png) -SS emulator -color change -![](ss_mixdigan_ems_2.png) +SS emulator (BJS1) -Background color changed +![](ss_mixdigan_ems_bgcl.png) -SS emulator -color change +SS emulator (BJS2) -color change ![](ss_mixdigan_ems2_2.png) -SS emulator -color change +SS emulator (BJS2) -Background color changed +![](ss_mixdigan_ems_2_bgcl.png) + +SS emulator (BJS2) -color changed ![](ss_mixdigan_ems2_3.png) ## Usage @@ -35,7 +37,8 @@ Open and see ## Features Compatibility with devices -Dynamic Colours and positions +Dynamic positions x,y for different devices +Dynamic Colours (FG and BG) and positions Support for bottom widgets @@ -43,16 +46,16 @@ Support for bottom widgets Exit : BTN2 (BJS1) Exit/launcher : left area -Change Color : right area -Increase Hour Points : swipe right -Decrease Hour Points : swipe left +Change FG Color : right area +Increase/Decrease Hour circle/Points : swipe right +Change BG Color : swipe left ## Coming soon -A better color combination +A better combination of colors and aspect for the initial screen (help of designer is welcome) ## Support This app is so basic that probably the easiest is to just edit the code ;) -Otherwise you can contact me [here](https://github.com/dapgo/my_espruino_smartwatch_things) \ No newline at end of file +Otherwise you can submit issues, request features or make suggestions [here](https://github.com/dapgo/my_espruino_smartwatch_things) or in the global bangle.apps repository \ No newline at end of file diff --git a/apps/mixdiganclock/metadata.json b/apps/mixdiganclock/metadata.json index 8fae2dd8f..daf0924ec 100644 --- a/apps/mixdiganclock/metadata.json +++ b/apps/mixdiganclock/metadata.json @@ -1,12 +1,12 @@ { "id": "mixdiganclock", "name": "Mix Dig&Anal Clock", - "version": "0.03", - "description": "A dual Analog and Digital Clock, based in Mixed Clock, but with more compatibility, change of colors, thicker clock hands... ", + "version": "0.04", + "description": "A dual Analog and Digital Clock, that gives the user the power to improve the UI/UX on realtime. Too much sun and polarized sunglasses should not be a problem to read the time anymore if you change colors or aspect. Originally based in Mixed Clock ", "icon": "mixdiganclock.png", "type": "clock", "tags": "clock", - "screenshots": [{"url":"pic_mixdigan_bjs1.jpg"}], + "screenshots": [{"url":"ss_mixdigan_ems.png"}], "supports": ["BANGLEJS","BANGLEJS"], "readme": "README.md", "allow_emulator": true, diff --git a/apps/mixdiganclock/mixdiganclock.app.js b/apps/mixdiganclock/mixdiganclock.app.js index bd36c0f32..940e1a7e2 100644 --- a/apps/mixdiganclock/mixdiganclock.app.js +++ b/apps/mixdiganclock/mixdiganclock.app.js @@ -2,37 +2,47 @@ compatible with BJS1, BJS2 and bottom widgets */ var locale = require("locale"); -var v_mode_debug=0; //, 0=no, 1 min, 2 prone detail +var v_mode_debug=0 //, 0=no, 1 min, 2 prone detail var v_model=process.env.BOARD; +var v_array4colors=0; // 0 undef, 1 forDark, 2 forLight +var a_colors=[]; //new Array(), values will depend on b_isarray4dark var LastDrawDay; // to notice a change and repaint static texts -//RGB565 0x White , black, 'Orange',blue,red, olive,... -var a_colors= [0xFFFF,0x0000, 0xFD20, 0x001F,0xF800,0x7be0,0x780F,0x07E0]; //new Array(0xFFFF var Radius= []; //new Array(); var TxtPosition=[]; var v_bfont_size; var v_vfont_size; +var v_str_pix_width; // to clear timer area var v_color1; var v_color2; var v_color3; -var v_color_erase; +var v_color_erase; //dynamic var v_count_col; var rect = Bangle.appRect; var v_center_x; var v_center_y; -if (v_mode_debug>0) console.log("a_colors.length "+a_colors.length); -g.clear(); +g.clear(); //ONLY 1ST TIME //show the exit button -//Bangle.setUI(); Bangle.setUI("clock"); //implies center button for launcher -/*{ - mode : "custom", - back : Bangle.showLauncher -});*/ Bangle.loadWidgets(); - +function getColorArray4BG() { //1st=0 1st compatible color (dark/light theme) + var var_bg=g.getBgColor(); + if (v_mode_debug>1) console.log(g.theme); + if (v_mode_debug>0) console.log("func getbgcolor: "+var_bg+" g.theme.bg: "+g.theme.bg); + if (v_array4colors==0) { + if (g.theme.dark==1) v_array4colors=1; + else if (g.theme.dark==0) v_array4colors=2; + } + //for dark/black bg + if (v_array4colors==1) a_colors= [0xFFFF, 0x0000, 0xFD20, 0x001F,0xF800,0x7be0,0x780F,0x07E0,0x07FF,0x7BEF,0xFFE0,0xFFBF00]; + //for light/white theme + if (v_array4colors==2) a_colors= [0x0000, 0xFFFF, 0xFD20, 0x001F,0xF800,0x000F,0x780F,0x07E0,0xFFBF00]; + v_color_erase=a_colors[1]; + if (v_mode_debug>1) console.log(" erase: "+v_color_erase); + return (v_array4colors); //opt as using global vars +} function setVariables() { // different values depending on loaded widgets or not, so after load widgets @@ -43,30 +53,52 @@ function setVariables() { TxtPosition = { "x1": 3, "x2": g.getWidth()-3, "y1": rect.y+17, "y2": rect.y2-6, - "x_HH": g.getWidth()/2 ,"y_mm": v_center_y+32 + "x_HH": g.getWidth()/2 ,"y_mm": v_center_y+32 //center position for setFontAlign0,0 }; - //emuls EMSCRIPTEN,EMSCRIPTEN2 - v_count_col=2; //1st=0 1st compatible color (dark/light theme) - v_color_erase=g.getBgColor(); + v_count_col=2; //realtime colors(avoid b/w) begin from this array position + getColorArray4BG(); //set colors + //v_color_erase=g.getBgColor(); + if (v_model=='BANGLEJS'||v_model=='EMSCRIPTEN') { Radius = { "center": 7, "hour": 50, "min": 70, "dots": 88,"circleH":6,"circleM":2 }; v_bfont_size=3; v_vfont_size=35; - v_color1=2; // orange - v_color2=4; - v_color3=0; //white , for hands PEND replace hardcoded by logic + //1st watchface is multicolor + v_color1=3; //ring orange + v_color2=5; //text red + v_color3=0; //hands, opposite to bg }else{ Radius = { "center": 5, "hour": 35, "min": 50, "dots": 60, "circleH":5,"circleM":2 }; v_bfont_size=2; v_vfont_size=22; - v_color1=3; // blue - v_color2=1; - v_color3=1; //opposite to bg, for hands PEND replace hardcoded by logic + v_color1=4; //ring + v_color2=8; //text + v_color3=0; //hands, opposite to bg } - if (v_mode_debug>0) console.log("set vars for: "+v_model); } +function ClearScreen(){ + //avoid widget areas + // var var_bg=g.getBgColor(); + if (v_mode_debug>1) console.log("ClearScreen getbgcolor: "+g.getBgColor()+" erasecl: "+v_color_erase); + if (v_mode_debug>1) console.log("rect: "+rect.y+" "+rect.x2+" "+rect.y2); + //g.setColor(v_color_erase); + g.setBgColor(v_color_erase); + //Fill a rectangular area in the Background Color + g.clearRect(rect.x, rect.y, rect.x2, rect.y2); + g.flip(); +} + +function ClearTimerArea(){ + g.setBgColor(v_color_erase); + // g.setBgColor(0xFFFFFF-a_colors[v_color1]); //kind of inverted clr just for testing + if (v_mode_debug>1) console.log("ClearTimerArea getbgcolor: "+g.getBgColor()+" erasecl: "+v_color_erase); + if (v_mode_debug>1) console.log("txt x: "+TxtPosition.x_HH+" y "+TxtPosition.y_mm+" w "+v_str_pix_width); + //Fill a rectangular area in the Background Color, coords depends of setFontAlign 0,0=center + g.clearRect(TxtPosition.x_HH-(v_str_pix_width/2), TxtPosition.y_mm-(v_vfont_size/2), TxtPosition.x_HH+(v_str_pix_width/2), TxtPosition.y_mm+(v_vfont_size/2)); + g.flip(); +} function rotatePoint(x, y, d) { rad = -1 * d / 180 * Math.PI; @@ -130,8 +162,7 @@ function drawMixedClock() { var radius; //Call function only after a change of day if (LastDrawDay!=locale.dow(date,true)) drawDailyTxt(); - //ERASE previous hands - // erase last MINutes hand + //ERASE previous last MINutes hand g.setColor(v_color_erase); point = rotatePoint(0, Radius.min, (minute - 1) * 6); g.drawLine(v_center_x, v_center_y, point[0], point[1]); @@ -149,8 +180,6 @@ function drawMixedClock() { //to increase thicknes g.drawLine(v_center_x+1, v_center_y, point[0]+1, point[1]); - // here time DIGITs are draw under hands - // draw new MINute hand point = rotatePoint(0, Radius.min, minute * 6); g.setColor(a_colors[v_color3]); @@ -164,13 +193,20 @@ function drawMixedClock() { //to increase thicknes g.drawLine(v_center_x+1, v_center_y, point[0]+1, point[1]); - // draw DIGITs of time above hands for better UX + + //drawing Time DIGITs above hands for allegedly better UX //g.setFont("6x8", 3); 3 bigger size + ClearTimerArea(); g.setFontVector(v_vfont_size); g.setColor(a_colors[v_color2]); g.setFontAlign(0, 0); - //by default 24H, to use format config 12H 24H read from locale - g.drawString(dateArray[4].substr(0, 5), TxtPosition.x_HH, TxtPosition.y_mm, true); + //by default 24H, to use format config 12H 24H read from locale + //x,y,solid - For bitmap fonts, true empty pixels be filled with bgcolor¿theme? + //true clean previous text but default is not our erase + //false write oiver previus text + //g.drawString(dateArray[4].substr(0, 5), TxtPosition.x_HH, TxtPosition.y_mm, false); + v_str_pix_width=g.stringWidth(dateArray[4].substr(0, 5)); + g.drawString(dateArray[4].substr(0, 5), TxtPosition.x_HH, TxtPosition.y_mm); // the central point requires redrawing because hands draw over it g.setColor(a_colors[v_color1]); g.fillCircle(v_center_x, v_center_y, Radius.center); @@ -182,7 +218,7 @@ function UserInput(){ Bangle.showLauncher(); break; case 2: - //testing to improve + //change color but monocolor watchface if (v_mode_debug>0) console.log("v_count_col/total: "+v_count_col+"/"+a_colors.length); if (v_count_col { if(dir == 1) { drawStaticRing(v_color_erase); - if (Radius.circleH<13) Radius.circleH++; + if (Radius.circleH<13) Radius.circleH++ + else Radius.circleH=2; if (v_mode_debug>0) console.log("radio: "+Radius.circleH); drawStaticRing(a_colors[v_color1]); } - else { - drawStaticRing(v_color_erase); - if (Radius.circleH>1) Radius.circleH--; - if (v_mode_debug>0) console.log("radio: "+Radius.circleH); - drawStaticRing(a_colors[v_color1]); + else { //swipe left, pend to refactor + if (v_array4colors==1) { //if black bg + v_array4colors=2; // then white + getColorArray4BG(); //set new list of colors + g.setBgColor( v_color_erase);// 0 white, 1 black + ClearScreen(); + //g.clear();//impact on widgets + drawStaticRing(a_colors[v_color1]); + drawDailyTxt(); //1st time + drawMixedClock(); + } else if (v_array4colors==2) { //if white bg + v_array4colors=1; + getColorArray4BG(); + console.log(a_colors[1]); + g.setBgColor(v_color_erase);// 0 white, 1 black + //g.clear(); + ClearScreen(); + drawStaticRing(a_colors[v_color1]); + drawDailyTxt(); //1st time + drawMixedClock(); //or just wait? + } } }); } @@ -223,8 +277,7 @@ Bangle.on('lcdPower', function(on) { setVariables(); Bangle.drawWidgets(); UserInput(); - -setInterval(drawMixedClock, 5E3); -drawStaticRing(a_colors[v_color1]); -drawDailyTxt(); //1st time +setInterval(drawMixedClock, 30000);//not realtime update +drawStaticRing(a_colors[v_color1]); +drawDailyTxt(); drawMixedClock(); diff --git a/apps/mixdiganclock/mixdiganclock.info b/apps/mixdiganclock/mixdiganclock.info index f9057ef5a..9675614c1 100644 --- a/apps/mixdiganclock/mixdiganclock.info +++ b/apps/mixdiganclock/mixdiganclock.info @@ -1 +1 @@ -{"id":"mixdiganclock","name":"Mix Dig&Anal","type":"clock","src":"mixdiganclock.app.js","icon":"mixdiganclock.img","version":"0.02","tags":"clock","files":"mixdiganclock.info,mixdiganclock.app.js,mixdiganclock.img"} \ No newline at end of file +{"id":"mixdiganclock","name":"Mix Dig&Anal","type":"clock","src":"mixdiganclock.app.js","icon":"mixdiganclock.img","version":"0.04","tags":"clock","files":"mixdiganclock.info,mixdiganclock.app.js,mixdiganclock.img"} \ No newline at end of file diff --git a/apps/mixdiganclock/photo_mixdigan_bjs1.jpg b/apps/mixdiganclock/photo_mixdigan_bjs1.jpg new file mode 100644 index 000000000..023183a59 Binary files /dev/null and b/apps/mixdiganclock/photo_mixdigan_bjs1.jpg differ diff --git a/apps/mixdiganclock/pic_mixdigan_bjs1.jpg b/apps/mixdiganclock/pic_mixdigan_bjs1.jpg deleted file mode 100644 index eeb23a8ee..000000000 Binary files a/apps/mixdiganclock/pic_mixdigan_bjs1.jpg and /dev/null differ diff --git a/apps/mixdiganclock/ss_mixdigan_ems_2_bgcl.png b/apps/mixdiganclock/ss_mixdigan_ems_2_bgcl.png new file mode 100644 index 000000000..8be96ae57 Binary files /dev/null and b/apps/mixdiganclock/ss_mixdigan_ems_2_bgcl.png differ diff --git a/apps/mixdiganclock/ss_mixdigan_ems_aspect.png b/apps/mixdiganclock/ss_mixdigan_ems_aspect.png new file mode 100644 index 000000000..05784b606 Binary files /dev/null and b/apps/mixdiganclock/ss_mixdigan_ems_aspect.png differ diff --git a/apps/mixdiganclock/ss_mixdigan_ems_bgcl.png b/apps/mixdiganclock/ss_mixdigan_ems_bgcl.png new file mode 100644 index 000000000..8111162b3 Binary files /dev/null and b/apps/mixdiganclock/ss_mixdigan_ems_bgcl.png differ