tag 3.3.0

avoid git clean -fd

.github/workflows/api_doc.yml

@@ -0,0 +1,47 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["develop"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Build docs
+        run: |
+          npm install -g jsdoc
+          npm run doc
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: './doc'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/npm-publish.yml

@@ -0,0 +1,39 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Publish to NPM
+
+on:
+  release:
+    types: [created]
+  workflow_dispatch:
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - name: "Install the rust compiler"
+        run: |
+          curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
+          source "$HOME/.cargo/env"
+          rustup default nightly
+          rustup component add rust-src --toolchain nightly-x86_64-unknown-linux-gnu
+      - name: "Install wasm-pack"
+        run: |
+          curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -y
+      - name: "Install dependencies"
+        run: |
+          npm install
+      - name: "Build Aladin Lite"
+        run: |
+          npm run build
+      - name: "Publish Aladin Lite to npm"
+        run: |
+          npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.github/workflows/test.yml

@@ -0,0 +1,39 @@
+name: Run tests
+on:
+  push:
+    branches:
+      - develop
+  pull_request:
+    branches:
+      - develop
+  # Allows to run this workflow manually from the Actions tab
+  workflow_dispatch:
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: "Checkout branch ${{ github.head_ref }}"
+        uses: actions/checkout@v3
+      - name: "Setup node"
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: "Install the rust compiler"
+        run: |
+          curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
+          source "$HOME/.cargo/env"
+          rustup default nightly
+          rustup component add rust-src --toolchain nightly-x86_64-unknown-linux-gnu
+      - name: "Install wasm-pack"
+        run: |
+          curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -y
+      - name: "Install dependencies"
+        run: |
+          npm install
+      - name: "Build Aladin Lite"
+        run: |
+          npm run build
+      - name: "Run some tests"
+        run: |
+          npm run test:build
+          npm run test:unit

CHANGELOG.md

@@ -0,0 +1,342 @@
+# Changelogs
+
+## 3.3.0
+
+* [fixed] multiple calls to setImageSurvey with the same survey object led to strange behaviour.
+* [perf] Display the first tile received instantly with no blending. Should enhance the slow reported in issue #88.
+* [fixed] A.on('select') (debugged from ipyaladin)  
+* [fixed] Simbad pointer in galactical frame, cone search of simbad/vizier cats/other cone search services in galactical frame and MOC creation from selection in galactical frame => there is now a new `frame` optional param to Aladin.pix2world. If not given, the coo returned are in the frame of the view.
+* [doc] Add doc for image survey definition
+* [deprecation] A.createImageSurvey/A.newImageSurvey are now deprecated (but still in the API). Please use `A.imageHiPS` instead by providing a valid url or CDS ID conformed to <https://aladin.cds.unistra.fr/hips/list>
+* [refac] Simplify the instanciation of an imageHiPS/ imageFITS. Add a `A.imageHiPS` method for defining a HiPS object
+* [fixed] At initialisation, giving a fov > 180 was clamped back to 180 even if we specify allsky projection (i.e. accepting fov > 180). This is now fixed.
+* [fixed] MeasurementTable now display the full cell values (no ellipsis anymore)
+* [fixed] aladin.on('select') has been implemented. Callback is triggered on a circle and rect selections for not on polygonal selection.
+* [fixed] the cooFrame UI selector is updated if the user calls `aladin.setFrame`
+* [fixed] `reticleColor` and `reticleSize` options in the public API 
+* Restore setFoVRange
+* Add CSS class for positioning the UI elements as the user wants. See the API doc aladin options for the class names to use.
+* [style] The default grid color is now `rgb(178, 50, 178)` to fit the classic Aladin color palette
+* [feat] The object of grid options `gridOptions` is now available in the public API
+* [fixed] The parameters `gridColor` and `gridOpacity`, `gridOptions.showLabels` now work as expected
+* New documentation API (W.I.P) here: <https://cds-astro.github.io/aladin-lite/>
+* New release page here: <https://aladin.cds.unistra.fr/AladinLite/doc/release/>
+* A major UI update by @bmatthieu3
+  1. Some API new classes A.box, A.button
+  2. A status bar where the user can enque messages for a specific amount of time (Aladin.addStatusBarMessage)
+* Remove of JQuery and autocompletejs dependencies by @bmatthieu3
+* Fix some performances issues, i.e. a bug when resizing the aladin lite view and which launched several parallel requestAnimationFrame by @bmatthieu3
+* Polygon and circular selection (see Aladin class API documentation for how to use it)
+* ObsCore and Datalink votable parsing and interpretation. This work is still in progress and made in the frame of the SKA radio mission by @bmatthieu3 in <https://github.com/cds-astro/aladin-lite/pull/116>
+* SODA service query window formular by @bmatthieu3 in <https://github.com/cds-astro/aladin-lite/pull/116>
+* read only catalog option by @szpetny in <https://github.com/cds-astro/aladin-lite/pull/117>
+* Small changed regarding drawing a footprint by @szpetny in <https://github.com/cds-astro/aladin-lite/pull/118>
+* Object and footprint click/hover events expose mouse coordinates by @szpetny in <https://github.com/cds-astro/aladin-lite/pull/121>
+* A proposal of a new feature - fill the polygon with a color by @szpetny in <https://github.com/cds-astro/aladin-lite/pull/122>
+* update getViewWCS to adapt to projection by @ManonMarchand in <https://github.com/cds-astro/aladin-lite/pull/119>
+* New SAMP support by @bmatthieu3 in <https://github.com/cds-astro/aladin-lite/pull/128>
+* A possibility to create Coo and Footprint objects by @szpetny in <https://github.com/cds-astro/aladin-lite/pull/130>
+* new method aladin.getFrame() that returns the name of the current coordinate system
+* `getViewWCS` now adapts to the `cooFrame` and the `projection`
+* `getFov` is no longer capped at 180°
+* bugfix `setProjection` now also updates for 'PAR' and 'SFL' projections
+
+## 3.2.0
+
+* MOC rendering perf enhanced. Possibility to draw only the perimeter of a MOC object (perimeter set to True)
+* Many fixes e.g. footprint rendering for all sky projections
+* A line/shape webgl rasterizer thanks to the use of the `lyon`crate. MOCs and grid lines are rendered that way. Therefore, it is possible to change the grid lines thickness
+* Use of vite for the project management and deployment
+
+## 3.1.0
+
+* Add message for safari users to enable WebGL2 feature and reload the page by @bmatthieu3 in <https://github.com/cds-astro/aladin-lite/pull/54>
+* Starting fits support by @bmatthieu3 in <https://github.com/cds-astro/aladin-lite/pull/70>
+* display fits images with the drag and drop by @bmatthieu3
+![Kapture 2023-03-23 at 14 34 28](https://user-images.githubusercontent.com/2772384/227264124-8e05a3d8-1565-497f-a118-39fab3c6ed83.gif)
+* support `webp` tile format by @bmatthieu3 and @tboch
+* planetary name resolver by @tboch
+* small ui changes and bug fixes by @bmatthieu3
+* add codemeta and its validatior action by @ManonMarchand in <https://github.com/cds-astro/aladin-lite/pull/66>
+
+## 3.0.0
+
+Official release of Aladin Lite v3, [as announced in CDS news](https://cds.unistra.fr/news.php?fn_mode=fullnews&fn_incl=0&fn_id=958).
+
+* Fix missing tiles issue by @tboch in <https://github.com/cds-astro/aladin-lite/pull/18>
+* Hips catalogue filtering by @tboch in <https://github.com/cds-astro/aladin-lite/pull/28>
+* Make footprint selection easier by @tboch in <https://github.com/cds-astro/aladin-lite/pull/19>
+* Bug fix: enable different colors for multiple polylines in same layer by @tboch in <https://github.com/cds-astro/aladin-lite/pull/30>
+* Method remove to delete individual source from a catalogue layer by @tboch in <https://github.com/cds-astro/aladin-lite/pull/37>
+* Stop animation by @tboch in <https://github.com/cds-astro/aladin-lite/pull/40>
+* Add message for safari users to enable WebGL2 feature and reload the page by @bmatthieu3 in <https://github.com/cds-astro/aladin-lite/pull/54>
+
+## 2.x.x
+
+### 2020-08
+
+* polyline improvements (by @imbasimba)
+
+### 2020-07
+
+* new method stopAnimation
+
+### 2020-06
+
+* new method in Catalog layer to *remove* individual *Source* objects
+
+### 2019-10
+
+* displayFITS can now take a base64 data URL as input
+
+### 2019-05-03
+
+* https URLs for Simbad pointer
+
+### 2019-04-30
+
+* empty Downloader queue when changing displayed HiPs
+
+### 2019-02-06
+
+* bug fix: MOC cells at order 0 were not displayed
+
+### 2019-01
+
+* add method getViewWCS
+
+### 2018-10-30
+
+* bug fix affichage MOC order>11
+
+### 2018-09-24
+
+* bug fix in VOTable parsing: CDATA text was always blank in <TD></TD>
+
+### 2018-09-18
+
+* drawing algorith improved: no more flickering when zooming in
+
+### 2018-09-17
+
+* improvement on mobile device: pinch zoom works, panning works better
+
+### 2018-08-30
+
+* URL generated for a VizieR cone search now take into account the option 'limit', as to limit the size of the retrieved VOTable
+
+### 2018-06-11
+
+* Bug fix for rectangular selection of sources (aladin.on('select', ...  )
+
+### 2018-05-16
+
+* Add variable View.CALLBACKS_THROTTLE_TIME_MS to control minimal time between two callbacks
+
+### 2018-05-14
+
+* HTTPS support for Logger
+
+### 2018-04-20
+
+* partially fix the all-sky view (the cells borders were visible) --> delta in method HpxImageSurvey.drawOneTile2
+* add option showAllskyRing
+* all-sky is shown at orders 3 and 4
+
+### 2018-04
+
+* Add method zoomToFoV (zoom with animation)
+* doc : ajout Tour navigator library dans Plugins
+
+### 2018-01-09
+
+* Add option simbadPointer
+
+### 2018-01-08
+
+* Add option realFullscreen
+
+### 2017-12-20
+
+* Catalog.onClick can now also be a function
+
+### 2017-12-14
+
+* add function udpateShape for Catalog and ProgressiveCatalog object
+* ajout shape 'circle' pour les catalogues
+* bug fix: les cats progressifs ne s'affichaient pas quand on était zoomé et qu'on ne bougeait pas
+
+### 2017-12-13
+
+* support Circle when generating footprints from STC-S descriptions
+
+### 2017-11-30
+
+* improve positionChanged listener: no more called when clicking on an object
+* improve object shown when clicking ; it's really the closest one now
+
+### 2017-11-24
+
+* add dragging attribute to positionChanged listener callback param
+
+### 2017-10-09
+
+* add listener for 'mouseMove' event
+
+### 2017-09-28
+
+* MOC display is way faster when panning
+* Sesame bug fix when used in a local file web page
+
+### 2017-09-27
+
+* bug fix : MOC display with norder>9 (thanks to Raffaele D'Abrusco)
+* improve MOC display speed
+
+### 2017-09-21
+
+* add listener for 'click' event
+* dimensions can be specified for getViewDataURL method
+
+### 2017-09-08
+
+* gotoObject: can now take a success callback function
+* improve AITOFF display
+
+### 2017-09-07
+
+* improvement: MOCs, catalogs and overlays have now different logos in the "stack"
+
+### 2017-09-06
+
+* fix: export PNG was not working any longer in latest version of Chrome, as top frame navigation to data URL was no longer allowed
+
+### 2017-08-28
+
+* add J2000d option for frame selection
+
+### 2017-08-25
+
+* all graphical overlays (footprints, MOCs) in addition to catalogs are now visible and can be shown/hidden from the control panel
+* add skyFraction method to MOC class
+* fix: when going full screen, background is now all white (no more HTML elements visible in the background)
+* style: layer labels in Overlay layers panel are rounded at both ends
+
+### 2017-08-24
+
+* add adaptativeDisplay option for MOCs
+* try first to load MOC through given URL, and only if it fails, try through proxy (allows to load local/not publicly accessible MOCs)
+
+### July 2017
+
+* bug fix MOC
+* add method adjustFovForObject
+* add listeners on positionChanged zoomChanged
+* fix pour Andre Moitinho pour que Sesame fonctionne en HTTPS
+
+### February 2017
+
+* shape parameter when creating a catalogue can now be a custom draw function
+* bug fix, when superimposing a HiPS over a HiPS with a different coordinate frame
+
+### January 2017
+
+* added method to query SkyBot: A.catalogFromSkyBot
+
+
+### September 2016
+
+* support of HiPS catalog (new format)
+
+### June 2016
+
+* fix astrometry offset by subdividing HEALPix cells too distorted
+* new method A.MOCFromJSON to create a MOC from the JSON serialization
+
+### March 2016
+
+* added raField and decField options when creating catalogue
+
+### December 2015
+
+* added cubehelix color map
+* added option in A.catalogFromURL to bypass proxy
+* access to Simbad and VizieR data (catalogFromVizieR and catalogFromSimbad) are now done directly, without the proxy
+
+### Novembre 2015
+
+* ajout méthodes getShareURL et getEmbedCode
+
+### Octobre 2015
+
+* ajout méthodes accès facile à Simbad, NED et VizieR
+* ajout onClick comme option de Catalog: 'showTable' ou 'showPopup'
+* nouvelle version de jquery mousewheel (ça déconnait un peu sous Mac avec la précedente)
+
+### Décembre 2014
+
+* ajout displayLabel pour afficher un label d'un overlay Catalog
+* ajout option lineWidth pour objet A.graphicOverlay
+* bug fix : la liste déroulante est mise à jour correctement quand on change de frame programmatiquement
+
+### Novembre 2014
+
+* ajout nouvelles formes pour les sources
+
+### 23 octobre 2014
+
+* bug fix méthode on('objectClicked') était appelée de manière intempestive 
+quand la souris quittait le canvas
+
+### 21 octobre 2014
+
+* ajout option shape (plus ou square) pour les catalogues
+
+### 20 octobre 2014
+
+* amélioration on objectClicked et objectHivered. On envoie une valeur nulle pour signifier qu'on quitte l'objet
+* ajout méthode pour dessiner un cercle (A.circle)
+
+### 16 septembre 2014
+
+* bug fix pour nouvelle version de Firefox. Aladin lite freezait. On ne crée plus les textures individuelles pour le allsky
+
+### 24 avril 2014
+
+New in the API:
+* getSize
+* getFov
+* world2pix
+* pix2world
+* getFovCorners
+
+### Novembre 2013
+
+* ajout catalogues progressifs
+* ajout option pour fullScreen mode au démarrage
+* ajout méthode setFOVRange
+* polyfill pour Function.prototype.bind (pour Firefox < 4)
+
+### Septembre 2013
+
+* color maps
+
+### Août 2013
+
+* ajout page exemple full-screen.html
+* ajout bouton maximize in fullscreen
+* CSS dans fichier séparé
+* image réticule "cachée"
+* options pour personnaliser le réticule
+* revamped UI for layers
+* export PNG (nécessite support CORS)
+
+### Juillet 2013
+
+* ajout boutons zoom
+* ajout sélection d'objets
+
+### Fin 2013
+
+* ajout catalogue progressif
+* ajout on select, objectClicked, objectHovered

README.md

@@ -1,14 +1,113 @@
-# Aladin Lite
+# Aladin Lite v3
+
 **An astronomical HiPS visualizer in the browser** <img src="aladin-logo.png" alt="Aladin Lite logo" width="220">
 
 Aladin Lite is a Web application which enables HiPS visualization from the browser. It is developed at [CDS, Strasbourg astronomical data center](http://cds.unistra.fr/).
 
 See [A&A 578, A114 (2015)](https://arxiv.org/abs/1505.02291) and [IVOA HiPS Recommendation](http://ivoa.net/documents/HiPS/index.html) for more details about the HiPS standard.
 
-Aladin Lite is built to be easily embeddable in any web page. It powers astronomical portals like [ESASky](https://almascience.eso.org/asax/), [ESO Science Archive portal](http://archive.eso.org/scienceportal/) and [ALMA Portal](https://almascience.eso.org/asax/).
+Aladin Lite is built to be easily embeddable in any web page. It powers astronomical portals like [ESASky](https://sky.esa.int/), [ESO Science Archive portal](http://archive.eso.org/scienceportal/) and [ALMA Portal](https://almascience.eso.org/asax/).
 
 More details on [Aladin Lite documentation page](http://aladin.u-strasbg.fr/AladinLite/doc/).
 
+[![Run tests](https://github.com/cds-astro/aladin-lite/actions/workflows/test.yml/badge.svg)](https://github.com/cds-astro/aladin-lite/actions/workflows/test.yml)
+[![API Documentation](https://img.shields.io/badge/docs-latest-blue.svg)](https://cds-astro.github.io/aladin-lite)
+
+# How to test it ?
+
+Aladin Lite v3 is out! Please play with [Aladin Lite v3 at this link](https://aladin.u-strasbg.fr/AladinLite).
+
+## Releases
+
+For integrating Aladin Lite into your personal website, please refer to this [release page](https://aladin.cds.unistra.fr/AladinLite/doc/release/).
+Always prefer using the latest version. If you want the new features without minding about the bugs coming with it, then the beta is the good way to go.
+
+## API documentation
+
+There is a new in progress API documentation at [this link](https://cds-astro.github.io/aladin-lite).
+
+## Embed it into your projects
+
+You can embed Aladin Lite it into your webpages in two ways
+
+### The vanilla way
+
+Please include [the javascript script of Aladin Lite v3](https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.js) into your project. API differences from the v2 are minimal, here is a snippet of code you can use to embed it into your webpages:
+
+```js
+<!doctype html>
+<html>
+<head>
+    <!-- Mandatory when setting up Aladin Lite v3 for a smartphones/tablet usage -->
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="text/javascript" src="https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {fov: 360, projection: "AIT", cooFrame: 'equatorial', showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: true});
+    });
+</script>
+
+</body>
+</html>
+```
+
+### Using the aladin lite NPM package
+
+First, install it with npm:
+
+```npm i aladin-lite```
+
+Second, you can use it that way:
+
+```js
+<!doctype html>
+<html>
+<head>
+    <!-- Mandatory when setting up Aladin Lite v3 for a smartphones/tablet usage -->
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+
+<script type="module">
+    import A from 'aladin-lite';
+
+    A.init.then(() => {
+        let aladin = A.aladin('#aladin-lite-div', {fov: 360, projection: "AIT", cooFrame: 'equatorial', showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: true});
+    });
+</script>
+
+</body>
+</html>
+```
+
+## Goals of v3
+
+- Rust/WebGL new core integration
+
+- Remove jQuery dep
+
+- UI dev, better support for smartphones
+
+- FITS images support
+
+- easy sharing of current « view »
+
+- support of all VOTable serializations (using votable.js?)
+
+- support of FITS tables?
+
+- creating HiPS instance from an URL
+
+- multiple mirrors handling for HiPS tile retrival
+
 ## Source code
 
 Source code is available in the ``src`` directory.
@@ -19,15 +118,6 @@ Aladin Lite is currently licensed under GPL v3.0
 
 If you think this license might prevent you from using Aladin Lite in your pages/application/portal, please open an issue or [contact us](mailto:cds-question@unistra.fr)
 
-## Building the application
-
-1. Clone the repository
-2. Go to the ``scripts``directory
-3. Open the `build.sh` file and adapt paths to ``uglifyjs`` and ``lessc``
-4. Launch ``./build.sh``
-5. Go to directory ``../distrib/latest/`` , type ``python3 -m http.server 42195`` and open your browser at [http://0.0.0.0:42195/](http://0.0.0.0:42195/) to launch the built application
-
-
 ## Contributing
 
 There are several ways to contribute to Aladin Lite:
@@ -38,3 +128,68 @@ There are several ways to contribute to Aladin Lite:
 
 - **develop new features/provide code fixing bugs**. As open development is a new thing for us, we will in a first time only take into consideration code contribution (_i.e._ Pull Requests) from our close partners.
 In any case, please get in touch before starting a major update or rewrite.
+
+### Building the application steps
+
+First you need to install the dependencies from the package.json
+Please run:
+
+```bash
+npm install
+```
+
+After that you are supposed to have the Rust toolchain installed
+to compile the core project into WebAssembly.
+Follow the steps from the Rust official website [here](https://www.rust-lang.org/learn/get-started)
+You will also need [wasm-pack](https://rustwasm.github.io/wasm-pack/), a tool helping compiling rust into a proper .wasm file.
+
+Once it's installed you will need to switch to the nightly rust version:
+
+```bash
+rustup default nightly
+```
+
+Then you can build the project:
+
+```bash
+npm run build
+```
+
+:warning: **If you are experimenting rust error compilations**:
+
+- Make sure you have your **wasm-pack** version updated. To do so:
+
+```bash
+cargo install wasm-pack --version ~0.12
+```
+
+- Make sure you are using the rust **nightly** toolchain
+- Remove your `src/core/Cargo.lock` file and `src/core/target` directory -- this ensures that you'd escape any bad compilation state:
+
+```bash
+git clean -di
+```
+ 
+-  then recompile with `npm run build`.
+
+It will generate the aladin lite compiled code into a `dist/` directory located at the root of the repository. This directory contains two javascript files. `aladin.umd.cjs` follows the UMD module export convention and it is the one you can use for your project.
+
+To run the examples, you can start a localhost server with the following command:
+
+```bash
+npm run serve
+```
+
+For just compiling the rust core, from the root location do:
+
+```bash
+cd src/core
+cargo check --features webgl2
+```
+
+and run the tests:
+
+```bash
+cd src/core
+cargo test --features webgl2
+```

assets/icons/brightness.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<g>
+	<g>
+		<path d="M256,145.455c-60.955,0-110.545,49.591-110.545,110.545S195.045,366.545,256,366.545S366.545,316.955,366.545,256
+			S316.955,145.455,256,145.455z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="238.545" width="34.909" height="110.545"/>
+	</g>
+</g>
+<g>
+	<g>
+		
+			<rect x="96.617" y="58.787" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -47.2416 114.068)" width="34.909" height="110.544"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect y="238.545" width="110.545" height="34.909"/>
+	</g>
+</g>
+<g>
+	<g>
+		
+			<rect x="58.792" y="380.491" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -247.9811 197.2111)" width="110.544" height="34.909"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="238.545" y="401.455" width="34.909" height="110.545"/>
+	</g>
+</g>
+<g>
+	<g>
+		
+			<rect x="380.474" y="342.659" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -164.829 397.9294)" width="34.909" height="110.544"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="401.455" y="238.545" width="110.545" height="34.909"/>
+	</g>
+</g>
+<g>
+	<g>
+		
+			<rect x="342.664" y="96.61" transform="matrix(0.7071 -0.7071 0.7071 0.7071 35.8969 314.7917)" width="110.544" height="34.909"/>
+	</g>
+</g>
+</svg>

assets/icons/camera.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 16C13.6569 16 15 14.6569 15 13C15 11.3431 13.6569 10 12 10C10.3431 10 9 11.3431 9 13C9 14.6569 10.3431 16 12 16Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 16.8V9.2C3 8.0799 3 7.51984 3.21799 7.09202C3.40973 6.71569 3.71569 6.40973 4.09202 6.21799C4.51984 6 5.0799 6 6.2 6H7.25464C7.37758 6 7.43905 6 7.49576 5.9935C7.79166 5.95961 8.05705 5.79559 8.21969 5.54609C8.25086 5.49827 8.27836 5.44328 8.33333 5.33333C8.44329 5.11342 8.49827 5.00346 8.56062 4.90782C8.8859 4.40882 9.41668 4.08078 10.0085 4.01299C10.1219 4 10.2448 4 10.4907 4H13.5093C13.7552 4 13.8781 4 13.9915 4.01299C14.5833 4.08078 15.1141 4.40882 15.4394 4.90782C15.5017 5.00345 15.5567 5.11345 15.6667 5.33333C15.7216 5.44329 15.7491 5.49827 15.7803 5.54609C15.943 5.79559 16.2083 5.95961 16.5042 5.9935C16.561 6 16.6224 6 16.7454 6H17.8C18.9201 6 19.4802 6 19.908 6.21799C20.2843 6.40973 20.5903 6.71569 20.782 7.09202C21 7.51984 21 8.0799 21 9.2V16.8C21 17.9201 21 18.4802 20.782 18.908C20.5903 19.2843 20.2843 19.5903 19.908 19.782C19.4802 20 18.9201 20 17.8 20H6.2C5.0799 20 4.51984 20 4.09202 19.782C3.71569 19.5903 3.40973 19.2843 3.21799 18.908C3 18.4802 3 17.9201 3 16.8Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/icons/color.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 10.5c.002 2.762-2.237 5-5 5s-5.002-2.238-5-5c-.002-2.76 2.237-5 5-5s5.002 2.24 5 5z" color="#000000" fill="#ff15a1" stroke="#373737" stroke-width=".49999682600000006"/><path d="M8 1.401a4.998 4.998 0 0 0-2.488 9.334c-.004-.078-.012-.155-.012-.234a4.998 4.998 0 0 1 7.488-4.334A4.994 4.994 0 0 0 8 1.4z" fill="#1583ff"/><path d="M10.5 5.5a4.998 4.998 0 0 0-5 5c0 .08.008.157.012.235A4.998 4.998 0 0 0 13 6.401c0-.079-.008-.156-.012-.234A4.975 4.975 0 0 0 10.5 5.5z" fill="#00cf2d"/><path d="M12.988 6.167c.004.078.012.155.012.234a4.998 4.998 0 0 1-7.489 4.334 4.994 4.994 0 0 0 4.989 4.766 4.998 4.998 0 0 0 2.488-9.334z" fill="#f8ff15"/><path d="M5.512 10.735a4.996 4.996 0 0 0 2.486 4.093 4.987 4.987 0 0 0 2.49-4.091A4.978 4.978 0 0 1 8 11.4a4.975 4.975 0 0 1-2.488-.666z" fill="#ef0000"/><path d="M7.998 6.173A4.991 4.991 0 0 0 5.5 10.5c0 .079.008.156.012.234a4.978 4.978 0 0 0 4.977.002c.003-.079.011-.157.011-.236a4.99 4.99 0 0 0-2.502-4.328z" fill="#383027"/><path d="M5.5 5.5c-.91 0-1.76.247-2.494.67a4.99 4.99 0 0 0 2.506 4.564c-.004-.077-.012-.154-.012-.233a4.991 4.991 0 0 1 2.498-4.328A4.975 4.975 0 0 0 5.5 5.5z" fill="#5100cc"/><path d="M8 1.401a4.998 4.998 0 0 0-4.994 4.77 4.998 4.998 0 1 0 4.992 8.658 4.998 4.998 0 1 0 4.99-8.662A4.994 4.994 0 0 0 8 1.4z" fill="none" stroke="#373737" stroke-width=".9999936520000001"/></svg>

assets/icons/copy.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Edit / Copy">
+<path id="Vector" d="M9 9V6.2002C9 5.08009 9 4.51962 9.21799 4.0918C9.40973 3.71547 9.71547 3.40973 10.0918 3.21799C10.5196 3 11.0801 3 12.2002 3H17.8002C18.9203 3 19.4801 3 19.9079 3.21799C20.2842 3.40973 20.5905 3.71547 20.7822 4.0918C21.0002 4.51962 21.0002 5.07967 21.0002 6.19978V11.7998C21.0002 12.9199 21.0002 13.48 20.7822 13.9078C20.5905 14.2841 20.2839 14.5905 19.9076 14.7822C19.4802 15 18.921 15 17.8031 15H15M9 9H6.2002C5.08009 9 4.51962 9 4.0918 9.21799C3.71547 9.40973 3.40973 9.71547 3.21799 10.0918C3 10.5196 3 11.0801 3 12.2002V17.8002C3 18.9203 3 19.4801 3.21799 19.9079C3.40973 20.2842 3.71547 20.5905 4.0918 20.7822C4.5192 21 5.07899 21 6.19691 21H11.8036C12.9215 21 13.4805 21 13.9079 20.7822C14.2842 20.5905 14.5905 20.2839 14.7822 19.9076C15 19.4802 15 18.921 15 17.8031V15M9 9H11.8002C12.9203 9 13.4801 9 13.9079 9.21799C14.2842 9.40973 14.5905 9.71547 14.7822 10.0918C15 10.5192 15 11.079 15 12.1969L15 15" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>

assets/icons/edit.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" ?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+
+<title/>
+
+<g id="Complete">
+
+<g id="edit">
+
+<g>
+
+<path d="M20,16v4a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V6A2,2,0,0,1,4,4H8" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+
+<polygon fill="none" points="12.5 15.8 22 6.2 17.8 2 8.3 11.5 8 16 12.5 15.8" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+
+</g>
+
+</g>
+
+</g>
+
+</svg>

assets/icons/finish.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 32 32" xml:space="preserve">
+<polyline style="fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;" points="6,28 6,5 26,5 26,19 6,19 "/>
+<rect x="22" y="5" width="4" height="4"/>
+<rect x="19" y="15" width="3" height="4"/>
+<rect x="19" y="9" width="3" height="3"/>
+<rect x="13" y="15" width="3" height="4"/>
+<rect x="13" y="9" width="3" height="3"/>
+<rect x="6" y="15" width="4" height="4"/>
+<rect x="6" y="9" width="4" height="3"/>
+<rect x="22" y="12" width="4" height="3"/>
+<rect x="16" y="12" width="3" height="3"/>
+<rect x="10" y="12" width="3" height="3"/>
+<rect x="16" y="5" width="3" height="4"/>
+<rect x="10" y="5" width="3" height="4"/>
+</svg>

assets/icons/font-size.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m22 6-3-4-3 4h2v4h-2l3 4 3-4h-2V6zM9.307 4l-6 16h2.137l1.875-5h6.363l1.875 5h2.137l-6-16H9.307zm-1.239 9L10.5 6.515 12.932 13H8.068z"/></svg>

assets/icons/function.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.1873 4.14049C11.2229 3.41714 9.84236 4.0695 9.78883 5.27389L9.71211 7H12C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9H9.62322L9.22988 17.8501C9.0996 20.7815 5.63681 22.261 3.42857 20.3287L3.34151 20.2526C2.92587 19.8889 2.88375 19.2571 3.24743 18.8415C3.61112 18.4259 4.24288 18.3837 4.65852 18.7474L4.74558 18.8236C5.69197 19.6517 7.17602 19.0176 7.23186 17.7613L7.62125 9H6C5.44772 9 5 8.55228 5 8C5 7.44772 5.44772 7 6 7H7.71014L7.7908 5.18509C7.9157 2.37483 11.1369 0.852675 13.3873 2.54049L13.6 2.69999C14.0418 3.03136 14.1314 3.65817 13.8 4.09999C13.4686 4.54182 12.8418 4.63136 12.4 4.29999L12.1873 4.14049Z" fill="#212121"/>
+<path d="M13.082 13.0462C13.3348 12.9071 13.6525 13.0103 13.7754 13.2714L14.5879 14.9979L11.2928 18.2929C10.9023 18.6834 10.9023 19.3166 11.2928 19.7071C11.6834 20.0977 12.3165 20.0977 12.707 19.7071L15.493 16.9212L16.2729 18.5786C16.9676 20.0548 18.8673 20.4808 20.1259 19.4425L20.6363 19.0214C21.0623 18.6699 21.1228 18.0397 20.7713 17.6136C20.4198 17.1876 19.7896 17.1272 19.3636 17.4787L18.8531 17.8998C18.6014 18.1074 18.2215 18.0222 18.0825 17.727L16.996 15.4182L19.707 12.7071C20.0976 12.3166 20.0976 11.6834 19.707 11.2929C19.3165 10.9024 18.6834 10.9024 18.2928 11.2929L16.0909 13.4948L15.585 12.4198C14.9708 11.1144 13.3822 10.5985 12.1182 11.2937L11.518 11.6238C11.0341 11.89 10.8576 12.498 11.1237 12.982C11.3899 13.4659 11.998 13.6424 12.4819 13.3762L13.082 13.0462Z" fill="#212121"/>
+</svg>

assets/icons/grid.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512"  xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#000000;}
+</style>
+<g>
+	<path class="st0" d="M454.111,193.473c-3.617,3.21-7.4,6.252-11.391,9.095c-9.236,6.546-14.26,10.143-17.404,12.866
+		c9.216,20.58,14.875,43.094,15.996,66.857h-66.418h-17.61h-92.449V170.384h-17.671h-70.307c2.769-6.606,5.732-12.886,8.915-18.731
+		c9.522-17.564,20.753-31.484,32.724-40.786c0.901-0.7,1.802-1.321,2.703-1.975c5.479-1.028,11.064-1.749,16.696-2.296
+		c-0.327-3.737-0.554-7.487-0.554-11.257c0-8.348,0.814-16.503,2.322-24.417c-54.439,3.977-103.533,27.693-139.848,64.022
+		c-39.939,39.919-64.702,95.252-64.689,156.184c-0.014,60.932,24.75,116.265,64.689,156.184
+		c39.912,39.939,95.245,64.703,156.184,64.689c60.939,0.014,116.266-24.75,156.184-64.689
+		c39.938-39.918,64.695-95.251,64.689-156.184C476.879,256.1,468.658,222.935,454.111,193.473z M124.813,159.941
+		c17.27-17.264,37.903-31.09,60.812-40.492c-10.918,14.133-20.213,31.404-27.76,50.936h-42.661
+		C118.287,166.794,121.463,163.284,124.813,159.941z M101.731,188.054h49.955c-8.708,28.134-13.86,60.165-14.634,94.238H70.688
+		C72.322,247.478,83.52,215.248,101.731,188.054z M94.504,382.422c-13.92-24.55-22.408-52.538-23.816-82.46h66.424
+		c0.674,29.435,4.624,57.275,11.317,82.46H94.504z M124.813,422.314c-6.886-6.887-13.2-14.334-18.938-22.221h47.833
+		c4.691,14.053,10.17,27.193,16.529,38.931c4.711,8.675,9.876,16.616,15.422,23.803
+		C162.737,453.424,142.097,439.584,124.813,422.314z M247.164,476.433c-8.835-0.414-17.496-1.475-25.958-3.07
+		c-0.908-0.654-1.808-1.274-2.71-1.968c-17.971-13.948-34.206-38.357-45.664-69.701c-0.186-0.52-0.353-1.081-0.547-1.602h74.879
+		V476.433z M247.164,382.422H166.68c-7-24.758-11.251-52.725-11.965-82.46h92.449V382.422z M247.164,282.292h-92.509
+		c0.814-34.54,6.453-66.744,15.568-94.238h76.94V282.292z M264.835,299.963h92.509c-0.701,29.729-4.985,57.702-11.985,82.46h-80.524
+		V299.963z M293.503,471.395c-0.894,0.694-1.802,1.314-2.71,1.968c-8.462,1.595-17.123,2.656-25.958,3.07v-76.34h74.898
+		c-3.964,11.044-8.488,21.28-13.506,30.509C316.705,448.165,305.474,462.079,293.503,471.395z M387.193,422.314
+		c-17.283,17.264-37.91,31.097-60.825,40.506c11.691-15.135,21.574-33.792,29.388-55.04c0.921-2.496,1.749-5.112,2.603-7.688h47.766
+		C400.385,407.98,394.073,415.427,387.193,422.314z M417.495,382.422H363.69c6.673-25.165,10.584-53.051,11.257-82.46h66.365
+		C439.904,329.885,431.409,357.872,417.495,382.422z"/>
+	<path class="st0" d="M313.762,173.741c22.468,15.949,27.434,19.746,35.341,34.833c6.253,11.945,16.39,32.885,16.39,32.885
+		c0.48,0.954,1.448,1.562,2.522,1.562c1.061,0,2.049-0.608,2.522-1.562c0,0,10.143-20.94,16.396-32.885
+		c7.894-15.088,12.866-18.884,35.341-34.833c24.63-17.47,41.086-45.911,41.086-78.402C463.359,42.688,420.665,0,368.014,0
+		c-52.658,0-95.332,42.688-95.332,95.339C272.682,127.83,289.125,156.27,313.762,173.741z M368.014,55.013
+		c22.275,0,40.332,18.058,40.332,40.326c0,22.274-18.057,40.332-40.332,40.332c-22.275,0-40.326-18.058-40.326-40.332
+		C327.689,73.071,345.739,55.013,368.014,55.013z"/>
+</g>
+</svg>

assets/icons/help.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zM7.92 9.234v.102a.5.5 0 0 0 .5.5h.997a.499.499 0 0 0 .499-.499c0-1.29.998-1.979 2.34-1.979 1.308 0 2.168.689 2.168 1.67 0 .928-.482 1.359-1.686 1.91l-.344.154C11.379 11.54 11 12.21 11 13.381v.119a.5.5 0 0 0 .5.5h.997a.499.499 0 0 0 .499-.499c0-.516.138-.723.55-.912l.345-.155c1.445-.654 2.529-1.514 2.529-3.39v-.103c0-1.978-1.72-3.441-4.164-3.441-2.478 0-4.336 1.428-4.336 3.734zm2.58 7.757c0 .867.659 1.509 1.491 1.509.85 0 1.509-.642 1.509-1.509 0-.867-.659-1.491-1.509-1.491-.832 0-1.491.624-1.491 1.491z" fill="#000000"/></svg>

assets/icons/hide.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" >
+
+<path d="M0 0h48v48H0z" fill="none"/>
+<g id="Shopicon">
+	<path d="M11.957,33.214L7.171,38L10,40.828l5.305-5.305C17.867,36.992,20.788,38,24,38c12,0,20-14,20-14s-2.953-5.159-7.957-9.214
+		L40.829,10L38,7.172l-5.305,5.305C30.133,11.008,27.212,10,24,10C12,10,4,24,4,24S6.953,29.159,11.957,33.214z M16,24
+		c0-4.418,3.582-8,8-8c1.483,0,2.867,0.411,4.058,1.114l-3.035,3.035C24.694,20.062,24.356,20,24,20c-2.206,0-4,1.794-4,4
+		c0,0.356,0.062,0.694,0.149,1.023l-3.035,3.035C16.411,26.867,16,25.483,16,24z M32,24c0,4.418-3.582,8-8,8
+		c-1.483,0-2.867-0.411-4.058-1.114l3.035-3.035C23.306,27.938,23.644,28,24,28c2.206,0,4-1.794,4-4
+		c0-0.356-0.062-0.694-0.149-1.023l3.035-3.035C31.589,21.133,32,22.517,32,24z"/>

assets/icons/info.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg">
+    <path d="M960 0c530.193 0 960 429.807 960 960s-429.807 960-960 960S0 1490.193 0 960 429.807 0 960 0Zm0 101.053c-474.384 0-858.947 384.563-858.947 858.947S485.616 1818.947 960 1818.947 1818.947 1434.384 1818.947 960 1434.384 101.053 960 101.053Zm-42.074 626.795c-85.075 39.632-157.432 107.975-229.844 207.898-10.327 14.249-10.744 22.907-.135 30.565 7.458 5.384 11.792 3.662 22.656-7.928 1.453-1.562 1.453-1.562 2.94-3.174 9.391-10.17 16.956-18.8 33.115-37.565 53.392-62.005 79.472-87.526 120.003-110.867 35.075-20.198 65.9 9.485 60.03 47.471-1.647 10.664-4.483 18.534-11.791 35.432-2.907 6.722-4.133 9.646-5.496 13.23-13.173 34.63-24.269 63.518-47.519 123.85l-1.112 2.886c-7.03 18.242-7.03 18.242-14.053 36.48-30.45 79.138-48.927 127.666-67.991 178.988l-1.118 3.008a10180.575 10180.575 0 0 0-10.189 27.469c-21.844 59.238-34.337 97.729-43.838 138.668-1.484 6.37-1.484 6.37-2.988 12.845-5.353 23.158-8.218 38.081-9.82 53.42-2.77 26.522-.543 48.24 7.792 66.493 9.432 20.655 29.697 35.43 52.819 38.786 38.518 5.592 75.683 5.194 107.515-2.048 17.914-4.073 35.638-9.405 53.03-15.942 50.352-18.932 98.861-48.472 145.846-87.52 41.11-34.26 80.008-76 120.788-127.872 3.555-4.492 3.555-4.492 7.098-8.976 12.318-15.707 18.352-25.908 20.605-36.683 2.45-11.698-7.439-23.554-15.343-19.587-3.907 1.96-7.993 6.018-14.22 13.872-4.454 5.715-6.875 8.77-9.298 11.514-9.671 10.95-19.883 22.157-30.947 33.998-18.241 19.513-36.775 38.608-63.656 65.789-13.69 13.844-30.908 25.947-49.42 35.046-29.63 14.559-56.358-3.792-53.148-36.635 2.118-21.681 7.37-44.096 15.224-65.767 17.156-47.367 31.183-85.659 62.216-170.048 13.459-36.6 19.27-52.41 26.528-72.201 21.518-58.652 38.696-105.868 55.04-151.425 20.19-56.275 31.596-98.224 36.877-141.543 3.987-32.673-5.103-63.922-25.834-85.405-22.986-23.816-55.68-34.787-96.399-34.305-45.053.535-97.607 15.256-145.963 37.783Zm308.381-388.422c-80.963-31.5-178.114 22.616-194.382 108.33-11.795 62.124 11.412 115.76 58.78 138.225 93.898 44.531 206.587-26.823 206.592-130.826.005-57.855-24.705-97.718-70.99-115.729Z" fill-rule="evenodd"/>
+</svg>

assets/icons/jupyter.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title>file_type_jupyter</title><path d="M26.233,3.588A1.69,1.69,0,1,1,24.473,2a1.67,1.67,0,0,1,1.76,1.585Z" style="fill:#767677"/><path d="M16.375,23.111c-4.487,0-8.43-1.61-10.469-3.988a11.162,11.162,0,0,0,20.938,0C24.81,21.5,20.882,23.111,16.375,23.111Z" style="fill:#f37726"/><path d="M16.375,7.648c4.487,0,8.43,1.61,10.469,3.988a11.162,11.162,0,0,0-20.938,0C7.945,9.253,11.869,7.648,16.375,7.648Z" style="fill:#f37726"/><path d="M10.2,27.739a2.109,2.109,0,1,1-.2-.8,2.129,2.129,0,0,1,.2.8Z" style="fill:#9e9e9e"/><path d="M6.416,7.106A1.226,1.226,0,1,1,7.608,5.83,1.241,1.241,0,0,1,6.416,7.106Z" style="fill:#616262"/></svg>

assets/icons/link.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.197 3.35462C16.8703 1.67483 19.4476 1.53865 20.9536 3.05046C22.4596 4.56228 22.3239 7.14956 20.6506 8.82935L18.2268 11.2626M10.0464 14C8.54044 12.4882 8.67609 9.90087 10.3494 8.22108L12.5 6.06212" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M13.9536 10C15.4596 11.5118 15.3239 14.0991 13.6506 15.7789L11.2268 18.2121L8.80299 20.6454C7.12969 22.3252 4.55237 22.4613 3.0464 20.9495C1.54043 19.4377 1.67609 16.8504 3.34939 15.1706L5.77323 12.7373" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

assets/icons/loading.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+  <path d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"/>
+</svg>

assets/icons/map.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 6H12.01M9 20L3 17V4L5 5M9 20L15 17M9 20V14M15 17L21 20V7L19 6M15 17V14M15 6.2C15 7.96731 13.5 9.4 12 11C10.5 9.4 9 7.96731 9 6.2C9 4.43269 10.3431 3 12 3C13.6569 3 15 4.43269 15 6.2Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/icons/maximize.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+
+<rect x="0" fill="none" width="20" height="20"/>
+
+<g>

assets/icons/minus.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 12L18 12" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/icons/move.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 330 330" xml:space="preserve">
+<path id="XMLID_225_" d="M326.602,174.506c0.139-0.17,0.26-0.349,0.392-0.524c0.162-0.216,0.33-0.428,0.48-0.654
+	c0.144-0.213,0.267-0.435,0.397-0.654c0.12-0.2,0.246-0.396,0.356-0.603c0.12-0.225,0.223-0.457,0.331-0.687
+	c0.101-0.214,0.207-0.424,0.299-0.643c0.093-0.225,0.168-0.455,0.25-0.683c0.083-0.233,0.173-0.463,0.245-0.702
+	c0.069-0.231,0.121-0.465,0.18-0.699c0.061-0.241,0.128-0.479,0.177-0.725c0.054-0.272,0.086-0.547,0.125-0.822
+	c0.03-0.21,0.07-0.416,0.091-0.629c0.098-0.986,0.098-1.979,0-2.965c-0.021-0.213-0.061-0.419-0.091-0.629
+	c-0.039-0.274-0.071-0.55-0.125-0.822c-0.049-0.246-0.116-0.483-0.177-0.725c-0.059-0.233-0.11-0.468-0.18-0.699
+	c-0.072-0.238-0.162-0.468-0.245-0.702c-0.082-0.228-0.157-0.458-0.25-0.683c-0.092-0.219-0.198-0.429-0.299-0.643
+	c-0.108-0.23-0.211-0.461-0.331-0.687c-0.11-0.206-0.236-0.403-0.356-0.603c-0.131-0.219-0.254-0.441-0.397-0.654
+	c-0.15-0.226-0.318-0.438-0.48-0.654c-0.132-0.175-0.253-0.354-0.392-0.524c-0.315-0.384-0.646-0.753-0.998-1.103l-54.995-54.997
+	c-5.856-5.857-15.354-5.858-21.213-0.001c-5.858,5.858-5.858,15.355,0,21.213L278.788,150H180V51.213l29.394,29.393
+	c2.929,2.929,6.768,4.393,10.606,4.393s7.678-1.464,10.606-4.393c5.858-5.858,5.858-15.355,0-21.213L175.609,4.396
+	c-0.347-0.346-0.711-0.675-1.089-0.987c-0.1-0.082-0.207-0.151-0.308-0.23c-0.285-0.223-0.571-0.444-0.872-0.646
+	c-0.094-0.063-0.194-0.115-0.289-0.175c-0.318-0.203-0.639-0.403-0.973-0.582c-0.07-0.038-0.145-0.067-0.216-0.104
+	c-0.363-0.188-0.731-0.368-1.112-0.526c-0.05-0.02-0.103-0.036-0.153-0.056c-0.401-0.162-0.809-0.311-1.226-0.439
+	c-0.056-0.017-0.112-0.026-0.167-0.043c-0.411-0.12-0.827-0.23-1.252-0.315c-0.128-0.025-0.259-0.037-0.388-0.059
+	c-0.354-0.061-0.706-0.124-1.067-0.159C166.002,0.026,165.503,0,165,0c-0.502,0-1.002,0.026-1.497,0.076
+	c-0.368,0.037-0.727,0.1-1.087,0.162c-0.122,0.021-0.247,0.032-0.368,0.056c-0.433,0.086-0.854,0.197-1.272,0.32
+	c-0.049,0.014-0.098,0.023-0.146,0.038c-0.425,0.129-0.84,0.282-1.249,0.447c-0.042,0.018-0.087,0.03-0.129,0.047
+	c-0.388,0.161-0.764,0.344-1.135,0.536c-0.063,0.033-0.131,0.06-0.194,0.093c-0.341,0.184-0.669,0.387-0.994,0.595
+	c-0.088,0.056-0.18,0.105-0.268,0.163c-0.31,0.207-0.605,0.435-0.898,0.665c-0.093,0.072-0.19,0.136-0.282,0.211
+	c-0.379,0.312-0.743,0.641-1.09,0.987L99.396,59.393c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0
+	L150,51.214V150H51.213l29.394-29.394c5.858-5.858,5.858-15.355,0-21.213c-5.857-5.858-15.355-5.858-21.213,0L4.397,154.391
+	c-0.351,0.35-0.683,0.719-0.998,1.103c-0.139,0.17-0.261,0.349-0.392,0.524c-0.162,0.216-0.33,0.428-0.48,0.654
+	c-0.144,0.213-0.267,0.435-0.398,0.654c-0.12,0.2-0.246,0.396-0.356,0.603c-0.121,0.225-0.223,0.457-0.331,0.687
+	c-0.101,0.214-0.207,0.424-0.299,0.643c-0.093,0.225-0.168,0.455-0.25,0.683c-0.083,0.233-0.173,0.463-0.245,0.702
+	c-0.069,0.231-0.121,0.465-0.18,0.699c-0.061,0.241-0.128,0.479-0.177,0.725c-0.054,0.272-0.087,0.547-0.125,0.822
+	c-0.03,0.21-0.07,0.416-0.091,0.629c-0.098,0.986-0.098,1.979,0,2.965c0.021,0.213,0.061,0.419,0.091,0.629
+	c0.038,0.274,0.071,0.55,0.125,0.822c0.049,0.246,0.116,0.483,0.177,0.725c0.059,0.233,0.11,0.468,0.18,0.699
+	c0.072,0.238,0.162,0.468,0.245,0.702c0.082,0.228,0.157,0.458,0.25,0.683c0.092,0.219,0.198,0.429,0.299,0.643
+	c0.108,0.23,0.21,0.461,0.331,0.687c0.11,0.206,0.236,0.403,0.356,0.603c0.131,0.219,0.254,0.441,0.398,0.654
+	c0.15,0.226,0.318,0.438,0.48,0.654c0.131,0.175,0.253,0.354,0.392,0.524c0.316,0.384,0.647,0.753,0.998,1.103l54.997,54.997
+	C62.322,233.536,66.161,235,70,235s7.678-1.464,10.606-4.394c5.858-5.858,5.858-15.355,0-21.213L51.213,180H150v98.786
+	l-29.392-29.392c-5.857-5.858-15.355-5.857-21.213,0c-5.858,5.858-5.858,15.355,0,21.213l54.995,54.997
+	c0.347,0.347,0.711,0.676,1.09,0.987c0.092,0.075,0.189,0.138,0.282,0.21c0.293,0.23,0.588,0.458,0.898,0.665
+	c0.088,0.058,0.18,0.106,0.268,0.163c0.325,0.208,0.653,0.412,0.994,0.595c0.063,0.034,0.131,0.06,0.194,0.093
+	c0.371,0.192,0.747,0.375,1.135,0.536c0.042,0.018,0.087,0.03,0.129,0.047c0.409,0.165,0.824,0.318,1.249,0.447
+	c0.049,0.015,0.098,0.023,0.146,0.038c0.418,0.123,0.84,0.233,1.272,0.32c0.121,0.024,0.246,0.035,0.368,0.056
+	c0.359,0.063,0.719,0.125,1.087,0.162c0.495,0.05,0.995,0.076,1.497,0.076s1.002-0.026,1.497-0.076
+	c0.368-0.037,0.727-0.1,1.087-0.162c0.122-0.022,0.247-0.032,0.368-0.056c0.433-0.086,0.854-0.197,1.272-0.32
+	c0.049-0.014,0.098-0.023,0.146-0.038c0.425-0.129,0.84-0.282,1.249-0.447c0.042-0.018,0.087-0.03,0.129-0.047
+	c0.388-0.161,0.764-0.344,1.135-0.536c0.063-0.033,0.131-0.06,0.194-0.093c0.341-0.184,0.669-0.387,0.994-0.595
+	c0.088-0.056,0.18-0.104,0.268-0.163c0.31-0.207,0.605-0.435,0.898-0.665c0.093-0.072,0.19-0.136,0.282-0.21
+	c0.379-0.312,0.743-0.641,1.09-0.987l54.997-54.997c5.858-5.857,5.858-15.355,0-21.213c-5.856-5.857-15.354-5.858-21.213,0
+	L180,278.787V180h98.788l-29.393,29.394c-5.858,5.858-5.858,15.355,0,21.213c2.929,2.929,6.768,4.393,10.607,4.393
+	c3.839,0,7.678-1.465,10.606-4.394l54.995-54.997C325.955,175.259,326.286,174.89,326.602,174.506z"/>
+</svg>

assets/icons/next.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="-8.5 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<title>next</title>
+<path d="M0 24.781v-17.594l15.281 8.813z"></path>
+</svg>

assets/icons/opacity.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 32 32" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
+	.st2{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:6,6;}
+	.st3{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4,4;}
+	.st4{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;}
+	.st5{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-dasharray:3.1081,3.1081;}
+	
+		.st6{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:4,3;}
+</style>
+<circle class="st0" cx="13" cy="13" r="10"/>
+<path class="st0" d="M22.4,9.6c1.3,0.5,2.6,1.3,3.7,2.3c3.9,3.9,3.9,10.2,0,14.1s-10.2,3.9-14.1,0"/>
+<path class="st6" d="M9.6,22.4c-1.3-3.5-0.5-7.6,2.3-10.5c2.8-2.8,6.9-3.6,10.5-2.3"/>
+</svg>

assets/icons/pixel_histogram.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6C12 5.44772 11.5523 5 11 5C10.4477 5 10 5.44772 10 6V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V6ZM9 9C9 8.44772 8.55228 8 8 8C7.44772 8 7 8.44772 7 9V16C7 16.5523 7.44772 17 8 17C8.55228 17 9 16.5523 9 16V9ZM15 9C15 8.44772 14.5523 8 14 8C13.4477 8 13 8.44772 13 9V16C13 16.5523 13.4477 17 14 17C14.5523 17 15 16.5523 15 16V9ZM18 13C18 12.4477 17.5523 12 17 12C16.4477 12 16 12.4477 16 13V16C16 16.5523 16.4477 17 17 17C17.5523 17 18 16.5523 18 16V13ZM6 15C6 14.4477 5.55228 14 5 14C4.44772 14 4 14.4477 4 15V16C4 16.5523 4.44772 17 5 17C5.55228 17 6 16.5523 6 16V15ZM21 15C21 14.4477 20.5523 14 20 14C19.4477 14 19 14.4477 19 15V16C19 16.5523 19.4477 17 20 17C20.5523 17 21 16.5523 21 16V15ZM4 18C3.44772 18 3 18.4477 3 19C3 19.5523 3.44772 20 4 20H21C21.5523 20 22 19.5523 22 19C22 18.4477 21.5523 18 21 18H4Z" fill="#000000"/>
+</svg>

assets/icons/plus.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 12H18M12 6V18" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/icons/projection.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 32 32" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
+	.st2{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:6,6;}
+	.st3{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4,4;}
+	.st4{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;}
+	.st5{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-dasharray:3.1081,3.1081;}
+	
+		.st6{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:4,3;}
+</style>
+<rect x="4" y="4" class="st0" width="24" height="24"/>
+<path class="st0" d="M4,25l4.9-4c3.1-2.5,7.3-3,11-1.4l0,0c2,0.9,4.2,1.1,6.4,0.7L28,20"/>
+<path class="st0" d="M4,13l7-3.2c2.6-1.2,5.5-1.3,8.1-0.3l2.1,0.8c1.2,0.4,2.5,0.7,3.7,0.7H28"/>
+<path class="st0" d="M24,4l-0.8,1.2C18.7,11.9,17.9,20.5,21,28l0,0"/>
+<path class="st0" d="M14,4L14,4c-4.8,7.3-4.8,16.7,0,24l0,0"/>
+</svg>

assets/icons/remove.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 -0.5 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    
+    <title>delete [#1487]</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+
+</defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Dribbble-Light-Preview" transform="translate(-179.000000, -360.000000)" fill="#000000">
+            <g id="icons" transform="translate(56.000000, 160.000000)">
+                <path d="M130.35,216 L132.45,216 L132.45,208 L130.35,208 L130.35,216 Z M134.55,216 L136.65,216 L136.65,208 L134.55,208 L134.55,216 Z M128.25,218 L138.75,218 L138.75,206 L128.25,206 L128.25,218 Z M130.35,204 L136.65,204 L136.65,202 L130.35,202 L130.35,204 Z M138.75,204 L138.75,200 L128.25,200 L128.25,204 L123,204 L123,206 L126.15,206 L126.15,220 L140.85,220 L140.85,206 L144,206 L144,204 L138.75,204 Z" id="delete-[#1487]">
+
+</path>
+            </g>
+        </g>
+    </g>
+</svg>

assets/icons/restore.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+
+<rect x="0" fill="none" width="20" height="20"/>
+
+<g>

assets/icons/reticle.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg id="reticle" viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 0 7 L 5 7 L 5 9 L 0 9 L 0 7 Z" fill-rule="evenodd"/>
+  <path d="M 11 7 L 16 7 L 16 9 L 11 9 L 11 7 Z" fill-rule="evenodd"/>
+  <path d="M 7 11 L 9 11 L 9 16 L 7 16 L 7 11 Z" fill-rule="evenodd" />
+  <path d="M 7 0 L 9 0 L 9 5 L 7 5 L 7 0 Z" fill-rule="evenodd"/>
+</svg>

assets/icons/search-white.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/icons/search.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/icons/select.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 121.65 122.88" style="enable-background:new 0 0 121.65 122.88" xml:space="preserve"><g><path d="M1.96,0.28L1.91,0.3L1.88,0.32c-0.07,0.03-0.13,0.06-0.19,0.1L1.67,0.43L1.61,0.46L1.58,0.48C1.55,0.5,1.52,0.52,1.49,0.54 l0,0L1.45,0.57L1.44,0.57L1.41,0.59L1.38,0.61L1.34,0.64L1.29,0.68l-0.01,0C0.73,1.11,0.33,1.69,0.14,2.36 C0.03,2.7-0.01,3.07,0,3.43v2.05c0.02,2.55,2.78,4.12,4.98,2.8c0.67-0.41,1.15-1.02,1.4-1.73h3.46c2.55-0.02,4.12-2.78,2.8-4.98 C12.03,0.59,11,0.01,9.84,0H3.42C2.94-0.02,2.44,0.07,1.96,0.28L1.96,0.28z M101.11,122.86c0.09,0.02,0.19,0.02,0.29,0 c0.03-0.02,0.07-0.04,0.1-0.05l9.76-5.63c0.09-0.06,0.15-0.16,0.18-0.26c0.02-0.08,0.02-0.16-0.01-0.21l-10.7-18.65l0,0 c-0.09-0.16-0.15-0.33-0.19-0.51c-0.19-0.94,0.41-1.85,1.35-2.04l15.7-3.25c0.02-0.01,0.04-0.01,0.06-0.01 c1.35-0.28,2.5-0.76,3.26-1.36c0.37-0.29,0.62-0.59,0.72-0.87c0.06-0.18,0.03-0.39-0.09-0.63c-0.22-0.41-0.66-0.87-1.39-1.36 L66.79,51.49l4.95,64.46c0.07,0.88,0.24,1.49,0.48,1.88c0.14,0.23,0.31,0.35,0.5,0.39c0.29,0.06,0.67-0.01,1.11-0.18 c0.9-0.36,1.88-1.12,2.81-2.15l10.71-12.02l0,0c0.12-0.13,0.26-0.25,0.43-0.35c0.83-0.48,1.89-0.2,2.37,0.63l10.8,18.59 C100.97,122.8,101.03,122.84,101.11,122.86L101.11,122.86L101.11,122.86z M1.61,0.46C1.57,0.49,1.53,0.51,1.49,0.54L1.61,0.46 L1.61,0.46z M6.56,18.59c-0.02-2.55-2.78-4.12-4.98-2.8C0.59,16.4,0.01,17.43,0,18.59v6.55c0.02,2.55,2.78,4.12,4.98,2.8 c0.99-0.61,1.57-1.64,1.58-2.8V18.59L6.56,18.59z M6.56,38.26c-0.02-2.55-2.78-4.12-4.98-2.8C0.59,36.06,0.01,37.1,0,38.26v6.55 c0.02,2.55,2.78,4.12,4.98,2.8c0.99-0.61,1.57-1.64,1.58-2.8V38.26L6.56,38.26z M6.56,57.92c-0.02-2.55-2.78-4.12-4.98-2.8 c-0.99,0.61-1.57,1.64-1.58,2.8v6.56c0.02,2.55,2.78,4.12,4.98,2.8c0.99-0.61,1.57-1.64,1.58-2.8V57.92L6.56,57.92z M6.56,77.59 c-0.02-2.55-2.78-4.12-4.98-2.8c-0.99,0.61-1.57,1.64-1.58,2.8v6.55c0.02,2.55,2.78,4.12,4.98,2.8c0.99-0.61,1.57-1.64,1.58-2.8 V77.59L6.56,77.59z M6.56,97.25c-0.02-2.55-2.78-4.12-4.98-2.8c-0.99,0.61-1.57,1.64-1.58,2.8v6.56c0.02,2.55,2.78,4.12,4.98,2.8 c0.99-0.61,1.57-1.64,1.58-2.8V97.25L6.56,97.25z M13.13,103.79c-2.55,0.02-4.12,2.78-2.8,4.98c0.61,0.99,1.64,1.57,2.8,1.58h6.55 c2.55-0.02,4.12-2.78,2.8-4.98c-0.61-0.99-1.64-1.57-2.8-1.58H13.13L13.13,103.79z M32.79,103.79c-2.55,0.02-4.12,2.78-2.8,4.98 c0.61,0.99,1.64,1.57,2.8,1.58h6.56c2.55-0.02,4.12-2.78,2.8-4.98c-0.61-0.99-1.64-1.57-2.8-1.58H32.79L32.79,103.79z M52.46,103.79c-2.55,0.02-4.12,2.78-2.8,4.98c0.61,0.99,1.64,1.57,2.8,1.58h6.56c2.55-0.02,4.12-2.78,2.8-4.98 c-0.61-0.99-1.64-1.57-2.8-1.58H52.46L52.46,103.79z M103.79,63.36c0.02,2.55,2.78,4.12,4.98,2.8c0.99-0.61,1.57-1.64,1.58-2.8 v-6.56c-0.02-2.55-2.78-4.12-4.98-2.8c-0.99,0.61-1.57,1.64-1.58,2.8V63.36L103.79,63.36z M103.79,43.7 c0.02,2.55,2.78,4.12,4.98,2.8c0.99-0.61,1.57-1.64,1.58-2.8v-6.56c-0.02-2.55-2.78-4.12-4.98-2.8c-0.99,0.61-1.57,1.64-1.58,2.8 V43.7L103.79,43.7z M103.79,24.03c0.02,2.55,2.78,4.12,4.98,2.8c0.99-0.61,1.57-1.64,1.58-2.8v-6.55c-0.02-2.55-2.78-4.12-4.98-2.8 c-0.99,0.61-1.57,1.64-1.58,2.8V24.03L103.79,24.03z M104.63,6.56c0.99,1.1,2.69,1.49,4.14,0.61c0.99-0.61,1.57-1.64,1.58-2.8V3.42 c0.03-0.61-0.12-1.25-0.47-1.84c-0.61-0.99-1.64-1.57-2.8-1.58h-5.47c-2.55,0.02-4.12,2.78-2.8,4.98c0.61,0.99,1.64,1.57,2.8,1.58 H104.63L104.63,6.56z M88.5,6.56c2.55-0.02,4.12-2.78,2.8-4.98C90.69,0.59,89.66,0.01,88.5,0h-6.55c-2.55,0.02-4.12,2.78-2.8,4.98 c0.61,0.99,1.64,1.57,2.8,1.58H88.5L88.5,6.56z M68.83,6.56c2.55-0.02,4.12-2.78,2.8-4.98c-0.61-0.99-1.64-1.57-2.8-1.58h-6.56 c-2.55,0.02-4.12,2.78-2.8,4.98c0.61,0.99,1.64,1.57,2.8,1.58H68.83L68.83,6.56z M49.17,6.56c2.55-0.02,4.12-2.78,2.8-4.98 c-0.61-0.99-1.64-1.57-2.8-1.58h-6.56c-2.55,0.02-4.12,2.78-2.8,4.98c0.61,0.99,1.64,1.57,2.8,1.58H49.17L49.17,6.56z M29.5,6.56 c2.55-0.02,4.12-2.78,2.8-4.98C31.7,0.59,30.66,0.01,29.5,0h-6.55c-2.55,0.02-4.12,2.78-2.8,4.98c0.61,0.99,1.64,1.57,2.8,1.58 H29.5L29.5,6.56z"/></g></svg>

assets/icons/settings.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1703.534 960c0-41.788-3.84-84.48-11.633-127.172l210.184-182.174-199.454-340.856-265.186 88.433c-66.974-55.567-143.323-99.389-223.85-128.415L1158.932 0h-397.78L706.49 269.704c-81.43 29.138-156.423 72.282-223.962 128.414l-265.073-88.32L18 650.654l210.184 182.174C220.39 875.52 216.55 918.212 216.55 960s3.84 84.48 11.633 127.172L18 1269.346l199.454 340.856 265.186-88.433c66.974 55.567 143.322 99.389 223.85 128.415L761.152 1920h397.779l54.663-269.704c81.318-29.138 156.424-72.282 223.963-128.414l265.073 88.433 199.454-340.856-210.184-182.174c7.793-42.805 11.633-85.497 11.633-127.285m-743.492 395.294c-217.976 0-395.294-177.318-395.294-395.294 0-217.976 177.318-395.294 395.294-395.294 217.977 0 395.294 177.318 395.294 395.294 0 217.976-177.317 395.294-395.294 395.294" fill-rule="evenodd"/>
+</svg>

assets/icons/share.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000"  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="800px"
+	 height="800px" viewBox="0 0 512 512" xml:space="preserve">
+
+<g id="7935ec95c421cee6d86eb22ecd12b5bb">
+
+<path style="display: inline;" d="M505.705,421.851c0,49.528-40.146,89.649-89.637,89.649c-49.527,0-89.662-40.121-89.662-89.649
+		c0-1.622,0.148-3.206,0.236-4.815l-177.464-90.474c-14.883,11.028-33.272,17.641-53.221,17.641
+		c-49.528,0-89.662-40.134-89.662-89.649s40.134-89.649,89.662-89.649c22.169,0,42.429,8.097,58.086,21.433l172.774-88.09
+		c-0.25-2.682-0.412-5.364-0.412-8.097c0-49.503,40.135-89.649,89.662-89.649c49.49,0,89.637,40.146,89.637,89.649
+		c0,49.516-40.146,89.65-89.637,89.65c-22.082,0-42.242-8.009-57.861-21.221l-172.999,88.215c0.224,2.558,0.387,5.14,0.387,7.76
+		c0,4.653-0.474,9.182-1.148,13.648l171.389,87.379c15.92-14.472,37.004-23.379,60.232-23.379
+		C465.559,332.201,505.705,372.348,505.705,421.851z">
+
+</path>
+
+</g>
+
+</svg>

assets/icons/show.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" >
+
+<path d="M0 0h48v48H0z" fill="none"/>
+<g id="Shopicon">
+	<circle cx="24" cy="24" r="4"/>
+	<path d="M24,38c12,0,20-14,20-14s-8-14-20-14S4,24,4,24S12,38,24,38z M24,16c4.418,0,8,3.582,8,8s-3.582,8-8,8s-8-3.582-8-8
+		S19.582,16,24,16z"/>

assets/icons/stack.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.1546 3.36026C12.4835 3.00999 11.5741 3.00459 10.8976 3.35396C8.30466 4.6931 5.95279 6.22853 3.89182 7.93154C3.57311 8.19489 3.34693 8.57758 3.35079 9.02802C3.35463 9.47662 3.58541 9.85419 3.90218 10.1132C5.94604 11.7844 8.29985 13.3212 10.8453 14.6497C11.5165 15 12.4258 15.0054 13.1023 14.656C15.6953 13.3169 18.0472 11.7815 20.1081 10.0785C20.4268 9.8151 20.653 9.43242 20.6492 8.98197C20.6453 8.53338 20.4145 8.1558 20.0978 7.89679C18.0539 6.22562 15.7001 4.6888 13.1546 3.36026ZM11.5859 4.68671C11.8256 4.56294 12.2193 4.56411 12.4606 4.69004C14.8899 5.95796 17.1283 7.41666 19.0675 8.99223C17.1167 10.5932 14.885 12.0471 12.414 13.3233C12.1744 13.4471 11.7807 13.4459 11.5394 13.32C9.11004 12.052 6.87163 10.5933 4.9324 9.01777C6.88321 7.41684 9.11496 5.96285 11.5859 4.68671Z" fill="#000000"/>
+<path d="M21.197 12.698C21.4164 13.0494 21.3094 13.512 20.958 13.7314L14.8508 17.5443C14.022 18.0617 12.9938 18.3009 11.9999 18.301C11.006 18.301 9.9777 18.0619 9.14884 17.5446L3.10851 13.7749C2.75711 13.5556 2.65003 13.093 2.86934 12.7416C3.08864 12.3902 3.55128 12.2831 3.90268 12.5024L9.94301 16.2721C10.4872 16.6117 11.2264 16.801 11.9998 16.801C12.7732 16.8009 13.5124 16.6116 14.0564 16.2719L20.1636 12.459C20.515 12.2397 20.9776 12.3467 21.197 12.698Z" fill="#000000"/>
+<path d="M21.197 16.4527C21.4164 16.804 21.3094 17.2667 20.9581 17.4861L15.6692 20.7889C14.6115 21.4494 13.2886 21.7602 11.9998 21.7602C10.7111 21.7603 9.38808 21.4497 8.3303 20.7894L3.10843 17.5296C2.75706 17.3102 2.65004 16.8476 2.86938 16.4962C3.08873 16.1448 3.55139 16.0378 3.90276 16.2572L9.12462 19.517C9.89764 19.9995 10.9316 20.2603 11.9998 20.2602C13.068 20.2602 14.1018 19.9993 14.8746 19.5167L20.1635 16.2138C20.5149 15.9944 20.9776 16.1013 21.197 16.4527Z" fill="#000000"/>
+</svg>

assets/icons/target.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="m27.95 15a12 12 0 0 0 -10.95-10.95v-4.05h-2v4.05a12 12 0 0 0 -10.95 10.95h-4.05v2h4.05a12 12 0 0 0 10.95 10.95v4.05h2v-4.05a12 12 0 0 0 10.95-10.95h4.05v-2zm-2 2a10 10 0 0 1 -8.95 8.95v-3.95h-2v3.95a10 10 0 0 1 -8.95-8.95h3.95v-2h-3.95a10 10 0 0 1 8.95-8.95v3.95h2v-3.95a10 10 0 0 1 8.95 8.95h-3.95v2z"/><circle cx="16" cy="16" r="2"/></svg>

assets/icons/telescope.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 122.88 122.88" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  style="enable-background:new 0 0 122.88 122.88" xml:space="preserve">
+
+<g>
+
+<path d="M5.49,79.09l37.86,37.86C66.37,99.1,36.69,54.35,5.49,79.09L5.49,79.09z M42.39,62.21l18.29,18.29 c1.18,1.18,3.12,1.18,4.3,0l24.2-24.2c6.21-6.21,6.21-16.38,0-22.59v0c-6.21-6.21-16.38-6.21-22.59,0l-24.2,24.2 C41.2,59.09,41.2,61.02,42.39,62.21L42.39,62.21z M24.5,104.83L20.33,109c-1.48,1.48-3.89,1.48-5.38,0c-1.48-1.49-1.48-3.89,0-5.38 l4.17-4.17l-17-17l0.01-0.01c-0.13-0.13-0.25-0.26-0.36-0.4C0.15,80,0.49,77.01,2.54,75.38c13.15-10.43,26.24-10.1,36.28-4.46 c1.85,1.04,3.59,2.26,5.2,3.64l1.99-1.99l-6.99-6.99c-1.52-1.52-2.28-3.52-2.28-5.51c0-1.99,0.76-3.99,2.28-5.51l5.92-5.92 l-5.11-5.11l-3.76,3.76h0c-1.22,1.22-2.83,1.84-4.44,1.84c-1.59,0-3.19-0.61-4.42-1.84l-0.01-0.01l-0.01,0.01h0L3.53,23.62 c-1.22-1.22-1.84-2.83-1.84-4.44c0-1.59,0.62-3.19,1.85-4.43l-0.01-0.01L16.44,1.84l0,0c0.16-0.16,0.33-0.31,0.51-0.44 C18.09,0.47,19.48,0,20.87,0c1.59,0,3.19,0.61,4.42,1.84l0.01,0.01l0.01-0.01l0,0L48.97,25.5v0c1.22,1.22,1.84,2.83,1.84,4.44 c0,1.6-0.61,3.21-1.84,4.44v0l-3.77,3.77l5.11,5.11l12.91-12.91c4.03-4.03,9.35-6.05,14.66-6.05c5.31,0,10.62,2.02,14.66,6.05v0 c4.03,4.03,6.05,9.35,6.05,14.66c0,5.31-2.02,10.62-6.05,14.66L79.63,72.56l5.11,5.11l3.77-3.76c1.22-1.22,2.83-1.84,4.44-1.84 c1.6,0,3.21,0.61,4.44,1.84l23.66,23.66l0,0c1.22,1.22,1.84,2.83,1.84,4.44c0,1.6-0.61,3.21-1.84,4.44l0,0l-12.91,12.91 c-1.22,1.22-2.83,1.84-4.44,1.84c-1.6,0-3.21-0.61-4.44-1.84L75.6,95.69c-1.22-1.22-1.84-2.83-1.84-4.44 c0-1.59,0.61-3.19,1.84-4.42l0.01-0.01l-0.01-0.01l3.76-3.77l-5.11-5.11l-5.92,5.92c-1.52,1.52-3.52,2.28-5.51,2.28 c-1.99,0-3.99-0.76-5.51-2.28l-5.92-5.92l-2.15,2.15c2.47,3.26,4.37,6.93,5.57,10.75c3.27,10.41,1.4,21.91-8.23,29.61 c-1.86,1.73-4.78,1.68-6.59-0.13L24.5,104.83L24.5,104.83z M0.13,106.96c-0.53-1.89,0.57-3.86,2.47-4.39 c1.89-0.53,3.86,0.57,4.39,2.47c1,3.53,2.38,6.2,4.16,7.99c1.6,1.61,3.6,2.53,6.03,2.73c1.96,0.16,3.42,1.88,3.26,3.85 c-0.16,1.96-1.88,3.42-3.85,3.26c-4.17-0.36-7.65-1.98-10.48-4.83C3.45,115.38,1.47,111.67,0.13,106.96L0.13,106.96z"/>
+
+</g>
+
+</svg>

assets/icons/thickness.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+  <title>line-thickness</title>
+  <g id="Layer_2" data-name="Layer 2">
+    <g id="invisible_box" data-name="invisible box">
+      <rect width="48" height="48" fill="none"/>
+    </g>
+    <g id="icons_Q2" data-name="icons Q2">
+      <rect x="4" y="40" width="40" height="2" rx="1" ry="1"/>
+      <rect x="4" y="31" width="40" height="4" rx="1" ry="1"/>
+      <rect x="4" y="20" width="40" height="6" rx="1" ry="1"/>
+      <rect x="4" y="7" width="40" height="8" rx="1" ry="1"/>
+    </g>
+  </g>

assets/icons/tooltip.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" ?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 8H17M7 11H17M7 14H11M12.7071 20.2929L14.4142 18.5858C14.7893 18.2107 15.298 18 15.8284 18H19C20.1046 18 21 17.1046 21 16V6C21 4.89543 20.1046 4 19 4H5C3.89543 4 3 4.89543 3 6V16C3 17.1046 3.89543 18 5 18H8.17157C8.70201 18 9.21071 18.2107 9.58579 18.5858L11.2929 20.2929C11.6834 20.6834 12.3166 20.6834 12.7071 20.2929Z" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>

assets/icons/upload.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5 3H12H8C6.34315 3 5 4.34315 5 6V18C5 19.6569 6.34315 21 8 21H12M13.5 3L19 8.625M13.5 3V7.625C13.5 8.17728 13.9477 8.625 14.5 8.625H19M19 8.625V11.8125" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.5 21L17.5 15M17.5 15L20 17.5M17.5 15L15 17.5" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/icons/wave-off.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>radio-waves-off</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="drop" fill="#000000" transform="translate(42.666667, 59.581722)">
+            <path d="M47.0849493,-1.42108547e-14 L409.751616,362.666662 L379.581717,392.836561 L224.385032,237.639687 C220.860185,238.582362 217.155464,239.084945 213.333333,239.084945 C189.768533,239.084945 170.666667,219.980945 170.666667,196.418278 C170.666667,192.596131 171.169289,188.891304 172.112051,185.366306 L139.826431,153.082007 C132.313635,165.779668 128,180.591824 128,196.418278 C128,225.705382 142.771649,251.517443 165.252619,266.884869 L165.936213,267.347345 L142.22272,302.835345 C107.92576,279.872145 85.3333333,240.793745 85.3333333,196.418278 C85.3333333,168.771392 94.1027249,143.181092 109.008491,122.262804 L78.5260125,91.7807903 C56.0534502,120.674052 42.6666667,156.978203 42.6666667,196.418278 C42.6666667,254.990374 72.1909377,306.645839 117.152291,337.383388 L118.519467,338.308411 L94.8164267,373.777211 C37.65632,335.507345 7.10542736e-15,270.376678 7.10542736e-15,196.418278 C7.10542736e-15,145.187604 18.0687461,98.1928701 48.1726947,61.4272737 L16.9150553,30.169894 L47.0849493,-1.42108547e-14 Z M331.850667,19.0593447 C389.0112,57.330278 426.666667,122.463078 426.666667,196.418278 C426.666667,232.022459 417.938869,265.581649 402.50917,295.083044 L370.487171,263.062096 C379.186559,242.589607 384,220.067743 384,196.418278 C384,137.846393 354.474684,86.1907213 309.514345,55.4556523 L308.1472,54.5307047 L331.850667,19.0593447 Z M284.443733,90.0020647 C318.741333,112.965478 341.333333,152.042811 341.333333,196.418278 C341.333333,207.884983 339.824831,218.997995 336.995658,229.570658 L298.502013,191.07712 C296.828044,164.007976 282.517524,140.376058 261.413207,125.948946 L260.7296,125.486438 L284.443733,90.0020647 Z" id="Combined-Shape">
+
+</path>
+        </g>
+    </g>
+</svg>

assets/icons/wave-on.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>radio-waves</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="drop" fill="#000000" transform="translate(42.666667, 78.641067)">
+            <path d="M256,177.358933 C256,200.9216 236.898133,220.0256 213.333333,220.0256 C189.768533,220.0256 170.666667,200.9216 170.666667,177.358933 C170.666667,153.796267 189.768533,134.692267 213.333333,134.692267 C236.898133,134.692267 256,153.796267 256,177.358933 Z M128,177.358933 C128,147.776 143.071573,121.73696 165.936213,106.427093 L142.22272,70.94272 C107.92576,93.9063467 85.3333333,132.983467 85.3333333,177.358933 C85.3333333,221.7344 107.92576,260.8128 142.22272,283.776 L165.936213,248.288 C143.071573,232.9792 128,206.941867 128,177.358933 Z M298.666667,177.358933 C298.666667,206.941867 283.594667,232.9792 260.7296,248.288 L284.443733,283.776 C318.741333,260.8128 341.333333,221.7344 341.333333,177.358933 C341.333333,132.983467 318.741333,93.9061333 284.443733,70.94272 L260.7296,106.427093 C283.594667,121.73696 298.666667,147.776 298.666667,177.358933 Z M331.850667,1.42108547e-14 L308.1472,35.47136 C353.8752,66.0885333 384,118.195413 384,177.358933 C384,236.522667 353.8752,288.629333 308.1472,319.246933 L331.850667,354.717867 C389.009067,316.448 426.666667,251.3152 426.666667,177.358933 C426.666667,103.403733 389.0112,38.2709333 331.850667,1.42108547e-14 Z M94.8164267,354.717867 L118.519467,319.249067 C72.7904,288.629333 42.6666667,236.522667 42.6666667,177.358933 C42.6666667,118.195413 72.7904,66.0885333 118.519467,35.4688 L94.8164267,1.42108547e-14 C37.65632,38.2709333 7.10542736e-15,103.40096 7.10542736e-15,177.358933 C7.10542736e-15,251.317333 37.65632,316.448 94.8164267,354.717867 Z" id="Shape">
+
+</path>
+        </g>
+    </g>
+</svg>

examples/al-aas225.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', { fov:0.15, target: 'Arp 240', showReticle: false, fullScreen: true });
+        aladin.setBaseImageLayer(aladin.newImageSurvey('P/SDSS9/g', {colormap: "rainbow", stretch: "Linear"}));
+
+        var simbad = A.catalog({name: 'Simbad', sourceSize: 16, color: '#4050F0'});
+        aladin.addCatalog(simbad);
+        simbad.addSources([A.marker(204.97010833333336, 0.8400166666666667, {popupTitle: 'NGC 5257', popupDesc: '<em>Object type:</em> HII galaxy<br/><em>Morphological type:</em> Sbc<br/><br/>More info <a href="https://simbad.u-strasbg.fr/simbad/sim-id?Ident=NGC+5257">in Simbad</a>'}), A.marker(204.9903125, 0.8309694444444445,  {popupTitle: 'NGC 5258', popupDesc: '<em>Object type:</em>  Galaxy in Pair of Galaxies <br/><em>Morphological type:</em> Sb<br/><br/>More info <a href="https://simbad.u-strasbg.fr/simbad/sim-id?Ident=NGC+5258">in Simbad</a>'})]);
+
+        var overlay = A.graphicOverlay({color: '#aa2222', lineWidth: 4});
+
+        aladin.addOverlay(overlay);
+        overlay.addFootprints(A.polygon([[204.970214, 0.81206], [204.97110047, 0.80993368], [204.978723, 0.79165], [204.999152, 0.800162], [204.99482125, 0.81055582], [205.002941, 0.813851], [204.99986816, 0.82141125], [205.010312, 0.825578], [205.002112, 0.846123], [204.981546, 0.837916], [204.98157771, 0.83783654], [204.962977, 0.830202], [204.9703941, 0.81213504]]));
+
+        aladin.displayJPG('http://images.ipac.caltech.edu/esahubble/heic0810at/esahubble_heic0810at_1600.jpg');
+    });
+</script>
+</body>
+</html>

examples/al-adass2022.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: ["P/PanSTARRS/DR1/color-i-r-g"], showReticle: false, gridOptions: {opacity: 0.5, color: 'rgba(255, 0, 0)'}, projection: "AIT", cooFrame: 'icrs', target: "stephan's quintet", fov: 1000, showGotoControl: false, showFrame: false, fullScreen: true, showLayersControl: true, showCooGrid: true, showCooGridControl: false});
+
+        const chft = aladin.createImageSurvey('CFHT', "CFHT deep view of NGC7331 and Stephan's quintet u+g+r", "https://cds.unistra.fr/~derriere/PR_HiPS/2022_Duc/", null, null, {imgFormat: 'png'});
+        const nircamJWST = aladin.createImageSurvey('Nircam', "Stephans Quintet NIRCam+MIRI", "http://alasky.cds.unistra.fr/JWST/CDS_P_JWST_Stephans-Quintet_NIRCam+MIRI/", null, null, {imgFormat: 'png', colormap: "viridis"});
+        
+        aladin.setOverlayImageLayer("CFHT", "CFHT");
+        aladin.setOverlayImageLayer("Nircam", "Nircam");
+
+        aladin.getOverlayImageLayer("CFHT").toggle();
+        aladin.getOverlayImageLayer("Nircam").toggle();
+
+        let fov = 360;
+        let rotation = 0;
+
+        setInterval(function zoom() {
+            if (fov > 0.07) {
+                fov *= 0.997;
+                rotation += 0.07;
+
+                aladin.setRotation(rotation)
+                aladin.setFoV(fov);
+
+                if (fov < 3 && fov > 0.5) {
+                    let opacity = 1.0 - (fov - 0.5)/(3 - 0.5); 
+                    aladin.getOverlayImageLayer("CFHT").setOpacity(opacity);
+                }
+
+                if (fov < 0.5 && fov > 0.1) {
+                    let opacity = 1.0 - (fov - 0.1)/(0.5 - 0.1); 
+                    aladin.getOverlayImageLayer("Nircam").setOpacity(opacity);
+                }
+            }
+        }, 10);
+
+        setInterval(function () {
+            const t = Date.now() / 1000;
+            let lambda = Math.sin(t) * 0.5 + 0.5;
+        })
+    });
+</script>
+
+</body>
+</html>

examples/al-additive-blend.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+    <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+A.init.then(() => {
+    let aladin = A.aladin('#aladin-lite-div', {projection: "TAN", survey: "P/HSC/DR2/deep/g", target: '02 21 36.529 -05 31 20.16', fov: 0.1});
+
+    let hscGreenSurvey = aladin.getBaseImageLayer();
+    hscGreenSurvey.setImageFormat("fits");
+    hscGreenSurvey.setColormap("green", { stretch: "asinh" });
+    hscGreenSurvey.setCuts(-0.2186, 5.30322);
+
+    const HSCRedSurvey = aladin.newImageSurvey('CDS/P/HSC/DR2/deep/r', {imgFormat: 'fits', colormap: "red", minCut: 0.34228, maxCut: 2.75785, additive: true, stretch: "asinh"});
+    const HSCBlueSurvey = aladin.newImageSurvey('CDS/P/HSC/DR2/deep/z', {imgFormat: 'fits', colormap: "blue", minCut: -0.01218, maxCut: 2.27397, additive: true, stretch: "asinh"});
+
+    aladin.setOverlayImageLayer('CDS/P/HSC/DR2/deep/r', 'hsc red layer');
+    aladin.setOverlayImageLayer('CDS/P/HSC/DR2/deep/z', 'hsc blue layer');
+});
+</script>
+</body>
+</html>

examples/al-animation-CS-CDS-2022.html

@@ -0,0 +1,398 @@
+<!doctype html>
+<html>
+<head>
+
+</head>
+<body>
+
+<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px">
+    <div id="notifier" style="position: absolute; left: 0px; bottom: 30px; width: 900px; height: auto; z-index: 100; font-family: Futura,Trebuchet MS,Arial,sans-serif; color: #fdfdfd; background: rgb(69,69,69); background: linear-gradient(90deg, rgba(69,69,69,0.7) 0%, rgba(69,69,69,0.6) 74%, rgba(69,69,69,0) 100%); display: hidden;">
+        <div style="margin-left: 50px;">
+            <div id="mainTitle" style="font-size: 53pt;"></div>
+            <div id="subTitle" style="font-size: 34pt;"></div>
+        </div>
+    </div>
+</div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {projection: 'MOL', cooFrame: 'galactic', fov: 360, fullScreen: true, showCooGrid: false, showReticle: false})
+        aladin.gotoRaDec(79.9525321, -69.2742586)
+        const gaiaFlux = aladin.createImageSurvey('P/DM/flux-G/I/355/gaiadr3', "GaiaDR3GFlux", null, null, null, {imgFormat: 'fits', stretch: 'log'})
+        aladin.setBaseImageLayer(gaiaFlux)
+        gaiaFlux.setCuts(3e5, 1e8)
+
+
+        
+        function notify(title, sub, delay) {
+            $('#mainTitle').html(title)
+            $('#subTitle').html(sub)
+            $('#notifier').fadeIn(600).delay(delay).fadeOut(600)
+        }
+
+        // show grid opacity
+        function delay(t) {
+            return new Promise(resolve => setTimeout(resolve, t))
+        }
+
+
+
+
+        async function *interval(t, nbIteration) {
+            let itNb = 0
+            while(itNb < nbIteration) {
+                let now = Date.now()
+                yield itNb
+                await delay(now - Date.now() + t)
+                itNb++;
+            }
+        }
+
+        aladin.view.setGridConfig({opacity: 0, color: {r: 51/255, g: 209/255, b: 1}})
+        aladin.view.setGridConfig({enabled: true})
+
+        async function s_1() {
+            return new Promise((resolve, reject) => {
+                aladin.animateToRaDec(266.4150089, -29.0061110, 5, () =>  resolve())
+            })
+        }
+
+        async function showcaseProjections() {
+            aladin.setProjection('SIN')
+            await delay(2000)
+
+            aladin.setProjection('MER')
+            aladin.setFoV(400)
+            await delay(2000)
+
+            //aladin.setProjection('HPX')
+            //aladin.setFoV(400)
+            //await delay(2000)
+
+            aladin.setProjection('AIT')
+            aladin.setFoV(400)
+        }
+
+        let gaiaRadvel
+        async function s0() {
+            gaiaRadvel = aladin.createImageSurvey('CDS/P/DM/radial-velocity/I/355/gaiadr3', "Gaia radial velocity", null, null, null)
+            gaiaRadvel.setOpacity(0.0)
+            notify('New HiPS overlay', 'Gaia DR3 radial velocity map', 4000)
+        //galex.setColormap('magma', {stretch: "Asinh"})
+            aladin.setOverlayImageLayer(gaiaRadvel)
+            for await(const it of interval(50, 40)) {
+                gaiaRadvel.setOpacity((it+1) / 40)
+            }
+
+            await delay(3000)
+
+            for await(const it of interval(50, 40)) {
+                gaiaRadvel.setOpacity(1 - it / 40)
+            }
+            gaiaRadvel.setOpacity(0)
+        }
+
+        async function showGrid() {
+            for await(const it of interval(50, 40)) {
+                aladin.view.setGridConfig({opacity: it / 40})
+            }
+        }
+        
+        async function s2() {
+            return new Promise((resolve, reject) => {
+                aladin.animateToRaDec(339.2857279, 34.4199240, 5, () =>  resolve())
+            })
+        }
+
+        let galex
+        async function s3() {
+            galex = aladin.createImageSurvey('CDS/P/GALEXGR6_7/color', "GALEX", null, null, null)
+            galex.setOpacity(0.0)
+        //galex.setColormap('magma', {stretch: "Asinh"})
+            aladin.setOverlayImageLayer(galex)
+        }
+
+        async function s4() {
+            for await(const it of interval(50, 40)) {
+                galex.setOpacity((it+1) / 40)
+            }
+        }
+        
+        async function s5() {
+            let nbIt = 230
+            let fovStart = 400
+            let fovEnd = 0.5
+            const intervalMs = 25
+
+            let fov;
+            fov = fovStart
+            for await(const it of interval(intervalMs, nbIt+1)) {
+                fov = fovStart / Math.pow(fovEnd/fovStart, -it/nbIt)
+                //fov = fovStart - (fovStart - fovEnd) * ((it+1) / nbIt)
+                //aladin.setFoV(400 - (fovStart - fovEnd) * ((it+1) / nbIt))
+                //fov = fovFakeEnd + (fovFakeStart - fovFakeEnd) * (1 - Math.pow((it) / nbIt, 0.15))
+                aladin.setFoV(fov)
+            }
+
+            aladin.setFoV(fovEnd)
+        }
+
+        async function s5_() {
+                /*
+            for await(const it of interval(50, 180)) {
+                aladin.setFoV(400 - 399.5 * ((it+1) / 180))
+            }
+   */
+            return new Promise((resolve, reject) => {
+                aladin.zoomToFoV(5, 3, () =>  resolve());
+            })
+        }
+
+
+        async function hideGrid() {
+            for await(const it of interval(50, 40)) {
+                aladin.view.setGridConfig({opacity: 1 - it / 40})
+            }
+        }
+
+        async function s7() {
+            return new Promise((resolve, reject) => {
+                aladin.animateToRaDec(339.0146901, 33.9600401, 5, () =>  resolve())
+            })
+        }
+
+        let panstarrs
+        async function s77() {
+            panstarrs = aladin.createImageSurvey('CDS/P/PanSTARRS/DR1/g', "PanSTARRS g", null, null, null)
+            panstarrs.setOpacity(0.0)
+            panstarrs.setColormap('viridis', {stretch: "Asinh"})
+            aladin.setOverlayImageLayer(panstarrs, 'panstarrs')
+
+            for await(const it of interval(50, 40)) {
+                panstarrs.setOpacity((it+1) / 40)
+            }
+        }
+
+        let stephansMIRI
+        async function s8() {
+            stephansMIRI = aladin.createImageSurvey('CDS/P/JWST/Stephans-Quintet/MIRI', "stephansMIRI", null, null, null)
+            stephansMIRI.setOpacity(0.0)
+        //galex.setColormap('magma', {stretch: "Asinh"})
+            aladin.setOverlayImageLayer(stephansMIRI, 'stephansMIRI')
+
+            for await(const it of interval(25, 100)) {
+                stephansMIRI.setOpacity((it+1) / 100)
+            }
+        }
+
+        async function s9() {
+            return new Promise((resolve, reject) => {
+                aladin.zoomToFoV(0.125, 5, () =>  resolve())
+            })
+        }
+
+        async function s10() {
+            for await(const it of interval(50, 80)) {
+                aladin.setRotation(0.5 * it)
+            }
+        }
+
+        let stephansNIRCamMIRI
+        async function s11() {
+            stephansNIRCamMIRI = aladin.createImageSurvey('CDS/P/JWST/Stephans-Quintet/NIRCam+MIRI', "stephansMIRI", null, null, null)
+            stephansNIRCamMIRI.setOpacity(0.0)
+            aladin.setOverlayImageLayer(stephansNIRCamMIRI, 'stephansNIRCamMIRI')
+
+
+            for await(const it of interval(25, 180)) {
+                if (it==80) {
+                    aladin.animateToRaDec(339.0152849, 33.9755441, 25 * 260 / 1000)
+                    aladin.zoomToFoV(2 / 60, 25 * 260 / 1000)
+                }
+                stephansNIRCamMIRI.setOpacity((it+1) / 180)
+            }
+
+            await delay(180*25 + 500)
+        }
+
+        async function zoomoutAndgoToMeerkat() {
+            for await(const it of interval(25, 10)) {
+                panstarrs && panstarrs.setOpacity(1 - it / 10)
+            }
+            panstarrs && panstarrs.setOpacity(0)
+
+            let nbIt = 200
+            let fovStart = 2/60
+            let fovEnd = 360
+            let intervalMs = 25
+
+            let fov;
+            fov = fovStart
+            for await(const it of interval(intervalMs, nbIt+1)) {
+                fov = fovStart / Math.pow(fovEnd/fovStart, -it/nbIt)
+                aladin.setFoV(fov)
+                galex && galex.setOpacity(Math.max(0, 1 - it / 2*nbIt))
+            }
+
+            aladin.setFoV(fovEnd)
+            galex && galex.setOpacity(0)
+
+            await delay(300)
+
+
+            aladin.animateToRaDec(266.2800147, -29.2222859, 5)
+
+            await delay(5000)
+
+            notify('New HiPS overlay', 'MeerKAT 1284MHz', 6000)
+            const meerkat = aladin.createImageSurvey('P/MeerKAT/Galactic-Centre-1284MHz-StokesI', "Galactic-Centre-1284MHz-StokesI", null, null, null, {imgFormat: 'fits'});
+            meerkat.setColormap('magma', {stretch: "Asinh"})
+
+            meerkat.setOpacity(0.0)
+            aladin.setOverlayImageLayer(meerkat, 'meerkat')
+            for await(const it of interval(25, 40)) {
+                meerkat.setOpacity((it+1) / 40)
+            }
+
+            nbIt = 300
+            fovStart = 360
+            fovEnd = 5.4
+
+            fov = fovStart
+            for await(const it of interval(intervalMs, nbIt+1)) {
+                fov = fovStart / Math.pow(fovEnd/fovStart, -it/nbIt)
+                aladin.setFoV(fov)
+                aladin.setRotation(40 - 40 * it/nbIt)
+            }
+            aladin.setFoV(fovEnd)
+
+            await delay(500)
+
+
+            notify('', 'Color map changes and contrast adjustment from FITS tiles', 3000)
+            let cutMin = -0.0004
+            let cutMax = 0.01
+            intervalMs = 25
+            for await(const it of interval(intervalMs, 1000)) {
+                switch(it) {
+                    case 150:
+                        meerkat.setColormap('parula')
+                        break
+                    case 300:
+                        meerkat.setColormap('eosb')
+                        break
+                    case 450:
+                        meerkat.setColormap('spectral')
+                        break
+                    case 600:
+                        meerkat.setColormap('ylorbr')
+                        break
+                    case 750:
+                        meerkat.setColormap('ylorbr', {reversed: true})
+                        break
+                }
+                //const t = Date.now() / 1000;
+                const t = it / 25
+                let lambda = Math.sin(t) * 0.5 + 0.5
+
+                let cut0 = -0.0004 * lambda + (1 - lambda) * -0.00132
+                let cut1 = 0.005 * lambda + (1 - lambda) * 0.05759
+                meerkat.setCuts(cut0, cut1)
+            }
+
+        } 
+
+
+
+        async function animation() {
+            await delay(1000)
+
+            notify('Background HiPS:', 'Gaia DR3 G flux map', 3000)
+
+            await s_1()
+
+            notify('', 'Enable coordinates grid', 2500)
+
+            await delay(1000)
+
+
+            await showGrid()
+
+            await delay(1000)
+
+            notify('Projection support:', 'Orthographic, Mercator, Aitoff', 6500)
+
+            await delay(1000)
+
+            await showcaseProjections()
+
+
+            await delay(1000)
+
+
+            await s0()
+
+            await delay(1000)
+
+            await s2()
+
+            notify('New HiPS overlay', 'GALEX GR6/7', 4000)
+            await delay(500)
+
+            await s3()
+
+            await s4()
+
+            await s5()
+
+            await delay(800)
+
+            await hideGrid()
+
+            await delay(300)
+            notify('', 'Center view on Stephan\'s Quintet', 3800)
+
+            await s7()
+
+            await delay(300)
+
+            notify('New HiPS overlay', 'PanSTARRS g', 3000)
+            await s77()
+
+            await delay(300)
+
+            await s9()
+
+            await delay(300)
+
+            notify('New HiPS overlay', 'JWST MIRI', 3000)
+            await s8()
+
+            await delay(300)
+
+            await s10()
+
+            await delay(300)
+
+            notify('New HiPS overlay', 'JWST NIRCam + MIRI', 4000)
+
+            await s11()
+
+            await delay(300)
+
+            await zoomoutAndgoToMeerkat()
+
+
+        };
+
+        animation();
+
+    });
+</script>
+
+</body>
+</html>

examples/al-animation.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<head>
+<!--<link rel="stylesheet" href="./layers.css" />-->
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: "P/SPITZER/color", cooFrame: 'galactic', fov: 5});
+        aladin.gotoRaDec(266.41683, -29.00781);
+        // Parameters are:
+        //    <right ascension of final position>,
+        //    <declination of final position>,
+        //    <animation duration in seconds>
+        aladin.animateToRaDec(305.5, 38.5, 70);
+    });
+</script>
+
+</body>
+</html>

examples/al-artifact.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        var aladin = A.aladin(
+            '#aladin-lite-div',
+            {
+                survey: 'https://alasky.cds.unistra.fr/Pan-STARRS/DR1/color-z-zg-g/', // set initial image survey
+                projection: 'SIN', // set a projection
+                fov: 114.19, // initial field of view in degrees
+                target: '19 24 51.556 +45 16 44.36', // initial target
+                cooFrame: 'equatorial', // set galactic frame
+                showCooGrid: true, // set the grid
+                fullScreen: true,
+            }
+        );
+    });
+</script>
+
+</body>
+</html>

examples/al-badbaselayer.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+    <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+    <script type="module">
+        import A from '../src/js/A.js';
+A.init.then(() => {
+    let aladin = A.aladin('#aladin-lite-div', {fov: 70,projection: "AIT"});
+    
+    let hsc = aladin.newImageSurvey("P/HSC/DR2/deep/g", {colormap:"Purples", imgFormat: "fits"});
+    aladin.setBaseImageLayer(hsc);
+
+});
+</script>
+</body>
+</html>

examples/al-big-circle.html

@@ -0,0 +1,37 @@
+
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {target: 'M 1', fov: 180});
+ 
+        var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 3});
+        aladin.addOverlay(overlay);
+        overlay.add(A.circle(83.66067, 0, 30, {color: 'cyan'})); // radius in degrees
+        var cat = A.catalog({name: 'Some markers', sourceSize: 18});
+        aladin.addCatalog(cat);
+        cat.addSources([A.marker(83, 29, {popupTitle: 'Point1', popupDesc: 'Does not show up in circle'})]);
+
+        aladin.on("footprintClicked", (footprint) => {
+            console.log("footprint clicked catched", footprint)
+        })
+        aladin.on("objectClicked", (object) => {
+            console.log("object clicked catched", object)
+        })
+        aladin.on("footprintHovered", (footprint) => {
+            console.log("footprint hovered catched", footprint)
+        })
+        aladin.on("objectHoveredStop", (object) => {
+            console.log("Object hovered stopped", object)
+        })
+    });
+</script>
+</body>
+</html>

