alexberkowitz/Tomorrow.io 1.js

## Tomorrow.io 1.js
// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: cyan; icon-glyph: sun;
// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: cyan; icon-glyph: sun;
/******************************************************************************
 * Info
*****************************************************************************/

// This script displays the current weather conditions from Tomorrow.io
//
// THIS SCRIPT IS DESIGNED TO RUN AS A MEDIUM WIDGET!!!
//
// Check the configuration below to modify appearance & functionality
//
// NOTE: This script uses the Cache script (https://gist.github.com/alexberkowitz/70c34626b073ff4131dbf33af0e39b76)
// Make sure to add the Cache script in Scriptable as well!


/******************************************************************************
/* Constants and Configurations
/* DON'T SKIP THESE!!!
*****************************************************************************/

// Your Tomorrow.io API token
const API_TOKEN = 'YOUR_TOMORROW_API_KEY';

// Either 'imperial' or 'metric'
const UNITS = 'imperial';

// Number of hours ahead to get data for
const HOURS_AHEAD = 6;

// Colors
const COLORS = {
  bg: '#1f1f1f',
  hourlyBg: '#2c2c2c',
  text: '#eeeeee',
  locationText: '#757575',
  timeText: '#757575',
  probabilityText: '#0b71e4'
};

// Percent probability of precipitation that must be reached in order to display that data
const PRECIPITATION_THRESHOLD = 10;

// You can set a location here or leave blank to enable automatic location detection.
// Location must be an array of [latitude, longitude]
// Example: const LOCATION = [41.871,-87.629];
const LOCATION = null;


/******************************************************************************
/* Calculated and Constant Values
/* DON'T CHANGE THESE!
*****************************************************************************/

// Weather conditions mapping
const CONDITIONS = {
  "0": {name: "Unknown", iconName: "unknown", hasNightIcon: false},
  "1000": {name: "Clear, Sunny", iconName: "clear", hasNightIcon: true},
  "1100": {name: "Mostly Clear", iconName: "mostly_clear", hasNightIcon: true},
  "1101": {name: "Partly Cloudy", iconName: "partly_cloudy", hasNightIcon: true},
  "1102": {name: "Mostly Cloudy", iconName: "mostly_cloudy", hasNightIcon: true},
  "1001": {name: "Cloudy", iconName: "cloudy", hasNightIcon: false},
  "2000": {name: "Fog", iconName: "fog", hasNightIcon: false},
  "2100": {name: "Light Fog", iconName: "fog_light", hasNightIcon: false},
  "4000": {name: "Drizzle", iconName: "drizzle", hasNightIcon: false},
  "4001": {name: "Rain", iconName: "rain", hasNightIcon: false},
  "4200": {name: "Light Rain", iconName: "rain_light", hasNightIcon: false},
  "4201": {name: "Heavy Rain", iconName: "rain_heavy", hasNightIcon: false},
  "5000": {name: "Snow", iconName: "snow", hasNightIcon: false},
  "5001": {name: "Flurries", iconName: "flurries", hasNightIcon: false},
  "5100": {name: "Light Snow", iconName: "snow_light", hasNightIcon: false},
  "5101": {name: "Heavy Snow", iconName: "snow_heavy", hasNightIcon: false},
  "6000": {name: "Freezing Drizzle", iconName: "freezing_rain_drizzle", hasNightIcon: false},
  "6001": {name: "Freezing Rain", iconName: "freezing_rain", hasNightIcon: false},
  "6200": {name: "Light Freezing Rain", iconName: "freezing_rain_light", hasNightIcon: false},
  "6201": {name: "Heavy Freezing Rain", iconName: "freezing_rain_heavy", hasNightIcon: false},
  "7000": {name: "Ice Pellets", iconName: "ice_pellets", hasNightIcon: false},
  "7101": {name: "Heavy Ice Pellets", iconName: "ice_pellets_heavy", hasNightIcon: false},
  "7102": {name: "Light Ice Pellets", iconName: "ice_pellets_light", hasNightIcon: false},
  "8000": {name: "Thunderstorm", iconName: "tstorm", hasNightIcon: false}
};

// Padding of each section
const PADDING_HORIZ = 12;
const PADDING_VERT = 6;


/******************************************************************************
 * Initial Setups
*****************************************************************************/

// Import and setup Cache
const Cache = importModule('Cache');
const cache = new Cache('TomorrowLocation');

// Get current location
const currentLocation = await getCurrentLocation();

// Fetch data
const weatherData = await fetchWeatherData(currentLocation);
const formattedWeatherData = await formatWeatherData(weatherData);

// Create widget
const widget = await createWidget(formattedWeatherData, currentLocation);

Script.setWidget(widget);
widget.presentMedium(); // Used for testing purposes only
Script.complete();


/******************************************************************************
 * Main Functions (Widget and Data-Fetching)
 *****************************************************************************/

/**
 * Main widget function.
 *
 * @param {} data The data for the widget to display
 */

