I tried to build my own widget but i couldn’t get it to work.
Is here anybody who worked with Scriptable and could help me displaying a card directly on my homescreen?
I quickly made a little script to display your first “pinned” card on Supernotes as a widget with Scriptable, it looks like this:
And here’s the script:
const API_KEY = args.widgetParameter
const cardCollection = await loadPinnedCards()
const cards = Object.values(cardCollection)
const widget = await createCardWidget(cards[0])
Script.setWidget(widget)
Script.complete()
async function createCardWidget(card) {
const date = new Date(Date.parse(card.data.modified_when))
const dateFormatter = new DateFormatter()
dateFormatter.useMediumDateStyle()
dateFormatter.useShortTimeStyle()
const strDate = dateFormatter.string(date)
const gradient = new LinearGradient()
gradient.locations = [0, 1]
gradient.colors = [
new Color("#ff607e"),
new Color("#ff6682")
]
const widget = new ListWidget()
widget.backgroundColor = new Color("#ff6682")
widget.backgroundGradient = gradient
// name
const nameElement = widget.addText(card.data.name)
nameElement.font = Font.boldSystemFont(16)
nameElement.textColor = Color.white()
nameElement.minimumScaleFactor = 0.75
widget.addSpacer(6)
// content
contentElement = widget.addText(card.data.markup)
contentElement.font = Font.mediumSystemFont(12)
contentElement.textColor = Color.white()
widget.addSpacer(6)
// date modified
const footerStack = widget.addStack()
const dateElement = footerStack.addText(strDate)
dateElement.font = Font.mediumSystemFont(12)
dateElement.textColor = Color.white()
dateElement.textOpacity = 0.8
// open the card directly in Supernotes app when clicking
widget.url = createCardUrl(card.data.id)
return widget
}
async function loadPinnedCards() {
const req = new Request("https://api.supernotes.app/v1/user/pins")
req.method = "get"
req.headers = {"Content-Type": "application/json", "Api-Key": API_KEY};
const jsonResponse = await req.loadJSON();
return jsonResponse;
}
function createCardUrl(cardId) {
return `supernotes://?cardId=${cardId}`
}
And finally the config setting on the home screen, where the Parameter is a Supernotes API key:
Hope that helps!
3 Likes
Wow! Thank you so much - I will play around with this code and see what I can get.