Update 'README.md'
This commit is contained in:
parent
02aa63da9a
commit
7335afeff2
87
README.md
87
README.md
|
|
@ -1,3 +1,86 @@
|
|||
# melpomene
|
||||
# Melpomene
|
||||
|
||||
Melpomene is a minimalist webcomic reading utility consisting of a simple, single-file javascript.
|
||||
|
||||
|
||||
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])
|
||||
```
|
||||
|
||||
# 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 `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).
|
||||
Loading…
Reference in New Issue