Sunday, 1 October 2017

Hololens developing: How to use Holotoolkit and Understanding HoloToolkit (1)

I am learning how to develop Hololens now, met lots of challenging, I am going to share some thinking of how to use Holotoolkit

1) What is Holotoolkit?
       Of course you can google it, but for me, using some very simple words to introduce Holotoolkit: it is just a set of codes made by Microsoft to help Hololen developer quickly developing their application

2) Why would I write this blog?
     Holotoolkit is a great set of helping class, but to understand it, not that easy. There are lots of videos or articles from internet teaching you how to use Holotoolkit, place this model in, place that model in, and everything works.
    But how these model works? why these model works? What cause these model works together so well? NO ANY ARTICLE  INTRODUCING ANYTHING
    So I want to write something about what is happening under the hook of Holotoolkit, that's how this blog is coming out

OK, let's begin:

To understanding how holotoolkit works, we have to first understand how Unity codes works, if you don't have basic knowledge of Unity and C# coding, I suggest you learning some basic first.

Holotoolkit or Hololens codes are Unity codes no matter how complex they are, if you create a scene and put some models like this:

From the hierarchy, you can see there are 8 GameObjects listed on the top level, when game started running, something like this will happen(I use C# as the language to simulate what happene at the very beginning)

{
    Task.Factory.StartNew(() =>  new DirectionalLight());
    Task.Factory.StartNew(() =>  new HoloLensCamera());
    Task.Factory.StartNew(() =>  new SpatialMapping());
     ......
    Task.Factory.StartNew(() =>  new Sphere());
}

all these gameObjects will be initialized at the same time, the void Start() and void Update() method of each gameobjects will be invoked one by one.

this is how Unity scripts works in my imagination(if I am wrong, please correct me)



Create a sample Holotoolkit Project

Ok, let's return to Holotoolkit, we first create a empty project "UnderStandingHolotoolKit", like this:













importing Holotoolkit package:





















Choose the 2017.1.0 version, and get this result:
































Delete the Main Camera and add HoloLensCamera from HoloToolkit.Input.Prefabs
Add a BasicCursor from HoloToolkit.Input.Prefabs.Cursor
Add an InputManager from HoloToolkit.Input.Prefabs

what you see in the Hierarchy should be like this:














Now we have a basic environment using Holotoolkit, normally if you want to play with Hololens, this is the minimum settlement which could not be less, and this setting contains nearly everything you need to continue programming

let's continue;
Save above as a scene(panel1)
the settings above is just a basic frame, you can not see anything if you run this in device or Simulator, let's add a cube, like this:
















Try to play in the Unity Editor or device or Emulator, you will see the cursor appearing on the surface of the Cube



















Wow, this is cool, we didn't code a single line, and the Holotoolkit help us adding Cursor on the object we created, but how is this working? what happened under the hook?

I will show you the answer on next post

Tuesday, 21 March 2017

Say goodby to Silverlight

I haven't update my blog for years, it used to be a platform for showing my silverlight skills

Now I have to say, SL is dead, I will be focusing on Microsoft VR/AR/MR tech, like Hololens

3D design is a very big part of it

that's why I choose Blender as my 3D design tools

Cheers

In Blender, What is the definition of Top, Front and Right views

I read some books, youtube video, but none of them introduce the basic things, what is the definition of Views?

In blender, there are three different basic, but very important views, Top, Front and Right views, but what does it mean? What is the definition of them? No any comments from internet or any books

Now I show them here:
You must notice there is an Axis in blender, X, Y, Z, let’s define the direction of them,

From -X to +X, is called from right to left, if you walk from -100(X) to +100(X), you will be called “walking alone Axis (X) from right to left”
From +X to -X, is called from left to right, if you walk from +100(X) to -100(X), you will be called “walking alone Axis(X) from left to right”

Right View and Left View:
The “Right View” means looking from the left to the right, what you will see is called “Right View”. If you look alone Axis(X) from +100 to -100, what you see is called “Right View”
The “Left View” means looking from the right to the left, what you will see is called “Left View”. If you look alone Axis(X) from -100 to +100, what you see is called “Left View”

------------------------------------------------------------------------------------------------------------------
From -Y to +Y, is called from back to front, if you walk from -100(Y) to +100(Y), you will be called “walking alone Axis (Y) from back to front”
From +Y to -Y, is called from front to back, if you walk from +100(Y) to -100(Y), you will be called “walking alone Axis(Y) from front to back”

Front View and Back View:
The “Front View” means looking from the back to the front, what you will see is called “Front View”. If you look alone Axis(Y) from -100 to +100, what you see is called “Front View”
The “Back View” means looking from the front to the back, what you will see is called “Back View”. If you look alone Axis(Y) from +100 to -100, what you see is called “Back View”

-------------------------------------------------------------------------------------------------------------------
From -Z to +Z, is called from bottom to top, if you walk from -100(Z) to +100(Z), you will be called “walking alone Axis (Z) from bottom to top”
From +Z to -Z, is called from top to bottom, if you walk from +100(Z) to -100(Z), you will be called “walking alone Axis(Z) from top to bottom”

Top View and Bottom View:
The “Top View” means looking from the top to the Bottom, what you will see is called “Top View”. If you look alone Axis(Z) from +100 to -100, what you see is called “Top View”
The “Bottom View” means looking from the Bottom to the Top, what you will see is called “Bottom View”. If you look alone Axis(Z) from -100 to +100, what you see is called “Bottom View”



Monday, 27 August 2012

How to upload big file in Silverlight using WCF?

I am recently trying to upload some big files(100MB or 1GB) to server using WCF in Silverlight Client, but found it is a really tough work. So I googled for few hours and found some SEEMED helpful result, I say SEEMED means NONE of them works perfectly, NONE, all of these result has at least one problems I listed below:


  1. Doesn't work at all, either from Silverlight side or from server side
  2. Works, the result is good, but from Silverlight side, the whole file is read into the memory by using a big buffer byte[], which cause an Out of  Memory Exception in uploading period
  3. Works, from the Silverlight side, the big file is split into some small package and transfer to the server piece by piece. everything is OK, looks beautiful, but the only problem is, the FILE which was uploaded to the server is forever DAMAGED.  the bytes are the same, but the content of the file is changed which makes the upload useless.
If you can find any other solution other than mine which can do a real successful upload, please let me know.

OK, let's process on, let me teach you how to built a solution to upload a 100MB file from Silverlight side to WCF server.




  • WCF Server Side
    • On server side, create a Console Application, add these references
      System.ServiceModel
    • Add an interface called IMatt   ====>









      Don't worry about GetName() and UploadFile2(), we don't use them here, it's for testing other stuff
    • Create a class inherit the interface, we only care about two methodes
      UploadFileInfo(string fileInfo) and UploadFile(Stream sr);
    • Here you can see we transfer file by using a Stream, not byte[], which means we are using
      transferMode="StreamedResponse" to transfer files, by default, WCF will use transferMode="buffer", we have to changed this parameter in the web.config file to be "StreamedResponse"
    • Before transferring, I have to tell the service the file's detail information, because I will have to split the file into small pieces and transfer to the server piece by piece, by receiving all the pieces, I merge them into one integral file, thus, I don't have to read a big file all into memory which might cause "Out of memory exception"
      UploadFileInfo method is to tell the service the file's information, and the service has to calculate some parameters which will be used later 
    •  After the  UploadFileInfo is run, than started UploadFile(Stream sr)
      this will be invoked a number of times, depending on how big the file is and how big the buffer is




    

Tuesday, 27 March 2012

HTML5 Canvas Paint

I am learning HTML5's new stuff - Canvas, and created a demo paint
HTML5 Canvas Paint Demo

it's controlled by JavaScript, of course you can see the source code since it's a HTML page

Tuesday, 15 November 2011

How to show the Value inside the Thumb of Slider control in Silverlight..?

Recently I found some people keep asking this question,

"in Silverlight, How can I show the Value inside the Thumb of a Slider Control?"

well, when I tried to answer this question, I found this was not that easy to solve as I expected, so I dive deep into how the Slider control was designed originally by Microsoft an tried to find out some solution.

Now I got it, I rewrote the ControlTemplate and generated a brand new Slider which support showing the Value(or anything) inside the Thumb

Click to See the Live Demo

The screen shots are here:




When you slide the Thumb, the value 0.0 changes to be the Value property of the Slider control, like this:


How can I get this?

First let's see what is a Slider control? a Slider is a Range Control which indeed is a Control, why should I mention this? because a Control always have its own Template property, by modifying the Template property, you can "Assign" this Control different looking

in this example, i rewrote the Slider's Template(which is a ControlTemplate), so the Thumb could show the Value of the Slider




Saturday, 5 November 2011

Release the Power of Silverlight Data Binding

DataBinding in Silverlight is so powerful, properly using it can make your work extremely easy and save you tons of time.

In this Live Demo I demonstrated how to use Data Binding to enable a tree view node to implement Add, Delete, or Edit action

You can also download the Source Code here , since I am still updating this application, so the source code would be different every few days.


I didn't use any weird third party controls such as Telerik, it's just Silverlight Toolkit controls and other Silverlight foundation knowledge 


If you really interested, you can download the source code as your real project's  template(it's quite easy to extend other functionalists by yourself), it's totally free. I am very happy if you like this project.