async function createWidget(weatherData, currentLocationData) {
  const currentData = weatherData.current;
  const todayData = weatherData.today;
  const hourlyData = weatherData.hourly;

  //-- Initialize the widget --\\
  const widget = new ListWidget();
  widget.backgroundColor = new Color(COLORS.bg);
  widget.setPadding(0, 0, 0, 0);

  // The free API key for Tomorrow.io is limited to 25 requests per hour, so we limit our widget similarly
  let nextRefresh = Date.now() + 60000*(60/25);
  widget.refreshAfterDate = new Date(nextRefresh);


  //-- Main Content Container --\\
  const contentStack = widget.addStack();
  contentStack.layoutVertically();
  contentStack.url = "climacell://"; // Open Tomorrow.io app when tapped
  contentStack.setPadding(PADDING_VERT, 0, 0, 0);


  //-- Weather Info --\\

  if( !!currentData ){ // Error response handling

    //----- Start locationStack
    const locationStack = contentStack.addStack();
    locationStack.layoutHorizontally();
    locationStack.spacing = 4;
    locationStack.setPadding(0, PADDING_HORIZ, 0, PADDING_HORIZ);

    if( !LOCATION ){
      const locationIconSymbol = SFSymbol.named("location.fill");
      const locationIcon = locationStack.addImage(locationIconSymbol.image);
      locationIcon.imageSize = new Size(8, 8);
      locationIcon.tintColor = new Color(COLORS.locationText);
    }

    const currentLocation = locationStack.addText(currentLocationData.name);
    currentLocation.font = Font.systemFont(8);
    currentLocation.textColor = new Color(COLORS.locationText);
    //----- End locationStack


    //----- Start currentForecastStack
    const currentForecastStack = contentStack.addStack();
    currentForecastStack.layoutHorizontally();
    currentForecastStack.centerAlignContent();
    currentForecastStack.setPadding(0, PADDING_HORIZ, 0, PADDING_HORIZ);


      //----- Start currentForecastLeftStack
      const currentForecastLeftStack = currentForecastStack.addStack();
      currentForecastLeftStack.layoutVertically();


        //----- Start currentInfoStack
        const currentInfoStack = currentForecastLeftStack.addStack();
        currentInfoStack.layoutHorizontally();
        currentInfoStack.spacing = 8;

          //----- Start currentTempStack
          const currentTempStack = currentInfoStack.addStack();
          currentTempStack.layoutVertically();

          currentTempStack.addSpacer();

            //----- Start currentTempTextContainerStack
            // This acts as a line height for the temp text
            const currentTempSize = 54;
            const currentTempTextContainerStack = currentTempStack.addStack();
            currentTempTextContainerStack.size = new Size(0, currentTempSize);
            currentTempTextContainerStack.centerAlignContent();

            // Temp
            const currentTemp = currentTempTextContainerStack.addText(formatTemperature(currentData.values.temperature));
            currentTemp.font = Font.boldSystemFont(currentTempSize);
            currentTemp.textColor = new Color(COLORS.text);
            //----- End currentTempTextContainerStack

          currentTempStack.addSpacer();
          //----- End currentTempStack

          //----- Start tempAndConditionsStack
          const tempAndConditionsStack = currentInfoStack.addStack();
          tempAndConditionsStack.layoutVertically();
          tempAndConditionsStack.centerAlignContent();
          tempAndConditionsStack.spacing = 4;

          tempAndConditionsStack.addSpacer();

          // Conditions
          const currentConditions = tempAndConditionsStack.addText(CONDITIONS[currentData.values.weatherCode].name);
          currentConditions.font = Font.boldSystemFont(12);
          currentConditions.centerAlignText();
          currentConditions.textColor = new Color(COLORS.text);

          // Feels Like
          const feelsLikeTemp = tempAndConditionsStack.addText(`Feels like ${formatTemperature(currentData.values.temperatureApparent)}`);
          feelsLikeTemp.font = Font.systemFont(12);
          feelsLikeTemp.textColor = new Color(COLORS.text);

          // High and Low Temp
          const hiLoTemp = tempAndConditionsStack.addText(`L ${formatTemperature(todayData.values.temperatureMin)} / H ${formatTemperature(todayData.values.temperatureMax)}`);
          hiLoTemp.font = Font.systemFont(12);
          hiLoTemp.textColor = new Color(COLORS.text);

          tempAndConditionsStack.addSpacer();

          //----- End tempAndConditionsStack

        //----- End currentInfoStack

      //----- End currentForecastLeftStack


    currentForecastStack.addSpacer();


      //----- Start currentForecastRightStack
      const currentForecastRightStack = currentForecastStack.addStack();
      currentForecastRightStack.layoutVertically();
      currentForecastRightStack.centerAlignContent();
      currentForecastRightStack.setPadding(0, 0, 0, 10); // Extra padding for the icon

      currentForecastRightStack.addSpacer();

      const currentConditionsIcon = currentForecastRightStack.addImage(currentData.conditionsIcon);
      currentConditionsIcon.imageSize = new Size(60, 60);

      currentForecastRightStack.addSpacer();

      //----- End currentForecastRightStack

    //----- End currentForecastStack


    //----- Start hourlyForecastStack
    const hourlyForecastStack = contentStack.addStack();
    hourlyForecastStack.layoutHorizontally();
    hourlyForecastStack.setPadding(PADDING_VERT, PADDING_HORIZ, PADDING_VERT, PADDING_HORIZ);
    hourlyForecastStack.backgroundColor = new Color(COLORS.hourlyBg);

    // Whether or not precipitation percentages are showing
    const showingPrecip = shouldShowPrecipitationProbability(hourlyData);

    for( let i = 0; i < hourlyData.length; i++){
      //----- Start hourlyItemStack
      const hourlyItemStack = hourlyForecastStack.addStack();
      hourlyItemStack.layoutVertically();
      hourlyItemStack.centerAlignContent();
      hourlyItemStack.spacing = showingPrecip ? 0 : 2; // Squish a little bit when there's extra data

        //----- Start hourlyTimeStack
        const hourlyTimeStack = hourlyItemStack.addStack();
        hourlyTimeStack.layoutHorizontally();
        hourlyTimeStack.addSpacer();

        const hourlyTimeValue = new Date(hourlyData[i].startTime).toLocaleString('en-US', { hour: 'numeric', hour12: true });
        const hourlyTime = hourlyTimeStack.addText(hourlyTimeValue);
        hourlyTime.font = Font.systemFont(10);
        hourlyTime.textColor = new Color(COLORS.timeText);
        hourlyTime.centerAlignText();

        hourlyTimeStack.addSpacer();
        //----- End hourlyTimeStack

        //----- Start hourlyConditionsStack
        const hourlyConditionsStack = hourlyItemStack.addStack();
        hourlyConditionsStack.layoutHorizontally();
        hourlyConditionsStack.addSpacer();

        const hourlyCurrentConditionsIcon = hourlyConditionsStack.addImage(hourlyData[i].conditionsIcon);
        hourlyCurrentConditionsIcon.imageSize = new Size(18, 18);

        hourlyConditionsStack.addSpacer();
        //----- End hourlyConditionsStack

        //----- Start hourlyProbabilityStack
        if( showingPrecip ) {
          const hourlyProbabilityStack = hourlyItemStack.addStack();
          hourlyProbabilityStack.layoutHorizontally();
          hourlyProbabilityStack.addSpacer();

          const precipitationProbability = hourlyData[i].values.precipitationProbability;
          const hourlyProbability = hourlyProbabilityStack.addText(`${precipitationProbability}%`);
          hourlyProbability.font = Font.systemFont(10);
          hourlyProbability.textColor = new Color(COLORS.probabilityText);
          hourlyProbability.centerAlignText();

          // We may hide this instance but still show the stack so everything aligns properly
          if(precipitationProbability < PRECIPITATION_THRESHOLD){
            hourlyProbability.textOpacity = 0;
          }

          hourlyProbabilityStack.addSpacer();
        }
        //----- End hourlyProbabilityStack

        //----- Start hourlyTempStack
        const hourlyTempStack = hourlyItemStack.addStack();
        hourlyTempStack.layoutHorizontally();
        hourlyTempStack.addSpacer();

        const hourlyTemp = hourlyTempStack.addText(formatTemperature(hourlyData[i].values.temperature));
        hourlyTemp.font = Font.systemFont(12);
        hourlyTemp.centerAlignText();
        hourlyTemp.textColor = new Color(COLORS.text);

        hourlyTempStack.addSpacer();
        //----- End hourlyTempStack

      //----- End hourlyItemStack
    }
    //----- End hourlyForecastStack

  } else { // Error message

    contentStack.addSpacer();

    //----- Start errorStateStack
    const errorStateStack = contentStack.addStack();
    errorStateStack.layoutVertically();
    errorStateStack.spacing = 8;
    errorStateStack.setPadding(0, 0, PADDING_VERT, 0);

      //----- Start errorIconStack
      const errorIconStack = errorStateStack.addStack();
      errorIconStack.addSpacer();

      const errorIconSymbol = SFSymbol.named("exclamationmark.icloud.fill");
      const errorIcon = errorIconStack.addImage(errorIconSymbol.image);
      errorIcon.imageSize = new Size(32, 32);
      errorIcon.tintColor = new Color("#666666");

      errorIconStack.addSpacer();
      //----- End errorIconStack

      //----- Start errorMessageStack
      const errorMessageStack = errorStateStack.addStack();
      errorMessageStack.addSpacer();

      const errorMessage = errorMessageStack.addText('There was an error fetching weather data.\nPlease try again later.');
      errorMessage.textColor = new Color("#666666");
      errorMessage.font = Font.boldSystemFont(14);
      errorMessage.centerAlignText();

      errorMessageStack.addSpacer();
      //----- End errorMessageStack

    //----- End errorStateStack

    contentStack.addSpacer();

  }

  return widget;
}


