Occupancy grid map with canvas?

Community General Discussions
1

Hello.
Im pretty new in this and my english sux, but i do my best :)

Im currently on it to build a Robot based on the Rover5 Chassis with ExplorerPCB and using a Arduino Mega2560 as Controller on ExplorerPCB..

I have 4 Sensors:
1. HC-SR04 (ping)
2. CMPS10( compass)
3. IR (from explorer pcb)
4. Odometrie (encoders @ Rover5)

As Brain i want to use a RaspberryPI.
I already coded a Interface between Arduino and RaspberryPI using Serial. On the RaspberryPI i also run a Webserver to View whats going on and have the option to intervene if something goes wrong. The Communication between Arduino<->Raspberry<->WebIf runs over Python with Sockets and Threads, for the WebIf i additional use WebSockets (tornado in python) and Javascript.

Solong for the Basics... If someone is interesst in more Details have a look here: http://www.forum-raspberrypi.de/Thread-entwicklung-ropi-autonomer-roboter-mit-raspberrypi

Now to the Topic and my Problem:

I want to display a Occupancy Grid Map on my WebInterface - of the indoor Space my Robot is exploring.

I have read a mass of PDF's and also the Tutorials here on this page etc, but i cant figure out how i can programm something like showing here: https://www.robotshop.com/letsmakerobots/crum

The best way i found should be using canvas but i still dont know how to do it exactly :(

 

I realy hope someone here can help me and can give me some Examplecode or so?

Thanx!

2

best tutorials are here

http://www.w3schools.com/html/html5_canvas.asp
With sample code and space to fiddle with

Just compile a html page with the drawing you want, like a dotted line

3

I have trouble with: how to

I have trouble with: how to use the data i get 

Currently i have: http://codepaste.net/wp3a34

How can i now draw the Data i’ll get from my Sensors?

4

Hm sorry but i still dont

Hm sorry but i still dont understand “how” :frowning:

Yes, i have a 2D Array like:

int Map[10][10] =
{
{255, 255, 255, 255, 255, 255, 255, 255, 255, 255},
{255, 0, 0, 0, 255, 0, 0, 0, 0, 255},
{255, 0, 254, 0, 255, 0, 1, 0, 0, 255},
{255, 0, 0, 0, 255, 0, 0, 0, 0, 255},
{255, 0, 0, 0, 255, 255, 255, 0, 0, 255},
{255, 0, 255, 0, 255, 0, 0, 0, 0, 255},
{255, 0, 255, 0, 255, 0, 0, 0, 0, 255},
{255, 0, 255, 255, 255, 0, 255, 255, 255, 255},
{255, 0, 0, 0, 0, 0, 0, 0, 0,255},
{255, 255, 255, 255, 255, 255, 255, 255, 255, 255}
};

Where:

int nothing = 0;
int goal = 1;
int robot = 254;
int wall = 255;

But how can i now use this Data with canvas?

 

Should i just replace the Values with some Colors in JavaScript? confused

5

Maybe you could

convert 1 to 64 and 254 to 192 and just show your array as grayscale?

6

Hm oke finaly i now solved

Hm oke finaly i now solved the problem “how to draw” but still it doesnt look like the CRUM solution :frowning:


Heres my current Code: http://pastebin.com/daLc6JTH
Only for Debugging with a preloaded Map Array: http://pastebin.com/BscKBa4e
And that looks like:

t9kifl4m4ulg.gif

But now the Final question:

How can i get it working like to see in CRUM's Video?