Read Owl File
141 views
Skip to first unread message
Alexander Ceballos
Aug 2, 2013, 11:56:00 AM8/2/13
to ontolog...@googlegroups.com
Hello, I have a owl file, I just need to read and show the results on a DIV, but I have no idea, I tried like this, but there's no results.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/jOWL.css" type="text/css"/>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.tooltip.js"></script>
<script type="text/javascript" src="scripts/jOWL.js"></script>
<script type="text/javascript" src="scripts/jOWL_UI.js"></script>
<script type="text/javascript">
$(document).ready(function() {
jOWL.load('data/ontology.owl', function(){
//once loaded, remove the loading display
$('.loader').hide(); $('#demo').show();
//initialize UI components
var tree = $('#treeview').owl_treeview({rootThing: true});
//tooltip requires jquery.tooltip.js script
var tooltip = $('#thingtooltip').owl_propertyLens({
tooltip : true,
"sparql-dl:PropertyValue(owl:'computer', ?instance, ?subject)": { sort: "?subject" }
});
var individuals = $('#individuals').owl_propertyLens({
chewsize : 100,
onChange : {
"owl:Thing": function(source, target, resourcebox){
tooltip.display(target, this);
}
}
});
var navbar = $('#navbar').owl_navbar();
var autocomplete = $('#owlauto').owl_autocomplete({focus : true, chars : 2, filter : 'Class'});
//making sure components respond to each others input:
navbar.addListener([individuals, tree]);
autocomplete.addListener([navbar, individuals, tree]);
tree.addListener([individuals, navbar]);
//set focus on the text input for user.
$('#owlauto').focus();
//fire up the components, on the owl Class wine
var wine = jOWL("whitewine");
navbar.propertyChange(wine);
navbar.broadcast(wine);
}, {reason : true});
});
</script>
</head>
<body>
<div class="container">
<div class="column span-24">
<div class="background">
</div>
</div>
<div id="widget" class="column span-12">
<div class="loader" >
<div>Loading...</div>
<img src="http://ontologyonline.org/img/ajax-loader.gif" alt="Loading Image"/>
</div>
<div id="demo" style="display:none;" class="column span-12">
<div class="column span-6 first">
<div id="navbar" class="ui-widget-content">
<h4 class="ui-dialog-titlebar ui-state-default">Navigation Bar</h4>
</div>
<input id="owlauto" type="text" size="40" style="display:block;width:99%;margin:5px 0px;" title="enter a search term"/>
</div>
<div class="column span-6 last">
<div id="individuals" class="ui-widget-content resourcebox" data-jowl="owl:Class">
<h4 class="ui-dialog-titlebar ui-state-default">Direct Individuals</h4>
<div class="jowl-content">
<div class="propertybox ui-state-hover" data-jowl="rdfs:label">${rdfs:label}</div>
<div class="propertybox" data-jowl="sparql-dl:DirectType(?x, owl:Class)">${?x}</div>
</div>
</div>
<div id="thingtooltip" class="resourcebox" data-jowl="owl:Thing">
<div class="propertybox" data-jowl="rdfs:comment">${rdfs:comment}</div>
<div class="propertybox">
<div data-jowl="sparql-dl:PropertyValue(owl:Thing, ?y, ?z)">
<span class="alt">${?y}</span><span>: </span><span>${?z}</span>
</div>
</div>
</div>
<div id="treeview" class="ui-widget-content" style="margin-top:5px;">
<h4 class="ui-dialog-titlebar ui-state-default">Treeview</h4>
</div>
</div>
</div>
</div>
<div class="column span-10 last" style="margin-left:10px;">
</div>
<hr class="space"/><hr />
<div class="column span-24">
<div class="column span-12 first">
<h3>On Site Demo's</h3>
Reasoning over Individuals:
<ul>
<li><a href="http://jowl.ontologyonline.org/SPARQL-DL.html">SPARQL-DL querying</a></li>
<li>The <a href="http://jowl.ontologyonline.org/product_demo.html">Semantic Warehouse</a></li>
<li><a title="jOWL wine demo" href="http://jowl.ontologyonline.org/wine_demo.html">jOWL wine reasoning demo</a></li>
<li><a title="Simile Exhibit Demo" href="http://jowl.ontologyonline.org/jOWLExhibit.html">Using Simile Exhibit for visualisation</a>, and jOWL for data loading and reasoning.</li>
</ul>
Online Client-side Ontology Browsing:
<ul>
<li>The <a title="jOWL Ubiquity" href="http://jowl.ontologyonline.org/jOWLBrowser.html">Generic jOWL Ontology Browser</a>, stand-alone, but also used with the Ubiquity command:</li>
<li>Loading Ontologies from other domains: the <a href="http://jowl.ontologyonline.org/Ubiquity.html">jOWL Ubiquity command</a> (Firefox) to visualize any external ontology</li>
<li>The <a title="Basic Formal Ontology" href="http://jowl.ontologyonline.org/bfo.html">Basic Formal Ontology - BFO</a></li>
<li>The <a title="Ontology for Biomedical Investigations" href="http://jowl.ontologyonline.org/obi.html">Ontology for Biomedical Investigations - OBI</a></li>
</ul>
Advanced Visualisations
<ul>
<li><a href="http://jowl.ontologyonline.org/HyperBolicTree.html">HyperBolic tree visualization</a>, with the help of the <a href="http://blog.thejit.org/javascript-information-visualization-toolkit-jit/">JIT</a> library.</li>
<li><a href="http://jowl.ontologyonline.org/TouchGraph.html">Force Directed Graph Layout</a> (TouchGraph). Experimental & custom-made visualization.</li>
</ul>
RDfa related
<ul>
<li>The <a href="http://jowl.ontologyonline.org/documentation.html">jOWL Documentation</a> serves as a demo on it's own, OWL-DL syntax is embedded into the html file by means of RDFa, jOWL extracts an OWL-DL file and visualizes it.</li>
</ul>
</div>
<div class="column span-12 last">
<h3>Elsewhere on the web</h3>
<ul>
<li><a href="http://celtic.umbc.edu/jowl/">using RDFa</a> to explicate metadata.</li>
<li>Visualizing the <a href="http://fadyart.com/ontologies/FinanceDemo.html">Finance Ontology</a>.</li>
<li>Visualizing the <a href="http://www.dfki.uni-kl.de/~moeller/ontologies/medico-browser/">MEDICO Ontology</a></li>
<li><a href="http://users.telenet.be/everbroeck/jOWLBrowser/jOWLBrowser.html">Formalized Wine Ontology</a>: The wine Ontology built underneath BFO.</li>
</ul>
<h3>Documentation</h3>
<p><a href="http://jowl.ontologyonline.org/documentation.html">Documentation</a> on this javascript library, visualised with jOWL.</p>
</div>
</div>
<hr class="space"/><hr />
<hr class="space"/><hr />
</div>
</body>
</html>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/jOWL.css" type="text/css"/>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.tooltip.js"></script>
<script type="text/javascript" src="scripts/jOWL.js"></script>
<script type="text/javascript" src="scripts/jOWL_UI.js"></script>
<script type="text/javascript">
$(document).ready(function() {
jOWL.load('data/ontology.owl', function(){
//once loaded, remove the loading display
$('.loader').hide(); $('#demo').show();
//initialize UI components
var tree = $('#treeview').owl_treeview({rootThing: true});
//tooltip requires jquery.tooltip.js script
var tooltip = $('#thingtooltip').owl_propertyLens({
tooltip : true,
"sparql-dl:PropertyValue(owl:'computer', ?instance, ?subject)": { sort: "?subject" }
});
var individuals = $('#individuals').owl_propertyLens({
chewsize : 100,
onChange : {
"owl:Thing": function(source, target, resourcebox){
tooltip.display(target, this);
}
}
});
var navbar = $('#navbar').owl_navbar();
var autocomplete = $('#owlauto').owl_autocomplete({focus : true, chars : 2, filter : 'Class'});
//making sure components respond to each others input:
navbar.addListener([individuals, tree]);
autocomplete.addListener([navbar, individuals, tree]);
tree.addListener([individuals, navbar]);
//set focus on the text input for user.
$('#owlauto').focus();
//fire up the components, on the owl Class wine
var wine = jOWL("whitewine");
navbar.propertyChange(wine);
navbar.broadcast(wine);
}, {reason : true});
});
</script>
</head>
<body>
<div class="container">
<div class="column span-24">
<div class="background">
</div>
</div>
<div id="widget" class="column span-12">
<div class="loader" >
<div>Loading...</div>
<img src="http://ontologyonline.org/img/ajax-loader.gif" alt="Loading Image"/>
</div>
<div id="demo" style="display:none;" class="column span-12">
<div class="column span-6 first">
<div id="navbar" class="ui-widget-content">
<h4 class="ui-dialog-titlebar ui-state-default">Navigation Bar</h4>
</div>
<input id="owlauto" type="text" size="40" style="display:block;width:99%;margin:5px 0px;" title="enter a search term"/>
</div>
<div class="column span-6 last">
<div id="individuals" class="ui-widget-content resourcebox" data-jowl="owl:Class">
<h4 class="ui-dialog-titlebar ui-state-default">Direct Individuals</h4>
<div class="jowl-content">
<div class="propertybox ui-state-hover" data-jowl="rdfs:label">${rdfs:label}</div>
<div class="propertybox" data-jowl="sparql-dl:DirectType(?x, owl:Class)">${?x}</div>
</div>
</div>
<div id="thingtooltip" class="resourcebox" data-jowl="owl:Thing">
<div class="propertybox" data-jowl="rdfs:comment">${rdfs:comment}</div>
<div class="propertybox">
<div data-jowl="sparql-dl:PropertyValue(owl:Thing, ?y, ?z)">
<span class="alt">${?y}</span><span>: </span><span>${?z}</span>
</div>
</div>
</div>
<div id="treeview" class="ui-widget-content" style="margin-top:5px;">
<h4 class="ui-dialog-titlebar ui-state-default">Treeview</h4>
</div>
</div>
</div>
</div>
<div class="column span-10 last" style="margin-left:10px;">
</div>
<hr class="space"/><hr />
<div class="column span-24">
<div class="column span-12 first">
<h3>On Site Demo's</h3>
Reasoning over Individuals:
<ul>
<li><a href="http://jowl.ontologyonline.org/SPARQL-DL.html">SPARQL-DL querying</a></li>
<li>The <a href="http://jowl.ontologyonline.org/product_demo.html">Semantic Warehouse</a></li>
<li><a title="jOWL wine demo" href="http://jowl.ontologyonline.org/wine_demo.html">jOWL wine reasoning demo</a></li>
<li><a title="Simile Exhibit Demo" href="http://jowl.ontologyonline.org/jOWLExhibit.html">Using Simile Exhibit for visualisation</a>, and jOWL for data loading and reasoning.</li>
</ul>
Online Client-side Ontology Browsing:
<ul>
<li>The <a title="jOWL Ubiquity" href="http://jowl.ontologyonline.org/jOWLBrowser.html">Generic jOWL Ontology Browser</a>, stand-alone, but also used with the Ubiquity command:</li>
<li>Loading Ontologies from other domains: the <a href="http://jowl.ontologyonline.org/Ubiquity.html">jOWL Ubiquity command</a> (Firefox) to visualize any external ontology</li>
<li>The <a title="Basic Formal Ontology" href="http://jowl.ontologyonline.org/bfo.html">Basic Formal Ontology - BFO</a></li>
<li>The <a title="Ontology for Biomedical Investigations" href="http://jowl.ontologyonline.org/obi.html">Ontology for Biomedical Investigations - OBI</a></li>
</ul>
Advanced Visualisations
<ul>
<li><a href="http://jowl.ontologyonline.org/HyperBolicTree.html">HyperBolic tree visualization</a>, with the help of the <a href="http://blog.thejit.org/javascript-information-visualization-toolkit-jit/">JIT</a> library.</li>
<li><a href="http://jowl.ontologyonline.org/TouchGraph.html">Force Directed Graph Layout</a> (TouchGraph). Experimental & custom-made visualization.</li>
</ul>
RDfa related
<ul>
<li>The <a href="http://jowl.ontologyonline.org/documentation.html">jOWL Documentation</a> serves as a demo on it's own, OWL-DL syntax is embedded into the html file by means of RDFa, jOWL extracts an OWL-DL file and visualizes it.</li>
</ul>
</div>
<div class="column span-12 last">
<h3>Elsewhere on the web</h3>
<ul>
<li><a href="http://celtic.umbc.edu/jowl/">using RDFa</a> to explicate metadata.</li>
<li>Visualizing the <a href="http://fadyart.com/ontologies/FinanceDemo.html">Finance Ontology</a>.</li>
<li>Visualizing the <a href="http://www.dfki.uni-kl.de/~moeller/ontologies/medico-browser/">MEDICO Ontology</a></li>
<li><a href="http://users.telenet.be/everbroeck/jOWLBrowser/jOWLBrowser.html">Formalized Wine Ontology</a>: The wine Ontology built underneath BFO.</li>
</ul>
<h3>Documentation</h3>
<p><a href="http://jowl.ontologyonline.org/documentation.html">Documentation</a> on this javascript library, visualised with jOWL.</p>
</div>
</div>
<hr class="space"/><hr />
<hr class="space"/><hr />
</div>
</body>
</html>
</body>
</html>
Reply all
Reply to author
Forward
0 new messages