I am using bokeh to generate a plot and save to a disk and then show it on the browser. A new page will open in the browser and then nothing is display on the screen except the title of that page.
Here is the code I wrote:
from bokeh.plotting import figure, show, output_file
p = figure(title="Basic Title", plot_width=300, plot_height=300)
p.circle([1,2], [3,4])
output_file("test.html")
show(p)
You are evidently running of Bokeh installed from GitHub source. In this case you must use "inline" resources. CDN resources are only published for full releases, release candidates, and "dev" builds. We do not publish CDN resources for every commit, so there will never be versions like dev13+2.<hash>.min.js available on CDN.
An easy way to use inline resources is to set the BOKEH_RESOURCES environment variable:
BOKEH_RESOURCES=inline python myscript.py
Of course the other alternative is to install a real release instead of installing from source.
As Chrome developer console mentions, your test.html file fails at fetching resources (Bokeh CSS and JS files). The version of Bokeh you use is probably the culprit here.
Try reinstalling Bokeh with pip install bokeh and it should work.
Otherwise, if you don't want or cannot reinstall it, you can manually edit your HTML file so that it points to the correct resources:
https://cdn.bokeh.org/bokeh/release/bokeh-0.12.5.min.css for the CSS
https://cdn.bokeh.org/bokeh/release/bokeh-0.12.5.min.js for the JS
Related
I'm afraid this will be a stupid question. But I don't manage it to use my JS-Package (for example jQuery), which i have installed with Visual Studio Nuget-Package-Manage in my .net 5 Blazor Server-App.
What i did:
Installing the Package. Here I installed jquery.datatable which includes jQuery itself:
Image of my Project
But now, i don't know how to include it for example in my "_Host.cshmtl"-File:
<script type="text/javascript" charset="utf-8" src="???WHERE IS IT????"></script>
Where is my *.js-File? For example: query.dataTables.js ??
I found it on "C:\Users\xxxxx.nuget\packages\jquery.datatables\1.10.15" and
"C:\Users\xxxxxx.nuget\packages\jquery\1.7.0"
Do i realy have to copy it to my wwwroot-Folder manualy?
If so, why i should use the package-manager?
Thanks for your help!!
Traditional web applications using JavaScript normally load the file from a local folder or from a web CDN (e.g. CDNJS.com etc). This is then loaded from the page (often referenced from a layout file).
Early on it used to be the case that JS libraries could be loaded via NUGET packages but this approach is now discouraged. It had to fix the creation of the script in a set location, e.g. /Scripts and there was no flexibility. Almost all client-side libraries are now in NPM as packages or on CDNs like cdnjs.com.
The current approach for .NET web apps to load client-side assets is either use LibMan or NPM and have some sort of webpack arrangement to compile/pack/copy. You would never load the JS from a /packages folder in the way you suggested.
Blazor Approach
Blazor (since .NET 5.0) can load either embedded JS modules (from your code), or from a URL directly.
If you want to package some JS with your application you should look at Razor Component libraries. This allows static assets such as JS files to be embedded in the code, which Blazor makes available via the _content route, e.g.
_content/LibraryName/myfile.js.
Because Blazor is a SPA you don't include JavaScript using a <script> tag in your HTML, you should load it as a module and reference it there.
This documentation explains it:
https://learn.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0#blazor-javascript-isolation-and-object-references
DataTables, JQuery
So should you include jquery.min.js and jquery.datatables.min.js in your library? I'd suggest a better approach is to load from a CDN - your package is smaller and there is a chance the URL is already cached and loaded, e.g.
var module = await js.InvokeAsync<IJSObjectReference>(
"import", "https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js");
This loads the module on-demand from the URL directly. You'd also need to load jquery before this.
Finally I'd make this observation: are you sure you want to go down this route?
There are several native Blazor libraries on NUGET for rendering and handling tables. You'll find it much easier to go this way rather than try to patch jquery-based libraries into a Blazor app.
I had a similar issue. Not with the same libraries, but I was wanting to do something that wasn't available in a Blazor library yet. I needed a video player that could handle a certain format that the default HTML 5 video element can't handle. There is an open source player, videoJS , that did the job, but it's a javascript library. It's available on npm and there are cdn's - however the plugins (as far as I could tell) weren't on CDN - so I had to go down the npm route.
When you install an npm package it puts it into a hidden node_modules folder. Unfortunately even if you point to that path or even copy the file in with your other js files it won't work. Npm packages are designed to be run by nodejs, rather than directly in the browser. In order for them to run in a Blazor app (in the browser) you have to do an intermediary step of transpiling it into a browser friendly format.
What I really wanted was a re-usable component, that wrapped the javascript.
It took me a while to get there but I finally figured it out. I've written a series of articles on my blog detailing it. The final one ports everything into a Razor Class library that can be consumed with no knowledge of the underlying js. The fourth article deals with importing npm libraries and using them within a web assembly app. I'll put the link below but essentially the process is:
Create a folder eg JS and initialise it for npm (npm init -y)
Install the required npm packages (npm install --save)
Create a src folder within the JS folder that that you will put your own js files in
Create an index.js file in src that imports the required javascript modules and exports what you want to consume
Install snowpack (npm install snowpack --save-dev) (or webpack but I found snowpack seems to work better)
Configure snowpack to process the contents of the src folder into wwwroot/js (without snowpack or similar the files in the npm package won't be in a browser or blazor useable format)
use javascript isolation to pick up your index.js file from wwwroot/js
See blog post here for full details (It's part 4 of a 5 part series - part five puts it all in a razor class library so you can add it to a project without ever seeing the javascript)
I know this is late but this SO question was one I kept coming across when searching on how to do what I wanted, so thought I'd put my solution here in case it helps anyone else searching for what I did.
I'm building a desktop application using Python, JS, HTML and CSS. I'm connecting python using eel. When I launch my desktop application through the python terminal, it works perfectly.
However, when I launch the app through electron via command line:
$npm start
The desktop application loads up, but it doesn't execute on any of the python backend, explained well by this error in the inspector:
Failed to load resource: net::ERR_FILE_NOT_FOUND eel.js:1
I'm not sure what is causing it, I have spent the last 8 hours testing things but to no avail.
I know you may need more information but I've been checking everything, from file structure i.e. the __.py outside web folder, to inserting <script type="text/javascript" src="/eel.js"></script>, so please comment below what specifically you require as including every possible cause would be a very huge question. I will include whatever is relevant in edits in this question alongside the final answer for anyone with similar issues in the future.
No need to run from npm. eel.js is just virtual javascript, dont bother with it.
Put this in your your_main.py file
import eel.browsers
asign your electron browser
eel.browsers.set_path('electron', 'node_modules/electron/dist/electron')
and then use it
eel.start('main.html', mode='electron')
to run, call from python:
python your_main.py
After reading the document of i18next, I am still confused about how to init & use it in both navigator auto detecting way and event trigger way.
Do I need to include it with <script> tag again if I have had npm install it?
Totally novice in npm, thanks for helping me out!!!
To use libraries installed with NPM in the browser, you traditionally need to use a build tool like Browserify or Webpack. Asking how to use an npm library in the browser is too broad of a question for StackOverflow.
If you aren't familiar with those tools and want to get up and running quickly, you can just include browser ready Javacript file in a script tag. Hit the "Raw" button, download the file, then include the downloaded file in your project like any other script file.
I'm trying to make a web application but i keep getting the error:
Uncaught ReferenceError: Platform is not defined
In the polymer.js file I downloaded from the website. How do H fix this?
I tried to re-download it and redid the import, which got rid of the other errors but this one persists.
You need to also load platform.js (the polyfills). Make sure it is the first script loaded on your page and comes before any HTML imports:
<script src="bower_components/platform/platform.js"></script>
The basic setup is here: http://www.polymer-project.org/docs/start/usingelements.html#using
More info here: http://www.polymer-project.org/docs/start/getting-the-code.html
platform.js was replaced now for webcomponents.js
If you are sure that is all right with your section and even so the error remains, there is something wrong with your environment (maybe some incompatibility between different versions of components or scritps).
Clear and download all your components and scripts again from the sources. I recommend use of Bower for that. Just wipe your repository and make a fresh bower install.
I am new to ExtJS. I tried installing it as per the steps given here.
But I am getting one error while running this command.
sencha create jsb -a http://localhost:8080/helloext/index.html -p app.jsb3
Error msg :
C:\Program Files\Apache Software
Foundation\Apache2.2\htdocs\helloext>sencha create jsb -a http://localhost:8080/helloext/index.html -p app.jsb3 'sencha' is not
recognized as an internal or external command, operable program or
batch file.
What is the problem ?
PS : I already done with the prior steps of installing Apache Server and unzipping ExtJS SDK.
Thanks.
Windows is not finding the sencha executable.
Are you sure you downloaded the Sencha Tools SDK? (Current version is 1.2.3beta). The link from that tutorial shows a page with an obvious link to download the ExtJS library, and less obvious link for the Sencha SDK. Try downloading and installing this from here. Then see if typing "sencha" on the command line does something sensible.
I dont have time to reaad te tutorial but I will let you know how I get started using extjs. I download the library and extract the folder. Name the folder extjs. Then in my webroot or whatever you prefer I make a directory called lib and place extjs inside of it. Then when i create a html document I reference the library by using <script type="text/javascript" src="/lib/extjs/ext-all.js></script>. This is how you can call it up in order to use it. If you have a "app/js" file simply reference it after the example I gave you above so that it is loaded after the ext-all.js file.