pleased precariously

Over on Steven Engelhardt’s blog there’s a mandelbrot viewer written using silverlight 1.0 (meaning just xaml + javascript). In his post he listed a few problems he had, and one caught my eye:

• I can’t figure out how to do progressive (e.g. line-by-line) rendering to give the user feedback.

I figured this would be pretty easy with the help of setTimeout() and some more global state, so I hacked it together here. Instead of the line by line rendering I implemented a progressive jpg style interlaced rendering, with multiple passes of smaller and smaller pixels. As you can see in the demo, you can mouse over and click while it’s in the middle of rendering, and it’ll start the new render. No more waiting.

One thing he’s doing (that he notes is quite heavyweight) is using rectangles. To lessen the hit, he uses 1 rectangle for many contiguous pixels of the same color on the same line. I’d imagine using an InkPresenter and adding stylus points might be a less heavyweight approach (at least I think it will be in the case of moonlight.)

update: realized how to make mouse events faster - specify IsHitTestVisible=”false” on all the rectangles.  That way the event system doesn’t have to worry about generating enter/leave events for each scan line (and for many individual pixels on those scanlines).  And speaking of scan lines, add an translucent red indicator line that shows the next line to be drawn.  Add more precision (down to pixel_size == 1), and when we’re finished rendering, display how many rectangle children of the main canvas there are (for the first render there are over 13000.  that’s a lot of children.  moonlight seems to handle it ok too

A little while ago I committed the first ugly pass at windowless support in moonlight. By ugly I just mean I cut corners wherever I could, just to get it working. The changes to support both windowed and windowless modes, with events coming in as either GdkEvents or Xlib events.. well, they’re a little gross but we’ll get them refactored and beautified soon enough.

On to the goods.

Silverlight 1.0 has no built-in text input support, so the conventional wisdom says “use windowless mode, and use an overlayed html form element to allow input.” Many sites use this, such as the weatherwidget:

The vista simulator (which is a pretty crazy body of code. *Tons* of javascript, and an architecture that leads me to believe it wasn’t originally intended for silverlight) uses windowless mode for another reason. It doesn’t hook up events handlers to any of the xaml elements. Instead, it adds JS event handlers to the <object> tag that surrounds the plugin. Since there are no event handlers in the plugin, we return FALSE to signal we didn’t handle the event, which bubbles up the dom hierarchy to the object.

You need svn HEAD of the moonlight code for this to work, and you also need to run it against a build of firefox3.  Unfortunately, given our use of unfrozen apis for dealing with the dom element reflection into managed code, you’ll more than likely run up against undefined C++ symbols for pages that do that sort of thing.  But there are a number of sites which don’t.  So give it a try

On Lake Washington last night, miguel mentioned that a cool hack would be to add a “create from json” method for moonlight, to compliment “createFromXaml”. The idea being that xaml (like all xml) is overly verbose and isn’t a first class part of the language in JS (so you don’t get syntax errors on missed quotes, etc).

I woke up this morning and ran the idea through my head, and figured it would be an hour hack. I was wrong. It took 1.5 hours.

So, you start with something like:

var json = {
  Canvas: {
    name: "Toplevel Canvas",    children: {
      TextBlock: {
        Text: "Hello World"
      }
    }
  }
}

and it converts that to the following xaml:

<Canvas xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” x:Name=”Toplevel Canvas”><TextBlock Text=”Hello World”/></Canvas>

Here it is: createFromJson.js
.

WPF has a nice brush called “VisualBrush”, to compliment the more usual set of brush types: SolidColorBrush which paints 1 color, Linear and Radial GradientBrushes, an Image and VideoBrush.

A Visual in WPF represents something drawn to the screen (UI elements, shapes, etc). VisualBrush allows you to draw a Visual hierarchy at some location on the screen, transformed in whatever way you want. The cool thing is that the VisualBrush will reflect changes made to the visual hierarchy through animations.

given our framework, VisualBrush was rather trivial to implement. Took maybe 2 hours.

This screencast (sorry about the poor quality, blame ffmpeg) shows an animated line in the upper half of the window. The lower half of the window is a rectangle with its stroke set to a SolidColorBrush (red) and its Fill set to a VisualBrush referencing the canvas in the upper half. The VisualBrush was reflected and offset in the Y direction to make it look like a mirror image.

Here’s a slightly more complex example. A VideoBrush is used to paint video on text in the upper half, while the lower half shows the same reflected VisualBrush. Note that the lower rectangle is the same size as in the first screencast, but the upper half’s display is much larger. The VisualBrush in the second half scales the contents properly to fit in the rectangle.

pretty sweet.

This isn’t in svn because I’m not really sure where to put it. VisualBrush, as I said, exists in WPF, but not in Silverlight. Maybe we’ll need to start putting more classes in agmono.dll.

Turns out it was easy.

go here to check out the moon display program that uses gnome-vfs to download its content.

if you follow the steps and get everything built, you can run it thusly and see the same animation I screenshotted in my last post:

$ gnomoon http://silverlight.net/Themes/silverlight/xaml/subscribe.xaml