Capturing LCD image for manual - Page 1
Forum section: electronics / projects

author: AndyC_772
author_rank: Super Contributor
timestamp: January 29, 2018, 05:17:30 pm
content: Hi allI need to write the operator's manual for a product with a mono graphic LCD.I'd like to include a number of screen captures, so I need to come up with a way of converting the LCD image into a portable format.The product's firmware includes a memory buffer which holds a copy of the LCD image, so it's easy to extract that. The problem is that it's in the LCD's native format, which is a series of horizontal stripes, within which each byte represents a column of 8 pixels.It's not an uncommon format for an LCD display controller, but obviously, not something that'll display without conversion.Does anyone know of a (Windows, preferably free) tool which can parse this type of raw data and convert it into, say, a BMP or PNG?Failing that, are any of the regular PC formats simple enough that it would make sense to "just" write a conversion tool for this one specific job?As an alternative, I could just point a camera at the screen. It's low tech, but would undeniably work, and with some careful lighting and post-processing, images captured this way could end up looking OK. Any alternative needs to be quicker and/or yield a better quality result!

author: ataradov
author_rank: Super Contributor
timestamp: January 29, 2018, 05:34:37 pm
content: I use Python for this sort of things. And this is a perfect project to learn Python.If you want to use some language you already know, but don't want to use libpng or similar, then XBM is a very simple format (C header), but it can be read by GIMP and converted into anything you like.Uncompressed BMP is pretty easy too.

author: BravoV
author_rank: Super Contributor
timestamp: January 29, 2018, 05:35:31 pm
content: Quote from: AndyC_772 on January 29, 2018, 05:17:30 pmDon't know it it works though, just an idea to take the photo of the LCD screens, and transform them into vector image instead of raster for easier manipulations, like clean out, resize and etc with minimal deteriorating the original shapes.Potrace, Transforming bitmaps into vector graphics ->http://potrace.sourceforge.net/, its based on GNU General Public License.Example, before and after

author: Benta
author_rank: Super Contributor
timestamp: January 29, 2018, 05:36:52 pm
content: I'd go with the camera, it also gives readers of the manual a better "feel" when it's real world pictures. I've often had problems when sitting with the device and the manual, and the manual pictures are "stylized/idealized".

author: AndyC_772
author_rank: Super Contributor
timestamp: January 29, 2018, 06:12:51 pm
content: The images will be something like this:(Different product entirely, but a similar type of LCD).Previously I've done this by redrawing example screens using GIMP, making use of the original icons and fonts that were used in the development of the UI. They may not be pixel perfect, but that's OK.Ultimately the goal is to save time. If it's quicker to draw an accurate enough mock-up, then that's what I'll do. Or, if it's easier to dump out the contents of the frame buffer via a debugger and convert them, that's OK too.

author: HwAoRrDk
author_rank: Super Contributor
timestamp: January 29, 2018, 06:20:18 pm
content: I know Paint Shop Pro had an option to import raw binary data to create an image from. Or, at least it did have - I haven't used it for many years. I think version 6 was the last one I used, but can't remember if it still had that feature then. Pretty sure version 4.12 had it.You can download old versions from here:http://www.oldversion.com/windows/paint-shop-pro/

author: metrologist
author_rank: Super Contributor
timestamp: January 29, 2018, 06:50:52 pm
content: I would draw those screens using Illustrator, or Inkscape.

author: mariush
author_rank: Super Contributor
timestamp: January 29, 2018, 06:55:40 pm
content: Put the LCD flat on a scanner (maybe cover it with a blank sheet of paper if needed) OR take a picture with some macro lens directly from aboveThen convert the image to icons and digits using SVG or some vector art ?

author: ataradov
author_rank: Super Contributor
timestamp: January 29, 2018, 06:58:58 pm
content: I don't understand why everyone makes it so complicated? If dumping the screen memory is an option, why there is even a discussion? The whole process is easily automated and consistent.

author: james_s
author_rank: Super Contributor
timestamp: January 29, 2018, 07:22:15 pm
content: While dumping it sounds easy enough, I agree with the comment about just using a camera. It's simple and straightforward, and provides an accurate example of what the screen looks like. I'd say try that first and only if the results turn out to be inadequate go with dumping the raw data. I've found I can take some rather impressive closeup photos with the camera on my phone, but I've also used digital cameras that were hopeless at it.

author: AndyC_772
author_rank: Super Contributor
timestamp: January 29, 2018, 07:24:27 pm
content: Quote from: ataradov on January 29, 2018, 06:58:58 pmBecause converting the raw data from the LCD frame buffer into a usable format may not be as simple, straightforward and rapid as using some other method of producing a set of illustrations.

author: Benta
author_rank: Super Contributor
timestamp: January 29, 2018, 10:03:16 pm
content: Quote from: ataradov on January 29, 2018, 06:58:58 pmBecause it's a user manual. It's not just about displaying what's in the graphics memory.For a user, having the frame around the display, or even some buttons below/above/beside the display itself help when using the device.That's why.

