WP6
/
performing_patents_otherwise

{% extends "base.html" %}

{% block body %}
  <body id="random-img-page">
{% endblock %}

{% block content %}

<div class="action">
  <button onClick="refresh(this)" type="button" value="Refresh" title="new iteration">↻</button>
  <span class="info" style="display: none;">
    <span class="operations">↝ new display of random images from dataset;</span>
  </span>
  <button onclick="addRandomImage()" title="add one">+</button>
  <span class="info" style="display: none;">
    <span class="operations">↝ add a random image from dataset;</span>
  </span>
  <button onclick="removeRandomImage()"  title="remove one">-</button>
  <span class="info" style="display: none;">
    <span class="operations">↝ remove a random image from page;</span>
  </span>
  <button id="notes-operations" onclick="hideShowInfo()">?</button>
  <a href="{{ url_for('main.index') }}" class="arrow-back h1 text-left contrast" style="color: var(--color-lightyellow) !important;" title="back to index"> ⇽ </a>
</div>

<div class="row">
  <div class="col m-5">
    <p class="h1 text-center contrast">a Scattering of Images</p>
  </div>
</div>

<div id="image_container" class="container-fluid compare">

  {% for image in images %}

    <img class="img-fluid" src="data:image/jpg;base64,{{ image['image'] }}" alt="Drawing accompanying patent for {{ image['id'] }}" />

  {% endfor %}

</div>

<script type="text/javascript">
  var images = {{ additional_images|tojson }};

  x = 0;

  function addRandomImage(){
    var record_array = images[x];
    document.querySelector('#image_container').innerHTML += "<img class='img-fluid' src='data:image/jpg;base64," + record_array['image'] + "' alt='Drawing accompanying patent for " + record_array['id'] + "' />";
    x++;
    window.scrollTo(0, document.body.scrollHeight);
  }
</script>

{% endblock %}