I'm trying to modelize proteins using the 3Dmol.js library.
here my code usues the pdb id of the protein u can test it and it works.. but i want to use local pdb file on my computer..
<!DOCTYPE html>
<script src="http://3Dmol.csb.pitt.edu/build/3Dmol-min.js">
</script>
<div id="element1" style="height: 1000px; width: 1000px; position: relative;" class='viewer_3Dmoljs' data-pdb1= '2hmi' data-backgroundcolor='0xffffff' data-style='cartoon:color=#ABC8E2' data-surface= 'opacity:1;color:white' data-select1='chain:A' data-surface1='opacity:3;color:green'>
</div>
I tried data-href='fileLocation/fileName.pdb'
error message: 3Dmol-min.js:176 XMLHttpRequest cannot load file://fileLocation/fileName.pdb. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
Here's what I found out:
Javascript is not allowed to arbitrarily access files on a local computer. If it were, any website would be able to steal all your data. the solution is to provide a URL to a file being served by a webserver.
Quick fix: I installed this small server link app in chrome. Opened the app and pointed the file location (URL) in my code.
And it worked!
I tried the method mentioned in the answer by #ana akana but it did not work. Instead, saving the file to /static folder works
<!DOCTYPE html>
<script src="http://3Dmol.csb.pitt.edu/build/3Dmol-min.js"></script>
<div id="element1" style="height: 1000px; width: 1000px; position: relative;" class='viewer_3Dmoljs' data-href='/static/fileName.pdb' data-backgroundcolor='0xffffff' data-style='cartoon:color=#ABC8E2' data-surface= 'opacity:1;color:white' data-select1='chain:A' data-surface1='opacity:3;color:green'>
</div>
Related
This questions it's maybe obvious, but I can't do it?
How can I publish my paragraphs in Zeppelin 0.8.0?
The docs says that you only need to copy the link that appear when you press "link this paragrah" and put it in your website page.
I did that procedure buuuuuut. It is not working.
I did the simplest website page just for test it, just the <iframe> URL </iframe> and appear a whitebox without anything.
<!DOCTYPE html>
<html>
<head>
<title>HTML Test</title>
</head>
<body>
<p>Below is an iframe.</p>
<iframe http://goku:8080/#/notebook/2DM1X52VT/paragraph/20180804-155205_969494590?asIframe width="800" height="450">
<p>iframes are not supported by your browser.</p>
</iframe>
</body>
</html>
I don't now if I need to config something else in Zeppelin because when I put another URL in <iframe URL> </iframe> the website page works
The way to solved it was installing in chrome a extentions Ignore X-Frame headers.
I am trying to run the google-cdn plugin via Gulp (gulp-google-cdn) to covert bower references in my HTML file into the CDN equivalent. Gulp-google-cdn does not do anything, and enabling the DEBUG, shows: google-cdn Could not find satisfying version for angular-material ^1.0.5
My task (I use a subdirectory with tasks per file):
gulp.task('HTML:Release', function() {
return gulp.src('../src/*.html')
.pipe(googleCdn(require('../bower.json')))
.pipe(gulp.dest('../dist/') )
;
});
HTML:
<!DOCTYPE html>
<html ng-app="OntarioDarts" ng-cloak lang="en">
<head>
</head>
<body layout="row" ng-cloak>
<div layout="column" class="relative" layout-fill role="main">
<md-content flex md-scroll-y>
<ng-view></ng-view>
</md-content>
</div>
</body>
<!-- Load JavaScript Last for Speed. Load from CDN for cache speed -->
<!-- Angular JS -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="bower_components/angular-material-icons/angular-material-icons.min.js"></script>
The distribution file does not point Angular to the CDN, but still tries to use the bower_components, even though it did not complain that the files were not found.
One problem I found is that I have Angular set at ^1.5.0 in my bower.json. However, I was only using the default Google CDN, which does not currently have the 1.5.0 available. I changed the version in the bower.json file to be ^1.4.0, and then the file was changed to use the CDN with version 1.4.7.
The problem though is that the reference did not get changed to HTTPS://, but was left simply as src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"
Gulp-google-cdn does not do anything, and enabling the DEBUG, shows: google-cdn Could not find satisfying version for angular-material ^1.0.5
That's because the newest version available from the Google CDN is 1.0.4.
The problem though is that the reference did not get changed to HTTPS://, but was left simply as src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"
That's not necessarily a problem. That's a protocol-relative URL. If your page is served over HTTP, angular.min.js is fetched over HTTP. If your page is served over HTTPS, angular.min.js is fetched over HTTPS.
Unless you absolutely need angular.min.js to always be fetched over HTTPS you can just leave it like that.
EDIT: ... except for when you're trying to open a local HTML file in a browser. Then your protocol is file:// and the protocol relative URL will refer to your local file system. Which of course leads nowhere.
One way of fixing this would be to serve your html files through a locally running webserver (e.g. with gulp-webserver). When your HTML pages come from e.g. http://localhost:8000/ all the protocol relative URLs will be served over http:// as well.
If you just want all the CDN URLs to be prefixed with https:// instead, here's a way to wrap the google-cdn-data object to achieve this:
var gulp = require('gulp');
var googleCdn = require('gulp-google-cdn');
var jp = require('jsonpath');
function protocol(proto, cdn) {
jp.apply(cdn, '$.*.url', function(url) {
return function(version) {
return proto + url(version);
};
});
return cdn;
}
gulp.task('HTML:Release', function() {
return gulp.src('../src/*.html')
.pipe(googleCdn(require('./bower.json'), {
cdn: protocol('https:', require('google-cdn-data'))
}))
.pipe(gulp.dest('../dist/') );
});
You'll need to run npm install --save-dev google-cdn-data jsonpath for this to work.
I have built a Node.JS app (meaning I wrote my own HTTP server within the the main JS file, which works as it should with the rest of the application). The HTML and CSS renders as it should within localhost. Even JQuery works (with the source file imported via CDN). However, I have tried adding very basic AngularJS within the Index.html page and the AngularJS refuses to show (anywhere) in my localhost. It should be showing the number "3", but does not.
This is my Index.html page with the angular code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
<link rel="stylesheet" href="/css/home.css">
<script src="/node_modules/angular/angular.js"></script>
<script src="/node_modules/angular-route/angular-route.js"></script>
</head>
<body>
<body ng-app>
<p>AngularJS code: {{ 1 + 2 }}</p>
</body>
<div class="hm-container">
<h1 class="hm-title">Some text</h1>
</div>
</body>
</html>
The console log message in chrome says:
"Failed to load resource: the server responded with a status of 404 (Not
Found) http://localhost:3000/node_modules/angular/angular.js"
The Index.html page renders the Angular code correctly only as a standalone isolated HTML page (without the CSS) when tested within my Brackets text editor browser preview and when tested as a stand alone HTML file using the HTTP-Server module. It correctly shows the number "3". So I know my angular code itself is not the issue here. In my localhost the HTML page does not show the number "3", nor does it even show "{{ 1 + 2 }}". It simply reads: "AngularJS code:" with the rest of the HTML and CSS etc.
Even importing the AngularJS source file via CDN, or downloading the AngularJS source file from Angular's site, instead of from NPM does not make any difference. I have played with the directory structure as well per some of your recommendations, with no luck. So I know it is not the file path of the Angular source file which is the issue.
I have been stuck on this for too many days, have lost sleep, and foregone all other activities all because of this, so If any of you can give me your input as to what is going on and how to resolve this issue, I would be extremely grateful!!! :)
Alright, this is how I solved the issue. It was a server-side issue as I had originally suspected. Within the main Node.JS file (typically either named server.js or app.js) the following is needed:
you will most likely already have this part...
var express = require('express'),
app = express();
Then immediately after the above code block skip a few lines and add...
app.use(express.static(__dirname + '/views'));
Apparently this is how Express knows where to serve your JS files. The 'views' folder is where my HTML pages are. You may have them in a folder named 'public'.
The solution to the following link is what helped me solve the issue: AngularJS Code not working with NodeJS
I will add that this is definitely strange to me in that JQuery works by importing it's source file via CDN WITHOUT THE ABOVE CODE CHANGE, yet Angular would not work via both a locally downloaded Angular source file OR via the Angular CDN! If I ever figure out why this is so, I will be sure to update this answer. If any of you Angular, Node, Express experts know why this is so, please enlighten us all!
Hopefully this helps someone running into a similar issue. A big thanks to the two of you that tried to help me solve this weird issue. Your time and input was greatly appreciated!
There is problem obviously in attaching Angular JS to your index. You have already said that you even tried attaching through CDN.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<h1> {{1+2}} </h1>
</div>
</body>
</html>
This works, I have checked. Try to integrate your stuff in this code. And follow Jason's suggestion to attach angular js from your system only. Keep the angular js file within the same folder.
To make that work, you need a directory structure like this:
|--app
| |--index.html
| |--node_modules
| | |--angular
| | | |--angular.js
| | |--angular-route
| | | |--angular-route.js
| |--css
| |--home.css
I've set up a REST service, using Spring framework. The service, simply reads some info from database, and represents it in JSON format. The service works properly when accessing it directly via browser (i.e: http://localhost:8080/infractions/get?no=2 works just fine.) But, when I try to access it using angularJS, it doesn't show anything! I've followed this tutorial provided by Spring official website, and here's how my code looks like:
index.html file:
<!doctype html>
<html ng-app>
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="get.js"></script>
</head>
<body>
<div ng-controller="getFractionByID">
<p>Fraction Type is: {{get.name}}</p>
</div>
</body>
</html>
get.js file:
function getFractionByID($scope, $http) {
$http.get('http://localhost:8080/infractions/get?no=2').
success(function(data) {
$scope.get = data;
});
}
I'm really new to non-academic programming and I'm rather inexperience, so please help me find out where should I start finding the problem?
Update: Error message:
XMLHttpRequest cannot load http://localhost:8080/infractions/get?no=2. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
I took a freshly-cloned copy of the Boomerang library and ran make to produce the default boomerang.js script.
I copied that file, along with the following HTML document into a directory.
<html>
<head>
<script src="/boomerang.js" type="text/javascript"></script>
<script type="text/javascript">
BOOMR.init({
user_ip: "127.12.34.56",
beacon_url: "http://127.0.0.1:8008/beacon",
beacon_type: "POST"
});
</script>
</head>
<body>
<h1>Hello RUM</h1>
</body>
</html>
I then served that out of host running on port 8008 and viewed the html file. When I check the access log, I see
127.0.0.1 - - [17/May/2016:15:13:31 +0200] "GET /beacon?u=http%3A%2%2F127.0.0.1%3A8008%2Frum.html&v=0.9&...
That is, the Boomerang library is issuing a GET instead of POST and at a quick glance I can't figure out why. (The /beacon endpoint doesn't actually exist, so it throws a 404, but that is (I hope) beside the point). I'll take a closer look with dev tools, but has anyone experienced this before?