This morning I opened up my MIX 10k entry code and worked the pendulum class into a Behavior.  I can now drop the LateralPendulum Behavior on any Canvas.  The Behavior will animate the Canvas.Top and Canvas.Left properties of each Child element in the Canvas.  If more than one pendulum Behavior is attached to the Canvas, it adds up the X and Y calculations so that different types of pendulums can be simulated.  I have a test page for now.  The code needs some refactoring and that is more than I want to do on a Saturday morning.  So I'll have to post up the code and another post about it later. 

Here is the test page: Pendulum Behavior Test.  This shows an Ellipse set on a Canvas.  The Canvas has 4 LateralPendulum Behaviors attached which add up to represent a circular pendulum.  It seems to get close to 60 frames per second so I decided to make it look a little smoother by setting the MaxFrameRate to 30 and by tweaking the animation timer a little.

 

propfull - how did they know!?

February 15, 2010

Here is a quick note about VS2010...there is a built in code snippet, propfull, that you can use to have the IDE create the backing variables for you.  In VS2008 I had to use my own code snippet that I called propf.  Now that is very cool that VS2010 has the snippet.  But a little bit creepy that it is so close to the one I used and it does exactly the same thing!!  Also, the nerd+art snippets for creating Dependency Properties in Silverlight/WPF seem to have some new cousins - propdp, and propa.

If you found this blog entry, then you probably found it through my MIX 2010 10k Challenge entry.  The link to my application in case you are actually reading my blog should be here soon is here.

In grade school, I got to go on several field trips to the Oregon Museum of Science and Industry (OMSI - www.omsi.edu) .   OMSI used to be located up by the Portland Zoo in those days.  The exhibits were a bit different too.  But I recall going there and seeing the pendulum drawing table.  It was this pen suspended from a pendulum and there was a drawing surface also in motion.  You could push it around and watch different interesting shapes appear from the motion of the pendulums.  This immediately came to mind when I decided to write something for the 10k challenge.

The name for this device is the harmonograph.  The short definition is that it is a device for creating geometric images using pendulums.  A pendulum is any kind of weight suspended by something like string so that it can swing freely.  Pendulums are thousands of years old and used throughout history.  Harmonographs were invented and gained popularity in about 1890.

There is a Silverlight article about animation techniques that uses a pendulum (www.silverlightshow.net/items/Custom-Animations-in-Silverlight.aspx).  I went to that example first.  The formula for that pendulum required solving a differential equation.  So, while the article is great for illustrating how to simulate a basic lateral pendulum in Silverlight, it still wasn’t quite enough about how to build a better harmonograph.

What I really wanted to do was break away from the profile view of a 2D pendulum and show animations for the paper and the pen.   The obvious physics engine for Silverlight is the Farseer Physics engine (www.codeplex.com/FarseerPhysics).  However, the source code for this project had to be limited to 10k.  Adding the assemblies for Farseer makes the whole project go way over 10k.  So, before trying it, that was also out the window.

My research led to a very simple mathematical solution.  Based on more internet research, I found a great little book, “Harmonograph: A Visual Guide to the Mathematics of Music” by Anthony Ashton (www.woodenbooks.com/browse/index.php).  Wikipedia also had the basic formulae and explanations I needed (en.wikipedia.org/wiki/Harmonograph).  The basic formula for a lateral pendulum with the assumption that air or other forces in addition to gravity will slow down the motion over time is:
xt= Atsin(f*t + p)*Exp(-d*t), where t=time, A=amplitude, f=frequency, p=phase, and d=damping factor.

It looks daunting but in practice, it’s pretty basic.  For each point in time, 0 to 100 for example, calculate the X point of the lateral pendulum based on the A, f, d, and p of the pendulum.  This is for a single pendulum.  To get an x,y position for a two pendulum system, you apply the same formula and solve for the Y point.  There are two pendulums for the pen and two for the paper.  So, there are four calculations for each value of time. 

