coffindragger/game.css

## game.css

        body {
            background: beige;
        }

        #display_container {
            float: left;
        }
        #turn_container {
            float: left;
            width: 250px;
            height: 700px;
            overflow-y: scroll;
            overflow-x: hidden;
            margin-right: 30px;

        }

        #frame_title {
            font-size: 19px;
            text-align: center;
            width: 350px;
            margin: auto;
        }
        #display img {
            width: 800px;
            border: 1px solid burlywood;
        }


        .turn {
            cursor: pointer;
        }

        table#turns {
            border-spacing: 0;
        }
        table#turns td {
            padding: 2px;
        }

        table#turns .turn-number {
            width: 30px;
            text-align: right;
        }
        table#turns .quadrant {
            width: 50px;
        }
        table#turns .date {
            width: 80px;
        }
        table#turns .time {
            width: 60px;
        }
        tr.current {
            background: gray;
            color: white;
            font-weight: bold;
        }

        a:visited, a:link, a:hover {
            color: blue;
            text-decoration: none;
        }

## game.html
<html>
    <head>
        <link rel="stylesheet" href="game.css"/>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script>
            window.GAMENAME = window.location.hash.replace('#','') || 'firsties';
            TURNNAMES = ['Gold','Black','White','Silver']
            notclicked = true

            function grab_turns()
            {
                $.get(GAMENAME+'/index.json', function(data) {
                    turns = eval(data)
                    var $turns = $('#turns')
                    var old_count = $turns.find('tr').length
                    if (old_count == turns.length) {
                        return; //nothing changed
                    }
                    $turns.empty()
                    for (var i=0; i < turns.length; i++) {
                        var turn = turns[i]
                        var img_path = GAMENAME+'/'+turn;

                        parts = turn.split('_')

                        var dt = parts[2].split('T')

                        var $tr = $('<tr class="turn" href="'+img_path+'"/>')
                        $tr.append('<td class="turn-number">'+Number(parts[0])+'.</td>')
                        $tr.append('<td class="quadrant">'+TURNNAMES[Number(parts[1])]+'</td>')
                        $tr.append('<td class="date">'+dt[0]+'</td>');
                        $tr.append('<td class="time">'+dt[1].replace('.jpg','')+'</td>');
                        $turns.prepend($tr)
                    }
                    var new_count = $turns.find('tr').length
                    if (new_count != old_count) {
                        $turns.find('.turn:first').click()
                    }
                })

                setTimeout(grab_turns, 10*1000);
            }
            function move_up_one() {
                $('#turns .current').prev().click();
            }
            function move_down_one() {
                $('#turns .current').next().click();
            }


            $(function() {

                $('.turn').live('click',function() {
                    var $this = $(this);
                    var $img = $this.attr('href')
                    var $display = $('#display')
                    $display.html('<a target="blowup" href="'+$img+'"><img src="'+$img+'"/></a>')

                    $('#turns .turn').removeClass('current')
                    $this.addClass('current')

                    $('#frame_title tr').html($this.html())

                    return false;
                })

                grab_turns();

                $(document).keypress(function(event) {
                    if (event.which == 106) { // j
                        move_down_one();
                    }
                    else if (event.which == 107) { // k
                        move_up_one();
                    }
                });
            })


        </script>
    </head>
    <body>
    <div id="turn_container">
        <table id="turns"> </table>
    </div>
    <div id="display_container">
        <table id="frame_title"><tr></tr></table>
        <div id="display"> </div>
    </div>
    </body>
</html>

## process_frame.py
#!/usr/bin/env python

import math
import json
import sys
import os
import datetime
import shutil
from itertools import izip
from PIL import Image, ImageOps


def get_quadrant(image_path):
    _PURPLE = (110,38,76)
    def distance3(a,b):
        return math.sqrt(math.pow(a[0]-b[0], 2) + math.pow(a[1]-b[1], 2) + math.pow(a[2]-b[2], 2))
    def count_purple(data):
        return sum(1 if distance3(pixel,_PURPLE) < 30 else 0 for pixel in data)

    orig = Image.open(image_path)
    orig.thumbnail((300,240))

    gray = ImageOps.grayscale(orig)
    gray = gray.point(lambda p: p > 127 and 255) # threshold=127
    white_count = sum(1 if pixel == 255 else 0 for pixel in gray.getdata()) # count white pixels
    if white_count < 26000: # obscured frame?
        return -2

    w, h = orig.size
    top_left = orig.crop((0,0,w/2,h/2))
    top_right = orig.crop((w/2,0,w,h/2))
    bottom_left = orig.crop((0,h/2,w/2,h))
    bottom_right = orig.crop((w/2,h/2,w,h))

    quadrant = -1
    highest = 0
    i = 0;
    for quad in (top_left,top_right,bottom_left,bottom_right):
        count = count_purple(quad.getdata())
        if count > highest:
            highest = count
            quadrant = i
        i += 1

    return quadrant


