< Pete Goodman Web developer >

Labs - Responsive Astronomy Picture of the Day

Sunday 15th January 2012, 11:37

Space is great. Every day the Astronomy Picture of the Day website is updated with a new image showcasing just how incredible the universe is.

The new updates are posted to the APOD Twitter account every day. In the UK this tweet is posted at 5:30am, so a lot of people see this update via their mobile phones. The problem is, the APOD web page is difficult to read on a mobile.

Viewing the APOD site on a mobile

Using the Tweet Munger (Custom Translations) lab that I made a few months ago, I've written a quick script to detect when a tweet is posted by APOD to showcase the new picture of the day, created a mobile-optimised version of the web page that's easier to read on a mobile device, and tweeted a link to this from a new account.

Viewing the APODR site on a mobile

The new twitter account is APODR, and the updated web page can be found here.

The Tweet Munger script made it really easy to detect new tweets and generate the updated page when a new picture has been posted.

In the new Tweet Munger 'translation' class, I duplicated the pirate default, removed all translations, but instead hooked into the 'additionalMunging' method that allows the tweet to be updated before being posted.

For the tweet itself I simply replaced the APOD URL with my own. At this point I also grab the APOD website HTML source code, and add in a few little tweaks to optimise it for mobile - adding a meta viewport element. It also has an extra fix for an iOS scaling/rotation bug.

 
<?php
/*
 * Apodr Translations class
 */
class ApodrTranslations extends Translations {

    /*
     * Updated HTML comments
     */
    public $updateStart = "\n<!-- APODR START -->\n";

    /*
     * Updated HTML comments
     */
    public $updateEnd = "\n<!-- APODR END -->\n";
    
    /*
     * Updated Metadata
     * 
     * Replace "</head>"
     */
    public $meta = '
      <base href="http://apod.nasa.gov/apod/">
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <script src="https://raw.github.com/gist/901295/bf9a44b636a522e608bba11a91b8298acd081f50/ios-viewport-scaling-bug-fix.js"></script>
      <style>
        img, object { max-width:100%; height:auto; }
        iframe { max-width:100%; }
        .credit { background:#000; margin:0; padding:10px; color:#fff; list-style:none; text-align:center;  }
        .credit li { display:inline-block; margin:0; padding:0 20px; }
        .credit a { color:#fff; }
      </style>
    ';
     
    /*
     * Updated Header
     */
    public $header = '
      <ul class="credit">
        <li><a href="http://apod.nasa.gov/apod/">View original</a></li>
        <li><a href="http://petegoodman.com/labs/responsive-astronomy-picture-of-the-day/">Back to lab</a></li>
      </ul>    
    ';
      
    /*
     * Updated Metadata
     */
    public $footer = '
    ';   

    /*
     * An additional bit of piratical munging
     * @var string
     * @return string
     */
    public function additionalMunging($text, $context) {
      
        // today's date
        $date = date("Y-m-d");

        // get src of latest apod page
        $src = $this->file_get_contents_curl("http://apod.nasa.gov/apod/");

        // add meta
        $src = str_replace("</head>", $this->updateStart.$this->meta.$this->updateEnd."\n</head>", $src);
        
        // add header
        $src = preg_replace('/<center>/i', $this->updateStart.$this->header.$this->updateEnd."\n<center>", $src, 1);

        // add footer
        $src = str_replace("</body>", $this->updateStart.$this->header.$this->footer.$this->updateEnd."\n</body>", $src);

        // save index file - update latest for directory root
        $fp = fopen('../index.html', 'w');
        fwrite($fp, $src);
        fclose($fp);
        
        // save dated file - for twitter
        $fp = fopen('../'.$date.'.html', 'w');
        fwrite($fp, $src);
        fclose($fp);

        // grab first part of tweet (up to URL)
        $description = substr($text, 0, strrpos($text, ": "));

        // update tweet with new URL
        $text = $description . ": http://labs.petegoodman.com/apodr/".$date.".html";
        $context->debug('<p>Additional munging: ' . $text . '</p>');
        return $text;
    }
    
    
    /*
     * http://snipplr.com/view.php?codeview&id=4084
     * Curl replacement for file_get_contents 
     */
     private function file_get_contents_curl($url) {
     	$ch = curl_init();

     	curl_setopt($ch, CURLOPT_HEADER, 0);
     	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); //Set curl to return the data instead of printing it to the browser.
     	curl_setopt($ch, CURLOPT_URL, $url);

     	$data = curl_exec($ch);
     	curl_close($ch);

     	return $data;
     }
}

A quick, simple little lab that makes it much easier to read the details of the Astronomy Picture of the Day, wherever you are...

Comments

  1. Austin Austin
    Spot on with this write-up, I actually feel this website needs a great deal more attention. I'll probably be
    back again to see more, thanks for the info!
    18th June 2012, 15:45 #

Please feel free to add a comment

Add a comment

Prove you are human*


* denotes a required field.

Email addresses are for verification only, and will not be published

The RECAPTCHA spam protection enables me to differentiate between genuine human comments and computer-generated spam.