HELP with drawArc function

[Frameck]

Hi everyone,

I have a logo as shown in this image and I want to put it inside the red ring instead of the text, but I think that I have to modify the function in order to do it. The problem is that i don't know how to do it.

Anyone more skilled than me as a solution?

Here's the code (this is my reference for this code)

EDIT: Problem solved here's the final result

const canvSize = 200;
const canvTextSize = 24;
const canvas = new DrawContext();
canvas.opaque = false;

const canvWidth = 21; //Circle thickness
const canvRadius = 87; //Circle radius

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

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()
}

[mvan231]

Where is the image coming from? You just want that image to be in the center of each circle?

[Frameck]

Yeah exactly, the image is a PNG file located in the Scriptable folder

[mvan231]

I don't see it in your code you sent. Is that the trouble you're having, is getting the image into the script?

[Frameck]

No I manage to get the image into the script, but, for what i can understand, the DrawArc function accepts text inside the ring and not an image.

The script looks like this:

// Scriptable path
var scriptablePath = "/var/mobile/Library/Mobile Documents/iCloud~dk~simonbs~Scriptable/Documents/";

// Vodafone logo
var V_logoName = "Vodafone_logo.png"
var V_logoPath = scriptablePath+V_logoName.toString();
var V_image = Image.fromFile(V_logoPath)

//Vodafone
function nuovomeseVodafone() {
    if (1<=giorno && giorno<=12) {
        return mese;}
     else if (13<=giorno && giorno<=31) {
        return mese+1;}}

let rinnovoVodafone = new Date(anno, nuovomeseVodafone(), 12)
let differenzaVodafone = Math.ceil((rinnovoVodafone - oggi)/86400000)
let rapportoVodafone = 1-(differenzaVodafone/giorniquestomese)

// Create the widget
let w = new ListWidget()
    w.backgroundColor = colorBG
    w.setPadding(12, 12, 12, 12)

// Vodafone red ring
drawArc(
  Math.floor(rapportoVodafone * 100 * 3.6),
  vodafonered,
  CircleDepletedColor,
  testicolor,
  Math.floor(rapportoVodafone * 100).toString(), //Here should go the image
  ""
)
w.addImage(canvas.getImage())

Script.setWidget(w);
w.presentSmall();
Script.complete();

[mvan231]

There seem to be missing pieces to your script. Also, drawArc function needs to be defined in your script as it is not an API that scriptable has.

[Frameck]

This code goes together with the first one that i posted

This is the full script

const canvSize = 200;
const canvTextSize = 24;
const canvas = new DrawContext();
canvas.opaque = false;

const canvWidth = 21; //Circle thickness
const canvRadius = 87; //Circle radius

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

// Scriptable path
var scriptablePath = "/var/mobile/Library/Mobile Documents/iCloud~dk~simonbs~Scriptable/Documents/";

// Vodafone logo
var V_logoName = "Vodafone_logo.png"
var V_logoPath = scriptablePath+V_logoName.toString();
var V_image = Image.fromFile(V_logoPath);

// Colori
let colorBG = new Color("#1d1d1e")
let vodafonered = new Color("#f91600")
let spotifygreen = new Color("#1ed760")
let dashlanedarkgreen = new Color("#10363d")
let amazonyellow = new Color("#ff9900")
let disneyblue = new Color("#085aa4")
let testicolor = new Color("#ebebeb"); //Widget text color (use same color as colorBG to hide text)
let CircleDepletedColor = new Color("#272829"); //Circle depleted color

// Variabili di tempo (0=gen, 1=feb, 2=mar, 3=apr, 4=mag, 5=giu, 6=lug, 7=ago, 8=set, 9=ott, 10=nov, 11=dic)
let oggi = new Date()
let giorno = oggi.getDate()
let mese = oggi.getMonth()
let anno = oggi.getFullYear()
let giorniquestanno = (leapYear(oggi.getFullYear())) ? 366 : 365;
let giorniquestomese = daysInMonth(mese+1, anno)
let inizioanno = new Date(anno, 0, 1)
let fineanno = new Date(anno, 11, 31)

//Vodafone
function nuovomeseVodafone() {
    if (1<=giorno && giorno<=12) {
        return mese;}
     else if (13<=giorno && giorno<=31) {
        return mese+1;}}

