Home

Awesome

iOS News Widget for Scriptable

iOS Scriptable News Widget (for websites using WordPress and RSS feeds) Tap on a news in the widget to open it directly in your browser.

widgets

List of contents

If you'd like to support my work with a coffee 😊: https://ko-fi.com/saudumm

<a name="requirements"></a>

Requirements:

<a name="support"></a>

Support

I just started learning JavaScript, so there will be bugs. If there are any issues or questions, feel free to open an issue here on GitHub or contact me via Twitter: @saudumm Please mention the URL of the website or RSS feed, so I can help you faster.

<a name="notes-and-bugs"></a>

Notes and known bugs

<a name="changelog"></a>

Changelog

<a name="setup"></a>

Setup:

First, you should add the News-Widget.js Script to Scriptable. Either copy the content of the News-Widget.js file and paste it into a new script in Scriptables or download the file and add it to your iCloud Drive Scriptables folder in iCloud Drive (Files App) You can also add the Widget directly via the Scriptable Gallery: https://scriptable.app/gallery/news-widget

  1. Enter "Wiggle Mode" on your homescreen and tap on the + symbol
  2. Search for and/or tap on Scriptable
  3. Choose one of three sizes and tap + Add Widget
  4. Tap on the new widget while still in "Wiggle Mode" or long press on the widget and tap "Edit Widget"
  5. Click on Choose next to Script
  6. Choose News Widget from the list
  7. Edit your parameters for the widget (see Widget Parameters below)
  8. Tap anywhere outside of the config window and you're done! The widget should now load.

widget-config-old

<a name="widget-parameters"></a>

Widget Parameters

In v1.2.0, i've added settings files, so you don't have to configure your widget with a thousand different parameters. Just run the Settings Wizard, create a settings file and add it via Widget Parameters. See Settings Wizard for more information.

widget-config

Of course, the old Parameters still work:

<a name="widget-settings"></a>

Widget Settings

settings-wizard

To start Settings Wizard, just run News Widget in the Scriptable App.

You can create, edit or delete settings files. To edit a specific setting, just tap on it, edit it to your liking and once you're done, tap on "SAVE" at the top of the list, set a filename (ending in .txt) and you're done! You can now set this file as a Parameter for your Widget.

I've tried to make this as simple as possible, but feel free to contact me, if there are any questions or problems.

Here are all Settings that you can edit, there are also explanations for everything in the code:

CHECK_FOR_SCRIPT_UPDATE

Check for script updates and get notified as soon as a new version is released

PARAM_LINKS

Add Addresses (URLs/Links) of the website(s) and/or the RSS Feed(s) you want to fetch posts from. Format of a new line has to be: ["Link to site/feed", "Name of site"], Please note, the more sites you add, the longer the widgets needs to load all data. It's possible that the widget on your homescreen won't load anything or takes a very long time if you add too many links.

PARAM_WIDGET_TITLE

Name of the website/feed to display in the widget (at the top). If only one site is configured (in the code or parameters), the name of the site is used.

PARAM_BG_IMAGE_NAME

Note: custom background image files have to be in the Scriptable (iCloud) Files folder (same as the script .js file). Change to the filename of a custom background image (CASE SENSITIVE!) or set to "none" if you don't want a custom image

PARAM_BG_IMAGE_BLUR

Blur the background image (custom or the news image in small widgets).

PARAM_BG_IMAGE_GRADIENT

PARAM_SHOW_NEWS_IMAGES

Note: combining PARAM_SHOW_NEWS_IMAGES = true + small widget will ignore CONF_BG_GRADIENT_COLOR values in small config widgets.

CONF_LARGE_WIDGET_MAX_NEWS

Configure if you want a maximum of four or five News displayed in the LARGE Widget. Please only set 4 or 5. Other values will default to 4. If you have exactly four websites configured in PARAM_LINKS, this Setting will always default to 4.

CONF_DISPLAY_NEWS

Configure how posts should be displayed in the widget.

CONF_DATE_TIME_LOCALE

Configure your preferred region to format how date and time values will be displayed

CONF_12_HOUR

Configure which time format to use

CONF_BG_COLOR

Set the background color of your widget

CONF_BG_GRADIENT

Configure to use a color Gradient instead of the single background color (above)

CONF_BG_GRADIENT_COLOR_TOP

Gradient color from the top of the widget

CONF_BG_GRADIENT_COLOR_BTM

Gradient color to the bottom of the widget

CONF_BG_GRADIENT_OVERLAY_TOP

Gradient color image overlay from the top of the widget

CONF_BG_GRADIENT_OVERLAY_BTM

Gradient Color Image Overlay to the bottom of the Widget

CONF_FONT_WIDGET_TITLE, CONF_FONT_WEIGHT_WIDGET_TITLE, CONF_FONT_SIZE_WIDGET_TITLE, CONF_FONT_COLOR_WIDGET_TITLE

Set the font, size and text color of the widget title at the top of the widget

CONF_FONT_DATE, CONF_FONT_WEIGHT_DATE, CONF_FONT_SIZE_DATE, CONF_FONT_COLOR_DATE

Set the font, size and text color of the date and time line(s) in the widget

CONF_FONT_HEADLINE, CONF_FONT_WEIGHT_HEADLINE, CONF_FONT_SIZE_HEADLINE, CONF_FONT_COLOR_HEADLINE

Set the font, size and text color of the news headlines in the widget

<a name="clear-cache"></a>

News Widget Clear Cache.js

News-Widget stores images and other data on your iPhone for faster loading and to save mobile data. You can't access those files directly. If there are problems or you want to delete all the cache files, just add News-Widget-Clear-Cache.js to Scriptables and run the script in the app. It'll delete all cache files from News-Widget. Because the files are in a cache folder, iOS can delete thos files automatically, if there's not enough free space on your phone.

<a name="widget-update"></a>

Update News Widget

To install or update News Widget hassle-free, please add News Widget Update.js from this Repo to your Scriptable App and run the script in Scriptable. It'll save a backup of your existing News Widget Code and download the latest version of News Widget to your Scriptable App.

update-example

<a name="links"></a>

Links

You can configure one or multiple Links to WordPress website and/or RSS feeds (at the same time!) directly in the script code (section STANDARD WIDGET CONFIG) or via Settings Files, if you want to set up different News Widgets.

In case you're not sure if a website is using WordPress, just add /wp-json/wp/v2/posts at the end of the url (https://stadt-bremerhaven.de/wp-json/wp/v2/posts). If you see a lot of text in your browser, the site should work. If not, you can search for an RSS feed (if the site has one) and use the link of the RSS feed.

Here are a few links to help you get started:

WordPress

Gaming:

Tech:

RSS Feeds

News:

Gaming:

Tech:

<a name="thanks"></a>

Thanks

A big THANK YOU to Mario Klingemann for the blur code and Max Zeryck for the WebView code.

Also a big THANK YOU to Simon B. Støvring @simonbs for his awesome Scriptable App!