xadammr/pi-weather-station
1
0
Fork 0
Code Releases Activity

ClimaCell API v4 (#8)

Browse Source 
* gets lan/lon from map geo

* climacell v4 endpoints

* Uses ClimaCell API v4, adds Sunrise-Sunset API
This commit is contained in:
Eric
2021-01-28 19:46:11 -06:00
committed by GitHub
parent 6456d30dba
commit 5882f41615
12 changed files with 187 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/dist/bundle.min.js
Vendored
+9 -9
View File
File diff suppressed because one or more lines are too long
client/src/AppContext.js
+57 -20
View File
@@ -48,6 +48,8 @@ export function AppContextProvider({ children }) {
const [customLat, setCustomLat] = useState(null); const [customLat, setCustomLat] = useState(null);
const [customLon, setCustomLon] = useState(null); const [customLon, setCustomLon] = useState(null);
const [mouseHide, setMouseHide] = useState(false); const [mouseHide, setMouseHide] = useState(false);
const [sunriseTime, setSunriseTime] = useState(null);
const [sunsetTime, setSunsetTime] = useState(null);
/** /**
* Save mouse hide state * Save mouse hide state
@@ -307,10 +309,10 @@ export function AppContextProvider({ children }) {
setHourlyWeatherDataErrMsg(null); setHourlyWeatherDataErrMsg(null);
const { latitude, longitude } = coords; const { latitude, longitude } = coords;
const fields = [ const fields = [
"temp", "temperature",
"precipitation_probability", "precipitationProbability",
"precipitation", "precipitationIntensity",
"wind_speed", "windSpeed",
].join("%2c"); ].join("%2c");
const endTime = new Date( const endTime = new Date(
@@ -330,7 +332,7 @@ export function AppContextProvider({ children }) {
axios axios
.get( .get(
`https://api.climacell.co/v3/weather/forecast/hourly?unit_system=si&fields=${fields}&apikey=${weatherApiKey}&lat=${latitude}&lon=${longitude}&end_time=${endTime}` `https://data.climacell.co/v4/timelines?location=${latitude}%2C${longitude}&fields=${fields}&timesteps=1h&apikey=${weatherApiKey}&endTime=${endTime}`
) )
.then((res) => { .then((res) => {
if (!res) { if (!res) {
@@ -365,10 +367,10 @@ export function AppContextProvider({ children }) {
setDailyWeatherDataErrMsg(null); setDailyWeatherDataErrMsg(null);
const { latitude, longitude } = coords; const { latitude, longitude } = coords;
const fields = [ const fields = [
"temp", "temperature",
"precipitation_probability", "precipitationProbability",
"precipitation", "precipitationIntensity",
"wind_speed", "windSpeed",
].join("%2c"); ].join("%2c");
const endTime = new Date( const endTime = new Date(
@@ -387,7 +389,7 @@ export function AppContextProvider({ children }) {
} }
axios axios
.get( .get(
`https://api.climacell.co/v3/weather/forecast/daily?unit_system=si&fields=${fields}&apikey=${weatherApiKey}&lat=${latitude}&lon=${longitude}&end_time=${endTime}` `https://data.climacell.co/v4/timelines?location=${latitude}%2C${longitude}&fields=${fields}&timesteps=1d&apikey=${weatherApiKey}&endTime=${endTime}`
) )
.then((res) => { .then((res) => {
if (!res) { if (!res) {
@@ -407,6 +409,39 @@ export function AppContextProvider({ children }) {
}); });
} }
function updateSunriseSunset(coords) {
return new Promise((resolve, reject) => {
if (!coords) {
setSunriseTime(null);
setSunsetTime(null);
return reject("No coords");
}
const { latitude, longitude } = coords;
axios
.get(
`https://api.sunrise-sunset.org/json?lat=${latitude}&lng=${longitude}&formatted=0`
)
.then((res) => {
const { results } = res?.data;
if (results) {
const { sunrise, sunset } = results;
setSunriseTime(sunrise);
setSunsetTime(sunset);
} else {
setSunriseTime(null);
setSunsetTime(null);
}
resolve(results);
})
.catch((err) => {
setSunriseTime(null);
setSunsetTime(null);
reject(err);
});
});
}
/** /**
* Updates current weather data * Updates current weather data
* *
@@ -421,17 +456,15 @@ export function AppContextProvider({ children }) {
setCurrentWeatherDataErrMsg(null); setCurrentWeatherDataErrMsg(null);
const { latitude, longitude } = coords; const { latitude, longitude } = coords;
// https://developer.climacell.co/v3/reference#data-layers-weather
const fields = [ const fields = [
"temp", "temperature",
"humidity", "humidity",
"wind_speed", "windSpeed",
"precipitation", "precipitationIntensity",
"precipitation_type", "precipitationType",
"sunrise", "precipitationProbability",
"sunset", "cloudCover",
"cloud_cover", "weatherCode",
"weather_code",
].join("%2c"); ].join("%2c");
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (!coords) { if (!coords) {
@@ -443,9 +476,10 @@ export function AppContextProvider({ children }) {
setSettingsMenuOpen(true); setSettingsMenuOpen(true);
return reject("Missing weather API key"); return reject("Missing weather API key");
} }
axios axios
.get( .get(
`https://api.climacell.co/v3/weather/realtime?unit_system=si&fields=${fields}&apikey=${weatherApiKey}&lat=${latitude}&lon=${longitude};` `https://data.climacell.co/v4/timelines?location=${latitude}%2C${longitude}&fields=${fields}&timesteps=current&apikey=${weatherApiKey}`
) )
.then((res) => { .then((res) => {
if (!res) { if (!res) {
@@ -572,6 +606,9 @@ export function AppContextProvider({ children }) {
dailyWeatherDataErrMsg, dailyWeatherDataErrMsg,
mouseHide, mouseHide,
saveMouseHide, saveMouseHide,
updateSunriseSunset,
sunriseTime,
sunsetTime,
}; };
return ( return (
client/src/components/CurrentWeather/index.js
+54 -50
View File
@@ -4,7 +4,6 @@ import styles from "./styles.css";
import { import {
convertTemp, convertTemp,
convertSpeed, convertSpeed,
convertLength,
} from "~/services/conversions"; } from "~/services/conversions";
import { InlineIcon } from "@iconify/react"; import { InlineIcon } from "@iconify/react";
@@ -33,29 +32,29 @@ import daySunnyOvercast from "@iconify/icons-wi/day-sunny-overcast";
* @returns {JSX.Element} Current weather conditions component * @returns {JSX.Element} Current weather conditions component
*/ */
const CurrentWeather = () => { const CurrentWeather = () => {
const { currentWeatherData, tempUnit, speedUnit, lengthUnit } = useContext( const { currentWeatherData, tempUnit, speedUnit, sunriseTime, sunsetTime } = useContext(
AppContext AppContext
); );
if (currentWeatherData) { const weatherData =
currentWeatherData?.data?.timelines?.[0]?.intervals[0]?.values;
if (weatherData) {
const { const {
cloud_cover: { value: cloudCover }, cloudCover,
humidity: { value: humidity }, humidity,
precipitation: { value: precipitation }, precipitationType,
precipitation_type: { value: precipitationType }, precipitationProbability,
temp: { value: temp }, temperature,
weather_code: { value: weatherCode }, weatherCode,
wind_speed: { value: windSpeed }, windSpeed,
sunrise: { value: sunrise }, } = weatherData;
sunset: { value: sunset }, const daylight = sunriseTime && sunsetTime ? isDaylight(new Date(sunriseTime), new Date(sunsetTime)) : true;
} = currentWeatherData;
const { icon: weatherIcon, desc: weatherDesc } = const { icon: weatherIcon, desc: weatherDesc } =
parseWeatherCode(weatherCode, isDaylight(sunrise, sunset)) || {}; parseWeatherCode(weatherCode, daylight) || {};
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={styles.currentTemp}> <div className={styles.currentTemp}>
{convertTemp(temp, tempUnit)} {convertTemp(temperature, tempUnit)}
<InlineIcon icon={degreesIcon} /> <InlineIcon icon={degreesIcon} />
</div> </div>
<div className={styles.iconContainer}> <div className={styles.iconContainer}>
@@ -65,6 +64,14 @@ const CurrentWeather = () => {
</div> </div>
<div className={styles.stats}> <div className={styles.stats}>
<div> <div>
<div className={styles.statItem}>
<div>
<InlineIcon
icon={precipitationType === 2 ? snowIcon : rainIcon}
/>
</div>
<div>{precipitationProbability}%</div>
</div>
<div className={styles.statItem}> <div className={styles.statItem}>
<div> <div>
<InlineIcon icon={cloudIcon} /> <InlineIcon icon={cloudIcon} />
@@ -88,17 +95,6 @@ const CurrentWeather = () => {
</div> </div>
<div>{parseInt(humidity)}%</div> <div>{parseInt(humidity)}%</div>
</div> </div>
<div className={styles.statItem}>
<div>
<InlineIcon
icon={precipitationType === "snow" ? snowIcon : rainIcon}
/>
</div>
<div className={styles.textUnit}>
<div>{convertLength(precipitation, lengthUnit)}</div>
<div>{lengthUnit}</div>
</div>
</div>
</div> </div>
</div> </div>
<div className={styles.description}>{weatherDesc || ""}</div> <div className={styles.description}>{weatherDesc || ""}</div>
@@ -112,61 +108,69 @@ const CurrentWeather = () => {
/** /**
* Parse weather code * Parse weather code
* *
* https://docs.climacell.co/reference/data-layers-overview
*
* @param {String} code * @param {String} code
* @param {Boolean} [isDay] if it is currently day * @param {Boolean} [isDay] if it is currently day
* @returns {Object} weather description and icon * @returns {Object} weather description and icon
*/ */
const parseWeatherCode = (code, isDay) => { const parseWeatherCode = (code, isDay) => {
switch (code) { switch (code) {
case "freezing_rain_heavy": case 6201:
return { desc: "Heavy freezing rain", icon: isDay ? dayRain : nightRain }; return { desc: "Heavy freezing rain", icon: isDay ? dayRain : nightRain };
case "freezing_rain": case 6001:
return { desc: "Freezing rain", icon: isDay ? dayRain : nightRain }; return { desc: "Freezing rain", icon: isDay ? dayRain : nightRain };
case "freezing_rain_light": case 6200:
return { desc: "Light freezing rain", icon: isDay ? dayRain : nightRain }; return { desc: "Light freezing rain", icon: isDay ? dayRain : nightRain };
case "freezing_drizzle": case 6000:
return { desc: "Freezing drizzle", icon: rainMix }; return { desc: "Freezing drizzle", icon: rainMix };
case "ice_pellets_heavy": case 7101:
return { desc: "Heavy ice pellets", icon: rainMix }; return { desc: "Heavy ice pellets", icon: rainMix };
case "ice_pellets": case 7000:
return { desc: "Ice pellets", icon: rainMix }; return { desc: "Ice pellets", icon: rainMix };
case "ice_pellets_light": case 7102:
return { desc: "Light ice pellets", icon: rainMix }; return { desc: "Light ice pellets", icon: rainMix };
case "snow_heavy": case 5101:
return { desc: "Heavy snow", icon: snowIcon }; return { desc: "Heavy snow", icon: snowIcon };
case "snow": case 5000:
return { desc: "Show", icon: snowIcon }; return { desc: "Show", icon: snowIcon };
case "snow_light": case 5100:
return { desc: "Light snow", icon: snowIcon }; return { desc: "Light snow", icon: snowIcon };
case "flurries": case 5001:
return { desc: "Flurries", icon: snowIcon }; return { desc: "Flurries", icon: snowIcon };
case "tstorm": case 8000:
return { desc: "Thunder storm", icon: thunderstormIcon }; return { desc: "Thunder storm", icon: thunderstormIcon };
case "rain_heavy": case 4201:
return { desc: "Heavy rain", icon: isDay ? dayRain : nightRain }; return { desc: "Heavy rain", icon: isDay ? dayRain : nightRain };
case "rain": case 4001:
return { desc: "Rain", icon: isDay ? dayRain : nightRain }; return { desc: "Rain", icon: isDay ? dayRain : nightRain };
case "rain_light": case 4200:
return { desc: "Light rain", icon: isDay ? dayRain : nightRain }; return { desc: "Light rain", icon: isDay ? dayRain : nightRain };
case "drizzle": case 4000:
return { desc: "Drizzle", icon: rainMix }; return { desc: "Drizzle", icon: rainMix };
case "fog_light": case 2100:
return { desc: "Light fog", icon: fogIcon }; return { desc: "Light fog", icon: fogIcon };
case "fog": case 2000:
return { desc: "Fog", icon: fogIcon }; return { desc: "Fog", icon: fogIcon };
case "cloudy": case 1001:
return { desc: "Cloudy", icon: cloudyIcon }; return { desc: "Cloudy", icon: cloudyIcon };
case "mostly_cloudy": case 1102:
return { desc: "Mostly cloudy", icon: cloudyIcon }; return { desc: "Mostly cloudy", icon: cloudyIcon };
case "partly_cloudy": case 1101:
return { return {
desc: "Partly cloudy", desc: "Partly cloudy",
icon: isDay ? daySunnyOvercast : nightAltCloudy, icon: isDay ? daySunnyOvercast : nightAltCloudy,
}; };
case "mostly_clear": case 1100:
return { desc: "Mostly clear", icon: isDay ? dayCloudy : nightAltCloudy }; return { desc: "Mostly clear", icon: isDay ? dayCloudy : nightAltCloudy };
case "clear": case 1000:
return { desc: "Clear", icon: isDay ? daySunny : nightClear }; return { desc: "Clear", icon: isDay ? daySunny : nightClear };
case 3001:
return { desc: "Wind", icon: strongWind };
case 3000:
return { desc: "Light wind", icon: strongWind };
case 3002:
return { desc: "Strong wind", icon: strongWind };
} }
}; };
client/src/components/LocationName/index.js
+6 -6
View File
@@ -11,12 +11,12 @@ import styles from "./styles.css";
* @returns {JSX.Element} Location name * @returns {JSX.Element} Location name
*/ */
const LocationName = () => { const LocationName = () => {
const { currentWeatherData, reverseGeoApiKey } = useContext(AppContext); const { mapGeo, reverseGeoApiKey } = useContext(AppContext);
const [name, setName] = useState(null); const [name, setName] = useState(null);
useEffect(() => { useEffect(() => {
if (currentWeatherData && reverseGeoApiKey) { if (mapGeo && reverseGeoApiKey) {
const { lat, lon } = currentWeatherData; const { latitude: lat, longitude: lon } = mapGeo;
reverseGeocode({ lat, lon, apiKey: reverseGeoApiKey }) reverseGeocode({ lat, lon, apiKey: reverseGeoApiKey })
.then((res) => { .then((res) => {
setName(getName(res)); setName(getName(res));
@@ -25,11 +25,11 @@ const LocationName = () => {
setName(`${lat}, ${lon}`); setName(`${lat}, ${lon}`);
console.log("err!", err); console.log("err!", err);
}); });
} else if (currentWeatherData && !reverseGeoApiKey) { } else if (mapGeo && !reverseGeoApiKey) {
const { lat, lon } = currentWeatherData; const { latitude: lat, longitude: lon } = mapGeo;
setName(`${lat}, ${lon}`); setName(`${lat}, ${lon}`);
} }
}, [currentWeatherData, reverseGeoApiKey]); }, [mapGeo, reverseGeoApiKey]);
return ( return (
<div className={`${styles.container}`}> <div className={`${styles.container}`}>
client/src/components/SunRiseSet/index.js
+4 -8
View File
@@ -13,24 +13,20 @@ import styles from "./styles.css";
* @returns {JSX.Element} Sunrise / Sunset component * @returns {JSX.Element} Sunrise / Sunset component
*/ */
const SunRiseSet = () => { const SunRiseSet = () => {
const { currentWeatherData, clockTime } = useContext(AppContext); const { sunriseTime, sunsetTime, clockTime } = useContext(AppContext);
if (currentWeatherData) { if (sunriseTime && sunsetTime) {
const {
sunrise: { value: sunrise },
sunset: { value: sunset },
} = currentWeatherData;
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div> <div>
<InlineIcon icon={bxsSun} /> <InlineIcon icon={bxsSun} />
<span> <span>
{format(new Date(sunrise), clockTime === "12" ? "p" : "HH:mm")} {format(new Date(sunriseTime), clockTime === "12" ? "p" : "HH:mm")}
</span> </span>
</div> </div>
<div> <div>
<InlineIcon icon={bxsMoon} /> <InlineIcon icon={bxsMoon} />
<span> <span>
{format(new Date(sunset), clockTime === "12" ? "p" : "HH:mm")} {format(new Date(sunsetTime), clockTime === "12" ? "p" : "HH:mm")}
</span> </span>
</div> </div>
</div> </div>
client/src/components/WeatherInfo/index.js
+3 -1
View File
@@ -61,6 +61,7 @@ const WeatherInfo = () => {
darkMode, darkMode,
setSettingsMenuOpen, setSettingsMenuOpen,
currentWeatherData, currentWeatherData,
updateSunriseSunset
} = useContext(AppContext); } = useContext(AppContext);
const [ const [
@@ -77,10 +78,11 @@ const WeatherInfo = () => {
const [err, setErr] = useState(null); const [err, setErr] = useState(null);
const hourlyWeatherUpdateCb = useCallback(() => { const hourlyWeatherUpdateCb = useCallback(() => {
updateSunriseSunset(mapGeo);
updateHourlyWeatherData(mapGeo).catch((err) => { updateHourlyWeatherData(mapGeo).catch((err) => {
console.log("err", err); console.log("err", err);
}); });
}, [updateHourlyWeatherData, mapGeo]); }, [updateHourlyWeatherData, updateSunriseSunset, mapGeo]);
const dailyWeatherUpdateCb = useCallback(() => { const dailyWeatherUpdateCb = useCallback(() => {
updateDailyWeatherData(mapGeo).catch((err) => { updateDailyWeatherData(mapGeo).catch((err) => {
client/src/components/weatherCharts/DailyChart/index.js
+20 -21
View File
@@ -87,16 +87,22 @@ const createChartOptions = ({
const chartColors = { const chartColors = {
blue: "rgba(63, 127, 191, 0.5)", blue: "rgba(63, 127, 191, 0.5)",
gray: "rgba(127, 127, 127, 0.5)", gray: "rgba(127, 127, 127, 0.5)",
gray2: "rgba(127, 127, 127, 0.3)",
}; };
const mapChartData = ({ data, tempUnit, speedUnit, altMode, lengthUnit }) => { const mapChartData = ({
data: weatherData,
tempUnit,
speedUnit,
altMode,
lengthUnit,
}) => {
const data = weatherData?.data?.timelines?.[0]?.intervals;
if (!data) { if (!data) {
return null; return null;
} }
return { return {
labels: data.map((e) => { labels: data.map((e) => {
const date = new Date(e.observation_time.value); const date = new Date(e.startTime);
const adjustedTimestamp = const adjustedTimestamp =
date.getTime() + date.getTimezoneOffset() * 60 * 1000; date.getTime() + date.getTimezoneOffset() * 60 * 1000;
return format(new Date(adjustedTimestamp), "EEEEE"); return format(new Date(adjustedTimestamp), "EEEEE");
@@ -104,37 +110,30 @@ const mapChartData = ({ data, tempUnit, speedUnit, altMode, lengthUnit }) => {
datasets: [ datasets: [
{ {
radius: 0, radius: 0,
label: altMode ? "High Wind Speed" : "High Temp", label: altMode ? "Wind Speed" : "Temp",
data: data.map((e) => { data: data.map((e) => {
const {
values: { windSpeed, temperature },
} = e;
return altMode return altMode
? convertSpeed(e.wind_speed[1].max.value, speedUnit) ? convertSpeed(windSpeed, speedUnit)
: convertTemp(e.temp[1].max.value, tempUnit); : convertTemp(temperature, tempUnit);
}), }),
yAxisID: "y-axis-1", yAxisID: "y-axis-1",
borderColor: chartColors.gray, borderColor: chartColors.gray,
backgroundColor: chartColors.gray, backgroundColor: chartColors.gray,
fill: false, fill: false,
}, },
{
radius: 0,
label: altMode ? "Low Wind Speed" : "Low Temp",
data: data.map((e) => {
return altMode
? convertSpeed(e.wind_speed[0].min.value, speedUnit)
: convertTemp(e.temp[0].min.value, tempUnit);
}),
yAxisID: "y-axis-1",
borderColor: chartColors.gray2,
backgroundColor: chartColors.gray2,
fill: false,
},
{ {
radius: 0, radius: 0,
label: "Precipitation", label: "Precipitation",
data: data.map((e) => { data: data.map((e) => {
const {
values: { precipitationIntensity, precipitationProbability },
} = e;
return altMode return altMode
? convertLength(e.precipitation[0].max.value, lengthUnit) ? convertLength(precipitationIntensity, lengthUnit)
: e.precipitation_probability.value; : precipitationProbability;
}), }),
yAxisID: "y-axis-2", yAxisID: "y-axis-2",
borderColor: chartColors.blue, borderColor: chartColors.blue,
client/src/components/weatherCharts/HourlyChart/index.js
+16 -9
View File
@@ -90,25 +90,26 @@ const chartColors = {
}; };
const mapChartData = ({ const mapChartData = ({
data, data: weatherData,
tempUnit, tempUnit,
speedUnit, speedUnit,
clockTime, clockTime,
altMode, altMode,
lengthUnit, lengthUnit,
}) => { }) => {
const data = weatherData?.data?.timelines?.[0]?.intervals;
if (!data) { if (!data) {
return null; return null;
} }
return { return {
labels: data.map((e) => { labels: data.map((e) => {
if (clockTime === "12") { if (clockTime === "12") {
return `${format(new Date(e.observation_time.value), "h")}${format( return `${format(new Date(e.startTime), "h")}${format(
new Date(e.observation_time.value), new Date(e.startTime),
"aaaaa" "aaaaa"
)}`; )}`;
} else { } else {
return `${format(new Date(e.observation_time.value), "HH")}`; return `${format(new Date(e.startTime), "HH")}`;
} }
}), }),
datasets: [ datasets: [
@@ -116,9 +117,12 @@ const mapChartData = ({
radius: 0, radius: 0,
label: altMode ? "Wind Speed" : "Temp", label: altMode ? "Wind Speed" : "Temp",
data: data.map((e) => { data: data.map((e) => {
const {
values: { windSpeed, temperature },
} = e;
return altMode return altMode
? convertSpeed(e.wind_speed.value, speedUnit) ? convertSpeed(windSpeed, speedUnit)
: convertTemp(e.temp.value, tempUnit); : convertTemp(temperature, tempUnit);
}), }),
yAxisID: "y-axis-1", yAxisID: "y-axis-1",
borderColor: chartColors.gray, borderColor: chartColors.gray,
@@ -129,9 +133,12 @@ const mapChartData = ({
radius: 0, radius: 0,
label: "Precipitation", label: "Precipitation",
data: data.map((e) => { data: data.map((e) => {
const {
values: { precipitationIntensity, precipitationProbability },
} = e;
return altMode return altMode
? convertLength(e.precipitation.value, lengthUnit) ? convertLength(precipitationIntensity, lengthUnit)
: e.precipitation_probability.value; : precipitationProbability;
}), }),
yAxisID: "y-axis-2", yAxisID: "y-axis-2",
borderColor: chartColors.blue, borderColor: chartColors.blue,
@@ -196,7 +203,7 @@ const HourlyChart = () => {
/> />
</div> </div>
); );
}else if (hourlyWeatherDataErr) { } else if (hourlyWeatherDataErr) {
return ( return (
<div <div
className={`${darkMode ? styles.dark : styles.light} ${ className={`${darkMode ? styles.dark : styles.light} ${
package-lock.json
Generated
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "pi-weather-station", "name": "pi-weather-station",
"version": "0.0.1", "version": "1.0.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "pi-weather-station", "name": "pi-weather-station",
"version": "1.0.0", "version": "2.0.0",
"description": "A weather station designed for the Raspberry Pi 7 inch touchscreen", "description": "A weather station designed for the Raspberry Pi 7 inch touchscreen",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
readme.md
+12 -5
View File
@@ -1,18 +1,25 @@
# Pi Weather Station # Pi Weather Station
This is a weather station designed to be used with a Raspberry Pi on the official 7" 800x480 touchscreen. This is a weather station designed to be used with a Raspberry Pi on the official 7" 800x480 touchscreen.
![pws-screenshot3](https://user-images.githubusercontent.com/15202038/91359998-4625bb80-e7bb-11ea-937e-c87eede41f35.JPG) ![pws-screenshot3](https://user-images.githubusercontent.com/15202038/91359998-4625bb80-e7bb-11ea-937e-c87eede41f35.JPG)
The weather station will require you to have API keys from [Mapbox](https://www.mapbox.com/) and [ClimaCell](https://www.climacell.co/). Optionally, you can use an API key from [LocationIQ](https://locationiq.com/) to preform reverse geocoding. The weather station will require you to have API keys from [Mapbox](https://www.mapbox.com/) and [ClimaCell (v4)](https://www.climacell.co/). Optionally, you can use an API key from [LocationIQ](https://locationiq.com/) to preform reverse geocoding.
Weather maps are provided by the [RainViewer](https://www.rainviewer.com/) API, which generously does not require an [API key](https://www.rainviewer.com/api.html). Weather maps are provided by the [RainViewer](https://www.rainviewer.com/) API, which generously does not require an [API key](https://www.rainviewer.com/api.html).
Sunrise and Sunset times are provided by [Sunrise-Sunset](https://sunrise-sunset.org/), which generously does not require an [API key](https://sunrise-sunset.org/api).
See it in action [here](https://www.youtube.com/watch?v=dvM6cyqYSw8). See it in action [here](https://www.youtube.com/watch?v=dvM6cyqYSw8).
> Be mindful of the plan limits for your API keys and understand the terms of each provider, as scrolling around the map and selecting different locations will incur API calls for every location. Additionally, the weather station will periodically make additional api calls to get weather updates throughout the day. > Be mindful of the plan limits for your API keys and understand the terms of each provider, as scrolling around the map and selecting different locations will incur API calls for every location. Additionally, the weather station will periodically make additional api calls to get weather updates throughout the day.
## Setup # v2.0.0
1-22-2021: Now uses [ClimaCell](https://www.climacell.co/) API v4. For ClimaCell API v3 keys, use [Pi Weather Station v1](https://github.com/elewin/pi-weather-station/releases/tag/v1.0).
# Setup
> You will need to have [Node.js](https://nodejs.org/) installed. > You will need to have [Node.js](https://nodejs.org/) installed.
@@ -26,7 +33,7 @@ Start the server with
Now set point your browser to `http://localhost:8080` and put it in full screen mode (`F11` in Chromium). Now set point your browser to `http://localhost:8080` and put it in full screen mode (`F11` in Chromium).
### Access from another machine ## Access from another machine
It's possible to access the app from another machine, but beware that by doing so you'll be exposing the app to your entire network, and someone else could potentially access the app and retreive your API keys from the settings page. By default the app is only accessible to `localhost`, but if you would like to open it up to your network (at your own risk!), open `/server/index.js` and remove `"localhost"` from the line that contains: It's possible to access the app from another machine, but beware that by doing so you'll be exposing the app to your entire network, and someone else could potentially access the app and retreive your API keys from the settings page. By default the app is only accessible to `localhost`, but if you would like to open it up to your network (at your own risk!), open `/server/index.js` and remove `"localhost"` from the line that contains:
@@ -42,13 +49,13 @@ app.listen(PORT, async () => {
The server will now serve the app across your network. The server will now serve the app across your network.
## Settings # Settings
- Your API keys are saved locally (in plain text) to `settings.json`. - Your API keys are saved locally (in plain text) to `settings.json`.
- The server will attempt to get your default location, but if it cannot or you wish to choose a different default location, enter the latitude and longitude under `Custom Latitude` and `Custom Longitude` in settings, which can be accessed by tapping the gear button in the lower right hand corner. - The server will attempt to get your default location, but if it cannot or you wish to choose a different default location, enter the latitude and longitude under `Custom Latitude` and `Custom Longitude` in settings, which can be accessed by tapping the gear button in the lower right hand corner.
- To hide the mouse cursor when using a touch screen, set `Hide Mouse` to `On`. - To hide the mouse cursor when using a touch screen, set `Hide Mouse` to `On`.
## License # License
The MIT License (MIT) The MIT License (MIT)