csfieldguide/templates/interactives/pixel-viewer.html
{% extends interactive_mode_template %}
{% load i18n %}
{% load static %}
{% block interactive_html %}
<div id="pixel-viewer-interactive" class="d-flex flex-column">
<div id="pixel-viewer-interactive-buttons" class="flex-shrink-0">
<button id="pixel-viewer-interactive-zoom-in"
class="btn btn-primary btn-lg flex-fill zoom-button"
data-toggle="tooltip"
data-placement="bottom"
data-trigger="manual"
title=""
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-zoom-in" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11M13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0"/>
<path d="M10.344 11.742q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1 6.5 6.5 0 0 1-1.398 1.4z"/>
<path fill-rule="evenodd" d="M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5"/>
</svg>
<!-- From Bootstrap Icons -->
{% trans "Zoom In" %}
</button>
<button id="pixel-viewer-interactive-zoom-out"
class="btn btn-primary btn-lg flex-fill zoom-button"
data-toggle="tooltip"
data-placement="bottom"
data-trigger="manual"
title=""
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-zoom-out" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11M13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0"/>
<path d="M10.344 11.742q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1 6.5 6.5 0 0 1-1.398 1.4z"/>
<path fill-rule="evenodd" d="M3 6.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5"/>
</svg>
<!-- From Bootstrap Icons -->
{% trans "Zoom Out" %}
</button>
<button id="pixel-viewer-interactive-menu-toggle" class="btn btn-primary btn-lg flex-fill">
{% trans "Toggle Menu" %}
</button>
</div>
<div id="pixel-viewer-interactive-container">
<img id="pixel-viewer-interactive-original-image" />
<div id="pixel-viewer-interactive-loader"></div>
<canvas id="pixel-viewer-interactive-content" crossorigin="anonymous"></canvas>
<div id="pixel-viewer-interactive-settings" class="menu-offscreen p-3">
<img id="pixelmania-logo" class="d-none" src="{% static 'interactives/pixel-viewer/img/pixelmania.png' %}">
<h3 id="pixel-viewer-interactive-title">
{% trans "Pixel Viewer Interactive" %}
</h3>
<p>{% blocktrans %}This interactive allows you to see the pixels of an image, and details about those pixels. <strong>Click Zoom
In</strong> to see details about individual pixels.{% endblocktrans %}</p>
<p id="pixel-viewer-extra-feature-description"></p>
<span id="pixel-viewer-image-manipulator"></span>
<p>{% trans "This interactive works best on a desktop browser, due to the heavy performance load." %}</p>
<hr>
<h5>{% trans "Options" %}</h5>
<label>
<input id="pixel-viewer-interactive-show-pixel-fill" type="checkbox" checked="checked">
{% trans "Show pixel background" %}
</label>
<div id="colour-code-radio" class="btn-group-vertical d-flex mb-1">
{% trans "Colour code: " %}
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="colourCode" id="rgb-colour-code" value="rgb" checked>
<label class="form-check-label" for="rgb-colour-code">{% trans "Decimal (separate RGB)" %}</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="colourCode" value="rgb-hex" id="rgb-hex-colour-code">
<label class="form-check-label" for="rgb-hex-colour-code">{% trans "Hexadecimal (separate RGB)" %}</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="colourCode" value="hex" id="hex-colour-code">
<label class="form-check-label" for="hex-colour-code">{% trans "Hexadecimal (web colour)" %}</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="colourCode" value="brightness" id="brightness-colour-code">
<label class="form-check-label" for="brightness-colour-code">{% trans "Brightness (average)" %}</label>
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="configSelector" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{% trans 'Reload with a different configuration' %}
</button>
<div class="dropdown-menu" aria-labelledby="configSelector">
<a class="dropdown-item" href="{% url 'interactives:interactive' 'pixel-viewer' %}">
{% trans 'Default' %}</a>
<a class="dropdown-item" href="{% url 'interactives:interactive' 'pixel-viewer' %}?mode=threshold&picturepicker">
{% trans 'Colour Threshold' %}</a>
<a class="dropdown-item" href="{% url 'interactives:interactive' 'pixel-viewer' %}?mode=thresholdgreyscale&picturepicker">
{% trans 'Greyscale Threshold' %}</a>
<a class="dropdown-item" href="{% url 'interactives:interactive' 'pixel-viewer' %}?mode=blur&picturepicker">
{% trans 'Blur' %}</a>
<a class="dropdown-item" href="{% url 'interactives:interactive' 'pixel-viewer' %}?mode=edgedetection&picturepicker">
{% trans 'Edge Detection' %}</a>
</div>
</div>
<hr>
<h5>{% trans "Upload your own image" %}</h5>
<p>{% blocktrans %}Either drag and drop an image onto this page, or click the button below to load your own image into
the interactive. The image will be resized for performance.{% endblocktrans %}</p>
<div class="custom-file w-auto d-block col-8 my-1">
<input type="file" id="pixel-viewer-upload" class="custom-file-input" name="image" onchange="loadImageDialog(this)" accept="image/*" />
<label class="custom-file-label" for="pixel-viewer-upload">{% trans "Choose file" %}</label>
</div>
<canvas id="pixel-viewer-interactive-source-canvas"></canvas>
<p>
<i><span id="pixel-viewer-interactive-resize-values"></span></i>
</p>
<div id="picture-picker"></div>
<p>{% blocktrans %}You can save an image of this interactive by right clicking on the zoomed image and clicking "Save
image as..." (Chrome/Firefox).{% endblocktrans %}</p>
<hr>
<p class="pixel-viewer-interactive-footer">
<a href="{% static 'interactives/pixel-viewer/license.md' %}" target="_blank">{% trans "Copyright information" %}</a>
</p>
</div>
</div>
</div>
{% endblock interactive_html %}
{% block interactive_css %}
<link rel="stylesheet" href="{% static 'interactives/pixel-viewer/css/pixel-viewer.css' %}">
{% endblock interactive_css %}
{% block interactive_js %}
<script type="text/javascript">
var base_static_path = "{{ STATIC_URL }}";
</script>
<script type="text/javascript" src="{% static 'interactives/pixel-viewer/js/third-party/Scroller.js' %}"></script>
<script type="text/javascript" src="{% static 'interactives/pixel-viewer/js/third-party/Animate.js' %}"></script>
<script type="text/javascript" src="{% static 'interactives/pixel-viewer/js/third-party/Tiling.js' %}"></script>
<script type="text/javascript" src="{% static 'interactives/pixel-viewer/js/pixel-viewer.js' %}"></script>
{% endblock interactive_js %}