Wiimote Project

Wiimote Projects => Wiimote Finger Tracking => Topic started by: javiasi on January 21, 2008, 06:59:02 AM

Title: Change grid
Post by: javiasi on January 21, 2008, 06:59:02 AM
Hi! I'm trying to change the grid by a bitmap image (a pic), but I don't know how to do it.

I supose that I can change it into the DirectX SDK like I was trying to apply textures to a 3D model, but I need to know witch program I should use.

Any suggestions ???

Greetings from Spain

btw great work Johnny, you're the best  ;D
Title: Re: Change grid
Post by: Spiffy on January 31, 2008, 04:29:46 AM
Yeah i was wondering the same. I wanted a group of images what i could scale and rotate and do what was done on the grid then use some gesture to move to the next image. What would be the best way to do something like this.

Thanks guys and well done Johnny on a great idea. Well impressed

Thanks again
Rob
Title: Re: Change grid
Post by: vadali on February 10, 2008, 03:13:16 PM
Hey,
I haven't really looked at the code, and I dont know DirectX API yet, but iam sure there's alot about 2d transformation there, which is what you are looking for (just a quick google gave me this tutorial http://www.euclideanspace.com/software/games/twod/index.htm).

I found this article, which explains how to display, rotate and scale (and iam sure translating will be really easy too): http://blogs.msdn.com/coding4fun/archive/2007/03/29/1991785.aspx ,in the Drawing section it shows how to scale and rotate, and just before it shows how to make a bitmap.

I didnt go over the grid code yet, though it most likely will already contatin a precalculated angle of rotation (which is also easily calculated, given two points and a little high school trigo), and also the scale factor most likely is calculated, so just go over it, and let me know what did you manage to make!

after thursday passes, and my last final with it for this semester, ill start digging in the code!

let me know if you managed to progress man, this sounds awesome!

Vadali
Title: Re: Change grid
Post by: vadali on February 10, 2008, 06:10:45 PM
Alright... I absolutely couldn't resist and downloaded the code.. :D

in class AffineTransformSolver you have a method called computeAngle and distance, and basically
Code: [Select]
float scale = distance(x3, x4, y3, y4) / distance(x1, x2, y1, y2);
float theta = computeAngle((x4 - x3), (y4 - y3)) - computeAngle((x2 - x1), (y2 - y1));

basically, I found that WiiMultipointGrid class has a method render, where it draws the lines of the grid, I think that would be a good place to start.
combine this with the tutorial on my last post, and iam sure it will be easily done!

ill sign off for now, time to bed..

Vadali
Title: Re: Change grid
Post by: cdougw on March 12, 2008, 02:08:36 AM
Hey Vadali can u please please please tell me the code to have a different image for the grid system.  I did look at the tutorial in your post but i am a complete noob in this area so i don't really know what I'm doing :D But I really would appreciate you (or anybody else) helping me out!

Thanks.
Doug.
Title: Re: Change grid
Post by: vadali on March 12, 2008, 06:49:50 AM
Hey Doug,
Ill hopefully go over the code this weekend, and then give you some pointers.

Until I do that, I suggest you to try to make a simple application in c# that just displays an image on the screen. Once you managed to do that, try to read again http://blogs.msdn.com/coding4fun/archive/2007/03/29/1991785.aspx, and attempt to make the picture rotate and rescale (focus on the Drawing section).

If you manage to do all that, integrating this into the wiimote's code will be the simplest thing, and ill help you with it as well.

Have a great day,
Vadali
Title: Re: Change grid
Post by: NoahGrey on March 17, 2008, 04:22:54 PM
Hey Vidali.

I just read that you might be working on the code to change the grid. Any luck with the code yet?

Hope you managed to work it out! We could really use it, I know I do!
Title: Re: Change grid
Post by: vadali on March 18, 2008, 02:57:20 AM
Hi all,
I managed to get a picture into a box within the grid!  :D
Ill post the code later today, since Iam at work right now.

I tried to make a picture for each box within the grid, but there are still some problems with that..
Anyone here knows some Direct3D? Its not as intuitive as I thought it was..

Good day,
Vadali
Title: Re: Change grid
Post by: vadali on March 18, 2008, 07:59:44 AM
Hey,

Alright, so I asked my friend to go on my computer at home and send me the source here.. :)
I cleaned it a bit, but since I have no compiler to test it in here, I hope I didnt mess it up. If it doesnt work, let me know.

Basically what I have done, was to make a texture with the image, assign it to a box within the grid, then run it through the same transformation that the grid goes through.

This is my first time ever writing anything (or even looking at) c# code AND Direct3D, so in that sense iam a complete noob, and any feedbacks would be appreciated.

