File size: 2,894 Bytes
8135b6a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
import json
class HTML:
@staticmethod
def header(title = '', reldir = ''):
return f"""<!DOCTYPE html>
<html>
<head>
<title>Kumiko Reader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="{reldir}jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="{reldir}reader.js"></script>
<link rel="stylesheet" media="all" href="{reldir}style.css" />
<style type="text/css">
h2, h3 {{ text-align: center; margin-top: 3em; }}
.sidebyside {{ display: flex; justify-content: space-around; }}
.sidebyside > div {{ width: 45%; }}
.version, .step-info {{ text-align: center; }}
.kumiko-reader.halfwidth {{ max-width: 45%; max-height: 90vh; }}
.kumiko-reader.fullpage {{ width: 100%; height: 100%; }}
</style>
</head>
<body>
<h1>{title}</h1>
"""
@staticmethod
def nbdiffs(files_diff):
return f"<p>{len(files_diff)} differences found in files</p>"
pageId = 0
@staticmethod
def side_by_side_panels(title, step_info, jsons, v1, v2, images_dir, known_panels, diff_numbering_panels):
html = f"""
<h2>{title}</h2>
<p class="step-info">{step_info}</p>
<div class="sidebyside">
<div class="version">{v1} <span class="processing_time">− processing time {jsons[0][0]['processing_time'] if 'processing_time' in jsons[0][0] else "??"}s</span></div>
<div class="version">{v2} <span class="processing_time">- processing time {jsons[1][0]['processing_time']}s</span></div>
</div>
<div class="sidebyside">
"""
oneside = """
<div id="page{id}" class="kumiko-reader halfwidth debug"></div>
<script type="text/javascript">
var reader = new Reader({{
container: $('#page{id}'),
comicsJson: {json},
images_dir: {images_dir},
known_panels: {known_panels},
diff_numbering_panels: {diff_numbering_panels},
}});
reader.start();
</script>
"""
i = -1
for js in jsons:
i += 1
html += oneside.format(
id = HTML.pageId,
json = json.dumps(js),
images_dir = json.dumps(images_dir),
known_panels = known_panels[i],
diff_numbering_panels = diff_numbering_panels
)
HTML.pageId += 1
html += '</div>'
return html
@staticmethod
def imgbox(images):
html = "<h3>Debugging images</h3>\n<div class='imgbox'>\n"
for img in images:
html += f"\t<div><p>{img['label']}</p><img src='{img['filename']}' /></div>\n"
return html + "</div>\n\n"
@staticmethod
def reader(js, images_dir):
return f"""
<div id="reader" class="kumiko-reader fullpage"></div>
<script type="text/javascript">
var reader = new Reader({{
container: $('#reader'),
comicsJson: {js},
images_dir: {json.dumps(images_dir)},
controls: true
}});
reader.start();
</script>
"""
footer = """
</body>
</html>
"""
|