Skip to content

embedding tutorial #986

Closed
Closed
@jjon

Description

@jjon

Maybe not an 'issue', but just me being obtuse: While trying out embedding (which is, by the way, extremely cool), and trying to follow the tutorial exactly, I came across the following hitches in my gitalong:

I hope I violate no convention by including the whole page here, it's not clear whether I can attach a file to an 'issue'

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Embedded Visualisations - brat rapid annotation tool</title>
        <link rel="stylesheet" type="text/css" href="./brat/style-vis.css"/>
        <script type="text/javascript" src="./brat/client/lib/head.load.min.js"></script>
        <script type="text/javascript">
            var bratLocation = './brat';
            head.js(
                // External libraries
                bratLocation + '/client/lib/jquery.min.js',
                bratLocation + '/client/lib/jquery.svg.min.js',
                bratLocation + '/client/lib/jquery.svgdom.min.js',

                // brat helper modules
                bratLocation + '/client/src/configuration.js',
                bratLocation + '/client/src/util.js',
                bratLocation + '/client/src/annotation_log.js',
                bratLocation + '/client/lib/webfont.js',

                // brat modules
                bratLocation + '/client/src/dispatcher.js',
                bratLocation + '/client/src/url_monitor.js',
                bratLocation + '/client/src/visualizer.js'
            );

            var webFontURLs = [
                bratLocation + '/static/fonts/Astloch-Bold.ttf',
                bratLocation + '/static/fonts/PT_Sans-Caption-Web-Regular.ttf',
                bratLocation + '/static/fonts/Liberation_Sans-Regular.ttf'
            ];

            var collData = {
                entity_types: [ {
                        type: 'Person',
                        /* The labels are used when displaying the annotion, in this case
                            we also provide a short-hand "Per" for cases where
                            abbreviations are preferable */
                        labels: ['Person', 'Per'],
                        // Blue is a nice colour for a person?
                        bgColor: '#7fa2ff',
                        // Use a slightly darker version of the bgColor for the border
                        borderColor: 'darken'
                } ]
            };

            var docData = {
                // Our text of choice
                text: "Ed O'Kelley was the man who shot the man who shot Jesse James.",
                // The entities entry holds all entity annotations
                entities: [
                    /* Format: [${ID}, ${TYPE}, [[${START}, ${END}]]]
                        note that range of the offsets are [${START},${END}) */
                    ['T1', 'Person', [[0, 11]]],
                    ['T2', 'Person', [[20, 23]]],
                    ['T3', 'Person', [[37, 40]]],
                    ['T4', 'Person', [[50, 61]]],
                ],
            };

            head.ready(function() {
                Util.embed(
                    // id of the div element where brat should embed the visualisations
                    'vizdiv',
                    // object containing collection data
                    collData,
                    // object containing document data
                    docData,
                    // Array containing locations of the visualisation fonts
                    webFontURLs
                    );
            });
        </script>
    </head>
    <body>
        <div id="vizdiv"></div>
    </body>
</html>

Doing this on localhost, I point my browser at the page above, no SVG is generated. head.js seems to load everything successfully, an SVG element is generated in vizdiv, but it's not populated with anything. I'm get the following errors and warnings in the console:

Uncaught TypeError: Cannot read property 'arc_bundle' of undefined visualizer.js:3132
Resource interpreted as Stylesheet but transferred with MIME type application/x-font-ttf: "http://localhost/Sites/brat/static/fonts/Astloch-Bold.ttf". webfont.js:17
Resource interpreted as Stylesheet but transferred with MIME type application/x-font-ttf: "http://localhost/Sites/brat/static/fonts/PT_Sans-Caption-Web-Regular.ttf". webfont.js:17
Resource interpreted as Stylesheet but transferred with MIME type application/x-font-ttf: "http://localhost/Sites/brat/static/fonts/Liberation_Sans-Regular.ttf". webfont.js:17
font loading: Astloch n4 visualizer.js:3178
font loading: PT Sans Caption n4 visualizer.js:3178
font loading: Liberation Sans n4 visualizer.js:3178
font active:  PT Sans Caption n4 visualizer.js:3174
font active:  Liberation Sans n4 visualizer.js:3174
Timeout in loading fonts visualizer.js:3184

probably just something obvious I'm missing right?

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions