I would like to generate state diagram, for example as shown in the picture below.
I want to make this user friendly. If any user wants such diagram then he can just drag/drop the circles/arrows and connect them and put description (1,2,3..... a,b,c....) etc. It should be web-based.
I am not sure if there is opensource/free library to do this.
How to generate such diagram interactively ?
Any idea/suggestions are most welcome.
Thank you.
I was looking for something along the same lines and found: JointJS. It looks like very promising for your purposes. The examples should help get you started.
As far as I'm aware there is indeed no opensource/free library that does this.
Some online tools exist, but they mostly use a text-to-image convertion similar to what yUML and Websequencediagrams do.
You'd have to write the whole thing yourself, although something like RaphealJS or jQuery SVG could do some of the heavy lifting for you in regards to rendering the graphs.
You might want to take a look at Canviz and wwwsqldesigner for inspiration.
Finite State Machine Designer can be used to generate diagrams like that in the question with clicking/dragging/dropping.
It's also open source, should you need to extend it.
Have look at my web based State Machine Diagram Editor. A more convenient desktop version also exists.
Related
I noticed that the MEE6 bot has these cool custom pictures (well, not really pictures, graphics, maybe, but whatever). If you don't know what I'm talking about, take a look.
Notice here that the text and icons are different for each user. More importantly, they implemented this into an "image". How would I do this (if it's possible)?
I would want to use this in discord.js, as a command. Don't worry about the command handler, I have it ready. Please present your ideas in module.exports = {} form. Thank you!
EDIT: Oh yeah, I know there's such thing as embeds. However, you can't implement a user's icon in embeds, nor do they have different fonts (I think?). Do I have to import any packages for this? Thanks!
The package canvacord makes making a rank-card really easy. It's even built into canvacord! (See here)
If you want more control over how it looks, you're able to make it yourself wit for example canvas
(Little note for Phúc Lộc Nguyễn, that doesn't look like javascript at all, more like python, so I don't know what your intention was..)
I'm currently working on a project using sigma.js where I need to show a large number of nodes and edges (~10000 to ~100000 of each one) stored in a JSON file. But the library is getting laggy when I load the JSON, on each refresh and also when it shows me the graph it doesn't space the nodes. I was wondering if someone knows how to represent this kind of dataset fine.
To be honest i am on the same issue if it can helps, i think the book example of Gephi.org tutorial is still the best.
For the moment i am on including sigmaJS from cloudflare but i don't have any proposition for this.
Something like you replace the library with a link to cloudflare like the one used for phaser.io explained in it git repository or even tweenJS use the same way (it's the way of web devs see #indiedev #indiegamedev on twitter, it helps)
<script src="sigma.min.js"></script>
<script src="sigma.parsers.json.min.js"></script>
http://jsfiddle.net/thefailtheory/L45ue3er/
The threejs random particle visualization performs really well with 20K points.
https://threejs.org/examples/#webgl_points_random
Will be a bit of work to repurpose for network display but the upside is you can leverage GPU for rendering.
I want to create something similar to fiximate but the thing I want to do different is filter by venue instead of FIX version.
Having downloaded the FIXImate for offline use to get an idea of the design. It seems as though the developers used a tool which parses the FIX XML and spits out html pages based on field tag and body.
Does anyone have access to such a tool? Is there another way to design something similar which is less complicated?
Thanks
What you are asking about is not trivial. It is telling that there is a commercial product for this: https://fixspec.com/
I have a database based website application, and I would like to allow users to be able to create their own custom queries, using a tool like microsoft access's query by form.
However,I want to provide this functionality over the web. I would like to provide my users with a similar frontend over the web - I'm guessing using jQuery etc. However, before I get started, I wanted to check if something (preferably open source) already exists - if none exists, then can someone (preferably who has done something similar), provide me with the guideline steps on how to do something like this?
I must point out that I am more concerned on how to reproduce the GUI look, feel and behaviour rather than getting data to/from the server (which I can easily do on my own).
So the question again is: If I have to build a similar looking screen with similar GUI functionality, what are the outline steps I need to carry out?, and will I require any other technologies other than those mentioned here?
Ideally ofcourse, I will not have to "roll my own" and instead something similar exists (if even in non-working state), that I can use/extend.
PS: I am running a LAMP stack, so a Microsoft solution is not an option.
I have been looking for something very similar as a front end to a MYSQL database - I have only really found the following open source example : http://ksistem.com/jquery/sqlbuilderdemo.htm
I'd like to display a tree on a Facebook page with JavaScript. Therefore there can be no dependencies on frameworks such as jQuery or Ext which won't run on Facebook, at least as far as I know when I last worked on that platform (April 2009). Can anybody recommend a "framework-free" JavaScript/tree library? I have ported some fairly complex JavaScript to Facebook so I'm sure I'll be able to port just about any existing pure JavaScript library.
Clarification points:
I am targeting FBJS
I too can (and did) google for JavaScript/tree engines but am seeking recommendations as to which one(s)
Look at this implementation... http://www.destroydrop.com/javascripts/tree/
You didn't describe the requirements for your JS tree, so I would suggest you write one yourself. It's a relatively simple task unless you need more complex functionality.
A simple tree is just a matter of having a bunch of DOM nodes that have other DOM nodes inside them that can be toggled on and off (display block/none)
Even if you work mostly in FBML and FBJS, you can use <fb:iframe/> to render raw HTML and JavaScript without the FB munging going on.
What kind of page are you targeting? <fb:iframe/> works on canvas pages but not on a user's profile page.
I looked at the munging in FBJS. Not sure why it would make jQuery not work, but if someone has some insight, I'd love to hear it.
I do know that you probably can't use jQuery's $ due to conflicts. But that can be changed from $() to jQuery() easily enough.
I could tell you what treeview I like, but without trying it in Facebook it might fail for the same reasons as jQuery.
You really should write and test your own to get exactly what you want, and you didn't describe exactly what you want from a tree, but perhaps you could try the free version of treeview.
I've used http://sortablejs.github.io/Sortable/#nested with great success. The default UI might throw you off (it doesn't look like a tree) but when you consider mobile users this look actually works much better.