Making an icon for an mpld3 plugin

2014_05_19a_mpld3_plugin_icon_creation.ipynb

{
 "metadata": {
  "name": "",
  "signature": "sha256:6d7f3924bbf41d0333ac515583313ee2016c45e74a601c0e90fd47a22300ba85"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "!date"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "stream",
       "stream": "stdout",
       "text": [
        "Mon May 19 05:39:56 PDT 2014\r\n"
       ]
      }
     ],
     "prompt_number": 1
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "# Making a new icon for an mpld3 plugin\n",
      "\n",
      "This notebook details the steps for creating a new icon for an mpld3 plugin.  I need to make a little disk icon for \"saving\" figure callouts, and I hope other people will need to make new icons for all kinds of amazing things in the future.\n",
      "\n",
      "The steps are as follows:\n",
      "\n",
      "# 1. Create a 16x16 pixel .png file somehow\n",
      "\n",
      "I'm going to do this in a graphics program, but maybe you want to use a python script..."
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "# 2. Convert to Data URI\n",
      "\n",
      "Following [receipe here](http://en.wikipedia.org/w/index.php?title=Data_URI_scheme&oldid=600287406#Python).\n"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "base64_data = open('/homes/abie/disk.png', 'rb').read().encode('base64').replace('\\n', '')\n",
      "\n",
      "icon_str = '\"data:image/png;base64,{0}\"'.format(base64_data)\n",
      "print icon_str"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "stream",
       "stream": "stdout",
       "text": [
        "\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gUTDC0v7E0+LAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAa0lEQVQoz32QQRLAIAwCA///Mz3Y6cSG4EkjoAsk1VgAqspecVP3TTIA6MHTQ6sOHm7Zm4dWHcC4wc3hmVzT7xEbYf66dX/xnEOI7M9KYgie6qvW6ZH0grYOmQGOxzCEQn8C5k5mHAOrbeIBWLlaA3heUtcAAAAASUVORK5CYII=\"\n"
       ]
      }
     ],
     "prompt_number": 4
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "# 3. Put the Data URI in the javascript code for your plugin"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "print 'var my_icon = {0};'.format(img_js)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "stream",
       "stream": "stdout",
       "text": [
        "var my_icon = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gUTDC0v7E0+LAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAa0lEQVQoz32QQRLAIAwCA///Mz3Y6cSG4EkjoAsk1VgAqspecVP3TTIA6MHTQ6sOHm7Zm4dWHcC4wc3hmVzT7xEbYf66dX/xnEOI7M9KYgie6qvW6ZH0grYOmQGOxzCEQn8C5k5mHAOrbeIBWLlaA3heUtcAAAAASUVORK5CYII=\";\n"
       ]
      }
     ],
     "prompt_number": 8
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "    var SaveButton = mpld3.ButtonFactory({\n",
      "                buttonID: \"save\",\n",
      "                sticky: false,\n",
      "                onActivate: function(){save_callouts(this.props.callouts);}.bind(this),\n",
      "                icon: function(){return my_icon;},\n",
      "            });"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}