examples/al-cat-custom-draw-function.html

@@ -0,0 +1,71 @@
+<!doctype html>
+<html>
+<head>
+<!--<link rel="stylesheet" href="./layers.css" />-->
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        // Start up Aladin Lite
+        aladin = A.aladin('#aladin-lite-div', {target: '12 25 41.512 +12 48 47.2', fov: 0.8});
+
+        // define custom draw function
+        var drawFunction = function(source, canvasCtx, viewParams) {
+            canvasCtx.beginPath();
+            canvasCtx.arc(source.x, source.y, source.data['size'] * 2, 0, 2 * Math.PI, false);
+            canvasCtx.closePath();
+            canvasCtx.strokeStyle = '#c38';
+            canvasCtx.lineWidth = 3;
+            canvasCtx.globalAlpha = 0.7,
+            canvasCtx.stroke();
+            var fov = Math.max(viewParams['fov'][0], viewParams['fov'][1]);
+
+            // object name is displayed only if fov<10°
+            if (fov>10) {
+                return;
+            }
+
+            canvasCtx.globalAlpha = 0.9;
+            canvasCtx.globalAlpha = 1;
+
+            var xShift = 20;
+
+            canvasCtx.font = '15px Arial'
+            canvasCtx.fillStyle = '#eee';
+            canvasCtx.fillText(source.data['name'], source.x + xShift, source.y -4);
+
+            // object type is displayed only if fov<2°
+            if (fov>2) {
+                return;
+            }
+            canvasCtx.font = '12px Arial'
+            canvasCtx.fillStyle = '#abc';
+            canvasCtx.fillText(source.data['otype'], source.x + 2 + xShift, source.y + 10);
+        };
+
+        // create sources objects
+        var M87 = A.source(187.7059308, 12.3911233, {name: 'M 87', size: 4.5, otype: 'LINER AGN'});
+        var M49 = A.source(187.444992, 8.000411, {name: 'M 49', size: 6.28, otype: 'Seyfert 2'});
+        var M100 = A.source(185.728746, 15.822381, {name: 'M 100', size: 7.23, otype: 'AGN'});
+        var M84 = A.source(186.26559721, 12.88698314, {name: 'M 84', size: 3.91, otype: 'Seyfert 2'});
+        var M60 = A.source(190.916700, 11.552611, {name: 'M 60', size: 4.75, otype: 'Galaxy in pair of galaxies'});
+        var NGC4388 = A.source(186.445083, 12.662069 , {name: 'NGC 4388', size: 3.72, otype: 'Seyfert 2'});
+        var NGC4261 = A.source(184.84673421, 5.82491522 , {name: 'NGC 4261', size: 2.78, otype: 'LINER AGN'});
+        var M86 = A.source(186.549225, 12.945969, {name: 'M 86', size: 6.03, otype: 'Galaxy in group of galaxies'});
+        // create catalog layer with custom draw function
+        var cat = A.catalog({name: 'Virgo cluster', shape: drawFunction});
+        // add sources to the new layer
+        cat.addSources([M87, M49, M100, M84, M60, NGC4388, NGC4261, M86]);
+        aladin.addCatalog(cat);
+    });
+</script>
+
+</body>
+</html>
+
+

