A Funny Weather App

AhahWeather Icon

AhahWeather

Get it on Google Play

Front-end

AhahWeather has been developed with React-native, thus permitting us to deliver the same app on iOS and Android platform by essentially writing the same code.

React native is a popular framework developed by Facebook, which is based on React.
There exists many components which enables common techniques. Here is a list of all of those used in the app:

  • react-native-animatable
  • react-native-default-preference
  • react-native-elements
  • react-native-fs
  • react-native-image-progress
  • react-native-modalbox
  • react-native-orientation
  • react-native-progress
  • react-native-spinkit
  • react-native-vector-icons

Back-end

AhahWeather back-end service is written in Php and relies on the OpenWeatherMap web service to provide forecasts data.

The gifs have been carefully selected from the ones provided by Giphy and Tenor.

Gif creation

AhahWeather creates animated gif by using the Php Imagick extension. The following excerpt shows how to draw text and images over a source animated gif

                

    $image = new Imagick('animated_photo.gif'); //create the image from the gif file
    $image = $image->coalesceImages(); //eventually unoptimize frames of the animated gif 

    //construct an ImagickDraw object to draw text
    $draw_city = new ImagickDraw();
    $draw_city->setFillColor('white');
    $draw_city->setFont('Helvetica');
    $draw_city->setStrokeWidth(1);
    $draw_city->setStrokeColor('#000');
    $draw_city->setFontSize(40);
    $draw_city->setTextAntialias(true);

    //cycle each frame
    foreach ($image as $frame)
    {
        //annotateImage draws text over the frame
        $frame->annotateImage($draw_city, 10, 10, 0, 'Miami');
        
        //...

        //compositeImage draws another image over the frame. Note the COMPOSITE_ATOP flag
        //$icon_image is an Imagick object
        $frame->compositeImage($icon_image, \Imagick::COMPOSITE_ATOP, 40, 40);
    }

    //optimize the animated gif
    $image = $image->deconstructImages();

    //write the image on file. The second parameter is set to true to create the animated gif
    $image->writeImages('output_photo.gif', true);