Closed
Description
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?