examples/al-cat-custom-shape.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+<head>
+<!--<link rel="stylesheet" href="./layers.css" />-->
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: 'P/DSS2/red', target: 'M50', fov: 0.3});
+
+        var customImg = new Image();
+        customImg.onload = function() {
+            var cat = A.catalog({shape: customImg});
+            aladin.addCatalog(cat);
+            cat.addSources(A.source(105.69239256, -8.45235969));
+            cat.addSources(A.source(105.70779763, -8.31350997));
+            cat.addSources(A.source(105.74242906, -8.34776709));
+        };
+        customImg.src = 'https://aladin.u-strasbg.fr/AladinLite/doc/API/examples/img/star.png';
+    });
+</script>
+
+</body>
+</html>
+
+

examples/al-cat-read-only.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+<head>
+<!--<link rel="stylesheet" href="./layers.css" />-->
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: 'P/DSS2/red', target: 'M50', fov: 0.7});
+
+        var cat1 = A.catalog({readOnly: true});
+        aladin.addCatalog(cat1);
+        cat1.addSources(A.source(105.69239256, -8.45235969));
+        cat1.addSources(A.source(105.70779763, -8.31350997));
+        cat1.addSources(A.source(105.74242906, -8.34776709));
+
+        var cat2 = A.catalog({readOnly: false});
+        aladin.addCatalog(cat2);
+        cat2.addSources(A.source(105.79239256, -8.45235969));
+        cat2.addSources(A.source(105.90779763, -8.31350997));
+        cat2.addSources(A.source(105.54242906, -8.34776709));
+    });
+</script>
+
+</body>
+</html>

