Icon for the wind direction

Wibbmer commented 2 years ago

In ConversionTrait.php


private function makeWindIconFromDeg($deg,$locale): String
    {
        $rotate=135+$deg; //the icon itself is already rotated, add 135 to reset it to point north>south

        return '<i 
              style="transform: rotate('.$rotate.'deg)" //rotate using CSS transform
              title="'.$this->degreeesToWindDirection($deg,$locale) //add a small pop-up on hover describing the direction, this uses your existing function
              .'" class="fa-solid fa-location-arrow">
              </i>';
    }

In CurrentWeather.php add

$current['wind_icon']=$this->makeWindIconFromDeg($current['wind_deg'],$locale);

And in Forecast.php

$item['wind_icon']=$this->makeWindIconFromDeg($item['wind_deg'],$locale);

Now you can create an icon showing the wind direction in antlers like so

{{wind_icon}}

Note: this requires fontawesome (v6) to work, since the icon is derived from there

Wibbmer commented 2 years ago

On that note, I have added a localized version of the directions for German de in private function directions($locale) of ConversionTrait.php


elseif ($locale == 'de')
        {
            return [
                'N', 'NNO', 'NO', 'ONO',
                'O', 'OSO', 'SO', 'SSO',
                'S', 'SSW', 'SW', 'WSW',
                'W', 'WNW', 'NW', 'NNW',
                'N'
            ];

        }

vannut commented 1 month ago

In v2 I added the german translation. Regarding the wind arrow. I think that would be best to address in the template instead of the add on

vannut / statamic-weather-addon

Icon for the wind direction #8