if __name__ == '__main__':
    if len(sys.argv) < 3:
        print "Usage: %s <frame.jpg> <out_directory>" % (sys.argv[0],)
        sys.exit(-1)

    frame = sys.argv[1]
    out_dir = sys.argv[2]

    if not os.path.exists(frame):
        print "'%s' does not exist!" % (frame,)
        sys.exit(-1)

    if not os.path.exists(out_dir):
        os.makedirs(out_dir)
    elif not os.path.isdir(out_dir):
        print "'%s' not a directory!" % (out_dir,)
        sys.exit(-1)


    frame_stat = os.stat(frame)
    frame_quadrant = get_quadrant(frame)
    if frame_quadrant < 0:
        print "bad quadrant"
        sys.exit(-1)
    previous_turns = filter(lambda f: f.endswith('.jpg'), os.listdir(out_dir))
    previous_turns.sort()


    if len(previous_turns) > 0:
        last_turn,last_quadrant = (int(i) for i in previous_turns[-1].split('_')[:2])
        if last_quadrant == frame_quadrant:
            print "dup turn."
            sys.exit(1)
    else:
        last_turn,last_quadrant,ts = (0,-1,0)

    cur_turn = last_turn+1
    ts = datetime.datetime.fromtimestamp(frame_stat.st_mtime)

    cur_frame = '%03d_%d_%s.jpg' % (cur_turn, frame_quadrant, ts.strftime('%FT%H:%M'))
    previous_turns.append(cur_frame)
    shutil.copyfile(frame, os.path.join(out_dir, cur_frame))

    index_path = os.path.join(out_dir, 'index.json')
    index_fh = open(index_path, 'w+')
    index_fh.write(json.dumps(previous_turns) + "\n")
    index_fh.close()


## run_capture.sh
#!/usr/bin/env bash

nohup uvccapture -x1280 -y1024 -m -o/tmp/chess.jpg -v -c/home/***/sync_chess.sh -t2 &

## sync_chess.sh
#!/usr/bin/env bash

GAME=$1

if [ "$GAME" == "" ]
then
    echo "Usage: $0 <game_name>"
    exit 1
fi

function rsync_files() {
    rsync -vaz --rsh='ssh -p2525' /home/***/chess/$GAME chess@*****.com:www/
}

