ag_galizia
/
pyview


			
			
				
					
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
							<!DOCTYPE html>
<html>
<!-- all measurements in vw, i.e., fraction of the width of the display on which the HTML will be opened-->
{% set tapestry_width = 100 %}
{% set fontsize2image_container_width = 1 / 30 %}
{% set image_container_width = (98 / ncols) / (1 + 1.2 * fontsize2image_container_width) %}
{% set fontsize = [image_container_width * fontsize2image_container_width, 0.75]|max %}
{% set image_width = image_container_width / (1 - colorbar2width) %}
{% set image_height = image_width / aspect_ratio %}
<!-- 2vw for margin, border and padding -->
{% set tapestry_height = (image_height + 1.4 * fontsize) * nrows + 2 %}

<style>
    * {
        margin:0;
        padding: 0;
        font-size: {{ fontsize }}vw;
    }
    .thumbnail {grid-area: thumbnail;}
    .textbelow {grid-area: textbelow;}
    .textrighttop {grid-area: textrighttop;}
    .textrightbottom {grid-area: textrightbottom;}

    .textrighttop > p, .textrightbottom > p, .textbelow > p{
        font-weight: bold;
    }

    .textrighttop > p {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
    }

    .textrightbottom > p {
        position: relative;
        top: {{ (image_height / 2) - 2 * fontsize }}vw;
        /* Safari */
        -webkit-transform: rotate(-90deg);

        /* Firefox */
        -moz-transform: rotate(-90deg);

        /* IE */
        -ms-transform: rotate(-90deg);

        /* Opera */
        -o-transform: rotate(-90deg);

        white-space: nowrap;

    }
    div > img {
        width: {{ image_width }}vw;
        height:{{ image_height }}vw;
        margin-left: auto;
        margin-right: auto;
        display: block;
        overflow: hidden;}
    .grid-container{
        display: grid;
        grid-template-columns: {{ image_container_width }}vw {{ 1.2 * fontsize }}vw;
        grid-template-rows: {{ image_height / 2 }}vw {{ image_height / 2 }}vw {{ 1.4 * fontsize }}vw;
        grid-template-areas:
                'thumbnail textrighttop'
                'thumbnail textrightbottom'
                'textbelow textbelow';
    }
    .grid-container > div, .tapestry-container{
        background-color: {{ bg_color }};
    }

    .grid-container > div > p{
        color: {{ fg_color }};
    }

    .tapestry-container{
        width: {{ tapestry_width }}vw;
        height: {{ tapestry_height}}vw;
        margin: 0.5vw;
        padding: 0.5vw;
        border: 0.5vw;
    }

    table{
        overflow: hidden;
    }

    /* Tooltip container */
    .tooltip {
      position: relative;
      display: inline-block;
      border: {{ 0.1 * fontsize }}vw dotted {{ fg_color }};
      padding: {{ 0.1 * fontsize}}vw;
    }

    .tooltip > p{
        font-weight: bold;
    }

    /* Tooltip text */
    .tooltip .tooltiptext {
        visibility: hidden;
        width: {{ image_container_width }}vw;
        background-color: {{ bg_color }};
        color: {{ fg_color }};
        text-align: center;
        padding: {{ image_container_width * 0.05 }}vw 0;

        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 2;
        bottom: 100%;
        left: 0%;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
      visibility: visible;
    }

</style>
<body>
<div class="tapestry-container">
    <table>
        {% for patches_row in patches_collection:%}
            <tr>
                {% for patch in patches_row: %}
                    <td>
                        <div class="grid-container">
                            <div class="thumbnail"><img src="{{ patch.image_relative_path }}"
                                                        alt="{{ patch.image_relative_path }}"></div>
                            <div class="textrightbottom"><p>{{ patch.text_right_bottom }}</p></div>
                            <div class="textrighttop"><p>{{ patch.text_right_top }}</p></div>
                            <div class="textbelow">
                                <div class="tooltip">
                                    <p>{{ patch.text_below }}</p>
                                    <span class="tooltiptext">
                                        <b>Animal:</b> {{ patch.animal }}<br><br>
                                        <b>Flags changed from previous row:</b><br>{{ patch.flag_changes }}
                                    </span>
                                </div>
                                {% if patch.movie_file is not none: %}
                                <a href="{{patch.movie_file}}">(movie)</a>
                                {% endif %}
                            </div>
                        </div>
                    </td>
                {% endfor %}
            </tr>
        {% endfor %}
    </table>
</div>
{% if all_data_limits is not none: %}
<p>
    Minimum of lower data limit over all overviews: <b>{{ all_data_limits[0] }}</b><br><br>
    Maximum of upper data limit over all overviews: <b>{{ all_data_limits[1] }}</b>
</p>
{% endif %}
</body>
</html>