WF4 - Display workflow image in asp.net and highlight an activity - asp.net

Question

I need to display current status of a document approval workflow task in asp.net web page with a specific activity highlighted.
I have seen the Visual workflow tracker example (in wf & wcf samples) but I have two issues,
I have to render workflow in asp.net not in a WPF app.
I don't need to display current status with workflow running, all activities that need to be highlighted are the ones that require user input. e.g. "waiting for approval from department head" etc.
If I could just convert the workflow XAML to JPG after highlighting a specific activity by activity id "that created a bookmark and waiting for resumption the bookmark" it would do the work.
check the attached file for required workflow image to be rendered on asp.net page:
Workflow with current activity highlighted (that is waiting to be resumed)

Answer 1

First load the workflow into the designer.
You should already know the 'activity' you want highlighted. There is selection service in the workflow you can use to select the appropriate model items. This example shows single selection, but there is multiple.
ModelService modelService = wd.Context.Services.GetService<ModelService>();
IEnumerable<ModelItem> activityCollection = modelService.Find(modelService.Root, typeof(Activity));
Selection.Select(wd.Context, activityCollection.ElementAt(5));
On the workflow designer there is a button to copy workflow as image or something along those lines. This link will show you how to get the jpg from the WorkflowDesigner.View.
http://social.msdn.microsoft.com/Forums/en-US/wfprerelease/thread/b781c8df-608a-485a-80e3-a795d800f08d
const double DPI = 96.0;
Rect size = VisualTreeHelper.GetDescendantBounds(view);
int imageWidth = (int)size.Width;
int imageHeight = (int)size.Height;
RenderTargetBitmap renderBitmap = new RenderTargetBitmap(imageWidth, imageHeight, DPI, DPI, PixelFormats.Pbgra32);
renderBitmap.Render(view);
BitmapFrame bf = BitmapFrame.Create(renderBitmap);
using (FileStream fs = new FileStream(#"c:\test.jpg", FileMode.Create))
{
JpegBitmapEncoder encoder = new JpegBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(bf));
encoder.Save(fs);
fs.Close();
}
As an added note you should check out Kushals example:
http://blogs.msdn.com/b/kushals/archive/2009/12/22/visualworkflowtracking-aka-workflowsimulator.aspx