/scriptable-News-Widget

iOS Scriptable News Widget (WordPress & RSS)

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

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

Requirements:

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.

Notes and known bugs

  • Most WordPress websites, RSS and Atom feeds should work, but it's possible that not everything will work. Please feel free to contact me, if there are any problems.

Changelog

  • v1.2.0
    • small fix for RSS feeds without a published date
  • v1.2.0
    • added offline mode
      • if you lose your internet connection, the widget won't go blank (if all necessary data is cached)
      • the widget will show a small cloud icon on the top right, if offline mode is temporarily active
    • added settings files (see Settings for more info)
    • added Settings Wizard (run script directly in Scriptable to use the Settings Wizard)
    • removed links files in favor of settings files
    • added blank image symbol if a news image isn't available
    • standard design now resembles the official news widget more closely
    • added setting CONF_LARGE_WIDGET_MAX_NEWS
      • configure how much news you want to see max. in a large widget
    • added setting CONF_DISPLAY_NEWS
      • "websites" prioritizes showing at least one news per link
      • "date" just sorts everything by date
  • v1.1.4
    • fixed incorrect display of date and time
    • added new font config options "Rounded" and "Monospaced"
    • added date/time region config setting
    • additional fixes for fetching images from RSS feeds
    • changed chaches from cache dir to documents dir
  • v1.1.3
    • Added instructions for Script Updates and Widget Setup
  • v1.1.2
    • Fix for fetching images from RSS feeds
  • v1.1.1
    • Fix for links that don't start with http:// or https://
  • v1.1.0
    • Multi URL support in the code or via text files
    • better RSS support
    • support for Atom feeds
    • more customization options
  • v1.0.2
    • Support for iOS light and dark mode
  • v1.0.1
    • Small bugfix loading images in RSS feed
  • v1.0.0
    • Initial Upload

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

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

  • Example:
    • widget-settings.txt
    • small|widget-settings.txt

Of course, the old Parameters still work:

  • Example:
  • Parameter order has to be:
    • Widget size (small, large, medium)
    • Site url (url of the WordPress Website or RSS feed URL)
    • Site name (name of the website, displayed at the top of the widget)
    • Show post images (use true if you want to display the images of the posts or set to false if not)
    • Background image (name of an image file. The file has to be stored in the scriptables folder in iCloud Drive (Files App))
    • Blur background image (use true if you want the background image to be blurry. Use false if not)
    • Background image gradient (use true to create a color gradient over the background image (for better readbility), use false to turn off the gradient)
    • Font Name (refer to http://iosfonts.com for available font names)
  • Parameters have to be separated by |
  • You don't have to set all parameters, the following examples will work just fine:
  • Parameters that are not set will be set by the standard widget config in the source code
  • You can change more things like background color, font color and more in the source code. Look at the comments in the code for explanations

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

  • true = check for script updates
  • false = don't check for updates

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).

  • "true" = blur the background image
  • "false" = no blur

PARAM_BG_IMAGE_GRADIENT

  • "true" = gradient over the background image
  • "false" = no 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.

  • "true" = display images next to headlines
  • "false" = no images next to posts

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.

  • Set to "websites" if you want to prioritize seeing news from all your configured websites. This will more closely resemble the iOS News Widget.
  • Set to "date" if you want to prioritize just sorting by date. This will more closely resemble a timeline or feed of all configured websites combined.

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

  • true = 12h time format
  • false = 24h time format

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)

  • true = use a color gradient (colors configured below)
  • false = use a single color (color configured 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

  • used if a background image is displayed and PARAM_BG_IMAGE_GRADIENT = "true"

CONF_BG_GRADIENT_OVERLAY_BTM

Gradient Color Image Overlay to the bottom of the Widget

  • used if a background image is displayed and PARAM_BG_IMAGE_GRADIENT = "true"

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

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.

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

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:

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!