<commit_before>{% extends "base.html" %}

{% block title %}Sketching with Hardware Conference{% endblock %}
{% block extra_js %}
    {% load socketio_tags %}
    {% socketio %}
    <script src="{{STATIC_URL}}js/touchyfeely.js"></script>

    <script type="text/javascript">
        var room = "{{room}}";
        
        var red = Math.floor(Math.random()*256), green = Math.floor(Math.random()*256), blue = Math.floor(Math.random()*256);
        var ping_limit = 20;
        var row_breaks = [9]; // where to break the rows

	    $(function() {
	        socket = new io.Socket();
	        socket.connect();
	        socket.on('connect', function() {
		        socket.subscribe(room);
		        
		        //socket.send({room: room, action:'join', data:'Hello world'});
	        });

            socket.on('message', function(data) {
                //console.log(data);
                switch (data.a) {
                    case "ack":
                        console.log("Ack");
                        break;
                }
            });
	               
	        // set up the sliders
	        var change_callback = (function(event, ui) {
	            red = $( "#redslider" ).slider("value");
	            green = $( "#greenslider" ).slider("value");
	            blue = $( "#blueslider" ).slider("value");
	            var rgb = "rgb(" + red + ", " + green + ", " + blue + ")";
	            // write out the vals to the screen.
	            $("#rval").text(red);
	            $("#gval").text(green);
	            $("#bval").text(blue);	            
	            $("#swatch").css("background-color", rgb);
	        });
	        
	        var slider_opts = {range: "min", min: 0, max:255, value: 0, change: change_callback};
	        slider_opts.value = red;
	        $( "#redslider" ).slider(slider_opts);
	        slider_opts.value = green;
	        $( "#greenslider" ).slider(slider_opts);
	        slider_opts.value = blue;
	        $( "#blueslider" ).slider(slider_opts);
            // set the sliders
	        $( "#redslider" ).slider("value", red);
	        $( "#greenslider" ).slider("value", green);
	        $( "#blueslider" ).slider("value", blue);
	            
	        
	        // set up the ping handlers.
	        var ping_handler = (function(evt) {
	            evt.preventDefault();
	            $(this).removeClass("fade");
	            $(this).css("background-color", "rgb(" + red + "," + green + "," + blue + ")");
	            msg = {a:"clr", r: red, b: blue, g: green, p: $(this).data("pos") }
	            socket.send(msg);
	        });
	        
	        var ping_release = (function(evt) {
                $(this).addClass("fade");
                $(this).css("background-color", "#FFF");
            });
            
            var toggle_open = (function() {
	            // fire off the toggle event
	            $("#colourpanel").show("slide");
	        });
	        
	        var toggle_close = (function() {
	            // fire off the toggle event
	            $("#colourpanel").hide("slide");
	        });
	        
	        // write the divs into the page for the ping items
	        for (var i=0; i< ping_limit; i++) {
	            $("#pings").append("<div class=\"ping\" data-pos=\"" + i + "\"> </div>");
	            if (row_breaks.indexOf(i) >= 0) $("#pings").append("<br/>");
	        }
	        

	        // determine if we're a touch device or not.
	        if (touchyfeely.touch) {
    	        $("#tapclick").text("touch");
    	        $("#toggleopen a").bind("touchstart", toggle_open);
                $("#toggleclose a").bind("touchstart", toggle_close);
    	        $(".ping").bind("touchstart", ping_handler);
    	        $(".ping").bind("touchend", ping_release);
            } else {
    	        $("#tapclick").text("click");
	            $("#toggleopen a").click(toggle_open);
                $("#toggleclose a").click(toggle_close);
    	        $(".ping").mousedown(ping_handler);
    	        $(".ping").mouseup(ping_release);
            }

	        
        });

    </script>
{% endblock %}

{% block extra_css %}
<style>

</style>
<commit_msg>code change to make the array line up with the wiring that bit better<commit_after>{% extends "base.html" %}

{% block title %}Sketching with Hardware Conference{% endblock %}
{% block extra_js %}
    {% load socketio_tags %}
    {% socketio %}
    <script src="{{STATIC_URL}}js/touchyfeely.js"></script>

    <script type="text/javascript">
        var room = "{{room}}";
        
        var red = Math.floor(Math.random()*256), green = Math.floor(Math.random()*256), blue = Math.floor(Math.random()*256);
        var ping_limit = 20;
        // used to map the pings to the wiring positions.
        var ping_ids = [0,1,2,3,4,5,6,7,8,9,19,18,17,16,15,14,13,12,11,10]; 
        var row_breaks = [9]; // where to break the rows

	    $(function() {
	        socket = new io.Socket();
	        socket.connect();
	        socket.on('connect', function() {
		        socket.subscribe(room);
		        
		        //socket.send({room: room, action:'join', data:'Hello world'});
	        });

            socket.on('message', function(data) {
                //console.log(data);
                switch (data.a) {
                    case "ack":
                        console.log("Ack");
                        break;
                }
            });
	               
	        // set up the sliders
	        var change_callback = (function(event, ui) {
	            red = $( "#redslider" ).slider("value");
	            green = $( "#greenslider" ).slider("value");
	            blue = $( "#blueslider" ).slider("value");
	            var rgb = "rgb(" + red + ", " + green + ", " + blue + ")";
	            // write out the vals to the screen.
	            $("#rval").text(red);
	            $("#gval").text(green);
	            $("#bval").text(blue);	            
	            $("#swatch").css("background-color", rgb);
	        });
	        
	        var slider_opts = {range: "min", min: 0, max:255, value: 0, change: change_callback};
	        slider_opts.value = red;
	        $( "#redslider" ).slider(slider_opts);
	        slider_opts.value = green;
	        $( "#greenslider" ).slider(slider_opts);
	        slider_opts.value = blue;
	        $( "#blueslider" ).slider(slider_opts);
            // set the sliders
	        $( "#redslider" ).slider("value", red);
	        $( "#greenslider" ).slider("value", green);
	        $( "#blueslider" ).slider("value", blue);
	            
	        
	        // set up the ping handlers.
	        var ping_handler = (function(evt) {
	            evt.preventDefault();
	            $(this).removeClass("fade");
	            $(this).css("background-color", "rgb(" + red + "," + green + "," + blue + ")");
	            msg = {a:"clr", r: red, b: blue, g: green, p: $(this).data("pos") }
	            socket.send(msg);
	        });
	        
	        var ping_release = (function(evt) {
                $(this).addClass("fade");
                $(this).css("background-color", "#FFF");
            });
            
            var toggle_open = (function() {
	            // fire off the toggle event
	            $("#colourpanel").show("slide");
	        });
	        
	        var toggle_close = (function() {
	            // fire off the toggle event
	            $("#colourpanel").hide("slide");
	        });
	        
	        // write the divs into the page for the ping items
	        for (var i=0; i< ping_limit; i++) {
	            $("#pings").append("<div class=\"ping\" data-pos=\"" + ping_ids[i] + "\"> </div>");
	            if (row_breaks.indexOf(i) >= 0) $("#pings").append("<br/>");
	        }
	        

	        // determine if we're a touch device or not.
	        if (touchyfeely.touch) {
    	        $("#tapclick").text("touch");
    	        $("#toggleopen a").bind("touchstart", toggle_open);
                $("#toggleclose a").bind("touchstart", toggle_close);
    	        $(".ping").bind("touchstart", ping_handler);
    	        $(".ping").bind("touchend", ping_release);
            } else {
    	        $("#tapclick").text("click");
	            $("#toggleopen a").click(toggle_open);
                $("#toggleclose a").click(toggle_close);
    	        $(".ping").mousedown(ping_handler);
    	        $(".ping").mouseup(ping_release);
            }

	        
        });

    </script>
{% endblock %}

{% block extra_css %}
<style>

</style>

{'fraction_non_alphanumeric': 0.1807842672669115, 'fraction_numerical': 0.008055917545314536, 'mean_word_length': 1.6430807764558548, 'pattern_counts': {'":': 2, '<': 23, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4308168', 'n_tokens_mistral': 2634, 'n_tokens_neox': 2382, 'n_words': 509}