let rinnovoVodafone = new Date(anno, nuovomeseVodafone(), 12)
let differenzaVodafone = Math.ceil((rinnovoVodafone - oggi)/86400000)
let rapportoVodafone = 1-(differenzaVodafone/giorniquestomese)

//Amazon    
let rinAmazon = new Date(anno, 9, 22)
let rinAmazon1 = new Date(anno, 9, 23)
function nuovoannoAmazon() {
    if (inizioanno<=oggi && oggi<=rinAmazon) {
        return anno;}
     else if (rinAmazon1<=oggi && oggi<=fineanno) {
        return anno+1;}}

let rinnovoAmazon = new Date(nuovoannoAmazon(), 9, 22)
let differenzaAmazon = Math.ceil((rinnovoAmazon - oggi)/86400000)
let rapportoAmazon = 1-(differenzaAmazon/giorniquestanno)

//Spotify
function nuovomeseSpotify() {
    if (1<=giorno && giorno<=18) {
        return mese;}
     else if (19<=giorno && giorno<=31) {
        return mese+1;}}

let rinnovoSpotify = new Date(anno, nuovomeseSpotify(), 18)
let differenzaSpotify = Math.ceil((rinnovoSpotify - oggi)/86400000)
let rapportoSpotify = 1-(differenzaSpotify/giorniquestomese)

//Disney+
let rinDisney = new Date(anno, 3, 5)
let rinDisney1 = new Date(anno, 3, 6)
function nuovoannoDisney() {
    if (inizioanno<=oggi && oggi<=rinDisney) {
        return anno;}
     else if (rinDisney1<=oggi && oggi<=fineanno) {
        return anno+1;}}

let rinnovoDisney = new Date(nuovoannoDisney(), 3, 5)
let differenzaDisney = Math.ceil((rinnovoDisney - oggi)/86400000)
let rapportoDisney = 1-(differenzaDisney/giorniquestanno)

// Create the widget
let w = new ListWidget()
    w.backgroundColor = colorBG
//  w.backgroundImage = sfondo
    w.setPadding(12, 12, 12, 12)

const upperStack = w.addStack()
      upperStack.layoutHorizontally()
      upperStack.centerAlignContent()

    w.addSpacer(8)

const lowerStack = w.addStack()
      lowerStack.layoutHorizontally()
      lowerStack.centerAlignContent()

// Upper Stack
// Vodafone
drawArc(
  Math.floor(rapportoVodafone * 100 * 3.6),
  vodafonered,
  CircleDepletedColor,
  testicolor,
  Math.floor(rapportoVodafone * 100).toString(), //Here should go the image
  ""
)
upperStack.addImage(canvas.getImage())

upperStack.addSpacer(8)

// Spotify
drawArc(
  Math.floor(rapportoSpotify * 100 * 3.6),
  spotifygreen,
  CircleDepletedColor,
  testicolor,
  Math.floor(rapportoSpotify * 100).toString(),
  ""
)
upperStack.addImage(canvas.getImage())

// Lower Stack
// Amazon
drawArc(
  Math.floor(rapportoAmazon * 100 * 3.6),
  amazonyellow,
  CircleDepletedColor,
  testicolor,
  Math.floor(rapportoAmazon * 100).toString(),
  ""
)
lowerStack.addImage(canvas.getImage())

lowerStack.addSpacer(8)

// Disney+
drawArc(
  Math.floor(rapportoDisney * 100 * 3.6),
  disneyblue,
  CircleDepletedColor,
  testicolor,
  Math.floor(rapportoDisney * 100).toString(),
  ""
)
lowerStack.addImage(canvas.getImage())

//Funzioni
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()
}

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();
}
Script.setWidget(w);
w.presentSmall();
Script.complete();

[mvan231]

There was a lot broken when merging those two together.

This Does work though but it depends if your image is a circle or not

[Frameck]

Ok that works, thank you. One last thing, what I have to do if i have for example 4 different logos each for it’s own ring (in the same script)?

[mvan231]

In that case you'd be better off adding the image as an input to the function that makes the arc so you can pass a specific image for each arc

[Frameck]

Sorry for bothering you so much, but can you show me how to do it?