What does program design mean in programming

Program design using FLUID -
User menus without programming

> Industrial systems with graphic display
> Industrial systems with Linux
> Program design using FLUID user menus without programming
> FLUID - a design toolkit
> Mini tutorial. Introduction to FLUID
>> FLUID32 WIN32 download
>> Start FLUID
>> Open sample file
>> Your first FLUID project
>> Generate program code
> Your own / new project
>> Create function main
>> Create display window
>> Adjust window size
>> Design applications
> Some more tips
> Another application. outlook
> More information & hyperlinks

Industrial systems with graphic display

Industrial computers / PC terminals today mostly have a graphic display. Information for the user is shown on the display. From a technical point of view: the display contains the graphical user interface / GUI. The user can use this information to decide whether to press any buttons, flee the room or whatever ...

Small text displays, in which perhaps there is space for 4 lines of 16 characters each, are rarely used today. These things are more of a characteristic of older technology. Comprehensive user information cannot be displayed there, rather commands such as PULL IN A PARKING CARD or PAY 5 EUROS NOW.

Graphic displays offer more. There you can present user guidance comprehensively and in a friendly manner. They can show small pictures, information or advertisements. You can use various large fonts, e.g. to highlight particularly important information - and display less important information in a smaller format. Whatever - with graphic displays there are no limits to your imagination when it comes to user menus ...

Industrial systems with Linux operating system

Systems with graphic displays usually contain PC technology with a standard operating system. In industry, Linux is often used here as an embedded variant = embedded Linux. (Embedded Linux is actually "just" a memory-reduced Linux version specially adapted to the target hardware.) The advantages of Linux such as simple / free programming, multiuser, multitasking and great network / IP capabilities are retained. Information on Linux in industrial use here. **

Linux also offers something special, at least for the programmer: Under Linux, the operating system and graphical user interface are separated from each other. The first time you read this sentence you may need to think a little. Under Windows, the actual operating system and the graphic mouse control (the Explorer) are, so to speak, married. Windows without Explorer doesn't work - at least not that easy. Under Linux, the actual operating system and the graphical user interface (GUI = graphical user interface) are, so to speak, separate. Under Linux, the graphical user interface is just another program that is started - or not.

To make the whole thing even more imaginative, there is not only ONE graphical user interface under Linux, but you can choose from a wide range of user interfaces. Depending on what you like best in terms of appearance and operation. In the following, this means for the Linux programmer: he can choose the user interface that is easiest to program. To be honest, this is almost the only criterion for selecting a user interface. Most of the programming systems offered today support a variety of colored buttons, scroll bars and various input and output elements. For the future user, it makes no relevant difference which type of user interface the programming was based on - a red button is always red, regardless of which type of GUI was used ...

Most of the user interfaces offered under Linux use a so-called FRAMEBUFFER as an interface between hardware and software. To put it simply, the framebuffer is a specific memory area. There the software writes something into it - and this is then shown on the display. (The definition is not entirely correct. You can ignore us now. If you want to know the details: please google for "Framebuffer what is that" ...)

As a specialist for small industrial computers, SSV Embedded Systems offers various PC terminals with embedded Linux. Most of these terminals already support the framebuffer with regard to the firmware supplied by the manufacturer (the BIOS), so that the programmer can choose from the wide range of graphic interfaces offered. About possible graphical interfaces see here. **

To make this choice easier, SSV has documented / implemented a number of user interfaces and provides extensive demo programs, examples and tools. Further information on the type of interfaces supported is available on the GUI page directly from the manufacturer SSV. **

One of these supported graphical interfaces is the FLTK graphics toolkit. Website here. ** FLTK offers extensive powerful tools and possibilities to create comprehensive Linux programs in a simple manner. (Alternatively, FLTK is also available for Windows. But with it you would just create Windows programs. These in turn tend not to run on an industrial terminal under Linux ...)

FLUID - a design toolkit

An interesting specialty of FLTK is FLUID. FLUID is a so-called drag & drop wizard to design graphical user menus without having to do your own programming.

In short: With FLUID even a non-programmer can design his own user menu. These are simply "tied up" with the mouse, the necessary program source code is created automatically in the background, so to speak.

