How cool is your wallpaper?

Years ago, somewhere around 2015, reddit introduced me to an amazing tool called Wakatime. Think of it like a fit bit for your ide. Setting up is super easy, and the dashboards are super comprehensive. Ever since i installed it and gave it a spin, I've always had it configured with my ide.

Although the free plan does not give you access to data older than 7 days, you can always store your data locally using apis. Being the cheap mf i am, I opted to store my data locally in a mysql database. But what next? Do I build a dashboard? But then I would just be replicating what wakatime is already doing for me. And who even has the time to login to a dashboard and keep checking it?

So I decided to set up my desktop background with a graph of my last 45 days of coding activity time. And since I was a major php buff during the time, I created a repository and went to town with the basic api calls and storing to database part. Here's some beginner level PHP code I wrote back in the day, which still works like a charm 6 years later.

<?php
  date_default_timezone_set("Asia/Kolkata");
  echo "Running script on ".date("Y-m-d H:i:s",time())."\n";
  $wakatime = array();

  if (isset($argv[1]) && $argv[1] == '--init'){
    for ($x = $config['init_days']; $x >= 1; $x--) {
      $start = date('Y-m-d', strtotime("-{$x} days"));
      $end = date('Y-m-d', strtotime("-{$x} days"));
      $wakatime['summaries'] = file_get_contents("{$config['api_url']}summaries?api_key={$config['api_key']}&start={$start}&end={$end}");
      // var_dump($wakatime['summaries']);
      waka_log_duration($wakatime,$db);
      echo "The number is: $x \n";
    }
  } else {
    $start = date('Y-m-d', time());
    $end = date('Y-m-d', time());
    $wakatime['summaries'] = file_get_contents("{$config['api_url']}summaries?api_key={$config['api_key']}&start={$start}&end={$end}");
    waka_log_duration($wakatime,$db);
  }

  function waka_log_duration($data,$db) {
    $data = json_decode($data['summaries'], true);
    $date = date("Y-m-d", strtotime($data['start']));
    $seconds = ceil($data['cummulative_total']['seconds']);
    $stmt = $db->prepare("INSERT INTO wakadurations (wk_date,seconds) VALUES (?,?) ON DUPLICATE KEY UPDATE seconds=? ;");
    $stmt->execute(array($date, $seconds, $seconds));
    return $seconds;
  }

Now comes the hard part. We need to write a graph onto my favorite wallpaper. This picture is something I picked up off of mozilla developers website and it's been the same on almost all of the computers I've owned, much like the potato.

The graph needs to be minimal, and the labels need to be as non intrusive as possible. At the end of it, my desktop should look like it's out of a design studio, not a corporate powerpoint presentation. Best way I know to create a custom graph is using html. Overlaying it on an image? Not a problem. Highcharts and a little bit of css magic can do the job.

Moving on to creating a png image out of it to set as my desktop wallpaper. All we need to do is to somehow open up a browser tab, render the html, and screenshot the contents programmatically. Sounds simple right? Actually it is pretty simple. There's something called as a headless browser that can be controlled programmatically. Phantomjs right now is quite the rage within the headless browser scene. Although there are alternatives.

I picked up a simple script to generate a screenshot from github, and obviously, I changed the name of the script and got down to business! The commands look something like this.

<?php
  // Generate html output with a chart.
  echo system("php {$export_script_path} > {$html_abs_path}");

  // Screenshot generated html wirh a headless browser.
  echo system("phantomjs/bin/phantomjs save_chart.js {$html_abs_path} {$image_abs_path}");

Now that we have the png image, all we need to do is programmatically set it as a desktop background. Luckily this is pretty easy on a mac. The solution might differ on your choice of operating system, but it's not impossible to do with any modern OS.

<?php
  echo system("/usr/bin/osascript -e 'tell application \"System Events\" to tell every desktop to set picture to \"{$image_abs_path}\"' ");

With all this set up, all that's left to do is set up a cron job that updates this every 15 minutes, so I can see almost in real time how I've been doing in the last 45 days.

*/30 * * * * cd /scripts/waka-wallpaper && /usr/bin/php generate.php > /dev/null 2>&1

Here's how my desktop looks like now.