//-------------------------------------
// API Calls
//-------------------------------------

/*
 * Get the current location
 */
async function getCurrentLocation() {
  let latLong;
  let currentLatLong = await Location.current();

  // If location is specified, use that. Otherwise, use the current device location.
  if( !!LOCATION && LOCATION.length == 2 ){
    latLong = {
      latitude: LOCATION[0],
      longitude: LOCATION[1]
    }
  } else if( !!currentLatLong ){
    latLong = currentLatLong;
  }

  const currentLocationDetails = await Location.reverseGeocode(latLong.latitude, latLong.longitude);
  console.log('LOCATION: ', currentLocationDetails);

  const currentLocation = {
    latitude: latLong.latitude,
    longitude: latLong.longitude,
    name: currentLocationDetails[0].postalAddress.city
  };

  console.log('Found location:');
  if( !!currentLocation ){

    // Write location to the cache
    cache.write('tomorrowLocation', currentLocation);

    console.log(currentLocation);
    return currentLocation || false;

  } else {
    // If unable to fetch location, try to read from the cache and return that instead.

    // Read location from the cache
    let cachedLocation = await cache.read('tomorrowLocation');

    console.log(cachedLocation);
    return cachedLocation || false;
  }
}

/*
 * Get the icon for a given weather code
 */
async function getConditionIconImage(weatherCode, size, time, sunrise, sunset) {
  const iconName = CONDITIONS[weatherCode].iconName;

  // Determine if it is daytime or nighttime
  let dayNightCode = '0';
  const now = new Date(time);
  const isBeforeDawn = now < new Date(sunrise);
  const isAfterDusk = now > new Date(sunset);

  if( CONDITIONS[weatherCode].hasNightIcon && (isBeforeDawn || isAfterDusk) ){
    dayNightCode = '1';
  }

  console.log(`WEATHER CODE: ${weatherCode}`);
  console.log(`DAYNIGHTCODE: ${dayNightCode}`);


  const imageUrl = `https://raw.githubusercontent.com/Tomorrow-IO-API/tomorrow-weather-codes/master/V2_icons/${size}/png/${weatherCode}${dayNightCode}_${iconName}_${size}.png`;

  const conditionIconRequest = await new Request(imageUrl);
  const conditionIconImageData = await conditionIconRequest.loadImage();

  return conditionIconImageData;
}

/*
 * Fetch the weather data from Tomorro.io
 */
async function fetchWeatherData(latLong) {

  const url = `https://api.tomorrow.io/v4/timelines?apikey=${API_TOKEN}`;

  const headers = {
    'content-type': 'application/json'
  };

  const lat = latLong.latitude;
  const lon = latLong.longitude;

  const body = JSON.stringify({
    "location": `${lat},${lon}`,
    "fields": [
      "temperature",
      "temperatureApparent",
      "precipitationProbability",
      "sunsetTime",
      "sunriseTime",
      "temperatureMax",
      "temperatureMin",
      "weatherCode"
    ],
    "units": UNITS,
    "timesteps": [
      "current",
      "1h",
      "1d"
    ],
    "timezone": "auto",
    "startTime": "now",
    "endTime": `nowPlus1d`
  });

  let req = new Request(url);
  req.method = "post";
  req.headers = headers;
  req.body = body;
  let res = await req.loadJSON();

  // Preview the data response for testing purposes
  //let str = JSON.stringify(res, null, 2);
  //await QuickLook.present(str);

  console.log(res);

  return res.data?.timelines || false;
}


//-------------------------------------
// Utility Functions
//-------------------------------------

/*
 * Format temperature for display
 */
function formatTemperature(temperature){
  return `${Math.round(temperature)}°`
}

/*
 * Determine whether *any* entry in the list has a precipitation probability above the threshold
 * Used to determine whether or not precipitation probability data should be displayed
 */
function shouldShowPrecipitationProbability(data) {
  let shouldShow = false;

  for( let i = 0; i < data.length; i++ ){
    if( data[i].values.precipitationProbability > PRECIPITATION_THRESHOLD ){
      shouldShow = true;
    }
  }

  return shouldShow;
}

/*
 * Format weather data and add icons
 */
