Design


Design - a layout tool for LCD displays (and MMB4W)
You need to have your display configured and OPTION GUI CONTROLS set to a suitable number.
Step 1.
 New layout design.
A new tab opens with:
  ' GUI design
 OPTION DEFAULT INTEGER
 DIM move = 10
 DIM ctrl = 1
 DIM maxctrl,n, a = 2, b = 1
 DIM cpos(30,5)
 dim maxX = mm.hres, maxY = mm.vres
 RESTORE position_data
 DO
   INC n
   READ cpos(n,1),cpos(n,2),cpos(n,3),cpos(n,4),cpos(n,5)
 LOOP UNTIL cpos(n,1) = -1 AND cpos(n,2) = -1
 maxctrl = n-1
 CLS
 Txt$ = "Space= next, G= grid, Z= position/size, arrow= change, +-= Text/corner, S= save data"
 'RUN_ONCE
 'comment out the following 2 lines or modify to suit
   maxX = 320
   maxY = 240
 ' place any code needed for the GUI elements here eg string$ assignments
 
 do
'GUI_ELEMENTS
   ' your GUI elements start here


   ' end of your GUI elements
' Control loop
'LOOP_CONTROL

'USER_DATA
' place your resources here. Fonts etc.


There are 3 sections for you to enter data.
'RUN_ONCE is where any variables are setup. Just do enough to make the layout look 'right'.
There are two variables set to the desired display size. If you are testing on a device with the final sizes, these lines can be commented out, 
otherwise they can be changed to suit your display.
'USER_DATA is where any fonts needed for the layout will go.
'GUI_ELEMENTS is the main area of interest.
A window opens with a list of all GUI controls and TEXT thrown in for convenience.
Double click on the desired controls to include them in your code.
To restore the list, enter ? or / where you want to insert a command and press F12.
Some of the parameter fields need to be changed to "real" values. 
The easiest way to configure colours is to double click on the parameter to select the full word and 
right click to activate a popup menu with a colour chooser item. Pick a predefined colour or create your own.
There is no need to remove the square brackets, MMEdit will do that for you.
MMEdit will also replace #ref with a ref number and startX etc with a variable ready for moving the controls around.
If you have a number of similar controls such as buttons all the same colour, setup one then ctrl-D to duplicate the line.
'GUI_ELEMENTS
   ' your GUI elements start here
GUI NUMBERBOX #ref, startX, startY, width, height, FColour, BColour
GUI SWITCH #ref, caption$, startX, startY, width, height, FColour, BColour
TEXT startX, startY, string$ [,alignment$] [, font] [, scale] [, FColour] [, BColour]  
GUI BUTTON #ref, caption$, startX, startY, width, height [, FColour] [,BColour]
   ' end of your GUI elements

Step 2.
Incorporate Layout code. 
This step adds the code need to move the elements around the screen and replaces the parameters that need changing.
   'GUI_ELEMENTS
   ' your GUI elements start here
   GUI BUTTON #1, caption$, cpos(1,1), cpos(1,2), cpos(1,3), cpos(1,4) , RGB(LILAC) ,RGB(BLACK)
   GUI BUTTON #2, "Stop", cpos(2,1), cpos(2,2), cpos(2,3), cpos(2,4) , RGB(WHITE) ,RGB(MYRTLE)
   GUI CHECKBOX #3, "Tick me", cpos(3,1), cpos(3,2) , cpos(3,4) , RGB(GREEN)
   GUI RADIO #4, caption$, cpos(4,1), cpos(4,2), cpos(4,4), RGB(GREEN)
   GUI LED #5, caption$, cpos(5,1), cpos(5,2), cpos(5,4), RGB(RED)
   TEXT cpos(6,1), cpos(6,2), STRING$ ,cm , #2 , cpos(6,5) , RGB(WHITE) , RGB(BLACK)
   TEXT cpos(7,1), cpos(7,2), STRING$ ,cm , #2 , cpos(7,5) , RGB(BLUE) , RGB(YELLOW)
   ' end of your GUI elements
You are now ready to send the code to your device (or MMB4W) and start playing.
Space bar changes the current control
Z toggles between moving the control and changing the size.
+ and - change the size of any text controls.
G changes to grid spacing 1, 5 or 10 pixels. If you prefer a different gris spacing, you can edit the program to suit.
S saves the position data for all elements as DATA statements.
MMB4W saves the data to a file then sends the file to MMEdit. If BAS files area associated with MMEdit, 
the file is opened in anew tab. Otherwise, you will have to open the file manually.
With an attached 'mite the data is displayed in the terminal and you will have to copy and past it into the basic program.
Step 3.
Replace variables with numbers.
After you have copied the new DATA statements and pasted them over the original ones, 
including the last line of -1's, you use the new DATA to replace all the cpos() array variables with integers.
   'GUI_ELEMENTS
   ' your GUI elements start here
   GUI BUTTON #1, caption$, 102, 102, 70, 20 , RGB(LILAC) ,RGB(BLACK)
   GUI BUTTON #2, "Stop", 104, 104, 70, 20 , RGB(WHITE) ,RGB(MYRTLE)
   GUI CHECKBOX #3, "Tick me", 106, 106 , 20 , RGB(GREEN)
   GUI RADIO #4, caption$, 108, 108, 20, RGB(GREEN)
   GUI LED #5, caption$, 110, 110, 20, RGB(RED)
   TEXT 112, 112, STRING$ ,cm , #2 , 1 , RGB(WHITE) , RGB(BLACK)
   TEXT 114, 114, STRING$ ,cm , #2 , 1 , RGB(BLUE) , RGB(YELLOW)
   ' end of your GUI elements

Step 4.
Extract your code.
Here we open a new tab with your GUI statements ready to incorporate into you program.
If at any stage, you feel the urge to add more controls, do so by placing them after the last control and run "Refresh layout code". This can be done after step 2 or step 3.
At various stages during the process, new tabs are opened to protect your masterpiece from destruction but it is advisable to save your own copy.

 

Last edited: 20 May, 2023