bitmap.py

from IPython.html.widgets import DOMWidget
from IPython.utils.traitlets import Bool, Dict
from IPython.core.display import display, HTML, Javascript
from uuid import uuid4
from jinja2 import Template


class BitmapWidget(DOMWidget):

    def __init__(self, row, col, **kwargs):
        super(BitmapWidget, self).__init__(**kwargs)

        self._id = uuid4()

        self._row = row
        self._col = col

        self.data = [[False for x in range(row)] for y in range(col)]

    def __getitem__(self, key):
        x, y = key
        return self.data[y][x]

    def __setitem__(self, key, value):
        x, y = key
        self.data[y][x] = value

        js = '''
            $('#{id} .cell-{x}-{y}').addClass('on');
        '''.format(
            id=self._id,
            x=x,
            y=y
        )

        display(Javascript(js))

    def _ipython_display_(self, **kwargs):
        display(HTML('''
            <style>
                .bitmap .cell.on {
                    background-color: black;
                }
                .bitmap .cell {
                    background-color: white;
                }
            </style>
        '''))

        tpl = Template('''
            <table id="{{id}}" class="bitmap">
                {% for row in data %}
                {% set oloop = loop %}
                <tr>
                    {% for cell in row %}
                    <td class="cell cell-{{loop.index0}}-{{oloop.index0}} {% if cell %}on{% endif %}"></td>
                    {% endfor %}
                </tr>
                {% endfor %}
            <table>
        ''')

        html = tpl.render(
            id=self._id,
            data=self.data
        )
        display(HTML(html))