Posh - an svg based flat-ui-framework targeting browsers

July 8, 2014 posted by: joreg

Problem

When developing a GUI application you have to decide on a ui-framework for windowing and drawing. Being a .net developer, typical choices would be WinForms, WPF or GTK# for the windowing part and System.Drawing, Cairo, SharpDX or OpenTK for the drawing.

When hoping for a GUI that at some point will run across platform borders WPF and SharpDX are no options anymore. When even thinking mobile you’ll have totally different windowing needs anyway and the typical way would be to do the drawing in OpenTK so at least that part is possibly portable and fast. Still you’d have to maintain separate windowing code for each platform.

In an ideal world you’d not want to think about platform specific issues and especially not maintain all the separate codepaths resulting from whatever compromise you choose.

State

Luckily mankind came up with that internet-thing and now that we’re quite some years into its long-evoked 2.0 phase it feels like they have mostly agreed on quite solid standards and even have implemented them across the current world of devices. So today we are in this privileged position to only face one platform that is: the browser. If it runs in the browser it runs on any device.

But wait, the browser, that was that java(kiddy)script-thing, right? You’d obviously not seriously want to go down there. So isn’t there a way to write a GUI that runs in the browser without writing a single line of kiddyscript? Well of course there is and the fact that you’re not the first one coming up with that unpopular idea, it should only give you strength to reinvent the same with a focus on your own needs.

Experiment

Introducing Posh - a flat-ui-framwork that misuses the browser as a windowing/drawing environment for your c#/.net based applications by pushing SVG snippets to it while receiving events from it in return.

posh

Image taken from the internet to attract more people on facebook to click the link of this posting and also to give the text some structure.

Posh exists of two parts:

  • a javascript library: that receives SVG-snippets, attaches event-handlers, inserts them into the DOM and makes convenient RPC-calls back to the application. thats the part you don’t have to deal with.
  • a .net library: that takes the SVG-DOM you build in your app and sends incremental changes on it (snippets) to the browser and translates the RPC-calls into regular .net events for your coding pleasure.

So essentially in your application all you do is build an SVG-DOM (possibly even by simply loading .svg files) and react to normal .net mouse/keyboard-events that you can attach to SVG-elements. That means when building your application you don’t have to think about anything windowing/drawing related except building the DOM describing your UI. Also styling is completely for free via CSS.

Communication between the browser and the application is realized via the WAMP protocol using the autobahn.js and WampSharp projects. For all things SVG in .net we use the C# SVG library.

Try it

We provide a simple demo-app that should also be a good starting point if you want to create your own posh-based app. Clone Posh and then start Demo.WinForms\PoshDemo.sln to get an idea. If you’re interested in a more advanced usecase have a look at Timeliner.


Comments:

Comments are no longer accepted for this post.

alg
09.07.2014 - 00:02
That’s cool, thank you for this project. Now we just need a texture streaming approach, that will allow us to path also textures.
sonostrano
09.07.2014 - 11:27
does it work with vvvv?
VVVValentin
10.07.2014 - 22:04
Interesting stuff you got there. But if you use browser as UI engine why did you take only SVG and ignored everything else, like JS and tons of great libraries? UI is not just vector graphics and text. It is also controls, animations, etc. Which, correct me if I’m wrong, you’ll have to implement yourself on C# side.
joreg
11.07.2014 - 16:25

@vvvvalentin: we’ve considered going full HTML instead of only SVG but turned out to be much simpler to start with a small approach. of course the idea can still be expanded..

having said that, posh is definitely not for all kinds of guis. still regarding animations: i made simple tests with css-animation that worked nicely. so everything you can do with css is totally for free.

Contact


Imprint

vvvv - Dießl & Gregor GbR
Oranienstrasse 10
10997 Berlin/Germany
VAT: DE275566955

groupӘvvvv.org

Follow us

Mastodon.social
Pixelfed.social
Github
Vimeo
Youtube

Sign up for our Newsletter

Your subscription could not be saved. Please try again.
Your subscription has been successful.