In order to get an executable program, this program source code has to be handed over to a programmer of course. This fills the layout design created using FLUID with life - and ultimately creates the software that runs in a PC terminal / industrial PC under Linux. The separation of menu design and programming has the advantage that at least the actual program layout can be implemented in the simplest way, even by non-programmers. The usual discussion between the user and the programmer in many applications ("Please insert a red line here ..." or "This bar there is too thick / too thin ..." is no longer applicable). The one who knows the application best can design the application. In the end, the programmer just makes sure that the program runs.)

When it comes to layout, FLUID offers countless interesting things, called elements. These include various masks, input and output fields, graphically animated signs, switches and scroll bars and much more. The designer uses these tools to create his program in the way that individual displays will later be shown in a PC terminal.

After this design has been completed, the designer passes his design on to the programmer. He still has to revise the program code = fill the fields with life, program the program jumps and then compile. The program is then loaded into a PC terminal and executed there.

FLTK and FLUID can be used as Linux or Windows versions. The following combination is also interesting for program design for PC programs from Linux terminals: The designer uses a FLUID.EXE under Windows to design the program layout. The programmer uses FLTK under Linux in order to later translate / compile the program for a Linux terminal.

The FLUID design toolkit is available as a PC program under Windows: FLUID.EXE. You can copy this program to your PC and start it. Installation is not necessary. Then you open a function MAIN, define a new window / window in the pixel size required by the PC terminal and then begin with the design of the content.

If one window is not enough, you can copy the window and create additional windows. The program automatically creates program code from the drag & drop steps of the user. This is saved at the end and passed on to the programming for compilation. (If the programmer and designer are the same person, you can of course translate the program immediately. However, experience has shown that the graphical user interface looks more appealing if you let other people near to design it.)

Mini Tutorial: Introduction to FLUID

Experience has shown that nobody reads this paragraph. People read the headline - and then start (if at all) with the step-by-step instructions. In the event that you are reading this anyway: the following program was designed by a colleague from our back office / marketing department! The lady is NOT a programmer. She simply took our FLUID manual and then spent a few hours familiarizing herself with FLUID and designing this little program. At the same time, she pointed out weaknesses in our instructions. We have revised our instructions and used the program you created as the basis for this tutorial.

The first program steps:

(1) Download FLUID as WIN32 version and demos
A FLUID.EXE program version for WINDOWS / WIN32 can be downloaded from the download area. See the beginning of this page. We have also included a few demos there, which are the easiest way to get started. The whole thing was packed into a ZIP file. You can simply download the ZIP file and unzip it into a directory. An extensive, time-consuming installation is not necessary.
(2) Start FLUID.EXE
Start FLUID. You will now see two windows: on the left the programming window, on the right a tool window. The programming window is still empty.In the tool window you will find tons of elements, icons and widgets that you can use later for program design. (The tool window has a tooltip help: simply move the mouse pointer over an element and wait until the explanatory text is displayed.)

(2) Load sample file. TEST2
Open one of our examples. In the present example TEST2. Use FILE. OPEN and then enter test2. Your first project will then open.

.(3) Your first FLUID project
You are now seeing your first FLUID project that we have prepared for you. It consists of the programming window, which now contains some text, the tool window and a display in the middle of the picture (yellow, with SSV logo). This display has a size of 320 x 240 pixels, so it is suitable for display in a PC terminal with a QVGA display. The display already contains a number of elements; it is, so to speak, a small display layout that was created using FLUID and which you can now change as you wish.

Above you will find an SSV logo (must be in the same directory as a GIF file), an underscore and a clock. The underscore is also a GIF file. The clock is an element made of FLUID.

In the left margin you will find an example of the assignment of the four S keys as they exist, for example, on the PC Terminal TRM / 920 from SSV Embedded Systems. We have labeled these keys with different functions and selected different text styles to present you with a few options.

In the lower margin you will find the function keys F1 - F5 as BUTTONS, as they also exist on the PC terminal TRM / 920. We have labeled these keys with F1 to F5, which would certainly be nonsensical. You can now double-click a button. Then the object window for the BUTTON element opens and you can set the button and its labeling individually.

Label changes e.g. the text in the button. Position X / Y moves the button in the window (you can do this better with the mouse directly in the window) and Width / Height determines the size of the button.

