diff --git a/README.md b/README.md index f72c498..6e21b8a 100644 --- a/README.md +++ b/README.md @@ -2,32 +2,43 @@ ![](https://licensebuttons.net/l/by-nc-sa/4.0/88x31.png) -Melpomene is a a simple, easy to integrate webcomic reading utility . +Melpomene is a a simple, HTML/CSS/JS webcomic reading utility . It allows people to look through your webcomic like they would in real life : panel by panel. It displays your pages through a series of zooms you defines beforehand. -Melpomene uses SVGs as input to defines the zooms. It allows you to use any SVG editor as a "What You See Is What You Get" editor. +To avoid writing the zooms informations by hand, Melpomene utility scripts uses SVGs as input to defines the zooms. It allows you to use any SVG editor as a "What You See Is What You Get" editor. -This repository host a small demo you can open in your browser : the [episode 35 of pepper and carrot](https://www.peppercarrot.com/en/webcomic/ep35_The-Reflection.html) (see Credits). You can open `demos/pepper_and_carrot_e35_lowres.html` and `demos/pepper_and_carrot_e35_highres.html` to see Mepomene in action! +This repository host a small demo you can open in your browser : the [episode 35 of pepper and carrot](https://www.peppercarrot.com/en/webcomic/ep35_The-Reflection.html) (see Credits). You can open the HTML files in the `demos` folder to see Mepomene in action! Melpomene main repository is [https://git.aribaud.net/caribaud/melpomene](https://git.aribaud.net/caribaud/melpomene) # How Melpomene works -It works with : -+ HTML, CSS and Javascript snipets you can put in your web page to add the webcomic reader -+ A Javascript file describing the various informations required by the reader -+ A Python script, used to generate the above Javascript configuration file - ```mermaid flowchart TB page([Your comic pages]) -- use in --> svgedit[SVG editor
e.g. Inkscape, etc...] svgedit -- export --> svg([SVGs with
zooms defined]) - svg -- use in --> confgen[Melpomene
config generator] - confgen --> conf([json
config]) - conf & html([HTML snipet]) & js([JS snipet]) & css([CSS snipet]) -- use / import into --> webpage([Your web page]) + svg -- use in --> gen[Melpomene
config generator] + gen -- generate --> html([Melpomene HTML snipet]) + html -- copy into --> webpage([Your web page]) + js([melpomene.js]) & css([melpomene.css]) -- include into --> webpage ``` +Melpomene is mainly one JS file and one CSS file. You only need to include them in you web page. They are : + + `melpomene.js` + + `melpomene.css` + +The JS files expect you to write some very specific HTML tags to be able to work. +To simplify things, you only need to copy-paste the content of `melpomene.html` into your own page and change a few things : ++ `data-pages-width` must be set to your comic pages width in px ++ `data-pages-height` must be set to your comic pages height in px ++ You must duplicate the `img` tag for each of you comic page and : + + set `url` to the actual URL of your page + + set `data-zooms` with the zooms information, like so : `, , , ; ...` + + example : `` + +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 : @@ -53,42 +64,25 @@ To create the zooms for a comic page, what you need to do is : 3. Once you are done, save the SGV -## Generating the configuration files +## Generating the HTML 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 zooms_data.json` on windows -+ `python3 zooms_generator.py zooms_data.json` on linux ++ `python zooms_generator.py html -p -e ` + + For example, if your comic pages are hosted at `static/comic/page_x.jpg`, the svg must be named `page_x.svg` + and you must run `python zooms_generator.py html -p /static/comic/ -e jpg` + + It will generate the following `img` tag : `` The pages need to be in alphabetical order! It assumes the first page is page 1, the next one is page 2, etc.. -The script will then generate the file `zooms_data.json`. +The script will then generate the file `melpomene_data.html`. + +If you wish to run a custom generation process, this generator can output a JSON or a JS file as well, run `python zooms_generator.py -h` for help You are now ready to integrate Melpomene in your website! -## Integrating Melpomene - -Let's assume your site is `https://my.website/`. - -You now need : -1. Host the Melpomene Javascript and CSS files in your website, e.g. at `https://my.website/melptomene.js` and `https://my.website/melptomene.css` -2. Host the zooms data on your website, e.g. at `https://my.website/zooms_data.js` -2. Include the various parts of the HTML snipets : - 1. `melpomene_head.html` goes in the `head` tag of your page - * You may need to change the `href` values to where you uploaded the CSS file. - 2. `melpomene_reader.html` goes where you want somewhere within the `body` tag of your page - * Change `data-pages-width` and `data-pages-height` with the actual width and height of your pages - * Change `https://link.to.my/comic/page.jpg` to the actual URL of your comic pages and duplicate the `img` - tag for each of them - 3. `melpomene_js.html` goes right after the `body` tag of your page. - * You may need to change the `href` values to where you uploaded the JS files. - -You can now open your page and should see the results. - -If you are having troubles, you can open the demo files to see how it was done. - # Credits Most examples and the documentation of Melpomene uses illustrations from David "Deevad" Revoy's "Pepper & Carrot" webcomic, which is published under CC-BY 4.0. Full licence [here](https://www.peppercarrot.com/en/license/index.html). \ No newline at end of file diff --git a/demos/pepper_and_carrot_e35_highres.html b/demos/pepper_and_carrot_e35_highres.html index 10899ff..d2b5845 100644 --- a/demos/pepper_and_carrot_e35_highres.html +++ b/demos/pepper_and_carrot_e35_highres.html @@ -11,13 +11,10 @@ - -
- -
@@ -42,12 +38,10 @@
- -
←
/ scroll up / clic : previous
@@ -58,9 +52,7 @@
V
: Toggle panel / page viewing mode
-
-
diff --git a/demos/pepper_and_carrot_e35_highres_htmldata.html b/demos/pepper_and_carrot_e35_highres_htmldata.html index 2523740..b83695d 100644 --- a/demos/pepper_and_carrot_e35_highres_htmldata.html +++ b/demos/pepper_and_carrot_e35_highres_htmldata.html @@ -11,13 +11,10 @@ - -
- - -
@@ -43,12 +38,10 @@
- -
←
/ scroll up / clic : previous
@@ -59,9 +52,7 @@
V
: Toggle panel / page viewing mode
-
-
@@ -69,6 +60,7 @@
+ diff --git a/melpomene_reader.html b/melpomene.html similarity index 85% rename from melpomene_reader.html rename to melpomene.html index 1a3a96c..5484c8c 100644 --- a/melpomene_reader.html +++ b/melpomene.html @@ -2,13 +2,11 @@
- - -
diff --git a/melpomene_head.html b/melpomene_head.html deleted file mode 100644 index b5a6539..0000000 --- a/melpomene_head.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/melpomene_js.html b/melpomene_js.html deleted file mode 100644 index 19a608a..0000000 --- a/melpomene_js.html +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/zooms_generator.py b/zooms_generator.py index 33f8523..4c321c0 100644 --- a/zooms_generator.py +++ b/zooms_generator.py @@ -10,6 +10,47 @@ import argparse from pathlib import Path +HTML_START_CONSTANT = """\ + + +
+
+""" + +HTML_END_CONSTANT = """\ +
+
+
+
+
+
+
+
+
+ +
+
+
←
/ scroll up / clic : previous
+
→
/ scroll down / clic : next
+
-----------------------
+
F
: Toggle fullscreen
+
P
: Toggle progress bar
+
V
: Toggle panel / page viewing mode
+
+
+
+
+
+
+
+
+ +""" + + def extract_zooms(src_folder): folder = Path(src_folder) @@ -77,15 +118,19 @@ def write_html(zooms, dest_file, pages_width, pages_height, prefix, extention): with open(dest_file, "w") as data_file: - data_file.write(f'\n') + + data_file.write(HTML_END_CONSTANT) def generate_argparse(): """ Generate Melpomene's generator input parser"""