examples/al-catalog-filter.html

@@ -0,0 +1,45 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+Show sources with proper motion greater than:
+<input id='slider' style='vertical-align:middle;width:60vw;' step='1' min='0' max='10' type='range' value='0'>
+<span id='pmVal'  >0 mas/yr</span><br><br><div id='aladin-lite-div' style='width: 500px;height: 500px;'></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        var pmThreshold = 0;
+
+        var slider = document.getElementById('slider');
+        slider.oninput = function() {
+            pmThreshold = this.value;
+            $('#pmVal').html(pmThreshold + ' mas/yr');
+            cat.reportChange();
+        }
+
+        var myFilterFunction = function(source) {
+            var hpmag  = parseFloat(source.data['Hpmag']);
+            if (isNaN(hpmag)) {
+                return false;
+            }
+            return hpmag>pmThreshold;
+        }
+
+        aladin = A.aladin('#aladin-lite-div', {target: 'M 45', fov: 5});
+        var cat = A.catalogFromVizieR('I/311/hip2', 'M 45', 5, {onClick: 'showTable', filter: myFilterFunction});
+        aladin.addCatalog(cat);
+    });
+</script>
+
+</body>
+</html>
+
+

examples/al-catalog-hips-filter.html

@@ -0,0 +1,52 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+Show sources with proper motion greater than:
+<input id='slider' style='vertical-align:middle;width:60vw;' step='1' min='0' max='500' type='range' value='0'>
+<span id='pmVal'  >0 mas/yr</span><br><br><div id='aladin-lite-div' style='width: 500px;height: 500px;'></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        var pmThreshold = 0;
+
+        var slider = document.getElementById('slider');
+        slider.oninput = function() {
+            pmThreshold = this.value;
+            $('#pmVal').html(pmThreshold + ' mas/yr');
+            hips.reportChange();
+        }
+        
+        var myFilterFunction = function(source) {
+            var pmra  = parseFloat(source.data['pmra']);
+            var pmdec = parseFloat(source.data['pmdec']);
+            if (isNaN(pmra) || isNaN(pmdec)) {
+                return false;
+            }
+            var totalPm = Math.sqrt(pmra*pmra+pmdec*pmdec);
+            return totalPm>pmThreshold;
+        }
+        
+        aladin = A.aladin('#aladin-lite-div', {target: 'gal center',fov: 150, showContextMenu: true});
+        var hips = A.catalogHiPS('http://axel.u-strasbg.fr/HiPSCatService/I/345/gaia2', {onClick: 'showTable', color: 'orange', name: 'Gaia', filter: myFilterFunction});
+         aladin.addCatalog(hips);
+        
+        $('input[type=radio][name=otype]').change(function() {
+            requestedOtype = this.value;
+            hips.reportChange();
+        });
+    });
+</script>
+
+</body>
+</html>
+
+

