Search Results

Search found 19 results on 1 pages for 'getimagedata'.

Page 1/1 | 1 

  • Multi dimensional array with get image data

    - by Dave
    I'm really confused with an array im making, its gotten a bit confusing to follow but i believe its the only way for me to approach what im trying to do. My idea here is to store getImageData in an array so i can link each image to an array of data. This is how i create my array: var listObj = { id: uid, extra: [ ctx2.getImageData(abposx,abposy,imgwidth,imgheight) ] }; pixeld.push(listObj); So now im trying to run through the array "pixeld" to find the uid but i don't know how the syntax should be.... this is what i tried: for (j = (pixeld.length-1); j > -1; --j){ if(pixeld[j].extra.data[3] !==0){ //line 220 matches.push(pixeld[j].id); } } The problem is i get this error: Uncaught TypeError: Cannot read property '3' of undefined on line 220 I have marked which line is 220 in the for loop. Any one know what my mistake is ?

    Read the article

  • Java Port Socket Programming Error

    - by atrus-darkstone
    Hi- I have been working on a java client-server program using port sockets. The goal of this program is for the client to take a screenshot of the machine it is running on, break the RGB info of this image down into integers and arrays, then send this info over to the server, where it is reconstructed into a new image file. However, when I run the program I am experiencing the following two bugs: The first number recieved by the server, no matter what its value is according to the client, is always 49. The client only sends(or the server only receives?) the first value, then the program hangs forever. Any ideas as to why this is happening, and what I can do to fix it? The code for both client and server is below. Thanks! CLIENT: import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.image.BufferedImage; import java.io.*; import java.net.Socket; import java.text.SimpleDateFormat; import java.util.*; import javax.swing.*; import javax.swing.Timer; public class ViewerClient implements ActionListener{ private Socket vSocket; private BufferedReader in; private PrintWriter out; private Robot robot; // static BufferedReader orders = null; public ViewerClient() throws Exception{ vSocket = null; in = null; out = null; robot = null; } public void setVSocket(Socket vs) { vSocket = vs; } public void setInput(BufferedReader i) { in = i; } public void setOutput(PrintWriter o) { out = o; } public void setRobot(Robot r) { robot = r; } /*************************************************/ public Socket getVSocket() { return vSocket; } public BufferedReader getInput() { return in; } public PrintWriter getOutput() { return out; } public Robot getRobot() { return robot; } public void run() throws Exception{ int speed = 2500; int pause = 5000; Timer timer = new Timer(speed, this); timer.setInitialDelay(pause); // System.out.println("CLIENT: Set up timer."); try { setVSocket(new Socket("Alex-PC", 4444)); setInput(new BufferedReader(new InputStreamReader(getVSocket().getInputStream()))); setOutput(new PrintWriter(getVSocket().getOutputStream(), true)); setRobot(new Robot()); // System.out.println("CLIENT: Established connection and IO ports."); // timer.start(); captureScreen(nameImage()); }catch(Exception e) { System.err.println(e); } } public void captureScreen(String fileName) throws Exception{ Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize(); Rectangle screenRectangle = new Rectangle(screenSize); BufferedImage image = getRobot().createScreenCapture(screenRectangle); int width = image.getWidth(); int height = image.getHeight(); int[] pixelData = new int[(width * height)]; image.getRGB(0,0, width, height, pixelData, width, height); byte[] imageData = new byte[(width * height)]; String fromServer = null; if((fromServer = getInput().readLine()).equals("READY")) { sendWidth(width); sendHeight(height); sendArrayLength((width * height)); sendImageInfo(fileName); sendImageData(imageData); } /* System.out.println(imageData.length); String fromServer = null; for(int i = 0; i < pixelData.length; i++) { imageData[i] = ((byte)pixelData[i]); } System.out.println("CLIENT: Pixel data successfully converted to byte data."); System.out.println("CLIENT: Waiting for ready message..."); if((fromServer = getInput().readLine()).equals("READY")) { System.out.println("CLIENT: Ready message recieved."); getOutput().println("SENDING ARRAY LENGTH..."); System.out.println("CLIENT: Sending array length..."); System.out.println("CLIENT: " + imageData.length); getOutput().println(imageData.length); System.out.println("CLIENT: Array length sent."); getOutput().println("SENDING IMAGE..."); System.out.println("CLIENT: Sending image data..."); for(int i = 0; i < imageData.length; i++) { getOutput().println(imageData[i]); } System.out.println("CLIENT: Image data sent."); getOutput().println("SENDING IMAGE WIDTH..."); System.out.println("CLIENT: Sending image width..."); getOutput().println(width); System.out.println("CLIENT: Image width sent."); getOutput().println("SENDING IMAGE HEIGHT..."); System.out.println("CLIENT: Sending image height..."); getOutput().println(height); System.out.println("CLIENT: Image height sent..."); getOutput().println("SENDING IMAGE INFO..."); System.out.println("CLIENT: Sending image info..."); getOutput().println(fileName); System.out.println("CLIENT: Image info sent."); getOutput().println("FINISHED."); System.out.println("Image data sent successfully."); } if((fromServer = getInput().readLine()).equals("CLOSE DOWN")) { getOutput().close(); getInput().close(); getVSocket().close(); } */ } public String nameImage() throws Exception { String dateFormat = "yyyy-MM-dd HH-mm-ss"; Calendar cal = Calendar.getInstance(); SimpleDateFormat sdf = new SimpleDateFormat(dateFormat); String fileName = sdf.format(cal.getTime()); return fileName; } public void sendArrayLength(int length) throws Exception { getOutput().println("SENDING ARRAY LENGTH..."); getOutput().println(length); } public void sendWidth(int width) throws Exception { getOutput().println("SENDING IMAGE WIDTH..."); getOutput().println(width); } public void sendHeight(int height) throws Exception { getOutput().println("SENDING IMAGE HEIGHT..."); getOutput().println(height); } public void sendImageData(byte[] imageData) throws Exception { getOutput().println("SENDING IMAGE..."); for(int i = 0; i < imageData.length; i++) { getOutput().println(imageData[i]); } } public void sendImageInfo(String info) throws Exception { getOutput().println("SENDING IMAGE INFO..."); getOutput().println(info); } public void actionPerformed(ActionEvent a){ String message = null; try { if((message = getInput().readLine()).equals("PROCESSING...")) { if((message = getInput().readLine()).equals("IMAGE RECIEVED SUCCESSFULLY.")) { captureScreen(nameImage()); } } }catch(Exception e) { JOptionPane.showMessageDialog(null, "Problem: " + e); } } } SERVER: import java.awt.image.BufferedImage; import java.io.*; import java.net.*; import javax.imageio.ImageIO; /*IMPORTANT TODO: * 1. CLOSE ALL STREAMS AND SOCKETS WITHIN CLIENT AND SERVER! * 2. PLACE MAIN EXEC CODE IN A TIMED WHILE LOOP TO SEND FILE EVERY X SECONDS * */ public class ViewerServer { private ServerSocket vServer; private Socket vClient; private PrintWriter out; private BufferedReader in; private byte[] imageData; private int width; private int height; private String imageInfo; private int[] rgbData; private boolean active; public ViewerServer() throws Exception{ vServer = null; vClient = null; out = null; in = null; imageData = null; width = 0; height = 0; imageInfo = null; rgbData = null; active = true; } public void setVServer(ServerSocket vs) { vServer = vs; } public void setVClient(Socket vc) { vClient = vc; } public void setOutput(PrintWriter o) { out = o; } public void setInput(BufferedReader i) { in = i; } public void setImageData(byte[] imDat) { imageData = imDat; } public void setWidth(int w) { width = w; } public void setHeight(int h) { height = h; } public void setImageInfo(String im) { imageInfo = im; } public void setRGBData(int[] rd) { rgbData = rd; } public void setActive(boolean a) { active = a; } /***********************************************/ public ServerSocket getVServer() { return vServer; } public Socket getVClient() { return vClient; } public PrintWriter getOutput() { return out; } public BufferedReader getInput() { return in; } public byte[] getImageData() { return imageData; } public int getWidth() { return width; } public int getHeight() { return height; } public String getImageInfo() { return imageInfo; } public int[] getRGBData() { return rgbData; } public boolean getActive() { return active; } public void run() throws Exception{ connect(); setActive(true); while(getActive()) { recieve(); } close(); } public void recieve() throws Exception{ String clientStatus = null; int clientData = 0; // System.out.println("SERVER: Sending ready message..."); getOutput().println("READY"); // System.out.println("SERVER: Ready message sent."); if((clientStatus = getInput().readLine()).equals("SENDING IMAGE WIDTH...")) { setWidth(getInput().read()); System.out.println("Width: " + getWidth()); } if((clientStatus = getInput().readLine()).equals("SENDING IMAGE HEIGHT...")) { setHeight(getInput().read()); System.out.println("Height: " + getHeight()); } if((clientStatus = getInput().readLine()).equals("SENDING ARRAY LENGTH...")) { clientData = getInput().read(); setImageData(new byte[clientData]); System.out.println("Array length: " + clientData); } if((clientStatus = getInput().readLine()).equals("SENDING IMAGE INFO...")) { setImageInfo(getInput().readLine()); System.out.println("Image Info: " + getImageInfo()); } if((clientStatus = getInput().readLine()).equals("SENDING IMAGE...")) { for(int i = 0; i < getImageData().length; i++) { getImageData()[i] = ((byte)getInput().read()); } } if((clientStatus = getInput().readLine()).equals("FINISHED.")) { getOutput().println("PROCESSING..."); setRGBData(new int[getImageData().length]); for(int i = 0; i < getRGBData().length; i++) { getRGBData()[i] = getImageData()[i]; } BufferedImage image = null; image.setRGB(0, 0, getWidth(), getHeight(), getRGBData(), getWidth(), getHeight()); ImageIO.write(image, "png", new File(imageInfo + ".png")); //create an image file out of the screenshot getOutput().println("IMAGE RECIEVED SUCCESSFULLY."); } } public void connect() throws Exception { setVServer(new ServerSocket(4444)); //establish server connection // System.out.println("SERVER: Connection established."); setVClient(getVServer().accept()); //accept client connection request // System.out.println("SERVER: Accepted connection request."); setOutput(new PrintWriter(vClient.getOutputStream(), true)); //set up an output channel setInput(new BufferedReader(new InputStreamReader(vClient.getInputStream()))); //set up an input channel // System.out.println("SERVER: Created IO ports."); } public void close() throws Exception { getOutput().close(); getInput().close(); getVClient().close(); getVServer().close(); } }

    Read the article

  • Why is setting HTML5's CanvasPixelArray values ridiculously slow and how can I do it faster?

    - by Nixuz
    I am trying to do some dynamic visual effects using the HTML 5 canvas' pixel manipulation, but I am running into a problem where setting pixels in the CanvasPixelArray is ridiculously slow. For example if I have code like: imageData = ctx.getImageData(0, 0, 500, 500); for (var i = 0; i < imageData.length; i += 4){ imageData.data[i] = buffer[i]; imageData.data[i + 1] = buffer[i + 1]; imageData.data[i + 2] = buffer[i + 2]; } ctx.putImageData(imageData, 0, 0); Profiling with Chrome reveals, it runs 44% slower than the following code where CanvasPixelArray is not used. tempArray = new Array(500 * 500 * 4); imageData = ctx.getImageData(0, 0, 500, 500); for (var i = 0; i < imageData.length; i += 4){ tempArray[i] = buffer[i]; tempArray[i + 1] = buffer[i + 1]; tempArray[i + 2] = buffer[i + 2]; } ctx.putImageData(imageData, 0, 0); My guess is that the reason for this slowdown is due to the conversion between the Javascript doubles and the internal unsigned 8bit integers, used by the CanvasPixelArray. Is this guess correct? Is there anyway to reduce the time spent setting values in the CanvasPixelArray?

    Read the article

  • Why is setting HTML5's CanvasPixelArray values is ridiculously slow and how can I do it faster?

    - by Nixuz
    I am trying to do some dynamic visual effects using the HTML 5 canvas' pixel manipulation, but I am running into a problem where setting pixels in the CanvasPixelArray is ridiculously slow. For example if I have code like: imageData = ctx.getImageData(0, 0, 500, 500); for (var i = 0; i < imageData.length; i += 4){ imageData.data[index] = buffer[i]; imageData.data[index + 1] = buffer[i]; imageData.data[index + 2] = buffer[i]; } ctx.putImageData(imageData, 0, 0); Profiling with Chrome reveals, it runs 44% slower than the following code where CanvasPixelArray is not used. tempArray = new Array(500 * 500 * 4); imageData = ctx.getImageData(0, 0, 500, 500); for (var i = 0; i < imageData.length; i += 4){ tempArray[index] = buffer[i]; tempArray[index + 1] = buffer[i]; tempArray[index + 2] = buffer[i]; } ctx.putImageData(imageData, 0, 0); My guess is that the reason for this slowdown is due to the conversion between the Javascript doubles and the internal unsigned 8bit integers, used by the CanvasPixelArray. Is this guess correct? Is there anyway to reduce the time spent setting values in the CanvasPixelArray?

    Read the article

  • Is it possible to convert text to shape in VML /canvas/SVG ?

    - by est
    Hello, I need to display a text in 3D using vml/canvas/svg and do some transformation to the shape of the text like the effect of Ctrl+T in photoshop, even align a line of text to a curve, is there a way to convert text to shape first? The only thing close is getImageData() in firefox which is not ideal but OK. Any better methods? Using browser-specific hacks or voodoo is OK, but no Flash please :)

    Read the article

  • Selecting objects on a 2D map

    - by Dave
    I have a object selection function by checking the mouse click and getting the relevant object. How ever there is a rare situation where if one object is partially behind the other then both objects are in the given area so im wondering how I can make the game know which one was selected, as currently my method does not know. This is my function that works it out: function getobj(e){ mx = e.pageX - curleft; //mouse click x my = e.pageY - curtop; //mouse click y function searchSprites(sprites, x, y) { var matches = [], i = 0, data = null; for (i = 0; i < spritea.length; ++i) { data = spritea[i].data; if (x > data[0] && y > data[1] && x < data[2] && y < data[3]) { var imageData = ctx2.getImageData(x, y, 1, 1); if(imageData.data[3] !== 0){ return [spritea[i].id]; i = spritea.length; } } } } res = searchSprites(spritea, mx, my); bid = res[0]; if(bid === '1'){ alert('You selected the skyscraper in front!'); }else if(bid === '3'){ alert('You selected the skyscraper behind!'); } } Image of the map: It keeps telling me I clicked the skyscraper behind which is not necessarily what the user is trying to do. How can I improve the accuracy of this ?

    Read the article

  • Help with selecting objects on a map

    - by Dave
    I have a object selection function by checking the mouse click and getting the relevant object. How ever there is a rare situation where if one object is partially behind the other then both objects are in the given area so im wondering how i can make the game know which one was selected, as currently my method does not know. This is my function that works it out: function getobj(e){ mx = e.pageX - curleft; //mouse click x my = e.pageY - curtop; //mouse click y function searchSprites(sprites, x, y) { var matches = [], i = 0, data = null; for (i = 0; i < spritea.length; ++i) { data = spritea[i].data; if (x > data[0] && y > data[1] && x < data[2] && y < data[3]) { var imageData = ctx2.getImageData(x, y, 1, 1); if(imageData.data[3] !== 0){ return [spritea[i].id]; i = spritea.length; } } } } res = searchSprites(spritea, mx, my); bid = res[0]; if(bid === '1'){ alert('You selected the skyscraper in front!'); }else if(bid === '3'){ alert('You selected the skyscraper behind!'); } } Image of the map: http://i.imgur.com/qcKij.jpg It keeps telling me i clicked the skyscraper behind which is not necessarily what the user is trying to do... how can i improve the accuracy of this ?

    Read the article

  • Firefox throwing a exception with HTML Canvas putImageData

    - by mr.doob
    So I was working on this little javascript experiment and I needed a widget to track the FPS of it. I ported a widget I've been using with Actionscript 3 to Javascript and it seems to be working fine with Chrome/Safari but on Firefox is throwing an exception. This is the experiment: Depth of Field This is the error: [Exception... "An invalid or illegal string was specified" code: "12" nsresult: "0x8053000c (NS_ERROR_DOM_SYNTAX_ERR)" location: "http://mrdoob.com/projects/chromeexperiments/depth_of_field__debug/js/net/hires/debug/Stats.js Line: 105"] The line that is complaning about is this one: graph.putImageData(graphData, 1, 0, 0, 0, 69, 50); Which is a crappy code to "scroll" the bitmap pixels. The idea is that I only draw a few pixels on the left of the bitmap and then on the next frame I copy the whole bitmap and paste it on pixel to the right. This error usually is thrown because you're pasting a bitmap bigger than the source and it's going off the limits, but in theory that shouldn't be the case as I'm defining 69 as the width of the rectangle to paste (being the bitmap 70px wide). And this is full code: var Stats = { baseFps: null, timer: null, timerStart: null, timerLast: null, fps: null, ms: null, container: null, fpsText: null, msText: null, memText: null, memMaxText: null, graph: null, graphData: null, init: function(userfps) { baseFps = userfps; timer = 0; timerStart = new Date() - 0; timerLast = 0; fps = 0; ms = 0; container = document.createElement("div"); container.style.fontFamily = 'Arial'; container.style.fontSize = '10px'; container.style.backgroundColor = '#000033'; container.style.width = '70px'; container.style.paddingTop = '2px'; fpsText = document.createElement("div"); fpsText.style.color = '#ffff00'; fpsText.style.marginLeft = '3px'; fpsText.style.marginBottom = '-3px'; fpsText.innerHTML = "FPS:"; container.appendChild(fpsText); msText = document.createElement("div"); msText.style.color = '#00ff00'; msText.style.marginLeft = '3px'; msText.style.marginBottom = '-3px'; msText.innerHTML = "MS:"; container.appendChild(msText); memText = document.createElement("div"); memText.style.color = '#00ffff'; memText.style.marginLeft = '3px'; memText.style.marginBottom = '-3px'; memText.innerHTML = "MEM:"; container.appendChild(memText); memMaxText = document.createElement("div"); memMaxText.style.color = '#ff0070'; memMaxText.style.marginLeft = '3px'; memMaxText.style.marginBottom = '3px'; memMaxText.innerHTML = "MAX:"; container.appendChild(memMaxText); var canvas = document.createElement("canvas"); canvas.width = 70; canvas.height = 50; container.appendChild(canvas); graph = canvas.getContext("2d"); graph.fillStyle = '#000033'; graph.fillRect(0, 0, canvas.width, canvas.height ); graphData = graph.getImageData(0, 0, canvas.width, canvas.height); setInterval(this.update, 1000/baseFps); return container; }, update: function() { timer = new Date() - timerStart; if ((timer - 1000) > timerLast) { fpsText.innerHTML = "FPS: " + fps + " / " + baseFps; timerLast = timer; graph.putImageData(graphData, 1, 0, 0, 0, 69, 50); graph.fillRect(0,0,1,50); graphData = graph.getImageData(0, 0, 70, 50); var index = ( Math.floor(Math.min(50, (fps / baseFps) * 50)) * 280 /* 70 * 4 */ ); graphData.data[index] = graphData.data[index + 1] = 256; index = ( Math.floor(Math.min(50, 50 - (timer - ms) * .5)) * 280 /* 70 * 4 */ ); graphData.data[index + 1] = 256; graph.putImageData (graphData, 0, 0); fps = 0; } ++fps; msText.innerHTML = "MS: " + (timer - ms); ms = timer; } } Any ideas? Thanks in advance.

    Read the article

  • Embed external images for use in HTML canvas?

    - by Philipp Lenssen
    I'm using JavaScript to load an image into my Canvas element in Firefox. This works fine for local images, but throws a security exception for external images. Is there any way to avoid this security exception, one that does not involve my server having to act as proxy to load the image locally (because that would stress my server)? PS: The current code is similar to this: var img = new Image(); var contextSource = canvasSource.getContext('2d'); contextSource.drawImage(img, 0, 0); // get image data to do stuff with pixels var imageDataSource = contextSource.getImageData(0, 0, width - 1, height - 1);

    Read the article

  • How to create an image from canvas data?

    - by Jakub Hampl
    In my application I am trying to save an arbitrary part of a rendered HTML canvas to an image file. In my Javascript I call ctx.getImageData(x, y, w, h) and pass the resulting object to my macruby code (though if you know a solution in objc I am also very interested). There I'm trying to create a NSBitmapImageRep object so that I can then save to an image format the user desires. This is my code so far (the function gets a WebScriptObject as it's argument): def setimagedata(d) w = d.valueForKey("width").to_i h = d.valueForKey("height").to_i data = Pointer.new(:char, d.valueForKey("data").valueForKey("length").to_i) d.valueForKey("data").valueForKey("length").to_i.times do |i| data[i] = d.valueForKey("data").webScriptValueAtIndex(i).to_i end puts "data complete" # get's called @exported_image = NSBitmapImageRep.alloc.initWithBitmapDataPlanes(data, pixelsWide: w, pixelsHigh:h, bitsPerSample: 32, samplesPerPixel: 4, hasAlpha: true, isPlanar: false, colorSpaceName: NSCalibratedRGBColorSpace, bitmapFormat: NSAlphaNonpremultipliedBitmapFormat, bytesPerRow: 0, bitsPerPixel: 0) puts "done" # doesn't get called end The code doesn't seem to get through the initWithBitmapDataPlanes function but gives no error. My question is: what am I doing wrong? Is this approach reasonable (if not, what would be better?).

    Read the article

  • How to efficiently deal with a large amount of HTML5 canvas pixel data over websockets

    - by user730569
    Using imageData = context.getImageData(0, 0, width, height); JSON.stringify(imageData.data); I grab the pixel data, convert it to a string, and then send it over the wire via websockets. However, this string can be pretty large, depending on the size of the canvas object. I tried using the compression technique found here: JavaScript implementation of Gzip but socket.io throws the error Websocket message contains invalid character(s). Is there an effective way to compress this data so that it can be sent over websockets?

    Read the article

  • ImageData of an externally loaded Image?

    - by sri
    I load an external image and draw it on the Canvas element like so: var canvas = document.getElementById('canvas1'); var context = canvas.getContext('2d'); var image = new Image(); image.onload = function(evt) { context.drawImage(evt.target, 0, 0); } image.src = "test.jpg"; But I want to get the ImageData. So after calling context.drawImage, I do this: var imagedata = canvas.getImageData(); manipulate(imagedata); // modifies imagedata.data context.putImageData(imagedata, 0, 0); Is that the only way to get the imageData of an externally loaded image? Drawing the image on canvas & then getting the imagedata seems awfully slow. Am I missing something? Thanks!

    Read the article

  • Three.js: texture to datatexture

    - by Alessandro Pezzato
    I'm trying to implement a delayed webcam viewer in javascript, using Three.js for WebGL capabilities. I need to store frames grabbed from webcam, so they can be shown after some time (some milliseconds to some seconds). I'm able to do this without Three.js, using canvas and getImageData(). You can find an example on jsfidle. I'm trying to find a way to do this without canvas, but using Three.js Texture or DataTexture object. Here an example of what I'm trying. The problem is that I cannot find how to copy the image from a Texture (image is of type HTMLVideoElement) to another. In rotateFrames() function the older frame should be lost and newer should replace, like in a FIFO. But the line frames[i].image = frames[i + 1].image; is just copying the reference, not the texture data. I guess DataTexture should do this, but I'm not able to get a DataTexture out of a Texture or HTMLVideoElement. Any idea?

    Read the article

  • Canvas Check before submission

    - by smokinguns
    I have a page where a user can draw on the canvas and save the image to a file on the server. The canvas has a default black background. Is there a way to check if the user has drawn anything on the canvas before submitting the data URL representation of the image of a canvas with the toDataURL() function? So if the user doesn't draw anything on the canvas(it will be a blank canvas with a black background), the image wont be created on the server. Should I loop through each and every pixel of the canvas to determine this? Here is what I'm doing currently: var currentPixels = context.getImageData(0, 0, 600, 400); for (var y = 0; y < currentPixels.height; y += 1) { for (var x = 0; x < currentPixels.width; x += 1) { for (var c = 0; c < 3; c += 1) { var i = (y*currentPixels.width + x)*4 + c; if(currentPixels.data[i]!=0) break; } } }

    Read the article

  • Collaborative Whiteboard using WebSocket in GlassFish 4 - Text/JSON and Binary/ArrayBuffer Data Transfer (TOTD #189)

    - by arungupta
    This blog has published a few blogs on using JSR 356 Reference Implementation (Tyrus) as its integrated in GlassFish 4 promoted builds. TOTD #183: Getting Started with WebSocket in GlassFish TOTD #184: Logging WebSocket Frames using Chrome Developer Tools, Net-internals and Wireshark TOTD #185: Processing Text and Binary (Blob, ArrayBuffer, ArrayBufferView) Payload in WebSocket TOTD #186: Custom Text and Binary Payloads using WebSocket One of the typical usecase for WebSocket is online collaborative games. This Tip Of The Day (TOTD) explains a sample that can be used to build such games easily. The application is a collaborative whiteboard where different shapes can be drawn in multiple colors. The shapes drawn on one browser are automatically drawn on all other peer browsers that are connected to the same endpoint. The shape, color, and coordinates of the image are transfered using a JSON structure. A browser may opt-out of sharing the figures. Alternatively any browser can send a snapshot of their existing whiteboard to all other browsers. Take a look at this video to understand how the application work and the underlying code. The complete sample code can be downloaded here. The code behind the application is also explained below. The web page (index.jsp) has a HTML5 Canvas as shown: <canvas id="myCanvas" width="150" height="150" style="border:1px solid #000000;"></canvas> And some radio buttons to choose the color and shape. By default, the shape, color, and coordinates of any figure drawn on the canvas are put in a JSON structure and sent as a message to the WebSocket endpoint. The JSON structure looks like: { "shape": "square", "color": "#FF0000", "coords": { "x": 31.59999942779541, "y": 49.91999053955078 }} The endpoint definition looks like: @WebSocketEndpoint(value = "websocket",encoders = {FigureDecoderEncoder.class},decoders = {FigureDecoderEncoder.class})public class Whiteboard { As you can see, the endpoint has decoder and encoder registered that decodes JSON to a Figure (a POJO class) and vice versa respectively. The decode method looks like: public Figure decode(String string) throws DecodeException { try { JSONObject jsonObject = new JSONObject(string); return new Figure(jsonObject); } catch (JSONException ex) { throw new DecodeException("Error parsing JSON", ex.getMessage(), ex.fillInStackTrace()); }} And the encode method looks like: public String encode(Figure figure) throws EncodeException { return figure.getJson().toString();} FigureDecoderEncoder implements both decoder and encoder functionality but thats purely for convenience. But the recommended design pattern is to keep them in separate classes. In certain cases, you may even need only one of them. On the client-side, the Canvas is initialized as: var canvas = document.getElementById("myCanvas");var context = canvas.getContext("2d");canvas.addEventListener("click", defineImage, false); The defineImage method constructs the JSON structure as shown above and sends it to the endpoint using websocket.send(). An instant snapshot of the canvas is sent using binary transfer with WebSocket. The WebSocket is initialized as: var wsUri = "ws://localhost:8080/whiteboard/websocket";var websocket = new WebSocket(wsUri);websocket.binaryType = "arraybuffer"; The important part is to set the binaryType property of WebSocket to arraybuffer. This ensures that any binary transfers using WebSocket are done using ArrayBuffer as the default type seem to be blob. The actual binary data transfer is done using the following: var image = context.getImageData(0, 0, canvas.width, canvas.height);var buffer = new ArrayBuffer(image.data.length);var bytes = new Uint8Array(buffer);for (var i=0; i<bytes.length; i++) { bytes[i] = image.data[i];}websocket.send(bytes); This comprehensive sample shows the following features of JSR 356 API: Annotation-driven endpoints Send/receive text and binary payload in WebSocket Encoders/decoders for custom text payload In addition, it also shows how images can be captured and drawn using HTML5 Canvas in a JSP. How could this be turned in to an online game ? Imagine drawing a Tic-tac-toe board on the canvas with two players playing and others watching. Then you can build access rights and controls within the application itself. Instead of sending a snapshot of the canvas on demand, a new peer joining the game could be automatically transferred the current state as well. Do you want to build this game ? I built a similar game a few years ago. Do somebody want to rewrite the game using WebSocket APIs ? :-) Many thanks to Jitu and Akshay for helping through the WebSocket internals! Here are some references for you: JSR 356: Java API for WebSocket - Specification (Early Draft) and Implementation (already integrated in GlassFish 4 promoted builds) Subsequent blogs will discuss the following topics (not necessary in that order) ... Error handling Interface-driven WebSocket endpoint Java client API Client and Server configuration Security Subprotocols Extensions Other topics from the API

    Read the article

  • Replace Components.classesByID with document.implementation.createDocument

    - by Earl Smith
    I am not the author of this code, but it is no longer maintained. So I am trying to fix it, but I have very little experience in javascript. Since Firefox 9, Components.classesByID["{3a9cd622-264d-11d4-ba06-0060b0fc76dd}"]. has been obsolete. Instead, it is suggested that document.implementation.createDocument be used. Can someone here show me how to implement these changes? I seem to be, just banging my head with everything I have tried. The example given at Mozilla developer network is: var doc = document.implementation.createDocument ("http://www.w3.org/1999/xhtml", "html", null); var body = document.createElementNS("http://www.w3.org/1999/xhtml", "body"); body.setAttribute("id", "abc"); doc.documentElement.appendChild(body); alert(doc.getElementById("abc")); // [object HTMLBodyElement] and the code in the .jsm I am trying to fix is: this.fgImageData = {}; this.fgImageData["check"] = [ " *", " **", "* ***", "** *** ", "***** ", " *** ", " * "]; this.fgImageData["radio"] = [ " **** ", "******", "******", "******", "******", " **** "]; this.fgImageData["menu-ltr"] = [ "* ", "** ", "*** ", "****", "*** ", "** ", "* "]; this.fgImageData["menu-rtl"] = [ " *", " **", " ***", "****", " ***", " **", " *"]; // I think I'm doing something slightly wrong when creating the document // but I'm not sure. It works though. *FIX* var domi = Components.classesByID["{3a9cd622-264d-11d4-ba06-0060b0fc76dd}"]. createInstance(Components.interfaces.nsIDOMDOMImplementation); this.document = domi.createDocument("http://www.w3.org/1999/xhtml", "html", null); this.canvas = this.document.createElementNS("http://www.w3.org/1999/xhtml", "html:canvas"); for(var name in this.fgImageData) { if (this.fgImageData.hasOwnProperty(name)) { var data = this.fgImageData[name]; var width = data[0].length; var height = data.length; this.canvas.width = width; this.canvas.height = height; var g = this.canvas.getContext("2d"); g.clearRect(0, 0, width, height); var idata = g.getImageData(0, 0, width, height); for(var y=0, oy=0; y<height; y++, oy+=idata.width*4) for(var x=0, ox=oy; x<width; x++, ox+=4) idata.data[ox+3] = data[y][x] == " " ? 0 : 255; this.fgImageData[name] = idata; } } },

    Read the article

  • Using the FreeType lib to create text bitmaps to draw in OpenGL 3.x

    - by Andy
    At the moment I not too sure where my problem is. I can draw loaded images as textures no problem, however when I try to generate a bitmap with a char on it I just get a black box. I am confident that the problem is when I generate and upload the texture. Here is the method for that; the top section of the if statement just draws an texture of a image loaded from file (res/texture.jpg) and that draws perfectly. And the else part of the if statement will try to generate and upload a texture with the char (variable char enter) on. Source Code, I will add shaders and more of the C++ if needed but they work fine for the image. void uploadTexture() { if(enter=='/'){ // Draw the image. GLenum imageFormat; glimg::SingleImage image = glimg::loaders::stb::LoadFromFile("res/texture.jpg")->GetImage(0,0,0); glimg::OpenGLPixelTransferParams params = glimg::GetUploadFormatType(image.GetFormat(), 0); imageFormat = glimg::GetInternalFormat(image.GetFormat(),0); glGenTextures(1,&textureBufferObject); glBindTexture(GL_TEXTURE_2D, textureBufferObject); glimg::Dimensions dimensions = image.GetDimensions(); cout << "Texture dimensions w "<< dimensions.width << endl; glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB8, dimensions.width, dimensions.height, 0, params.format, params.type, image.GetImageData()); }else { // Draw the char useing the FreeType Lib FT_Init_FreeType(&ft); FT_New_Face(ft, "arial.ttf", 0, &face); FT_Set_Pixel_Sizes(face, 0, 48); FT_GlyphSlot g = face->glyph; glGenTextures(1,&textureBufferObject); glBindTexture(GL_TEXTURE_2D, textureBufferObject); glPixelStorei(GL_UNPACK_ALIGNMENT, 1); FT_Load_Char(face, enter, FT_LOAD_RENDER); FT_Bitmap theBitmap = g->bitmap; int BitmapWidth = g->bitmap.width; int BitmapHeight = g->bitmap.rows; cout << "draw char - " << enter << endl; cout << "g->bitmap.width - " << g->bitmap.width << endl; cout << "g->bitmap.rows - " << g->bitmap.rows << endl; int TextureWidth =roundUpToNextPowerOfTwo(g->bitmap.width); int TextureHeight =roundUpToNextPowerOfTwo(g->bitmap.rows); cout << "texture width x height - " << TextureWidth <<" x " << TextureHeight << endl; GLubyte* TextureBuffer = new GLubyte[ TextureWidth * TextureWidth ]; for(int j = 0; j < TextureHeight; ++j) { for(int i = 0; i < TextureWidth; ++i) { TextureBuffer[ j*TextureWidth + i ] = (j >= BitmapHeight || i >= BitmapWidth ? 0 : g->bitmap.buffer[ j*BitmapWidth + i ]); } } glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB8, TextureWidth, TextureHeight, 0, GL_RGB8, GL_UNSIGNED_BYTE, TextureBuffer); } }

    Read the article

  • OpenGL texture shifted somewhat to the left when applied to a quad

    - by user308226
    I'm a bit new to OpenGL and I've been having a problem with using textures. The texture seems to load fine, but when I run the program, the texture displays shifted a couple pixels to the left, with the section cut off by the shift appearing on the right side. I don't know if the problem here is in the my TGA loader or if it's the way I'm applying the texture to the quad. Here is the loader: #include "texture.h" #include <iostream> GLubyte uncompressedheader[12] = {0,0, 2,0,0,0,0,0,0,0,0,0}; GLubyte compressedheader[12] = {0,0,10,0,0,0,0,0,0,0,0,0}; TGA::TGA() { } //Private loading function called by LoadTGA. Loads uncompressed TGA files //Returns: TRUE on success, FALSE on failure bool TGA::LoadCompressedTGA(char *filename,ifstream &texturestream) { return false; } bool TGA::LoadUncompressedTGA(char *filename,ifstream &texturestream) { cout << "G position status:" << texturestream.tellg() << endl; texturestream.read((char*)header, sizeof(header)); //read 6 bytes into the file to get the tga header width = (GLuint)header[1] * 256 + (GLuint)header[0]; //read and calculate width and save height = (GLuint)header[3] * 256 + (GLuint)header[2]; //read and calculate height and save bpp = (GLuint)header[4]; //read bpp and save cout << bpp << endl; if((width <= 0) || (height <= 0) || ((bpp != 24) && (bpp !=32))) //check to make sure the height, width, and bpp are valid { return false; } if(bpp == 24) { type = GL_RGB; } else { type = GL_RGBA; } imagesize = ((bpp/8) * width * height); //determine size in bytes of the image cout << imagesize << endl; imagedata = new GLubyte[imagesize]; //allocate memory for our imagedata variable texturestream.read((char*)imagedata,imagesize); //read according the the size of the image and save into imagedata for(GLuint cswap = 0; cswap < (GLuint)imagesize; cswap += (bpp/8)) //loop through and reverse the tga's BGR format to RGB { imagedata[cswap] ^= imagedata[cswap+2] ^= //1st Byte XOR 3rd Byte XOR 1st Byte XOR 3rd Byte imagedata[cswap] ^= imagedata[cswap+2]; } texturestream.close(); //close ifstream because we're done with it cout << "image loaded" << endl; glGenTextures(1, &texID); // Generate OpenGL texture IDs glBindTexture(GL_TEXTURE_2D, texID); // Bind Our Texture glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); // Linear Filtered glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexImage2D(GL_TEXTURE_2D, 0, type, width, height, 0, type, GL_UNSIGNED_BYTE, imagedata); delete imagedata; return true; } //Public loading function for TGA images. Opens TGA file and determines //its type, if any, then loads it and calls the appropriate function. //Returns: TRUE on success, FALSE on failure bool TGA::loadTGA(char *filename) { cout << width << endl; ifstream texturestream; texturestream.open(filename,ios::binary); texturestream.read((char*)header,sizeof(header)); //read 6 bytes into the file, its the header. //if it matches the uncompressed header's first 6 bytes, load it as uncompressed LoadUncompressedTGA(filename,texturestream); return true; } GLubyte* TGA::getImageData() { return imagedata; } GLuint& TGA::getTexID() { return texID; } And here's the quad: void Square::show() { glEnable(GL_TEXTURE_2D); glBindTexture(GL_TEXTURE_2D, texture.texID); //Move to offset glTranslatef( x, y, 0 ); //Start quad glBegin( GL_QUADS ); //Set color to white glColor4f( 1.0, 1.0, 1.0, 1.0 ); //Draw square glTexCoord2f(0.0f, 0.0f); glVertex3f( 0, 0, 0 ); glTexCoord2f(1.0f, 0.0f); glVertex3f( SQUARE_WIDTH, 0, 0 ); glTexCoord2f(1.0f, 1.0f); glVertex3f( SQUARE_WIDTH, SQUARE_HEIGHT, 0 ); glTexCoord2f(0.0f, 1.0f); glVertex3f( 0, SQUARE_HEIGHT, 0 ); //End quad glEnd(); //Reset glLoadIdentity(); }

    Read the article

1