I am using opera widget to provide a link to my website on every page. How can i load data from external sources inside the widget?
I want to show data from sql database in the opera widget for desktop. Is there any way to do this? Is it possible to obtain data from a file in widget?
Please guide me...
It's not possible to access an external SQL database from a widget, however it is possible to read a local text file from a widget. The following simple example works for me on desktop with the latest Opera installed (11.52).
config.xml:
<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" id="http://example.com/filereadertest" defaultlocale="en" width="400" height="500">
<name>File Reader Test</name>
<description>File Reader test widget</description>
<author href="http://example.com/author/">Me</author>
<feature name="http://xmlns.opera.com/fileio">
<param name="folderhint" value="home" />
</feature>
</widget>
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background:#eee;
}
#output {
width:98%;
height:200px;
}
</style>
</head>
<body>
<div>
<p>Get the contents of a text file</p>
<p><textarea id="output"></textarea></p>
<p><button id="open">Open</button></p>
</div>
<script>
window.addEventListener('DOMContentLoaded', function() {
function openFile(evt) {
opera.io.filesystem.browseForFile("test", "", openFileCallback)
}
function openFileCallback(file) {
if (file) {
fstream = file.open(file, "r");
var output = document.getElementById("output");
output.value = "";
while (!fstream.eof) {
output.value += fstream.readLine("UTF-8");
}
}
}
document.getElementById("open").addEventListener("click", openFile, false);
}, false);
</script>
</body>
</html>
More documentation is here:
Widget File I/O API
Yes, but You able to use a HTML5 Web SQL Database (SQLite integrated into brouser) in Your opera widgets
Related
Good day, I am having difficulties using PDFExtension to load PDF's directly into the viewer. I have omitted the markups extension for testing purposes. I have tried following the steps here to no avail:
https://forge.autodesk.com/blog/fast-pdf-viewingmarkup-inside-forge-viewer
https://forge.autodesk.com/en/docs/viewer/v7/reference/Extensions/PDFExtension/
instance.canvas.append(htmlViewer); Simply creates a div defined by htmlViewer
let htmlViewer = "<div id=forgeViewer></div>";
//The Viewer will be instantiated here
instance.canvas.append(htmlViewer);
let viewer, markup;
function initializeViewer(pdf) {
if (viewer) {
console.log('loading');
viewer.impl.unloadCurrentModel()
if (markup)
markup.hide();
viewer.loadModel(pdf, viewer);
return;
}
var options = {
env: "Local",
useADP: false
}
Autodesk.Viewing.Initializer(options, () => {
viewer = new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById('forgeViewer'));
viewer.setTheme("light-theme");
viewer.start();
if (!pdf) return;
viewer.loadExtension('Autodesk.PDF').then( () => {
viewer.loadModel(pdf, viewer);
});
});
}
initializeViewer('//dd7tel2830j4w.cloudfront.net/f1635895094123x658226723587068400/sample.pdf');
The actual viewer itself gets initialized but I see an infinite loading loop. In the console (network) I get a 404 not found for this PDF. However, I can confirm that this URL is indeed correct and I have access to it. Furthermore, I have tried using several different URL's for this file. I cannot use a locally stored file, it must be fetched with a URL. Maybe this is due to a misuse of the env: in options? I am confused... this is pulled directly from the example linked above.
Any help would be appreciated, thank you so much!
Have you checked your browser's dev tools to see if there are any errors?
Here's a minimal Forge Viewer setup that can load a PDF natively:
<!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">
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.css">
<style>
body,
html {
margin: 0;
padding: 0;
height: 100vh;
}
#preview {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<title>Autodesk Forge: PDF Demo</title>
</head>
<body>
<div id="preview"></div>
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
<script>
Autodesk.Viewing.Initializer({ accessToken: '' }, async function () {
const viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('preview'));
viewer.start();
await viewer.loadExtension('Autodesk.PDF');
viewer.loadModel('/foo/bar.pdf');
});
</script>
</body>
</html>
Just replace /foo/bar.pdf with your own URL. Note however that if you try and load PDF documents from different origins, you might run into CORS problems.
I'm building a utility which will pull TIF files from blob storage and render them in html. Since it's just a utility, I will view them in Edge, which shows TIF files.
I can see the eighth example on this page renders fine. Meaning, this code works:
<img width=200 height=200
src="tiffdocument.tif" alt="">
However, my HTML, below, does not render anything:
<img src="https://atpblob.blob.core.windows.net/imagedata/94ae9802-4e42-4ba1-8955-11ac7c7e3509.tif" alt="" width="500" height="500">
If I go directly to the link in the source, it will download the image, so why won't it render?
Got it.
img does not work the way I was trying to use it. You have to explicitly use a GET request to pull the file.
For rendering the file cross-browser, I ended up using tiff.js.
The final html/js/css string I pushed to the browser ended up looking like this:
<!doctype html>
<html>
<head>
<title>TIF View</title>
</head>
<body>
<script type="text/javascript" src="https://cdn.rawgit.com/seikichi/tiff.js/f03d7965/tiff.min.js"></script>
<script>
var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', 'https://atpblob.blob.core.windows.net/imagedata/${blob}.tif');
xhr.onload = function (e) {
var tiff = new Tiff({buffer: xhr.response});
var canvas = tiff.toCanvas();
document.body.appendChild(canvas);
};
xhr.send(null);
</script>
<style>
canvas {
min-height: 60px;
}
</style>
</body>
To override the chrome web store new tab page I use the following code:
"chrome_url_overrides": {
"newtab": "index.html"
}
I have a backend which serves the html files so instead of using the index.html file I would like to get a html file via a http request.
Is this possible? Or is there a workaround Thanks.
You could make an ajax call from your index page to remote server, and replace the entire html with external html. Sample code looks like the following
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
index.js
var SERVER_URL = "";
var xhr = new XMLHttpRequest();
xhr.onload = function() {
replaceHtml(xhr.responseText);
};
xhr.open("GET", SERVER_URL);
xhr.send();
function replaceHtml(data) {
document.open("text/html");
document.write(data);
document.close();
}
You could simply have some javascript inside a <script></script> tag in your index.html file that grabs your generated html content from a custom domain.
Has anyone used the Adobe Creative SDK yet? I registered my site and received the api key and plugged into my web page. It is extremely simple, basically copying their example and using my own image except i keep getting the following error:
"There was a problem loading the image URI provided to the 'url' config key. Please verify that the URI is publicly accessible, and that the image is a supported format."
I checked the Adobe site with no luck and I have a small 354 x 384 image i am using.
Code:
<!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>Aviary Test</title>
<!-- Load Feather code -->
<script type="text/javascript" src="http://feather.aviary.com/imaging/v3/editor.js"></script>
<!-- Instantiate Feather -->
<script type='text/javascript'>
var featherEditor = new Aviary.Feather({
apiKey: 'MY KEY',
theme: 'dark', // Check out our new 'light' and 'dark' themes!
tools: 'all',
appendTo: '',
onSave: function(imageID, newURL) {
var img = document.getElementById(imageID);
img.src = newURL;
},
onError: function(errorObj) {
alert(errorObj.message);
}
});
function launchEditor(id, src) {
featherEditor.launch({
image: id,
url: src
});
return false;
}
</script>
</head>
<body>
<div id='injection_site'></div>
<img id='image1' src='desert.jpg'/>
<!-- Add an edit button, passing the HTML id of the image and the public URL of the image -->
<p><input type='image' src='http://images.aviary.com/images/edit-photo.png' value='Edit photo' onclick="return launchEditor('image1', 'Desert.jpg');" /></p>
</body>
</html>
I am having the same problem.
Everything works, but when you try to load an image from a different location you get the "there was a problem loading the image uri provided to the 'url' config key" error.
My site looks like this:
full (full sized image folder)
thumb (folder)
index.html
You can see the error here: http://koffid.nl/memetests/sdk2/
When you use the Edit Photo button which uses an external URL to the image it works.
When you click on the image which uses my file structure instead of the button the error shows up.
So this doesn't work:
<img id='image1' src='thumb/feather_thumb.jpg' value='Edit photo' onclick="return launchEditor('image1', 'full/feather_default.jpg');" /></p>
And this does work:
<p><input type='image' src='http://images.aviary.com/images/edit-photo.png' value='Edit photo' onclick="return launchEditor('image1', 'http://images.aviary.com/imagesv5/feather_default.jpg');" /></p>
You can't use a relative url, you need to pass the full url of the image, ie. http://example.com/images/myimage.jpg
We try to upload a zip file using the “FileReader” javascript object on the client. For small files, everything seems to be fine. If we use a zip input file of 132Mo, in Firefox v21.0 on Windows 7, the first upload from the local disk thru the javascript object works well. But, if we try to select another file and start the transfert, Firefox crashes…. In Chrome v27.0 on Windows 7, it crashes(see the ‘oups’ page) on the first try. We tried on a Mac OS with same browsers without problem. Mainly strange but when the Windows task manager window is open, no more crash in Firefox or Chrome while loading big files. Maybe the presence of this TOP window forces the garbage collector to do its work faster?
Has anyone already faced this issue? As reference, I joined a simple HTML page that may reproduce the behavior.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$("#btnFile").change(startUpload);
});
function startUpload(e)
{
this.fileHandle = e.target.files[0];
var reader = new FileReader();
reader.onprogress = function (data)
{
if (data.lengthComputable)
{
var progress = parseInt(((data.loaded / data.total) * 100), 10);
$("#progress").html("Reading file: " + progress + " %");
}
};
reader.onloadend = function ()
{
$("#progress").html("Reading completed!");
};
reader.onerror = function (errorEvent)
{
console.error("FileReader error", errorEvent);
};
reader.readAsDataURL(this.fileHandle);
};
</script>
</head>
<body>
<input type="file" id="btnFile" />
<div id="progress"></div>
</body>
</html>