examples/al-catalog-hips-shape.html

@@ -0,0 +1,42 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {target: 'LMC', fov: 55, showContextMenu: true});
+        // define custom draw function
+        var drawFunction = function(source, canvasCtx, viewParams) {
+            canvasCtx.beginPath();
+            canvasCtx.arc(source.x, source.y, source.data['coo_err_min'] * 5, 0, 2 * Math.PI, false);
+            canvasCtx.closePath();
+            canvasCtx.strokeStyle = '#c38';
+            canvasCtx.lineWidth = 3;
+            canvasCtx.globalAlpha = 0.7,
+            canvasCtx.stroke();
+            var fov = Math.max(viewParams['fov'][0], viewParams['fov'][1]);
+
+            // object name is displayed only if fov<10°
+            if (fov>10) {
+                return;
+            }
+
+            canvasCtx.globalAlpha = 0.9;
+            canvasCtx.globalAlpha = 1;
+        };
+
+        var hips = A.catalogHiPS('https://axel.u-strasbg.fr/HiPSCatService/Simbad', {onClick: 'showTable', name: 'Simbad', shape: drawFunction});
+        aladin.addCatalog(hips);
+    });
+</script>
+
+</body>
+</html>
+
+

examples/al-catalog-hips.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {target: 'LMC', fov: 55, showContextMenu: true});
+        var hips = A.catalogHiPS('https://axel.u-strasbg.fr/HiPSCatService/Simbad', {onClick: 'showPopup', name: 'Simbad'});
+        aladin.addCatalog(hips);
+    });
+</script>
+
+</body>
+</html>
+
+

examples/al-cfht.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+  import A from '../src/js/A.js';
+  let aladin;
+  A.init.then(() => {
+      aladin = A.aladin('#aladin-lite-div', {survey: "P/PanSTARRS/DR1/color-z-zg-g", fov:1.5, target: "NGC 7318B"});
+      aladin.setProjection('AIT');
+      let cfht = aladin.createImageSurvey("CFHT", "CFHT MegaCam u+g+r", "https://cds.unistra.fr/~derriere/PR_HiPS/2022_Duc/", "equatorial", 10, {imgFormat: 'png'});
+      let jwst1 = aladin.createImageSurvey("CDS/P/JWST/Stephans-Quintet/NIRCam+MIRI", "JWST NIRCam+MIRI", "http://alasky.cds.unistra.fr/JWST/CDS_P_JWST_Stephans-Quintet_NIRCam+MIRI", null, null, {imgFormat: 'png'});
+      let jwst2 = aladin.createImageSurvey("JWST2", "JWST MIRI", "http://alasky.cds.unistra.fr/JWST/CDS_P_JWST_Stephans-Quintet_MIRI", "equatorial", 12, {imgFormat: 'png'});
+      aladin.setOverlayImageLayer('CFHT', 'overlay_CFHT');
+      aladin.setOverlayImageLayer('CDS/P/JWST/Stephans-Quintet/NIRCam+MIRI', 'overlay_JWST1');
+      aladin.setOverlayImageLayer('JWST2', 'overlay_JWST2');
+      aladin.getOverlayImageLayer('overlay_JWST1').setAlpha(0.0);
+      aladin.getOverlayImageLayer('overlay_JWST2').setAlpha(0.0);
+  });
+</script>
+
+</body>
+</html>

examples/al-chinavo.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+  import A from '../src/js/A.js';
+  let aladin;
+  A.init.then(() => {
+      // Start up Aladin Lite
+      aladin = A.aladin('#aladin-lite-div', {target: 'M81', fov: 360, showCooGrid: true});
+      aladin.setImageSurvey(
+        aladin.newImageSurvey('https://hips.china-vo.org/change2-moon-7m-dom', {imgFormat: 'png', colormap: "redtemperature"})
+      );
+  });
+</script>
+
+</body>
+</html>

examples/al-coronelli.html

