laboiteproject/lenuage

{% extends "bitmap_create_form.html" %}

{% load static %}
{% load i18n %}
{% load bootstrap %}

{% block scripts %}
    <script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/font.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/gfx.js' %}"></script>
    {% include "_scripts.html" %}
    {{ form.media }}
    <script type="text/javascript">
        var enabled_label = $(".checkbox label span").text();
        $(".checkbox label span").html("");
        $(".checkbox").parent().prepend("<label>" + enabled_label + "</label>");
        $("#id_enabled").bootstrapSwitch();

        var matrixWidth = $("#id_width").val(),
            matrixHeight= $("#id_height").val();

        var bitmaps_ids= [{% if bitmaps %}{% for bitmap in bitmaps %}{{ bitmap.id }},{% endfor %}{% else %}1{% endif %}],
            bitmap_index = 0;
        for(var pixels = 0; pixels < matrixWidth*matrixHeight;    pixels++)
            $(".led ul").append("<li></li>");

        draw_bitmap(bitmaps_ids[bitmap_index]);

        $(".led ul li").click(
            function() {
                if($( this ).css( "background-color" ) == "rgb(68, 68, 68)")
                    $( this ).css("background",'#fff')
                else
                    $( this ).css("background",'#444')
                dump_bitmap(bitmaps_ids[bitmap_index]);
            }
        );

        $("#previous").click(
            function() {
                if (bitmap_index >=1) {
                    bitmap_index--;
                    reset();
                    draw_bitmap(bitmaps_ids[bitmap_index]);
                }
            }
        );

        $("#next").click(
            function() {
                if (bitmap_index < bitmaps_ids.length-1) {
                    bitmap_index++;
                    reset();
                    draw_bitmap(bitmaps_ids[bitmap_index]);
                }
            }
        );

        $("#add").click(
            function() {
                var last_bitmap_id = bitmaps_ids[bitmaps_ids.length-1];
                var new_bitmap_id = last_bitmap_id + 1;
                bitmaps_ids.push(new_bitmap_id);
                var bitmap_html = $("#id_bitmap" + last_bitmap_id).text();
                $("#bitmaps").append('<textarea style="display: none;" name="id_bitmap' + new_bitmap_id + '" id="id_bitmap' + new_bitmap_id + '" rows="16"  cols="32">' + bitmap_html + '</textarea>');
            }
        );

        $(".led").css("width", matrixWidth * (16 + 4) + 6);
        $(".led").css("height", matrixHeight * (16 + 4) + 7);

        function dump_bitmap(id) {
            var bitmap_html = "";
            for (var i = 0; i < matrixHeight*matrixWidth; i++) {
                if($(".led ul li").eq(i).css("background-color") !=  "rgb(68, 68, 68)")
                    bitmap_html += "1"
                else
                    bitmap_html += "0"
            }
            $("#id_bitmap" + id).text(bitmap_html);
        }

        function draw_bitmap(id) {
            var bitmap_text = $("#id_bitmap" + id).text();
            var i = 0;
            for (var j = 0; j < bitmap_text.length; j++) {
                switch (bitmap_text[j]) {
                    case '0':
                        i++
                        break;
                    case '1':
                        $(".led ul li").eq(i).css("background","#fff");
                        i++;
                }
            }
        }
    </script>
{% endblock %}