/home/***/process_frame.py /tmp/chess.jpg /home/***/chess/$GAME && rsync_files

	body {
	background: beige;
	}

	#display_container {
	float: left;
	}
	#turn_container {
	float: left;
	width: 250px;
	height: 700px;
	overflow-y: scroll;
	overflow-x: hidden;
	margin-right: 30px;

	}

	#frame_title {
	font-size: 19px;
	text-align: center;
	width: 350px;
	margin: auto;
	}
	#display img {
	width: 800px;
	border: 1px solid burlywood;
	}


	.turn {
	cursor: pointer;
	}

	table#turns {
	border-spacing: 0;
	}
	table#turns td {
	padding: 2px;
	}

	table#turns .turn-number {
	width: 30px;
	text-align: right;
	}
	table#turns .quadrant {
	width: 50px;
	}
	table#turns .date {
	width: 80px;
	}
	table#turns .time {
	width: 60px;
	}
	tr.current {
	background: gray;
	color: white;
	font-weight: bold;
	}

	a:visited, a:link, a:hover {
	color: blue;
	text-decoration: none;
	}
	<html>
	<head>
	<link rel="stylesheet" href="game.css"/>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script>
	window.GAMENAME = window.location.hash.replace('#','') \|\| 'firsties';
	TURNNAMES = ['Gold','Black','White','Silver']
	notclicked = true

	function grab_turns()
	{
	$.get(GAMENAME+'/index.json', function(data) {
	turns = eval(data)
	var $turns = $('#turns')
	var old_count = $turns.find('tr').length
	if (old_count == turns.length) {
	return; //nothing changed
	}
	$turns.empty()
	for (var i=0; i < turns.length; i++) {
	var turn = turns[i]
	var img_path = GAMENAME+'/'+turn;

	parts = turn.split('_')

	var dt = parts[2].split('T')

	var $tr = $('<tr class="turn" href="'+img_path+'"/>')
	$tr.append('<td class="turn-number">'+Number(parts[0])+'.</td>')
	$tr.append('<td class="quadrant">'+TURNNAMES[Number(parts[1])]+'</td>')
	$tr.append('<td class="date">'+dt[0]+'</td>');
	$tr.append('<td class="time">'+dt[1].replace('.jpg','')+'</td>');
	$turns.prepend($tr)
	}
	var new_count = $turns.find('tr').length
	if (new_count != old_count) {
	$turns.find('.turn:first').click()
	}
	})

	setTimeout(grab_turns, 10*1000);
	}
	function move_up_one() {
	$('#turns .current').prev().click();
	}
	function move_down_one() {
	$('#turns .current').next().click();
	}


	$(function() {

	$('.turn').live('click',function() {
	var $this = $(this);
	var $img = $this.attr('href')
	var $display = $('#display')
	$display.html('<a target="blowup" href="'+$img+'"><img src="'+$img+'"/></a>')

	$('#turns .turn').removeClass('current')
	$this.addClass('current')

	$('#frame_title tr').html($this.html())

	return false;
	})

	grab_turns();

	$(document).keypress(function(event) {
	if (event.which == 106) { // j
	move_down_one();
	}
	else if (event.which == 107) { // k
	move_up_one();
	}
	});
	})




	</script>
	</head>
	<body>
	<div id="turn_container">
	<table id="turns"> </table>
	</div>
	<div id="display_container">
	<table id="frame_title"><tr></tr></table>
	<div id="display"> </div>
	</div>
	</body>
	</html>
	#!/usr/bin/env python

	import math
	import json
	import sys
	import os
	import datetime
	import shutil
	from itertools import izip
	from PIL import Image, ImageOps


	def get_quadrant(image_path):
	_PURPLE = (110,38,76)
	def distance3(a,b):
	return math.sqrt(math.pow(a[0]-b[0], 2) + math.pow(a[1]-b[1], 2) + math.pow(a[2]-b[2], 2))
	def count_purple(data):
	return sum(1 if distance3(pixel,_PURPLE) < 30 else 0 for pixel in data)

	orig = Image.open(image_path)
	orig.thumbnail((300,240))

	gray = ImageOps.grayscale(orig)
	gray = gray.point(lambda p: p > 127 and 255) # threshold=127
	white_count = sum(1 if pixel == 255 else 0 for pixel in gray.getdata()) # count white pixels
	if white_count < 26000: # obscured frame?
	return -2

	w, h = orig.size
	top_left = orig.crop((0,0,w/2,h/2))
	top_right = orig.crop((w/2,0,w,h/2))
	bottom_left = orig.crop((0,h/2,w/2,h))
	bottom_right = orig.crop((w/2,h/2,w,h))

	quadrant = -1
	highest = 0
	i = 0;
	for quad in (top_left,top_right,bottom_left,bottom_right):
	count = count_purple(quad.getdata())
	if count > highest:
	highest = count
	quadrant = i
	i += 1

	return quadrant



	if __name__ == '__main__':
	if len(sys.argv) < 3:
	print "Usage: %s <frame.jpg> <out_directory>" % (sys.argv[0],)
	sys.exit(-1)

	frame = sys.argv[1]
	out_dir = sys.argv[2]

	if not os.path.exists(frame):
	print "'%s' does not exist!" % (frame,)
	sys.exit(-1)

	if not os.path.exists(out_dir):
	os.makedirs(out_dir)
	elif not os.path.isdir(out_dir):
	print "'%s' not a directory!" % (out_dir,)
	sys.exit(-1)



	frame_stat = os.stat(frame)
	frame_quadrant = get_quadrant(frame)
	if frame_quadrant < 0:
	print "bad quadrant"
	sys.exit(-1)
	previous_turns = filter(lambda f: f.endswith('.jpg'), os.listdir(out_dir))
	previous_turns.sort()


	if len(previous_turns) > 0:
	last_turn,last_quadrant = (int(i) for i in previous_turns[-1].split('_')[:2])
	if last_quadrant == frame_quadrant:
	print "dup turn."
	sys.exit(1)
	else:
	last_turn,last_quadrant,ts = (0,-1,0)

	cur_turn = last_turn+1
	ts = datetime.datetime.fromtimestamp(frame_stat.st_mtime)

	cur_frame = '%03d_%d_%s.jpg' % (cur_turn, frame_quadrant, ts.strftime('%FT%H:%M'))
	previous_turns.append(cur_frame)
	shutil.copyfile(frame, os.path.join(out_dir, cur_frame))

	index_path = os.path.join(out_dir, 'index.json')
	index_fh = open(index_path, 'w+')
	index_fh.write(json.dumps(previous_turns) + "\n")
	index_fh.close()
	#!/usr/bin/env bash

	nohup uvccapture -x1280 -y1024 -m -o/tmp/chess.jpg -v -c/home/***/sync_chess.sh -t2 &
	#!/usr/bin/env bash

	GAME=$1

	if [ "$GAME" == "" ]
	then
	echo "Usage: $0 <game_name>"
	exit 1
	fi

	function rsync_files() {
	rsync -vaz --rsh='ssh -p2525' /home/*/chess/$GAME chess@***.com:www/
	}

	/home/*/process_frame.py /tmp/chess.jpg /home/*/chess/$GAME && rsync_files