`
-
-Because doing this by hand would be very tedious, Melpomene comes with an helper script that allows generating that HTML for you from SVGs.
-
## Limitations
The following limitations are known and will be improved upon :
@@ -64,25 +53,42 @@ To create the zooms for a comic page, what you need to do is :
3. Once you are done, save the SGV
-## Generating the HTML files
+## Generating the configuration files
Once the SVG for your pages are done, put them in one folder. Then, you can run the zoom generator.
You need to open a terminal and then run :
-+ `python zooms_generator.py 
`
++ `python zooms_generator.py
+
@@ -29,6 +32,7 @@
+
+
+
+
+
@@ -29,6 +32,7 @@
@@ -38,10 +42,12 @@
diff --git a/demos/pepper_and_carrot_e35_highres_htmldata.html b/demos/pepper_and_carrot_e35_highres_htmldata.html
deleted file mode 100644
index b83695d..0000000
--- a/demos/pepper_and_carrot_e35_highres_htmldata.html
+++ /dev/null
@@ -1,69 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/demos/pepper_and_carrot_e35_lowres.html b/demos/pepper_and_carrot_e35_lowres.html
index fdd239b..f5609a9 100644
--- a/demos/pepper_and_carrot_e35_lowres.html
+++ b/demos/pepper_and_carrot_e35_lowres.html
@@ -18,7 +18,7 @@
-
-
-
-
- 
- 
- 
- 
- 
- 
- 
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/melpomene.css b/melpomene.css
index cfdbd50..cb7fbb5 100644
--- a/melpomene.css
+++ b/melpomene.css
@@ -1,5 +1,4 @@
-/* Melpomene webcomic reader CSS */
-/* Version 1.0.0 - UNSTABLE */
+/* Melpomene CSS */
/* CC-BY-NC-SA : https://git.aribaud.net/caribaud/melpomene/ */
:root {
diff --git a/melpomene.js b/melpomene.js
index 327dc25..ece00db 100644
--- a/melpomene.js
+++ b/melpomene.js
@@ -1,5 +1,4 @@
-/* Melpomene webcomic reader JS */
-/* Version 1.0.0 - UNSTABLE */
+/* Melpomene CSS */
/* CC-BY-NC-SA : https://git.aribaud.net/caribaud/melpomene/ */
//============
@@ -35,15 +34,6 @@ PROGRESS_BAR_CONTAINER = document.getElementById("reader-progress-container")
PROGRESS_BAR = document.getElementById("reader-progress-bar")
PROGRESS_BAR_PAGES = document.getElementById("reader-progress-pages")
-//===========================
-// STATES GLOBAL VARIABLES
-//===========================
-
-// The variable ZOOMS can either be defined by another JS file or contructed at init
-if (typeof PAGES_ZOOMS == 'undefined') {
- PAGES_ZOOMS = null
-}
-
CURRENT_ZOOM = 0
CURRENT_PAGE = 1
CURRENT_WIDTH = 0
@@ -61,39 +51,10 @@ MOUSEWHELL_WAIT = false
// Zooms utilites
// --------------
-function loadZoomsFromImgTagsIfRequired(){
-
- // Zooms may be defined by another JS file
- if (PAGES_ZOOMS == null){
-
- PAGES_ZOOMS = []
-
- // parse the data-zooms of each img and and the page number info
- for (var i = 0; i < READER_PAGES.children.length; i++) {
-
- zooms_raw_data = READER_PAGES.children[i].dataset.zooms
-
- // ';' separates zooms data, ',' separates values
- // We add the page number (adding 1 because of indexing)
- zooms = zooms_raw_data.split(";").map(
- zoom => [i + 1].concat(
- zoom.split(',').map(
- value => parseFloat(value)
- )
- )
- )
-
- PAGES_ZOOMS = PAGES_ZOOMS.concat(zooms)
- }
-
- }
-
-}
-
function getFirstZoomOfPage(pageNumber){
- for (var zoom_idx = 0; zoom_idx < PAGES_ZOOMS.length; zoom_idx++){
- if (PAGES_ZOOMS[zoom_idx][0] == pageNumber) {
+ for (var zoom_idx = 0; zoom_idx < zooms.length; zoom_idx++){
+ if (zooms[zoom_idx][0] == pageNumber) {
return zoom_idx
}
}
@@ -102,12 +63,12 @@ function getFirstZoomOfPage(pageNumber){
function getLastZoomOfPage(pageNumber){
let res = null
- for (var zoom_idx = 0; zoom_idx < PAGES_ZOOMS.length; zoom_idx++){
- if (PAGES_ZOOMS[zoom_idx][0] == pageNumber) {
+ for (var zoom_idx = 0; zoom_idx < zooms.length; zoom_idx++){
+ if (zooms[zoom_idx][0] == pageNumber) {
res = zoom_idx
}
- if (res != null && PAGES_ZOOMS[zoom_idx][0] != pageNumber) {
+ if (res != null && zooms[zoom_idx][0] != pageNumber) {
break
}
}
@@ -116,11 +77,11 @@ function getLastZoomOfPage(pageNumber){
}
function getZoomCountForPage(pageNumber) {
- return PAGES_ZOOMS.filter(zoom => zoom[0] == pageNumber).length
+ return zooms.filter(zoom => zoom[0] == pageNumber).length
}
function getCurrentZoomIndexForPage() {
- previousZoomsCount = PAGES_ZOOMS.filter(zoom => zoom[0] < CURRENT_PAGE).length
+ previousZoomsCount = zooms.filter(zoom => zoom[0] < CURRENT_PAGE).length
return CURRENT_ZOOM - previousZoomsCount + 1
}
@@ -187,7 +148,6 @@ function totalPagesWidth() {
// =========
function initReader(){
- loadZoomsFromImgTagsIfRequired()
moveReaderDisplayToZoom(0)
// Smoothly show pictures when they intersect with the viewport
@@ -272,7 +232,7 @@ function moveReaderDisplayToPage(pageNumber) {
function moveReaderDisplayToZoom(index) {
- moveReaderDisplayToArea(PAGES_ZOOMS[index][0], PAGES_ZOOMS[index][1], PAGES_ZOOMS[index][2], PAGES_ZOOMS[index][3], PAGES_ZOOMS[index][4])
+ moveReaderDisplayToArea(zooms[index][0], zooms[index][1], zooms[index][2], zooms[index][3], zooms[index][4])
CURRENT_ZOOM = index
}
@@ -318,7 +278,7 @@ function moveReader(to_next) {
} else {
- if (to_next && CURRENT_ZOOM < PAGES_ZOOMS.length - 1) {
+ if (to_next && CURRENT_ZOOM < zooms.length - 1) {
moveReaderDisplayToZoom(CURRENT_ZOOM + 1)
}
diff --git a/melpomene_head.html b/melpomene_head.html
new file mode 100644
index 0000000..b5a6539
--- /dev/null
+++ b/melpomene_head.html
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/melpomene_js.html b/melpomene_js.html
new file mode 100644
index 0000000..19a608a
--- /dev/null
+++ b/melpomene_js.html
@@ -0,0 +1,2 @@
+
+
diff --git a/melpomene.html b/melpomene_reader.html
similarity index 85%
rename from melpomene.html
rename to melpomene_reader.html
index 5484c8c..1a3a96c 100644
--- a/melpomene.html
+++ b/melpomene_reader.html
@@ -2,11 +2,13 @@
diff --git a/melpomene.css b/melpomene.css
index cfdbd50..cb7fbb5 100644
--- a/melpomene.css
+++ b/melpomene.css
@@ -1,5 +1,4 @@
-/* Melpomene webcomic reader CSS */
-/* Version 1.0.0 - UNSTABLE */
+/* Melpomene CSS */
/* CC-BY-NC-SA : https://git.aribaud.net/caribaud/melpomene/ */
:root {
diff --git a/melpomene.js b/melpomene.js
index 327dc25..ece00db 100644
--- a/melpomene.js
+++ b/melpomene.js
@@ -1,5 +1,4 @@
-/* Melpomene webcomic reader JS */
-/* Version 1.0.0 - UNSTABLE */
+/* Melpomene CSS */
/* CC-BY-NC-SA : https://git.aribaud.net/caribaud/melpomene/ */
//============
@@ -35,15 +34,6 @@ PROGRESS_BAR_CONTAINER = document.getElementById("reader-progress-container")
PROGRESS_BAR = document.getElementById("reader-progress-bar")
PROGRESS_BAR_PAGES = document.getElementById("reader-progress-pages")
-//===========================
-// STATES GLOBAL VARIABLES
-//===========================
-
-// The variable ZOOMS can either be defined by another JS file or contructed at init
-if (typeof PAGES_ZOOMS == 'undefined') {
- PAGES_ZOOMS = null
-}
-
CURRENT_ZOOM = 0
CURRENT_PAGE = 1
CURRENT_WIDTH = 0
@@ -61,39 +51,10 @@ MOUSEWHELL_WAIT = false
// Zooms utilites
// --------------
-function loadZoomsFromImgTagsIfRequired(){
-
- // Zooms may be defined by another JS file
- if (PAGES_ZOOMS == null){
-
- PAGES_ZOOMS = []
-
- // parse the data-zooms of each img and and the page number info
- for (var i = 0; i < READER_PAGES.children.length; i++) {
-
- zooms_raw_data = READER_PAGES.children[i].dataset.zooms
-
- // ';' separates zooms data, ',' separates values
- // We add the page number (adding 1 because of indexing)
- zooms = zooms_raw_data.split(";").map(
- zoom => [i + 1].concat(
- zoom.split(',').map(
- value => parseFloat(value)
- )
- )
- )
-
- PAGES_ZOOMS = PAGES_ZOOMS.concat(zooms)
- }
-
- }
-
-}
-
function getFirstZoomOfPage(pageNumber){
- for (var zoom_idx = 0; zoom_idx < PAGES_ZOOMS.length; zoom_idx++){
- if (PAGES_ZOOMS[zoom_idx][0] == pageNumber) {
+ for (var zoom_idx = 0; zoom_idx < zooms.length; zoom_idx++){
+ if (zooms[zoom_idx][0] == pageNumber) {
return zoom_idx
}
}
@@ -102,12 +63,12 @@ function getFirstZoomOfPage(pageNumber){
function getLastZoomOfPage(pageNumber){
let res = null
- for (var zoom_idx = 0; zoom_idx < PAGES_ZOOMS.length; zoom_idx++){
- if (PAGES_ZOOMS[zoom_idx][0] == pageNumber) {
+ for (var zoom_idx = 0; zoom_idx < zooms.length; zoom_idx++){
+ if (zooms[zoom_idx][0] == pageNumber) {
res = zoom_idx
}
- if (res != null && PAGES_ZOOMS[zoom_idx][0] != pageNumber) {
+ if (res != null && zooms[zoom_idx][0] != pageNumber) {
break
}
}
@@ -116,11 +77,11 @@ function getLastZoomOfPage(pageNumber){
}
function getZoomCountForPage(pageNumber) {
- return PAGES_ZOOMS.filter(zoom => zoom[0] == pageNumber).length
+ return zooms.filter(zoom => zoom[0] == pageNumber).length
}
function getCurrentZoomIndexForPage() {
- previousZoomsCount = PAGES_ZOOMS.filter(zoom => zoom[0] < CURRENT_PAGE).length
+ previousZoomsCount = zooms.filter(zoom => zoom[0] < CURRENT_PAGE).length
return CURRENT_ZOOM - previousZoomsCount + 1
}
@@ -187,7 +148,6 @@ function totalPagesWidth() {
// =========
function initReader(){
- loadZoomsFromImgTagsIfRequired()
moveReaderDisplayToZoom(0)
// Smoothly show pictures when they intersect with the viewport
@@ -272,7 +232,7 @@ function moveReaderDisplayToPage(pageNumber) {
function moveReaderDisplayToZoom(index) {
- moveReaderDisplayToArea(PAGES_ZOOMS[index][0], PAGES_ZOOMS[index][1], PAGES_ZOOMS[index][2], PAGES_ZOOMS[index][3], PAGES_ZOOMS[index][4])
+ moveReaderDisplayToArea(zooms[index][0], zooms[index][1], zooms[index][2], zooms[index][3], zooms[index][4])
CURRENT_ZOOM = index
}
@@ -318,7 +278,7 @@ function moveReader(to_next) {
} else {
- if (to_next && CURRENT_ZOOM < PAGES_ZOOMS.length - 1) {
+ if (to_next && CURRENT_ZOOM < zooms.length - 1) {
moveReaderDisplayToZoom(CURRENT_ZOOM + 1)
}
diff --git a/melpomene_head.html b/melpomene_head.html
new file mode 100644
index 0000000..b5a6539
--- /dev/null
+++ b/melpomene_head.html
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/melpomene_js.html b/melpomene_js.html
new file mode 100644
index 0000000..19a608a
--- /dev/null
+++ b/melpomene_js.html
@@ -0,0 +1,2 @@
+
+
diff --git a/melpomene.html b/melpomene_reader.html
similarity index 85%
rename from melpomene.html
rename to melpomene_reader.html
index 5484c8c..1a3a96c 100644
--- a/melpomene.html
+++ b/melpomene_reader.html
@@ -2,11 +2,13 @@
-
-
- 
-
+
+
+
+
+
+
+ 
+
+
+
+
+
@@ -16,10 +18,12 @@
diff --git a/zooms_generator.py b/zooms_generator.py
index 4c321c0..0a2cc41 100644
--- a/zooms_generator.py
+++ b/zooms_generator.py
@@ -1,182 +1,48 @@
-# Melpomene webcomic reader JSON/JS/HTML generator
-# Version 1.0.0 - UNSTABLE
+# Melpomene comic reader
# CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/
import sys
import re
import xml.etree.ElementTree as ET
-import argparse
from pathlib import Path
-HTML_START_CONSTANT = """\
-
-
-
-
-
-"""
-
-
-def extract_zooms(src_folder):
+def extract_zooms(src_folder, dest_file):
folder = Path(src_folder)
zooms = {}
-
- max_width = 0
- max_height = 0
-
- idx = 0
for svg_path in folder.glob("*.svg"):
+ print(svg_path.name)
+ match = re.search("P(\d+)", svg_path.name)
+ if match:
- idx += 1
-
- print(f"page {idx} : {svg_path.name}")
-
- zooms[idx] = {
- "name": svg_path.stem,
- "zooms": [],
- }
-
- tree = ET.parse(svg_path)
- root = tree.getroot()
+ page_idx = int(match.group(1))
- for svg in root.findall('.//{*}svg'):
- if area.get("width") > max_width:
- max_width = area.get("width")
- if area.get("height") > max_width:
- max_width = area.get("height")
+ zooms[page_idx] = []
- for area in root.findall('.//{*}rect'):
- zooms[idx]["zooms"].append([
- float(area.get("width")),
- float(area.get("height")),
- float(area.get("x")),
- float(area.get("y")),
- ])
-
- return zooms, max_width, max_height
-
-
-def write_json_or_js(zooms, dest_file, is_js):
+ tree = ET.parse(svg_path)
+ root = tree.getroot()
+
+ for area in root.findall('.//{*}rect'):
+ zooms[page_idx].append([
+ float(area.get("width")),
+ float(area.get("height")),
+ float(area.get("x")),
+ float(area.get("y")),
+ ])
with open(dest_file, "w") as data_file:
-
- if is_js:
- data_file.write("PAGES_ZOOMS = ")
- data_file.write("[\n")
- first_coma_skiped = False
+ data_file.write("zooms = [\n")
for page_idx in sorted(zooms.keys()):
- for zoom in zooms[page_idx]["zooms"]:
+ for zoom in zooms[page_idx]:
if zoom[2] < 0 or zoom[3] < 0 :
print(f"WARNING: negative pos x / pos y in page {page_idx} for zoom {zoom} (is the rectangle flipped?)")
- if first_coma_skiped:
- data_file.write(",\n")
- else:
- first_coma_skiped = True
- data_file.write(f" {[page_idx] + zoom}")
- data_file.write("\n]\n")
-
-
-def write_html(zooms, dest_file, pages_width, pages_height, prefix, extention):
-
- with open(dest_file, "w") as data_file:
-
- data_file.write(HTML_START_CONSTANT)
-
- data_file.write(f'
-"""
-
-HTML_END_CONSTANT = """\
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-\n')
-
- for page_idx in sorted(zooms.keys()):
- img_url = f"{prefix}{zooms[page_idx]['name']}.{extention}"
- zoom_html_data = [','.join([str(zoom) for zoom in page_zooms]) for page_zooms in zooms[page_idx]["zooms"]]
- zoom_html_str = ';'.join(zoom_html_data)
- data_file.write(f' 
\n')
-
- data_file.write(f'
\n')
-
- data_file.write(HTML_END_CONSTANT)
-
-def generate_argparse():
- """ Generate Melpomene's generator input parser"""
-
- parser = argparse.ArgumentParser(
- description="Helper that can generate JSON / JS / HTML files for Melpomene webcomic reader"
- )
-
- parser.add_argument("output_format", choices=["html", "json", "js"], help="The type of output to generate")
- parser.add_argument("svg_folders", help="Path of the folder containing the SVGs")
- parser.add_argument("-o", metavar="dest_file", help="Where to write the generator output to")
- parser.add_argument("-p", default="", metavar="img_url_prefix", help="What to prefix the URL of the images when using HTML format.")
- parser.add_argument("-e", default="png", metavar="img_ext", help="What extention to use in the URL of the images when using HTML format.")
-
- return parser
-
+ data_file.write(f" {[page_idx] + zoom},\n")
+ data_file.write("]\n")
if __name__ == "__main__":
-
- args = generate_argparse().parse_args()
-
-
- # Get the final outout name
- output = None
-
- if not args.o:
- output = "melpomene_data"
- else:
- output = args.o
-
- if args.output_format == "html" and not output.endswith(".html"):
- output += ".html"
-
- elif args.output_format == "json" and not output.endswith(".json"):
- output += ".json"
-
- elif args.output_format == "js" and not output.endswith(".js"):
- output += ".js"
-
- zooms, max_width, max_height = extract_zooms(args.svg_folders)
-
- if args.output_format == "html":
- write_html(zooms, output, max_width, max_height, args.p, args.e)
-
- elif args.output_format == "json":
- write_json_or_js(zooms, output, False)
-
- elif args.output_format == "js":
- write_json_or_js(zooms, output, True)
\ No newline at end of file
+ extract_zooms(sys.argv[1], sys.argv[2])