I'm trying to run the ConvNetJS example through the Cloud9 online IDE. The script included works when it is inside the HTML, but not when I link it as follows:
<html>
<head>
<title>minimal demo</title>
<!-- CSS goes here -->
<style>
body {
background-color: #FFF; /* example... */
}
</style>
<!-- http://jquery.com/ -->
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<!-- http://getbootstrap.com/ -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- import convnetjs library -->
<script src="//cs.stanford.edu/people/karpathy/convnetjs/build/convnet-min.js"></script>
<!-- app's own JavaScript -->
<!--script type="text/javscript" src="../static/script.js"></script-->
</head>
<body>
<div id="egdiv"></div>
</body>
</html>
with the javascript inside script.js:
function periodic() {
var d = document.getElementById('egdiv');
d.innerHTML = 'Random number: ' + Math.random();
};
var net; // declared outside -> global variable in window scope
$(function start() {
// this gets executed on startup
net = new convnetjs.Net();
// example of running something every 1 second
setInterval(periodic, 1000);
});
When I run the application through the IDE I get this warning through the console: Mixed Content: The page at 'https://ide50-stephenwist.cs50.io/' was loaded over HTTPS, but requested an insecure script 'http://cs.stanford.edu/people/karpathy/convnetjs/build/convnet-min.js'. This content should also be served over HTTPS.
How do I get around this? I am using chrome and letting it run 'insecure scripts'. Thanks for giving this a read, here's a puppy
You just can't load unsecured content without having this warning.
The only thing you can do when you have some unsecured external content to load is to copy that content and save it on your secured domain.
This way, you are able to run it from a secured address (yours).
NOW, cs.stanford.edu is a secured website.
So just add the https: in front of //cs.stanford.edu/people/karpathy/convnetjs/build/convnet-min.js and there will be no warning.
How about try to add https: in front of your cdn //cs.stanford.edu/people/karpathy/convnetjs/build/convnet-min.js.
Perheps something like https://cs.stanford.edu/people/karpathy/convnetjs/build/convnet-min.js should prevent Chrome warning?
Related
I'm trying to debug an experiment written in JS & html. I'm running an html template that imports JS codes. But all I get is a blank page when I run it in chrome. I checked whether my chrome preference allows javascript to be run.
<!doctype html>
<html>
<head>
<title>Name Face Association Task</title>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/lib/jquery-min.js" type="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/javascript"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/lib/underscore-min.js" type="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/javascript"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/lib/backbone-min.js" type="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/javascript"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/lib/d3.v3.min.js"></script>
<!-- jsPsych Plugins -->
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/jsPsych/jspsych.js"></script>
<script defer src ="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/jsPsych/plugins/jspsych-instructions.js"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/jsPsych/plugins/jspsych-html-keyboard-response.js"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/jsPsych/plugins/jspsych-survey-html-form.js"></script>
<link href="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/jsPsych/css/jspsych.css" rel="stylesheet" type="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/css"></link>
<!-- additional functions -->
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/js/supplementary-functions.js"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/js/questionnaire.js"></script>
<!-- psiTurk
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/js/psiturk.js" type="text/javascript"></script>
<script type="text/javascript">
// These fields provided by the psiTurk Server
var uniqueId = "{{ uniqueId }}"; // a unique string identifying the worker/task
var adServerLoc = "{{ adServerLoc }}"; // the location of your ad (so you can send user back at end of experiment)
var mode = "{{ mode }}"
</script>
-->
<!-- experiment -->
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/js/NFA.js"></script>
</head>
<body>
<noscript>
<h1>Warning: Javascript seems to be disabled</h1>
<p>This website requires that Javascript be enabled on your browser.</p>
<p>Instructions for enabling Javascript in your browser can be found
here</p>
</noscript>
</body>
</html>
My psiturk is not able to be downloaded, so I commented out all the code related to psiturk and tried running it in plain html instead.
I guess your server does not have a path like http://example.com/Users/jasonlim/.... :)
You should open your browser's devtools (F12) to see the errors. It would have told you that those files cannot be found.
You need to make those paths relative to the current page (something like static/lib/jquery-min.js or lib/jquery-min.js depending on where your HTML file is located), or when running a local HTTP server you can make them relative to the root of the domain (e.g. /lib/jquery-min.js).
Plus, you have invalid type attributes. The MIME type for JavaScript is text/javascript and not /Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/javascript. Same goes for the style tag, the MIME type should be text/css and not /Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/css.
You can check the documentation about <script> and <style> here. Also, take a look at this tutorial to understand relative and absolute URLs.
But, it appears to me that you are looking at this the wrong way in the first place. According to the psiTurk documentation, you need to use the psiturk tool (for example with the debug command) to test your experiment locally, not by opening the HTML file manually. Your comment says "These values are provided by the psiTurk server" but if you just open the HTML files, there is no such psiTurk server, and you will have variables actually containing {{ uniqueId }} for example, instead of the ID that the server would normally put there...
I follow the instruction, but error report like this
my code:
<html>
<head>
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs"></script>
<!-- Load Posenet -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow-models/posenet"></script>
</head>
<body>
<img id='cat' src='./pose/images/aa_090.jpg'/>
</body>
<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
var flipHorizontal = false;
var imageElement = document.getElementById('cat');
posenet.load().then(function(net) {
const pose = net.estimateSinglePose(imageElement, {
flipHorizontal: true
});
return pose;
}).then(function(pose){
console.log(pose);
})
</script>
which is exactly the same as
https://github.com/tensorflow/tfjs-models/tree/master/posenet
Plz do me a favor
I tried the same code snippet and it worked for me without any issue, the cdn also seems to be working when I checked, so the problem could be a few things:
Your image does not exist at the given location
There was some network issue when you attempted this
There is an issue fetching the image locally due to cors : https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp
Incase the issue persists try downloading the CDN's and the image and host it by following,
In the directory of your files run: python -m SimpleHTTPServer 8000
Go to localhost:8000/yourfile.html
Revert back in case of any issues
Right now I'm working with Three.js , Aframe and AR.js .
I'm following Jerome's example :
https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/multi-markers/examples/player.html
I've included his library in my project sample and I'm trying to figure out why this happens :
When I'm on the player.html page , everything's working , the console doesn't display any error , just a warning :
stop profile.trackingBackend() obsolete function. use .trackingMethod instead
(But I don't think this is causing the problem)
And then , when I click to scan the markers , the button works , the function behind executes , I get redirected to the learner.html webpage , but all import scripts are getting 400 error code and aren't loaded on the website so nothing's working.
What I did : I've checked the scripts via online tools , line by line , copy paste try.They're the same , when I say the same I mean the learner.html page has 3 less scripts imported than the player.html , the common scripts syntax is the same on both pages.
What I noticed : If I try to access the webpage without the options in the URL the page is perfectly working ... well , the page is giving me some output about the missins options but the scripts are loaded , but I need the options :(
The problem with the scripts imports I think it's caused by that object included in the URL webpage , weird thing because it has some other things added in the player webpage as well and it's working.
I'm using NodeJS v4.2.6 & NPM v3.5.2 & Express v4.16.4
This is the way how I handle the requests for these 2 page in NodeJS:
app.get('/multiMarkers4', function (req, res) {
res.render( pathView + 'player.ejs', { pageName:"player", errorMsg:"" });
});
app.get('/learner', function (req, res) {
res.render( pathView + 'learner.ejs', { pageName:"learner", errorMsg:"" });
});
Yes, I've changed the files from html to ejs and moved them into the /views ( only these 2 learner.ejs and player.ejs )
For scripts I've created some specific paths in Node :
app.use('/three', express.static(__dirname + '/three.js'));
The learner.ejs and player.ejs webpages have pretty much the same code as they have in the Jerome's GitHub repository , the only modified thing are the import scripts :
This is in player.ejs and it's working
<!-- three.js library -->
<script src='/three/examples/vendor/three.js/build/three.js'></script>
<script src='/three/examples/vendor/three.js/examples/js/libs/stats.min.js'></script>
<!-- jsartookit -->
<script src='/three/vendor/jsartoolkit5/build/artoolkit.min.js'></script>
<script src='/three/vendor/jsartoolkit5/js/artoolkit.api.js'></script>
<!-- aruco -->
<script src='/three/vendor/js-aruco/src/svd.js'></script>
<script src='/three/vendor/js-aruco/src/posit1.js'></script>
<script src='/three/vendor/js-aruco/src/cv.js'></script>
<script src='/three/vendor/js-aruco/src/aruco.js'></script>
<script src='/three/src/threex/threex-aruco/threex-arucocontext.js'></script>
<script src='/three/src/threex/threex-aruco/threex-arucodebug.js'></script>
<!-- include threex.artoolkit -->
<script src='/three/src/threex/threex-artoolkitsource.js'></script>
<script src='/three/src/threex/threex-artoolkitcontext.js'></script>
<script src='/three/src/threex/threex-artoolkitprofile.js'></script>
<script src='/three/src/threex/threex-arbasecontrols.js'></script>
<script src='/three/src/threex/threex-armarkercontrols.js'></script>
<script src='/three/src/threex/threex-armarkerhelper.js'></script>
<script src='/three/src/threex/threex-arsmoothedcontrols.js'></script>
<script>THREEx.ArToolkitContext.baseURL = '';</script>
<script src='/three/examples/multi-markers/threex-armultimarkerutils.js'></script>
<script src='/three/examples/multi-markers/threex-armultimarkercontrols.js'></script>
<script src='/three/examples/multi-markers/threex-armultimarkerlearning.js'></script>
<script src='/three/examples/multi-markers/examples/threex-screenasportal/threex-screenasportal.js'></script>
<script>THREEx.ScreenAsPortal.baseURL = 'threex-screenasportal/';</script>
When I'm on player.ejs page the URL is :
https://x.y.z/multiMarkers4#%7B"trackingBackend"%3A"artoolkit"%7D
When I'm on player.ejs page the console log in devTools is :
THREE.WebGLRenderer 86
threex-artoolkitprofile.js:145 stop profile.trackingBackend() obsolete function. use .trackingMethod instead
ARjs.Profile.trackingBackend # threex-artoolkitprofile.js:145(This is that warning,the rest of the output is just simple output)
artoolkit.min.js:1 Allocated videoFrameSize 1228800
artoolkit.min.js:1 Pattern detection mode set to 1.
artoolkit.min.js:1 Pattern ratio size set to 0.500000.
This is in learner.ejs and it's working WITHOUT THE OPTIONS IN URL :
<!-- three.js library -->
<script src='/three/examples/vendor/three.js/build/three.js'></script>
<script src='/three/examples/vendor/three.js/examples/js/libs/stats.min.js'></script>
<!-- jsartookit -->
<script src='/three/vendor/jsartoolkit5/build/artoolkit.min.js'></script>
<script src='/three/vendor/jsartoolkit5/js/artoolkit.api.js'></script>
<!-- aruco -->
<script src='/three/vendor/js-aruco/src/svd.js'></script>
<script src='/three/vendor/js-aruco/src/posit1.js'></script>
<script src='/three/vendor/js-aruco/src/cv.js'></script>
<script src='/three/vendor/js-aruco/src/aruco.js'></script>
<script src='/three/src/threex/threex-aruco/threex-arucocontext.js'></script>
<script src='/three/src/threex/threex-aruco/threex-arucodebug.js'></script>
<!-- include threex.artoolkit -->
<script src='/three/src/threex/threex-artoolkitsource.js'></script>
<script src='/three/src/threex/threex-artoolkitcontext.js'></script>
<script src='/three/src/threex/threex-artoolkitprofile.js'></script>
<script src='/three/src/threex/threex-arbasecontrols.js'></script>
<script src='/three/src/threex/threex-armarkercontrols.js'></script>
<script src='/three/src/threex/threex-armarkerhelper.js'></script>
<script src='/three/src/threex/threex-arsmoothedcontrols.js'></script>
<script>THREEx.ArToolkitContext.baseURL = '';</script>
<script src='/three/examples/multi-markers/threex-armultimarkerutils.js'></script>
<script src='/three/examples/multi-markers/threex-armultimarkercontrols.js'></script>
<script src='/three/examples/multi-markers/threex-armultimarkerlearning.js'></script>
When I'm on learner.ejs page the URL is :
https://x.y.z/learner?%7B"backURL"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4%23%257B%2522trackingBackend%2522%253A%2522artoolkit%2522%257D"%2C"trackingBackend"%3A"artoolkit"%2C"markersControlsParameters"%3A%5B%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Fhiro.patt"%7D%2C%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Fkanji.patt"%7D%2C%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Fa.patt"%7D%2C%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Fb.patt"%7D%2C%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Fc.patt"%7D%2C%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Ff.patt"%7D%5D%7D
As I said , for https://x.y.z/learner the scripts are included but I don't have the options and I need them
When I'm on learner.ejs page the console log in devTools has the 400 response from server for all scripts :
Failed to load resource: the server responded with a status of 400 (Bad Request)
How can I import these scripts and keep the options so I will be able to learn the marker area?
Ok, I'll put here the answer to my question.
After posting this question, I've tried to change back from EJS to HTML and see if there's any difference, still the same results.
So I chose the hard way: I've made some changes in the library, to sum it up:
I've kept the way how I access the file e.g: via /learner & without any parameters in the URL, But I need them, so I've moved them on the web localStorage and just used them from there on the website part and that worked.
I am running django 2.0, which has jquery 2.2.3. I want to utilize this ImageViewer Javascript app https://github.com/s-yadav/ImageViewer with one of my admin pages. I added the js files and css file to the Media class within my ModelAdmin class, and collected all the static files. The files are loaded on the web page. I am following the app's example for Image Mode (http://ignitersworld.com/lab/imageViewer.html)
The page loads, but there is an error in the js console:
imageviewer.js:16 Uncaught TypeError: $ is not a function
at imageviewer.js:16
at imageviewer.js:789
(anonymous) # imageviewer.js:16
(anonymous) # imageviewer.js:789
The first few lines of the ImageViewer script - line 16 is the one with 'body'
/*
ImageViewer v 1.1.3
Author: Sudhanshu Yadav
Copyright (c) 2015-2016 to Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
Demo on: http://ignitersworld.com/lab/imageViewer.html
*/
/*** picture view plugin ****/
(function ($, window, document, undefined) {
"use strict";
//an empty function
var noop = function () {};
var $body = $('body'),
$window = $(window),
$document = $(document);
The last line of the script is line 789, the source of the second error:
}((window.jQuery), window, document));
The header of my admin page:
<script type="text/javascript" src="/admin/jsi18n/"></script>
<link href="/static/imageviewer.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="/static/admin/js/vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.js"></script>
<script type="text/javascript" src="/static/admin/js/urlify.js"></script>
<script type="text/javascript" src="/static/admin/js/prepopulate.js"></script>
<script type="text/javascript" src="/static/admin/js/vendor/xregexp/xregexp.js"></script>
<script type="text/javascript" src="/static/imageviewer.js"></script>
<script type="text/javascript" src="/static/my_code.js"></script>
The html for my image in the admin page:
<div class="readonly"><div id="image-gallery-3" class="cf"><img src="/documents/bfa1a808-7412-46c0-9d68-1a1df98f5a9c_thumb.jpg" data-high-res-src="/documents/bfa1a808-7412-46c0-9d68-1a1df98f5a9c.jpg" alt="" class="pannable-image"></div></div>
And the my_code.js to make this thing work, as shown in the example:
$(function () {
$('.pannable-image').ImageViewer();
});
The only difference between the example page for ImageViewer and my code is that the my_code.js appears in the example page after the html for the image, and my_code.js appears before the html for the image. Does that make a difference?
I am not a js guy, and I have run into this same error before when trying to integrate a third party Javascript code with the django admin pages. I still don't have a solution to this problem, except not to try to use any custom js with the django admin pages!
I think there is some sort of interaction between the django jquery and third party js, which causes this error, but again, I am not a js guy! I have google the error and integrating third party js with the django admin, but have not found anything that works.
Thanks!
Mark
After some testing and more googling I found the following answer.
I had to add the line var jQuery = django.jQuery, $ = jQuery; at the top of the imageviweer.js file. The issues was the line django.jQuery = jQuery.noConflict(true); in jquery.init.js.
This image viewer allows one to zoom in on an image. So, there are really two images, the one that is loaded on the page, and the one that the imageviewer script manipulates for the zoom and pan. The image on my page seems to have been too small. Once I increased the size of that image, the zoom/pan worked.
Problem solved, and I hope this is a "universal" solution for future third party javascript plugins for the django admin pages.
Mark
I wrote a website that uses a JavaScript loader to load html-files within the index.html into a specific div.
The loaded html page on its own looks like this:
<div id="pageloader">
CONTENT
</div> <!-- END #pageloader -->
Naturally, when the page is loaded on it's own, there are no stylesheets connected to it and the rest of the index.html is missing.
Is there a way to automatically forward to the index.html when the "loader-page" is accessed on it's own? I tried a simple forwarding by adding this header to the "loader-page" but now it always forwards to the index.html even when the "loader-page" is accessed through the index.html.
<head>
<meta http-equiv="refresh" content="0; URL=http://...">
</head>
This is a little quick-'n'-dirty but you could set a variable in the loader that the included page checks.
In your loader:
<script type="text/javascript">
var loader = 1;
</script>
In the loaded page:
<script type="text/javascript">
if (loader != 1) {
window.location = "/index.html";
}
</script>