SemwidgJS
SemwidgJS is a JavaScript based library for displaying Semantic Data Widgets. These widgets can be used to enrich websites with UI elements whose data is queried from SPARQL endpoints. SemwidgJS supports creation of simple UI elements such as labels and links, interactive elements for data input and selection that can manipulate other widgets, but also complex elements for displaying charts and maps that can base on further widget libraries, such as libraries for charts or OpenStreetMap data.
While the data is queried from publicly available Liniked Data endpoints, SemwidgJS works entirely on the client side. Thus no additional software is required. Widgets are declared directly within the HTML code and are automatically processed after loading the website. For this purpose, only the SemwidgJS file and jQuery must be included into the HTML document. To simplify data queries and thus be able to address a larger audience than comparable tools do, we developed SemwidgQL – a simple query language that is translated into SPARQL. If necessary, users can still express more sophisticated queries in SPARQL.
With SemwidgJS website authors can integrate data from Linked Data endpoints into their websites. Furthermore, the internal event system and the ability to manipulate other widgets enables them to create complex Web applications. Changes which are made to widgets or the Document Object Model of a website, either by another widget or an external script will trigger an event the widgets can react on. In the simplest case the widget is reloaded, using the updated data.
Additional Links
- SemwidgJS Documentation about config elements, widgets, and templates
- Overview about all official SemwidgJS widgets (including an example for every widget)
- Instructions on how to create a custom widget
- Source Code Example
- Example on how to use dynamic widgets for sensor data
- More information about SemwidgQL
- Download
Getting Started
Embedding SemwidgJS: Include jQuery (v1 or 2, not 3) and SemwidgJS into your HTML file.
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://semwidg.org/semwidg.js"></script>
</head>
Configuration: The most important thing to configure for SemwidgJS is the SPARQL endpoint from which the data should be requested. To simplify the work with SemwidgJS and SemwidgQL resources and namespaces can also be configured and named. These names (ids) can later be used in SemwidgQL queries instead of the full URI. A resource is always connected with an endpoint. When querying values for a resource, SemwidgJS directly knows from which endpoint the values has to be requested.
Mappings are used to replace parts of a query with a defined value and thus make it more generic.
<div data-sw-config="endpoint"
data-swp-id="dbpedia"
data-swp-url="//dbpedia.org/sparql"
data-swp-default-graph-uri="http://dbpedia.org"
data-swp-default-lang="en"
data-swp-proxy="none">
</div>
<div data-sw-config="resource"
data-swp-id="university"
data-swp-uri="http://dbpedia.org/resource/University_of_Duisburg-Essen"
data-swp-endpoint="dbpedia">
</div>
<div data-sw-config="namespace"
data-swp-id="dbpedia-owl"
data-swp-uri="http://dbpedia.org/ontology/">
</div>
<div data-sw-config="mapping"
data-swp-id="language"
data-swp-value="en">
</div>
Widgets: SemwidgJS supports a wide range of common Web UI elements: texts, images, links, input fields, maps etc. The following example contains a label, a link, and an image widget. Curly braces indicate a SemwidgQL query (Click here for more information). Double Dollar signs enclose a mapping. Before the query is processed, this mapping will be replaced by the value defined in the configuration part. Static text and query can be combined in one parameter.
<h3 data-sw-widget="SwLabel"
data-swp-id="header"
data-swp-value="{university.rdfs:label(@lang = '$$language$$')}"
data-swp-title="Label of {university.rdfs:label(@lang = '$$language$$')}">
</h3>
<div data-sw-widget="SwLink"
data-swp-id="website"
data-swp-value="{university.foaf:homepage}"
data-swp-label="Website: {university.foaf:homepage}"
data-swp-target="_blank"
data-swp-title="Website of {university.rdfs:label(@lang = '$$language$$')}">
</div>
<div data-sw-widget="SwImage"
data-swp-id="image"
data-swp-value="{university.dbpedia-owl:thumbnail}"
data-swp-alt="Image of {university.rdfs:label(@lang = '$$language$$')}"
data-swp-title="Image of {university.rdfs:label(@lang = '$$language$$')}"
data-swp-style="height: auto; width: auto; max-width: 200px; max-height: 200px; margin-top: 16px;">
</div>
Results: Below, the result of the example code is shown.