melpomene/README.md

# Melpomene

![](https://licensebuttons.net/l/by-nc-sa/4.0/88x31.png)

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

In truth, Melpomene is a bit more complicated than a single-file javascript. You must now how to create web pages using HTML, CSS and Javascript.

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).