I am trying to send Image data captured with
vizcapture using Web Sockets. I am not expert with computer networks or network protocols but done this work using Vizard Help, Help from World Viz Forum & HTML5 Tutorial from W3Schools. When I run the code and open HTML 5 supporting web browser, Google Chrome in my case with url
http://localhost:8080/vizhtml/websocket for local host it runs fine for some time. Bellow is the code given:
Code:
import viz
import vizhtml
import vizact
import vizcapture
viz.setMultiSample(4)
viz.fov(60)
viz.go()
import vizinfo
info = vizinfo.add('This script demonstrates how to add multiple windows.\nThe upper right window is a rear view of the scene\nThe upper left window is a birds eye view')
info.translate([0.95,0.05])
info.alignment(vizinfo.LOWER_RIGHT)
#Add environment
viz.addChild('maze.osgb')
# Create a new window in the upper left corner
UpperLeftWindow = viz.addWindow(pos=(0,1.0),size=(0.2,0.2))
UpperLeftWindow.visible(0,viz.SCREEN)
#Create a new window in the upper right corner
UpperRightWindow = viz.addWindow(pos=(0.8,1.0),size=(0.2,0.2))
UpperRightWindow.visible(0,viz.SCREEN)
# Create a new viewpoint
BirdView = viz.addView()
#Attach the bird's eye view to the upper left window
UpperLeftWindow.setView(BirdView)
#Move the view above the center of the room
BirdView.setPosition([0,25,0])
#Rotate the view so that it looks down
BirdView.setEuler([0,90,0])
#Create another viewpoint
RearView = viz.addView()
#Attach the rear view to the upper right window
UpperRightWindow.setView(RearView)
#Increase the field-of-view for both windows
UpperLeftWindow.fov(60)
UpperRightWindow.fov(60)
#Add an arrow marker to bird's eye view window to represent our current position/orientation
arrow = viz.addTexQuad(parent=viz.ORTHO,scene=UpperLeftWindow,size=20)
arrow.texture(viz.add('arrow.tif'))
# Web Socket & HTML 5 Code
code = """
<html>
<head>
<title>vizhtml WebSocket Example</title>
<script type="text/javascript" src="vizhtml.js"></script>
</head>
<body>
<canvas id="VizardScreen" width="180" height="140" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script language="javascript">
var socket = new VizardWebSocket();
var c=document.getElementById("VizardScreen");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(160,120);
socket.onevent('open', function(e){
document.getElementById('status').innerHTML = 'connected';
document.getElementById('my_button').disabled = false;
})
socket.onevent('close', function(e){
document.getElementById('status').innerHTML = 'waiting for connection';
document.getElementById('my_button').disabled = true;
socket.reconnect();
})
socket.onevent('set_time', function(e){
document.getElementById('script_time').innerHTML = e.data.time;
})
socket.onevent('set_data', function(e){
var j = 0;
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=e.data.iData[j+2];
imgData.data[i+1]=e.data.iData[j+1];
imgData.data[i+2]=e.data.iData[j];
imgData.data[i+3]=255;
j+=3;
}
ctx.putImageData(imgData,10,10);
})
var click_count = 0;
function onButtonClick()
{
click_count += 1;
socket.send( 'button_click' , VizardData({'count':click_count}) );
}
</script>
<div>Status:</div><div id='status'>waiting for connection</div></br>
<div>Time:</div><div id='script_time'></div></br>
<div><input id='my_button' type=button value="Send Message" onclick="onButtonClick();"></div></br>
</body>
</html>
"""
# http://localhost:8080/vizhtml/websocket
vizhtml.registerCode('websocket',code)
def ClientConnect(e):
print 'Client connected at',e.client.address
vizhtml.onConnect(ClientConnect)
def ClientDisconnect(e):
print 'Client disconnected at',e.client.address
vizhtml.onDisconnect(ClientDisconnect)
def SendTime():
d = viz.Data(time='%.1f'%(viz.tick()))
vizhtml.sendAll('set_time',d)
vizact.ontimer(0.1,SendTime)
def OnButtonClick(e):
print 'BUTTON CLICK',e.data.count,'from',e.client.address
vizhtml.onMessage('button_click',OnButtonClick)
def SendImageData():
width,height,data = vizcapture.screenBuffer(flip = True)
lendata = len(data)
print lendata
iData = []
for j in range (120):
for i in range(160):
iData.append(ord(data[800*3*5*(j-1)+3*5*(i-1)]))
iData.append(ord(data[800*3*5*(j-1)+3*5*(i-1)+1]))
iData.append(ord(data[800*3*5*(j-1)+3*5*(i-1)+2]))
d = viz.Data(iData = (iData))
print len(iData)
vizhtml.sendAll('set_data',d)
vizact.ontimer(0.1,SendImageData)
def UpdateViews():
#Get the current head orientation and position
yaw,pitch,roll = viz.MainView.getEuler()
pos = viz.MainView.getPosition()
#Move the rear view to the current position
RearView.setPosition(pos)
#Rotate the rear view so that it faces behind us
RearView.setEuler([yaw+180,0,0])
#Move arrow to our current location
x,y,z = UpperLeftWindow.worldToScreen(pos,mode=viz.WINDOW_PIXELS)
arrow.setPosition([x,y,0])
arrow.setEuler([0,0,-yaw])
vizact.ontimer(0,UpdateViews)
# Turn on collision detection so we can't go through walls
viz.collision(viz.ON)
This is the output which I get:
Now the issues are:
1. When I run this code for certain time it starts throwing errors
Traceback (most recent call last):
File "C:\Program Files\WorldViz\Vizard4\python\vizact.py", line 3606, in __ontimer
val = event.call()
File "C:\Program Files\WorldViz\Vizard4\python\vizact.py", line 3379, in _callStatic
return func(*args,**kwargs)
File "C:\Documents and Settings\User\Desktop\screenCapture\screenCapture. py", line 142, in SendImageData
iData.append(ord(data[800*3*5*(j-1)+3*5*(i-1)]))
IndexError: string index out of range
2. Here I am reducing the resolution from 800 x 600 to 160 x 120 but if I don't do that my for loop runs for 800 x 600 x 3 = 1440000 times for single update. That slows down the performance of the system.
Please help me resolving these two issues.
Thanks!