You can edit any element in the window by double-clicking it. The object window for the element always opens and you can design the element as you wish.

If you want to add new elements, use either the upper tool window or the NEW ... function or the right mouse button in the display window. You can then select the new element, position it anywhere in the display and edit it as required by double-clicking in the object window.

If you want to delete (cut) elements, select the element with a single click (indicated by a thin red frame) and then go to the EDIT window. CUT. About EDIT. PASTE you can paste a cut element back into the display.

If you want to copy an entire display (i.e. you need another display), please proceed in the same way. Select the entire window by clicking in the window, then press EDIT. COPY and later EDIT. PASTE. This gives you a second window or a second element that you can design as you like.

By the way: As an alternative to clicking with the mouse, you can also mark elements by clicking on the name in the programming window (on the left in the picture). You can also use it to open the object window, delete or copy the element. In large projects in particular, it is sometimes helpful to work with the names in the programming window. If you have many open displays you can sometimes quickly lose track of things ...

Now it's up to you: play around with the design. This little tutorial cannot give you complete instructions - but you have now learned the basics of how to design a user menu. You should play around with FLUID at first. Typically, it takes about 3 hours for the first time to pull together a first display using FLUID. If you want to create the same display again, you can easily do it in 30 minutes. But as it always is: At the beginning you should act out your play instinct and also allow for a few failures. Otherwise it is vinegar with the learning effect. And have fun designing ...

(7) Generate program code
As is usual with a toolkit: in the end you have to generate program code. FLUID does that for you. Via FILE. WRITE CODE you generate the C source code of your graphical user interface. You can then give this C source code to your programmer, who will use it to create a finished program for the PC terminal. Your programmer will also have to integrate one or the other program logic, e.g. fill the program flow with life. Please do not underestimate the task that still needs to be accomplished - but at least you can easily complete the design in this way.

An own project

You can try other included projects and get a feel for FLUID. If you wish, you can also create and edit your own project. That's how it is done:



In this case, your first step will be to create the MAIN () function. MAIN is the basic function of every C / C ++ program. Nothing works without MAIN. So start FLUID, then menu: NEW. CODE. Select FUNCTION / METHOD. For name (args): (blank for main ()) delete the content. In other words: To get the MAIN function, this input field must be EMPTY!


The "main ()" function, which is important for later programming, was created and is available in the programming window. The first display window can now be created. Menu: NEW. GROUP. Select WINDOW. A new window is opening up. THIS IS THE WINDOW YOU WILL SEE IN THE PC TERMINAL!

Unfortunately, this window is a bit small by default. Our version uses a window size of 104 x 100 pixels as the standard setting. You now have to adjust the window according to the size of your PC terminal! Double-click in the new window, select the GUI item and enter the window size accordingly - see also the following step!



Change the pixel size of the window to match the display of the PC terminal, e.g. 320 x 240 (for QVGA) or 640 x 480 (for VGA) terminals. A little hint: Entering the window size for the first time seems a bit "wobbly" to us. The quickest way to adjust the project is to save the project now, exit FLUID, then go to the project file using the text editor and then manually change the last two values ​​in the FL_WINDOW function in the XYWH line. W and H stand for width and height, so just enter the pixel size here. (The first two values ​​x and y stand for the position on your screen. You can ignore them!) Then start FLUID again, open the project and your first empty display is ready!


You should now have a surface similar to the one above. On the left is the programming window. All functions are automatically entered there, which you can now insert in the display window using FLUID. At the top there is a small toolbar from which you can select elements and functions - alternatively you can also use the right mouse button in the display window to select or use the NEW command to display a list of the possible elements. (Here: code, group, buttons, valuators, text, enus, browsers, other.) On the right there is a - in the above example: empty - display window in which you can insert, position and label your desired elements.

That was it! You can now design your program layout using FLUID.

Some more tips to top it off:

(A) If you want to create additional displays, i.e. your program has more than one display: Mark the entire display (red frame around the entire display), go to the menu: EDIT. COPY and then EDIT. PASTE. This creates a new display based on the copy. You then only have to enter the changed elements in the new display.

(B) It makes sense if you give the individual displays reasonably intelligent names, e.g. LCD1 main menu, LCD2 configuration menu, LCD3 ... etc. Assigning a name is simple: double-clicking in the window opens the window configuration menu. Go to the GUI tab and enter a meaningful text under LABEL.

