I'm trying to get the MiradorImageTools plugin to work with mirador image viewer.
I'm using a very basic html page to test:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mirador-Test</title>
</head>
<body>
<h1>Title</h1>
<div>
<p>blah</p>
<div id="my-mirador" />
<script src="https://unpkg.com/mirador#latest/dist/mirador.min.js"></script>
<script src="https://unpkg.com/mirador-image-tools#0.10.0/umd/mirador-image-tools.min.js"></script>
<script type="text/javascript">
const config = {
"id": "my-mirador",
"manifests": {
"https://iiif.lib.harvard.edu/manifests/drs:48309543": {
"provider": "Harvard University"
}
},
"windows": [
{
"imageToolsEnabled": "true",
"manifestId": "https://iiif.lib.harvard.edu/manifests/drs:48309543",
}
]
};
// var mirador = Mirador.viewer(config);
var mirador = Mirador.viewer(config, [MiradorImageTools]); // <-- Error!
</script>
</div>
</body>
</html>
This gives me the following error:
Uncaught ReferenceError: MiradorImageTools is not defined
<anonymous> ./test3.html:36
test3.html:36:45
If I leave the plugin out, replacing the problematic line with the commented-out line above it, the whole thing works and I get mirador showing as it should.
So clearly I'm referencing the plugin wrong. But what would be the right way to do it?
To use MiradorImageTools, and any other Mirador plugin (as of v3.0.0), you will need to import the packages and create a build of the project using a tool like Webpack or parcel.
An example of this type of setup can be seen here: https://github.com/projectmirador/mirador-integration that includes examples using both Webpack and parcel.
./src/index.js
import Mirador from 'mirador/dist/es/src/index';
import { miradorImageToolsPlugin } from 'mirador-image-tools';
const config = {
id: 'demo',
windows: [{
imageToolsEnabled: true,
imageToolsOpen: true,
manifestId: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest',
}],
theme: {
palette: {
primary: {
main: '#1967d2',
},
},
},
};
Mirador.viewer(config, [
...miradorImageToolsPlugin,
]);
See the README there for more information about how to build for the specific tools.
Related
I want to integrate Shutterstock Image Editor in my simple HTML app. So I make a developer account in Shutterstock and create my API Key. Below is my API:
Now I am using above API Key (Consumer Key) in my HTML as describe here. Below is my HTML file code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="https://s.picdn.net/editor/image/assets/integration.js"></script>
<script>
window.editorInstance = window.Editor({
apiKey: 'e1818-c5e61-74ce1-7ee31-6c7f8-7fb6d',
language: 'en',
image: 'https://www2.shutterstock.com/blog/wp-content/uploads/sites/5/2015/05/volcano-header-1440x960.jpg',
excludeFeatures: ['filters'],
initialPanel: 'text',
logo: true,
logoUrl: 'https://www2.shutterstock.com/base/public/images/logos/logo-shutterstock-de64a370ef.png',
primaryActionText: 'Save and close',
container: document.querySelector('#editor'),
canvas: {
height: 500,
width: 500,
fill: 'rgb(62, 69, 79)'
},
presets: [{
name: 'Icon',
height: 128,
width: 128
}, {
name: 'Book Cover',
height: 1600,
width: 2400
}],
onPrimaryAction: function() {
window.editorInstance.getBase64({
format: 'jpg',
quality: .91
}).then(function(base64) {
// Handle base64 image data
window.editorInstance.hide();
});
}
});
// Launch instance of Editor
window.editorInstance.launch().then(function(editor) {
// Actions
}).catch(function(err) {
// Handle error
});
</script>
After running my above HTML page Editor doesn't render. Below is my console log showing:
Failed to load resource: the server responded with a status of 403 (Forbidden)
and below screen is showing.
Also I visit Fiddle to integrate editor in HTML but this API is using JSFiddle Client. My question is how I implement Shutterstock photo editor in my HTML app. Please let me know what I'm doing wrong in my above code.
You need to contact api [at] shutterstock.com in order to access the Editor - they'll need to manually enable your api key for it.
I need to display Analytics dashboard on my web site. Like export it from google's website to mine.
I already used Reporting API V4
But I only get the login button.
as you can see, the dashboard from analytics are not displayed.
I need to do it with javascript or C#.
My code (based on this link ):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Analytics Reporting </title>
<meta name="google-signin-client_id" content="472734728686-21tqq751d9mdpkopnjmc1dnctf9644qc.apps.googleusercontent.com">
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/analytics.readonly">
</head>
<body>
<h1> Analytics Reporting</h1>
<p>
<div class="g-signin2" data-onsuccess="queryReports"></div>
</p>
<textarea cols="80" rows="20" id="query-output"></textarea>
<script>
var VIEW_ID = '130082935';
function queryReports() {
gapi.client.request({
path: '/v4/reports:batchGet',
root: 'https://analyticsreporting.googleapis.com/',
method: 'POST',
body: {
reportRequests: [
{
viewId: VIEW_ID,
dateRanges: [
{
startDate: '7daysAgo',
endDate: 'today'
}
],
metrics: [
{
expression: 'ga:sessions'
}
]
}
]
}
}).then(displayResults, console.error.bind(console));
}
function displayResults(response) {
var formattedJson = JSON.stringify(response.result, null, 2);
document.getElementById('query-output').value = formattedJson;
}
</script>
<script src="https://apis.google.com/js/client:platform.js"></script>
</body>
</html>
I would suggest you look at Google Analytics Embed API. It is much easier from a standpoint based on my experience.
I am trying to access a simple javascript variable / object I defined in an external file. My question is how to load it by dojo. Here is my plunker code that didn't work:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script type="text/javascript">
require({
packages: [
{
name: 'myApp',
location: window.location.href.replace(/\/$/, "")
}]},
["dojo/dom", "myApp/config", "dojo/domReady!"], function(dom, config) {
console.log(config.keys);
});
</script>
</body>
</html>
config.js
var keys = {
"key_1": {
"your_name": "jimmy",
"your_msg": "hello world"
},
"key_2": {
"your_name": "billy",
"your_msg": "foo equals bar"
}
};
As you can see I tried to load the config.js file as config, and tried to access it as config in my code. I am getting undefined in the console.
I did some research and what I need to use looks like the dojo's define function so that config.js looks like this:
define({
keys : {
"key_1": {
"your_name": "jimmy",
"your_msg": "hello world"
},
"key_2": {
"your_name": "billy",
"your_msg": "foo equals bar"
}
}
})
You should define a module for your configuration file.
This can be achieved using the define passing as argument your object.
Basic example:
define({ yourProperty: yourValue});
More information can be found here: https://dojotoolkit.org/documentation/tutorials/1.10/modules/
So I want to use requirejs, kendo ui and knockout JS together.
I read Using Kendo with RequireJS and the Knockout JS article Asynchronous Module Definition (AMD) With RequireJs and then I found the Knockout-Kendo library via Knockout.js and Kendo UI - a Potent Duo and I thought to myself - this is awesome - I'm about to be in a beautiful world of rainbows, MVVM, AMD and HTML5 lusciousness.
But now it seems more like I'm in a dark underground world of pain and suffering. Here's the deal...
I have a simple web site that has a js folder that has the following inside:
jquery-2.0.3.min.js
knockout-2.3.0.js
knockout-kendo.min.js
require.js
kendo-ui/** all the kendo files under here
and an index.html file that I have put in the root containing this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/require.js"></script>
</head>
<body>
<div id="grid" data-bind="kendoGrid: items"> </div>
<script type="text/javascript">
require.config({
baseUrl : 'js',
paths: {
'jquery': 'jquery-2.0.3.min',
'knockout': 'knockout-2.3.0',
'kendo': 'kendo-ui',
'knockout-kendo': 'knockout-kendo.min',
},
shim: {
'jquery': {
exports: 'jQuery'
}
}
});
define('mainViewModel', ['knockout'], function (ko) {
return function mainViewModel(){
this.items = ko.observableArray([
{ id: "1", name: "apple"},
{ id: "2", name: "orange"},
{ id: "3", name: "banana"}
]);
};
});
require(['jquery','knockout','mainViewModel','knockout-kendo'],
function($, ko, mainViewModel) {
ko.applyBindings(new mainViewModel());
});
</script>
</body>
</html>
As far as I can fathom, that should be basically correct but I am getting this exception:
GET http://localhost/ko-kendo/js/kendo-ui.js [HTTP/1.1404 Not Found 1ms]
Error: Script error for: kendo
http://requirejs.org/docs/errors.html#scripterror #http://localhost/ko-kendo/js/require.js:163
Seems that knockout-kendo is trying to load up kendo-ui.js but it, unsurprisingly since it doesn't exist, can't find it.
In an attempt to verify the mappings I knocked up this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/require.js"></script>
</head>
<body>
<div id="grid" data-bind="kendoGrid: items"> </div>
<script type="text/javascript">
require.config({
baseUrl : 'js',
paths: {
'jquery': 'jquery-2.0.3.min',
'knockout': 'knockout-2.3.0',
'kendo': 'kendo-ui',
'knockout-kendo': 'knockout-kendo.min',
},
shim: {
'jquery': {
exports: 'jQuery'
}
}
});
define('mainViewModel', ['knockout'], function (ko) {
return function mainViewModel(){
this.items = ko.observableArray([
{ id: "1", name: "apple"},
{ id: "2", name: "orange"},
{ id: "3", name: "banana"}
]);
};
});
require(['jquery','knockout','mainViewModel','kendo/kendo.grid.min'],
function($, ko, mainViewModel) {
var vm = new mainViewModel();
$(document).ready(function () {
$('#grid').kendoGrid({
dataSource: new mainViewModel().items()
});
});
ko.applyBindings(vm);
});
</script>
</body>
</html>
That worked fabulously (well, it worked) - you can see that the difference between the two is that in the second case I am not using knockout-kendo and therefore, the binding does not apply, which is why I do that kendoGrid thing in the document ready function.
So, does anyone know how on this green and beautiful earth I can get knockout-kendo working with require JS? I feel like there might be something fancy with a shim that would get it going but I can't work it out...
Knockout-Kendo is set to depend on a kendo module. The easiest thing to do is point kendo at the kendo.web file like: kendo: kendo.web.min (in whatever directory kendo.web.min.js is in).
I'm working through the example at http://dojotoolkit.org/documentation/tutorials/1.7/hello_dojo/demo/module.html and I've created a directory structure as follows
w:/djt2/index.html
w:/djt2/js/mymodule.js (exact copy of http://dojotoolkit.org/documentation/tutorials/1.7/hello_dojo/demo/myModule.js)
I then set the Tinyweb web-server to serve localhost from w:/djt2
I've changed index.html a tiny bit, to adjust for putting mymodule.js inside the js subdirectory (I've removed comments too below):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<script>
var dojoConfig = {
async: true,
packages: [{
name: "djt2",
location: '/js' /* Location #1 */
}]
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"></script>
</head>
<body>
<h1 id="greeting">Hello</h1>
<script>
require(["djt2/mymodule"], function(myModule){ /* Location #2 */
myModule.setText("greeting", "Hello Dojo!");
setTimeout(function(){
myModule.restoreText("greeting");
}, 3000);
});
</script>
</body>
</html>
This works, but I'm not entirely sure I understand why... In particular, at Location #1, the original had location.pathname.replace(/\/[^/]+$/, '') which evaluates to the empty string and makes the loader look for mymodule.js at the CDN location (I also tried to set location to "/", but that made it search at http://mymodule.js/).
At Location #2 it is a little mystical that the prefix should be djt2/...
If someone could explain it, or direct me to the documentation (I'm a bit overwhelmed with learning a new framework :-).
Add an extra djt2 directory in your structure
w:/djt2/js/djt2/mymodule.js
Set the baseUrl in the configuration.
var dojoConfig = {
async: true,
baseUrl: '/js'
packages: [{
name: "djt2",
location: 'djt2'
}]
};
Setting the baseUrl will tell dojo where to look for custom modules. The location that is part of the package is relative to the baseUrl.
I always think of modules/packages as namesapces. To extend your example with an additional package, it would look like the following:
w:/djt2/js/another/anotherModule.js
var dojoConfig = {
async: true,
baseUrl: '/js'
packages: [{
name: "djt2",
location: 'djt2'
}, {
name: "another",
location: 'another'
}]
};