Download raw (1.6 KB)
<html> <head> <meta charset="UTF-8"> <title>-</title> <script src="jquery.min.js"></script> <style type="text/css" media="screen"> body { background-color: lightgrey; } figure { background-color: white; width: 100pt; /*height: 100pt;*/ display: inline-block; /*outline: 3pt solid black;*/ } figure img { width: 100pt; } </style> </head> <body> <h5> <a href="/p/meta">metapost pad</a> </h5> <div id="chars"></div> <script> $("window").ready(function () { var ranges = [['A', 'Z'], ['0', '9'], ['a', 'z']] for (var r = 0; r < ranges.length; r++) { for (i = ranges[r][0].charCodeAt(0); i <= ranges[r][1].charCodeAt(0); i++) { $("#chars").append("<figure data-charcode='" + i + "'><img src='svg/" + i + ".svg' data-charcode='" + i + "' alt=''><figcaption>" + String.fromCharCode(i) + "</figcaption></figure>"); } } }); $("body").on("click", "figure", function () { var result = window.confirm('Do you want to plot that glyph ?'); if (result) { $.get('/api/plot/', { charcode: $(this).attr('data-charcode') }); } }); setInterval(function () { stamp = (new Date).getTime(); $("img").each(function () { var src = 'svg/' + $(this).attr('data-charcode') + '.svg?' + stamp $(this).attr('src', src); }); }, 7000); </script> </body> </html>