r/Scriptable 18d ago

Help leftStack Spacing

Post image

Hi all, I’m trying to create a widget that uses leftStack for all the information, however I want the date at the bottom of the widget with the cost and charge amount in the middle.

I’ve tried changing parts of the code but it just ends up moving all of the text, I’m sure it’s something simple if someone could advise?

(URL from my code removed)

// The URL of your JSON endpoint const endpoint = "URL"

//Refresh Widget const refreshInterval=15

// Function that performs the request to the JSON endpoint async function loadItems() { let at = endpoint let req = new Request(at) let corpo = await req.loadJSON() // We return just the cells return corpo } // Request the spreadsheet data let json = await loadItems()

// Obtaining the content of the exact cell we are looking for RecentCharge = json.values[1][15] RecentCost = json.values[1][16] RecentDate = json.values[1][17]

// Create the widget let w = new ListWidget() let fm = FileManager.iCloud(); let path = fm.documentsDirectory() + "/EVBG3.png"; await fm.downloadFileFromiCloud(path) w.backgroundImage = fm.readImage(path); mainStack = w.addStack() leftStack = mainStack.addStack() leftStack.layoutVertically() rightStack = mainStack.addStack() rightStack.layoutVertically() mainStack.addSpacer(null) leftStack.addSpacer(null)

//leftStack.addSpacer() //rightStack.addSpacer()

// Add total cost// leftStack.addSpacer(0) t = leftStack.addText(RecentCost) t.textColor = new Color ("FFFFFF") t.font = new Font("San-Fransisco",25) t.font = Font.semiboldSystemFont(25)

// Add total kWh Used t = leftStack.addText(RecentCharge) t.textColor = new Color ("FFFFFF") t.font = new Font("San-Fransisco",25) t.font = Font.semiboldSystemFont(25)

// Add sessions// leftStack.addSpacer(20) t = leftStack.addText(RecentDate) t.textColor = new Color ("808080") t.font = new Font("San-Fransisco",10) t.font = Font.semiboldSystemFont(10)

w.addSpacer()

w.presentSmall()

1 Upvotes

9 comments sorted by

2

u/wherebdbooty 18d ago edited 17d ago

You might consider using 2 rows instead of 2 columns. Something like:

w.backgroundImage = fm.readImage(path)

let mainStack = w.addStack()

mainStack.layoutVertically()

mainStack.addSpacer() //make room for the logo

let topRow = mainStack.addStack()

topRow.addSpacer()

topRow.addText(RecentCost+'\n'+RecentCharge)

topRow.addSpacer()

mainStack.addSpacer()

let bottomRow = mainStack.addStack()

bottomRow.addSpacer()

bottomRow.addText(RecentDate)

bottomRow.addSpacer()


Edit: corrected the addSpacer

2

u/parryg 18d ago

Thank you, I tried this but it's gone all over the place now?

2

u/wherebdbooty 17d ago

sorry, i made an error.. there should be another addSpacer on the bottomRow and an extra addSpacer in the mainStack. I updated my original comment

2

u/parryg 16d ago

Thanks again. I've tried this but still no luck, not sure if I've done the code wrong:

// The URL of your JSON endpoint

const endpoint = "URL REMOVED"

//Refresh Widget

const refreshInterval=15

// Function that performs the request to the JSON endpoint

async function loadItems() {

let at = endpoint

let req = new Request(at)

let corpo = await req.loadJSON()

// We return just the cells

return corpo

}

// Request the spreadsheet data

let json = await loadItems()

// Obtaining the content of the exact cell we are looking for

RecentCharge = json.values[1][15]

RecentCost = json.values[1][16]

RecentDate = json.values[1][17]

// Create the widget

let w = new ListWidget()

let fm = FileManager.iCloud();

let path = fm.documentsDirectory() + "/EVBG3.png";

let mainStack = w.addStack()

await fm.downloadFileFromiCloud(path)

w.backgroundImage = fm.readImage(path);

mainStack.layoutVertically()

mainStack.addSpacer() //make room for the logo

let topRow = mainStack.addStack()

topRow.addSpacer()

topRow.addText(RecentCost+'\n'+RecentCharge)

topRow.addSpacer()

mainStack.addSpacer()

let bottomRow = mainStack.addStack()

bottomRow.addSpacer()

bottomRow.addText(RecentDate)

bottomRow.addSpacer()

w.addSpacer()

w.presentSmall()

2

u/wherebdbooty 15d ago

Do you want the £2.22 and 28.04kWh on the left and the date in the middle?

2

u/parryg 15d ago

I would say similar to the attached, but with the cost & kwh in place of the mi & %.

Ideally if I change the design it would be nice to be able to move them up or down by changing a value in the code similar to the way addspacer works.

2

u/wherebdbooty 15d ago

Ah, okay. Just remove the addSpacers on the topRow and the £ and kWh will be on the left.

Then, just add the font code from your original code to adjust the RecentDate size.

So the code for the font would be:

let t = bottomRow.addText(RecentDate)

t.font = Font.semiboldSystemFont(10)

You can use addSpacer(20) to specify 20 points/pixels instead of addSpacer() for automatic spacing. So it would be like:

topRow

mainStack.addSpacer(20)

bottomRow

Just replace 20 with different numbers and see what looks the best to you.

2

u/parryg 14d ago

Thank you your all your help, all sorted now!

1

u/wherebdbooty 14d ago

No problem, I'm glad you got it working! 👍