Import external JS scripts in Google Colab html - javascript

I am having a hard time importing my custom external JS files to Google Colab. I work with html + js, following this workflow:
1 / imports
from IPython.display import HTML, SVG
from IPython.core.magic import register_cell_magic
2 / mount drive
from google.colab import drive
drive.mount('/content/drive')
3 / html
#register_cell_magic
def dojs(line, src):
return HTML(f"""
<canvas id="renderCanvas" touch-action="none" width="1280px" height="720px"></canvas>
<script src="content/drive/My Drive/Colab Notebooks/files/testJavascript.js"></script>
<script>
{src}
</script>
""")
4 / js
%%dojs
//...trying to use functions from testJavascript.js
Maybe it's really trivial how to do this but I'm new at Colab. I get "Failed to load resource: the server responded with a status of 500 ()".

You need to put your JS file in here:
/usr/local/share/jupyter/nbextensions/google.colab/
Then it can be access through the path
/nbextensions/google.colab/
In your case, you need to copy your js file there:
!cp /content/drive/My\ Drive/Colab\ Notebooks/files/testJavascript.js \
/usr/local/share/jupyter/nbextensions/google.colab/
Then change dojs() to be
#register_cell_magic
def dojs(line, src):
return HTML(f"""
<canvas id="renderCanvas" touch-action="none" width="1280px" height="720px"></canvas>
<script src="/nbextensions/google.colab/testJavascript.js"></script>
<script>
{src}
</script>
""")

Lines like script src="content/drive... won't work. The reason is that your Drive files are present on the backend VM executing your code. But, using a <script> tag is going to be resolved by your browser against the current base origin, which is colab.research.google.com, which doesn't serve your Drive files.
There are some recipes for serving local files in the advanced outputs example here:
https://colab.research.google.com/notebooks/snippets/advanced_outputs.ipynb#scrollTo=R8ZvCXC5A0wT

Related

unable to add inline and external javascripts into vue js file?

I have html file which has 3 script tags. I want to put these script tags in my vue.js file
my html file
<html>
<body>
<script type="text/javascript">
mxBasePath = "../editors/pure";
</script>
<script type="text/javascript" src="../editors/pure/js/mxClient.js"></script>
<script src="../editors/dist/main.js"></script>
</body>
</html>
So i want to add the 3 script tags seen in the above html to my vue js file.So for this i have
tried to create the script tags manually in the mounted function of the vue file as seen below-
my vue js file
<template>
<div id="geApp">
</div>
</template>
<script>
const client = '../editors/pure/js/mxClient.js'
const mains = '../editors/dist/main.js'
mounted () {
var a = document.body.getElementsById("geApp")
let basePath = document.createElement('script')
basePath.innerText = 'mxBasePath = "../editors/pure"'
basePath.async = true
a.appendChild(basePath)
let recaptchaScript = document.createElement('script')
recaptchaScript.setAttribute('src', './pure/js/mxClient.js')
recaptchaScript.async = true
a.appendChild(recaptchaScript)
let processes = document.createElement('script')
processes.setAttribute('src','./dist/main.js')
processes.async = true
a.appendChild(processes)
},
.....
.....
</script>
Unfortunately iam getting an error saying http://localhost/editors/dist/main.js net::ERR_ABORTED 404 (Not Found) from main.js file.So how do i load these scripts correctly in my vue js file?
If files that you are trying to add are some libraries/plugins that doesn't support import or require for some reason only then you try to do the way you are adding the file to DOM:
Anyhow, If you are sure and don't care about webpack processing your .js files in anyways, then keep your files in ./public/assets/js/ folder, then just do:
<script src="./assets/js/your-file.js"></script>
Check this "How to add external JS scripts to VueJS Components" or search it in stackoverflow search box. Hope you will get the answer.

Loading a var from window global into React App not working

I know there are lots of answers to this. My purpose is to have a js file that I can use terraform to inject into a docker image so I can easily change the client logo during deployment and have a single docker image for my react ui. I have tried the solutions in the following answers:
how-can-i-pass-a-variable-from-outside-to-a-react-app
how-to-include-external-javascript-in-react
external-javascript-is-not-working-in-react-js
react-accessing-a-var-from-a-script-in-a-component
The simplest method seems to be to import a script in head in index.html, with the var declared therein. I have the following in my index.html and env.js is in the static folder where other js files (plotly) are loaded successfully.
...
<script src="http://localhost:3000/env.js"></script>
</head>
I have the following in env.js
window.logo_file = '/images/demo.jpg';
Then in my React component I have:
<div className={'clientsLogo'}>
<img
src={window.logo_file}
alt={'client-logo'}
height={61}
style={{ verticalAlign: 'bottom' }}
/>
</div>
I also tried adding export default logo_file using logo_file = '/images/demo.jpg'; in env.js.
I tried assigning the window.logo_file to a const prior to using it.
But the imported script does not have it's variable added to the global window object and it escapes me why not.
The answer is that the env.js, i.e. the file with your window global variable declared, has to go at the top of the head section of your index.html file to be loaded before the react app is loaded.

Serving an Iframe in Google Colab Notebook: localhost refused to connect

I am trying to serve some HTML from a Google Colab notebook using the following:
from IPython.display import IFrame
IFrame(src='./output/index.html', width=700, height=600)
However, this throws localhost refused to connect:
Does anyone know how I can serve the html in index.html (which must load javascript) inside the Colab notebook? Any pointers would be hugely appreciated!
You can serve content from the path /nbextensions/ which maps to /usr/local/share/jupyter/nbextensions.
So you can put content there.
!ln -s /usr/local/share/jupyter/nbextensions /nbextensions
%cd /nbextensions
!wget -q https://upload.wikimedia.org/wikipedia/commons/3/37/Youtube.svg
Then serve the image
%%html
<img src=/nbextensions/Youtube.svg>
I can't make it works with IFrame, thought. I don't know why.
Here's an example colab notebook.
This built-in example notebook gives a demo:
https://colab.research.google.com/notebooks/snippets/advanced_outputs.ipynb#scrollTo=R8ZvCXC5A0wT
Reproducing the example here of serving content from the backend:
import portpicker
import threading
import socket
import IPython
from six.moves import socketserver
from six.moves import SimpleHTTPServer
class V6Server(socketserver.TCPServer):
address_family = socket.AF_INET6
class Handler(SimpleHTTPServer.SimpleHTTPRequestHandler):
def do_GET(self):
self.send_response(200)
# If the response should not be cached in the notebook for
# offline access:
# self.send_header('x-colab-notebook-cache-control', 'no-cache')
self.end_headers()
self.wfile.write(b'''
document.querySelector('#output-area').appendChild(document.createTextNode('Script result!'));
''')
port = portpicker.pick_unused_port()
def server_entry():
httpd = V6Server(('::', port), Handler)
# Handle a single request then exit the thread.
httpd.serve_forever()
thread = threading.Thread(target=server_entry)
thread.start()
# Display some HTML referencing the resource.
display(IPython.display.HTML('<script src="https://localhost:{port}/"></script>'.format(port=port)))
This works for me on Aug 2022:
First, as #korakot mentioned, if you have any javascript used in your html, please copy them into /usr/local/share/jupyter/nbextensions
e.g.
!cp -r ./output/ /usr/local/share/jupyter/nbextensions/google.colab/
use !ls /usr/local/share/jupyter/nbextensions/google.colab/ to check if file already exists
Then, instead of referring to html file by path, simple copy the html code in <body> into colab cell:
%%html
<!-- move your head part resources here -->
<script src="/nbextensions/google.colab/output/xxxx.js"></script>
<link type="text/css" href="/nbextensions/google.colab/outut/xxxx.css" rel="stylesheet" />
<!-- here is your body code -->
<div id="files"></div>
<div id="canvasArea" height="720px"></div>
...
<script>
// set the cell height
google.colab.output.setIframeHeight(document.documentElement.scrollHeight, true);
// you can also log some testing code here, to check whether it works or not
console.log("hello world");
console.log(variables_in_your_js)
</script>
Run the cell to check whether works or not.

R github rendering js files to see googleVis html

