» Posh - an svg based flat-ui-framework targeting browsers
This site relies heavily on Javascript. You should enable it if you want the full experience. Learn more.

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

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.

joreg, Tuesday, Jul 8th 2014 Digg | Tweet | Delicious 4 comments  
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.

  • 1

anonymous user login

Shoutbox

~7d ago

joreg: Postponed: Next vvvv beginner course starting April 29: https://thenodeinstitute.org/courses/vvvv-beginner-class-summer-2024/

~1mth ago

~1mth ago

joreg: The Winter Season of vvvv workshops is now over but all recordings are still available for purchase: https://thenodeinstitute.org/ws23-vvvv-intermediates/

~1mth ago

schlonzo: Love the new drag and drop functionality for links in latest previews!

~2mth ago

joreg: Workshop on 29 02: Create Sequencers and Precise Clock Based Tools. Signup here: https://thenodeinstitute.org/courses/ws23-vvvv-08-create-sequencers-and-precise-clock-based-tools-in-vvvv-gamma/

~2mth ago

joreg: Workshop on 22 02: Unlocking Shader Artistry: A Journey through ‘The Book of Shaders’ with FUSE. Signup here: https://thenodeinstitute.org/courses/ws23-vvvv-12-book-of-shaders/