search

annotorious / annotorious-v2-plugins

Plugins compatible with the RecogitoJS, Annotorious and AnnotoriousOSD annotation libraries
BSD 3-Clause "New" or "Revised" License
29 stars 19 forks source link

Annotorious Toolbar settings #50

Open SilverSaan opened 3 months ago

SilverSaan commented 3 months ago

Made a minimal setup with OpenSeaDragon, OSD Annotorious Plugin and the Toolbar and tried to add the setting withMouse:true and withTooltip:true Neither the button mouse appears or Tooltips appear on hover, are those features dev only? Do I have to install something else for them to work? The example was basically copypasted from the one in /src

(Running on Apache with XAMPP) 

<!DOCTYPE html>
<html>
  <head>
    <title>Annotorious | Toolbar</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/openseadragon@4.1/build/openseadragon/openseadragon.min.js"></script>    
<script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-openseadragon@latest/dist/openseadragon-annotorious.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/annotorious-openseadragon@latest/dist/annotorious.min.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-toolbar@latest/dist/annotorious-toolbar.min.js"></script>

    <style>
      html, body, #osd-image {
        padding:0;
        margin:0;
        width:100%;
        height:100%;
      }
    </style>
  </head>
  <body>
    <div id="toolbar-container"></div>
    <div id="osd-image"></div>
    <script>
      window.onload = function() {
        // Initialize OpenSeadragon
        var viewer = OpenSeadragon({
          id: "osd-image",
          prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon@4.1/build/openseadragon/images/",
          tileSources: {
            type: "image",
            url: "image.png" 
          }
        });

        var anno = OpenSeadragon.Annotorious(viewer);
        Annotorious.Toolbar(anno, document.getElementById('toolbar-container'), { withMouse: true,withTooltip:true });
      }
    </script>
  </body>
</html>