Mini Widget

// script adapted by @fooskow, using Slowlydev base and @tempsquared circle battery script.

const DEV_MODE = false //for developer only
const DEV_PREVIEW = "medium" //for developer only (this script is specialy made for a medium sized widget)

const CALENDAR_URL = "calshow://" //Apple Calendar App, if your favorite app does have a URL scheme feel free to change it
const WEATHER_URL = "" //there is no URL for the Apple Weather App, if your favorite app does feel free to add it

// Battery Const
const canvSize = 200;
const canvTextSize = 45;
const canvas = new DrawContext();
canvas.opaque = false;
const battCircleRemainColor = new Color('#28cc57'); //Battery remaining color
const battCircleDepletedColor = new Color('#4c4b50'); //Battery depleted color
const battCircleBGColor = new Color('#4c4b50'); //Widget background color
const battCircleTextColor = new Color('#fff'); //Widget text color (use same color as above to hide text)

const canvWidth = 24; //Battery circle thickness
const canvRadius = 88; //Battery circle radius

canvas.size = new Size(canvSize, canvSize);
canvas.respectScreenScale = true;
const batteryLevel = Device.batteryLevel();

// Set to true for an image background, false for no image.
const imageBackground = true

// Set to true to reset the widget's background image.
const forceImageUpdate = true

const files = FileManager.local()

const widget = new ListWidget()

if (imageBackground) {

  // Determine if our image exists and when it was saved.
  const path = files.joinPath(files.documentsDirectory(), "weather-cal-image")
  const exists = files.fileExists(path)

  // If it exists and an update isn't forced, use the cache.
  if (exists && (config.runsInWidget || !forceImageUpdate)) {
    widget.backgroundImage = files.readImage(path)

  // If it's missing when running in the widget, use a gray background.
  } else if (!exists && config.runsInWidget) {
      widget.backgroundColor = Color.gray()

  // But if we're running in app, prompt the user for the image.
  } else {
      const img = await Photos.fromLibrary()
      widget.backgroundImage = img
      files.writeImage(path, img)
  }

// If it's not an image background, show the gradient.
} else {
  let gradient = new LinearGradient()
  let gradientSettings = await setupGradient()

  gradient.colors = gradientSettings.color()
  gradient.locations = gradientSettings.position()

  widget.backgroundGradient = gradient
}


const widgetBackground = widget.backgroundImage
const stackBackground = new Color("#303032") //Smaller Container Background
const calendarColor = new Color("#EA3323") //Calendar Color

const stackSize = new Size(60, 60) //0 means its automatic

const stackBottomSize = new Size(0, 60)