async function formatWeatherData(timelines){
  if( !!timelines ){
    // Day-level info
    let todayForecast = timelines[0].intervals[0];

    // Current forecast
    let currentForecast = timelines[2].intervals[0];
    let currentForecastIcon = await getConditionIconImage(currentForecast.values.weatherCode, 'large', new Date(), todayForecast.values.sunriseTime, todayForecast.values.sunsetTime);
    currentForecast.conditionsIcon = currentForecastIcon;

    // Hourly forecast
    const hourlyIntervals = timelines[1].intervals;
    let hourlyForecast = [];
    // Start at 1 because we don't want to include the current time'
    for( let i = 1; i <= HOURS_AHEAD; i++ ){
      let newHourlyDataPoint = hourlyIntervals[i];

      // Add icon
      let hourlyForecastIcon = await getConditionIconImage(hourlyIntervals[i].values.weatherCode, 'small', hourlyIntervals[i].startTime,  todayForecast.values.sunriseTime, todayForecast.values.sunsetTime);
      newHourlyDataPoint.conditionsIcon = hourlyForecastIcon;

      hourlyForecast.push(newHourlyDataPoint);
    }

    let formattedData = {
      current: currentForecast,
      today: todayForecast,
      hourly: hourlyForecast
    };

    return formattedData;
  } else {
    return false;
  }
}
	// Variables used by Scriptable.
	// These must be at the very top of the file. Do not edit.
	// icon-color: cyan; icon-glyph: sun;
	// Variables used by Scriptable.
	// These must be at the very top of the file. Do not edit.
	// icon-color: cyan; icon-glyph: sun;
	/******************************************************************************
	* Info
	*****************************************************************************/

	// This script displays the current weather conditions from Tomorrow.io
	//
	// THIS SCRIPT IS DESIGNED TO RUN AS A MEDIUM WIDGET!!!
	//
	// Check the configuration below to modify appearance & functionality
	//
	// NOTE: This script uses the Cache script (https://gist.github.com/alexberkowitz/70c34626b073ff4131dbf33af0e39b76)
	// Make sure to add the Cache script in Scriptable as well!



	/******************************************************************************
	/* Constants and Configurations
	/* DON'T SKIP THESE!!!
	*****************************************************************************/

	// Your Tomorrow.io API token
	const API_TOKEN = 'YOUR_TOMORROW_API_KEY';

	// Either 'imperial' or 'metric'
	const UNITS = 'imperial';

	// Number of hours ahead to get data for
	const HOURS_AHEAD = 6;

	// Colors
	const COLORS = {
	bg: '#1f1f1f',
	hourlyBg: '#2c2c2c',
	text: '#eeeeee',
	locationText: '#757575',
	timeText: '#757575',
	probabilityText: '#0b71e4'
	};

	// Percent probability of precipitation that must be reached in order to display that data
	const PRECIPITATION_THRESHOLD = 10;

	// You can set a location here or leave blank to enable automatic location detection.
	// Location must be an array of [latitude, longitude]
	// Example: const LOCATION = [41.871,-87.629];
	const LOCATION = null;



	/******************************************************************************
	/* Calculated and Constant Values
	/* DON'T CHANGE THESE!
	*****************************************************************************/

	// Weather conditions mapping
	const CONDITIONS = {
	"0": {name: "Unknown", iconName: "unknown", hasNightIcon: false},
	"1000": {name: "Clear, Sunny", iconName: "clear", hasNightIcon: true},
	"1100": {name: "Mostly Clear", iconName: "mostly_clear", hasNightIcon: true},
	"1101": {name: "Partly Cloudy", iconName: "partly_cloudy", hasNightIcon: true},
	"1102": {name: "Mostly Cloudy", iconName: "mostly_cloudy", hasNightIcon: true},
	"1001": {name: "Cloudy", iconName: "cloudy", hasNightIcon: false},
	"2000": {name: "Fog", iconName: "fog", hasNightIcon: false},
	"2100": {name: "Light Fog", iconName: "fog_light", hasNightIcon: false},
	"4000": {name: "Drizzle", iconName: "drizzle", hasNightIcon: false},
	"4001": {name: "Rain", iconName: "rain", hasNightIcon: false},
	"4200": {name: "Light Rain", iconName: "rain_light", hasNightIcon: false},
	"4201": {name: "Heavy Rain", iconName: "rain_heavy", hasNightIcon: false},
	"5000": {name: "Snow", iconName: "snow", hasNightIcon: false},
	"5001": {name: "Flurries", iconName: "flurries", hasNightIcon: false},
	"5100": {name: "Light Snow", iconName: "snow_light", hasNightIcon: false},
	"5101": {name: "Heavy Snow", iconName: "snow_heavy", hasNightIcon: false},
	"6000": {name: "Freezing Drizzle", iconName: "freezing_rain_drizzle", hasNightIcon: false},
	"6001": {name: "Freezing Rain", iconName: "freezing_rain", hasNightIcon: false},
	"6200": {name: "Light Freezing Rain", iconName: "freezing_rain_light", hasNightIcon: false},
	"6201": {name: "Heavy Freezing Rain", iconName: "freezing_rain_heavy", hasNightIcon: false},
	"7000": {name: "Ice Pellets", iconName: "ice_pellets", hasNightIcon: false},
	"7101": {name: "Heavy Ice Pellets", iconName: "ice_pellets_heavy", hasNightIcon: false},
	"7102": {name: "Light Ice Pellets", iconName: "ice_pellets_light", hasNightIcon: false},
	"8000": {name: "Thunderstorm", iconName: "tstorm", hasNightIcon: false}
	};

	// Padding of each section
	const PADDING_HORIZ = 12;
	const PADDING_VERT = 6;


	/******************************************************************************
	* Initial Setups
	*****************************************************************************/

	// Import and setup Cache
	const Cache = importModule('Cache');
	const cache = new Cache('TomorrowLocation');

	// Get current location
	const currentLocation = await getCurrentLocation();

	// Fetch data
	const weatherData = await fetchWeatherData(currentLocation);
	const formattedWeatherData = await formatWeatherData(weatherData);

	// Create widget
	const widget = await createWidget(formattedWeatherData, currentLocation);

	Script.setWidget(widget);
	widget.presentMedium(); // Used for testing purposes only
	Script.complete();



	/******************************************************************************
	* Main Functions (Widget and Data-Fetching)
	*****************************************************************************/

	/**
	* Main widget function.
	*
	* @param {} data The data for the widget to display
	*/

	async function createWidget(weatherData, currentLocationData) {
	const currentData = weatherData.current;
	const todayData = weatherData.today;
	const hourlyData = weatherData.hourly;

	//-- Initialize the widget --\\
	const widget = new ListWidget();
	widget.backgroundColor = new Color(COLORS.bg);
	widget.setPadding(0, 0, 0, 0);

	// The free API key for Tomorrow.io is limited to 25 requests per hour, so we limit our widget similarly
	let nextRefresh = Date.now() + 60000*(60/25);
	widget.refreshAfterDate = new Date(nextRefresh);



	//-- Main Content Container --\\
	const contentStack = widget.addStack();
	contentStack.layoutVertically();
	contentStack.url = "climacell://"; // Open Tomorrow.io app when tapped
	contentStack.setPadding(PADDING_VERT, 0, 0, 0);



	//-- Weather Info --\\

	if( !!currentData ){ // Error response handling

	//----- Start locationStack
	const locationStack = contentStack.addStack();
	locationStack.layoutHorizontally();
	locationStack.spacing = 4;
	locationStack.setPadding(0, PADDING_HORIZ, 0, PADDING_HORIZ);

	if( !LOCATION ){
	const locationIconSymbol = SFSymbol.named("location.fill");
	const locationIcon = locationStack.addImage(locationIconSymbol.image);
	locationIcon.imageSize = new Size(8, 8);
	locationIcon.tintColor = new Color(COLORS.locationText);
	}

	const currentLocation = locationStack.addText(currentLocationData.name);
	currentLocation.font = Font.systemFont(8);
	currentLocation.textColor = new Color(COLORS.locationText);
	//----- End locationStack



	//----- Start currentForecastStack
	const currentForecastStack = contentStack.addStack();
	currentForecastStack.layoutHorizontally();
	currentForecastStack.centerAlignContent();
	currentForecastStack.setPadding(0, PADDING_HORIZ, 0, PADDING_HORIZ);



	//----- Start currentForecastLeftStack
	const currentForecastLeftStack = currentForecastStack.addStack();
	currentForecastLeftStack.layoutVertically();


	//----- Start currentInfoStack
	const currentInfoStack = currentForecastLeftStack.addStack();
	currentInfoStack.layoutHorizontally();
	currentInfoStack.spacing = 8;

	//----- Start currentTempStack
	const currentTempStack = currentInfoStack.addStack();
	currentTempStack.layoutVertically();

	currentTempStack.addSpacer();

	//----- Start currentTempTextContainerStack
	// This acts as a line height for the temp text
	const currentTempSize = 54;
	const currentTempTextContainerStack = currentTempStack.addStack();
	currentTempTextContainerStack.size = new Size(0, currentTempSize);
	currentTempTextContainerStack.centerAlignContent();

	// Temp
	const currentTemp = currentTempTextContainerStack.addText(formatTemperature(currentData.values.temperature));
	currentTemp.font = Font.boldSystemFont(currentTempSize);
	currentTemp.textColor = new Color(COLORS.text);
	//----- End currentTempTextContainerStack

	currentTempStack.addSpacer();
	//----- End currentTempStack

	//----- Start tempAndConditionsStack
	const tempAndConditionsStack = currentInfoStack.addStack();
	tempAndConditionsStack.layoutVertically();
	tempAndConditionsStack.centerAlignContent();
	tempAndConditionsStack.spacing = 4;

	tempAndConditionsStack.addSpacer();

	// Conditions
	const currentConditions = tempAndConditionsStack.addText(CONDITIONS[currentData.values.weatherCode].name);
	currentConditions.font = Font.boldSystemFont(12);
	currentConditions.centerAlignText();
	currentConditions.textColor = new Color(COLORS.text);

	// Feels Like
	const feelsLikeTemp = tempAndConditionsStack.addText(`Feels like ${formatTemperature(currentData.values.temperatureApparent)}`);
	feelsLikeTemp.font = Font.systemFont(12);
	feelsLikeTemp.textColor = new Color(COLORS.text);

	// High and Low Temp
	const hiLoTemp = tempAndConditionsStack.addText(`L ${formatTemperature(todayData.values.temperatureMin)} / H ${formatTemperature(todayData.values.temperatureMax)}`);
	hiLoTemp.font = Font.systemFont(12);
	hiLoTemp.textColor = new Color(COLORS.text);

	tempAndConditionsStack.addSpacer();

	//----- End tempAndConditionsStack

	//----- End currentInfoStack

	//----- End currentForecastLeftStack



	currentForecastStack.addSpacer();



	//----- Start currentForecastRightStack
	const currentForecastRightStack = currentForecastStack.addStack();
	currentForecastRightStack.layoutVertically();
	currentForecastRightStack.centerAlignContent();
	currentForecastRightStack.setPadding(0, 0, 0, 10); // Extra padding for the icon

	currentForecastRightStack.addSpacer();

	const currentConditionsIcon = currentForecastRightStack.addImage(currentData.conditionsIcon);
	currentConditionsIcon.imageSize = new Size(60, 60);

	currentForecastRightStack.addSpacer();

	//----- End currentForecastRightStack

	//----- End currentForecastStack



	//----- Start hourlyForecastStack
	const hourlyForecastStack = contentStack.addStack();
	hourlyForecastStack.layoutHorizontally();
	hourlyForecastStack.setPadding(PADDING_VERT, PADDING_HORIZ, PADDING_VERT, PADDING_HORIZ);
	hourlyForecastStack.backgroundColor = new Color(COLORS.hourlyBg);

	// Whether or not precipitation percentages are showing
	const showingPrecip = shouldShowPrecipitationProbability(hourlyData);

	for( let i = 0; i < hourlyData.length; i++){
	//----- Start hourlyItemStack
	const hourlyItemStack = hourlyForecastStack.addStack();
	hourlyItemStack.layoutVertically();
	hourlyItemStack.centerAlignContent();
	hourlyItemStack.spacing = showingPrecip ? 0 : 2; // Squish a little bit when there's extra data

	//----- Start hourlyTimeStack
	const hourlyTimeStack = hourlyItemStack.addStack();
	hourlyTimeStack.layoutHorizontally();
	hourlyTimeStack.addSpacer();

	const hourlyTimeValue = new Date(hourlyData[i].startTime).toLocaleString('en-US', { hour: 'numeric', hour12: true });
	const hourlyTime = hourlyTimeStack.addText(hourlyTimeValue);
	hourlyTime.font = Font.systemFont(10);
	hourlyTime.textColor = new Color(COLORS.timeText);
	hourlyTime.centerAlignText();

	hourlyTimeStack.addSpacer();
	//----- End hourlyTimeStack

	//----- Start hourlyConditionsStack
	const hourlyConditionsStack = hourlyItemStack.addStack();
	hourlyConditionsStack.layoutHorizontally();
	hourlyConditionsStack.addSpacer();

	const hourlyCurrentConditionsIcon = hourlyConditionsStack.addImage(hourlyData[i].conditionsIcon);
	hourlyCurrentConditionsIcon.imageSize = new Size(18, 18);

	hourlyConditionsStack.addSpacer();
	//----- End hourlyConditionsStack

	//----- Start hourlyProbabilityStack
	if( showingPrecip ) {
	const hourlyProbabilityStack = hourlyItemStack.addStack();
	hourlyProbabilityStack.layoutHorizontally();
	hourlyProbabilityStack.addSpacer();

	const precipitationProbability = hourlyData[i].values.precipitationProbability;
	const hourlyProbability = hourlyProbabilityStack.addText(`${precipitationProbability}%`);
	hourlyProbability.font = Font.systemFont(10);
	hourlyProbability.textColor = new Color(COLORS.probabilityText);
	hourlyProbability.centerAlignText();

	// We may hide this instance but still show the stack so everything aligns properly
	if(precipitationProbability < PRECIPITATION_THRESHOLD){
	hourlyProbability.textOpacity = 0;
	}

	hourlyProbabilityStack.addSpacer();
	}
	//----- End hourlyProbabilityStack

	//----- Start hourlyTempStack
	const hourlyTempStack = hourlyItemStack.addStack();
	hourlyTempStack.layoutHorizontally();
	hourlyTempStack.addSpacer();

	const hourlyTemp = hourlyTempStack.addText(formatTemperature(hourlyData[i].values.temperature));
	hourlyTemp.font = Font.systemFont(12);
	hourlyTemp.centerAlignText();
	hourlyTemp.textColor = new Color(COLORS.text);

	hourlyTempStack.addSpacer();
	//----- End hourlyTempStack

	//----- End hourlyItemStack
	}
	//----- End hourlyForecastStack

	} else { // Error message

	contentStack.addSpacer();

	//----- Start errorStateStack
	const errorStateStack = contentStack.addStack();
	errorStateStack.layoutVertically();
	errorStateStack.spacing = 8;
	errorStateStack.setPadding(0, 0, PADDING_VERT, 0);

	//----- Start errorIconStack
	const errorIconStack = errorStateStack.addStack();
	errorIconStack.addSpacer();

	const errorIconSymbol = SFSymbol.named("exclamationmark.icloud.fill");
	const errorIcon = errorIconStack.addImage(errorIconSymbol.image);
	errorIcon.imageSize = new Size(32, 32);
	errorIcon.tintColor = new Color("#666666");

	errorIconStack.addSpacer();
	//----- End errorIconStack

	//----- Start errorMessageStack
	const errorMessageStack = errorStateStack.addStack();
	errorMessageStack.addSpacer();

	const errorMessage = errorMessageStack.addText('There was an error fetching weather data.\nPlease try again later.');
	errorMessage.textColor = new Color("#666666");
	errorMessage.font = Font.boldSystemFont(14);
	errorMessage.centerAlignText();

	errorMessageStack.addSpacer();
	//----- End errorMessageStack

	//----- End errorStateStack

	contentStack.addSpacer();

	}

	return widget;
	}



	//-------------------------------------
	// API Calls
	//-------------------------------------

	/*
	* Get the current location
	*/
	async function getCurrentLocation() {
	let latLong;
	let currentLatLong = await Location.current();

	// If location is specified, use that. Otherwise, use the current device location.
	if( !!LOCATION && LOCATION.length == 2 ){
	latLong = {
	latitude: LOCATION[0],
	longitude: LOCATION[1]
	}
	} else if( !!currentLatLong ){
	latLong = currentLatLong;
	}

	const currentLocationDetails = await Location.reverseGeocode(latLong.latitude, latLong.longitude);
	console.log('LOCATION: ', currentLocationDetails);

	const currentLocation = {
	latitude: latLong.latitude,
	longitude: latLong.longitude,
	name: currentLocationDetails[0].postalAddress.city
	};

	console.log('Found location:');
	if( !!currentLocation ){

	// Write location to the cache
	cache.write('tomorrowLocation', currentLocation);

	console.log(currentLocation);
	return currentLocation \|\| false;

	} else {
	// If unable to fetch location, try to read from the cache and return that instead.

	// Read location from the cache
	let cachedLocation = await cache.read('tomorrowLocation');

	console.log(cachedLocation);
	return cachedLocation \|\| false;
	}
	}

	/*
	* Get the icon for a given weather code
	*/
	async function getConditionIconImage(weatherCode, size, time, sunrise, sunset) {
	const iconName = CONDITIONS[weatherCode].iconName;

	// Determine if it is daytime or nighttime
	let dayNightCode = '0';
	const now = new Date(time);
	const isBeforeDawn = now < new Date(sunrise);
	const isAfterDusk = now > new Date(sunset);

	if( CONDITIONS[weatherCode].hasNightIcon && (isBeforeDawn \|\| isAfterDusk) ){
	dayNightCode = '1';
	}

	console.log(`WEATHER CODE: ${weatherCode}`);
	console.log(`DAYNIGHTCODE: ${dayNightCode}`);


	const imageUrl = `https://raw.githubusercontent.com/Tomorrow-IO-API/tomorrow-weather-codes/master/V2_icons/${size}/png/${weatherCode}${dayNightCode}_${iconName}_${size}.png`;

	const conditionIconRequest = await new Request(imageUrl);
	const conditionIconImageData = await conditionIconRequest.loadImage();

	return conditionIconImageData;
	}

	/*
	* Fetch the weather data from Tomorro.io
	*/
	async function fetchWeatherData(latLong) {

	const url = `https://api.tomorrow.io/v4/timelines?apikey=${API_TOKEN}`;

	const headers = {
	'content-type': 'application/json'
	};

	const lat = latLong.latitude;
	const lon = latLong.longitude;

	const body = JSON.stringify({
	"location": `${lat},${lon}`,
	"fields": [
	"temperature",
	"temperatureApparent",
	"precipitationProbability",
	"sunsetTime",
	"sunriseTime",
	"temperatureMax",
	"temperatureMin",
	"weatherCode"
	],
	"units": UNITS,
	"timesteps": [
	"current",
	"1h",
	"1d"
	],
	"timezone": "auto",
	"startTime": "now",
	"endTime": `nowPlus1d`
	});

	let req = new Request(url);
	req.method = "post";
	req.headers = headers;
	req.body = body;
	let res = await req.loadJSON();

	// Preview the data response for testing purposes
	//let str = JSON.stringify(res, null, 2);
	//await QuickLook.present(str);

	console.log(res);

	return res.data?.timelines \|\| false;
	}



	//-------------------------------------
	// Utility Functions
	//-------------------------------------

	/*
	* Format temperature for display
	*/
	function formatTemperature(temperature){
	return `${Math.round(temperature)}°`
	}

	/*
	* Determine whether any entry in the list has a precipitation probability above the threshold
	* Used to determine whether or not precipitation probability data should be displayed
	*/
	function shouldShowPrecipitationProbability(data) {
	let shouldShow = false;

	for( let i = 0; i < data.length; i++ ){
	if( data[i].values.precipitationProbability > PRECIPITATION_THRESHOLD ){
	shouldShow = true;
	}
	}

	return shouldShow;
	}

	/*
	* Format weather data and add icons
	*/
	async function formatWeatherData(timelines){
	if( !!timelines ){
	// Day-level info
	let todayForecast = timelines[0].intervals[0];

	// Current forecast
	let currentForecast = timelines[2].intervals[0];
	let currentForecastIcon = await getConditionIconImage(currentForecast.values.weatherCode, 'large', new Date(), todayForecast.values.sunriseTime, todayForecast.values.sunsetTime);
	currentForecast.conditionsIcon = currentForecastIcon;

	// Hourly forecast
	const hourlyIntervals = timelines[1].intervals;
	let hourlyForecast = [];
	// Start at 1 because we don't want to include the current time'
	for( let i = 1; i <= HOURS_AHEAD; i++ ){
	let newHourlyDataPoint = hourlyIntervals[i];

	// Add icon
	let hourlyForecastIcon = await getConditionIconImage(hourlyIntervals[i].values.weatherCode, 'small', hourlyIntervals[i].startTime, todayForecast.values.sunriseTime, todayForecast.values.sunsetTime);
	newHourlyDataPoint.conditionsIcon = hourlyForecastIcon;

	hourlyForecast.push(newHourlyDataPoint);
	}

	let formattedData = {
	current: currentForecast,
	today: todayForecast,
	hourly: hourlyForecast
	};

	return formattedData;
	} else {
	return false;
	}
	}