jump to navigation

How rox is Rocs? May 4, 2009

Posted by tumaix in planetkde-tomazcanabrava.

It was about time I give you all an fresh view of the app that I’m writting.

It’s development is slower than I wanted to, because of university, work and KDE-related-talks and groups (not that it makes an excuse, Chani also have those things, and she’s an amazing KDE developer. I’m just a bit lazy ;)).

So, for those of you that doesn’t know who’s this thin guy that appears on the planet sometimes, and what I work on, some pictures of the tool from today trunk, working. yey =D

So, humbly I introduce you to Rocs: Graph Theory IDE for professors and students:


This is the default look, looks a bit like Kate, and actually Kate was an inspiration for me on the layout.


This is the Pallete bar, like Step one (and yah, I need to remember to Hug Vladmir for the insight).


Plotting some nodes on the canvas. The graphs are stored in memory, so there’s no need to save the file before trying to use them for scripting on.


Simple graph with edges, this is an simple example on what kind of graph you could do with a few clicks. Nothing too fancy, I know.


Transforming the graph in “Oriented”, you can use more advanced stuff, like multi-edging and loops. Pretty cute, actually.


Properties pane, from here you can add new properties to the graph / node / edge in a way that they are easily acessible from the scripting area. Pretty userful, but not working yet ;D (it lists everything, thougth, but I still didn’t code the ‘add’ button yet).


Since my app is for programming with graphs, you can acess every graph that’s on the canvas directly via scripting, and also program your graph directly using JavaScript (more to come, I want to add Kross support for it). Here I’m creating a simple pentagon using basic javascript for it. See how simple is the code.


And here, just after I press the ‘run’ button, the graph is created and showed on the canvas.

I think that explains well on what I’m doing, what I want to do and such. There are a few things that I want to do also:

  • *important* Code completion for JavaScript (probably poke somebody that understands the deeps of KateParts).
  • Properties panel working
  • Loading graphs and scripts (now it’s just saving)
  • Align/position graphs, nodes and edges
  • Autotools for creating complex graphs in less clicks (I have this on my old version, need to port)




1. Matt Williams - May 4, 2009

That looks like a very cool program. I wish I’d had something like this when I was doing my A-Level Maths four years ago 🙂

2. Emm - May 4, 2009

Awesome. On a side note, JS usually uses CamelCase for method names, not lowercase_with_underscores.

3. Rudá Porto Filgueiras - May 4, 2009

How can I build from source?
There is an wiki or project site?


tumaix - May 4, 2009

all you need is kdelibs and cmake 2.6, the code is in playground/edu/Rocs
svn://anonsvn.kde.org/home/kde/trunk/playground/edu/Rocs is the full address.

there’s no Wiki *yet*, I need to focus on finishing the app.

4. Ian Monroe - May 4, 2009

That is pretty cool. Would’ve been handy for my CS Foundation classes. 🙂

5. vespas - May 4, 2009

looks very useful for visualising graphs! are you planning integration/export with graphviz?

6. Landmark Education and the law » Network diagram - May 5, 2009

[…] how rox is Rocs? « Live Blue […]

7. vuakko - May 5, 2009

To simply make a graph look nice, symmetric and uncluttered you might want to just implement MDS on your own instead of using graphviz. It’d be only like 10-20 lines of dead-simple code if using Eigen (or gsl or whatever).

For other visualizations Graphviz is surely the quickiest path to go.

8. Wieści z Planety nr 3 - Silezja.eu - May 11, 2009

[…] oryginalny wpis… […]

9. Fossy - November 5, 2009

Hey Tomaz,
thanks for your KdeEdu contribution “Rocs” – I think it rocks (Just read about it – cf. URL)!

Can you put weights on the edges?
Can you “flip” edges vs. vertices (I think there is a kind of dualism)?
Did you think about animating algorithms in a fluent (or even 3D) way?

Yet another set of feature ideas would regard import/export. If you manage to demonstrate routing by importing typical use cases (internet hops, openrouteservice.org of openstreetmap.org …)

Sounds of the future, maybe, but keep hacking and sharing, because free knowledge is the power of FOSS 😉

tumaix - November 6, 2009

Hey. heh, you see a very old picture, rocs nowdays is much more efficient and pretty than this ones.

you can change names, values, widths, color, size, position of nodes and edges. I didn’t think that importing use cases at the time, but it’s an interesting idea. I’m adding this to the TODO list for 2.0.

The fluent animating is being implemented now, since Qt now allows this in a sane way ( thanks to qt 4.6 ).

about the flip thing.. no, it doesn’t, but since it’s an app to experiment with algorithms, it’s very simple to create one that actually does that.

10. Andrius - December 5, 2009

Him when I tried to run the script in the screenshot I’ve got:

Uncaught exception at :10: TypeError: cannot call add_edge(): argument 1 has unknown type `Node*’ (register the type with qScriptRegisterMetaType())
10 Graph.add_edge(nodes[i].name, nodes[e].name);

btw, rocs gave me no problems to build on mswindows 🙂

tumaix - December 9, 2009

Probably some modification on the Qt from 4.5 to 4.6, going to take a look today, sorry to take that long to answer.

Andrius - December 19, 2009

when removing the ‘.name’ of the parameters of add_edge it works.

i.e.:Graph.add_edge(nodes[i], nodes[e])
instead of Graph.add_edge(nodes[i].name, nodes[e].name)

I’m using latest svn.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: