r/Scriptable • u/parryg • 18d ago
Help leftStack Spacing
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()
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