if (config.runsInWidget || DEV_MODE) {

    const date = new Date()
    const dateNow = Date.now()

    let df_Name = new DateFormatter()
    let df_Month = new DateFormatter()
    df_Name.dateFormat = "EEEE"
    df_Month.dateFormat = "MMMM"

    const dayName = df_Name.string(date)
    const dayNumber = date.getDate().toString()
    const monthName = df_Month.string(date)

    const events = await CalendarEvent.today([])

    let futureEvents = []

    for (const event of events) {
        if (futureEvents.length == 2) { break }
        if (event.startDate.getTime() > date.getTime() && !event.isAllDay) {
            futureEvents.push(event)
        }
    }

    let widget = new ListWidget()
    widget.backgroundImage = widgetBackground
    widget.setPadding(0, 06, 0, 6)

    //Top Row (Date & Weather)
    let topRow = widget.addStack()
    topRow.layoutHorizontally()

    //Top Row Date
    let dateStack = topRow.addStack()
    dateStack.centerAlignContent()
    dateStack.setPadding(-10, -10, -10, -10)

    dateStack.backgroundColor = stackBackground
    dateStack.cornerRadius = 14
    dateStack.size = stackSize

    dateStack.addSpacer()

let dateTextStack = dateStack.addStack()
    dateTextStack.layoutVertically()
    dateTextStack.centerAlignContent()

    let dayNameStack = dateTextStack.addStack()
    dayNameStack.layoutHorizontally()
    dayNameStack.centerAlignContent()
    dayNameStack.size = new Size (70, 10)

    let dayNameTxt =  dayNameStack.addText(dayName.toUpperCase())
    dayNameTxt.centerAlignText()
    dayNameTxt.font = Font.boldSystemFont(8)
    dayNameTxt.textColor = calendarColor



    let dayNumberStack = dateTextStack.addStack()
dayNumberStack.centerAlignContent()
dayNumberStack.size = new Size (70, 32)

    let dayNumberTxt = dayNumberStack.addText(dayNumber)
    dayNumberTxt.centerAlignText()
    dayNumberTxt.font = Font.lightSystemFont(34)
    dayNumberTxt.textColor = Color.white()


    dateStack.addSpacer()

    topRow.addSpacer(28)

    widget.addSpacer()

    //Top Row Weather
    let weatherStack = topRow.addStack()
    weatherStack.layoutHorizontally()
    weatherStack.centerAlignContent()
    weatherStack.setPadding(0, 8, 0, 0)

    weatherStack.backgroundColor = stackBackground
    weatherStack.cornerRadius = 14
    weatherStack.size = stackSize
    weatherStack.url = WEATHER_URL

    drawArc(
  Math.floor(batteryLevel * 100 * 3.6),
  battCircleRemainColor,
  battCircleDepletedColor,
  battCircleTextColor,
  Math.floor(batteryLevel * 100).toString() + "%",
  ""
)

    weatherStack.addImage(canvas.getImage())

    weatherStack.addSpacer()

    //Bottom Row Events
    let eventStack = widget.addStack()
    eventStack.layoutHorizontally()
    eventStack.setPadding(7, 7, 7, 7)
    eventStack.centerAlignContent()

    eventStack.backgroundColor = stackBackground
    eventStack.cornerRadius = 14
    eventStack.size = stackBottomSize
    let eventInfoStack

    eventStack.addSpacer(1)
    eventStack.url = CALENDAR_URL

    let eventItemsStack = eventStack.addStack()
    eventItemsStack.layoutVertically()

    if (futureEvents.length != 0) {

        for (let i = 0; i < futureEvents.length; i++) {

            let futureEvent = futureEvents[i]
            const time = formatTime(futureEvent.startDate) + " - " + formatTime(futureEvent.endDate)
            const eventColor = new Color("#" + futureEvent.calendar.color.hex)
            eventInfoStack = eventItemsStack.addStack()
            eventInfoStack.layoutVertically()

            let eventTitle = eventItemsStack.addText(futureEvent.title)
            eventTitle.font = Font.boldRoundedSystemFont(14)
            eventTitle.textColor = calendarColor
            eventTitle.lineLimit = 1

            let eventTime = eventItemsStack.addText(time)
            eventTime.font = Font.boldRoundedSystemFont(10)
            eventTime.textColor = Color.white()

            if (i == 0) {
                eventItemsStack.addSpacer(3)
            }
        }

    } else {

        let nothingText = eventStack.addText("Nessun evento")
        nothingText.font = Font.boldRoundedSystemFont(14)
        nothingText.textColor = calendarColor
        nothingText.textOpacity = 0.5

    }

    eventStack.addSpacer()

        const font = Font.lightSystemFont(20)
    let calendarSymbol = SFSymbol.named("calendar")
    calendarSymbol.applyFont(font)

    let iconStack = eventStack.addStack()
    iconStack.setPadding( 0, 0, 30, 2)

    let eventIcon = iconStack.addImage(calendarSymbol.image)
    eventIcon.imageSize = new Size(12, 12)
    eventIcon.resizable = true
    eventIcon.tintColor = Color.white()
    eventIcon.rightAlignImage()

    eventStack.addSpacer(-10)

    Script.setWidget(widget)

    if (DEV_MODE) {
        if (DEV_PREVIEW == "small") { widget.presentSmall() }
        if (DEV_PREVIEW == "medium") { widget.presentMedium() }
        if (DEV_PREVIEW == "large") { widget.presentLarge() }
    }

    Script.complete()
}

function removeDigits(x, n) { return (x - (x % Math.pow(10, n))) / Math.pow(10, n) }

function formatAMPM(UNIX_timestamp) {

    var date = new Date(UNIX_timestamp * 1000)
    var hours = date.getHours()

// Option 1: uncomment this for am/pm time with hours from 0-12
    // var ampm = hours >= 12 ? 'PM' : 'AM'
    // hours = hours % 12
    // hours = hours ? hours : 12
    // var strTime = hours.toString() + ampm

    // Option 2: german localisation
    var strTime = hours.toString() + ":00"
    return strTime
}

function formatTime(date) {
    let df = new DateFormatter()
    df.useNoDateStyle()
    df.useShortTimeStyle()
    return df.string(date)
}


function sinDeg(deg) {
  return Math.sin((deg * Math.PI) / 180);
}

function cosDeg(deg) {
  return Math.cos((deg * Math.PI) / 180);
}

function drawArc(deg, fillColor, strokeColor, txtColor, text, label) {
  let ctr = new Point(canvSize / 2, canvSize / 2),
  bgx = ctr.x - canvRadius;
  bgy = ctr.y - canvRadius;
  bgd = 2 * canvRadius;
  bgr = new Rect(bgx, bgy, bgd, bgd);

  // canvas.opaque = false;

  canvas.setFillColor(fillColor);
  canvas.setStrokeColor(strokeColor);
  canvas.setLineWidth(canvWidth);
  canvas.strokeEllipse(bgr);

  for (t = 0; t < deg; t++) {
    rect_x = ctr.x + canvRadius * sinDeg(t) - canvWidth / 2;
    rect_y = ctr.y - canvRadius * cosDeg(t) - canvWidth / 2;
    rect_r = new Rect(rect_x, rect_y, canvWidth, canvWidth);
    canvas.fillEllipse(rect_r);
  }
  // attempt to draw info text
  const canvTextRect = new Rect(
    0,
    100 - canvTextSize / 2,
    canvSize,
    canvTextSize
  );
  const canvLabelRect = new Rect(
    0,
    (100 - canvTextSize / 2)-30,
    canvSize,
    canvTextSize+5
  );
  canvas.setTextAlignedCenter();
  canvas.setTextColor(txtColor);
  canvas.setFont(Font.boldSystemFont(canvTextSize));
  canvas.drawTextInRect(text, canvTextRect);
  canvas.drawTextInRect(label, canvLabelRect);
  // return canvas.getImage()
}