weeds_pickup

01_weeds_templates_show.html

{% extends "layout.html" %}
{% block body %}
  < svg width="283" height="135">
    {% for record in records %}
      {% if (loop.index-1)%7 == 0 %}
        <g transform="translate({{ (loop.index-1)/7*17 + 18 }}, 18)">
          <rect x="0" y="{{ (loop.index-1)%7*17 }}" width="15" height="15" data-original-title="{{ loop.index }}" style="fill:rgb({{ record.r}}, {{ record.g }}, {{ record.b }});"></rect>
      {% elif (loop.index-1)%7 < 6 %}
          <rect x="0" y="{{ (loop.index-1)%7*17 }}" width="15" height="15" data-original-title="{{ loop.index }}" style="fill:rgb({{ record.r}}, {{ record.g }}, {{ record.b }});"></rect>
      {% else %}
          <rect x="0" y="{{ (loop.index-1)%7*17 }}" width="15" height="15" data-original-title="{{ loop.index }}" style="fill:rgb({{ record.r}}, {{ record.g }}, {{ record.b }});"></rect>
        </g>
      {% endif %}
    {% endfor %}
  </svg>
{% endblock %}

02_show.html#svg

<svg width="283" height="135">
  <g transform="translate(18.0, 18)">
    <rect x="0" y="0" width="15" height="15" data-original-title="1" style="fill:rgb(220, 220, 220);"></rect>
      <rect x="0" y="17" width="15" height="15" data-original-title="2" style="fill:rgb(0, 229, 0);"></rect>
    <rect x="0" y="34" width="15" height="15" data-original-title="3" style="fill:rgb(0, 250, 0);"></rect>
    <rect x="0" y="51" width="15" height="15" data-original-title="4" style="fill:rgb(0, 181, 0);"></rect>
    <rect x="0" y="68" width="15" height="15" data-original-title="5" style="fill:rgb(0, 149, 0);"></rect>
    <rect x="0" y="85" width="15" height="15" data-original-title="6" style="fill:rgb(0, 197, 0);"></rect>
    <rect x="0" y="102" width="15" height="15" data-original-title="7" style="fill:rgb(0, 240, 0);"></rect>
  </g>
  <g transform="translate(35.0, 18)">
    <rect x="0" y="0" width="15" height="15" data-original-title="8" style="fill:rgb(0, 133, 0);"></rect>
    <rect x="0" y="17" width="15" height="15" data-original-title="9" style="fill:rgb(0, 154, 0);"></rect>
    <rect x="0" y="34" width="15" height="15" data-original-title="10" style="fill:rgb(0, 202, 0);"></rect>
    <rect x="0" y="51" width="15" height="15" data-original-title="11" style="fill:rgb(0, 197, 0);"></rect>
    <rect x="0" y="68" width="15" height="15" data-original-title="12" style="fill:rgb(0, 213, 0);"></rect>
    <rect x="0" y="85" width="15" height="15" data-original-title="13" style="fill:rgb(0, 213, 0);"></rect>
    <rect x="0" y="102" width="15" height="15" data-original-title="14" style="fill:rgb(0, 133, 0);"></rect>
  </g>

  <!-- 以下略 -->

</svg>