javascript .js file external url - javascript

I am using gnuplot-js https://github.com/chhu/gnuplot-JS when I am without my laptop at university.
Is it possible to use an external url for gnuplot.js file? I host index.html, gnuplot_api.js on https://mywebsite.com/ but I would like to use another url for gnuplot.js file (for example https://external.com/blabla/ok/no/gnuplot.js) because this file is really big!
Maybe this is the part I should edit on index.html. How? :
<script src='gnuplot_api.js'></script>
<script>
gnuplot = new Gnuplot('gnuplot.js');
gnuplot.onOutput = function(text) {
document.getElementById('output').value += text + '\n';
document.getElementById('output').scrollTop = 99999;
};
or maybe this part on gnuplot_api.js?:
var Gnuplot = function(js_filename) {
this.worker = new Worker(js_filename);
this.output = [];
this.error = [];
this.isRunning = false;
Thank you very much for your support

It appears Gnuplot use an onboard webworker, so the path provided to the constructor should be on the same domain than the script.
<script src='https://cdn.jsdelivr.net/gh/chhu/gnuplot-JS/www/gnuplot_api.js'></script>
<script>
gnuplot = new Gnuplot('https://cdn.jsdelivr.net/gh/chhu/gnuplot-JS/www/gnuplot.js');
</script>

Related

pdfkit Browser - "Uncaught ReferenceError: fs is not defined" when using custom fonts

This question may be asked previously but they have no answer. I try to create a pdf file using pdfkit library with Arabic language support. So, first I downloaded a prebuilt version of pdfkit (which is assumed to work in browser) from here.
Then I wrote this code for adding an Arabic font (like in the docs)
const doc = new PDFDocument;
var text_arabic = "مرحبا مَرْحَبًا";
// Using a TrueType font (.ttf)
doc.font('./trado.ttf') // --> this line gives the error.
.text(text_arabic)
.moveDown(0.5);
The error is:
Uncaught ReferenceError: fs is not defined
at Object.fontkit.openSync (pdfkit.js:10949)
at Function.PDFFont.open (pdfkit.js:451)
at PDFDocument.font (pdfkit.js:2227)
at main.js:22
pdfkit.js from line 10949:
fontkit.openSync = function (filename, postscriptName) {
var buffer = fs.readFileSync(filename); / --> error
return fontkit.create(buffer, postscriptName);
};
So, I think 'fs' belongs to node.js part with require('fs') but anyway I don't know the solution. What is the solution then? Thanks in advance!
Here is the simple solution;
Don't forget to add pre-built pdfkit.js and blob-stream.js files
Copy below js code and include it in your html
Put your fonts to the same place with html/js (like trado.ttf)
Change the getFont(...) according to your font name
Done!
Important Notes:
If you run it without any server, chrome will give CORS policy error. (See this to disable just for try)
When you move your files to a server, or running in local server, there will be no CORS error.
Last and most importantly, give some times to xhr.onload. Because of that we create writeToPDF() function seperately for using with a button after loading.
const doc = new PDFDocument;
const stream = doc.pipe(blobStream());
var embeddedFonts = (function() {
var fontCollection = {};
function getFont(name, src) {
var xhr = new XMLHttpRequest();
xhr.open('GET', src, true);
xhr.responseType = "arraybuffer";
xhr.onload = function(evt) {
var arrayBuffer = xhr.response;
if (arrayBuffer) {
fontCollection[name] = new Uint8Array(arrayBuffer);
registerEmbeddedFonts(doc, embeddedFonts);
} else {
error = "Error downloading font resource from " + src;
}
};
xhr.send(null);
}
getFont("Trado", 'trado.ttf');
return fontCollection;
}());
function registerEmbeddedFonts(doc, fontCollection) {
doc.registerFont("Trado", fontCollection["Trado"]);
}
function writeToPDF() {
doc.fontSize(40);
doc.font('Trado').text('مَرْحَبًا');
doc.end();
stream.on('finish', function() {
// get a blob you can do whatever you like with
const blob = stream.toBlob('application/pdf');
// or get a blob URL for display in the browser
const url = stream.toBlobURL('application/pdf');
var frame = document.getElementById("pdfFrame");
frame.src = url;
});
}
<script src="https://github.com/foliojs/pdfkit/releases/download/v0.8.0/pdfkit.js"></script>
<script src="https://github.com/devongovett/blob-stream/releases/download/v0.1.3/blob-stream.js"></script>
<iframe id="pdfFrame" src="" width="300" height="300"> </iframe>
<button type="button" onclick="writeToPDF();">Write to PDF</button>
<!-- This example doesn't work because of missing trado.ttf font file.
Try to run at your PC -->

obtain "server side" variable for use in html/javascript function

I'm trying to develop a language web application. It will scrape data from various websites and ask the participant numerous questions etc. I have created the file that scrapes the web page but I'm having difficulty getting the scraped variables from the node.js file. below are some extracts from the node js file:
var pword = function() {
var request = require("request");
var cheerio = require("cheerio");
var aa = Math.floor(Math.random() * 588);
var words = ['abash', 'aberrant', .....]
var A = words[aa];
var urlcollinsdictionary = "http://www.collinsdictionary.com/dictionary/english/";
var Newurldictionary = urlcollinsdictionary + A;
request({
uri: Newurldictionary,
}, function(error, response, body) {
var $ = cheerio.load(body);
$('div.homograph-entry').each(function() {
var link = $(this);
var text1 = link.text();
console.log(A);
console.log(text1);
});
});
}
My node js code works fine. my problem arises when I try to use its "text1" variable or others of its kind in my HTML/javascript coding. I've tried "getelementbyid", "variable exports/imports", even the "%%" method. but still no luck. as you've probably get guess I'm new to programming. please please please help me by making alterations/additions to the HTML code beneath to enable access to the text1 variable and others like it
<html>
<head>
language game
<title>language game</title>
<br>
<input type = "button" onclick = "word()" value = "Professional Vocab">
</head>
<body>
<script>
function word(){
alert(text1);
}
</script>
</body>
</html>
Thanks in advance...
You can add similar code in your node js file to respond to api calls
var express = require("express");
var app = express();
app.get("sendVar", function(request, response){
response.send(text1);
}
you will need to do npm install express in your command line
In your front-end side you can use jquery and make an AJAX call inside function word()
function word(){
$.get("url/sendVar", function(data){
alert(data);
});
}

upload file to google drive folder instead of user browser javascript/jsquery

My current script uses the code below to download a CSV file to local drive,
function table2CSV() {
var dataURL = '',
fieldSeparator = ',',
textField = '"',
lineSeparator = '\n',
regExpTesto = /(")/g,
regExp = /[";]/;
$('table tr').each(function() {
var dataRow = '';
if ($('input:checkbox', this).is(':checked') || $(this).is(':first- child'))
{
$('td', this).not(':last').each(function() {
var value = $(this).text();
if (dataRow !== '') dataRow += fieldSeparator;
if (regExp.test(value)) {
value = textField + value.replace(regExpTesto, '$1$1') + textField;
}
dataRow += value;
});
if (dataURL !== '') dataURL += lineSeparator;
dataURL += dataRow;
}
});
window.location.href = 'data:text/csv;charset=utf-8;base64,' + btoa(dataURL);
}
The download is done bye this line as far as I can tell :
window.location.href = 'data:text/csv;charset=utf-8;base64,' + btoa(dataURL);
I would like to be able to have it download(upload/saved) to a shared google drive folder instead.
I have seen similar questions on the forum but can't seem to see how to point the download to a shared google-drive folder.
What must code must be added/changed in order to achieve this ?
Thank you
EDIT: Nevermind, just realised they say it does not support data URIs:
Data URIs and file:// URLs are not supported
I will keep this answer in case anyone else searches for non-data URI uploading
Having a quick look, I came upon Save to Drive
While this might not be exactly what you want, it looks like an easy way to add the ability to save the contents of any URI (hopefully a data URI too) to Google Drive, like so:
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-savetodrive"
data-src="//example.com/path/to/myfile.pdf"
data-filename="My Statement.pdf"
data-sitename="My Company Name">
</div>

tvOS not loading external TVML file

While creating a new Client-Server tvOS App, tvOS will not get the data from my external tvml file. This is the Error: ITML <Error>: Failed to load launch URL with error: (null)
This is the main.js code
function getDocument(url) {
var templateXHR = new XMLHttpRequest();
templateXHR.responseType = "document";
templateXHR.addEventListener("load", function() {pushDoc(templateXHR.responseXML);}, false);
templateXHR.open("GET", url, true);
templateXHR.send();
return templateXHR;
}
function pushDoc(document) {
navigationDocument.pushDocument(document);
}
App.onLaunch = function(options) {
var templateURL = 'niclasblog.com/appletv/main.tvml';
getDocument(templateURL);
}
App.onExit = function() {
console.log('App finished');
}
And I have attached the main.tvml file as well
<document>
<alertTemplate>
<title>Test</title>
<description>This is a test</description>
<button>
<text>Yes</text>
</button>
<button>
<text>No</text>
</button>
</alertTemplate>
</document>
That code is directly from the Apple Documentation, so I do not know why it is not working.
In your App.onLaunch function you could get the BASEURL and use this for loading all your assets:
App.onLaunch = function(options) {
var BASEURL = options.BASEURL;
// etc.
}
You can also consider a different approach to loading templates. Consider using a DOMParser to parse an XML String. This way you can write Multiline template strings with "real" content e.g.
getDocument(options) {
let parser = new DOMParser();
let templateString = `<?xml version="1.0" encoding="UTF-8" ?>
<document>
<alertTemplate>
<description>${options.translate.errorRandomErrorAlertText}</description>
<button>
<text>${options.translate.utilOk}/text>
</button>
</alertTemplate>
</document>`;
return parser.parseFromString(templateString, "application/xml");
}
I've written a generator for specfically for Apple TVML apps using es6, its still early in its development, but might help you get started.
Try replacing this
var templateURL = 'niclasblog.com/appletv/main.tvml';
with fully qualified URI
var templateURL = 'https://niclasblog.com/appletv/main.tvml';
Also
templateXHR.responseType = "document";
is not needed as that seem to be the default behavior.

How to save the current webpage with casperjs/phantomjs?

Is there a way to save the current webpage by using casperjs or phantomjs?
I tried to get the html and save it into a file. But the resulting file was a lot different from the screenshot of that time (with casper.capture). Is there a way to save the current webpage?
Andrey Borisko suggested to use the disk cache to retrieve the resources. My solution is not that efficient, but you don't need to decompress text files.
I use XMLHttpRequest to retrieve all resources after I registered them with the resource.received event handler. I then filter the resources into images, css and fonts. The current limitation is that remote resource paths that contain something like ../ or ./ are not handled correctly.
I retrieve the current page content with getHTML and iterate over all captured resources to replace the path used in the markup, that is identified by a portion of the complete resource URL, with a randomly generated file name. The file extension is created from the content type of the resource. It is converted using mimeType from this gist.
Since CSS files may contain background images or fonts, they have to be processed before saving to disk. The provided loadResource function loads the resource, but does not save it.
Since XMLHttpRequest to download the resources the script has to be invoked with the --web-security=false flag:
casperjs script.js --web-security=false
script.js
var casper = require("casper").create();
var utils = require('utils');
var fs = require('fs');
var mimetype = require('./mimetype'); // URL provided below
var cssResources = [];
var imgResources = [];
var fontResources = [];
var resourceDirectory = "resources";
var debug = false;
fs.removeTree(resourceDirectory);
casper.on("remote.message", function(msg){
this.echo("remote.msg: " + msg);
});
casper.on("resource.error", function(resourceError){
this.echo("res.err: " + JSON.stringify(resourceError));
});
casper.on("page.error", function(pageError){
this.echo("page.err: " + JSON.stringify(pageError));
});
casper.on("downloaded.file", function(targetPath){
if (debug) this.echo("dl.file: " + targetPath);
});
casper.on("resource.received", function(resource){
// don't try to download data:* URI and only use stage == "end"
if (resource.url.indexOf("data:") != 0 && resource.stage == "end") {
if (resource.contentType == "text/css") {
cssResources.push({obj: resource, file: false});
}
if (resource.contentType.indexOf("image/") == 0) {
imgResources.push({obj: resource, file: false});
}
if (resource.contentType.indexOf("application/x-font-") == 0) {
fontResources.push({obj: resource, file: false});
}
}
});
// based on http://docs.casperjs.org/en/latest/modules/casper.html#download
casper.loadResource = function loadResource(url, method, data) {
"use strict";
this.checkStarted();
var cu = require('clientutils').create(utils.mergeObjects({}, this.options));
return cu.decode(this.base64encode(url, method, data));
};
function escapeRegExp(string) {
// from https://stackoverflow.com/a/1144788/1816580
return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}
function replaceAll(find, replace, str) {
// from https://stackoverflow.com/a/1144788/1816580
return str.replace(find, replace);
}
var wrapFunctions = [
function wrapQuot1(s){
return '"' + s + '"';
},
function wrapQuot2(s){
return "'" + s + "'";
},
function csswrap(s){
return '(' + s + ')';
}
];
function findAndReplace(doc, resources, resourcesReplacer) {
// change page on the fly
resources.forEach(function(resource){
var url = resource.obj.url;
// don't download again
if (!resource.file) {
// set random filename and download it **or** call further processing which in turn will load ans write to disk
resource.file = resourceDirectory+"/"+Math.random().toString(36).slice(2)+"."+mimetype.ext[resource.obj.contentType];
if (typeof resourcesReplacer != "function") {
if (debug) casper.echo("download resource (" + resource.obj.contentType + "): " + url + " to " + resource.file);
casper.download(url, resource.file, "GET");
} else {
resourcesReplacer(resource);
}
}
wrapFunctions.forEach(function(wrap){
// test the resource url (growing from the back) with a string in the document
var lastURL;
var lastRegExp;
var subURL;
// min length is 4 characters
for(var i = 0; i < url.length-5; i++) {
subURL = url.substring(i);
lastRegExp = new RegExp(escapeRegExp(wrap(subURL)), "g");
if (doc.match(lastRegExp)) {
lastURL = subURL;
break;
}
}
if (lastURL) {
if (debug) casper.echo("replace " + lastURL + " with " + resource.file);
doc = replaceAll(lastRegExp, wrap(resource.file), doc);
}
});
});
return doc;
}
function capturePage(){
// remove all <script> and <base> tags
this.evaluate(function(){
Array.prototype.forEach.call(document.querySelectorAll("script"), function(scr){
scr.parentNode.removeChild(scr);
});
Array.prototype.forEach.call(document.querySelectorAll("base"), function(scr){
scr.parentNode.removeChild(scr);
});
});
// TODO: remove all event handlers in html
var page = this.getHTML();
page = findAndReplace(page, imgResources);
page = findAndReplace(page, cssResources, function(cssResource){
var css = casper.loadResource(cssResource.obj.url, "GET");
css = findAndReplace(css, imgResources);
css = findAndReplace(css, fontResources);
fs.write(cssResource.file, css, "wb");
});
fs.write("page.html", page, "wb");
}
casper.start("http://www.themarysue.com/").wait(3000).then(capturePage).run(function(){
this.echo("DONE");
this.exit();
});
The magic happens in findAndReplace. capturePage is completely synchronous so it can be dropped anywhere without much head ache.
URL for mimetype.js
No, I don't think there is an easy way to do this as phantomjs doesn't support rendering pages in mht format (Render as a .mht file #10117). I believe that's what you wanted.
So, it needs some work to accomplish this. I did something similar, but i was doing it the other way around I had a rendered html code that I was rendering into image/pdf through phantomjs. I had to clean the file first and it worked fine for me.
So, what I think you need to do is:
strip all js calls, like script tags or onload attributes, etc..
if you have access from local to the resources like css, images and so on (and you don't need authentication to that domain where you grab the page) than you need to change relative paths of src attributes to absolute to load images/etc.
if you don't have access to the resources when you open the page then I think you need to implement similar script to download those resources at the time phantomjs loads the page and then redirect src attributes to that folder or maybe use data uri.
You might need to change links in css files as well.
This will bring up the images\fonts and styling you are missing currently.
I'm sure there are more points. I'll update the answer if you need more info, once I see my code.

Categories

Resources