Widget Examples

[chrillek]

Hi, I don’t know you managed to get the covid data from this form (if I enter 163 into the ID field, I only get some geometry data). However, I do know that one can select “JSON” in the bottom of the form (the default is “HTML” which should give you an easily parsable format.

If you insist on <tr><td> …: You have to use JavaScript DOM methods like in the original Covid script from @eqsOne. Something along the lines

let table = document.getElementById("COVID-Tabelle"); /* if it has an ID... */
let tr = table.getElementsByTagName("TR");
tr.forEach(row => {
  let td = tr.getElementsByTagName("TD");
 ...
})

Which is a pain… So if JSON works, use it.
Oh, and please tell me how to get the actual covid data with this form Thanks in advance

[eqsOne]

Hmm, your reference uses a rest api, no need to scratch the data from html if you just want to display the cases entry for Mainz i.e.

It loads much quicker by using a simple json request. Change the url into something like this and then just grab the ‘cases’ entry from the response.

[eqsOne]

@schm_and Here’s a quick snippet to show what I mean, this loads in just a second:

//* Mainz - Cases *//

let widget = new ListWidget()
widget.setPadding(16, 16, 16, 16)

const spc = 3
let time = new Date().getHours()

var night = (time >= 19 || time < 7)

//Title Text
let titleTxt = widget.addText("Mainz")
titleTxt.font= Font.boldSystemFont(17)
titleTxt.leftAlignText()
widget.addSpacer()

//Value Text
let vlFnt = Font.semiboldSystemFont(27)

//Untertitel Textstyle
let ptFnt = Font.systemFont(18)
let ptCol

//Hintergrund
if (night) {
  titleTxt.textColor = Color.lightGray()
  ptCol = Color.gray()
  const gradient = new LinearGradient()
  gradient.locations = [0, 1]
  gradient.colors = [
    new Color("192331"),
    new Color("222222")
  ]
  widget.backgroundGradient = gradient
}
else {
  titleTxt.textColor = Color.darkGray()
  ptCol = Color.darkGray()
}

await loadSite()

if (!config.runsInWidget) widget.presentSmall()
Script.setWidget(widget)
Script.complete()

async function loadSite() {
  //Source: Robert Koch-Institut, dl-de/by-2-0
  let url='https://services7.arcgis.com/mOBPykOjAyBO2ZKk/arcgis/rest/services/RKI_Landkreisdaten/FeatureServer/0/query?where=&objectIds=163&outFields=GEN,cases&geometry=&geometryType=esriGeometryPoint&inSR=4326&spatialRel=esriSpatialRelWithin&returnGeometry=false&outSR=4326&f=json'
  let req = new Request(url)
  let dta = await req.loadJSON()
  let res = dta.features[0].attributes
  let cases = res.cases+""
  
//**************************
  //Fälle Text
  if (res != null) {
    let tx2 = widget.addText(cases)
      tx2.leftAlignText()
      tx2.font = vlFnt
      tx2.textColor = Color.red()
  }
  //Fälle Untertitel
  let tx1 = widget.addText("Fälle")
  tx1.textColor = ptCol
  tx1.font= ptFnt
  tx1.leftAlignText()
  widget.addSpacer(spc)
}

[goldsucher]

I tried this with the weather widget, but my log says ‘image does not exists’ but the files are there. Do you have any idea whats wrong?

thanks!

[eqsOne]

Post #412 shows @egamez’s fixed original. The one in #414 is the same with a revised version of @mzeryck’s FSymbol tweak added.

[faye]

Could u help me again？it doesn’t work…

It is about #406 version。。。

[supermamon]

Please share your code instead and I’ll put in the updates.

[faye]

Thank you for your help

Widget Examples

To those who prefer the SFSymbol version, here’s the beauty with an adapted version of @mzeryck’s tweak applied. [IMG_5305] // Variables used by Scriptable. // These must be at the very top of the file. Do not edit. // icon-color: yellow; icon-glyph: cloud; // Widget Params // Don't edit this, those are default values for debugging (location for Cupertino). // You need to give your locations parameters through the widget params, more info below. const widgetParams = JSON.parse((args.widgetPa…

can you open it?

[supermamon]

Fixed it. Get the latest version.

[supermamon]

Here you go. Make sure you download all of these.

• no-background.js - updated today
• No Background Config.js - download and run this to create your wallpaper slices
• Weather Widget - based on #414

[faye]

soooo cool,i like it very much···THANKS.

[mzeryck]

Sorry it took me forever to reply… yes! @pdizin created a reminders integration here.

[mzeryck]

Okay, wow, this is super cool!!

[1116]

Do you mind share your code? love the text~that’s cool~

[Martin_Packer]

Now we’ve got to 448 contributions (with this one) can we start a second post?

I also think anyone who could summarise the technical contributions here would be doing the community a big favour.

[RosemaryOrchard]

There’s now a widget tag, I would suggest that each widget example from now on be posted as it’s own post here in the Scriptable category with the widget tag. If I get a chance I’ll try to split this thread into multiple posts, but it might be a challenge!

[sylumer]

@RosemaryOrchard

If I get a change I’ll try to split this thread into multiple posts, but it might be a challenge!

I think that would be like an attempt to untie the Gordian knot. Several of the discussions cross back and forth suggesting you might then need to merge or duplicate them to have comprehensive chronological topics.

I’m sure as Scriptable widget code authors get the hang of posting a new topic rather than cross threading a single one, it will all sort itself out. Pretty much every widget posted seems to evolve over several iterations, so just start the new topic on the next iteration.

What might be worth considering is locking this thread to avoid further conversation knotting.

[RosemaryOrchard]

I’d like to keep this thread open for people who want to ask about the currently posted widgets - I have managed to extract some posts which seem relatively well organised thanks to the reply feature though. I’ll keep an eye on the thread and move any newly posted widgets into their own posts though.

[mzeryck]

Thank you for doing this!!

[faye]

hi，may i ask why the code set up the pixels for 4inch display?
And can u fix it Adaptive to the phone? or it looks not so clear…