(C) If you want to label labels, buttons, etc.: Double-clicking on the respective element opens the configuration menu. Go to the GUI tab and enter the desired text under LABEL.

(D) If you lose the overview: The FLUID programming window always remains open on the screen. The function name is entered there for each element and for each window. The first double click on the element in the programming window shows the element in the display. Another double click opens the configuration menu for the element.

(E) A tip on the design: The whole thing should later become a program and be loaded into a terminal. Usually an embedded Linux version is used here (embedded Linux = memory-reduced Linux). Before you start designing "wildly", please consider: Every font, every character size, every attribute takes up storage space in the target system. The required font, size and attributes are loaded into the target system as a complete character set. If you use too many fonts, sizes, and attributes, you will use up a lot of storage space later. This is technically possible (via mass storage orexternal storage medium), but your programmer will not be happy. (Neither does your in-house controller: the system becomes more expensive.) Discuss the use of possible fonts, sizes and attributes with your programmer beforehand - or, if you do not want / want / can: use has proven to be good experience result from 4-6 fonts within one application, e.g. HELVETICA 12 NORMAL, HELVETICA 12 BOLD, HELVETICA 8 NORMAL, HELVETIC 14 BOLD. (That would be four character sets now.)

Another application - outlook

So now that was a pretty simple guide on how to do it. Sounds more complicated than it is. If you would like more examples: just give TEST-DOKU a try. This is an example with three "almost empty" computer displays for a PC terminal with a QVGA display (320x240 pixels). We also designed the program for an SSV Terminal TRM / 920. You only need to start FLUID, open the project and then start designing the layout of the displays. Of course, you can also add additional displays (COPY and PASTE) or delete unnecessary displays.

When you have unpacked the download and started FLUID with the demo application, you should see a screen on your Windows PC that looks something like this:

On the left side you will again find the familiar programming window. This contains a number of elements that we have dragged and dropped into the user menu via mouse and drag & drop. Overall, we have provided three user menus for the demo program. These are named LCD1, LCD2-FAHRZUG, LCD3-WAAGE. Each user menu has different elements. LCD1 is the main menu, where the user can choose what to do. LCD VEHICLE contains the entries of certain vehicle data. LCD SCALE takes the weight from a connected scale and shows it on the display. So that the scales do not constantly supply incorrect values, there is also a key / button that triggers the weighing process.

We completed the layout of the menus in a very short time without programming a line. After we had finished with the layout, the source code (via FILE. WRITE CODE) of the program was created and given to our programmer. This then had to invest a few hours of work and "fill the program with life" with regard to the jump and storage logic. He then translated the entire software using a compiler and loaded it into an industrial terminal from SSV.

To be fair, it should be mentioned: It is a demo program. We have simply lined up a few elements. In practice, you would now have to check whether a rotating horn switch or a changeable signal generator on the desired terminal makes sense at all. Depending on whether you want to use a device with a keyboard and / or touch screen, you should select your elements accordingly. Fortunately, with such demo programs we don't have to worry about "such little things" ... Oh, and by the way: SSV Embedded Systems offers devices with a keyboard and / or touch screen anyway.

By the way, if you do the program design yourself, don't assume that your programmer will love you. In particular, you should heed our tip on fonts. The best thing to do is to discuss the whole project with your programmer beforehand, after all, you do the design work for him - and that is usually a part of the work that programmers love too. You now "reduce" your programmer to translating the program code you have designed - this is a job that programmers, experience has shown, love less.

Some more links on the same topic

We deliberately kept our introduction short and concentrated on the fact that you would like to design user menus for an industrial terminal. The internet is full of more information on FLTK and FLUID - most of it better than ours. Here are a few more useful links:

A much better tutorial for FLUID and FLTK **

An article in Linuxmagazin about FLTK **

FLUID.EXE download

Download FLUID.EXE and a sample application
Here we have packed a FLUID.EXE PC / Windows version and a small example into a ZIP archive for you. Simply download, unzip to a directory and start. A complex installation is not necessary.

And as a new idea:
CoLinux - a Linux development environment under Windows

Text and design: Hans-Jochen Walter
Text status: November 2005
** External links.