author: Buriedcode
author_rank: Super Contributor
timestamp: January 30, 2018, 01:06:07 am
content: For the few manuals I've done for products that used 128x64 or 320x240, I often designed the GIU in paint anyway, so I just used the original images with example values.But doing a dump, you could either convert to one byte-per-pixel on chip before doing the dump (just means looping through each byte in the graphics memory and knock up a simple app with processing or python to convert this to bitmap.. or as suggested just dump the memory as-is, and do the conversion in your app.Getting the dumps is the easy part - you can have a start condition, and a stop condition.. you know the size (the nice thing about LCD dumps is you can just dump the whole screen which is of course fixed size) and write these to blank files or *bin files. Then its just a case of writing something to read those and spit out a bitmap. Something that processing can do easily, and python.. well never done it but I'm sure it can.I'm unsure why people are talking about photocopiers or photo's... I have seen manuals with actual photo's of the display front, and it looks somewhat cheap. Yes, the customer see's the actual display rather than a representation of one, but a crisp monochrome (possibly inverted) image of what the screen should show is better. In the same way a clear diagram is often better than a photo with red arrows or text put on it (acceptable, but doesn't look great).

author: amyk
author_rank: Super Contributor
timestamp: January 30, 2018, 01:38:09 am
content: Post some more details of your framebuffer format (e.g. width and height), and if I don't get to writing a piece of code that converts it to BMP (it's literally a few minutes worth of work), I'm sure someone else will.

author: David Hess
author_rank: Super Contributor
timestamp: January 30, 2018, 02:51:14 am
content: I have never had any trouble using a camera or flatbed scanner to do this but would have used the image directly from the memory buffer if I could have. The camera or scanner method has the advantage of indicating a real result to the user though. I have seen manuals with doctored results which did not match what was actually on the display.Cleaning up the photographic or scanned result to produce a printable image is trivial.

author: BrianHG
author_rank: Super Contributor
timestamp: January 30, 2018, 03:02:10 am
content: Use FreeBasic, though it helps if you have written some basic code before.In your program, just open a "screenres xsize,ysize,32,0,0"Open "your-graphic-file-data.dat" for binary as 1,While not EOF(1) get #1,data and plot your data on that screen. Wendthen use the 'BSave "filename.bmp",0,xsize*ysize,0' command which saves that window's contents as a standard .bmp bitmap image.End your program.You can then covert that .bmp to a .png to save file space if you like with any paint / photo converter.https://www.freebasic.net/(HINT: Just above, I already wrote 75% of your actual functional code, if you are unable to complete the while loop, or ask how by providing a bit more info, you will need to find another method to freely convert your raw graphic data....)Additional note, if you have a RS232 link to your device, you can OPENCOM port instead and automate screenshot plots to be saved by hotkey in your Basic software anytime you like.

author: Tomorokoshi
author_rank: Super Contributor
timestamp: January 30, 2018, 03:54:41 am
content: I agree, if you have access to the bitstream, either add the conversion in firmware and transfer using a binary format or convert using a utility on the PC.To make it look like the real-world, device, overlay the extracted image over the source image file or rendering of the control panel the LCD is in. This gives both a real-world look, along with a clean, high-contrast, professional-looking rendering using actual data from the screen. Once you have that data transfer and conversion method down you can update quickly.A complicated manual can easily extend to hundreds of screen shots. Take into account also if you need to do this in other languages, units, selection and option modes, etc.

author: AndyC_772
author_rank: Super Contributor
timestamp: January 30, 2018, 11:55:58 am
content: We have a solution...In some instances I'd completely agree that a photograph of a real product is much clearer than any CAD drawing or other 'synthetic' representation.In this case, though, that's not really a major consideration. The manual will talk about icons, menu options and configuration settings, and on that basis I don't think a photograph offers any real benefit.Also, achieving consistency across a set of photos is hard without a proper studio set-up, in which external (variable) light can be well excluded. It becomes doubly hard to achieve if I need to go back at a later date and make changes, which I inevitably will.So, instead I've decided to stick with the idea of extracting and converting the frame buffer. Doing this results in images that are clear, consistent, and repeatable from one session to the next.It turns out that GIMP has the capability to open a raw binary image file, and to parse the contents in a way which can be set manually. One of the formats it supports is RGB, 16 bits per pixel (5/6/5), which is easily generated from the raw frame buffer contents using a nested loop running on the target itself.The resulting data can be transferred straight to the PC's hard disc using the debugger library in CrossWorks, then all I need to do on the PC is open the file and re-save it in a standard format. No PC code is required at all

author: tyrel
author_rank: Contributor
timestamp: January 30, 2018, 12:30:30 pm
content: You could also use the PBM image format : you just have to add a small header before your raw buffer (something like "P4 128 64 ").As simple as it gets.http://netpbm.sourceforge.net/doc/pbm.html

author: amanda1
author_rank: Contributor
timestamp: January 30, 2018, 12:46:17 pm
content: I like the program Altami Studio, everything is simple and clear in it and you can do capturing even in real-time. I downloaded it for free, now it seems to me that nothing has changed

author: BrianHG
author_rank: Super Contributor
timestamp: January 30, 2018, 08:01:56 pm
content: Quote from: AndyC_772 on January 30, 2018, 11:55:58 amYou call all that no code?Anyways, glad you found a solution.

author: AndyC_772
author_rank: Super Contributor
timestamp: January 30, 2018, 10:15:36 pm
content: No code *on the PC*.I can issue a command to the target's own CLI - which it has anyway - which directly results in a loadable file being created on my PC's hard drive. No further processing needed besides loading into GIMP and saving again. I could even just load the file into GIMP, copy it to the clipboard and paste straight into the manual.