October 18, 2012

Transparent picturebox overlay in winforms

I stumbled into an annoying problem when doing some graphics coding in a windows forms environment. The task seemed rather simple: Have a panel with a background image, drag images -in my case as listview items- onto that panel where a picturebox is shown to display the dragged image. When done, merge the picturebox images with the background to store the final picture as a single image.

My problem

When I drag an image (listview item) onto the panel a picturebox is created at the dragged location and the image is displayed. However, troubles arise when two pictureboxes overlap. Here's the catch: Setting transparency on your picturebox will make the background reflect the picturebox control background!
So the result lookst like this:
(I colored the second picturebox transparent area a little 'red-ish' to show the problem!)

Problem Solved?

I did some research on the net, but to no avail. So, I improvised:
  1. We know the picturebox transparent area will reflect the picturebox parent image/foreground
  2. I do need the complete picture anyway
  3. There's no "free painting" involved, just 'reorganizing' pictures
  4. Speed is not an issue, since by my (educated) guess, in my app there will be dragged less than well... lets say 50 images to the panel.
  5. Considering point 4, I just might 'get away' with creating the final picture every time a picturebox is created/dragged/transformed...
  6. Control tags can contain Objects (other controls!)

 Problem solved!

Now consider this layout:
  1. A panel containing the background image (background)
  2. A Panel containing the imaged where background and picturebox images are merged (canvas) and the parent of my pictureboxes
  3. The pictureboxes dragged onto the canvas

The trick now is to 'reconstruct' the panel canvas background image every tima a picturebox is changed/added.
  • We first create the background panel with the (clean) background image (pnlBackground).
  • Next we create the canvas panel where pnlCanvas.Tag = pnlBackground. The canvas is a child control of the background!
  • Every time a new picturebox is added, the picturbox.Tag = pnlBackground. The pictureboxes are children of the canvas!
Do you see where I'm going here?
Now on every event changing the pictureboxes on the canvas panel we call a function to reconstruct the canvas panel background image. Events like dragdrop on the canvas panel (adding a new picturebox) and events of the picturebox itself (dragging, rotating, etc)

The merging function should accept a picturebox and a panel (overload it). When called with a picturebox we have:
Panel pnlCanvas = sender.Tag as Panel (sender == picturebox)
Panel pnlBackground = pnlCanvas.Tag as Panel

Now, take the pnlBackground image and merge each picturebox image with it. The resulting image is your new pnlCanvas image.

The end result will look like this:

Each picturebox transparent area reflects the parent control foreground, which is the merged picture of pnlCanvas! Since the pictureboxes are still there (overlaying the pnlCanvas) they are still available for editing by the user (dragging, rotating, etc)

 There's lots of code available about merging images, so no code in this post. Just the basic idea on how I solved the problem. It might not be the best solution, but it works for me. As mentioned above: My 'canvas' will not contain over 50 pictureboxes so speed is not an issue to me, but 'reconstructing' (merging) the canvas picture will cost you...

October 11, 2012

Custom Cursor Hotspot - HowTo...

When I recently implemented some drag and drop functionality I wanted to create a nice "drag cursor". A little different from the default. A quick "Google" showed me how to use a bitmap as a cursor.

My Problem

When creating a cursor from a bitmap the new cursor hotspot is the center point of that cursor image.

Though I had a nice cursor now, using it posed a challenge for my users. People -rightfully- assume the "fingertip" to be the point where they are pointing at not the center of their cursor.

Problem solved?!

Another Google search brought me the solution. To create my custom cursor (assuming the image is one of my resources) I had this code:

 Cursor.Current = New Cursor(My.Resources.addCursor.GetHicon())  

To create a custom cursor with a custom hotspot I changed it to:

 Cursor.Current = FormHelper.CreateCursor(My.Resources.addCursor, New Point(5, 5))  

The voodoo happens in the CreateCursor -static- method. Though you're probably not interested, I copied the source anyway:

#Region "Create Custom Cursor" 
   Private Structure IconInfo  
     Public fIcon As Boolean  
     Public xHotspot As Int32  
     Public yHotspot As Int32  
     Public hbmMask As IntPtr  
     Public hbmColor As IntPtr  
   End Structure  

   <DllImport("user32.dll", EntryPoint:="CreateIconIndirect")> _  
   Private Shared Function CreateIconIndirect(ByVal iconInfo As IntPtr) As IntPtr  
   End Function  

   <DllImport("user32.dll", CharSet:=CharSet.Auto)> _  
   Public Shared Function DestroyIcon(ByVal handle As IntPtr) As Boolean  
   End Function  

   <DllImport("gdi32.dll")> _  
   Public Shared Function DeleteObject(ByVal hObject As IntPtr) As Boolean  
   End Function  

   ''' <summary>  
   ''' Create a custom winforms cursor with a designated hotspot  
   ''' </summary>  
   ''' <param name="bmp">Image to be used as cursor</param>  
   ''' <param name="hotspot">Hotspot location of the cursor</param>  
   ''' <returns></returns>  
   ''' <remarks>  
   ''' Requires imports:  
   ''' Imports System.Drawing  
   ''' Imports System.Runtime.InteropServices  
   ''' Imports System.Windows.Forms  
   Public Shared Function CreateCursor(ByVal bmp As Bitmap, ByVal hotspot As Point) As Cursor  
     'Setup the Cursors IconInfo  
     Dim tmp As New IconInfo  
     tmp.xHotspot = hotspot.X  
     tmp.yHotspot = hotspot.Y  
     tmp.fIcon = False  
     tmp.hbmMask = bmp.GetHbitmap()  
     tmp.hbmColor = bmp.GetHbitmap()  
     'Create the Pointer for the Cursor Icon  
     Dim pnt As IntPtr = Marshal.AllocHGlobal(Marshal.SizeOf(tmp))  
     Marshal.StructureToPtr(tmp, pnt, True)  
     Dim curPtr As IntPtr = CreateIconIndirect(pnt)  
     'Clean Up  
     Return New Cursor(curPtr)  
   End Function  

#End Region  

Don't forget the required imports! (In case you it did interest you)

August 27, 2012

Named pipes in .Net

Recently I did a job involving sending SMS messages from a web service. The message application app is SMS Studio, from CodeSegment. This application is used for some time by our client and in the past we've only used VB Script to interface with it.
Using VB Script, the easy way to send an SMS was to make SMS Studio create a named pipe to receive incoming messages and 'place' the SMS content in that pipe by our script.

My problem

Seems straight forward. In vb script we create an fso object and write to the pipe. Should be as easy -if not easier- in .Net right? Wrong! The Filestream object in System.IO does not allow your to write to a 'device'. Anything named "\\.\[device]\[name]" is not allowed. Apparently "pipe" is considered a device... "\\.\pipe\SendSMS" dit not work..

Problem Solved?!

Making a long story short: What I was looking for was here: System.IO.Pipes. It is available as of  framework 3.5.

This is how we did it in vb script:
 Set fso = Server.CreateObject("Scripting.FileSystemObject")  
 Set pipe = fso.CreateTextFile("\\.\pipe\SendSMS")  

And the .Net way:
    Using pipe As New NamedPipeClientStream(".", "SendSMS", PipeDirection.Out, PipeOptions.Asynchronous)  
      Using sw As New StreamWriter(pipe)  
        sw.AutoFlush = True  
      End Using  
    End Using  
 Catch ex As Exception  
    Messagebox.Show(ex.Message & Environment.Newline & "SMS Studio offline?", "SMS not send")  
 End Try  

Notice that the pipe name in .Net is only the name "SendSMS", not the 'full' name ("\\.\pipe\SendSMS") like in vb script! Also we use NamedPipeClientStream, because we 'connect' to an existing pipe. It turns out to be this simple.

August 01, 2012

Visual Studio; The Document outline window

I really love Telerik controls especially in a winforms and asp.net environment. In a windows form solution it gives you this visual edge where your apps just looks a little more professional and appealing. RadDock is by far my most favorite control, closely followed by RadCommandBar.

My problem

Okay, so Telerik did a great job with those winform controls. But the problem is the order I drag my controls from the toolbox to my form. Usually I add a RadCommandBar first docking it to the top of the form, followed by a RadDock docking the form. Occasionally I first add the dock then the bar, resulting in the bar overlaying the dock.

Not the desired end result...

Problem solved?

Sort of... Usually I went to the forms designer code behind and changed the Me.Controls.Add order.

Problem Solved!

But by chance I stumbled into a Visual Studio feature which is far more easy: The document outline window! A -almost "hidden"- window showing all controls on your form. Rearranging controls is reduced to drag'n'drop and clicking arrows. No more need to edit designer code behind.

To show this window from the main menu, select View -> Other Windows -> Document Outline

July 25, 2012

ASP.Net: Wait for postback response

We have a ASP.Net application where some postbacks might take some time to be handled by the server. When the user triggers a postback, we want the client to be forced to wait until the postback is handled by the server.

My Problem

I want this mechanism to kick in on every page of the site, though some pages do not realy require it.

Problem solved?

Obviously you end up in the master page, but as in animal farm: "All pages are equal, but some pages are more equal then others". I want certain pages to handle the postback slightly different from the default...

Problem Solved!

The solution contains 3 elements: html, css and a little javascript. It's the javascript that helped me out.

     <div id="mainContent">  
       <div class="loadinggs" id="loadingoverlay">  
         <div class="loadingmsg">  
           <img src="../../Images/ajax-loader.gif" align="middle" alt="busy" />  
           Bezig met verwerken...  
       <asp:ContentPlaceHolder ID="MainContent" runat="server" />  
The place of the code depends on what part you want to block. The example code 'blocks' the main content, leaving the menu (in another placeholder) accessible.

   background:rgba(255, 255, 255, 0.5);  
   border:2px solid #196DC1;  

HTML & CSS by Gio! (thanks again!)
The CSS is primarily IE9 (as by my requirement), but you can easily tweak it to support other browsers aswell.


     Initializing the Page PageRequestManager, handling 4 key events:  
     1 - BeginRequest - Start of a postback  
     2 - Endrequest  - Server response on postback event  
     3 - PageLoading - ... (self explainatory I guess)  
     4 - PageLoaded  -  
     By default on each page a animated loading img is shown. But certain pages have additional functionality.  
     In appl_init we check if additional functions were provided for each event. If not the default behaviour is applied.  
 <script type="text/javascript">  
   var pgRegMgr;  
   // add an event handler to 'pageload'  
   The PageRequestManager contains postback information.  
   When this page initializes, we can add handlers to this manager to catch events.  
   NOTE: This javascript code need te be placed AFTER the </body> tag !!!!  
   function appl_init() {  
     // if we do not have the PageRequestManager instance, get it AND add the handler(s)  
     if (pgRegMgr == null) {  
       if (Sys != null) {  
         if (Sys.WebForms != null) {  
           pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();  
           // check for specific event handlers, if not found use the default  
           if (window.pageBeginRequest) { pgRegMgr.add_beginRequest(pageBeginRequest); } else { pgRegMgr.add_beginRequest(BeginHandler); }  
           if (window.pageEndRequest) { pgRegMgr.add_endRequest(pageEndRequest); } else { pgRegMgr.add_endRequest(EndHandler); }  
           if (window.pageLoading) { pgRegMgr.add_pageLoading(pageLoading); } else { pgRegMgr.add_pageLoading(BeginHandler); }  
           if (window.pageLoaded) { pgRegMgr.add_pageLoaded(pageLoaded); } else { pgRegMgr.add_pageLoading(EndHandler); }  
   Default pageBeginRequest and pageLoading behaviour.  
   function BeginHandler() {  
     document.getElementById('loadingoverlay').style.display = 'block';  
   Default pageEndRequest and pageLoaded behaviour.  
   function EndHandler() {  
     document.getElementById('loadingoverlay').style.display = 'none';  
 <asp:ContentPlaceHolder ID="AfterBody_AddedHandlers" runat="server" />  

Now on each postback of a control the content part of the screen is 'locked' until the server responds. The script supports the usage of  a specific handler on the content page hosted by the master. Just add the handlers in the <asp:Content> tag and do enclose them with <script></script> tags. And -if applicable- don't forget to hide the loading message...

 <asp:Content ID="Content2" ContentPlaceHolderID="AfterBody_AddedHandlers" runat="Server">  
   <script type="text/javascript">  
     When a postback was handled by the server (Code behind was executed...)  
     we want to check if a specific control was causing the postback...  
     function pageEndRequest() {  
       //do specific page stuff...  
     Catch the pageLoaded event.  
     function pageLoaded() {  
      //eg. call a specific function like a body onload  
       document.getElementById('loadingoverlay').style.display = 'none';  

July 23, 2012

Sync Outlook with Android!

Looking for free software to synchronize your outlook data with your Android device?
After searching the web with google again and again I found a solution. They say the best things in life are free, but your should really consider a donation to these developers!


This is what you are looking for! Fully functional, not a trial version. And do donate, it's worth it!

July 20, 2012

Setup and Deployment: A Windows service

So I made myself a nice Windows Service in Visual Studio 2010 for some background work. As numerous sites point out, I did not forget to add a "project installer" -which seems to be required- by right clicking on the Service Design view and selecting "add installer" from the popup. Set some properties and we're good to go. That was the easy part as it turned out.

My Problem

Now it needed to be installed on client machines so I added a new project to my solution: Other Project Types -> Setup and Deployment -> Visual Studio Installer. "Been there, done that" I would think...

I added the "Primary output from myService (active)" to the file system. Just as I did countless times, for countless other apps. Organized the install information like name, company, version and so on and so forth... The usual stuff really. When build, indeed the project generates the ".msi" and "setup.exe" as expected.

Problem solved?

Right click "setup.exe" from my release folder of the setup project. "Run as administrator" to be absolutly sure the User Account Control doesn't bother me, and install! And -as expected- install ended with no problems. So cool, creating my own service... No let's see if this works...

[anxious on]
Start button -> services.msc -> here's my list of services...[anxious off]

Huh? Where is it? It did install, it did! Look at the control panel -> Add remove software -> It's right there!

Problem solved!

When installing a service -it turns out- we need some extra settings in the setup project.

Right click the setup project and select "Custom actions" from the popup menu. Add the primary output from your service to Install, Commit, Rollback and uninstall.

Finally rebuild your setup -don't forget to uninstall your previous attempt- and install your new build. Now run "services.msc" and...
"There it is!" (to qoute the great Charlie Harper :)

Off course starting the service might still be a dissapointment, depending on your coding skills. But atleast it got installed!

July 13, 2012

Generated objects, property exists? (or not!)

The ORM of choice of my employer is Telerik Open Access. It supports both forward and reverse mapping. When doing SCRUM development, it gives us the flexibility to quickly add some database columns, tables, foreign key relations etc. in the database and then generate the business objects in our data layer.

My problem

In a particular project the customer opted for record tracking. Who -and when- created (e.g.) a person in the database, and who (when) had it changed.
The catch though:
  • it's not required for all tables. 
  • The creation / modification user is only known in the software (no database trigger solution).

Problem solved?

One part of the solution was to edit the Telerik Open Access class generation templates. In those templates we added a (default!) constructor. In the constructor we set the creator and creation date properties. Adding / implementing INotifyPropertyChanged handled the modification properties. The generation of the business classes was no problem, but compiling the project was another story...
Not every business class had the creation properties, so we faced "some" compiler errors.

Problem solved!

Refelection saved the day. Instead of setting the property straight forward in the constructor:
 this._createUser="new creator";  
it's 'decorated' with an if:
 if(!this.GetType().GetProperty("CreateUser") == null)  
   this.GetType().GetProperty("CreateUser").SetValue(this,"new creator",null);  

Now we can (re-)generate the class model without the headache of modifying 70+ constructors for objects without tracking (or the need to add 40+ constructers  when not generated).

July 12, 2012

Linked tables in SQL Server 2008 (R2)

Usually Google is my friend, but looking for SQL Linked tables gave me some frustration. Admittedly, I searched for the wrong thing...

My problem

Consider 2 identical databases on 1 (SQL 2008) server. The data is -off course- different, however some tables need to be 'in sync'. My initial thought was to make database one the lead database, storing the data. In database two I delete that particular table and create a linked table to database one. Just like one would do in MS Access...

Problem solved?

Hold that thought: "Just like in access"... Short version of the story: there are no linked tables in SQL Server!

Problem solved!

It turns out in SQL Server it's not "linked tables", it's Synonyms!!! So when I did a search on Synonyms Google showed a wealth of information.

Some things I stumbled into when replacing the tables with synonyms:
  • First remove all foreign keys related to tables which are being replaced by synonyms
  • Then remove the primary keys of tables to be replaced
  • Synonyms can not have FK constraints!
So  linking tables in SQL turns out to be as easy as:
 DROP TABLE [dbo].[myTable]  
 CREATE SYNONYM [dbo].[myTable] FOR [TheOtherDatabase].[dbo].[myTable]