I want to visualize a large network graph on a web interface. After a few days of search, I decided to use Sigma.js because it looks simple and it's HTML5 compatible.
The problem is that I can't display any graph example from Sigma.js web page, even when I use the minimal code that the author has on Sigma.js's homepage. I even copy-pasted entire web pages, with right click-view code, but in vain (like this). I have pasted all the necessary files in the same folder that the simple .html file is located (css files, js files and even the .gexf file that the example needs) but I only get a page with a black rectangle and nothing more. The graph isn't displayed. What am I doing wrong?
Do I need to first build the sigma.js file, as the author mentions in the code repository of the library in GitHub? I need this tool to visualize the graph (I'm going to feed the graph with data on the fly) but I can't even experiment with some simple code! I even followed that "guide" and did every step but I can't anything working.
Webstudio: Microsoft Expression Web 4 and OS: Windows 8 Pro (I tried opening the web pages in IE10, FF17 and Chrome 23).
The div you want to have your graph has to be absolute positioned. I think it's a canvas issue.
so the html
<!DOCTYPE html>
<html>
<head>
<script src="http://sigmajs.org/js/sigma.min.js"></script>
<script src="/js/sigmatest.js"></script>
<link rel="stylesheet" href="/css/sigma.css">
</head>
<body>
<div id="sigma-parent">
<div id="sigma-example">
</div>
</div>
</body>
</html>
the css
#sigma-parent {
width: 500px;
height: 500px;
position: relative;
}
#sigma-example {
position: absolute;
width: 100%;
height: 100%;
}
the js in sigmatest.js
function init() {
var sigRoot = document.getElementById('sigma-example');
var sigInst = sigma.init(sigRoot);
sigInst.addNode('hello',{
label: 'Hello',
x: 10,
y: 10,
size: 5,
color: '#ff0000'
}).addNode('world',{
label: 'World !',
x: 20,
y: 20,
size: 3,
color: '#00ff00'
}).addEdge('hello_world','hello','world').draw();
}
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', init, false);
} else {
window.onload = init;
}
This probably won't help as many people, but in my case it was simply that I didn't specify x or y properties for each node. I was trying to use the forceAtlas2 algorithm to automatically "place" my nodes, not realizing they had to be drawn in some position first in order for the layout to then apply.
Make sure you have downloaded this file http://sigmajs.org/data/arctic.gexf
and refered the path properly in the code
Sigma js has browser compatibilty issue. Try updating the bowser or use some other browser.
I work with firefox and it works fine.
Related
This isn't a problem, just asking out of curiosity:
How do HTML/JS projects which include the ProcessingJS library work even when offline, given that the library link is the standard https kind and not a link to a file on the disk?
I tested this by turning WiFi off, then opening the project file in Safari (which worked), and trying to load a different webpage (which didn't, as expected). I know that the library is also available as downloadable file, but this project isn't using that, only the link:
<!DOCTYPE html>
<html>
<head>
<title>Example Program</title>
<style>
body {
background-color: purple;
}
#canvasDiv {
margin-left: 20%;
margin-right: 20%;
text-align: center;
}
</style>
</head>
<body>
<div id="canvasDiv">
<canvas id="_canvas"></canvas>
</div>
</body>
<script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script>
<script>
var canvasWidth = 200;
var canvasHeight = 200;
var drawSmiley = function(p, x, y, d) {
p.background(255);
p.strokeWeight(3);
p.stroke(0);
p.fill(250, 200, 0);
p.ellipse(x, y, d, d);
p.strokeWeight(8);
p.point(x - 0.2*d, y - 0.1*d);
p.point(x + 0.2*d, y - 0.1*d);
p.strokeWeight(5);
p.arc(x, y + 0.05*d, 0.6*d, 0.4*d, 0.5, 2.64);
p.textSize(24);
p.fill(0, 200, 0);
p.noStroke();
p.textAlign(p.CENTER, p.CENTER);
p.text("Hello", 100, 20);
p.text("World", 100, 180);
};
var applyProcessing = function(p) {
p.setup = function() {
p.size(canvasWidth, canvasHeight);
drawSmiley(p, 100, 100, 100);
};
};
var canvas = document.getElementById("_canvas");
var pInstance = new Processing(canvas, applyProcessing);
</script>
</html>
Does running the script for the first time automatically download and store a copy of the library somewhere, or is ProcessingJS functionality built into the browser too, like regular JavaScript?
Look at the requests that your browser makes, and you can see that the script response gets cached. The red line below is when I disconnected the internet and loaded the page again.
jsdelivr sets the following header on scripts it serves:
cache-control: public, max-age=31536000, s-maxage=31536000, immutable
And:
The max-age=N response directive indicates that the response remains fresh until N seconds after the response is generated.)
Indicates that caches can store this response and reuse it for subsequent requests while it's fresh.
So the script is permitted to stay in storage and not be re-fetched for 31536000 seconds. See here for a description of "freshness".
jsdelivr does this for all of its scripts, not just Processing.js. jsdelivr could well have set different headers and told browsers that it should re-download the script every time - but that would both require more of their server resources and would have broken your example page while no internet connection is available.
I installed a SSL trust logo onto my website – the following code is what displays the logo:
<script language="JavaScript" type="text/javascript">
TrustLogo("https://www.(mywebsite).com/comodo_secure_seal_76x26_transp.png", "CL1", "none");
</script>
I needed it to be fixed on the bottom left corner of my page, so after a lot of trial and error I settled with the following code:
img:not(main img) {
position: fixed;
bottom: 0;
left: 0;
The problem is, this isn't really targeting the specific image that needs to be targeted. The bigger problem is that this does not work on any other browser other than the browser I had originally tested (Safari). (Maybe it's because the 'img' tag is not appropriate targeting?)
How can I target this logo? (If not through CSS, how can I make it fixed?)
Safari (the CSS works here)=>
Chrome (CSS does nothing)=>
This worked for me:
Do not use img to target the logo – use one of the image's attrributes to be as specific as possible.
Try something as simple as the src attribute:
[src="https://www.(mywebsite).com/comodo_secure_seal_76x26_transp.png"]
You can also use a node inspector to view more useful information to help you pinpoint the image.
I am trying to add some JavaScript code to my WordPress page that makes a blue circle move across the screen whenever the page is loaded (via the Raphael JS documentation). I copied and pasted the JS code into the "Text" section of my WordPress page but when I saved and previewed the page, not only did the ball not appear but all of the tags were deleted. Here is the source code I inserted:
<script src="raphael-min.js"></script>
<script>
window.onload = function() {
var p = Raphael(10, 10, 400,400);
var c = p.circle(100, 100, 45);
c.attr({
fill: 'blue',
cursor: 'pointer'
}).animate({
cx : 300
}, 5000);
}
</script>
Is there some standard way to use JavaScript in WordPress? All help is greatly appreciated. Thanks!
You must check your .js file path correctly,
- use phoenix editor extension in firefox to check your .js loaded or not
- make sure your .js file position in top position before </head
This is weird..
I downloaded three.js in my directory 'brick':
git clone https://github.com/mrdoob/three.js.git
this makes a subdir:
brick/three.js/
When I go to
brick/three.js/examples
and in Firefox open the file
brick/three.js/examples/webgl_geometry_cube.html
a nice rotating cube shows up. Then when I copy it (that is, brick/three.js/examples/webgl_geometry_cube.html) to the directory 'brick' and change the three.min.js reference in the new brick/webgl_geometry_cube.html accordingly, brick/webgl_geometry_cube.html doesn't work - no cube shows up when I open it in firefox.
Let me be more specific about the three.min.js reference in webgl_geometry_cube.html. The top of
brick/three.js/examples/webgl_geometry_cube.html
looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - geometry - cube</title>
<meta charset="utf-8">
<style>
body {
margin: 0px;
background-color: #000000;
overflow: hidden;
}
</style>
</head>
<body>
<script src="../build/three.min.js"></script>
<script>
var camera, scene, renderer;
var mesh;
when I copy it to
brick/webgl_geometry_cube.html
I change the line
<script src="../build/three.min.js"></script>
to:
<script src="three.js/build/three.min.js"></script>
I verify that this new reference actually works, by opening
brick/webgl_geometry_cube.html
in firefox, choosing 'view source', and in the source follow the reference to three.min.js. If I am shown the source code of three.min.js (which I am), Im happy.
But why then, does no cube rotate when opening the moved file in Firefox? I'm puzzled. There doesn't seem to be any other path-dependent references in webgl_geometry_cube.html. The full source code of webgl_geometry_cube.html can be seen here:
webgl_geometry_cube.html on Github
Also, how do I go about debugging this? Can I do some sort of step-through of the code, to see where the two files diverge in their execution?
The example uses a texture, so you need to adjust the path textures/crate.gif in the JavaScript too, otherwise the texture isn't found.
It turns out there was another reference in webgl_geometry_cube.html that I hadn't spotted: The file crate.gif is referred to in line 34, and this reference shall of course also be updated to reflect the new relative position of crate.gif:
three.js/examples/textures/crate.gif
This solution was given by user maenu. Thank you man..
I'm trying to load in image in Javascript that's on my computer, so that I can make a sprite for a game. I don't have this html on the web yet, and the image is saved locally on my computer. Is this possible to do as the book I'm learning from loads the image from a folder, but I'm unable to load the image. Heres some of my code. Thanks,
$(document).ready(function(){
var params ={
images: 'C:\EclipseWorkspaces\WebTest\images\Luigi.png',
imagesWidth: 256,
width: 64,
height: 64,
$drawTarget: $('#draw-target')
};
var sprite1 = DHTMLSprite(params),
sprite2 = DHTMLSprite(params);
sprite2.changeImage(5);
sprite1.draw(64,64);
sprite2.draw(352, 192);
});
</script>
</head>
<body>
<div id="draw-target">
</div>
</body>
You cant access to HD with Javascript. It would be security violation if you could so.
You can load the image in three ways.
1 You can use an image from the web
2 Use a server side program to load the image, and then pass it to your client side javascript.
3 You can do that with relatives path (../images/myImg.png)
Take a look at this article in Wikipedia:
http://en.wikipedia.org/wiki/JavaScript#Security
Make the image path relative to where you store your html file. For instance put your index.html in c:\temp and create a folder c:\temp\img and put all your images in there. Then you can reference the images as img/imagename.jpg