93 lines
4.4 KiB
Markdown
93 lines
4.4 KiB
Markdown
# Melpomene
|
|
|
|
|
|
|
|
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.
|
|
|
|
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 `demos/pepper_and_carrot_e35_lowres.html` and `demos/pepper_and_carrot_e35_highres.html` to see Mepomene in action!
|
|
|
|
|
|
# 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<br>e.g. Inkscape, etc...]
|
|
svgedit -- export --> svg([SVGs with<br>zooms defined])
|
|
svg -- use in --> confgen[Melpomene<br>config generator]
|
|
confgen --> conf([json<br>config])
|
|
conf & html([HTML snipet]) & js([JS snipet]) & css([CSS snipet]) -- use / import into --> webpage([Your web page])
|
|
```
|
|
|
|
## Limitations
|
|
|
|
The following limitations are known and will be improved upon :
|
|
|
|
+ Mobile support is currently limited
|
|
+ There are some performences issues
|
|
+ Your comic pages need to be the same size
|
|
|
|
# How to setup Melpomene ?
|
|
|
|
## Defining the zooms
|
|
|
|
All the zooms must be manually defined by you.
|
|
To do so, you can use your favorite SVG editor. If you don't have one, [Inkscape](https://inkscape.org/) is a good one.
|
|
|
|
To create the zooms for a comic page, what you need to do is :
|
|
|
|
1. Open your comic page in your editor (make sure to keep the image's original size when importing!)
|
|
* If your software ask, there is no need to actually import the image, you only need to link it.
|
|
2. Create a simple rectangle over each zoom you want, in the order you want them to show up
|
|
* You can set the rectangle's color to be translucent so you can still see the page underneath them!
|
|
* If you want to change the zoom order, you can change their order in the layer view of your SVG tool if they support it
|
|
3. Once you are done, save the SGV
|
|
|
|
|
|
## 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 <path to the SVG folder> zooms_data.json` on windows
|
|
+ `python3 zooms_generator.py <path to the SVG folder> zooms_data.json` on linux
|
|
|
|
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`.
|
|
|
|
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). |