@@ -0,0 +1,531 @@
+<!doctype html>
+<html>
+    <head>
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <!--<link rel="manifest" href="manifest.json">-->
+    <link rel="apple-touch-icon" href="apple-touch-icon.png">
+        <script type="text/javascript" defer="" async="" src="https://cdsannotations.u-strasbg.fr/piwik/piwik.js"></script><script type="text/javascript" src="js/libs/jquery-3.5.1.min.js"></script>
+        <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-min.css" integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous">
+        <!--link rel="stylesheet" href="css/pure-min.css"-->
+        <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/base-min.css">
+        <!--link rel="stylesheet" href="css/base-min.css"-->
+        <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/grids-min.css">
+        <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/grids-responsive-min.css">
+        <!--link rel="stylesheet" href="css/grids-responsive-min.css"-->
+        <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/buttons.css">
+        <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/buttons-core.css">
+
+        <!--meta name="viewport" content="initial-scale=1.0, user-scalable=no"-->
+        <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    </head>
+<body>
+
+<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
+<script type="text/javascript">
+    let aladin;
+</script>
+<div id="aladin-lite-div" style="width:100vw;height:100vh;">
+    <div id="calibCircle" style="display: none;"></div>
+    <div id="explain" class="aladin-box"></div>
+
+    <div id="overlayDiv" style="position: absolute; width: 100%; height: 100%; z-index:4; display: none;"><canvas id="drawOverlay"></canvas></div>
+
+    <div id="layersControlLeft" class="aladin-box" style="display: block;">
+
+    <!-- temporaire gestion cercle -->
+    <label for="circle-checkbox">Cercle</label> <input id="circle-checkbox" type="checkbox" unchecked=""><br><br>
+    <!-- fin temporaire gestion cercle -->
+
+	<b>Orientation</b><br>
+              <button id="hips-coronelli" class="pure-button" name="ref-hips" onclick="aladin.setImageSurvey('Coronelli')">Normal</button><br>
+              <button id="hips-illenoroc" class="pure-button" name="ref-hips" onclick="aladin.setImageSurvey('illenoroC')">Inversé</button>
+	<br><br>
+
+	<b>Constellations</b>
+	<br>
+            <a id="constellations-boundaries" class="pure-button catlayer" href="#">Frontières</a><br>
+            <a id="const-outlines" class="pure-button img-hips" href="#">Tracé</a><br>
+            <a id="const-jaxa" class="pure-button img-hips" href="#">JAXA</a>
+	<br>
+
+        <b>Ciel</b>
+	<br>
+            <a id="P/Mellinger/color" class="pure-button img-hips" href="#">Mellinger</a><br>
+            <a id="dss2" class="pure-button img-hips" href="#">DSS</a><br>
+            <a id="decaps" class="pure-button img-hips" href="#">DECaPS</a><br>
+            <a id="panstarrs" class="pure-button img-hips" href="#">PanSTARRS</a><br>
+            <a id="gaiamap" class="pure-button img-hips" href="#">Gaia</a>
+	    <br><br><label for="overlay-checkbox">Dessin</label> <input id="overlay-checkbox" type="checkbox" unchecked="">
+    </div>
+    <div id="layersCL2" class="aladin-box" style="display: block;">
+            Opacité<br>
+            <input id="opacity-slider" type="range" min="0" max="1" step="0.01" value="0.0"><br>
+    </div>
+
+    <div id="layersControlRight" class="aladin-box" style="display: block;">
+       <b>Data</b><br>
+            <a id="simbad" class="pure-button catlayer" href="#">SIMBAD</a><br>
+            <a id="gaia" class="pure-button catlayer" href="#">Gaia DR2</a>
+	    <br><br>
+	    <div>Coronelli<br>
+	    <!--a id="coronelli-stars" class="pure-button catcoro" href="#">Coronelli</a-->
+	       <a href="#"><img id="coronelli-stars-white" class="catcoro coro-star" src="star_white.png"></a>
+	       <a href="#"><img id="coronelli-stars-yellow" class="catcoro coro-star" src="star_yellow.png"></a><br>
+	       <a href="#"><img id="coronelli-stars-red" class="catcoro coro-star" src="star_red.png"></a>
+	       <a href="#"><img id="coronelli-stars-blue" class="catcoro coro-star" src="star_blue.png"></a>
+	    </div>
+	<br><br>
+
+        <b>Navigation</b>&nbsp;&nbsp;<br><button id="stop">Stop</button>
+	<br>
+	<div id="coo_epoca">
+            <a class="pure-button nav-button nav-goto" href="#">De Epoca</a><br>
+            &nbsp;→&nbsp;<a class="pure-button nav-button nav-flyto" href="#">Move</a>
+	</div>
+	<div id="coo_legende">
+            <a class="pure-button nav-button nav-goto" href="#">Légende</a><br>
+            &nbsp;→&nbsp;<a class="pure-button nav-button nav-flyto" href="#">Move</a>
+	</div>
+	<div id="coo_orion">
+            <a class="pure-button nav-button nav-goto" href="#">Orion</a><br>
+            &nbsp;→&nbsp;<a class="pure-button nav-button nav-flyto" href="#">Move</a>
+	</div>
+	<div id="coo_magellan">
+            <a class="pure-button nav-button nav-goto" href="#">Magellan</a><br>
+            &nbsp;→&nbsp;<a class="pure-button nav-button nav-flyto" href="#">Move</a>
+	</div>
+	<div id="coo_halley">
+            <a class="pure-button nav-button nav-goto" href="#">Halley</a><br>
+            &nbsp;→&nbsp;<a class="pure-button nav-button nav-flyto" href="#">Move</a>
+	</div>
+</div>
+
+<style type="text/css"> .aladin-reticleColor { color: rgb(178, 50, 178); font-weight:bold;} </style>
+
+<style type="text/css">
+    html, body {
+        height: 100%;
+    }
+
+    body {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .aladin-zoomControl {
+        top: 10% !important;
+        left: unset !important;
+        right: 4px !important;
+    }
+
+    .aladin-zoomControl a {
+        font-size: 24px !important;
+        padding: 22px !important;
+    }
+
+    #aladin{
+        flex: 1 1 0;
+    }
+
+    #explain {
+        padding: 4px;
+        top: 30%;
+        max-height: 50%;
+        font-size: 11pt;
+        overflow: scroll;
+    }
+
+    #explain tbody tr:nth-child(even) {
+        background-color: #ffffff;
+    }
+
+    #explain tbody tr:nth-child(odd) {
+        background-color: #ccdaeb;
+    }
+
+    #layersControlLeft {
+        padding: 10px;
+        right: unset;
+        left: 4px;
+        top: 20vh;
+    }
+
+    #layersCL2 {
+        padding: 10px;
+        right: unset;
+        left: 4px;
+        top: 90vh;
+    }
+
+    #layersControlRight {
+        padding: 4px;
+        left: unset;
+        right: 4px;
+        top: 25vh;
+    }
+
+    #layersControlLeft, #layersControlRight, #layersCL2 input {
+        margin-right: 5px;
+    }
+
+    .img-hips {
+        padding: 5px;
+        margin: 5px;
+    }
+
+    #opacity-slider {
+        -webkit-appearance: none !important;  /* Override default CSS styles */
+        width: 220px;
+        height: 25px;
+    }
+
+    #opacity-slider::-webkit-slider-thumb {
+      -webkit-appearance: none !important; /* Override default look */
+      appearance: none;
+      width: 25px; /* Set a specific slider handle width */
+      height: 25px; /* Slider handle height */
+      background: #4CAF50; /* Green background */
+      cursor: pointer; /* Cursor on hover */
+    }
+
+    #opacity-slider::-moz-range-thumb {
+      width: 25px; /* Set a specific slider handle width */
+      height: 25px; /* Slider handle height */
+      background: #4CAF50; /* Green background */
+      cursor: pointer; /* Cursor on hover */
+    }
+
+    .aladin-box {
+        font-size: 12px !important;
+    }
+
+    #calibCircle {
+        position: fixed;
+        border: 8px solid red;
+        border-radius: min(50vw, 50vh);
+        height: min(100vw, 100vh);
+        width: min(100vw, 100vh);
+        top: -8px;
+        left: calc(max(50vw, 50vh) - min(50vw, 50vh) - 8px);
+        z-index: 1000;
+        pointer-events: none;
+    }
+
+    .pure-table {
+        font-size: small;
+    }
+
+    .catcoro {
+        display: inline;
+        vertical-align: middle;
+    }
+
+    .coro-star {
+        vertical-align: middle;
+    }
+</style>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    import {Utils} from '../src/js/Utils';
+
+    A.init.then(() => {
+        var hipsDir="http://alasky.u-strasbg.fr/CDS_P_Coronelli";
+        aladin = A.aladin("#aladin-lite-div", {showSimbadPointerControl: true, realFullscreen: true, fov: 100, allowFullZoomout: true, showReticle: false });
+        aladin.createImageSurvey('illenoroC', 'illenoroC', hipsDir, 'equatorial', 4, {imgFormat: 'jpg', longitudeReversed: false});
+        aladin.createImageSurvey('Coronelli', 'Coronelli', hipsDir, 'equatorial', 4, {imgFormat: 'jpg', longitudeReversed: true});
+        aladin.setImageSurvey('Coronelli');
+
+        $('#layersControlLeft').show();
+        $('#layersCL2').show();
+        $('#layersControlRight').show();
+
+        var hipsCats = {
+        'constellations-boundaries': A.catalogFromVizieR('VI/49/bound_20', '0 +0', 180, {color: 'red'}),
+        'simbad': A.catalogHiPS('http://axel.u-strasbg.fr/HiPSCatService/Simbad', {name: 'Simbad', color: '#6dbdce'}),
+        'gaia': A.catalogHiPS('http://axel.u-strasbg.fr/HiPSCatService/I/345/gaia2', {name: 'Gaia DR2', color: '#6666cc', shape: 'circle', sourceSize: 6})
+        };
+        hipsCats['simbad'].hide();
+        hipsCats['constellations-boundaries'].hide();
+        hipsCats['gaia'].hide();
+        aladin.addCatalog(hipsCats['simbad']);
+        aladin.addCatalog(hipsCats['constellations-boundaries']);
+        aladin.addCatalog(hipsCats['gaia']);
+
+        var coronelliStars = {
+            'coronelli-stars-white': A.catalogFromURL("http://cdsweb.u-strasbg.fr/~derriere/coronelli/white.xml", {name: 'Coronelli white', color: '#ffffff', shape: 'rhomb', sourceSize: 10}),
+            'coronelli-stars-yellow': A.catalogFromURL("http://cdsweb.u-strasbg.fr/~derriere/coronelli/yellow.xml", {name: 'Coronelli yellow', color: '#f6f874', shape: 'rhomb', sourceSize: 10}),
+            'coronelli-stars-red': A.catalogFromURL("http://cdsweb.u-strasbg.fr/~derriere/coronelli/red.xml", {name: 'Coronelli red', color: '#ff5555', shape: 'rhomb', sourceSize: 10}),
+            'coronelli-stars-blue': A.catalogFromURL("http://cdsweb.u-strasbg.fr/~derriere/coronelli/blue.xml", {name: 'Coronelli blue', color: '#1ca5ec', shape: 'rhomb', sourceSize: 20})
+        };
+
+        coronelliStars['coronelli-stars-white'].hide();
+        coronelliStars['coronelli-stars-yellow'].hide();
+        coronelliStars['coronelli-stars-red'].hide();
+        coronelliStars['coronelli-stars-blue'].hide();
+        aladin.addCatalog(coronelliStars['coronelli-stars-white']);
+        aladin.addCatalog(coronelliStars['coronelli-stars-yellow']);
+        aladin.addCatalog(coronelliStars['coronelli-stars-red']);
+        aladin.addCatalog(coronelliStars['coronelli-stars-blue']);
+
+        // ajout de nouveaux relevés custom ?
+        // Mellinger : P/Mellinger/color
+        // PanSTARRS couleur : CDS/P/PanSTARRS/DR1/color-i-r-g
+        // gaia flux : CDS/P/DM/flux-color-Rp-G-Bp/I/345/gaia2
+        aladin.createImageSurvey("dss2", "DSS color", "http://alasky.u-strasbg.fr/DSS/DSSColor/", "equatorial", 9, {imgFormat: 'jpg'});
+        aladin.createImageSurvey("decaps", "DECaPS DR1", "http://alasky.u-strasbg.fr/DECaPS/DR1/color/", "equatorial", 11, {imgFormat: 'png'});
+        aladin.createImageSurvey("gaiamap", "Gaia Flux", "http://alasky.u-strasbg.fr/ancillary/GaiaDR2/color-Rp-G-Bp-flux-map/", "equatorial", 4, {imgFormat: 'jpg'});
+        aladin.createImageSurvey("panstarrs", "PanSTARRS", "http://alasky.u-strasbg.fr/Pan-STARRS/DR1/color-i-r-g/", "equatorial", 11, {imgFormat: 'jpg'});
+        aladin.createImageSurvey('const-outlines', 'Constellation outlines', 'http://alaskybis.u-strasbg.fr/JAXA/JAXA_P_CONSTELLATIONS5/', 'equatorial', 6, {imgFormat: 'png'});
+        aladin.createImageSurvey('const-jaxa', 'Constellation by JAXA', 'http://alaskybis.u-strasbg.fr/JAXA/JAXA_P_CONSTELLATIONS6/', 'equatorial', 6, {imgFormat: 'png'});
+
+        var curSelectedSource = null;
+        aladin.setOverlayImageLayer('P/Mellinger/color');
+        aladin.getOverlayImageLayer().setAlpha(0.0);
+
+        // listen changes on HiPS image background selection
+        $('.img-hips').click(function() {
+        if (!$(this).hasClass("selected")) {
+            $('.img-hips').removeClass("selected pure-button-active");
+            $(this).addClass("selected pure-button-active");
+            let survey = aladin.setOverlayImageLayer(this.id);
+            survey.setAlpha(0.75);
+            $('#opacity-slider').val(0.75);
+        }
+        else {
+            $(this).removeClass("selected pure-button-active");
+            // possibilité ?     aladin.setOverlayImageLayer(null);
+            aladin.getOverlayImageLayer().setAlpha(0);
+            $('#opacity-slider').val(0);
+        }
+        });
+
+
+        $('#opacity-slider').on('input', function() {
+            aladin.getOverlayImageLayer().setAlpha($(this).val());
+        });
+
+
+        // listen changes on HiPS catalogues selection
+        $('.catlayer').click(function() {
+        var cat = hipsCats[$(this).attr('id')];
+
+        if (!$(this).hasClass("selected")) {
+            $(this).addClass("selected pure-button-active");
+            cat.show();
+        }
+        else {
+            $(this).removeClass("selected pure-button-active");
+            cat.hide();
+        }
+        });
+
+        // listen changes on Coronelli catalogues selection
+        $('.catcoro').click(function() {
+        var cat = coronelliStars[$(this).attr('id')];
+
+        if (!$(this).hasClass("selected")) {
+            $(this).addClass("selected");
+            cat.show();
+        }
+        else {
+            $(this).removeClass("selected");
+            cat.hide();
+        }
+        });
+
+        var cooNav = {
+        'coo_epoca': {ra: 4.0, dec: -30.0, time: 10},
+        'coo_legende': {ra: 33.0, dec: -32.0, time: 10},
+        'coo_orion': {ra: 85.2, dec: -2.5, time: 10},
+        'coo_magellan': {ra: 45.0, dec: -79.0, time: 10},
+        'coo_halley': {ra: 219.6, dec: 7.0, time: 10}
+        };
+
+        // listen click on navigation buttons
+        $('.nav-button').click(function() {
+        var cooTarget = $(this).parent().attr('id');
+
+        if ($(this).hasClass("nav-goto")) {
+            aladin.gotoRaDec(cooNav[cooTarget].ra, cooNav[cooTarget].dec);
+        }
+        else if ($(this).hasClass("nav-flyto")) {
+            aladin.animateToRaDec(cooNav[cooTarget].ra, cooNav[cooTarget].dec, cooNav[cooTarget].time);
+        }
+        });
+
+        // stop animations
+        $('#stop').click(function() {
+            aladin.stopAnimation();
+        });
+
+        // listen to click on objects
+        aladin.on('objectClicked', function(source, xyMouseCoords) {
+            var html = '<table class="pure-table">';
+
+            if (curSelectedSource != null) {
+                curSelectedSource.deselect();
+            }
+            if (source==null) {
+                $('#explain').html('');
+                $('#explain').hide();
+                return;
+            }
+
+            source.select();
+            curSelectedSource = source;
+            html += '<tbody>';
+            if (source.catalog.name == 'Simbad') {
+                html += '<h3>Simbad object <em>' + source.data.main_id + '</em></h3>';
+                html += '<tr class="pure-table-odd"><td><b>ra</b></td><td>' + source.data.ra + '</td><td><em>deg</em></td></tr>';
+                html += '<tr><td><b>dec</b></td><td>' + source.data.dec + '</td><td><em>deg</em></td></tr>';
+                html += '<tr><td><b>main_type</b></td><td>' + source.data.main_type + '</td><td><em>deg</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>pmra</b></td><td>' + source.data.pmra + '</td><td><em>mas/yr</em></td></tr>';
+                html += '<tr><td><b>pmdec</b></td><td>' + source.data.pmdec + '</td><td><em>mas/yr</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>parallax</b></td><td>' + source.data.plx + '</td><td><em>mas</em></td></tr>';
+                html += '<tr><td><b>B mag.</b></td><td>' + source.data.B + '</td><td><em>mag</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>V mag.</b></td><td>' + source.data.V + '</td><td><em>mag</em></td></tr>';
+                html += '</tbody>';
+                html += '</table>';
+
+                html += '<br/><a target="_blank" href="http://simbad.u-strasbg.fr/simbad/sim-id?Ident=' + encodeURIComponent(source.data.main_id) + '">More details</a>';
+            }
+
+
+            $('#explain').html(html);
+            $('#explain').show();
+
+        });
+
+        aladin.on('fullScreenToggled', function(fullScreenFlag) {
+            setTimeout(initOverlayCanvas, 500);
+            if (fullScreenFlag) {
+                $('#calibCircle').show();
+            //temporaire gestion cercle
+            document.getElementById("circle-checkbox").checked = true;
+            }
+            else {
+                $('#calibCircle').hide();
+            //temporaire gestion cercle
+            document.getElementById("circle-checkbox").checked = false;
+            }
+        });
+
+        //temporaire gestion cercle
+        document.getElementById("circle-checkbox").addEventListener('change', (event) => {
+        if (event.target.checked) {
+                $('#calibCircle').show();
+        } else {
+                $('#calibCircle').hide();
+        }
+        })
+
+        // enable/disable overlay layer
+        document.getElementById("overlay-checkbox").addEventListener('change', (event) => {
+        if (!drawOverlayCanvas) {
+            return;
+        }
+        if (event.target.checked) {
+                $('#overlayDiv').show();
+                initOverlayCanvas();
+        } else {
+                $('#overlayDiv').hide();
+        }
+        })
+
+        /*
+        document.addEventListener('touchmove', function (event) {
+        if (event.scale !== 1) { event.preventDefault(); }
+        }, false);
+
+        var lastTouchEnd = 0;
+        document.addEventListener('touchend', function (event) {
+        var now = (new Date()).getTime();
+        if (now - lastTouchEnd <= 300) {
+            event.preventDefault();
+        }
+        lastTouchEnd = now;
+        }, false);
+        */
+
+        /*
+        document.addEventListener("touchstart", event => {
+            if(event.touches.length > 1) {
+                console.log("zoom plz stahp");
+                event.preventDefault();
+                //event.stopPropagation(); // maybe useless
+            }
+        }, {passive: false});
+        */
+
+
+        // initialize drawOverlay
+        var drawOverlayCanvas = document.getElementById('drawOverlay');
+
+        var timeBeforeDeletion = 7 * 1000; // in ms
+
+        var drawOverlayCtx;
+        var deleteOverlayTimeout;
+        var points = [];
+        function initOverlayCanvas() {
+            drawOverlayCanvas.style.width='100%';
+            drawOverlayCanvas.style.height='100%';
+
+            drawOverlayCanvas.width  = drawOverlayCanvas.offsetWidth;
+            drawOverlayCanvas.height = drawOverlayCanvas.offsetHeight;
+            drawOverlayCtx = drawOverlayCanvas.getContext('2d');
+
+            drawOverlayCtx.lineWidth = 10;
+            drawOverlayCtx.lineJoin = drawOverlayCtx.lineCap = 'round';
+            drawOverlayCtx.strokeStyle = 'rgba(240, 0, 0, 0.7)';
+
+            points = [];
+        }
+
+        function deleteOverlayCanvas() {
+            drawOverlayCtx.clearRect(0, 0, drawOverlayCtx.canvas.width, drawOverlayCtx.canvas.height);
+            points = [];
+        }
+
+        if (drawOverlayCanvas) {
+
+            var isDrawing = false;
+
+            $(drawOverlayCanvas).on('mousedown touchstart', function(e) {
+                if (deleteOverlayTimeout) {
+                    clearTimeout(deleteOverlayTimeout);
+                    deleteOverlayTimeout = undefined;
+                }
+                isDrawing = true;
+                points.push([Utils.relMouseCoords(e)]);
+            });
+
+
+            $(drawOverlayCanvas).on('mousemove touchmove', function(e) {
+                if (!isDrawing) return;
+            e.preventDefault();
+
+                drawOverlayCtx.clearRect(0, 0, drawOverlayCtx.canvas.width, drawOverlayCtx.canvas.height);
+                points[points.length-1].push(Utils.relMouseCoords(e));
+
+                drawOverlayCtx.beginPath();
+
+                for (var k=0; k<points.length; k++) {
+                    drawOverlayCtx.moveTo(points[k][0].x, points[k][0].y);
+                    for (var i = 1; i < points[k].length; i++) {
+                        drawOverlayCtx.lineTo(points[k][i].x, points[k][i].y);
+                    }
+                }
+                drawOverlayCtx.stroke();
+            });
+
+            drawOverlayCanvas.onmouseup = drawOverlayCanvas.ontouchend = function() {
+                isDrawing = false;
+                deleteOverlayTimeout = setTimeout(deleteOverlayCanvas, timeBeforeDeletion);
+            };
+        }
+    });
+</script>
+
+</body>
+</html>

examples/al-customize-button.html

@@ -0,0 +1,104 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        var aladin = A.aladin(
+            '#aladin-lite-div',
+            {
+                survey: 'P/allWISE/color', // set initial image survey
+                projection: 'AIT', // set a projection
+                fov: 1.5, // initial field of view in degrees
+                target: 'NGC 2175', // initial target
+                cooFrame: 'icrs', // set galactic frame
+                reticleColor: '#ff89ff', // change reticle color
+                reticleSize: 64, // change reticle size
+                showContextMenu: true,
+            }
+        );
+
+        let btn = A.button({
+            content: 'My button',
+            classList: ['myButton'],
+            tooltip: {cssStyle: {color: 'red'}, content: 'Create a moc in pink!', position: {direction: 'top'}},
+            action(o) {
+                aladin.select('poly', p => {
+                    try {
+                        let ra = []
+                        let dec = []
+                        for (const v of p.vertices) {
+                            let [lon, lat] = aladin.pix2world(v.x, v.y);
+                            ra.push(lon)
+                            dec.push(lat)
+                        }
+
+                        let moc = A.MOCFromPolygon(
+                            {ra, dec},
+                            {name: 'poly', lineWidth: 3.0, color: 'pink'},
+                        );
+                        aladin.addMOC(moc)
+                    } catch(_) {
+                        alert('Selection covers a region out of the projection definition domain.');
+                    }
+                })
+            }
+        });
+        let btn2 = A.button({
+            content: 'I do nothing',
+            tooltip: {cssStyle: {color: 'red'}, content: 'Create a moc in pink!', position: {direction: 'top'}},
+        });
+
+        aladin.addUI(btn)
+
+        aladin.addUI(A.box({
+            header: {
+                title: "My window",
+                draggable: true,
+            },
+            classList: ['myBox'],
+            content: "This is the content of my window<br/> I can write proper html",
+        }))
+
+        aladin.addStatusBarMessage({
+            duration: 10000,
+            type: 'info',
+            message: 'Aladin Lite v3.3 is out. New features available:<ul><li>New Button, Box <b>objects</b></li><li>Polygonal, circular selection</li></ul>'
+        })
+    });
+</script>
+<style>
+    .aladin-stack-control {
+        position: absolute;
+        top: 10rem;
+        left: 10rem;
+    }
+
+    .myBox {
+        top: unset;
+        bottom: 0;
+        left: 0;
+    }
+
+    .myButton {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+
+        background-color: pink;
+    }
+
+    .aladin-cooFrame {
+        position: absolute;
+        top: 10rem;
+    }
+</style>
+</body>
+</html>

examples/al-cuts-fits-hips.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+  import A from '../src/js/A.js';
+  var aladin;
+    A.init.then(() => {
+    aladin = A.aladin('#aladin-lite-div', {projection: 'AIT', cooFrame: 'galactic', fov: 200, target: 'galactic center'});
+        let dss = aladin.createImageSurvey("DSS blue band", "Color DSS blue HiPS", "http://alasky.cds.unistra.fr/DSS/DSS2-blue-XJ-S/", "equatorial", 9, {imgFormat: 'fits'})
+        aladin.setBaseImageLayer(dss);
+
+        aladin.getBaseImageLayer().setCuts(2, 10000);
+
+    });
+</script>
+
+</body>
+</html>
+
+

examples/al-displayFITS.html

@@ -0,0 +1,39 @@
+
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width:440px;height:300px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {cooFrame: "icrs", fullScreen: true});
+
+        aladin.displayFITS(
+            //'https://fits.gsfc.nasa.gov/samples/FOCx38i0101t_c0f.fits', // url of the fits file
+            'data/fits/HorseHead.fits',
+            //'data/fits/neowise.fits',
+            //'data/fits/irac.fits',
+            //'data/fits/FOCx38i0101t_c0f.fits',
+            {
+                minCut: 5000,
+                maxCut: 17000,
+                colormap: 'viridis'
+            }, // no optional params
+            (ra, dec, fov, image) => {
+                // ra, dec and fov are centered around the fits image
+                console.log("jjj", image)
+                image.setColormap("magma", {stretch: "asinh"});
+
+                aladin.gotoRaDec(ra, dec);
+                aladin.setFoV(fov);
+            },
+        );
+    });
+</script>
+</body>
+</html>

examples/al-displayJPG.html

@@ -0,0 +1,62 @@
+
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
+
+
+Image Opacity: <br/> <input id="slider" type="range" value=1 min=0 max=1 step=0.05 ; style="width:120px;height:5px;line-height:0%">
+<br/>
+<br/>
+<div id="aladin-lite-div" style="width:440px;height:300px"></div>
+
+<input id="DSS" type="radio" name="survey" value="P/DSS2/Color" checked><label for="DSS">Optical (DSS2)  <label>
+<input id="2MASS" type="radio" name="survey" value="P/2MASS/Color"><label for="2MASS">Infrared (2MASS)<label>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {target: "0 0", cooFrame: "gal"});
+        
+        var callback = function(ra, dec, fov) {
+            A.catalogFromSimbad( {ra: ra, dec: dec} , 1 , {shape: 'circle', color: '#5d5', onClick: 'showTable'}, (cat) => {
+                aladin.addCatalog(cat)
+            });
+            // we must return true, so that the default action (set view to center of image) is performed
+            return true;
+        }
+
+        $("#slider").on('input', function() {
+            const opacity = $(this).val();
+            aladin.getOverlayImageLayer().setOpacity(opacity);
+        });
+        aladin.setBaseImageLayer('P/Mellinger/color');
+
+        //let fits = aladin.displayFITS('http://goldmine.mib.infn.it/data//B/fits/A04_VC1316_ooooog.fits', 'overlay');
+        let jpg = aladin.displayJPG(
+            // the JPG to transform to HiPS
+            'https://noirlab.edu/public/media/archives/images/large/noirlab1912a.jpg',
+            // no options
+            {
+                transparency: 0.6,
+            },
+            // A callback fn once the overlay is set
+            callback
+        );
+
+        $('input[name=survey]').change(function() {
+            let surveyName = $(this).val();
+            if (surveyName === "P/2MASS/Color") {
+                aladin.setBaseImageLayer("CDS/P/2MASS/color");
+            } else if (surveyName === "P/DSS2/Color") {
+                aladin.setBaseImageLayer("CDS/P/DSS2/color");
+            }
+        });
+    });
+</script>
+</body>
+</html>

examples/al-distortion.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        /*aladin = A.aladin('#aladin-lite-div', {fov: 360, fullScreen: true, cooFrame: 'galactic'});
+        aladin.setProjection('MOL');
+
+        aladin.setBaseImageLayer("P/PanSTARRS/DR1/g", {
+            imgFormat: 'fits',
+            colormap: 'redtemperature',
+            stretch: 'Asinh'
+        });*/
+
+        /*aladin = A.aladin('#aladin-lite-div', {fov: 360, fullScreen: true, cooFrame: 'galactic'});
+        aladin.setProjection('AIT');
+
+        aladin.setBaseImageLayer("P/PanSTARRS/DR1/g", {imgFormat: "fits"});
+        aladin.getBaseImageLayer().setColormap('redtemperature', {stretch: "Asinh"});*/
+
+        aladin = A.aladin('#aladin-lite-div', {survey: 'CDS/P/SDSS9/color', fov: 60, target: '0 90', fullScreen: true, cooFrame: 'equatorial', showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: true});
+        aladin.setProjection('SIN');
+
+        //let survey = aladin.createImageSurvey("P/PanSTARRS/DR1/g", null, null, null, null, );
+        /*aladin.setBaseImageLayer("P/PanSTARRS/DR1/g");
+        aladin.getBaseImageLayer().setColormap('viridis', {stretch: "Asinh"});*/
+
+        // manage URL parameters
+        const searchParams = new URL(document.location).searchParams;
+        if (searchParams.has('baseImageLayer')) {
+            aladin.setBaseImageLayer(searchParams.get('baseImageLayer'));
+        }
+        if (searchParams.has('overlayImageLayer')) {
+            aladin.setOverlayImageLayer(searchParams.get('overlayImageLayer'));
+        }
+        if (searchParams.has('cooFrame')) {
+            aladin.setFrame(searchParams.get('cooFrame'));
+        }
+        if (searchParams.has('fov')) {
+            aladin.setFoV(parseFloat(searchParams.get('fov')));
+        }
+        if (searchParams.has('ra') && searchParams.has('dec')) {
+            aladin.gotoRaDec(parseFloat(searchParams.get('ra')), parseFloat(searchParams.get('dec')));
+        }
+
+
+    });
+</script>
+
+</body>
+</html>

examples/al-dom-detached.html

@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+
+<script type="module">
+    import A from '../src/js/A.js';
+    
+    let el = document.createElement('div')
+    el.id = "aladin-lite-div"
+    el.style.width = '1024px';
+    el.style.height = '768px';
+
+    let aladin;
+    A.init.then(() => {
+        var aladin = A.aladin(
+            el,
+            {
+                projection: 'AIT', // set a projection
+                fov: 1.5, // initial field of view in degrees
+                target: 'NGC 2175', // initial target
+                cooFrame: 'galactic', // set galactic frame
+                reticleColor: '#ff89ff', // change reticle color
+                reticleSize: 64, // change reticle size
+                showCooGrid: true, // set the grid
+                fullScreen: true,
+                showShareControl: true,
+                showSettingsControl: true,
+                showLayersControl: true,
+                showContextMenu: true,
+                showFullscreenControl: true,
+            }
+        );
+
+        document.body.appendChild(el);
+    });
+
+</script>
+<style>
+    .aladin-stack-control {
+        bottom: 0;
+    }
+</style>
+</body>
+</html>

examples/al-easy-access-simbad-ned.html

@@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+<script>let aladin;</script>
+<script type="module">
+  import A from '../src/js/A.js';
+  A.init.then(() => {
+      // Start up Aladin Lite
+      aladin = A.aladin('#aladin-lite-div', {
+        target: '09 55 52.4 +69 40 47',
+        fov: 0.25,
+        showContextMenu: true,
+        fullScreen: true,
+        showSimbadPointerControl: true,
+        showShareControl: true,
+        showSettingsControl: true,
+        showStackLayerControl: true,
+        samp: true,
+      });
+
+      A.catalogFromSimbad('09 55 52.4 +69 40 47', 0.1, {onClick: 'showTable', limit: 1000}, (cat) => {
+        aladin.addCatalog(cat)
+      });
+      aladin.addCatalog(A.catalogFromNED('09 55 52.4 +69 40 47', 0.1, {onClick: 'showPopup', shape: 'plus'}));
+  });
+</script>
+
+</body>
+</html>

examples/al-easy-access-vizier.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
+
+<script type="module">
+    import A from '../src/js/A.js';
+    var aladin;
+
+ 
+
+var vmc_cepheids = 'https://archive.eso.org/tap_cat/sync?REQUEST=doQuery&LANG=ADQL&MAXREC=401&FORMAT=votable&QUERY=SELECT%20*%20from%20vmc_er4_yjks_cepheidCatMetaData_fits_V3%20where%20%20CONTAINS(POINT(%27%27,RA2000,DEC2000),%20CIRCLE(%27%27,80.894167,-69.756111,2.7))=1';
+
+var pessto = 'https://archive.eso.org/tap_cat/sync?REQUEST=doQuery&LANG=ADQL&MAXREC=3&FORMAT=votable&QUERY=SELECT%20*%20from%20safcat.PESSTO_TRAN_CAT_V3%20where%20CONTAINS(POINT(%27%27,TRANSIENT_RAJ2000,TRANSIENT_DECJ2000),%20CIRCLE(%27%27,80.894167,-69.756111,2.7))=1';
+
+ 
+
+A.init.then(() => {
+
+    aladin = A.aladin('#aladin-lite-div', {survey: 'https://alasky.cds.unistra.fr/DSS/DSSColor/', target: 'LMC', fov: 5, showContextMenu: true});
+
+    aladin.addCatalog(A.catalogFromURL('https://vizier.u-strasbg.fr/viz-bin/votable?-source=HIP2&-c=LMC&-out.add=_RAJ,_DEJ&-oc.form=dm&-out.meta=DhuL&-out.max=9999&-c.rm=180', {sourceSize:12, color: '#f08080'}));
+
+ 
+
+    aladin.addCatalog(A.catalogFromURL(vmc_cepheids, {onClick: 'showTable', sourceSize:14, color: '#fff080'}));
+
+ 
+
+    aladin.addCatalog(A.catalogFromURL(pessto, {onClick: 'showPopup', sourceSize:14, color: '#00f080'}));
+    aladin.on('select', (objs) => {
+        console.log(objs, "are selected");
+    })
+
+    aladin.select();
+
+});
+</script>
+</body>
+</html>

examples/al-ellipse.html

@@ -0,0 +1,32 @@
+
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        // Start up Aladin Lite
+        aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'M 31', fov: 3});
+
+
+        var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 3});
+        aladin.addOverlay(overlay);
+        overlay.addFootprints([
+            A.polygon([[83.64287, 22.01713], [83.59872, 22.01692], [83.59852, 21.97629], [83.64295, 21.97629]]),
+            A.polygon([[83.62807, 22.06330], [83.58397, 22.02280], [83.62792, 22.02258]]),
+            A.ellipse(10.6833, 41.2669, 3.33333/2, 1.1798333/2, 35, {color: 'cyan'}),
+            // NGC 3048
+            A.ellipse(180.470842, -18.867589, 5.2/120, 3.1/120, 80, {color: 'cyan'}),
+            // NGC 3049
+            A.ellipse(180.4742, -18.8850, 3.1/120, 1.6/120, 50, {color: 'cyan'}),
+        ]);
+        //overlay.add(); // radius in degrees
+    });
+</script>
+</body>
+</html>

examples/al-eso-catalogs.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    var vmc_cepheids = 'https://archive.eso.org/tap_cat/sync?REQUEST=doQuery&LANG=ADQL&MAXREC=401&FORMAT=votable&QUERY=SELECT%20*%20from%20vmc_er4_yjks_cepheidCatMetaData_fits_V3%20where%20%20CONTAINS(POINT(%27%27,RA2000,DEC2000),%20CIRCLE(%27%27,80.894167,-69.756111,2.7))=1';
+    var pessto = 'https://archive.eso.org/tap_cat/sync?REQUEST=doQuery&LANG=ADQL&MAXREC=3&FORMAT=votable&QUERY=SELECT%20*%20from%20safcat.PESSTO_TRAN_CAT_V3%20where%20CONTAINS(POINT(%27%27,TRANSIENT_RAJ2000,TRANSIENT_DECJ2000),%20CIRCLE(%27%27,80.894167,-69.756111,2.7))=1';
+
+    var aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: 'P/DSS2/red', target: 'LMC', fov: 5});
+        aladin.addCatalog(A.catalogFromURL('https://vizier.u-strasbg.fr/viz-bin/votable?-source=HIP2&-c=LMC&-out.add=_RAJ,_DEJ&-oc.form=dm&-out.meta=DhuL&-out.max=9999&-c.rm=180', {sourceSize:12, color: '#f08080'}));
+        aladin.addCatalog(A.catalogFromURL(vmc_cepheids, {onClick: 'showTable', sourceSize:14, color: '#fff080'}));
+        aladin.addCatalog(A.catalogFromURL(pessto, {onClick: 'showPopup', sourceSize:14, color: '#00f080'}), undefined, true);
+    });
+</script>
+</body>
+</html>

examples/al-event-listeners.html

@@ -0,0 +1,57 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
+<div id='infoDiv'>&nbsp; </div>
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    A.init.then(() => {
+        var aladin = A.aladin('#aladin-lite-div', {target: '05 37 58 +08 17 35', fov: 12, backgroundColor: 'rgb(120, 0, 0)'});
+        var cat = A.catalog({sourceSize: 20});
+        aladin.addCatalog(cat);
+        cat.addSources([A.source(83.784490, 9.934156, {name: 'Meissa'}), A.source(88.792939, 7.407064, {name: 'Betelgeuse'}), A.source(81.282764, 6.349703, {name: 'Bellatrix'})]);
+        var msg;
+
+        // define function triggered when  a source is hovered
+        aladin.on('objectHovered', function(object, xyMouseCoords) {
+            if (object) {
+                msg = 'You hovered object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec + '; mouse coords - x: '
+                    + xyMouseCoords.x + ', y: ' + xyMouseCoords.y;
+            }
+            else {
+                msg = 'No object hovered';
+            }
+            $('#infoDiv').html(msg);
+        });
+
+        aladin.on('objectHoveredStop', function(object, xyMouseCoords) {
+            if (object) {
+                msg = 'You stopped hove object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec + '; mouse coords - x: '
+                    + xyMouseCoords.x + ', y: ' + xyMouseCoords.y;
+            }
+            $('#infoDiv').html(msg);
+        });
+
+        // define function triggered when an object is clicked
+        var objClicked;
+        aladin.on('objectClicked', function(object, xyMouseCoords) {
+            if (object) {
+                objClicked = object;
+                object.select();
+                msg = 'You clicked object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec + '; mouse coords - x: '
+                    + xyMouseCoords.x + ', y: ' + xyMouseCoords.y;
+            }
+            else {
+                objClicked.deselect();
+                msg = 'You clicked in void';
+            }
+            $('#infoDiv').html(msg);
+        });
+    });
+</script>
+</body>
+</html>

examples/al-fill-polygon.html

@@ -0,0 +1,26 @@
+
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        // Start up Aladin Lite
+        aladin = A.aladin('#aladin-lite-div', {fov: 122, showContextMenu: true, fullScreen: true});
+        var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 3});
+
+        aladin.addOverlay(overlay);
+        overlay.addFootprints([A.polygon(
+            [[264.375,-35.68533471265207], [258.75,-30.000000000000018], [264.375,-24.624318352164085], [270,-30.000000000000018]],
+            {color: '#808080', fillColor: '#808080', opacity: .4, lineWidth: 1, fill: true})]);
+
+        aladin.gotoRaDec(264.375,-24.624318352164085);
+    });
+</script>
+</body>
+</html>

examples/al-footprints.html

@@ -0,0 +1,42 @@
+
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        // Start up Aladin Lite
+        aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'M 1', fov: 0.2, showContextMenu: true, fullScreen: true});
+        var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 3});
+        aladin.addOverlay(overlay);
+        overlay.addFootprints([
+            A.polygon([[83.64287, 22.01713], [83.59872, 22.01692], [83.59852, 21.97629], [83.64295, 21.97629]]),
+            A.polygon([[83.62807, 22.06330], [83.58397, 22.02280], [83.62792, 22.02258]]),
+            A.polygon([[8.62807, 220.06330], [83.58397, 10.02280], [150.62792, 87.02258]])
+        ]);
+        overlay.add(A.circle(83.66067, 22.03081, 0.04, {color: 'cyan'})); // radius in degrees
+
+        aladin.on("footprintClicked", (footprint, xyMouseCoords) => {
+            console.log("footprint clicked catched: ", footprint, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
+        })
+        aladin.on("objectClicked", (object, xyMouseCoords) => {
+            console.log("object clicked catched: ", object, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
+        })
+        aladin.on("footprintHovered", (footprint, xyMouseCoords) => {
+            console.log("footprint hovered catched: ", footprint, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
+        })
+        aladin.on("objectHoveredStop", (object, xyMouseCoords) => {
+            console.log("Object hovered stopped: ", object, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
+        })
+
+        const cat = A.catalogFromVizieR('B/assocdata/obscore', 'M 1', 100, {onClick: 'showTable', limit: 1000});
+        aladin.addCatalog(cat);
+    });
+</script>
+</body>
+</html>

examples/al-fov-range.html

@@ -0,0 +1,42 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        var aladin = A.aladin(
+            '#aladin-lite-div',
+            {
+                survey: 'P/allWISE/color', // set initial image survey
+                projection: 'AIT', // set a projection
+                fov: 1.5, // initial field of view in degrees
+                target: 'NGC 2175', // initial target
+                cooFrame: 'galactic', // set galactic frame
+                reticleColor: '#00ff00', // change reticle color
+                reticleSize: 40, // change reticle size
+                gridOptions: {color: 'pink'},
+                showCooGrid: true, // set the grid
+                fullScreen: true,
+                showShareControl: true,
+                showSettingsControl: true,
+                showLayersControl: true,
+                showZoomControl: true,
+                showContextMenu: true,
+                showCooGridControl: true,
+                showSimbadPointerControl: true,
+                showFullscreenControl: true,
+            }
+        );
+
+        aladin.setFoVRange(1, 60)
+    });
+</script>
+
+</body>
+</html>

examples/al-fullscreen.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+    <div>
+<div id="offset" style="display: inline-block; width: 200px; height: 100px"></div>
+<div id="aladin-lite-div" style="display: inline-block; width: 50%"></div>
+</div>
+<!--<script type="text/javascript" src="https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.js" charset="utf-8"></script>-->
+
+
+<script>let aladin, hips</script>
+<script type="module">
+    import A from '../src/js/A.js';
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {projection: 'TAN', cooFrame: 'galactic', showSettingsControl: true, showSimbadPointerControl: true, showContextMenu: true, target: 'galactic center', survey: 'P/Finkbeiner'});
+        // possible values are 'blues', 'cividis', 'cubehelix', 'eosb', 'grayscale', 'inferno', 'magma', 'native', 'parula', 'plasma', 'rainbow',
+        // 'rdbu', 'rdylbu', 'redtemperature', 'sinebow', 'spectral', 'summer', 'viridis', 'ylgnbu' and 'ylorbr'
+
+        //aladin.getBaseImageLayer().setColor([1.0, 0.0, 1.0, 1.0], { tf: 'Linear'} );
+    });
+</script>
+
+</body>
+</html>

examples/al-gaiadr3.html

@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+
+    <meta charset="utf-8">
+    <!-- Recommendation for users smartphone/tablets users -->
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
+    <title>Explore Gaia DR3 in Aladin Lite</title>
+  </head>
+
+  <body>
+    <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+    <form class="pure-form pure-form-stacked">
+        <fieldset>
+          <label for="option-gdr3-flux-color-map" class="pure-radio">
+            <input id="option-gdr3-flux-color-map" type="radio" name="img-hips" value="CDS/P/DM/flux-color-Rp-G-Bp/I/350/gaiaedr3">
+            Gaia DR3 flux map
+          </label>
+          <label for="option-gdr3-density-map" class="pure-radio">
+            <input id="option-gdr3-density-map" type="radio" name="img-hips" value="CDS/P/DM/I/350/gaiaedr3" checked>
+            Gaia DR3 density map
+          </label>
+          <label for="option-DSS-map" class="pure-radio">
+            <input id="option-DSS-map" type="radio" name="img-hips" value="P/DSS2/color">
+            DSS Color
+          </label>
+          <label for="option-PS1-map" class="pure-radio">
+            <input id="option-PS1-map" type="radio" name="img-hips" value="P/PanSTARRS/DR1/color-z-zg-g">
+            Pan-STARRS
+          </label>
+
+        </fieldset>
+      </form>
+
+  </body>
+
+  <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
+  <script type="module">
+    import A from '../src/js/A.js';
+    var curSelectedSource = null;
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', { fov: 100, cooFrame: 'galactic', fullscreen: true, showSimbadPointerControl: true });
+        aladin.gotoRaDec(297.87, 25.96);
+        aladin.setProjection('MOL');
+
+        const fluxMap = aladin.createImageSurvey('gdr3-color-flux-map', 'Gaia DR3 flux map', 'https://alasky.u-strasbg.fr/ancillary/GaiaEDR3/color-Rp-G-Bp-flux-map', 'equatorial', 7);
+        const densityMap = aladin.createImageSurvey('gdr3-density-map', 'Gaia DR3 density map', 'https://alasky.u-strasbg.fr/ancillary/GaiaEDR3/density-map', 'equatorial', 7, {imgFormat: 'fits'});
+
+        aladin.setImageSurvey(densityMap);
+
+        var hipsCats = {
+            //'gdr3': A.catalogHiPS('https://axel.u-strasbg.fr/HiPSCatService/I/355/gaiadr3', { name: 'Gaia DR3 sources', shape: 'circle', sourceSize: 8, color: '#d66bae' }),
+            'simbad': A.catalogHiPS('https://axel.u-strasbg.fr/HiPSCatService/Simbad', { name: 'Simbad', color: '#6dbdce' })
+        };
+
+        hipsCats['simbad'].hide();
+
+        aladin.addCatalog(hipsCats['simbad']);
+        //aladin.addCatalog(hipsCats['gdr3']);
+
+        //cmDensMapChanged = false;
+        // listen changes on HiPS image background selection
+        $('input[type=radio][name=img-hips]').change(function () {
+            if (this.value == 'CDS/P/DM/I/350/gaiaedr3') {
+                aladin.setBaseImageLayer(densityMap);
+            }
+            else if (this.value == "CDS/P/DM/flux-color-Rp-G-Bp/I/350/gaiaedr3") {
+                aladin.setBaseImageLayer(fluxMap);
+            } else {
+                aladin.setBaseImageLayer(this.value)
+            }
+        });
+
+        // listen changes on HiPS catalogues selection
+        $('#overlay-form :checkbox').change(function () {
+            var cat = hipsCats[this.value];
+
+            if (this.checked) {
+                cat.show();
+            }
+            else {
+                cat.hide();
+            }
+        });
+
+        // listen to click on objects
+        aladin.on('objectClicked', function (source, xyMouseCoords) {
+            var html = '<table class="pure-table">';
+
+            if (curSelectedSource != null) {
+                curSelectedSource.deselect();
+            }
+            if (source == null) {
+                $('#explain').html('');
+                $('#explain').hide();
+                return;
+            }
+
+            source.select();
+            curSelectedSource = source;
+            html += '<tbody>';
+            if (source.catalog.name !== 'Simbad') {
+                html += '<h3>Gaia DR3 <em>' + source.data.Source + '</em></h3>';
+                html += '<tr class="pure-table-odd"><td><b>ra</b></td><td>' + source.data.RAdeg + '</td><td><em>deg</em></td></tr>';
+                html += '<tr><td><b>dec</b></td><td>' + source.data.dec + '</td><td><em>deg</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>parallax</b></td><td>' + source.data['parallax'] + '</td><td><em>mas</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>pmra</b></td><td>' + source.data['pmra'] + '</td><td><em>mas/yr</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>pmdec</b></td><td>' + source.data['pmdec'] + '</td><td><em>mas/yr</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>Gmag</b></td><td>' + source.data['phot_g_mean_mag'] + '</td><td><em>mag</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>Bpmag</b></td><td>' + source.data['phot_bp_mean_mag'] + '</td><td><em>mag</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>Rpmag</b></td><td>' + source.data['phot_rp_mean_mag'] + '</td><td><em>mag</em></td></tr>';
+                html += '</tbody>';
+                html += '</table>';
+
+                html += '<br/><a target="_blank" href="https://vizier.u-strasbg.fr/viz-bin/VizieR-5?-out.form=%2bH&-source=I/350/gaiaedr3&Source=' + source.data.source_id + '">More details</a>';
+            }
+            else {
+                console.log(source.data);
+                html += '<h3>Simbad object <em>' + source.data.main_id + '</em></h3>';
+                html += '<tr class="pure-table-odd"><td><b>ra</b></td><td>' + source.data.ra + '</td><td><em>deg</em></td></tr>';
+                html += '<tr><td><b>dec</b></td><td>' + source.data.dec + '</td><td><em>deg</em></td></tr>';
+                html += '<tr><td><b>main_type</b></td><td>' + source.data.main_type + '</td><td><em>deg</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>pmra</b></td><td>' + source.data.pmra + '</td><td><em>mas/yr</em></td></tr>';
+                html += '<tr><td><b>pmdec</b></td><td>' + source.data.pmdec + '</td><td><em>mas/yr</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>parallax</b></td><td>' + source.data.plx + '</td><td><em>mas</em></td></tr>';
+                html += '<tr><td><b>B mag.</b></td><td>' + source.data.B + '</td><td><em>mag</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>V mag.</b></td><td>' + source.data.V + '</td><td><em>mag</em></td></tr>';
+                html += '</tbody>';
+                html += '</table>';
+
+                html += '<br/><a target="_blank" href="https://simbad.u-strasbg.fr/simbad/sim-id?Ident=' + encodeURIComponent(source.data.main_id) + '">More details</a>';
+            }
+
+
+            $('#explain').html(html);
+            $('#explain').show();
+
+        });
+    });
+</script>
+</html>