One of the things I found in my research was a frequency given but not a length.  If I had more than a 10k limit you would see form fields to enter the length instead of the frequency.  Amplitude is simply the angle from the resting position of the pendulum.  Frequency is a measure of the time it takes the pendulum to swing once and is estimated using the formula:  2pi*Sqrt(Length/Gravity).  This is the simpler version of the formula because larger Amplitudes affect the frequency over time (hence the more accurate differential equation).  Gravity is assumed to be 9.807 m/s2.  The simplest way to understand frequency is that it is the cycles per second the pendulums travels (1Hz = 1 cycle per second).   Damping is the affect of friction on the pendulum by air.  The larger the damping factor, the sooner the pendulum swings will slow down.

The Silverlight simulation I wrote for the MIX 2010 10k challenge is the first I’ve seen of a harmonograph.  Most of them found on the internet are written in JavaScript.  Another simulator out there worth mention is from Michael Croucher.  He wrote a simulator using the Wolfram Demonstrations Project (demonstrations.wolfram.com/SimulatingHarmonographs/). 

The big differentiator with this Silverlight version is that you have to wait for the drawing to finish and you can enjoy watching it reveal the final shape.

Here is the full version of this application with the setting editors and isolated pendulum displays.

This is what the 10k application looks like.

Being a Silverlight developer in the trenches, I think about this workflow issue that designers and developers have.  Almost every day at work.  A good interview with Mike Wolf from Cynergy explaining some best practices can be found here: Designer / developer misconceptions podcast.  I'm sure that the workflow he describes works well at Cynergy.  However, I'm not so convinced that designers can work in Blend successfully.  At least not on their own.  They need a lot of help from developers.  I work with several "designers" who do prefer tools that allow them maximum creativity.  The reason I just put the word "designers" in quotes is very simply that to be called a designer at some software companies, it would require the type of knowledge like designers at Cynergy have.  One perception that works against the typical designer is that Adobe software like PhotoShop, and hardware like Mac laptops are the best toolset for them.  If they are going to use Blend, they either need to run it in Parallels Desktop for Mac or have another separate Windows machine.  So the demands on designers with the new capabilities in Expression Blend are pretty high.  On the other hand, when technology changes and languages for software change, as a developer I'm constantly having to stay current with the tools and techniques.  Why don't designers think they have to keep up to date?

I listened to the podcast and wrote down what I interpreted (not a transcript).  It will probably come in useful when I'm working on improving the workflow at my current employer.

My Notes:
Mike Wolf - Principle Developer for Silverlight and WPF Practice at Cynergy
interviewer - Erik Mork of Spakling Client
Misconceptions of the Designer Developer Workflow

Designers think in different ways than developers.  Designers think in layers instead of controls and functionality.  At Cynergy designers work with developers by assisting designers using Blend with direction on control development.  Developers need to constantly think about performance.  Complications during the design of Silverlight applications need to be re-worked to create better performing solutions.  The single hand off doesn't work.  There has to be communication back and forth throughout the entire process.

The physical proximity of the designer to the developer is ideally in the same or near same time zone and can be made easier with use of instant messaging.

Fireworks is a popular design tool to use for exporting design into Blend.  Designers currently do not live in Blend.  They live in PhotoShop, Illustrator, Fireworks, or other tools like those.  It is an unrealistic expectation to have designers work entirely in Blend.  A migration step from the favored design tool to Expression Blend is the normal process.
A designer will go into Blend and make small changes, but will go back to their favorite tools to make larger changes.  The migration step using Blend can happen more than once.
Photoshop drop shadows turn into drop shadows into Blend.  Inner glow, on the other hand does not convert via an import to Blend.  Designers need to understand the limitations of Silverlight enough to know what to avoid but focus on not loosing creativity. There is no inner glow for html, but there are hacks for it.  The same kind of hacks made for html need to be made for Silverlight.  Knowing your toolset but demanding your experience in design comes first.

It is often thought that the designer is only working with one workflow.  The developer has to wait for design assets or changes, or vice versa.  There are actually ways to better structure sharing of resources.  Merged resources and merged dictionaries in Silverlight.  The Visual State Manager is also a powerful tool to be able to do states.  The designer can work with those states within Blend working hand in hand with the developer.

There has been a big switch in the evolution of rich technologies.  The old way was based on developers trying something to see if it would work first.  Once it was working, a designer would attempt to cover the developer's idea of the user experience.  Now it is driven by a front to back approach where the experience drives the development requirements.  Specific requirements can be made into wireframes, then comps, then the developer works with final comps.  Xaml is handed over by the designer based on the comps so the developer can begin working on implementation details.  The designer does more work up front to determine the actual user experience details before handing comps with those details to the developer in the form of comp documentation as well as Xaml in a Blend project.

