Adno

Adno is a web application for viewing, editing and sharing narratives and pathways on static images and IIIF images.

Table of Contents

1. How to start
2. Host Adno
3. IIIF EXAMPLES
4. QUICKSTART
5. Developpers section
6. Keyboard shortcuts
7. IPFS support
8. Translation
9. License
10. Credits

How to start with Adno ?

First, go to Adno's repository and download the latest version.

Then, if you want to use it locally you have to use a web server.

• Unzip the package and go inside the directory.
• Create a light web server using python -m http.server 8080or php -S localhost:8080 command to run a web server on the port 8080.
• Use localhost:8080 URL in your browser.

On the web, unzip the Adno package to your web server and start it.

Enjoy using Adno !

Host Adno with your Github Pages

It's the simplest way to deploy your own Adno on the Web.

• Fork Adno repo repository.
• Copy the file .env.example to .env and adjust it's content.
• Select this new repository and click on the Settings tab.
• Select the tab Pages on the left panel.
• Then, you’ll have to select the source of build en deployement : Github Actions.
• On the top menu click on the Actions tab and click on the green button “I understand my workflows, go ahead and enable them”.
• On the left panel, select the tab “BUILD ADNO"
• Click on Run workflow (Branch:main).
• Return to “Settings” then “Pages”, click on Visit site button.

Enjoy using Adno !

IIIF pictures examples

• https://ronallo.com/iiif-workshop/presentation/example-manifests.html
• https://free.iiifhosting.com/iiif/1c8d49343676a04fffcd92979c02e9394e48bac96f590fffbadffc9133cd06b9/info.json
• https://iiif.emf.fr/iiif/3/peutinger.jp2/info.json
• https://iiif.emf.fr/iiif/3/saint-savin.jpg/info.json

Quickstart with IIIF pictures examples

• https://w.adno.app/#/search?url=https://free.iiifhosting.com/iiif/1c8d49343676a04fffcd92979c02e9394e48bac96f590fffbadffc9133cd06b9/info.json
• https://w.adno.app/#/search?url=https://iiif.emf.fr/iiif/3/peutinger.jp2/info.json
• https://w.adno.app/#/search?url=https://iiif.emf.fr/iiif/3/saint-savin.jpg/info.json

For developpers

If you want to contribute to Adno here are few steps to start

• clone the project from github (https://github.com/adnodev/adno.git)
• Start the project with the following command : npm start
  • Create a .env file and put the version you would like (examples below)
  • run npm build
• In case of errors try to remove node_modules folder and package-lock.json file and reinstall module with npm install command.

Customize your own Adno

Create a .env file and insert the following properties as you wish :

# MATOMO
MATOMO_SITE_ID=YOUR SITE ID HERE
MATOMO_URL=YOUR OWN MATOMO URL

# WEBSITE PROPERTIES
ADNO_TITLE=YOUR OWN TITLE

# FOOTER
ADNO_FOOTER=TRUE
ADNO_FOOTER_TEXT=YOUR FOOTER TEXT HERE

# GRANTED IMAGES EXTENSIONS
GRANTED_IMG_EXTENSIONS=jpg,png,JPG,PNG

# CORS SERVER
CORS_SERVER=https://app-f1586530-d9cb-472f-93fd-e586b0a801ab.cleverapps.io

Build Adno

.env example :

# FOOTER
ADNO_FOOTER=TRUE

# GRANTED IMAGES EXTENSIONS
GRANTED_IMG_EXTENSIONS=jpg,png,JPG,PNG

# CORS SERVER
CORS_SERVER=https://app-f1586530-d9cb-472f-93fd-e586b0a801ab.cleverapps.io

Build version :

Warning : this action requires .env file !

Run npm build in your terminal

Adno embedded in your website

Available settings for the embed :

• delay with min = 1 and max = 20 (default 3 seconds)
• navigator value = true or false
• toolbar value = true or false
• toolbarsfs value = true or false
• startfirst value = true or false
• should_auto_play_annotations value = true or false
• rotation value = true or false
• anno_bounds value = true or false
• show_outlines value = true or false
• show_eyes value = true or false
• sound_mode value = no_sound or spatialization or no_spatialization
• show_only_current_annotation = true or false (default false)

Example : https://w.adno.app/#/embed?url=https://static.emf.fr/adno/annotations.json&delay=1&rotation=false&anno_bounds=true&show_outlines=true

A little example with an iframe that you can insert in your own projects :

    <iframe src="https://w.adno.app/#/embed?url=https://static.emf.fr/adno/annotations.json&delay=1&rotation=false&anno_bounds=true" height="500" width="1200" allowfullscreen="true"></iframe>

Shortcuts for the viewer

• Key 'P' to start the autoplay
• Key 'E' to toggle FullScreen
• Key 'S' to toggle annotation bounds
• Key 'T' to toggle the toolsbar
• Arrows (left and right) to change the current selected annotation

IPFS support

Add the following environment variable to use an IPFS gateway

# IPFS SUPPORT
IPFS_GATEWAY=https://ipfs.io/ipfs/

Translation

If Adno is not available in the language of your choice, you can contribute by adding a new language and proposing translations on the Adno section of the Weblate platform. In the same way, you can propose changes and corrections to existing translations.

License

This project's source code is licensed under the MIT License — see LICENSE.

The Adno logos are excluded from this license — see public/CREDITS for details.

Credits

The Adno logos (public/logo.png and public/adno.png) were designed by Sébastien Moinet — Antimatière.