Compare commits
No commits in common. "8f777a2a1ae2ac5f11665c31bd7005a6bf21a13c" and "24459a84306c055c6a1676eebd5bfe3d18772d34" have entirely different histories.
8f777a2a1a
...
24459a8430
66
README.md
66
README.md
|
|
@ -2,43 +2,32 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Melpomene is a a simple, HTML/CSS/JS webcomic reading utility .
|
Melpomene is a a simple, easy to integrate 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.
|
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.
|
||||||
|
|
||||||
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.
|
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.
|
||||||
|
|
||||||
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!
|
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!
|
||||||
|
|
||||||
Melpomene main repository is [https://git.aribaud.net/caribaud/melpomene](https://git.aribaud.net/caribaud/melpomene)
|
Melpomene main repository is [https://git.aribaud.net/caribaud/melpomene](https://git.aribaud.net/caribaud/melpomene)
|
||||||
|
|
||||||
# How Melpomene works
|
# 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
|
```mermaid
|
||||||
flowchart TB
|
flowchart TB
|
||||||
page([Your comic pages]) -- use in --> svgedit[SVG editor<br>e.g. Inkscape, etc...]
|
page([Your comic pages]) -- use in --> svgedit[SVG editor<br>e.g. Inkscape, etc...]
|
||||||
svgedit -- export --> svg([SVGs with<br>zooms defined])
|
svgedit -- export --> svg([SVGs with<br>zooms defined])
|
||||||
svg -- use in --> gen[Melpomene<br>config generator]
|
svg -- use in --> confgen[Melpomene<br>config generator]
|
||||||
gen -- generate --> html([Melpomene HTML snipet])
|
confgen --> conf([json<br>config])
|
||||||
html -- copy into --> webpage([Your web page])
|
conf & html([HTML snipet]) & js([JS snipet]) & css([CSS snipet]) -- use / import 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 : `<zoom 1 width>, <zoom 1 height>, <zoom 1 x offset>, <zoom 1 y offset>; <zoom 2 width> ...`
|
|
||||||
+ example : `<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg" data-zooms="2481.0,1327.1057,0.0,0.0;593.15338,1076.4635,0.0,1364.053;890.72864,491.29874,830.81415,1751.5;2481.0,1078.4192,0.0,1364.053;562.77032,909.44702,102.48115,2491.6567;920.74463,909.44702,698.55927,2491.6567;728.776,909.44702,1652.3695,2491.6567"/>`
|
|
||||||
|
|
||||||
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
|
## Limitations
|
||||||
|
|
||||||
The following limitations are known and will be improved upon :
|
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
|
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.
|
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 :
|
You need to open a terminal and then run :
|
||||||
+ `python zooms_generator.py <path to the SVG folder> html -p <prefix of the img's url> -e <extension of the img's url>`
|
+ `python zooms_generator.py <path to the SVG folder> zooms_data.json` on windows
|
||||||
+ For example, if your comic pages are hosted at `static/comic/page_x.jpg`, the svg must be named `page_x.svg`
|
+ `python3 zooms_generator.py <path to the SVG folder> zooms_data.json` on linux
|
||||||
and you must run `python zooms_generator.py <path to the SVG folder> html -p /static/comic/ -e jpg`
|
|
||||||
+ It will generate the following `img` tag : `<img loading="lazy" src="static/comic/page_x.jpg" data-zooms="..."/>`
|
|
||||||
|
|
||||||
The pages need to be in alphabetical order! It assumes the first page is page 1, the next one is page 2, etc..
|
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 `melpomene_data.html`.
|
The script will then generate the file `zooms_data.json`.
|
||||||
|
|
||||||
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!
|
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
|
# 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).
|
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).
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
PAGES_ZOOMS = [
|
zooms = [
|
||||||
[1, 2481.0, 1327.1057, 0.0, 0.0],
|
[1, 2481.0, 1327.1057, 0.0, 0.0],
|
||||||
[1, 593.15338, 1076.4635, 0.0, 1364.053],
|
[1, 593.15338, 1076.4635, 0.0, 1364.053],
|
||||||
[1, 890.72864, 491.29874, 830.81415, 1751.5],
|
[1, 890.72864, 491.29874, 830.81415, 1751.5],
|
||||||
|
|
|
||||||
|
|
@ -11,10 +11,13 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
<!-- melpomene_reader.html import -->
|
||||||
|
|
||||||
<!-- Melpomene comic reader -->
|
<!-- Melpomene comic reader -->
|
||||||
<!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
|
<!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
|
||||||
<div id="reader-frame">
|
<div id="reader-frame">
|
||||||
<div id="reader-content-frame">
|
<div id="reader-content-frame">
|
||||||
|
|
||||||
<div id="reader-pages" class="animated" data-pages-width="2481" data-pages-height="3503" hidden>
|
<div id="reader-pages" class="animated" data-pages-width="2481" data-pages-height="3503" hidden>
|
||||||
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg"/>
|
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg"/>
|
||||||
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P02.jpg"/>
|
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P02.jpg"/>
|
||||||
|
|
@ -29,6 +32,7 @@
|
||||||
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P11.jpg"/>
|
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P11.jpg"/>
|
||||||
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P12.jpg"/>
|
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P12.jpg"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="focus-overlay" class="flex-col fill">
|
<div id="focus-overlay" class="flex-col fill">
|
||||||
<div class="grow obscured animated"></div>
|
<div class="grow obscured animated"></div>
|
||||||
<div id="focus-overlay-height" class="flex animated" style="height:100%">
|
<div id="focus-overlay-height" class="flex animated" style="height:100%">
|
||||||
|
|
@ -38,10 +42,12 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="grow obscured animated"></div>
|
<div class="grow obscured animated"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="nav-controls" class="fill">
|
<div id="nav-controls" class="fill">
|
||||||
<div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
|
<div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
|
||||||
<div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
|
<div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="help-menu">
|
<div id="help-menu">
|
||||||
<div id="help-controls" style="opacity:1; transform: translate(0,0);">
|
<div id="help-controls" style="opacity:1; transform: translate(0,0);">
|
||||||
<div><div class="key">←</div>/ scroll up / clic : previous</div>
|
<div><div class="key">←</div>/ scroll up / clic : previous</div>
|
||||||
|
|
@ -52,7 +58,9 @@
|
||||||
<div><div class="key">V</div>: Toggle panel / page viewing mode</div>
|
<div><div class="key">V</div>: Toggle panel / page viewing mode</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="reader-progress-container">
|
<div id="reader-progress-container">
|
||||||
<div id="reader-progress-bar"></div>
|
<div id="reader-progress-bar"></div>
|
||||||
<div id="reader-progress-pages"></div>
|
<div id="reader-progress-pages"></div>
|
||||||
|
|
|
||||||
|
|
@ -1,69 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="demo.css">
|
|
||||||
|
|
||||||
<!-- melpomene_head.html import -->
|
|
||||||
<link rel="stylesheet" href="../melpomene.css">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<!-- Melpomene comic reader -->
|
|
||||||
<!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
|
|
||||||
<div id="reader-frame">
|
|
||||||
<div id="reader-content-frame">
|
|
||||||
<div id="reader-pages" class="animated" data-pages-width="2481" data-pages-height="3503" hidden>
|
|
||||||
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg" data-zooms="2481.0,1327.1057,0.0,0.0;593.15338,1076.4635,0.0,1364.053;890.72864,491.29874,830.81415,1751.5;2481.0,1078.4192,0.0,1364.053;562.77032,909.44702,102.48115,2491.6567;920.74463,909.44702,698.55927,2491.6567;728.776,909.44702,1652.3695,2491.6567"/>
|
|
||||||
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P02.jpg" data-zooms="1459.9161,960.62878,99.857468,103.85177;788.87384,960.62878,1593.7252,103.85177;455.35007,305.56384,389.44412,1376.0359;2282.7415,760.914,99.857475,1114.4093;1069.9728,496.29166,101.85461,1928.2478;1209.7733,496.29166,1172.3267,1928.2478;788.87402,926.67731,101.85462,2474.468;415.40707,926.67731,924.68018,2474.468;1008.5604,926.67731,1372.0416,2474.468"/>
|
|
||||||
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P03.jpg" data-zooms="2278.4634,1424.0264,103.9937,103.9937;457.3472,589.15906,816.83411,469.33011;618.69055,832.04285,104.47829,1578.7172;1170.7311,832.04285,756.71887,1578.7172;418.14838,832.04285,1962.6545,1578.7172;2280.6614,940.57422,100.82664,2461.1147"/>
|
|
||||||
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P04.jpg" data-zooms="1128.3893,547.21899,100.85604,101.85461;1125.3937,505.27878,101.85462,700.99945;659.59674,1104.1381,1237.9126,100.46677;474.09705,1104.7645,1908.0801,103.04887;991.58466,641.08496,365.47833,1256.2069;2276.7502,1268.1899,101.85461,1256.2069;669.66565,827.24689,100.95136,2574.8799;1574.1992,825.24969,806.56573,2576.877"/>
|
|
||||||
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P05.jpg" data-zooms="2270.7588,1348.0758,107.84606,109.84322;828.80096,1879.4762,104.70337,1519.7256;606.50098,1877.479,975.78717,1521.7228;755.02411,1139.5406,1623.401,1521.7228;757.02124,680.4198,1621.4038,2716.7849"/>
|
|
||||||
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P06.jpg" data-zooms="2273.6387,1248.3829,104.50265,107.32705;624.19147,440.60574,1259.6805,771.06006;830.37231,940.5238,110.15143,1415.0222;1395.2515,1313.3441,985.71411,1409.3734;1321.8173,796.47961,112.97583,2417.6829;974.4165,754.11365,1403.7247,2646.4587"/>
|
|
||||||
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P07.jpg" data-zooms="828.81702,497.29019,443.36716,531.2417;2275.0127,1188.0789,105.30553,109.78442;2275.0127,804.28339,105.30553,1356.3481;847.87823,1182.9146,105.30553,2210.6436;497.6918,1185.7389,994.37964,2213.468;854.35431,1185.7389,1528.7885,2213.468"/>
|
|
||||||
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P08.jpg" data-zooms="2272.7561,1228.2468,101.85461,107.84607;497.29019,756.91962,994.58044,569.18756;2276.7502,1052.4977,101.85461,1336.0929;2278.7473,958.63165,101.85462,2444.5107"/>
|
|
||||||
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P09.jpg" data-zooms="1131.1705,453.31552,101.67825,103.09045;1148.1168,453.31552,1232.8488,103.09045;1481.6407,453.31552,501.89209,103.09045;2282.1118,855.79193,98.853851,604.42072;1776.5449,881.21149,290.91275,1355.71;703.27454,398.23981,762.58685,2863.9373;2270.8142,1132.5826,107.32704,2270.8142"/>
|
|
||||||
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P10.jpg" data-zooms="2278.7473,1240.2297,101.85461,101.85461;667.04791,1016.549,99.857468,1390.016;1583.7395,1014.5519,798.85974,1390.016;2280.7446,944.65161,99.857468,2456.4937"/>
|
|
||||||
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P11.jpg" data-zooms="830.81415,1194.2953,97.860321,101.85461;774.89398,1198.2897,960.62885,99.857468;609.13055,1192.2982,1769.4744,101.85461;363.4812,868.75995,99.857468,1348.0758;1495.8649,870.75714,493.2959,1346.0787;357.48975,870.75714,2023.1123,1348.0758;529.24457,499.28735,103.85177,2280.7446;531.24176,687.01941,99.857468,2716.123;1022.5405,1120.4008,669.04504,2280.7446;657.06213,1120.4008,1725.5371,2280.7446"/>
|
|
||||||
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P12.jpg" data-zooms="704.99371,341.51254,619.11633,281.59805;393.43842,551.21326,1459.9161,159.77196;2280.7446,691.01367,99.857468,101.85461;718.97375,1198.2897,99.857468,840.79987;712.9823,1196.2925,850.78564,842.79706;780.88538,1192.2982,1599.7167,842.79706;2366.6221,1445.9362,61.911629,2049.0752;922.68298,551.21326,984.59467,2378.605;631.09918,211.69783,1851.3574,3289.3049"/>
|
|
||||||
</div>
|
|
||||||
<div id="focus-overlay" class="flex-col fill">
|
|
||||||
<div class="grow obscured animated"></div>
|
|
||||||
<div id="focus-overlay-height" class="flex animated" style="height:100%">
|
|
||||||
<div class="grow obscured animated"></div>
|
|
||||||
<div id="focus-overlay-width" class="focus animated" style="width:100%"></div>
|
|
||||||
<div class="grow obscured animated"></div>
|
|
||||||
</div>
|
|
||||||
<div class="grow obscured animated"></div>
|
|
||||||
</div>
|
|
||||||
<div id="nav-controls" class="fill">
|
|
||||||
<div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
|
|
||||||
<div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
|
|
||||||
</div>
|
|
||||||
<div id="help-menu">
|
|
||||||
<div id="help-controls" style="opacity:1; transform: translate(0,0);">
|
|
||||||
<div><div class="key">←</div>/ scroll up / clic : previous</div>
|
|
||||||
<div><div class="key">→</div>/ scroll down / clic : next</div>
|
|
||||||
<div>-----------------------</div>
|
|
||||||
<div><div class="key">F</div>: Toggle fullscreen</div>
|
|
||||||
<div><div class="key">P</div>: Toggle progress bar</div>
|
|
||||||
<div><div class="key">V</div>: Toggle panel / page viewing mode</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="reader-progress-container">
|
|
||||||
<div id="reader-progress-bar"></div>
|
|
||||||
<div id="reader-progress-pages"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- End of Melpomene comic reader -->
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
<!-- melpomene_js.html import -->
|
|
||||||
<script src="../melpomene.js"></script>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
<div id="reader-frame">
|
<div id="reader-frame">
|
||||||
<div id="reader-content-frame">
|
<div id="reader-content-frame">
|
||||||
|
|
||||||
<div id="reader-pages" class="animated" data-pages-width="2481" data-pages-height="3503" hidden>
|
<div id="reader-pages" data-pages-width="2481" data-pages-height="3503" hidden>
|
||||||
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg"/>
|
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg"/>
|
||||||
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P02.jpg"/>
|
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P02.jpg"/>
|
||||||
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P03.jpg"/>
|
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P03.jpg"/>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
/* Melpomene webcomic reader CSS */
|
/* Melpomene CSS */
|
||||||
/* Version 1.0.0 - UNSTABLE */
|
|
||||||
/* CC-BY-NC-SA : https://git.aribaud.net/caribaud/melpomene/ */
|
/* CC-BY-NC-SA : https://git.aribaud.net/caribaud/melpomene/ */
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
|
|
|
||||||
60
melpomene.js
60
melpomene.js
|
|
@ -1,5 +1,4 @@
|
||||||
/* Melpomene webcomic reader JS */
|
/* Melpomene CSS */
|
||||||
/* Version 1.0.0 - UNSTABLE */
|
|
||||||
/* CC-BY-NC-SA : https://git.aribaud.net/caribaud/melpomene/ */
|
/* 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 = document.getElementById("reader-progress-bar")
|
||||||
PROGRESS_BAR_PAGES = document.getElementById("reader-progress-pages")
|
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_ZOOM = 0
|
||||||
CURRENT_PAGE = 1
|
CURRENT_PAGE = 1
|
||||||
CURRENT_WIDTH = 0
|
CURRENT_WIDTH = 0
|
||||||
|
|
@ -61,39 +51,10 @@ MOUSEWHELL_WAIT = false
|
||||||
// Zooms utilites
|
// 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){
|
function getFirstZoomOfPage(pageNumber){
|
||||||
|
|
||||||
for (var zoom_idx = 0; zoom_idx < PAGES_ZOOMS.length; zoom_idx++){
|
for (var zoom_idx = 0; zoom_idx < zooms.length; zoom_idx++){
|
||||||
if (PAGES_ZOOMS[zoom_idx][0] == pageNumber) {
|
if (zooms[zoom_idx][0] == pageNumber) {
|
||||||
return zoom_idx
|
return zoom_idx
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -102,12 +63,12 @@ function getFirstZoomOfPage(pageNumber){
|
||||||
function getLastZoomOfPage(pageNumber){
|
function getLastZoomOfPage(pageNumber){
|
||||||
let res = null
|
let res = null
|
||||||
|
|
||||||
for (var zoom_idx = 0; zoom_idx < PAGES_ZOOMS.length; zoom_idx++){
|
for (var zoom_idx = 0; zoom_idx < zooms.length; zoom_idx++){
|
||||||
if (PAGES_ZOOMS[zoom_idx][0] == pageNumber) {
|
if (zooms[zoom_idx][0] == pageNumber) {
|
||||||
res = zoom_idx
|
res = zoom_idx
|
||||||
}
|
}
|
||||||
|
|
||||||
if (res != null && PAGES_ZOOMS[zoom_idx][0] != pageNumber) {
|
if (res != null && zooms[zoom_idx][0] != pageNumber) {
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -116,11 +77,11 @@ function getLastZoomOfPage(pageNumber){
|
||||||
}
|
}
|
||||||
|
|
||||||
function getZoomCountForPage(pageNumber) {
|
function getZoomCountForPage(pageNumber) {
|
||||||
return PAGES_ZOOMS.filter(zoom => zoom[0] == pageNumber).length
|
return zooms.filter(zoom => zoom[0] == pageNumber).length
|
||||||
}
|
}
|
||||||
|
|
||||||
function getCurrentZoomIndexForPage() {
|
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
|
return CURRENT_ZOOM - previousZoomsCount + 1
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -187,7 +148,6 @@ function totalPagesWidth() {
|
||||||
// =========
|
// =========
|
||||||
|
|
||||||
function initReader(){
|
function initReader(){
|
||||||
loadZoomsFromImgTagsIfRequired()
|
|
||||||
moveReaderDisplayToZoom(0)
|
moveReaderDisplayToZoom(0)
|
||||||
|
|
||||||
// Smoothly show pictures when they intersect with the viewport
|
// Smoothly show pictures when they intersect with the viewport
|
||||||
|
|
@ -272,7 +232,7 @@ function moveReaderDisplayToPage(pageNumber) {
|
||||||
|
|
||||||
function moveReaderDisplayToZoom(index) {
|
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
|
CURRENT_ZOOM = index
|
||||||
}
|
}
|
||||||
|
|
@ -318,7 +278,7 @@ function moveReader(to_next) {
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
if (to_next && CURRENT_ZOOM < PAGES_ZOOMS.length - 1) {
|
if (to_next && CURRENT_ZOOM < zooms.length - 1) {
|
||||||
moveReaderDisplayToZoom(CURRENT_ZOOM + 1)
|
moveReaderDisplayToZoom(CURRENT_ZOOM + 1)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<link rel="stylesheet" href="melpomene.css">
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
<script src="zooms_data.js"></script>
|
||||||
|
<script src="melpomene.js"></script>
|
||||||
|
|
@ -2,11 +2,13 @@
|
||||||
<!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
|
<!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
|
||||||
<div id="reader-frame">
|
<div id="reader-frame">
|
||||||
<div id="reader-content-frame">
|
<div id="reader-content-frame">
|
||||||
<!-- replace all 'xxxx' with the actual value -->
|
|
||||||
<div id="reader-pages" class="animated" data-pages-width="xxxx" data-pages-height="xxxx" hidden>
|
<div id="reader-pages" class="animated" data-pages-width="9999" data-pages-height="9999" hidden>
|
||||||
<img loading="lazy" src="xxxx" data-zooms="xxxx"/>
|
<img loading="lazy" src="https://link.to.my/comic/page.jpg"/>
|
||||||
<!-- duplicate img for each comic page -->
|
<!-- Change "https://link.to.my/comic/page.jpg" with you page URL. -->
|
||||||
|
<!-- You can add more pages by duplicating the line -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="focus-overlay" class="flex-col fill">
|
<div id="focus-overlay" class="flex-col fill">
|
||||||
<div class="grow obscured animated"></div>
|
<div class="grow obscured animated"></div>
|
||||||
<div id="focus-overlay-height" class="flex animated" style="height:100%">
|
<div id="focus-overlay-height" class="flex animated" style="height:100%">
|
||||||
|
|
@ -16,10 +18,12 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="grow obscured animated"></div>
|
<div class="grow obscured animated"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="nav-controls" class="fill">
|
<div id="nav-controls" class="fill">
|
||||||
<div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
|
<div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
|
||||||
<div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
|
<div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="help-menu">
|
<div id="help-menu">
|
||||||
<div id="help-controls" style="opacity:1; transform: translate(0,0);">
|
<div id="help-controls" style="opacity:1; transform: translate(0,0);">
|
||||||
<div><div class="key">←</div>/ scroll up / clic : previous</div>
|
<div><div class="key">←</div>/ scroll up / clic : previous</div>
|
||||||
|
|
@ -30,7 +34,9 @@
|
||||||
<div><div class="key">V</div>: Toggle panel / page viewing mode</div>
|
<div><div class="key">V</div>: Toggle panel / page viewing mode</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="reader-progress-container">
|
<div id="reader-progress-container">
|
||||||
<div id="reader-progress-bar"></div>
|
<div id="reader-progress-bar"></div>
|
||||||
<div id="reader-progress-pages"></div>
|
<div id="reader-progress-pages"></div>
|
||||||
|
|
@ -1,182 +1,48 @@
|
||||||
# Melpomene webcomic reader JSON/JS/HTML generator
|
# Melpomene comic reader
|
||||||
# Version 1.0.0 - UNSTABLE
|
|
||||||
# CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/
|
# CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/
|
||||||
|
|
||||||
import sys
|
import sys
|
||||||
import re
|
import re
|
||||||
import xml.etree.ElementTree as ET
|
import xml.etree.ElementTree as ET
|
||||||
import argparse
|
|
||||||
|
|
||||||
from pathlib import Path
|
from pathlib import Path
|
||||||
|
|
||||||
|
|
||||||
HTML_START_CONSTANT = """\
|
def extract_zooms(src_folder, dest_file):
|
||||||
<!-- Melpomene comic reader -->
|
|
||||||
<!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
|
|
||||||
<div id="reader-frame">
|
|
||||||
<div id="reader-content-frame">
|
|
||||||
"""
|
|
||||||
|
|
||||||
HTML_END_CONSTANT = """\
|
|
||||||
<div id="focus-overlay" class="flex-col fill">
|
|
||||||
<div class="grow obscured animated"></div>
|
|
||||||
<div id="focus-overlay-height" class="flex animated" style="height:100%">
|
|
||||||
<div class="grow obscured animated"></div>
|
|
||||||
<div id="focus-overlay-width" class="focus animated" style="width:100%"></div>
|
|
||||||
<div class="grow obscured animated"></div>
|
|
||||||
</div>
|
|
||||||
<div class="grow obscured animated"></div>
|
|
||||||
</div>
|
|
||||||
<div id="nav-controls" class="fill">
|
|
||||||
<div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
|
|
||||||
<div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
|
|
||||||
</div>
|
|
||||||
<div id="help-menu">
|
|
||||||
<div id="help-controls" style="opacity:1; transform: translate(0,0);">
|
|
||||||
<div><div class="key">←</div>/ scroll up / clic : previous</div>
|
|
||||||
<div><div class="key">→</div>/ scroll down / clic : next</div>
|
|
||||||
<div>-----------------------</div>
|
|
||||||
<div><div class="key">F</div>: Toggle fullscreen</div>
|
|
||||||
<div><div class="key">P</div>: Toggle progress bar</div>
|
|
||||||
<div><div class="key">V</div>: Toggle panel / page viewing mode</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="reader-progress-container">
|
|
||||||
<div id="reader-progress-bar"></div>
|
|
||||||
<div id="reader-progress-pages"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- End of Melpomene comic reader -->
|
|
||||||
"""
|
|
||||||
|
|
||||||
|
|
||||||
def extract_zooms(src_folder):
|
|
||||||
folder = Path(src_folder)
|
folder = Path(src_folder)
|
||||||
|
|
||||||
zooms = {}
|
zooms = {}
|
||||||
|
|
||||||
max_width = 0
|
|
||||||
max_height = 0
|
|
||||||
|
|
||||||
idx = 0
|
|
||||||
|
|
||||||
for svg_path in folder.glob("*.svg"):
|
for svg_path in folder.glob("*.svg"):
|
||||||
|
print(svg_path.name)
|
||||||
|
match = re.search("P(\d+)", svg_path.name)
|
||||||
|
if match:
|
||||||
|
|
||||||
idx += 1
|
page_idx = int(match.group(1))
|
||||||
|
|
||||||
print(f"page {idx} : {svg_path.name}")
|
|
||||||
|
|
||||||
zooms[idx] = {
|
|
||||||
"name": svg_path.stem,
|
|
||||||
"zooms": [],
|
|
||||||
}
|
|
||||||
|
|
||||||
tree = ET.parse(svg_path)
|
|
||||||
root = tree.getroot()
|
|
||||||
|
|
||||||
for svg in root.findall('.//{*}svg'):
|
zooms[page_idx] = []
|
||||||
if area.get("width") > max_width:
|
|
||||||
max_width = area.get("width")
|
|
||||||
if area.get("height") > max_width:
|
|
||||||
max_width = area.get("height")
|
|
||||||
|
|
||||||
for area in root.findall('.//{*}rect'):
|
tree = ET.parse(svg_path)
|
||||||
zooms[idx]["zooms"].append([
|
root = tree.getroot()
|
||||||
float(area.get("width")),
|
|
||||||
float(area.get("height")),
|
for area in root.findall('.//{*}rect'):
|
||||||
float(area.get("x")),
|
zooms[page_idx].append([
|
||||||
float(area.get("y")),
|
float(area.get("width")),
|
||||||
])
|
float(area.get("height")),
|
||||||
|
float(area.get("x")),
|
||||||
return zooms, max_width, max_height
|
float(area.get("y")),
|
||||||
|
])
|
||||||
|
|
||||||
def write_json_or_js(zooms, dest_file, is_js):
|
|
||||||
|
|
||||||
with open(dest_file, "w") as data_file:
|
with open(dest_file, "w") as data_file:
|
||||||
|
data_file.write("zooms = [\n")
|
||||||
if is_js:
|
|
||||||
data_file.write("PAGES_ZOOMS = ")
|
|
||||||
data_file.write("[\n")
|
|
||||||
first_coma_skiped = False
|
|
||||||
for page_idx in sorted(zooms.keys()):
|
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 :
|
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?)")
|
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(f" {[page_idx] + zoom},\n")
|
||||||
data_file.write(",\n")
|
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' <div id="reader-pages" class="animated" data-pages-width="{pages_width}" data-pages-height="{pages_height}" hidden>\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' <img loading="lazy" src="{img_url}" data-zooms="{zoom_html_str}"/>\n')
|
|
||||||
|
|
||||||
data_file.write(f' </div>\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
|
|
||||||
|
|
||||||
|
|
||||||
if __name__ == "__main__":
|
if __name__ == "__main__":
|
||||||
|
extract_zooms(sys.argv[1], sys.argv[2])
|
||||||
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)
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue