multi-day forecast

[Joed1211]

Thank you for doing this! Any possibility of changing the time of the future forecasts? It looks like your display gives a new forecast every three hours. I'm more interested in the high (and lows) for the next few days. While that might not be possible, could I change the +3 hours to +8 or +12? Can you point me to the spot in the code where I could do that?

Thanks!

[matopeto]

Hi @Joed1211 thank you for the idea for the feature.

In the free version of the OWM API, which I’m using in this project, the forecast is provided in 3-hour blocks for 5 days. So, the step can only be changed in multiples of 3 hours, meaning that instead of every 3 hours, it can be every 6, 8, or 12 hours.

The change is simple: on this line, you change i++ to i+=2 if we want to jump every 6 hours, i+=3 for every 9

But the idea is good; maybe when I have some time, I will integrate it directly into the configuration and the project.

However, for an actual forecast for an entire specific day, a paid API is needed, and I didn’t want to create a project that would require a paid API.

It could technically be done with the free API, but creating a daily forecast from 3-hour intervals is complicated. While I could display the temperature range, I’m not quite sure how I would show the weather icon or the textual forecast. That requires more logic and understanding of what each weather type means, and I haven’t figured that out yet, and probably won’t.

[Joed1211]

Ok, thanks for the tip. I can totally do the i+=3 to get +9 hours (or the 12 hour equivalent).

But, even the paid APIs look to have a free limit for the number of calls. Are the APIs that different that the code isn't easily transferable? That is, I'm happy setting up a paid API for myself, with the hope that the use is free or at least very inexpensive, but I'm in over my head with the actual programming. I can make simple changes like the time jump above, but too many changes and I'd be afraid of messing something.

[matopeto]

hmm... It looks like the Daily Forecast 16 Days works free version, even though the description and price list says, "Included in all paid subscription plans," it seems to work in the free variant.

In the future, I might consider integrating the daily API, but I still need to figure out how to make it work logically—maybe a combination of hourly and then daily forecasts. I’ll see.

But these are just some of my notes.

[matopeto]

Ok, thanks for the tip. I can totally do the i+=3 to get +9 hours (or the 12 hour equivalent).

But, even the paid APIs look to have a free limit for the number of calls. Are the APIs that different that the code isn't easily transferable? That is, I'm happy setting up a paid API for myself, with the hope that the use is free or at least very inexpensive, but I'm in over my head with the actual programming. I can make simple changes like the time jump above, but too many changes and I'd be afraid of messing something.

This is a very simple project for learning, so feel free to fork and experiment. If you decide to work on displaying the daily API, you’ll need to change the URL and the function that processes the forecast, select the correct properties from the response, and set them into the appropriate HTML elements.

The response for the daily and hourly APIs is similar; more details can be found in the documentation. It should be easy to swap them out to get a forecast for n days ahead.

[Joed1211]

Ok, good to know. Yes, three days would be fine, but the look is very nice in the current layout, so you're right, something to fill the remaining spots is needed...

[matopeto]

@Joed1211

I removed the comment about 3 days; it is not true. I have the cnt (count) parameter set to 3, and it works for 16 days, as the documentation says.

[Joed1211]

Great! Yes, I saw that cnt parameter. Any tips or code you can share to quickly change your setup to the 16-day API?

[matopeto]

@Joed1211

The change is simple: on this line, you change i++ to i+=2 if we want to jump every 6 hours, i+=3 for every 9

this tip was wrong, for integrating steps in current state

you need change this line

var forecast = data.list[i]; to var forecast = data.list[i * 2]; for 6 hours, * 3 for 9 hours

Great! Yes, I saw that cnt parameter. Any tips or code you can share to quickly change your setup to the 16-day API?

I will try it myself then i write to you some tips (but maybe not today)

[Joed1211]

Thank you!

[matopeto]

@Joed1211 It was easy:

Here is sample https://github.com/matopeto/kindle-weather-dashboard/commit/4597d7d01e3daf0fe3c2b5b29a884ff05e112b43

in branch daily-frecast-sample

I display min/max temp (or day/night for feels like because there is no API for min/max) and day name

I will not deploy this change to sample page, so feel free to fork/download and run it locally and change according your needs. See the documentation for reference.

[matopeto]

Here’s an example of the API from the screenshot, so you can see what kind of data comes through and choose any temperature or combination of temperatures that interests you to display here. Please use your own API key during experiments, which you can generate for free at OpenWeatherMap.