It looks like the next version of Adobe Flash CS5 will have an easier workflow for creating iPhone applications.  Here is a video tutorial for a simple ball animation using the phone’s accelerometer: http://gotoandlearn.com/play?id=116.  It is interesting that there was no Objective-C in this tutorial.

What is also interesting to me is just how proprietary all of this is.  You need to have Adobe Flash CS5, it is possibly easier to work with on a Mac laptop, an account with Apple for iPhone application development, and an iPhone.  Which also requires that you use AT&T as your phone carrier.  You can develop and test just like Adobe Air, but for accelerometer testing, you probably need a phone.  He shows in the tutorial just how easy it is to use iTunes to deploy the application to the phone and see if it works.

So what is the cost to do all this assuming you don't have any of the tools?

MacBook Pro 13in: $1199
Apple iPhone 3GS 16GB: $199 with a two year AT&T contract
Adobe Flash CS5: (it isn't out yet, but based on CS4): $699 est.
Apple application account: $99 per year

Total Estimated Barrier to Entry: $2,196.

 

I'm very excited to hear that there is a Silverlight control for Bing maps!  Here is the link to MSDN documentation. It was just announced at TechEd Europe yesterday!!!!  Here is more on that news.  It takes less than 15 minutes to get up to speed on using the maps control.  I've had some experience creating map control in ASP.Net using Google Maps.  The implementation is similar but even easier to use.  Google requires that you register using a gmail account and a valud URL.  They give you a key for a specific URL, which limits you to registering your development environment localhost:{port}.  Bing maps for Silverlight allows you to register to get up to 5 keys and does not limit you to your development URL.

If you are writing anything in Silverlight, you have to check this out! http://team.silverlight.net/announcement/announcing-the-bing-maps-silverlight-control/

 

It is almost time for the Silverlight 3 release.  There are so many great improvements!

The official release date is July 10th with a release party scheduled in the Bay Area.  My work laptop is already up to date with the Blend 3 Preview, Silverlight 3 Toolkit, and the beta runtime.  I will have to upgrade those in a couple of days but it's good to have them now. 

There is a great article about how to manage the installers for Silverlight 2 and Silverlight 3 tools on the same machine. Running Silverlight 2 and 3 On Same Machine - Redux!. In that article, Shawn Wildermuth details a great step by step process for managing the version installed using a couple of bat files.  It is based on prior work from Amy Dullard.

So, it's time to work on some nice Triggers, Actions, and Behaviors on what will be a sweet little project.  (More details on that once the project is released.)

Blog on Blog (part 2)

July 3, 2009

This blog site is now updated!  This is a rather big change in direction.  I decided to go with an open source project instead of trying to maintain my own blog engine/site.  So, this site is now running on BlogEngine.Net.  There were several features I wanted to include and the internet entrepeneurs are always adding new things to the web.  There is so much going on this summer and I have really very little time.  Besides, there is a great community around BlogEngine.Net project and I may even be able to contribute to it. 

It took me one afternoon to download the code and alter the settings enough to be happy with something to deploy.  That suits my main requirement.  It has all the ASP.Net providers that I like and I'm pretty comfortable with the ORM model (Object Relational Model).  It is written with ASP.NET 2.0 and C#.  They need more LINQ in the code.  But it is a mature enough architecture that I can use familiar tools to enhance and maintain the site.  It looks like there are more than 25 open source projects which enhance BlogEngine.Net.

Now, the next step is to convert some of the Silverlight 2 work I did on my last site into a Silverlight 3 implementation that sits on top of BlogEngine.Net features.  As many .NET developers know, Silverlight 3 will be out next week!!  After Silverlight 3 goes live and after I spend a little time on it, users with newer computers and who install the new plugin will be able to see a much nicer Silverlight UI theme.  Users with older CPUs should be able to see the HTML version of the site.  I expect the possibility of reaching a much wider set of platforms with this tool (mobile phones, Mac, Linux, and more types of browsers).  SEO (Search Engine Optimization) will just work and all the base features of a blog are covered. 

My Silverlight 2 site was fun to build.  I always knew it would take some work to get the feature set I now have and to write a down-level experience for computers that couldn't run the Silverlight plugin.  With BlogEngine.Net I can now focus on the UX (User Experience) and build on top of it.  Oh, and writing blog entries too. 

Cheers and Happy 4th of July!  Cool

 

 

 

Taking control of Vista

August 29, 2008

Today, a coworker was having problems with his Vista machine.  That got me started on a list of setting changes I've made to my installation that increased performance.  Albeit, some of these are risky in terms of security.  Here is a raw list of things you can do to speed up and free up disk on your Vista Business operating system (mileage may vary):

Turn off Windows Defender Service:
Administrative Tools/Services/Windows Defender service...right click, select Properties, change to Stop and set startup type to Disabled...will get a warning message when starting windows but is ok.

Turn off UAC - user account control:
Control Panel\User Accounts\Turn User Account Control on or off...turn it off .

Turn off System Restore:
Control Panel/System/click on SYstem protection...select the System Protection tab if it isn't already. uncheck any hard drives that you want to remove system restore points from. this will free up about 2GB of disk space.

Clear Problem Reports and Solutions:
Settings/Problem Reports and Solutions...click on Clear solution and problem history. the operating system will try to solve problems in the background if they exist in the list.

 

Instead of using the Silverlight server control in your custom web parts, try using the html equivalent.  When you create a Silverlight Application, it creates some test pages (if you like).  You can use the aspx code example in your web parts OR, alternatively, you could use the html test page example.  This seems to get around a ScriptManager render issue I recently ran accross:  “System.InvalidOperationException: Script controls may not be registered after PreRender“.  In the following code snippet, you can render the html for the Silverlight control and dynamically set the Width, Height, and Source params.  This is just a starting point.  Of course, there are additional params to set and custom html you could write.  This is just a snippet and you will have to change the code to suit your specific needs.

 

    public class SilverlightWebPart : WebPart
    {

        private string _SourceUrl = "ClientBin/SilverlightApplication1.xap";

        [Personalizable(PersonalizationScope.Shared)]
        public string SourceUrl
        {
            get { return _SourceUrl; }
            set { _SourceUrl = value; }
        }

        protected override void RenderContents(System.Web.UI.HtmlTextWriter writer)
        {
            writer.WriteBeginTag("div");
            writer.WriteAttribute("id", "silverlightControlHost");
            writer.Write(">");
            
            writer.WriteBeginTag("object");
           
            writer.WriteAttribute("data", "data:application/x-silverlight,");
            writer.WriteAttribute("type", "application/x-silverlight-2-b2");
            writer.WriteAttribute("width", this.Width.ToString());
            writer.WriteAttribute("height", this.Height.ToString());
            writer.Write(">");

            writer.WriteBeginTag("param");
            writer.WriteAttribute("name", "source");
            writer.WriteAttribute("value", this.SourceUrl);
            writer.Write("/>");

            writer.WriteBeginTag("param");
            writer.WriteAttribute("name", "onerror");
            writer.WriteAttribute("value", "onSilverlightError");
            writer.Write("/>");

            writer.WriteBeginTag("param");
            writer.WriteAttribute("name", "background");
            writer.WriteAttribute("value", "transparent");
            writer.Write("/>");

            writer.WriteBeginTag("a");
            writer.WriteAttribute("href", "http://go.microsoft.com/fwlink/?LinkID=115261");
            writer.WriteAttribute("style", "text-decoration: none;");
            writer.Write(">");
            writer.WriteBeginTag("img");
            writer.WriteAttribute("src", "http://go.microsoft.com/fwlink/?LinkId=108181");
            writer.WriteAttribute("alt", "Get Microsoft Silverlight");
            writer.WriteAttribute("style", "border-style: none");
            writer.Write("/>");
            writer.WriteEndTag("a");
            
            writer.WriteEndTag("object");
            
            writer.WriteBeginTag("iframe");
            writer.WriteAttribute("style", "visibility:hidden;height:0;width:0;border:0px");
            writer.Write(">");
            writer.WriteEndTag("iframe");

            writer.WriteEndTag("div");
        }


    }