WidgetStack centers my entire Content

Scriptable
1

Hey,
I’ve been dabbling in Scriptable for a while now, but I have basic knowledge of JS. If I bind the text normally to the widget (widget.) the text is normal in the widget, but as soon as I create a stack for each text block and bind the text to it the text is suddenly somehow in the middle (screenshot attached) does anyone have an idea why this is so? I would like to have the “active” to the right of the text, and it seems to only work with a stack.

IMG_0989
IMG_09891170×634 54.7 KB 

// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: deep-blue; icon-glyph: book;

let widget = await createWidget()
if (config.runsInWidget) {
  // The script runs inside a widget, so we pass our instance of ListWidget to be shown inside the widget on the Home Screen.
  Script.setWidget(widget)
} else {
  // The script runs inside the app, so we preview the widget.
  widget.presentMedium()
}
// Calling Script.complete() signals to Scriptable that the script have finished running.
// This can speed up the execution, in particular when running the script from Shortcuts or using Siri.
Script.complete()

async function createWidget() {
  let appIcon = await loadAppIcon()
  let title = "Homeassistant Status"
  let widget = new ListWidget()
  widget.backgroundColor = new Color("fffff",1);
  widget.setPadding(0,0,0,0)
  // Show app icon and title
  let titleStack = widget.addStack()
  let appIconElement = titleStack.addImage(appIcon)
  appIconElement.imageSize = new Size(15, 15)
  appIconElement.cornerRadius = 4
  titleStack.addSpacer(4)
  let titleElement = titleStack.addText(title)
  titleElement.textColor = Color.white()
  titleElement.textOpacity = 0.7
  titleElement.font = Font.mediumSystemFont(13)
  widget.addSpacer(8)

  let schreibtischStack = widget.addStack()
  schreibtischStack.topAlignContent()
  let wohnzimmerStack = widget.addStack()
  wohnzimmerStack.topAlignContent()
  let platzhalterStack = widget.addStack()
  platzhalterStack.topAlignContent()
  let platzhalter2Stack = widget.addStack()
  platzhalter2Stack.topAlignContent()

  let titleSchreibtisch = schreibtischStack.addText("Status Schreibtisch")
  titleSchreibtisch.textColor = Color.white()
  titleSchreibtisch.font = Font.boldSystemFont(12)
  schreibtischStack.addSpacer(6)
  let statusSchreibtisch = schreibtischStack.addText("Aktiv")
  //statusSchreibtisch.minimumScaleFactor = 0.5
  statusSchreibtisch.textColor = Color.green()
  statusSchreibtisch.font = Font.mediumSystemFont(12)

  widget.addSpacer(2)

  let titleWohnzimmer = wohnzimmerStack.addText("Status Wohnzimmer")
  titleWohnzimmer.textColor = Color.white()
  titleWohnzimmer.font = Font.boldSystemFont(12)
  wohnzimmerStack.addSpacer(6)
  let statusWohnzimmer = wohnzimmerStack.addText("Aktiv")
  //statusWohnzimmer.minimumScaleFactor = 0.5
  statusWohnzimmer.textColor = Color.white()
  statusWohnzimmer.font = Font.mediumSystemFont(12)

  widget.addSpacer(2)

  let titlePlatzhalter = platzhalterStack.addText("Status Platzhalter")
  titlePlatzhalter.textColor = Color.white()
  titlePlatzhalter.font = Font.boldSystemFont(12)
  platzhalterStack.addSpacer(6)
  let statusPlatzhalter = platzhalterStack.addText("Aktiv")
  //statusPlatzhalter.minimumScaleFactor = 0.5
  statusPlatzhalter.textColor = Color.white()
  statusPlatzhalter.font = Font.mediumSystemFont(12)

  widget.addSpacer(2)

  let titlePlatzhalter2 = platzhalter2Stack.addText("Status Wohnzimmer")
  titlePlatzhalter2.textColor = Color.white()
  titlePlatzhalter2.font = Font.boldSystemFont(12)
  platzhalter2Stack.addSpacer(6)
  let statusPlatzhalter2 = platzhalter2Stack.addText("Aktiv")
  //statusPlatzhalter2.minimumScaleFactor = 0.5
  statusPlatzhalter2.textColor = Color.white()
  statusPlatzhalter2.font = Font.mediumSystemFont(12)

  widget.addSpacer(2)

  return widget
}

async function loadAppIcon() {
  let url = "https://is5-ssl.mzstatic.com/image/thumb/Purple124/v4/21/1e/13/211e13de-2e74-4221-f7db-d6d2c53b4323/AppIcon-1x_U007emarketing-0-7-0-85-220.png/540x540sr.jpg"
  let req = new Request(url)
  return req.loadImage()
}
2

Depending on your wishes, you can either expand the spacer between the titles and “active” and make it dynamic by not giving it any argument or add a dynamic spacer at the end after “active”. You should then also change the padding of the widget, otherwise the text will be right at the edge of it.

3

The padding of the widget is at “0,0,0,0” therefore it should be completely in place. Can you give me an example? The “Active” I get only with a spacer right, otherwise it is under the text?

4

I meant that you add the spacer here

5a641840a99fed55891deadb934eded05699f600
5a641840a99fed55891deadb934eded05699f6001170×634 64.6 KB 

  // ...
  let titleSchreibtisch = schreibtischStack.addText("Status Schreibtisch")
  titleSchreibtisch.textColor = Color.white()
  titleSchreibtisch.font = Font.boldSystemFont(12)
  schreibtischStack.addSpacer(6)
  let statusSchreibtisch = schreibtischStack.addText("Aktiv")
  //statusSchreibtisch.minimumScaleFactor = 0.5
  statusSchreibtisch.textColor = Color.green()
  statusSchreibtisch.font = Font.mediumSystemFont(12)

  // this is new
  schreibtischStack.addSpacer()
  // ...

and add that new spacer also to wohnzimmerStack, platzhalterStack and platzhalter2Stack.