Widget Examples

okidoci · October 31, 2020, 1:20pm

Hi I admire your work! Thanks a lot! (Vielen lieben Dank! )
Would you mind helping me build a widget to grab the information from this website? The Colume: Month, last and Change are sufficient.
Thanks so much in advance
https://www.cmegroup.com/trading/equity-index/us-index/e-mini-sandp500.html

okidoci · October 31, 2020, 2:23pm

I tried it on my own. I’m a newbie and don’t understand why it doesn’t work. Could anyone help me please?

Thanks a lot.




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

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

//Define nighttime (19h - 7h) for styling changes
var nightTime = (hourNow >= 19 || hourNow < 7)

//Title text
let titleTxt = widget.addText("E-mini S&P 500 Futures Quotes")
titleTxt.font= Font.boldSystemFont(17)
titleTxt.leftAlignText()
widget.addSpacer(spc)

//Value text
let vlFnt = Font.semiboldSystemFont(20)

//Subtitle text
let ptFnt = Font.systemFont(8)
let ptCol

//Backgrund- & text colors
if (nightTime) {
  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() {
  let url='https://www.cmegroup.com/trading/equity-index/us-index/e-mini-sandp500.html'
  let wbv = new WebView()
  await wbv.loadURL(url)
  //javasript to grab data from the website
  let jsc = `
  var arr = new Array()

    var month1 = document.getElementById("quotesFuturesProductTable1").getElementsByTagName("tbody")[0].getElementsByTagName("tr")[0].getElementsByTagName("th")[0].innerText
    var month1Last = document.getElementById("quotesFuturesProductTable1").getElementsByTagName("tbody")[0].getElementsByTagName("tr")[0].getElementsByTagName("td")[2].innerText
    var month1Change = document.getElementById("quotesFuturesProductTable1").getElementsByTagName("tbody")[0].getElementsByTagName("tr")[0].getElementsByTagName("td")[3].innerText
    arr.push(month1)
    arr.push(month1Last)
    arr.push(month1Change)

    var month2 = document.getElementById("quotesFuturesProductTable1").getElementsByTagName("tbody")[0].getElementsByTagName("th")[1].innerText
    var month2Last = document.getElementById("quotesFuturesProductTable1").getElementsByTagName("tbody")[0].getElementsByTagName("tr")[1].getElementsByTagName("td")[2].innerText
    var month2Change = document.getElementById("quotesFuturesProductTable1").getElementsByTagName("tbody")[0].getElementsByTagName("tr")[1].getElementsByTagName("td")[3].innerText
    arr.push(month2)
    arr.push(month2Last)
    arr.push(month2Change)

    var month3 = document.getElementById("quotesFuturesProductTable1").getElementsByTagName("tbody")[0].getElementsByTagName("th")[2].innerText
    var month3Last = document.getElementById("quotesFuturesProductTable1").getElementsByTagName("tbody")[0].getElementsByTagName("tr")[2].getElementsByTagName("td")[2].innerText
    var month3Change = document.getElementById("quotesFuturesProductTable1").getElementsByTagName("tbody")[0].getElementsByTagName("tr")[2].getElementsByTagName("td")[3].innerText
    arr.push(month3)
    arr.push(month3Last)
    arr.push(month3Change)

    var month4 = document.getElementById("quotesFuturesProductTable1").getElementsByTagName("tbody")[0].getElementsByTagName("th")[3].innerText
    var month4Last = document.getElementById("quotesFuturesProductTable1").getElementsByTagName("tbody")[0].getElementsByTagName("tr")[3].getElementsByTagName("td")[2].innerText
    var month4Change = document.getElementById("quotesFuturesProductTable1").getElementsByTagName("tbody")[0].getElementsByTagName("tr")[3].getElementsByTagName("td")[3].innerText
    arr.push(month4)
    arr.push(month4Last)
    arr.push(month4Change)

  JSON.stringify(arr)
  `
  //Run the javascript
  let jsn = await wbv.evaluateJavaScript(jsc)
  //Parse the grabbed values into a variable
  let val = JSON.parse(jsn)
  //Assign the parts to single variables
    let month1 = val[0]
    let month1Last = val[1]
    let month1Change = val[2]
    let month2 = val[3]
    let month2Last = val[4]
    let month2Change = val[5]
    let month3 = val[6]
    let month3Last = val[7]
    let month3Change = val[8]
    let month4 = val[9]
    let month4Last = val[10]
    let month4Change = val[11]
  
  //R-Value text

    let tx1 = widget.addText(month1)
      tx1.leftAlignText()
      tx1.font = vlFnt
      tx1.textColor = new Color("cc1")


}

chrillek · October 31, 2020, 5:17pm

You could try to run your JavaScript in Safari with the Webdeveloper tools and see what happens there. I mean the template string you put into jsc

okidoci · November 1, 2020, 2:24am

I managed to fix it

Works smoothly

chrillek · November 1, 2020, 10:11am

And what did you do?

RosemaryOrchard · November 2, 2020, 9:46am

4 posts were split to a new topic: COVID 19, 7 Day Tracker

jimmyhartington · November 1, 2020, 8:34pm

Thanks. That fixed it

okidoci · November 2, 2020, 12:11am

seems not to work I managed to make it load the info but now it stops working again

Cubalibretom · November 2, 2020, 9:44am

Hello. is there a script where you can follow the current route on google maps in the widget? Thank you

KRJ · November 2, 2020, 11:50am

Are there any example of a simple script to show an image located to a website as a widget?
I mean an image with an exact URL?

I haven’t found something like that yet - sorry, I don’t know much about coding, but would like a widget to show an image/graphic from a website.

Thanks,
Kasper

supermamon · November 2, 2020, 12:56pm

simplest way would probably something like this

const url = 'https://url-of-image.com'
const req = new Request(url)
const image = await req.loadImage(url)
const widget = new ListWidget()
widget.backgroundImage = image

Hans-Dieter_Schuster · November 2, 2020, 4:07pm

Hallo,könntest du mir die Einstellung für dein Wetter Widget schicken,des schaut super aus ich würde des gerne auch haben
Mit freundlichen Grüßen

simonbs · November 2, 2020, 4:48pm

Hey everyone! Thanks for posting all the great widgets here and please keep them coming!

I’m working on a gallery of scripts and would love to include some cool widgets in the gallery when it’s launching as part of Scriptable 1.6.

If you’ve made a great widget, or any other script for the matter, and want to share it with the community, you can submit it here:

gallery.scriptable.app/submit

stschick94 · November 2, 2020, 5:21pm

I made a widget for my companies blog (Fraunhofer IAO Blog in german). It can be modified and used as a rss-reader pretty easy.
Github-Repository

Pascal_Gruisen · November 2, 2020, 5:28pm

Das sind sehr alte Screenshots. Der Code wurde seit dem verbessert. Schaue dir am besten die neueren Beiträge an und nimm den Code wo die Screenshots am besten gefallen.
Ich kann dir auch „mein“ Code schicken, weiß schon nicht mehr von wem der ist

olikdesign · November 2, 2020, 6:14pm

I made a script to show you your Woocommerce Sales of the month and the current year.
Feel free to use it and generate new features.

Currently its in german and uses only your shipment costs to show you the net.
Also the caching is missing. Maybe someone has an idea to do this.

gist.github.com

https://gist.github.com/olikdesign/4c9c5549686c81e728b065286eb0e750

woocommerce-sales

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

/**
 * Display Woocommerce Sales for current month
 * Widget made by Oliver Kehl - www.olikdesign.de
 *
 * WIDGET CONFIGURATION
 */

This file has been truncated. show original

hendrik.runte · November 3, 2020, 1:37pm

Wouldn’t the same functionality be delivered by Apple Maps (or even better?)

Hans-Dieter_Schuster · November 3, 2020, 7:14pm

Ok kannst du mir deinen schicken dein Widget gefällt mir ganz gut

Pascal_Gruisen · November 3, 2020, 9:02pm

Per PN, hab keine Ahnung von Github und Co., und hier einzukopieren sprengt den Rahmen vermute ich

hfa · November 4, 2020, 12:50am

wonderful!!!