Python/JavaScript/HTML create a computer network diagram dynamically - javascript

I want to create a computer network diagram dynamically on UI, with the network diagram having switches, routers and other devices and these devices are connected with links and i need to label these links at both ends of the devices being connected by a particular link.
I am open to creating this image from backend, I have python for backend, with any image creation library. Though i would still prefer if there is any way to do it with any JS module, if available. In python i came across one library PIL.
Could you please point me to any JS modules that can help me do this, or any python module which would best suite the requirement.
Thanks in advance.

You may want to take a look at the RaphaelJS Javascript library, which uses SVG under the covers. Their website have an example with a graph which may be a good starting point to your diagram creation code: http://raphaeljs.com/graffle.html That's what I'd recommend for doing it in the client side.
If you actually were to do in the backend with Python, you could look for a solution using GraphViz under the covers, maybe python-graph or pydot.

Related

Generate charts without HTML / Browser

I have a node.js application that accesses data of a MySQL database and I want to generate charts from that data dynamically, to pipe it as image (PNG/JPG) through a HTTP server to the user. I've search for a little while now, but I was unable to find a library to do this without the HTML/canvas approach. Since I want to let the server do the rendering to use the graph in emails or also dynamically rendered PDF files, this isn't an option here.
What could be the approach here (with or without a library) ?
Edit to provide proof of own work: I found https://plot.ly, which is in terms of usage and result really close to fulfil my needs, but requires an internet connection, since it calls a remote API.
You could also try asking this in the Software Recs Stack Overflow. But one option that seems like it could fit your needs is ZingChart.
They have a phantomJS build for rendering static versions of charts. In addition, licensed users can access a Node.js build for server side charting.
Full disclosure, I'm on the ZingChart team so please let me know if I can help you review all your options.
There is a node wrapper for the chart library chartist. You could use this library to generate a SVG, and a svg2png lib to convert to PNG.
Well there are multiple options, I would use phantomjs (headless Webkit browser) to render the charts.
Why would this option be good? One of the reasons is that you don't need duplicated code for the server and client side coding, you could simply reuse the code. On server side create a html file with required scripts and data and render it.

Parot AR drone controlled by opencv in c++

I'm currently building a texture classifier in the c++ api of opencv. I was looking to use this to recognise textures and ideally help a parot ar drone 2.0 to navigate to a specific texture. I have found the documentation on node copter and it's opencv bindings. I wasn't sure about whether this would require me to re write my program in javascript?
If there is some sort of interface then is it feasible to run my program in the background, pull images from the parrot analyse them and send back control commands to the parrot?
I have been working with opencv for about 3 months and have some basic understanding of node.
Thanks in advance!
There are lots of ways to interface with a Parot AR drone. NodeCopter is one option, but there are others. ROS has good AR drone bindings I've used which would give you tons of flexibility at the expense of some complexity.
You might also consider building your C++ program into a stand-alone option and calling it from Node.js. You could also interface with the AR Drone API directly.
It's not too hard to write a program to control an AR.Drone with some sort of OpenCV-based tracking. Javascript would probably be my suggestion as the easiest way to do that, but as #abarry alluded, you could do it with any language that has bindings for the AR.Drone communications protocol and OpenCV.
The easiest thing would be to have a single program that controls the drone, and processes images with OpenCV. You don't need to run anything in the background.
copterface is a Node.js application that uses node-ar-drone and node-opencv to recognize faces and steer the drone toward them. It might be a good starting point for your application.
Just to give an example in another language, turboshrimp-tracker is a Clojure application that shows you live video from the drone, lets you select a region of the video containing an object, and then tracks that object using OpenCV. It doesn't actually steer the drone toward the tracked object, but that would be pretty easy to add.

Graph visualization frameworks

