Widget Examples

Hi, recent lurker and Scriptable newbie here. I just published a little “chat” widget for Scriptable. You can quickly start a conversation with a predefined list of contacts through SMS, Call, FaceTime + Audio, and WhatsApp. Thought some of you might find it useful.

You can get the script here: https://github.com/andyngo/conversable-for-scriptable

10 Likes

Try to change the language setting of your device. I succeed by this way.

How do you do to change the language of days and months?? Many thanks

1 Like

Hi erkka,the code jump to system calendar is very useful, but it always kump to scriptable first before go to calendar when I run the widge on the desk.Can the widget jump to calendar directly or there is something wrong with my setting?

That should be possible :grin:


I created a weather widget supporting netatmo and openweathermap as sources. It can be installed multiple times in small, medium and/or large. Location can be provided or it will take the current one. Data is cached, so it will always display something (even if there is no internet connection).

I updated the widget to also support https://www.wunderground.com . See repository for details.

2 Likes

The newest update (courtesy of @theguy69) allows you to set the locale (in the SETUP section), which will determine the language of the dates displayed. Hope that helps!

This looks great, got it working fast, even a a complete noob.
Where do I have to change code to get it perfect for iPhone X? It looks like sunset / sunrise should be smaller font, or the “border” should be smaller?
In Medium size I think it can be tweaked as well, looks “cut off” on top and bottom

I think it’s meant to be like that, because if you look closely at their screenshot, that’s what it looks like?

1 Like

Look at the light mode screenshots provided, the sunset time appears in 1 line, not 2. The medium widget also has a larger “white border” at the top. To my guess, the looks have to be tweaked according to the screen size, but I have no idea how/where to do that

This is a great widget! I am getting widget.addStack is not a function error. Do you know what that issue is? Thank you!

For the small sized widget you can try tweaking the image (sunrise/sunset) sizes (line 67):

const TODAY_IMAGE_SIZE = new Size(20, 20);

Reduce both 20s until it fits.

For the medium sized widget you can tweak the height of the forecast row (line 65):

const FORECAST_STACK_MEDIUM_SIZE = new Size(0, 65);

Reduce 65 until it fits.

I wonder if you are on an older version of Scriptable? Try going to the App Store app and updating - version 1.5.1 of Scriptable came out a few days ago with support for WidgetStacks.

Yep that was it! I was able to get the widget to work, but the background image doesn’t show up. I set both imagebackground and foreceimageupdate to “true”, it shows the background image in Scriptable, but when I look on my home screen, it just shows a grey background. What am I doing wrong? Thank you for your help!

I made a simple(ish) Sticky Notes widget. Only requirement is config folder in the scriptable directory.

Supports multiple sticky notes and clicking the text should allow editing config / text. (Save is at top of the form).

1 Like

Set forceImageUpdate to false, and it should work! I know it’s a bit clunky, but that variable is meant to only be “true” when you’re running the script inside Scriptable and selecting a new image.

Thank you! I got it to work now! Great work!

1 Like

Ohhh, what did I do to deserve a generous shout out for this? The widget looks great. I’ll be applying some of your techniques in Conversable soon (I like how you’re able to define columns and what goes in each easily). :+1:

Edit: I think the credit goes to @theguy69 instead. I just checked the PR for Weather-Cal and it seems like he was the one who added the locale strings.

1 Like

Hi, I’m trying to add a module to show today’s reminders to this but I’m running into a few roadblocks. I’m completely new to JavaScript so I’ve tried adapting some of the code from other widgets posted in this thread and so far this is what I’ve got:

function tasks(column, alignment) {

function sortItems(first, second) {
         return first.dueDate - second.dueDate
}
 
const allTasks = await Reminder.incompleteDueToday([])

if (allTasks.length > 0) {
  
  const heading = widget.addText("Reminders:");
    allTasks.sort(sortItems).slice(0, 2).forEach(({ title, dueDate }) => {
      const task = widget.addText(`○ ${title}`);
      task.textColor = Color.white()
      task.font = Font.regularSystemFont(18)
      task.lineLimit = 1;
      const dueTime = String(dueDate)
      const options = { hour: 'numeric', minute: '2-digit'};
const americanDateTime = new Intl.DateTimeFormat('en-US', options).format;
 const due = widget.addText("     " + americanDateTime(dueDate)); 
           due.textOpacity = .7
        due.textColor = Color.white()
        due.font = Font.mediumSystemFont(14)
     
    widget.addSpacer(10);  
    });
  }
}

The overall code seems to work when I try to run it as a standalone script, but when I try to run it as part of mzeryck’s widget I get this error: “SyntaxError: Unexpected identifier ‘Reminder’. Expected ‘;’ after variable declaration.” in regards to this line of code: const allTasks = await Reminder.incompleteDueToday([])

Anyone have any suggestions on what’s going on/how I can fix it?

Ahh you are right! I am a total GitHub noob - I saw Conversable on @theguy69’s GitHub page and made an assumption :man_facepalming: but I do love Conversable, such an awesome design!

1 Like