Embedded system display layout design - Page 1
Forum section: electronics / general

author: CJay
author_rank: Super Contributor
timestamp: January 11, 2021, 11:44:59 am
content: Short:I'm wondering what people are using to design display layouts for embedded systems?Long:I'm working on a hobby radio transceiver project with a small-ish TFT display, I know what I want it to display, mode, band, frequency, S-Meter, a few indicators etc. but only have a very rough idea of a screen layout.It would be really useful to me to be able to quickly design a few layouts.What I think I'm looking for is a GUI designer, something I can specify a screen size and have 'elements' that I can drag and drop into the available screen space, kind of like electronic graph paper.I'm purposely not mentioning target system architecture because really not bothered about the application generating code or having anything 'behind' it, all I need is the ability to create the visual layout so I can work out what 'feels' right.

author: DC1MC
author_rank: Super Contributor
timestamp: January 11, 2021, 11:52:36 am
content: QT Designer?https://www.qt.io/product/development-tools

author: Berni
author_rank: Super Contributor
timestamp: January 11, 2021, 12:41:30 pm
content: For these sort of rough layout mockup tasks most vector drawing tools are nice. I use CorelDraw, but anythyng else works Adobe Ilustrator, Inkscrape...etcOnce you learn enough functionality they become very fast at throwing together things. I used them to layout things inside project enclosures, layout furniture inside a room, layout for piping, all sorts of quick block diagrams, visualizations for easier understanding of certain computing algorithms etc. Sometimes i still just sketch stuff on a piece of paper, but for cases where i know i will want to move things around and evolve the drawing i do it in Corel since i can easily copy paste and move things about. The result is also prettier looking, making it much more presentable to someone else if this is part of some professional collaboration.One could even do PCB layout in it. You probably would not want to since even pretty crappy PCB tools are still better, but if you hypothetically didn't have a PCB tool you could get the job done in it.

author: Nominal Animal
author_rank: Super Contributor
timestamp: January 11, 2021, 01:38:59 pm
content: I like to useGIMP, GNU Image Manipulation Program. It is free and available for basically all OSes.The initial idea stage is however on pen and paper, just doodling out possibilities until I have an idea I can try out in practice.I start with an image the exact same size (in pixels) as the target display. I use a separate layer for each feature. Typically, I start with the text/numbers needed, and see how large I can make them. For numbers, I prefer a fixed-size font, so I usually draw a series of boxes (the size of the font), with desired spacing between boxes. Use a free font, so you can use it in the final device.As soon as I have the display, I write a small Arduino firmware on a microcontroller with a native USB interface (I useTeensies), and a simple C program to load unpacked fullscreen images to the display. As I use Linux, I normally use an inotifywait script to wait for CLOSE_WRITE events in the target directory, so that any new file saved to that directory gets converted to a suitable NetPBM format (which is trivial to read without any libraries by the simple C program), and uploaded to the display. Nothing beats live preview.That way, all I need to do in GIMP to see actual changes is to re-export (Ctrl+E) the image (in NetPBM PPM binary format) to the special directory, and the script will convert, quantize, and upload it to the display, in a fraction of a second. (I prefer NetPBM's pnmquant results over GIMP indexed color quantizing, but have written my own too.)In may ways, this is "pixel art", as this is working at pixel-perfect representation of the display state (albeit with full color support), so perhaps much more lower level than actual designers – me for sure neither an EE or a graphics/UX designer! –, but it is rapid (little work to get visible results, easy changes, easy exploration of ideas), and works for me.I have discovered things like if you have a display button to be pushed with a finger, any in-button animation is useless, because it is hidden by the finger; something like a wave outwards is much more visible. This sort of stuff becomes obvious when playing with the real-life target display.

author: Jeroen3
author_rank: Super Contributor
timestamp: January 11, 2021, 02:00:53 pm
content: You can use WxWidgets or Qt Framework (widgets or qml), or run something web-app style and use one of the many javascript things.

author: ajb
author_rank: Super Contributor
timestamp: January 14, 2021, 06:56:49 pm
content: You could start as simple as pencil and paper, personally I often find that to be preferable for just laying out basic ideas, but YMMV. For more detailed mockups, a vector image drawing program that shows your work rendered into pixels works well. Vector-based tools make it much easier to tweak and reuse elements, so are generally easier for this than raster image editing tools. CorelDraw is great for this, as Berni mentioned. Vector drawing programs that are not image-oriented (like CAD software) can work as well, but something like Corel gives you a much better idea of how things will look at the target display resolution without having to export to an image first. In either case, it's a good idea to do some testing on the target hardware for things like font styles and sizes and line widths as these may look very different from how they're rendered on a PC screen--particularly if you're rendering fonts as single-bit monochrome.

author: CJay
author_rank: Super Contributor
timestamp: January 14, 2021, 07:53:39 pm
content: Thanks, QT is huge, I have dabbled with it before (and failed miserably) to try and compile Fritzing (it's on the to do list but pretty low) I've downloaded it again but I think it may be too much for this project.I like the idea of using GIMP, partly because I know it reasonably well. The layers idea hadn't occurred to me and it sounds like it'd be really useful, if I flatten the image to a single layer it'd be a doddle to display it on the target hardware to see how it looks, once I've got it to look nice I can easily code it.I've got a few rough ideas on paper already, the discovery of printable graph paper in PDF format has been an absolute godsend for all sorts of tasks and it does help with the layout.WXWidgets looks useful for other projects.

author: nctnico
author_rank: Super Contributor
timestamp: January 14, 2021, 10:46:21 pm
content: Quote from: Berni on January 11, 2021, 12:41:30 pmOr just Powerpoint or Visio. As long as you can move blocks and text around.

author: Nominal Animal
author_rank: Super Contributor
timestamp: January 15, 2021, 01:11:56 pm
content: Quote from: CJay on January 14, 2021, 07:53:39 pmThat's what I do. No need to flatten before export, either; the visible layers get combined to the export automagically, content from invisible layers is not included in the exported image. After the very first export, Ctrl+E (File > Export) re-exports over the same file using the same settings, without any dialogs. Just remember to save the original (.xcf file) too.If you save as .ppm and choose Text, GIMP will save as NetPBM P3 format, as described on the WikipediaNetpbmpage, but the files are huge. I prefer the .ppm Binary format (NetPBM P6), as I have a helper function that reads each header field (character by character, using fgetc()), and the binary data is just triplets of unsigned chars (red, green, blue, in that order).If you want to go this route, I have shown reliable examplepnm_type(),pnm_value(), andpnm_newline()functions for consuming NetPBM binary format imageshere.On Linux, if my upload-to-display program or script is called~/bin/upload-to-displayfilename, all I need to cd to the directory I will use for exporting the .ppm display image, and runbash -c 'inotifywait -q -m -e close_write . | while read dir action file ; do [ "${file%.ppm}" != "$file" ] && ~/bin/upload-to-display "$file" ; done'and whenever I export a file ending with .ppm to that directory, the program or script will be called with that file as a parameter. (The trigger is the close after having the file open for writing, so no delay is necessary; the file should be complete at that point.)Of course, this is just the "final" part of the design; me personally preferring doodling to paper to discover layouts and ideas that I'll test in real life. I'm sure you can see why having a single Ctrl+E keypress from GIMP to see the current design on the actual display makes things much more fun!