I want to visualize a Neo4j database in a graphical application. (I'm doing this primarily as a learning exercise).
I want it to behave almost identically to the visualization in Neo4j's WebAdmin: When the graphic appears, I want to see the nodes moving around as they settle into their final locations, and I want the user to be able to click and drag node icons around the screen and have them stick where they are dropped, with the rest of the graph adjusting to account for the change.
I have two questions.
What are the technical terms for the three requirements crudely described in the paragraph above?
I'm a Java programmer with no experience in JavaScript, but I'm thinking that, with this project, it's time to get some - sigma.js in particular seems very powerful and relatively simple. However, ultimately this needs to be done within a Java Swing application, and while I know there are various containers I can use to embed JS/HTML content into Swing, still it seems that a pure Java solution would be ideal, and I'm curious about any frameworks that might make this possible. I'm looking into Gephi now, but it doesn't seem anywhere near as powerful or as simple to use as sigma.js. Am I wrong in this assumption?
To summarize the second question: Which would be the better investment of my time: Learning sigma.js and the various JS frameworks (which will require me to get comfortable with JS in general), or learning to use Gephi in Java? (assuming I have a general and long-term interest in graph visualization)
Java visualization
Gephi does provide a toolkit for Java and Python which doesn't contains the UI modules, so unless you want to use Gephi itself to visualise your network you cannot embed its UI in your Java/Swing application as long as I know.
The toolkit contains all the algorithms and plugin infrastructure so if you want to use some of their analysis tool embedded in your app you can use that, otherwise I don't think it's your case.
There are other Java options if you want for graph visualisation here: Java graph library for dynamic visualisation
About Gephi and sigmaJS
IMHO Gephi is far more powerful than sigma.js: it has full SNA tools, multiple layouts, a data editor, exporters, plugin-systems...
One important factor is also the size of the dataset you want to visualise: while sigmaJS can handle up to 500 nodes in the view, Gephi can layout easily 50000 nodes with GPU support as well.
Gephi is a scientific tool made for people that don't want to code to visualise a network and it does it's job. SigmaJS is one of many JS solutions to visualise graphs on a web page.
You can always export to sigmaJS from Gephi with a plugin.
What's better?
At the end of the story I guess the tool you are going to use will depends on:
do you have to visualise a big dataset? -> Java solutions will win for big ones
do you need to distribute it easily? -> Web app / SigmaJS wins for distributed
do you want to have a full integration with your app? -> Java wins
The best one I've found is Keylines, but its not cheap.
Gephi is OK, but the last time I looked it did not support Neo4j 2.0
If your a programmer Neo4j is open source, so you can fork the repository on Git and use that (you will have to check the licencing model before you commercialise any product though)

Multi user HTML5 Canvas sketching with JS

Anyone knows a good tutorial/js plugin to create a multi user html5 sketch web application?
Would be nice to have cross browser compatibility, preferably without any tools that need to be installed server side.
If the latter is not possible, I would also be happy if the application just saves the user x's sketch so that next time someone loads the app, it would show user x's sketch on startup.
Thanks for your advise.
PS. I have looked at Mr. Doob's, he uses node.js, unfortunately my hosting does not support this just yet. Hence I am asking for a solution that need no server side installation. Also the multi user drawing pad by Union Platform seems to fit the bill, but unfortunately it also requires something to be installed.
If you're willing to shift to a new web host for this application you can use Heroku. Heroku is free and supports Node.js.
I created a multi-user Agile project management whiteboard using WebSockets and Node.js and found a 624% increase in requests per second vs using HTTP. I use MongoDB on the back end which allows you to store data as serialized JSON... this means you can send JSON between client <-> Server <-> Database with no parsing (very fast).
Hope this helps!
The reason Mr. Doob's implementation uses Node.js is because node is great at this kind of things. Since this is going to involve delivering realtime changes to different users, your best bet is to use Comet/Ajax-Push/Longpolling. And if you want to support multi-window usage(multiple browser tabs having your sketchpad), you would need to implement http connection pooling to get around the connection limits set by browsers as per http standard.
If you can't use websockets which are fairly new anyways, Then I would suggest using ajax polling of some sort. Basically use ajax calls based on a delay.
This wikipedia article shows some of the various options you should do further reading into.
http://en.wikipedia.org/wiki/Comet_%28programming%29

UML or CASE tool to analyze *huge* JavaScript code base?

I have to figure out how a huge JavaScript code base works and I'm wondering if there are any CASE/UML tools to analyze its structure. I understand that there are several limitations because of the dynamic typing and existence of eval(), but I suppose if IDEs can offer meaningful inspections for JavaScript code these days, there must be some way to visualize dependencies, etc.
use JS/UML which is an eclipse plugin from jsuml.org
WAVI Web Application Viewer 2 (Node.js)
Generate a svg class diagram for your node.js web application.
WAVI is intended for developers who wish to document their web application or as a reverse engineering tool to recover the structure of a web application.
https://www.npmjs.com/package/wavi

Categories

Resources