`
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 :
+ Mobile support is currently limited
+ There are some performences issues
# How to use 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 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 
`
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`.
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!
## Advanced usage
If you need to do some global scaling / offset of all zooms in HTML (if for example you reuse zooms data for multiple resolutions), you can add the following attributes to the `` tag :
+ `data-global-zoom-offset=","` : offset all positions by the provided x / y values
+ If they become negative, they get clamped to 0 and width / height get reduced to compensate
+ If they become greater than the page size, they get clamped to the page size and width / height get reduced to compensate
+ `data-global-zoom-scale=""` : scale all positions / sizes by this factor
# Developpement
## Setting up quality checking for JS
Regarding JS, quality checking is done using [eslint](https://eslint.org/).
The configuration file is `eslint/eslintrc.json`.
To setup eslint, you can either install it on your system reading it's documentation, or use the provided Dockerfile to run it. This requires [docker](https://www.docker.com/).
To do so, assuming you are using linux, after installing docker, you can run from this repository root:
+ `docker build -t melpomene-eslint eslint/`, once
+ `docker run -v .:/melpomene:rw -w /melpomene --user $(id -u):$(id -g) melpomene-eslint`, every time you want to run the analysis
You can now open `eslint_report.html` to see the result.
## Setting up quality checking for Python
Regarding Python, quality checking is done using [prospector](https://prospector.landscape.io/en/master/) using [mypy](https://mypy.readthedocs.io/en/stable/) as an additional checker.
Auto-formating is done using [Black](https://pypi.org/project/black/)
Dependencies are managed not using `pip` but [`pipenv`](https://pipenv.pypa.io/en/latest/).
To setup prospector, you need to run:
+ Only once, in melpomene's root folder:
+ Install pipenv: `pip install pipenv`
+ Install melpomene's root folder: `pipenv install --dev`
+ Every time to run the quality checking:
+ `pipenv shell`
+ `prospector -s veryhigh -w mypy --max-line-length 88 .`
+ `black .`
For VSCode users, you can run those automatically in your IDE. Here is what your .vscode/settings.json file should include :
```json
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/Thumbs.db": true,
"**/*.pyc": true,
"**/__pycache__": true
},
// Replace by your own venv python path
"python.defaultInterpreterPath": "~\\.virtualenvs\\melpomene-ajDJjHHp\\Scripts\\python.exe",
"python.formatting.provider": "black",
"[python]": {
"editor.formatOnType": true,
},
"python.linting.enabled": true,
"python.linting.prospectorEnabled": true,
"python.linting.prospectorArgs": [
"-s",
"veryhigh",
"-w",
"mypy",
"--max-line-length",
"88"
],
"editor.rulers": [
88
],
```
# 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).