just 2 more things and my job is finished. August 24, 2009Posted by tumaix in planetkde-tomazcanabrava.
I must admit that I’m taking too long with this app, but it’s just because he’s my little baby. The code is mostly stable and I’m now accepting bug reports for it. what’s missing: manual. prettier icons, and a release schedule. ( I really want to finish it for 4.4 ). For those of you that read my blog, and say ‘ah, cute, nice graphs and all, but where do I get it?’ well, wait no more, just svn checkout svn://anonsvn.kde.org/home/kde/trunk/playground/edu/Rocs and compile.
the 2 things that I want to finish before a final 1.0 version:
- .dot graph support
- usability improvements
as you can see, right now it’s less than ok, it’s really ugly.
So, I did a small mockup here to implement, and, frankly I got happy with the result,
but I want to hear ( actually, read ) what you other fellow kde hackers have to say about it.
so please, don’t be shy, and give-me your 2 cents about…
the main idea of that is everything should be simple to edit. the ‘new’ button on the node adds a new dinamic QProperty to it, it will also appear on the edges and graphs part, but I forgot to add on the mockup and I’m too lazy to fix it. The colors on the node are the actual node colors on the program, so you can modify and see the result there, same goes for the edges.
I hope I got myself clear, I’m so sleepy that I look like a drunk homer simpson.
GSoC wrap up: Static Code Visualization in KDevelop August 21, 2009Posted by Sandro Andrade in gsoc2009, planetkde-sandroandrade.
Ok, it’s time for a concluding post about three exciting months working in KDevelop project, devoted to the implementation of software visualization features that leverage program comprehension and software artifacts navigability. It’s an amazing subject field in which several different visual approaches have been proposed not merely as pretty pictures but mainly as a powerful mechanism for developer interaction with and understanding of software aspects related to static structure, run-time behaviour, and evolution of software systems.
It was a quite fruitful time for meeting people, enhancing hacking skills, and narrowing commitment to KDE and KDevelop communities. Me and other guys involved in KDE community in Brazil (Helio, Mauricio, Artur, Tomaz, Boaglio and others) are doing our best to enlarge the KDE presence in events such as FISL (International Forum on Free Software) and Latinoware (Latin-American Conference on Free Software) – by the way, we are drawing up a really amazing KDE program for Latinoware 2009.
But … going back to GSoC :), KDevelop is now endowed with a (to some extent) functional plugin for control flow graph generation, providing a set of configurable parameters for control flow granularity, clustered layouts, source code navigation, and graph exporting.
Let’s have a full list of implemented features:
- Control flow visualization between methods, classes, and namespaces.
- Navigation Control Flow Graph <-> Code Editor for nodes representing methods, classes, and namespaces (with graph locking option).
- Integration Class Browser -> Control Flow Graph.
- Clustering by class and/or namespace and/or project.
- Support of multiple control flow graphs (toolviews) with optimized management.
- Optional adjustment of maximum graph depth.
- Drawing of incoming arcs (uses of a given method/class/namespace).
- Use of folder names for classes aren’t declared under any namespace (as an alternative to “Global Namespace”).
- Visualization of uses that make an edge, including navigation to Code Editor.
- Optional use of short (unqualified) names for clustered graphs.
- Menu extensions in Code Editor, Class Browser, and Project Manager.
- Graph exporting for a given method, class or whole project (supported formats: png, jpg, gif, svg, dia, fig, pdf, and dot).
- Graph zooming in/out and bird’s eye.
This is the general view of KDevelop’s Control Flow Graph plugin:
Overview of control flow graph plugin
Now, I’ll provide you some detailed information about such functionalities.
Control Flow Visualization between Methods, Classes, and Namespaces
Depending on user’s (developer) interests different control flow levels can be used to drive the graph generation. Commonly, an initial view of high level control flow depicts modules relationship and architectural structures, followed by a detailed visualization of interactions between classes and methods.
In the implemented plugin, the control flow mode buttons allow the user to choose the current control flow granularity (between methods, classes, or namespaces).
Control flow between methods
Control flow between classes
Control flow between modules
Navigation Control Flow Graph <-> Code Editor
The control flow graph plugin is intended to be used as an alternative tool for source code navigation and for this it should be sufficiently integrated to other KDevelop tools.
By clicking on a graph node the code editor is automatically updated to the corresponding definition or declaration (if definition isn’t available). This works for nodes representing methods, classes, and namespaces and a new graph exhibiting the control flow initiated at this new definition is automatically created.
Sometimes, it’s interesting to visualize the same graph while navigating to definitions related to graph nodes. This can be accomplished by locking the current graph.
Integration Class Browser -> Control Flow Graph
One major feature in KDevelop is the full integration between tools and keep this running for control flow graphs was one of the expected deliverables. By using KDevelop’s Class Browser to navigate to a given method both code editor and control flow graph are updated.
KDevelop’s Class Browser
Clustering by Class and/or Namespace and/or Project
The implemented clustering features allow the user to group graph nodes by class, namespace, and project – with any of possible combinations. This makes the plugin suitable to discover project boundaries and find class and modules relationships.
Clustering by class
Clustering by class and namespace
Clustering by class, namespace, and project
Support of Multiple Control Flow Graphs
By using multiple control flow graphs the user can keep different views of current project and switch them as needed, for example to have a toolview showing control flow between classes and another one for control flow between namespaces.
Multiple control flow graph views
Implementation was carefully done to support multiple toolviews while yet preserving acceptable response time.
Optional Adjustment of Maximum Graph Depth
For larger projects generating such control flow graphs can be time-consuming and wouldn’t provide any useful information to developer. In the implemented plugin, one should select the desired depth of control flow graph (or even choose don’t adjust any threshold). By setting a default value of 2, the user initially visualize a more constrained method/class/namespace neighborhood and afterwards can request a broader visualization (while aware of a slower graph generation).
A two levels graph
A three levels graph
A four levels graph
A five levels graph
Drawing of Incoming Arcs
Another quite important feature for program comprehension is find the uses for a given method/class/namespace. In control flow graph plugin, user can optionally make the graph display the current uses of the method/class/namespace that initiates the graph.
Showing the uses of Professor::collectExam()
Use of Folder Names
Usually source code is organized in a way where folder names represent modules, libraries and others software artifacts. By taking into account this structure when generating control flow graphs, some important source code information can be extracted, like the dependencies to Qt modules:
Graph showing dependencies to QtGui and QtSql modules
Visualization of Uses that Make an Edge
For clustered graphs edges usually represent many control flow between methods inside a class or classes inside a namespace. By right-clicking a given arc, the plugin exhibits the uses that make the arc and allow for the navigation to the specific use in Code Editor.
Graph showing the uses of a given arc
Optional Use of Short Names for Clustered Graphs
When using clustered graphs, containers inherently indicate scope and then node names can be reduced to the unqualified method/class names.
Graph with short (unqualified) names
Graph with long (qualified) names
Menu Extensions in Code Editor, Class Browser, and Project Manager
In order to provide a posteriori analysis of static software structure control flow graphs can be exported by acessing context menu options in Code Editor, Class Browser, and Project Manager.
Class Browser extension menu with “Export Class Control Flow Graph” option
Project Manager extension menu with “Export Project Control Flow Graph” option
Thanks to excellent Graphviz features all graphs can be exported in png, jpg, gif, svg, dia, fig, pdf, and dot formats. The current graph displayed in toolview can be exported by clicking on the export button or one could select a method, class, or project in Project Manager and Class Browser and then choose “Export (class/project) control flow graph”.
By deciding to export a control flow graph for a class or the whole project, the resulting graph is the union of graphs generated for each (method/class) contained in the given (class/project).
One really enjoyable part of this cool GSoC project was the hacking of KFileDialog to provide some exporting features:
I really hope KDE 4.4 provides some more developer-friendly way for accomplish this than:
(dynamic_cast<QBoxLayout *>(mainWidget()->layout()))->insertWidget(1, widget);
Graph Zooming In/Out and Bird’s Eye
Thanks to useful features present in KGraphviewer kpart, graphs can be zoomed in/out and a bird’s eye can optionally be enabled to provide a wider visualization while keeping the focus in a specific part of the control flow graph.
So, that’s all, there is much to improve and more interesting features and visualization paradigms to implement. Certainly this is just the beginning 🙂
Many thanks to Aleix Pol, David Nolden, Gaël, and Tomaz Canabrava for the valuable support during this great GSoC time.
Smooth fade in / out and questions. August 14, 2009Posted by tumaix in planetkde-tomazcanabrava.
I just added smooth fade in in my little rocs, and worked like a charm. with one small mistake, well, not mistake.
I now have a memory leak ;D ( trying to fix that )
the fluffy constructor.
QTimeLine *timeLine = new QTimeLine(500, this);
connect(timeLine, SIGNAL(frameChanged(int)), this, SLOT(removeOpacity()));
the unfluffy, memleaked, not-working destructor.
QTimeLine *timeLine = new QTimeLine(500, this);
connect(timeLine, SIGNAL(frameChanged(int)), this, SLOT(addOpacity()));
the destructor code doesnt works, because it does not wait for the timeline to finish before finishing the method.
I’v tried with sleep(500), and I got a freeze
tried with QThread::sleep(), my class doesn’t xtends QThread
so, actually I have 2 memleaks, because I don’t delete the 2 QTimeLines.
but if I do timeLine->deletelater(), the animation isn’t shown, and the ball will be 100% translucent.
dear lazyweb, can anyone point me to the right direction on how to do this?
and the second, rocs has gained some icons.
not pretty icons, I’m no nuno pinheiro, so I want feedback on my icons too 😉
Rocs, After Akademy August 6, 2009Posted by tumaix in planetkde-tomazcanabrava.
1 comment so far
It’s being a while without any post from my side, but I was actually too lazy to write anything. a few things, tougths and stuff from the last days of fisl passying by all akademy, till today will be written here without a special care for correctness, truthness nor orderness.
1 – End of FISL:
We, from the live blue team, got invited to another congress to spread the K word to the world, Solisc, the 4th event in Florianopolis, Santa Catarina, in the south of brazil.
2 – Beginning of Latinoware
Since the call for papers didn’t opened yet, we are working hard to write papers for it, since it’s one of the bigger events in latinoamerica, and in a marvelous place too, Foz do Iguaçu has the beauty of a godess, and I really want to go there again.
3 – Akademy
Marvelous place, Marvelous people, I had a wonderful time carring and spinning blauzahl in a party, talking to Nuno about brazil and portugal, and obviously, about how SVG rulez and how he loves it =P , walking around the beach ( what if the towel, instead of “it helps you write less code and spend more time in the beach”, had a “Qt: Code less, Beach More”? ), collecting stones and randomly giving origami to people, chitchating with Guilliermo, Jure and Neja, eating in cheap chinese restaurants, taking pictures of flowers, and fixing almost a thousand bugs in my app. wonderful time indeed;
in sideways because I’m lazy.
4 – Rocs
I received not a lot of, but a good feedback about my app in akademy and in fisl, you know, at first I was thinking “oh, well, this app can be used in university, but it’s quite boring, yadda yadda”, and actually a few people where really enjoying that this app exists ( in playground, but hey… ), after fisl I didn’t really write code, but on the lasts days of akademy I was programming like a small slave, writing more than 10h of code everyday.
main improvements on Akademy:
- All known crash bugs fixeds.
- All known non-crash bugs fixeds.
- improvements on serialization of the graph using something almost, but not quite, completely diferent from yaml
- fixing a nasty Qt freeze drawing a quadratic curve with zero size,
- QtScript debugger integration,
- UI Improvements,
- and a lot of optimizations.
And that’s it folks 😉