|
// Variables used by Scriptable. |
|
// These must be at the very top of the file. Do not edit. |
|
// icon-color: purple; icon-glyph: magic; |
|
let today = new Date(); |
|
let dayNumber = Math.ceil((today - new Date(today.getFullYear(),0,1)) / 86400000); |
|
let thisDayDate = today.getDate() |
|
let thisMonth = today.getMonth() |
|
let thisYear = today.getFullYear() |
|
let daysYear = (leapYear(today.getFullYear())) ? 366 : 365; |
|
let daysThisMonth = daysInMonth(thisMonth+1, thisYear) |
|
const dateFormatter = new DateFormatter() |
|
dateFormatter.dateFormat = "MMM" |
|
|
|
const canvSize = 200; |
|
const canvTextSize = 32; |
|
const canvas = new DrawContext(); |
|
const battCircleRemainColor = new Color('#799351'); //Battery remaining color |
|
const battCircleDepletedColor = new Color('#d54062'); //Battery depleted color |
|
const battCircleBGColor = new Color('#000'); //Widget background color |
|
const battCircleTextColor = new Color('#000'); //Widget text color (use same color as above to hide text) |
|
|
|
const remainColor = new Color('#dddddd') |
|
const monthCircleColor = new Color('#ffa36c') |
|
const dayCircleColor = new Color('#ebdc87') |
|
const dayNCircleColor = new Color('#318fb5') |
|
|
|
const canvWidth = 16; //Battery circle thickness |
|
const canvRadius = 80; //Battery circle radius |
|
|
|
canvas.size = new Size(canvSize, canvSize); |
|
canvas.respectScreenScale = true; |
|
const batteryLevel = Device.batteryLevel(); |
|
|
|
/* |
|
|
|
BEGIN Widget Layout |
|
|
|
*/ |
|
|
|
let widget = new ListWidget(); |
|
widget.setPadding(0,0,0,0); |
|
|
|
let mainStack = widget.addStack(); |
|
mainStack.layoutHorizontally(); |
|
mainStack.setPadding(0,0,0,0); |
|
|
|
let batteryStack = mainStack.addStack() |
|
let batteryArc = drawArc( |
|
new Point(canvSize / 2, canvSize / 2), |
|
canvRadius, |
|
canvWidth, |
|
Math.floor(batteryLevel * 100 * 3.6), |
|
battCircleRemainColor, |
|
battCircleDepletedColor, |
|
Math.floor(batteryLevel * 100).toString(), |
|
battCircleTextColor |
|
); |
|
|
|
let arcImage = batteryStack.addImage(batteryArc); |
|
|
|
let monthCirc = mainStack.addStack() |
|
let monthArc = drawArc( |
|
new Point(canvSize / 2, canvSize / 2), |
|
canvRadius, |
|
canvWidth, |
|
Math.floor(((thisMonth+1)/12)*100 * 3.6), |
|
monthCircleColor, |
|
remainColor, |
|
dateFormatter.string(today), |
|
battCircleTextColor |
|
); |
|
|
|
let monthImg = monthCirc.addImage(monthArc); |
|
|
|
let dayCirc = mainStack.addStack() |
|
let dayArc = drawArc( |
|
new Point(canvSize / 2, canvSize / 2), |
|
canvRadius, |
|
canvWidth, |
|
Math.floor((thisDayDate/daysThisMonth)*100 * 3.6), |
|
dayCircleColor, |
|
remainColor, |
|
thisDayDate.toString(), |
|
battCircleTextColor |
|
); |
|
|
|
let dayImg = dayCirc.addImage(dayArc); |
|
|
|
let dayNCirc = mainStack.addStack() |
|
let dayNArc = drawArc( |
|
new Point(canvSize / 2, canvSize / 2), |
|
canvRadius, |
|
canvWidth, |
|
Math.floor(dayNumber/daysYear*100 * 3.6), |
|
dayNCircleColor, |
|
remainColor, |
|
dayNumber.toString(), |
|
battCircleTextColor |
|
); |
|
let dayNImg = dayNCirc.addImage(dayNArc); |
|
|
|
/* |
|
|
|
END Widget Layout |
|
|
|
*/ |
|
|
|
// set widget |
|
Script.setWidget(widget); |
|
widget.presentMedium(); |
|
Script.complete(); |
|
|
|
function sinDeg(deg) { |
|
return Math.sin((deg * Math.PI) / 180); |
|
} |
|
|
|
function cosDeg(deg) { |
|
return Math.cos((deg * Math.PI) / 180); |
|
} |
|
|
|
function drawArc(ctr, rad, w, deg, fillColor, strokeColor, text, txtColor) { |
|
bgx = ctr.x - rad; |
|
bgy = ctr.y - rad; |
|
bgd = 2 * rad; |
|
bgr = new Rect(bgx, bgy, bgd, bgd); |
|
|
|
// canvas background color, but not needed |
|
// bgc = new Rect(0, 0, canvSize, canvSize); |
|
// canvas.setFillColor(new Color(canvBackColor)); |
|
// canvas.fill(bgc); |
|
|
|
canvas.setFillColor(fillColor); |
|
canvas.setStrokeColor(strokeColor); |
|
canvas.setLineWidth(w); |
|
canvas.strokeEllipse(bgr); |
|
|
|
for (t = 0; t < deg; t++) { |
|
rect_x = ctr.x + rad * sinDeg(t) - w / 2; |
|
rect_y = ctr.y - rad * cosDeg(t) - w / 2; |
|
rect_r = new Rect(rect_x, rect_y, w, w); |
|
canvas.fillEllipse(rect_r); |
|
} |
|
// attempt to draw info text |
|
const canvTextRect = new Rect( |
|
0, |
|
100 - canvTextSize / 2, |
|
canvSize, |
|
canvTextSize |
|
); |
|
canvas.setTextAlignedCenter(); |
|
canvas.setTextColor(txtColor); |
|
canvas.setFont(Font.boldSystemFont(canvTextSize)); |
|
// canvas.drawTextInRect(`${Math.floor(batteryLevel * 100)}`, canvTextRect); |
|
canvas.drawTextInRect(text, canvTextRect); |
|
|
|
|
|
return canvas.getImage() |
|
} |
|
|
|
function leapYear(year) { |
|
return ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0); |
|
} |
|
|
|
// Month here is 1-indexed (January is 1, February is 2, etc). This is |
|
// because we're using 0 as the day so that it returns the last day |
|
// of the last month, so you have to add 1 to the month number |
|
// so it returns the correct amount of days |
|
function daysInMonth (month, year) { |
|
return new Date(year, month, 0).getDate(); |
|
} |