{
    "city": {
        "id": 3067696,
        "name": "Prague",
        "coord": {
            "lon": 14.4208,
            "lat": 50.088
        },
        "country": "CZ",
        "population": 1165581,
        "timezone": 7200
    },
    "cod": "200",
    "message": 0.0687928,
    "cnt": 5,
    "list": [
        {
            "dt": 1729764000,
            "sunrise": 1729748351,
            "sunset": 1729785209,
            "temp": {
                "day": 14.66,
                "min": 7.34,
                "max": 17.23,
                "night": 11.25,
                "eve": 12.93,
                "morn": 7.53
            },
            "feels_like": {
                "day": 13.83,
                "night": 10.49,
                "eve": 12.13,
                "morn": 5.87
            },
            "pressure": 1030,
            "humidity": 63,
            "weather": [
                {
                    "id": 800,
                    "main": "Clear",
                    "description": "sky is clear",
                    "icon": "01d"
                }
            ],
            "speed": 5.52,
            "deg": 129,
            "gust": 9.33,
            "clouds": 2,
            "pop": 0
        },
        {
            "dt": 1729850400,
            "sunrise": 1729834850,
            "sunset": 1729871497,
            "temp": {
                "day": 13.54,
                "min": 8.25,
                "max": 16.2,
                "night": 10.7,
                "eve": 13.48,
                "morn": 8.7
            },
            "feels_like": {
                "day": 12.67,
                "night": 10.12,
                "eve": 12.87,
                "morn": 7.68
            },
            "pressure": 1024,
            "humidity": 66,
            "weather": [
                {
                    "id": 802,
                    "main": "Clouds",
                    "description": "scattered clouds",
                    "icon": "03d"
                }
            ],
            "speed": 2.52,
            "deg": 133,
            "gust": 5.93,
            "clouds": 48,
            "pop": 0
        },
        {
            "dt": 1729936800,
            "sunrise": 1729921350,
            "sunset": 1729957786,
            "temp": {
                "day": 14.32,
                "min": 8.75,
                "max": 16.87,
                "night": 9.92,
                "eve": 13.52,
                "morn": 9.06
            },
            "feels_like": {
                "day": 13.58,
                "night": 9.32,
                "eve": 12.91,
                "morn": 9.06
            },
            "pressure": 1023,
            "humidity": 68,
            "weather": [
                {
                    "id": 803,
                    "main": "Clouds",
                    "description": "broken clouds",
                    "icon": "04d"
                }
            ],
            "speed": 3.21,
            "deg": 104,
            "gust": 5.21,
            "clouds": 69,
            "pop": 0
        },
        {
            "dt": 1730023200,
            "sunrise": 1730007850,
            "sunset": 1730044076,
            "temp": {
                "day": 13.89,
                "min": 8.77,
                "max": 16.8,
                "night": 11.9,
                "eve": 13.95,
                "morn": 9.18
            },
            "feels_like": {
                "day": 13.11,
                "night": 11.34,
                "eve": 13.28,
                "morn": 9.18
            },
            "pressure": 1020,
            "humidity": 68,
            "weather": [
                {
                    "id": 800,
                    "main": "Clear",
                    "description": "sky is clear",
                    "icon": "01d"
                }
            ],
            "speed": 2.15,
            "deg": 271,
            "gust": 3.79,
            "clouds": 9,
            "pop": 0
        },
        {
            "dt": 1730109600,
            "sunrise": 1730094350,
            "sunset": 1730130367,
            "temp": {
                "day": 13.25,
                "min": 10.76,
                "max": 15,
                "night": 14.06,
                "eve": 14.98,
                "morn": 12.1
            },
            "feels_like": {
                "day": 12.8,
                "night": 13.38,
                "eve": 14.41,
                "morn": 11.61
            },
            "pressure": 1027,
            "humidity": 83,
            "weather": [
                {
                    "id": 804,
                    "main": "Clouds",
                    "description": "overcast clouds",
                    "icon": "04d"
                }
            ],
            "speed": 1.93,
            "deg": 215,
            "gust": 2.16,
            "clouds": 100,
            "pop": 0
        }
    ]
}

[matopeto]

@Joed1211 I'm closing this issue as completed. I won't be working on it for now, but in the future, I'll consider how to implement your ideas, whether it’s larger increments for the "3-hour API" or integrating the daily forecast.