Add weather card to overview/home page

master
Skylar Ittner 5 years ago
parent 0489caabca
commit 3f5cc0129c

3
.gitmodules vendored

@ -4,3 +4,6 @@
[submodule "static/Shuffle"]
path = static/Shuffle
url = https://source.netsyms.com/Mirrors/Vestride_Shuffle.git
[submodule "static/weather-icons"]
path = static/weather-icons
url = https://source.netsyms.com/Mirrors/erikflowers_weather-icons.git

@ -7,7 +7,6 @@
/**
* Make things happen when buttons are pressed and forms submitted.
*/
require_once __DIR__ . "/required.php";
if ($VARS['action'] !== "signout") {
@ -35,8 +34,37 @@ switch ($VARS['action']) {
session_destroy();
header('Location: index.php?logout=1');
die("Logged out.");
case "thumbnail":
header("Content-Type: image/jpeg");
// TODO
case "settempunits":
$unit = "C";
if (!empty($VARS['unit'])) {
switch (strtoupper($VARS['unit'])) {
case "F":
$unit = "F";
break;
case "C":
$unit = "C";
break;
case "K":
$unit = "K";
break;
}
}
setcookie("TemperatureUnitsPref", $unit, time() + 60 * 60 * 24 * 90);
returnToSender("");
break;
case "setspeedunits":
$unit = "K";
if (!empty($VARS['unit'])) {
switch (strtoupper($VARS['unit'])) {
case "KPH":
$unit = "KPH";
break;
case "MPH":
$unit = "MPH";
break;
}
}
setcookie("SpeedUnitsPref", $unit, time() + 60 * 60 * 24 * 90);
returnToSender("");
break;
}

@ -0,0 +1,6 @@
{
"High: {temp}{units}": "High: {temp}{units}",
"Low: {temp}{units}": "Low: {temp}{units}",
"Temperature: {temp}{units}": "Temperature: {temp}{units}",
"{temp}{units}": "{temp}{units}"
}

@ -0,0 +1,249 @@
<?php
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
/**
* Represents the weather conditions at a specific time and place.
*/
class Conditions {
/**
* @var float Latitude of these conditions.
*/
public $lat = 0.0;
/**
* @var float Longitude of these conditions.
*/
public $lng = 0.0;
/**
* @var int UNIX timestamp of when these conditions occur.
*/
public $time = 0;
/**
* @var string Human readable summary of conditions.
*/
public $summary = "";
/**
* @var bool True if daytime, false if nighttime. Set with setDayOrNight().
*/
private $daytime = true;
/**
* @var float Temperature in degrees Celsius
*/
public $temperature = 0.0;
public $tempHigh = 0.0;
public $tempLow = 0.0;
/**
* @var float The "feel like" temperature.
*/
public $tempFeels = 0.0;
/**
* @var float The probability of precipitation, between 0 and 1 inclusive.
*/
public $precipProbability = 0.0;
/**
* @var \PrecipType The precipitation type.
*/
public $precipType = PrecipType::NONE;
/**
* @var float Millimeters per hour of precipitation
*/
public $precipIntensity = 0.0;
/**
* @var float Columnar density of total atmospheric ozone in Dobson units.
*/
public $ozone = 0.0;
/**
* @var float Dewpoint in degrees Celsius.
*/
public $dewpoint = 0.0;
/**
* @var float Percentage of sky covered in clouds, between 0 and 1 inclusive.
*/
public $cloudCover = 0.0;
/**
* @var float Relative humidity, between 0 and 1 inclusive.
*/
public $humidity = 0.0;
/**
* @var float Visibility in kilometers
*/
public $visibility = 10.0;
/**
* @var int The UV index.
*/
public $uvindex = 0;
/**
* @var float Wind speed in km/h
*/
public $windSpeed = 0.0;
/**
* @var float Wind gust speed in km/h
*/
public $windGust = 0.0;
/**
* @var int Wind direction in degrees
*/
public $windBearing = 0;
/**
* Set the value of $daytime based on the $time, $lat, and $lng variables.
* @return bool True for daytime, False for nighttime.
*/
public function setDayorNight(): bool {
$sunrise = date_sunrise($this->time, SUNFUNCS_RET_TIMESTAMP, $this->lat, $this->lng);
$sunset = date_sunset($this->time, SUNFUNCS_RET_TIMESTAMP, $this->lat, $this->lng);
$this->daytime = ($this->time >= $sunrise && $this->time < $sunset);
return $this->daytime;
}
/**
* Check if it's day or night, based on location and time.
* @return bool true if daytime.
*/
public function isDay(): bool {
return $this->setDayorNight();
}
/**
* Check if it's windy (6 or higher on the Beaufort scale).
*
* A 6 is described as large branches in motion, whistling heard in power
* lines, and umbrellas used with difficulty.
*
* https://en.wikipedia.org/wiki/Beaufort_scale
*
* @return bool true if it's windy.
*/
public function isWindy(): bool {
return ($this->windSpeed >= 39);
}
/**
* Check if it's cloudy out (greater than 50% cloud cover).
* @return bool
*/
public function isCloudy(): bool {
return ($this->cloudCover > 0.5);
}
/**
* Check if it's overcast(greater than 80% cloud cover).
* @return bool
*/
public function isOvercast(): bool {
return ($this->cloudCover > 0.8);
}
/**
* Check if it's really hot out (> 32C/90F)
* @return bool true if it's hotter than my mixtape outside
*/
public function isHot(): bool {
return ($this->temperature > 32);
}
/**
* Check if it's really cold out (< -6C/20F)
* @return bool true if it's cold af
*/
public function isCold(): bool {
return ($this->temperature < -6);
}
/**
* Get a suitable icon to show for the weather conditions.
*
* https://erikflowers.github.io/weather-icons/
*
* @return string
*/
public function getIcon(): string {
$downfall = "";
if ($this->precipProbability > 0.5) {
switch ($this->precipType) {
case PrecipType::RAIN:
$downfall = "rain";
break;
case PrecipType::SNOW:
$downfall = "snow";
break;
case PrecipType::SLEET:
$downfall = "sleet";
break;
case PrecipType::HAIL:
$downfall = "hail";
break;
}
}
// Handle precipitation icons for day/night, windy/not, and overcast
if ($downfall != "") {
$wind = $this->isWindy() ? "-wind" : "";
if ($this->isOvercast()) {
return "wi-$downfall$wind";
} else {
$daynight = $this->isDay() ? "day" : "night-alt";
return "wi-$daynight-$downfall$wind";
}
}
if ($this->isOvercast()) {
return "wi-cloudy";
}
if ($this->isCloudy()) {
return $this->isDay() ? "wi-day-cloudy" : "wi-night-alt-cloudy";
}
if ($this->isCold()) {
return "wi-snowflake-cold";
}
if ($this->isDay()) {
if ($this->isHot()) {
return "wi-hot";
}
return "wi-day-sunny";
}
// Pick one for variety
return ["wi-night-clear", "wi-night-clear", "wi-stars"][random_int(0, 2)];
}
}
class PrecipType {
const NONE = 1;
const RAIN = 2;
const SNOW = 4;
const SLEET = 8;
const HAIL = 16;
}

@ -6,6 +6,81 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
class Weather {
abstract class Weather {
protected $conditions = [];
protected $currently;
protected $low;
protected $high;
protected $lat = 0.0;
protected $lng = 0.0;
public function __construct($latitude, $longitude) {
$this->lat = $latitude;
$this->lng = $longitude;
}
abstract protected function loadForecast();
// Getters
public function getLatitude(): float {
return $this->lat;
}
public function getLongitude(): float {
return $this->lng;
}
public function getForecast(): array {
return $this->conditions;
}
public function getCurrently(): Conditions {
return $this->currently;
}
public function getLow() {
return $this->low;
}
public function getHigh() {
return $this->high;
}
// Setters
public function setForecast(array $conditions) {
$this->conditions = $conditions;
}
public function setCurrently(Conditions $weather) {
$this->currently = $weather;
}
public function setLow(Conditions $weather) {
$this->low = $weather;
}
public function setHigh(Conditions $weather) {
$this->high = $weather;
}
/**
* Convert a temperature in Celsuis to the given unit ("F" or "K").
* @param float $temperature
* @param string $to
* @return float
*/
public static function convertDegCToUnits(float $temperature, string $to): float {
switch (strtoupper($to)) {
case "K":
return $temperature + 273.15;
case "F":
return ($temperature * (9.0 / 5.0)) + 32.0;
default:
return $temperature;
}
}
}

@ -8,4 +8,39 @@
class Weather_DarkSky extends Weather {
public function loadForecast() {
global $SETTINGS;
$apikey = $SETTINGS['apikeys']['darksky.net'];
$url = "https://api.darksky.net/forecast/$apikey/" . $this->lat . ',' . $this->lng;
$json = ApiFetcher::get($url, ["exclude" => "minutely,hourly", "units" => "ca", "lang" => $SETTINGS['language']]);
$resp = json_decode($json);
$currently = new Conditions();
$currently->lat = $this->lat;
$currently->lng = $this->lng;
$currently->time = $resp->currently->time;
$currently->summary = $resp->currently->summary;
$currently->setDayorNight();
$currently->temperature = $resp->currently->temperature;
$currently->tempFeels = $resp->currently->apparentTemperature;
$currently->precipProbability = $resp->currently->precipProbability;
$currently->ozone = $resp->currently->ozone;
$currently->dewpoint = $resp->currently->dewPoint;
$currently->cloudCover = $resp->currently->cloudCover;
$currently->humidity = $resp->currently->humidity;
$currently->visibility = $resp->currently->visibility;
$currently->uvindex = $resp->currently->uvIndex;
$currently->windSpeed = $resp->currently->windSpeed;
$currently->windGust = $resp->currently->windGust;
$currently->windBearing = $resp->currently->windBearing;
$this->setCurrently($currently);
}
}

@ -10,6 +10,9 @@ define("PAGES", [
"title" => "Overview",
"navbar" => true,
"icon" => "fas fa-home",
"styles" => [
"static/weather-icons/css/weather-icons.min.css"
],
"scripts" => [
"static/Shuffle/dist/shuffle.min.js",
"static/js/home.js"

@ -5,6 +5,21 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
//$weatherclass = "Weather_" . $SETTINGS['sources']['weather'];
//$weather = new $weatherclass(46.595806, -112.027031); // TODO: get user location
$weather = new Weather_DarkSky(46.595806, -112.027031);
$weather->loadForecast();
$tempunits = "C";
$degreesymbol = "&#176;";
if (!empty($_COOKIE['TemperatureUnitsPref']) && preg_match("/[FCK]/", $_COOKIE['TemperatureUnitsPref'])) {
$tempunits = $_COOKIE['TemperatureUnitsPref'];
// No degree symbol for Kelvins
if ($tempunits == "K") {
$degreesymbol = "";
}
}
News::load($SETTINGS["sources"]["news"]);
$newsitems = News::getItems();
@ -16,36 +31,73 @@ foreach ($newsitems as $item) {
}
?>
<div class="card mb-4">
<div class="card-body">
<div class="d-flex">
<?php
$currently = $weather->getCurrently();
?>
<div class="mr-4 display-4">
<i class="wi wi-fw <?php echo $currently->getIcon(); ?>"></i>
</div>
<div>
<h2><?php echo $currently->summary; ?></h2>
<h4><?php $Strings->build("{temp}{units}", ["temp" => round(Weather::convertDegCToUnits($currently->temperature, $tempunits), 1), "units" => " $degreesymbol$tempunits"]); ?></h4>
</div>
</div>
</div>
<div class="card-footer d-flex justify-content-between">
<div>
<a class="px-2" href="./action.php?action=settempunits&source=home&unit=F">F</a> |
<a class="px-2" href="./action.php?action=settempunits&source=home&unit=C">C</a> |
<a class="px-2" href="./action.php?action=settempunits&source=home&unit=K">K</a>
</div>
<div class="text-muted">
<i class="fas fa-map-marker-alt"></i> <?php echo round($weather->getLatitude(), 2) . ", " . round($weather->getLongitude(), 2); ?>
</div>
</div>
</div>
<p class="lead">
<i class="fas fa-newspaper fa-fw"></i> <?php $Strings->get("Headlines"); ?>
</p>
<?php
?>
<div class="list-group mb-4">
<div class="row" id="news-grid">
<?php
$count = 0;
foreach ($itemsbycategory["general"] as $item) {
if ($count >= 6) {
if ($count >= 10) {
break;
}
$count++;
?>
<div class="list-group-item d-flex justify-content-between">
<div class="col-12 col-sm-6 col-md-6 col-lg-4 px-1 m-0 grid__brick" data-groups='["<?php echo $item->getCategory()->toString(); ?>"]'>
<div class="card mb-2">
<?php if (!empty($item->getImage())) { ?>
<a href="<?php echo $item->getURL(); ?>" target="_BLANK">
<img src="<?php
if (strpos($item->getImage(), "preview.redd.it") !== false) {
echo $item->getImage();
} else {
echo Thumbnail::getThumbnailCacheURL($item->getImage(), 500);
}
?>" class="card-img-top" alt="">
</a>
<?php } ?>
<div class="card-body">
<a class="text-dark" href="<?php echo $item->getURL(); ?>" target="_BLANK">
<h4>
<h4 class="card-title">
<?php echo htmlentities($item->getHeadline()); ?>
</h4>
<p class="text-muted"><?php echo htmlentities($item->getSource()); ?></p>
</a>
<?php if (!empty($item->getImage())) { ?>
<img src="<?php echo Thumbnail::getThumbnailCacheURL($item->getImage(), 100); ?>" alt="" class="img-fluid">
<?php } ?>
<p class="small"><?php echo $item->getSource(); ?></p>
</div>
<?php
}
?>
</div>
<?php
?>
</div>
<?php } ?>
<div class="col-1 sizer-element"></div>
</div>

@ -51,9 +51,7 @@ $SETTINGS = [
"NewsAPI",
"Reddit"
],
"weather" => [
"DarkSky"
]
"weather" => "DarkSky"
],
// List of required user permissions to access this app.
"permissions" => [

@ -0,0 +1,15 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
window.shuffleInstance = new window.Shuffle(document.getElementById('news-grid'), {
itemSelector: '.grid__brick',
sizer: '.sizer-element'
});
setInterval(function () {
window.shuffleInstance.layout();
}, 500);

@ -0,0 +1 @@
Subproject commit 58cb6a2ee70b3352f5b82d1d124da05b26659c69
Loading…
Cancel
Save