After a couple of simple VS Code and Theia based demo applications, I officially published my first productive extension recently. ODX Commander is a simple editor and navigator for large diagnostic data sets in Open Diagnostics eXchange format. The tool hopefully helps the one or the other person working in the automotive industry to survive the working day.
After upgrading all Theia dependencies to version 1.5 the URDF extension unfortunately no longer worked as expected. After a little research I stumbled about this inconspicuous information in the 1.4 release notes:
@theia/languagesextension is deprecated, use VS Code extensions to provide language smartness
To avoid finding myself in a technical dead end again, I decided to rewrite the designer as a pure Visual Studio Code extension instead. As you might already know, Theia was designed to run VS Code extensions from the beginning. Amongst other things, implementing VS Code extensions provides the following benefits:
On this occasion I also dropped the heavyweight XText and Spring based LSP server gadgetry. This keeps things more simple and using just declarative language features might be adequate for most scenarios.
Thanks to the excellent documentation, rewriting the extension was fun and relatively straightforward. Only bringing the Babylon.js based renderer into a Webview was a little bit fiddly. Below you see the final result installed in Visual Studio Code.
I published the code together with a sample workspace comprising two simple robots on Github. Checkout the workspace and install the released extension if you wanna see it in action. However before doing that, better read about the Gitpod integration first!
After I have rewritten the URDF application in Visual Studio Code, I wanted to bring it back into Theia. According to this comparison, Theia roughly estimated implements 90% of VS Code’s public API.
In theory using the released Visual Studio Code extension in Theia is as simple as adding a single line in the package.json:
"theiaPlugins": { "vscode-builtin-xml": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/xml-1.39.1-prel.vsix" }
However in practice I had some minor issues with unsupported API, URI.joinPath(), Extension.extensionUri(), ExtensionContext.extensionUri() just to name a few, that I could work around using already supported API.
After that unproblematic modifications, now the plugin runs in Theia again. I still have some problems with context sensitive buttons and rearranging the preview window behaves slightly different. Anyway good enough for the moment and as you can see below, both applications look almost identical.
Whilst the period in which I have implemented this demo, the first version of Gitpod was released. This blog post perfectly describes what Gitpod exactly is:
Gitpod is an online IDE which can be launched from any GitHub page. Simply prefix any GitHub-URL with “https://gitpod.io#” or use out browser extension that adds a button to GitHub pages.
It turned out that Gitpod (right now) only supports VS Code compatible extensions. To be honest, another reason for me to rewrite the extension again.
Since Gitpod’s integrated IDE is based on Theia, all Visual Studio Code extensions running in Theia can be reused in Gitpod too. The installation is amazingly simple. The image below shows the extension running in Gitpod. If you have a valid Github account, just follow this link to see it online.
What have I learned so far? Theia’s proprietary extension API is challenging and nothing I’d recommend to start with. The documentation is minimalistic and the API might still change over time as happened when dropping @theia/languages.
So better start implementing your application by writing Visual Studio Code extensions. I guess Theia is supposed to implement the entire VS Code API in the long term. In the short term, try to avoid latest VS Code features and check Theia for compatibility every now and then. Theia in combination with Gitpod is great and you should definitely give it a try. Hopefully the team can keep up the pace with Microsoft’s monthly release cycle. If not, or the project is stopped one day, you can still use VS Code or VSCodium instead!
During the past few weeks I implemented a couple of smaller improvements for the URDF designer application. As already mentioned, this application was never intended to be used in production. It’s a showcase project and my personal playground for learning more about cloud based IDEs using Theia and Eclipse Che.
Simply rendering robot links wasn’t satisfying enough and I added slider controls for all ‘revolute’ and ‘continuous’ joints in the preview control.
I didn’t like the hierarchical outline view presentation that is provided for LSP editors in Theia by default. I thought it’s clearer to flatten the details tree and give each model element a unique icon. Unfortunately it turned out that adjusting the outline view is not trivial and the only way to achieve this is overriding and rebinding the default outline contribution. In addition to that, I also had to modify the qualified name provider to push some extra type information to the frontend.
Theia comes with a global selection service that allows the delivery of arbitrary selection events. There are already a couple of interesting built-in events, selecting a file in the navigator raises a file selection event for instance.
After I had overridden the standard MonacoOutlineContribution, I gathered enough knowledge how to track the currently selected link in URDF text editors. Whenever the textual description of a robot link is selected, a LinkSelection event is distributed by the global selection service.
An exemplary consumer of fired LinkSelection events is the preview control that highlights selected links accordingly.
That’s all! I hope you like the new features and maybe the linked sources will help you with your own projects too.
Modern robotics is surely one of today’s most interesting topics you can be engaged in. However I’m not a robotics engineer and this post is not about building robots. It’s more about the sometimes underestimated problem of providing engineering teams with sophisticated tools that help to get their job done. The last 15 years I worked in many tooling related projects in the medical, automotive and aerospace industry. Eclipse’s mature rich client platform together with all its side projects like Xtext always was a solid basis to start with.
Otherwise IT rapidly moves forward and many cloud based applications impressively show what can be achieved with nowadays web technologies. A relatively new application framework that simplifies writing web based applications is Eclipse Theia. For more information about Theia please visit the website or read the excellent blog posts here.
Instead of programming the obligatory ‘Hello World‘ command button application, I decided to step a little bit further and implemented the prototype of an URDF model designer. URDF is a simple XML format used to describe the visual aspects, kinematics and physics of rigid body robots. URDF is part of the open source robotics operating system ROS and is understood by the 3D simulation tool RVIZ.
Robots are defined in a simplified domain specific language from which appropriate XML files are generated automatically. A WebGl renderer displays the currently edited robot in a small window. The application was never intended to be used in production and covers only the visual elements of URDF. Anyway it was a challenging fun project and helped me to learn more about Theia’s core concepts.
The illustration below shows the overall application architecture. The source code together with a sample workspace is available on github.
The application basically consists of two components:
As a Java developer I wanted to leverage and reuse my existing knowledge in server side programming. That’s why I used Xtext to create the URDF language server and Spring Boot to implement the business logic and endpoints.
To avoid CORS problems and for simplicity reasons, the UI sends all requests to a single Theia backend. The HTTP-Proxy component forwards all requests under a certain domain to the Java backend. Communication between LSP server implementation and LSP server contribution is achieved using web-sockets. If you are interested in HTTP proxy forwarding and LSP web-socket connection, both are implemented in this class.
Here you can see the final application showing URDF models for a KUKA LWR robot in action.
To be honest I’m not ready to give a serious final conclusion yet. What I can say so far is that Theia is definitely an interesting framework with a huge potential. As a next step I plan getting my feet wet with Eclipse Che to make my little URDF designer a real cloud based multiuser application. Hopefully afterwards I gained enough Theia programming experience to hand the final statement later.
javahacks 