Let me briefly introduce what it use for.

Suppose you are a Manager of a big Property Management Inc, You want to edit building information(that means Add, Edit or Delete a building), and you want to continue editing the Floors in this building, and the rooms in some particular Floor

this small Silverlight application is to help you implementing your work. By hovering the mouse to Building, Commands for this building will appear, including Edit, Add Floor, or Delete, Same command will appear for Floor and Room

By clicking the Edit or Add commands, a child window will appear to let you input or modify some basic information(currently only Name, but I will add more fun stuff later)

the Process is easy and straightforward,in the back, it is supported by well organized data(we call it ViewModel), without these neatly wroted data, the UI's code behind would be in a big messy if to implement the same functionality.



How to use it, at first, when you click



a Child Window would pop up letting you input a building's basic information

















After that, a building item will be created and you can see it in the tree




when your mouse hover the Building, some other command icon would appear




this include an default "Edit" icon and an Expender, clicking the Expender you will see more commands




that would include a "Add Floor" command, "Delete Current Building" command, and a "Change Icon" Toggle Button. By Clicking the "Change Icon" toggle Button, a ListBox would appear letting you choose different icons











I changed the ListBox's ItemPanelTemplate to be a WrapPanel and make the Background to be transparency so that it looks more professional.

You can find similar fonction in Floor and Room items

everything listed above are done through DataBinding, now I briefly introduce how this application is designed and how these commands are bind to the VewModel