examples/al-gotoobject.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+    <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: "P/DSS2/color", fov:1, showCooGridControl:true});
+        aladin.gotoObject('M 10');
+    });
+</script>
+</body>
+</html>

examples/al-gw.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+    <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+    <script>    var aladin;
+    </script>
+ <script type="module">
+    import A from '../src/js/A.js';
+    //let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {showReticle: true, showSurveyStackControl: true, showOverlayStackControl: false, projection: "TAN", target: '15 16 57.636 -60 55 7.49', showProjectionControl: true, realFullscreen: true, showZoomControl: true, showSimbadPointerControl: true, showShareControl: true, showContextMenu: true, showCooGridControl: true, fullScreen: true, showCooGrid: true, fov: 90});
+                
+        var moc_0_99 = A.MOCFromURL("./data//gw/gw_0.9.fits",{ name: "GW 90%", color: "#ff0000", opacity: 0.0, lineWidth: 3, fill: false, perimeter: true});
+        var moc_0_95 = A.MOCFromURL("./data/gw/gw_0.6.fits",{ name: "GW 60%", color: "#00ff00", opacity: 0.5, lineWidth: 3, fill: true, perimeter: true});
+        var moc_0_5 = A.MOCFromURL("./data/gw/gw_0.3.fits",{ name: "GW 30%", color: "#00ffff", opacity: 0.5, lineWidth: 3, fill: true, perimeter: true});
+        var moc_0_2 = A.MOCFromURL("./data/gw/gw_0.1.fits",{ name: "GW 10%", color: "#ff00ff", opacity: 0.5, lineWidth: 3, fill: true, perimeter: true});
+
+        aladin.addMOC(moc_0_99);
+        aladin.addMOC(moc_0_95);
+        aladin.addMOC(moc_0_5);
+        aladin.addMOC(moc_0_2);
+    });
+</script>
+</body>
+</html>

examples/al-hips-from-url.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: 'http://alasky.cds.unistra.fr/ancillary/GaiaDR2/hips-density-map/', target: 'galactic center'});
+    });
+</script>
+
+</body>
+</html>

examples/al-hips-local.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {target: 'galactic center'});
+        
+        let survey = aladin.createImageSurvey('hips gaia', "hips gaia name", "data/hips/gaia", undefined, undefined, {colormap:"viridis"});
+        aladin.setBaseImageLayer(survey);
+    });
+</script>
+
+</body>
+</html>

examples/al-hips-order-list.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: 'http://alasky.cds.unistra.fr/ancillary/GaiaDR2/hips-density-map/', showProjectionControl: true, showContextMenu: true, showStatusBar: true, fullScreen: true, target: 'galactic center'});
+
+        const fluxMap = aladin.createImageSurvey('gdr3-color-flux-map', 'Gaia DR3 flux map', 'https://alasky.u-strasbg.fr/ancillary/GaiaEDR3/color-Rp-G-Bp-flux-map', 'equatorial', 7);
+        const densityMap = aladin.createImageSurvey('gdr3-density-map', 'Gaia DR3 density map', 'sdfsg', 'equatorial', 7, {formats: ['fits']});
+        const decaps = aladin.createImageSurvey("decaps", "DECaPS DR1", "http://alasky.u-strasbg.fr/DECaPS/DR1/color/", "equatorial", 11, {formats: ['png'], tileSize: 512});
+        const panstarrs = aladin.createImageSurvey("panstarrs", "PanSTARRS", "http://alasky.u-strasbg.fr/Pan-STARRS/DR1/color-i-r-g/", "equatorial", 11, {formats: ['jpg']});
+
+        aladin.setOverlayImageLayer(fluxMap)
+        aladin.setOverlayImageLayer(densityMap, "density")
+        aladin.setOverlayImageLayer(decaps, "decaps")
+        aladin.setOverlayImageLayer(panstarrs, "panstarrs")
+   });
+</script>
+
+</body>
+</html>

examples/al-image-hips.html

@@ -0,0 +1,34 @@
+
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+
+    A.init.then(() => {
+        // Start up Aladin Lite
+        let aladin = A.aladin('#aladin-lite-div', {target: 'Sgr a*', fov: 0.5, showContextMenu: true});
+        let survey1 = aladin.getBaseImageLayer();
+        survey1.setColormap('magma', {stretch: 'linear'});
+        
+        let survey2 = aladin.newImageSurvey("CDS/P/2MASS6X/H");
+        aladin.setImageLayer(survey2)
+        survey2.setColormap('rdbu', {stretch: 'asinh'});
+        
+        let survey3 = aladin.newImageSurvey("https://alasky.cds.unistra.fr/CFHTLS-T0007b/Deep/UALLSKY/");
+        aladin.setImageLayer(survey3)
+        survey3.setColormap('cubehelix', {stretch: 'linear'});
+
+        aladin.setImageLayer(survey2);
+        aladin.setImageLayer(survey3);
+        aladin.setImageLayer(survey3);
+
+        //aladin.setOverlayImageLayer(survey2);
+    });
+</script>
+</body>
+</html>

examples/al-image-layer-by-name.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: 'P/allWISE/color', target: 'galactic center'});
+    });
+</script>
+
+</body>
+</html>

examples/al-imcce-vot.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+  import A from '../src/js/A.js';
+  let aladin;
+  A.init.then(() => {
+      // Start up Aladin Lite
+      aladin = A.aladin('#aladin-lite-div', {
+        target: '09 55 52.4 +69 40 47',
+        fov: 0.25,
+        showContextMenu: true,
+        fullScreen: true,
+        showSimbadPointerControl: true,
+      });
+
+      aladin.addCatalog(A.catalogFromURL('./data/votable/IMCCE.with_namespace.vot', {onClick: 'showTable', limit: 1000}));
+  });
+</script>
+
+</body>
+</html>

examples/al-init-custom-options.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    var aladin;
+
+    A.init.then(() => {
+        aladin = A.aladin(
+            '#aladin-lite-div',
+            {
+                survey: 'P/allWISE/color', // set initial image survey
+                projection: 'AIT', // set a projection
+                fov: 1.5, // initial field of view in degrees
+                target: 'NGC 2175', // initial target
+                cooFrame: 'galactic', // set galactic frame
+                reticleColor: '#00ff00', // change reticle color
+                reticleSize: 40, // change reticle size
+                gridOptions: {color: 'pink'},
+                showCooGrid: true, // set the grid
+                fullScreen: true,
+                showShareControl: true,
+                showSettingsControl: true,
+                showLayersControl: true,
+                showZoomControl: true,
+                showContextMenu: true,
+                showCooGridControl: true,
+                //showSimbadPointerControl: true,
+                showFullscreenControl: true,
+            }
+        );
+    });
+</script>
+
+</body>
+</html>

examples/al-jwst.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin(
+            '#aladin-lite-div',
+            {
+                projection: 'AIT', // set a projection
+                fov: 0.06, // initial field of view in degrees
+                target: '110.82730 -73.45471', // initial target
+                cooFrame: 'equatorial', // set galactic frame
+                showCooGrid: true, // set the grid
+                fullScreen: true,
+            }
+        );
+
+        aladin.setOverlayImageLayer("https://alasky.cds.unistra.fr/JWST/CDS_P_JWST_deep_field_smacs0723-5mb")
+    });
+</script>
+
+</body>
+</html>

examples/al-load-votables-by-url.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    A.init.then(() => {
+        var aladin = A.aladin('#aladin-lite-div', {survey: 'P/DSS2/red', target: 'LMC', fov: 5});
+        aladin.addCatalog(A.catalogFromURL('https://vizier.u-strasbg.fr/viz-bin/votable?-source=HIP2&-c=LMC&-out.add=_RAJ,_DEJ&-oc.form=dm&-out.meta=DhuL&-out.max=9999&-c.rm=180', {sourceSize:12, color: '#f08080'}));        
+    });
+</script>
+</body>
+</html>

examples/al-marker-creation.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    A.init.then(() => {
+        let a = A.aladin('#aladin-lite-div', {target: '03 47 00.00 +24 07 00.0', survey: 'P/DSS2/color', zoom: 2, showReticle: false});
+        var cat = A.catalog({name: 'Some markers', sourceSize: 18});
+        a.addCatalog(cat);
+
+        cat.addSources([A.marker(56.87115, 24.10514, {popupTitle: 'Alcyone', popupDesc: '<em>Bmag:</em> 2.806<br/><em>Spectral type:</em> B7III<br/>More info <a target="_blank" href="https://simbad.u-strasbg.fr/simbad/sim-id?Ident=NAME%20ALCYONE&submit=submit">in Simbad</a>'})]);
+        cat.addSources([A.marker(57.29673, 24.13671, {popupTitle: 'Pleione', popupDesc: '<em>Bmag:</em> 4.97<br/><em>Spectral type:</em> B8vne<br/>More info <a target="_blank" href="https://simbad.u-strasbg.fr/simbad/sim-id?Ident=NAME+PLEIONE&NbIdent=1">in Simbad</a>'})]);
+        cat.addSources([A.marker(56.58156, 23.94836, {popupTitle: 'Merope', popupDesc: '<em>Bmag:</em> 4.113<br/><em>Spectral type:</em> BVI4e<br/>More info <a target="_blank" href="https://simbad.u-strasbg.fr/simbad/sim-id?Ident=V*+V971+Tau&NbIdent=1">in Simbad</a>'})]);
+        cat.addSources([A.marker(56.45669, 24.36775, {popupTitle: 'Maia', popupDesc: '<em>Bmag:</em> 3.812<br/><em>Spectral type:</em> B8III<br/>More info <a target="_blank" href="https://simbad.u-strasbg.fr/simbad/sim-id?Ident=NAME+MAIA&NbIdent=1">in Simbad</a>'})]);
+        cat.addSources([A.marker(56.21890, 24.11334, {popupTitle: 'Electra', popupDesc: '<em>Bmag:</em> 3.612<br/><em>Spectral type:</em> B6IIIe<br/>More info <a target="_blank" href="https://simbad.u-strasbg.fr/simbad/sim-id?Ident=NAME+ELECTRA&NbIdent=1">in Simbad</a>'})]);
+        cat.addSources([A.marker(57.29059, 24.05342, {popupTitle: 'Atlas', popupDesc: '<em>Bmag:</em> 3.54<br/><em>Spectral type:</em> B8III<br/>More info <a target="_blank" href="https://simbad.u-strasbg.fr/simbad/sim-id?Ident=NAME+ATLAS&NbIdent=1">in Simbad</a>'})]);
+        cat.addSources([A.marker(56.30207, 24.46728, {popupTitle: 'Taygeta', popupDesc: '<em>Bmag:</em> 4.199<br/><em>Spectral type:</em> B6IV<br/>More info <a target="_blank" href="https://simbad.u-strasbg.fr/simbad/sim-id?Ident=NAME+TAYGETA&NbIdent=1">in Simbad</a>'})]);
+    });
+</script>
+</body>
+</html>

examples/al-mars-features.html

@@ -0,0 +1,65 @@
+<!doctype html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {fov: 180, fullScreen: true, cooFrame: 'equatorial', showCooGridControl: true, showSimbadPointerControl: true, showContextMenu: true, showCooGrid: false, survey: 'CDS/P/Mars/THEMIS-Day-100m-v12'});
+        aladin.setProjection('SIN');
+
+
+        const drawFunction = function(source, canvasCtx, viewParams) {
+            canvasCtx.beginPath();
+            canvasCtx.arc(source.x, source.y, 4, 0, 2 * Math.PI, false);
+            canvasCtx.closePath();
+            canvasCtx.strokeStyle = '#38c';
+            canvasCtx.lineWidth = 3;
+            canvasCtx.globalAlpha = 0.7,
+            canvasCtx.stroke();
+            const fov = Math.max(viewParams['fov'][0], viewParams['fov'][1]);
+
+            // object name is displayed only if fov<15°
+            if (fov>15) {
+                return;
+            }
+
+            canvasCtx.globalAlpha = 1;
+
+            const xShift = 10;
+
+            canvasCtx.font = '15px Arial'
+            canvasCtx.fillStyle = '#eee';
+            canvasCtx.strokeStyle = '#222';
+            canvasCtx.lineWidth = 1;
+
+            canvasCtx.fillText(source.data['Feature_Name'], source.x + xShift, source.y -4);
+            //canvasCtx.strokeText(source.data['Feature Name'], source.x + xShift, source.y -4);
+
+            // object type is displayed only if fov<5°
+            if (fov>5) {
+                return;
+            }
+            canvasCtx.font = '12px Arial'
+            canvasCtx.fillStyle = '#abc';
+            canvasCtx.strokeStyle = '#222';
+            canvasCtx.lineWidth = 1;
+            canvasCtx.fillText(source.data['Feature_Type'], source.x + 2 + xShift, source.y + 10);
+            //canvasCtx.strokeText(source.data['Feature Type'], source.x + 2 + xShift, source.y + 10);
+        };
+
+        aladin.addCatalog(A.catalogFromURL('https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/data/mars-features.xml', {name: "Mars features", raField: 'Longitude', decField: 'Latitude', shape: drawFunction, onClick: 'showTable'}));
+
+        aladin.getBaseImageLayer().setColormap('yiorbr')
+        aladin.gotoRaDec(226.1433542, 18.6308694);
+
+    });
+</script>
+
+</body>
+</html>

examples/al-mars.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {target: '240 +10.65', cooFrame: 'j2000d', fov: 90, showFrame: false, showCooGrid: true, showLayersControl: false, showGotoControl: false, fullScreen: true, showContextMenu: true});
+        var mars = aladin.createImageSurvey('Mars', 'Mars', 'https://alasky.u-strasbg.fr/Planets/Mars_Viking_MDIM21/', 'j2000', 5);
+        aladin.setImageSurvey(mars);
+        
+        var c = document.createElement('canvas'); c.width = c.height = 11; var ctx = c.getContext('2d'); ctx.beginPath(); ctx.arc(5, 5, 4, 0, 2 * Math.PI, false); ctx.closePath(); ctx.strokeStyle = '#ccc'; ctx.lineWidth = 2; ctx.stroke();
+        
+        var geoFeatures = A.catalog({shape: c, labelColumn: 'name', displayLabel: true, labelColor: '#fff', labelFont: '14px sans-serif'});
+        aladin.addCatalog(geoFeatures);
+        
+        geoFeatures.addSources(A.source(226.2, 18.65, {name: 'Olympus Mons'}));
+        geoFeatures.addSources(A.source(70.5, -42.4, {name: 'Hellas Planitia'}));
+        geoFeatures.addSources(A.source(250.4, 40.5, {name: 'Alba Mons'}));
+        geoFeatures.addSources(A.source(-59.2, -13.9, {name: 'Valles Marineris'}));
+        geoFeatures.addSources(A.source(147.21, 25.02, {name: 'Elysium Mons'}));
+        geoFeatures.addSources(A.source(316.0, -49.7, {name: 'Argyre Basin'}));
+        geoFeatures.addSources(A.source(32.53, 70, {name: 'Vastitas Borealis'}));
+        geoFeatures.addSources(A.source(-112.58, 1.57, {name: 'Tharsis Montes'}));
+        geoFeatures.addSources(A.source(298, 25, {name: 'Outflow channels'}));
+        geoFeatures.addSources(A.source(30, 19.79, {name: 'Arabia Terra'}));
+        geoFeatures.addSources(A.source(70.5, -42.4, {name: 'Hellas Basin'}));
+        geoFeatures.addSources(A.source(280, 45, {name: 'Tempe Terra'}));
+        geoFeatures.addSources(A.source(87, 12.9, {name: 'Isidis Basin'}));
+        geoFeatures.addSources(A.source(117.5, 46.7, {name: 'Utopia Basin'}));
+        geoFeatures.addSources(A.source(350, -45, {name: 'Noachis Terra'}));
+        
+        var landingSites = A.catalog({sourceSize: 16});
+        aladin.addCatalog(landingSites);
+        
+        landingSites.addSources([A.marker(-47.95, 22.27, {popupTitle: 'Viking 1', popupDesc: 'Landing date: July 20, 1976 11:53:06'})]);
+        landingSites.addSources([A.marker(-125.7, 68.22, {popupTitle: 'Phoenix', popupDesc: 'Landing date: May 25, 2008 23:53:44 UTC'})]);
+        landingSites.addSources([A.marker(-33.22, 19.13, {popupTitle: 'Pathfinder', popupDesc: 'Landing date: July 4, 1997 16:56:55 UTC'})]);
+        landingSites.addSources([A.marker(354.4734, -1.9462, {popupTitle: 'Opportunity', popupDesc: 'Landing date: January 25, 2004, 05:05 UTC'})]);
+        landingSites.addSources([A.marker(-225.71, 47.64, {popupTitle: 'Viking 2', popupDesc: 'Landing date: September 3, 1976 22:37:50'})]);
+        landingSites.addSources([A.marker(175.472636, -14.5684, {popupTitle: 'Spirit', popupDesc: 'Landing date: January 4, 2004, 04:35 UTC '})]);
+        landingSites.addSources([A.marker(137.4417, -4.5895, {popupTitle: 'Curiosity', popupDesc: 'Landing date: August 6, 2012, 05:17 UTC '})]) 
+    });
+</script>
+</body>
+</html>

examples/al-moc-isophot.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+    <div id="aladin-lite-div" style="width: 1024px; height: 768px">
+      <div id="ui" class="ui">
+      </div>
+    </div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {target: '00 00 00 +07 00 00', fov: 130, survey: 'P/ISOPHOT/170'});
+        var moc = A.MOCFromURL('https://cds.unistra.fr/~boch/MOC-ISOPHOT.fits', {color: '#84f', lineWidth: 1, opacity: 1.0}, (moc) => {
+            // moc is ready
+            console.log(moc.contains(205.9019247, +2.4492764));
+            console.log(moc.contains(-205.9019247, +2.4492764));
+
+        });
+        aladin.addMOC(moc);
+    });
+</script>
+</body>
+</html>

examples/al-moc-json.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+    <div id="aladin-lite-div" style="width: 1024px; height: 768px">
+      <div id="ui" class="ui">
+      </div>
+    </div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {target: 'LMC', fov: 55});
+        var json = {"3":[517],
+        "4":[2065,2066,2067,2112,2344,2346,2432],
+        "5":[8221,8257,8258,8259,8293,8304,8305,8307,8308,8452,8456,9346,9352,9354,9736],
+        "6":[32861,32862,32863,32881,32882,32883,32892,32893,33025,33026,33027,33157,33168,33169,33171,
+        33181,33224,33225,33227,33236,33240,33812,33816,33828,33832,37377,37378,37379,37382,37388,
+        37390,37412,37414,37420,37422,37562,38928,38930,38936,38948,38952],
+        "7":[131423,131439,131443,131523,131556,131557,131580,131581,132099,132612,132613,132624,132625,132627,132637,
+        132680,132681,132683,132709,132720,132721,132904,132905,132948,132952,132964,132968,133008,133009,133012,135252,135256,135268,135316,135320,135332,135336,148143,148152,148154,149507,149520
+        ,149522,149523,149652,149654,149660,149662,149684,149686,149692,149694,149695,150120,150122,150208,150210,150216,150218,150240,150242,150243,155748,155752,155796,155800,155812,155816]};
+        //var json = {"3":[517],
+        //"4":[2065, 2067]};        
+        
+        var moc = A.MOCFromJSON(json, {opacity: 0.25, color: 'magenta', lineWidth: 1, adaptativeDisplay: false});
+        aladin.addMOC(moc);
+    });
+</script>
+</body>
+</html>