viewer.html

---
layout: default
title: Viewer
name: viewer.html
nidera: https://github.com/nihongodera/kanjivganimate
description: A JavaScript viewer for the KanjiVG kanji vector graphics
---
<script>
{% include_relative viewer-top.js %}
</script>

<div class="page-header">
  <h1>KanjiVG Viewer</h1>
</div>

<form id="kanjiViewerParams" action="#" class="form-horizontal">
  <fieldset>
    <div id="viewer-controls">
      <div id="kanji-etc">
	<div>
          <label id="kanji-label" for="kanji">Kanji:</label>
          <input class="viewer-input" type="text" value="" id="kanji" placeholder="線" onchange="changeBox();">
        </div>
      </div>
      <div id="kanji-options">
	<p>
          <input type="checkbox" name="displayOrders" id="displayOrders" checked="on" onchange="changeNoShowSO(); changeBox();">
          <label for="displayOrders">Display stroke order</label>
	</p>
	<p>
          <input type="checkbox" name="radicals" id="radicals" onchange="changeRadicals(); changeBox();">
          <label for="radicals">Show the radicals</label>
	</p>
	<p>
          <input type="checkbox" name="colorGroups" id="colorGroups" onchange="changeColorGroups(); changeBox();">
          <label for="colorGroups">Show the component groups</label>
	</p>
      </div>
      <div id="kanji-actions">
        <input type="submit" value="Draw">&nbsp;
	<button id="animate" class="kanjivg-button" data-kanjivg-target="#kanji-svg">Animate</button>
	<button id="random" class="kanjivg-button" onclick="gotoRandom();">Random</button>
      </div>
    </div>
  </fieldset>
</form>
<div id="kanji-visuals">
  <div id="kanji-image"></div>
  <div id="sub-images">
    <div id="radical-images">
    </div>
    <div id="group-images">
    </div>
  </div>
</div>
<!-- Messages for the user, for example if the kanji
     is not found. -->
<div id="user-message">
</div>