Using R, I would like to be able to render an .html or .md file (that has either been created via knitr or some other manner) that contains googleVis charts in a repo in github.
I was trying to follow the help file when running ?plot.gvis, and I have tried pushing up the gvisData.js and gvisFunctions.js files into the repo and altered the html to reference these, but I have a feeling that I dont quite have the correct baseURL in order for github to be able to render it correctly.
Does anybody have a simple example of a URL that references Github that renders googleVis charts?
I have tried using this http://lamages.blogspot.co.uk/2013/07/googlevis-tutorial-at-user2013.html but didn't see how it would work with github...
So using the example given in ?plot.gvis this is what I tried
myChartID <- "mtnc"
baseURL <- "https://raw.github.com/USER/REPO"
wwwdir <- getwd() ## the working directory is the local directory of the repo
## Create a motion chart
M <- gvisMotionChart(Fruits, "Fruit", "Year", chartid=myChartID)
## Write the data and functions into separate files:
cat(M$html$chart['jsData'], file=file.path(wwwdir, "gvisData.js"))
cat(M$html$chart[c('jsDrawChart', 'jsDisplayChart', 'jsChart')],
file=file.path(wwwdir, "gvisFunctions.js"))
## Create a html page with reference to the above
## JavaScript files
html <- sprintf('
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript" src="%s/gvisFunctions.js"></script>
<script type="text/javascript" src="%s/gvisData.js"></script>
<script type="text/javascript">
displayChart%s()
</script>
</head>
<body>
<div id="%s" style="width: 600px; height: 500px;"></div>
</body>
</html>
', baseURL, baseURL, myChartID, myChartID)
## Write html scaffold into a file
cat(html, file=file.path(wwwdir, paste("Chart", myChartID, ".html", sep="")))
### from this point I push up to the repo the following files
### gvisData.js, gvsiFunctions.js and Chartmtnc.html
## Display the result via
URL <- paste(baseURL,"/Chart", myChartID, ".html", sep="")
browseURL(URL)
Any suggestions would be useful...
You are complicating it unnecessarily. You just need to do one thing, when you are trying to use a googleVis chart in a knitr document, which is to set
options(gvis.plot.tag = 'chart')
You can see a published example here and the source file can be found here

QWebView doesn't load any external resources if it loads a html-file from qresources

As described in the title my problem is that qwebview doesn't load a html file correctly if it resides in my resources. It loads it perfectly if I load it from outside of the resources as normal local file. But this is not an option for me. I would like to bundle the file with the application.
EDIT: By the way, I'm talkin' about external resources from the web. (e.g. http://host.org/somejavascript.js)
Thanks for any help
Please take a look at the second parameter of
void QWebView::setHtml ( const QString & html, const QUrl & baseUrl = QUrl() )
According to documentation:
External objects such as stylesheets
or images referenced in the HTML
document are located relative to
baseUrl.
Below is code that works for me.
#include <QtCore/QFile>
#include <QtCore/QUrl>
#include <QtGui/QApplication>
#include <QtGui/QMainWindow>
#include <QtWebKit/QWebView>
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QMainWindow window;
QWebView webview(&window);
QFile source(":/google.com.html");
source.open(QIODevice::ReadOnly);
webview.setHtml(QString::fromUtf8(source.readAll().constData()), QUrl("http://google.com"));
window.setCentralWidget(&webview);
window.show();
return app.exec();
}
External URLs must have a schema to make them external, otherwise "external.org/script.js" looks for "script.js" under the "external.org/" sub-path, "http://external.org/script.js" is an absolute URL.
Edit:
Say you have this HTML file as the resource ":/file.html" and it is coppied from "http://example.com/":
<html>
<head>
<title>My HTML</title>
<script type="text/javascript" src="/code.js"></scipt>
</head>
<body>
<img href="/image.jpg" />
</body>
</html>
Then to display this correctly you would need to do the following:
QFile res(":/file.html");
res.open(QIODevice::ReadOnly|QIODevice::Text);
my_webview.setHtml(res.readAll(), QUrl("http://example.com/");
That way, WebKit knows where to fetch "code.js" and "image.jpg" from. Using QWebView::load() will not work, as the root URL will be some internal URL, the one starting with qrc://, and WebKit will look for "code.js" and "image.jpg" in your applications resources. Basically, you can only use load() when all the relative URLs in the document come from the same place as the URL is pointing to. And if you used load(QUrl("qrc:///file.html")); in the case above, the URL (qrc:///file.html) is pointing to your resource system.
If you want to also include your resources in the HTML, you can use the qrc:// URLs in the HTML file.

Categories

Resources