I have tried to put another texture on a different box, but when i try to use both boxs, the program runs really ridiculously slow (I have no clue why). The code for that is commented, so if anyone knows some Direct3d, iam sure you could make much more sense out of it.

I included in the zip only the WiiMultipointGrid.cs, so you should overwrite your own with it, compile and run it.
My changes begin with "//Vadali :", so you can easily see what i have touched.

Let me know how you like it,
Vadali
Title: Re: Change grid
Post by: cdougw on March 18, 2008, 08:36:27 AM
So how do i get the image up there?   do i just put it in the folder and call it something?
Title: Re: Change grid
Post by: vadali on March 18, 2008, 08:41:44 AM
Hey,

open the code, in line 281 put in the location of your image file.

remember to put "\\" (twice!) instead of "\" (once),
so if your image is in your temp directory in c drive, write this: "C:\\temp\\imagename.jpg"

Vadali
Title: Re: Change grid
Post by: cdougw on March 18, 2008, 08:54:38 AM
Yep did that.. didnt work.  :-[
Title: Re: Change grid
Post by: cdougw on March 18, 2008, 08:57:17 AM
And i did push 'I' to display image.
Title: Re: Change grid
Post by: vadali on March 18, 2008, 09:02:11 AM
hehehe, did you try to press 'I' again?  ;D
its on by default, so you might have disabled that..

Anyhow, do you see the grid at all? the image should be really small on the bottom left box of the grid, so you should zoom in on that box.

unfortunately, its not my computer here, so i cant see whats up, i might have even messed the code up because I cleaned it a bit without checking.

Vadali
Title: Re: Change grid
Post by: cdougw on March 18, 2008, 09:09:16 AM
yehh its absolutely not there.  Its probably my fault, screwed something up...
Title: Re: Change grid
Post by: vadali on March 18, 2008, 09:12:09 AM
Alright then, i must go now to class, but ill go home afterwards, and we will get this to work. it has worked already, so have no worries, it will work again!

Good day,
Vadali
Title: Re: Change grid
Post by: vadali on March 19, 2008, 04:11:01 PM
Hey,
I checked it, and it seems to generally work.. wanna load up the image you are failing with? did you try a different image?

Vadali
Title: Re: Change grid
Post by: UndCon on May 01, 2008, 06:17:44 AM
Did you work this out ?
Title: Re: Change grid
Post by: vadali on May 01, 2008, 07:12:25 AM
Hey,
doug didnt say anything else so far, so I dont know if it worked for him or not, did you try?

anyhow, I had no time recently to go into d3d programming, but i did manage to learn a bit of opengl.

There is already a project that does the desktop VR in linux and opengl in c++ (http://www.wiimoteproject.com/wiimote-desktopvr/vr-headtracking-in-linux-with-opengl-working-t812.0.html), I checked out the code, and it seems like it would be much easier to rewrite this entire image finger manipulation based on his code using opengl rather then messing around with d3d.

by the way, if anyone is interested in opengl, there is a great video tutorial of it (which makes it really a piece of cake), here http://www.videotutorialsrock.com/ , and more specifically for our needs, an opengl texture mapping tutorial (this is what we will basically be doing - texture mapping with rotation only around the z axis plus transformation) here, http://www.nullterminator.net/gltexture.html .

As soon as I have some time, i will do that, but work and school have been eating up my days recently

peace,
vadali
Title: Re: Change grid
Post by: UndCon on May 03, 2008, 03:03:59 AM
Yes Vadali - I got it to work!

But initially i didnt copied all your modifications so part of the code was missing.

I searched for your name as you wrote // vadali on some locations but not all so i failed getting the code needed.

Then i replaced my "WiiMultipointGrid.cs" with yours, modified some code to suit my needs (searchpath to image, and some settings on screen)

Then i got it to work!

I had to adjust the settings like this


PanelTexture = Direct3D.TextureLoader.FromFile(
                                device,
                                "C:\\manhattan.png",
                                2400,
                                1350,


I simply wrote the width and height of the image...

But it starts out as a very small image in the lower left corner that i have to grab and move in order to have something fun to do with...and despite me entering the exact measures of the image its a square... (ill have to do more with the code)
//UndCon
Title: Re: Change grid
Post by: vadali on May 03, 2008, 06:06:49 AM
I am happy it works for you UndCon,
What happen if you dont put the exact length and width of the image?

well, ill update here whenever I get a chance to make this work on multiple images.

be good,
Vadali
Title: Re: Change grid
Post by: UndCon on May 03, 2008, 07:44:19 AM
I'm not sure about the effect or how it works when implemented
(i never programmed anything for direct3d before)

I did delete most of the code

        PanelTexture = Direct3D.TextureLoader.FromFile(
                                device,
                                "C:\\manhattan.png");
(check intellisense 5 alternatives when deleting the "," after device and adding it again)

I still havent figured out where to change the code to work with image size - i think it has to be in the grid's code or the fact that the code for image is as you wrote "// Change the grids to reflect the image"

So the image is square...as the grid is...changing numGridLines does not affect image

I changed
int gridColor = 0xffffff; //White - was 666666

Ideally we could fill an 2 dimensional array with images from a source like a folder - or Flickr (move stuff into config.ini)

BTW - I didnt try to include a 2nd picture so all that code is deleted...

Title: Re: Change grid
Post by: vadali on May 03, 2008, 10:21:11 AM
Ideally we could fill an 2 dimensional array with images from a source like a folder - or Flickr ...

That is what I basically was trying to do.
The actual size of the picture doesn't matter that much, because as long as the ratio of height to width is similar, you can stretch it how you like.

I tried to make it work with two images, but i didnt have the strength to deal with the d3d stuff (and it didnt really work that good). opengl seems so much easier, and iam sure we can make something like that or even better.

I was thinking more in the direction of choosing a directory (or any other image source), displaying them all on the screen, and then you can kinda move them around, rotate and zoom each image, place them on top of each other etc..

This really seems easy, since texture mapping is easy in opengl, and rotating and scaling the textures is also pretty straight forward. So we only have to deal with knowing which image we are "holding", and maintaining some kind of z-order of the images.

just need some freaking time ;)

vadali
Title: Re: Change grid
Post by: UndCon on May 03, 2008, 10:52:47 AM
Yes that is about the same ideas i got.

In my case the picture is in grid 2.2 and the same size as 1 square as long as gridlines are 20
(starting counting squares bottom left corner)

If we take 20*20 pictures and make sure they are width = height I think we can fill the grid with 1 picture / square

I know 20*20 is alot of pictures- but it's just an example...


About OpenGL - I must look into that...
//UndCon
Title: Re: Change grid
Post by: vadali on May 03, 2008, 11:23:50 AM
About OpenGL - I must look into that...

you should really check out these video tutorial of opengl i posted above, they really make it simple.. do you do some linux too or just windows?

I know 20*20 is alot of pictures- but it's just an example...

well, we can even start with 2x2 in the beginning, the idea is that once you make this, you can make any N*N.

I really wouldn't bother with d3d, so its a bit of work to port this to opengl, but we really have it almost all done for us by this dude who did the DesktopVR for linux (i only wonder if that could be compiled under windows too, just to be friendly..), its really nice, and only one cpp file long (and its not that long too :) )

vadali
Title: Re: Change grid
Post by: tarunsayal on August 19, 2008, 03:42:02 AM
Hey Vadali gr8 work yaar
well can u tell me a solution of this increasing the size of the image in directX itself as m not knowing openGL at all

Plz help me out as soon as possible.

thanks
Regards
Tarun Sayal
Title: Re: Change grid
Post by: triwyd on August 19, 2008, 11:14:49 AM
Hi Vadali,

I am a newcomers in this area. I just found the video of Jhonny Lee and downloaded the finger tracking program already. I am not a programmer and don't have any programming skill. I can change the stad image on Desktop VR program from Jhonny Lee, but I can't do that on the finger tracking.
From your previous posted message, I notice that you already have a script that can change the grid with others picture. Can I have the script because I can not find any download link or written script on your previous posted message.
I really need your help, thanks.

Regards,

Tri
Title: Re: Change grid
Post by: tarunsayal on August 19, 2008, 11:25:53 PM
Hiiiiiiii

Hey Tri

http://www.wiimoteproject.com/wiimote-finger-tracking/change-grid/
check out this link this have an attached file of wiimotegrid.cs file in one of the forums now replace the whole project's wiimotegrid.cs with this attached file.
there u will get the solution and the thing u wanted

Well Vadali need ur help.
the code u wrote was the image to be put into one square of the grid.
can u tell me out the way to put the image in the whole grid inspite of putting it in only one grid.


thanks
 and
Gr8 wrk

Tarun Sayal
Title: Re: Change grid
Post by: triwyd on August 20, 2008, 08:57:33 AM
Hi Tarun,

Thanks for your information, I got the file already.
Can you inform me more detail on how to handle this source file? I already have the C# application on my computer. I proceed the script by replace the text in line 281 with the directory of the picture on my computer. But after this stage i am totally blank and don't know what i have to do next. Can you help me please?

Regards,

Tri
Title: Re: Change grid
Post by: tarunsayal on August 20, 2008, 09:58:32 AM
Hi Tri

No issues after that dude.edit the Path given in the file which refers to the directory and replace it with the image present in your directory.
after u have written the file path the TextureFile function will take the image from the directory path u have given.
execute the program and then u will see that the image is picked and pasted as a texture to one square of the grid.

In case if u try to find out that how to paste the image on the whole of the grid please let me know.

otherwise your issue is solved dude.

Title: Re: Change grid
Post by: tarunsayal on August 20, 2008, 10:00:51 AM
Hi Vadali

Please help me with the following issue if u are able to resolve it

the code u wrote was the image to be put into one square of the grid.
can u tell me out the way to put the image in the whole grid inspite of putting it in only one square.

regards
Tarun Sayal
Title: Re: Change grid
Post by: UndCon on August 21, 2008, 01:24:24 AM
find the variables that repeats the grid - decrease this value and see what happens (I'm at work and I cannot try this myself ATM)

I'll download the code and see what I can find (lots of meetings today)
Title: Re: Change grid
Post by: tarunsayal on August 21, 2008, 02:01:36 AM
Hey I Have Done it
Thanks Vadali and Tri
Its was very simple to increase the size of the image.
just increase the value of x,y and keep the z value same.
the way to increase the value is that just double the value of x,y and keep the value of z the same.

the size of the image will increase.


regards
Tarun Sayal
Title: Re: Change grid
Post by: triwyd on August 21, 2008, 07:28:15 PM
Hi Tarun,

I still cannot make the image display on the grid.
Just one to check with you about the process, after I write the path of the Image directory, I just save the file right? Then run the exe file of the program. But It still doesn't work.  :-[

Regards,

Tri
Title: Ur Solution of ur issue is here
Post by: tarunsayal on August 22, 2008, 12:35:43 AM
Hi Tri

No need to worry dude.Let me start from the beginning.
after u have downloaded the whole of the project from the Johny Lee website.
open whole of the project and replace the WiimoteGrid.cs file with the file am attaching.then in code u have the comment written
//PUT THE IMAGE HERE REPLACE THE PATH WITH UR DIRECTORY
then there u need to replace the image path with your directory.
then u save the project and then execute the solution. once u have build and executed the solution then u can run the exe.
then u will be able to do it i suppose

regards
Tarun Sayal
Title: Hi UndCon
Post by: tarunsayal on August 22, 2008, 03:04:40 AM
Hi UndCon
this is Tarun this side.
can u help me out with a thing. if  i need to put two images and perform the manipulations on the two images saperately
how can i do that .wat all so i need to chagne in the code and wat all do i need to add

plz help
regards
Tarun Sayal
Title: Re: Change grid
Post by: triwyd on August 22, 2008, 09:52:09 AM
Hi Tarun,

Thanks a lot, I managed to get the image display on the grid already.   :D
After i change the directory path and built the solution then executed, It worked. The image display on the grid.

But I still have a problem,  why when I run the exe file from the folder, it is still displaying the grid without image? Do I miss something on the process? How can I change the existing exe file on the folder with the edited one? Do I have to do something after executed the file in order to produce a new exe file? Please advice.

Regards,

Tri
Title: Re: Change grid
Post by: UndCon on August 22, 2008, 11:10:22 AM
Actually I don't know how to repeat the images like the grid does (side by side, row by row)

I assume you have to put the images in an array (1 or 2 dimensional) and fill this array(s) with images

then you display this grid of images....


//UndCon
Title: Re: Change grid
Post by: tarunsayal on August 25, 2008, 12:26:03 AM
Hi Tri

Good u did it
no worries about the .exe file
delete the previous exe file from the directory and then again execute the program
then u will be able to get the new exe with that image in the grid.

i hope that solves your problem
in case u have any problem do let me know
if u can help me out with the issue tell me how top put more than one images in the grid to implement separately the functions of scaling and transforming


Regards
Tarun Sayal
Title: Re: Change grid
Post by: UndCon on August 25, 2008, 05:30:19 AM
One way of solving this is probably to repeat (loop) the code that generates the image as long as there are images left in an array

some pseudo code

listArray myImageList ("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg");

(or populate list automatically by reading files in dir)

foreach image in myImageList
{
generate the image, draw it, position it randomly on the screen
}

something like that....could work...

//UndCon
Title: Re: Change grid
Post by: tarunsayal on August 25, 2008, 07:17:26 AM
Thnks UndCon

For the idea
but i guess if i need to put another image then that is not a problem but the point is that in case if i put more image as a texture to the grid then same function will be implemented on the grid
rather i found another solution that we can create another grid into the device which will then give an option of grid and a texture and separate function to different textures simultaneously.


i hp it works

bbye thanks
in case u implement this using some other technique let me know with the code u write.

regards
Tarun Sayal

Title: Re: Change grid
Post by: triwyd on August 25, 2008, 08:26:19 AM
Hi Tarun,

Thanks for your advice, i will try to generate the new exe file. Regarding the 2 image on the grid, I also think It will be great if we can get multiple image to play with.
But since I don't have the  programming skill, I think not so much thing I can do from the coding.
By the way, do you know how to make it full screen automatically after we run the exe?

Regards,

Tri
Title: Re: Change grid
Post by: UndCon on August 25, 2008, 09:10:34 AM
To move the images separately is a must in this case - the code has to be modified accordingly

1 grid(layer) per image has to be created...
Title: Re: Change grid
Post by: tarunsayal on August 25, 2008, 09:24:11 AM
Hi Tri
After running the project u have to see the bin folder of the directory where the project is stored
chk that .exe that will hv the grid having the image
u dnt have to see that exe coz that is never updated
better u delete the exe which u are seeing from past some time

regards
Tarun Sayal
Title: Re: Change grid
Post by: triwyd on August 29, 2008, 09:18:16 AM
Hi Tarun,

Thanks for the help, its works. By the way, have you success to get 2 images on the grid?

Regards,

Tri
Title: Re: Change grid
Post by: UndCon on September 01, 2008, 03:56:41 AM
here is my current setup

(http://undcon.com/mods/wiimote/wiimote_multipointgrid.png)

One image displayed atm. It is 1920*1200px  so I set the parameters for the PanelTexture to be like this:

PanelTexture = Direct3D.TextureLoader.FromFile(
device,
@"C:\test.jpg",
1920,
1920,
...

the width and height of the image is calculated to be square (grid)
(that is why there is a big black background above the image)

if the values 1920 is set to 0 it is supposed to use values from file but this is overridden by something ...the grid-code perhaps

If you use an image that is square and set the parametars to that same width /height it looks just fine and there is no black background at all

Have to look deeper into that part...
Title: Re: Change grid
Post by: sakak on September 01, 2008, 09:16:28 AM
Is there any way to have multiple picture like the guy darthstoo did?
I also have another problem on the image cause its rotated 180 degree and its fliped around. Can u help me?
Title: Re: Change grid
Post by: UndCon on September 01, 2008, 02:11:52 PM
I also noticed the image is flipped - i sorted that in GIMP...flip horisontal and flip vertical if i recall...

I bet you can flip in code as well...
Title: Re: Change grid
Post by: sakak on September 01, 2008, 11:55:21 PM
Well i solved the part for flipping the picture just change the verc spec on vadali's code.
I still needed the help on the multiple pictures displayed.
This is because i am doing a project for my university so hope someone can help me.
Title: Re: Change grid
Post by: UndCon on September 05, 2008, 06:53:16 AM
I added settings to a config.dat just like the DesktopVR's settings
(easier to change, more userfriendly)

So far I have:

doFullscreen(true/false):false
m_dwWidth(int):1024
m_dwHeight(int):768
showGrid(true/false):false
showHelp(true/false):true
showMouseCursor(true/false):false

more to come...
Title: Re: Change grid
Post by: sakak on September 06, 2008, 10:33:12 PM
Hi Undcon do u know how to make a reset option so tat after the resized, i can reset to oirginal position
and do u know how to make the particles colour change randomly? thnks!
Title: Re: Change grid
Post by: raich on November 26, 2008, 10:42:23 AM
Hi,

I'm trying to put Images in the grid with the help of LoadTexture function. But so far I was not successful. Can anyonce send me the modified WiiMultipointGrid.cs so that I can figure out what exactly needs to be done.

I thank you profusely in advance.

Title: Re: Change grid
Post by: craigrm19 on February 20, 2009, 05:55:19 AM
Hey,
Ive been working on a project to have multiple images which can be rotated/moved/resized individually! At the moment Im stuck with one image, but now need to add more.
Some help would be greatly appreciated
Many thanks! :D
Title: Re: Change grid
Post by: Konum on May 04, 2009, 09:40:47 AM
Hi all

First of all thank you all for sharing your ideas and code. I was able to put and play around with one image. I'm really excited about Finger tracking and it's possibilities :D

I will do some research to have more than just one image. I've never programmed in C# or DirectX but have programed in other languages, so i just need to warm up a bit ^^

Hope to bring news soon :)