 Notice. New forum software under development. It's going to miss a few functions and look a bit ugly for a while, but I'm working on it full time now as the old forum was too unstable. Couple days, all good. If you notice any issues, please contact me. |
Forum Index : Microcontroller and PC projects : LCD design aid
| Author | Message | ||||
PhilP Newbie  Joined: 25/01/2017 Location: United KingdomPosts: 31 |
I feel a bit of a lightweight asking this question. Many of my project are based around 2.8 inch 240 x 320 LCD displays showing a lot of textual information. I have tried designing the layout of the screen on graph paper but it is very tedious and I usually give up. In the end I mess about with the position by trial and error taking into account the relative position of items in different font sizes. This is quite time consuming and tedious. Is there any software to lay out a screen or is there a more obvious way of doing this? Thanks Phil |
||||
Quazee137 Guru  Joined: 07/08/2016 Location: United StatesPosts: 572 |
may sound funny but I use a spreadsheet sheet one main work space sheet two,three ect.. objects to place on sheet one only one object per object sheet keeps them uncluttered. set row height and column width so you have squares. to print the work out I take a screen only of the work area at times I will import to Kolorpaint to add circles and triangles. Quazee137 work in times 4 and higher  Edited 2023-05-12 21:10 by Quazee137 |
||||
Mixtel90 Guru Joined: 05/10/2019 Location: United KingdomPosts: 6798 |
Many, many years ago I printed out a rectangular grid for the TRS-80 model 1 screen, with column & row numbers. I stuck it onto cardboard then covered it in two layers of the clear plastic self-adhesive film used for book covering. I then wrote on it using "wipe-off" markers. It worked quite well for a number of years. The problem I think would be that, ideally, you need a screen bigger than the one that you are designing for to work with. You will need to move a cursor round and, probably, have at least an extra line to enter text strings. I wouldn't like to attempt it on an LCD screen, but designing on, say, 640x480 VGA mode 1 wouldn't make it very transferable to a VGA display, I don't think. It might be worth a try, but using manual conversion from X and Y co-ordinates to the LCD program. Mick Zilog Inside! nascom.info for Nascom & Gemini Preliminary MMBasic docs & my PCB designs |
||||
| lizby Guru Joined: 17/05/2016 Location: United StatesPosts: 3150 |
I like to lay things out in rows and columns (of varying widths) and then position items as fractions of mm.vres and mm.hres. For instance, with six equal rows and one column starting at zero, another centered at mm.hres/2, and a third right justified at mm.hres-1, the following code would produce this:  Dim string ch Dim integer i,j,k,fnt,iRows=6,iCols=3 Dim integer b%(15)=(RGB(red), RGB(green), RGB(blue),0,0,0,0,0,0,0,0,0,0,0,0,0) b%(3)=RGB(Yellow): b%(4)=RGB(cyan) b%(5)=RGB(gold): b%(6)=RGB(magenta): b%(7)=RGB(brown): b%(8)=RGB(pink) b%(9)=RGB(salmon): b%(10)=RGB(orange):b%(11)=RGB(grey):b%(12)=RGB(white) b%(13)=RGB(lightgrey): b%(14)=RGB(beige): b%(15)=0 ' black fnt=4 ch="A" CLS For i=0 To iRows-1 Text 0,i*(MM.VRes/6),ch+Str$(i)+" ",,fnt,3,b%(2),b%(j Mod 16) Inc j Text MM.HRes/2,i*(MM.VRes/6),Chr$(Asc(ch)+1)+Str$(i)+" ",C,fnt,3,0,b%(j Mod 16) Inc j Text MM.HRes-1,i*(MM.VRes/6),Chr$(Asc(ch)+2)+Str$(i)+" ",R,fnt,3,0,b%(j Mod 16) Inc j Next i This is on an ILI9488 with 480x320 resolution, but should work on an ILI9341 with 320x240 (maybe with change of scaling) or VGA or MMB4W. Or like this:  ~ Edited 2023-05-12 23:35 by lizby PicoMite, Armmite F4, SensorKits, MMBasic Hardware, Games, etc. on fruitoftheshed |
||||
IanRogers Senior Member  Joined: 09/12/2022 Location: United KingdomPosts: 151 |
I normally create a picture in windows edit.. Use a font that is close to the size I use. Then I cam just watch the mouse coordinates that way I can position everything where I need to. Edited 2023-05-12 23:42 by IanRogers I'd give my left arm to be ambidextrous |
||||
| lizby Guru Joined: 17/05/2016 Location: United StatesPosts: 3150 |
What is "windows edit"? PicoMite, Armmite F4, SensorKits, MMBasic Hardware, Games, etc. on fruitoftheshed |
||||
NPHighview Senior Member Joined: 02/09/2020 Location: United StatesPosts: 200 |
Powerpoint for me - I specify a layout (in inches, sorry) that corresponds to the screen dimensions (4.8"x3.2" for the 3.5" WaveShare Pico Eval Board LCD), then use the guides, rulers, size, and grouping tools to position items. Fixed (non-kerned, non-proportional) fonts come from the font selection drop-down, and I choose a font size that corresponds to the MMBasic fonts. I zoom the layout to fill my screen, and have at it. The guides show me where things are on the screen.  Live in the Future. It's Just Starting Now! |
||||
| PhilP Newbie Joined: 25/01/2017 Location: United KingdomPosts: 31 |
Thanks everyone for useful and interesting ideas. I am particularly keen on getting the X, Y co-ordinates so I will try drawing the layout in Powerpoint and use the mouse cursor position to convert to LCD positions. Phil |
||||
| IanRogers Senior Member Joined: 09/12/2022 Location: United KingdomPosts: 151 |
Sorry. Windows Paint! right clicking is always Edit. I keep telling everyone. I'm getting old. I'd give my left arm to be ambidextrous |
||||
| Andrew_G Guru Joined: 18/10/2016 Location: AustraliaPosts: 847 |
This may be a question for TassyJim? Jim's FontTweak can already display a 480x320 grid that allows you to turn cells on/off. Can it be modified to: - have column/row IDs (ie x / y) - display text as per MMBasic fonts - maybe even draw a line/circle etc. - save the display in a way that provides meaningful input to MMBasic ??? Jim has more than enough on at present (especially with good weather) but it is just a thought? In the absence of such a tool I get by with: - setting screens up as small (ie quick to load) programs until they are ready to be pasted into the main code - knowing the width/height of each font (in the manual) - in the TEXT etc commands; use temporary variables so a small change can be applied to multiple TEXTs etc. - using the Console command mode to trial location options. Cheers, Andrew |
||||
TassyJim Guru Joined: 07/08/2011 Location: AustraliaPosts: 6101 |
It is something that I have thought about but not with a lot of enthusiasm. I am not a GUI user/create so not the best to ask but I would look at MMB4W. You should be able to create elements and save them as sprites. This lets you move them around easily. If sprites don't work, just redraw as you move elements. Either work at 1-1 scale or for those of us with tired eyes, use the built in commands to create the elements at 1-1 in a corner of the window. At a regular interval, copy and paste them to a 'magnifier' area at 1-2 or 1-4 scale. A simple menu to select the element and arrow keys to move it. Jim VK7JH MMedit MMBasic Help |
||||
| TassyJim Guru Joined: 07/08/2011 Location: AustraliaPosts: 6101 |
It would look something like this with MMB4W: ' OPTION DEFAULT INTEGER MODE 16 magstart = 400 zoom = 3 DIM cpos(20,5) ctrl = 2 cpos(1,1) = 100 cpos(1,2) = 50 cpos(2,1) = 100 cpos(2,2) = 100 cpos(2,3) = 150 cpos(2,4) = 40 cpos(3,1) = 100 cpos(3,2) = 150 cpos(3,3) = 50 cpos(3,4) = 25 DO GUI CAPTION #1, "Speed (rpm)", cpos(1,1), cpos(1,2) GUI NUMBERBOX #2, cpos(2,1), cpos(2,2), cpos(2,3), cpos(2,4),RGB(WHITE),RGB(BLACK) CTRLVAL(#2) = 100 GUI BUTTON #3, "RUN", cpos(3,1), cpos(3,2), cpos(3,3), cpos(3,4), 0, RGB(RED) FOR h = 1 TO 320*zoom FOR v = 1 TO 240*zoom col = PIXEL(h\zoom+1,v\zoom+1) PIXEL h+magstart,v, col NEXT v NEXT h DO k$ = INKEY$ LOOP UNTIL k$<>"" SELECT CASE k$ CASE CHR$(128) ' up INC cpos(ctrl,2), -5 CASE CHR$(129) ' down INC cpos(ctrl,2) , 5 CASE CHR$(130) ' left INC cpos(ctrl,1), -5 CASE CHR$(131) ' right INC cpos(ctrl,1) , 5 CASE CHR$(32) INC ctrl IF ctrl > 3 THEN ctrl = 1 ENDIF END SELECT GUI DELETE ALL LOOP space bar to change controls. arrow keys to move controls. That's all folk... Jim VK7JH MMedit MMBasic Help |
||||
| TassyJim Guru Joined: 07/08/2011 Location: AustraliaPosts: 6101 |
I have been sucked in. Silly me... Something workable in a few days but this should run on any LCD or MMB4W Don't have a VGA to test. It will be integrated into MMEdit This is missing most of the initial setup code. ' GUI design ' TassyJim May 2023 OPTION DEFAULT INTEGER DIM move = 1 DIM ctrl = 1 DIM grid = 5 DIM n, a = 2, b = 1 DIM cpos(20,4) RESTORE position_data DO INC n READ cpos(n,1),cpos(n,2),cpos(n,3),cpos(n,4) LOOP UNTIL cpos(n,1) = -1 CLS printit "Space = next, G = grid, Z = zoom size, S = save data" DO ' your GUI elements start here grid = 5 maxctrl = 3 GUI CAPTION #1, "Speed (rpm)", cpos(1,1), cpos(1,2) GUI NUMBERBOX #2, cpos(2,1), cpos(2,2), cpos(2,3), cpos(2,4),RGB(WHITE),RGB(BLACK) GUI BUTTON #3, "RUN", cpos(3,1), cpos(3,2), cpos(3,3), cpos(3,4), 0, RGB(RED) CTRLVAL(#2) = 100 ' end of your GUI elements DO k$ = INKEY$ LOOP UNTIL k$<>"" SELECT CASE k$ CASE "g","G" ' toggle grid move = grid + 1 - move printit "Step size "+STR$(move) CASE CHR$(128) ' up INC cpos(ctrl,a), -move cpos(ctrl,a) = (cpos(ctrl,a)\move)*move IF cpos(ctrl,a) <4 AND b = 3 THEN cpos(ctrl,a) = 4 IF cpos(ctrl,a) <0 AND b = 1 THEN cpos(ctrl,a) = 0 CASE CHR$(129) ' down INC cpos(ctrl,a) , move cpos(ctrl,a) = (cpos(ctrl,a)\move)*move CASE CHR$(130) ' left INC cpos(ctrl,b), -move cpos(ctrl,b) = (cpos(ctrl,b)\move)*move IF cpos(ctrl,b) <4 AND b = 3 THEN cpos(ctrl,b) = 4 IF cpos(ctrl,b) <0 AND b = 1 THEN cpos(ctrl,b) = 0 CASE CHR$(131) ' right INC cpos(ctrl,b) , move cpos(ctrl,b) = (cpos(ctrl,b)\move)*move CASE "z","Z" b = 4-b ' b = 1 or 3 a = 6-a ' a = 2 or 4 IF b = 1 THEN printit "Location" ELSE printit "Size" ENDIF CASE CHR$(32) INC ctrl IF ctrl > maxctrl THEN ctrl = 1 ENDIF printit "Control "+STR$(ctrl) CASE "s","S" ' save position data FOR n = 1 TO maxctrl printit "DATA "+STR$(cpos(n,1))+","+STR$(cpos(n,2))+","+STR$(cpos(n,3))+","+STR$(cpos(n,4)) NEXT n END SELECT GUI DELETE ALL LOOP SUB printit txt$ IF MM.DEVICE$ = "MMBasic for Windows" THEN TEXT 10, MM.VRES - 30, txt$+SPACE$(50) ELSE PRINT txt$ ENDIF END SUB position_data: DATA 65,30,0,0 DATA 65,75,65,30 DATA 90,115,75,40 DATA 150,100,100,50 DATA 150,100,100,50 DATA 150,100,100,50 DATA 150,100,100,50 DATA 150,100,100,50 DATA 150,100,100,50 DATA 150,100,100,50 DATA -1,-1,-1,-1 Arrows to move or resize, G to toggle slow or aligned to grid, space to change control z to toggle move or resize. s to save (not doing much yet) Jim VK7JH MMedit MMBasic Help |
||||
| Andrew_G Guru Joined: 18/10/2016 Location: AustraliaPosts: 847 |
Hi Jim, Not at the expense of other "stuff"! I won't get a chance to play for a day or so (more decisions re the build - spent yesterday driving around Melbourne looking at render). Many thanks, Andrew |
||||
| TassyJim Guru Joined: 07/08/2011 Location: AustraliaPosts: 6101 |
Making progress. All the steps seem to be working. I 'just' need to do the instructions. ' GUI design OPTION DEFAULT INTEGER DIM move = 1 DIM ctrl = 1 DIM maxctrl,n, a = 2, b = 1 DIM cpos(20,5) 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, +- = size text, S = save data" 'RUN_ONCE ' place any code needed for the GUI elements here eg string$ assignments STRING$ = " Hello World" caption$ = "Start" DO '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 ' Control loop 'LOOP_CONTROL DO printit txt$ = "" DO k$ = INKEY$ LOOP UNTIL k$<>"" redrawit = 1 SELECT CASE k$ CASE "g","G" ' toggle grid 'move = grid + 1 - move IF move = 1 THEN : move = 5 ELSEIF move = 5 THEN : move = 10 ELSE : move = 1 : ENDIF redrawit = 0 CASE CHR$(128) ' up INC cpos(ctrl,a), -move cpos(ctrl,a) = (cpos(ctrl,a)\move)*move CASE CHR$(129) ' down INC cpos(ctrl,a) , move cpos(ctrl,a) = (cpos(ctrl,a)\move)*move CASE CHR$(130) ' left INC cpos(ctrl,b), -move cpos(ctrl,b) = (cpos(ctrl,b)\move)*move CASE CHR$(131) ' right INC cpos(ctrl,b) , move cpos(ctrl,b) = (cpos(ctrl,b)\move)*move CASE "+" INC cpos(ctrl,5), 1 IF cpos(ctrl,5)>10 THEN cpos(ctrl,5)=10 CASE "-" INC cpos(ctrl,5), -1 IF cpos(ctrl,5)<1 THEN cpos(ctrl,5)=1 CASE "z","Z" b = 4-b ' b = 1 or 3 a = 6-a ' a = 2 or 4 redrawit = 0 CASE CHR$(32) INC ctrl IF ctrl > maxctrl THEN ctrl = 1 ENDIF ' Txt$ = "Control "+str$(ctrl) redrawit = 0 CASE "s","S" ' save position data IF MM.DEVICE$ = "MMBasic for Windows" THEN OPEN "loopcontrol.bas" FOR output AS #1 PRINT #1, "position_data:" FOR n = 1 TO maxctrl PRINT #1, "DATA "+STR$(cpos(n,1))+","+STR$(cpos(n,2))+","+STR$(cpos(n,3))+","+STR$(cpos(n,4))+","+STR$(cpos(n,5)) IF cpos(n,1) = -1 THEN EXIT FOR NEXT n PRINT #1,"DATA -1, -1, -1, -1, -1" CLOSE #1 txt$ = MM.INFO$(DIRECTORY)+"loopcontrol.bas" SYSTEM txt$ ELSE PRINT "position_data:" FOR n = 1 TO maxctrl PRINT "DATA "+STR$(cpos(n,1))+","+STR$(cpos(n,2))+","+STR$(cpos(n,3))+","+STR$(cpos(n,4))+","+STR$(cpos(n,5)) NEXT n PRINT "DATA -1, -1, -1, -1, -1" ENDIF redrawit = 0 END SELECT IF cpos(ctrl,b) <4 AND b = 3 THEN cpos(ctrl,b) = 4 IF cpos(ctrl,b) <0 AND b = 1 THEN cpos(ctrl,b) = 0 IF cpos(ctrl,a) <4 AND b = 3 THEN cpos(ctrl,a) = 4 IF cpos(ctrl,a) <0 AND b = 1 THEN cpos(ctrl,a) = 0 LOOP UNTIL redrawit = 1 GUI DELETE ALL CLS LOOP SUB printit IF txt$="" THEN IF b = 1 THEN txt$ = "Control "+STR$(ctrl)+", Step size "+STR$(move)+", X="+STR$(cpos(ctrl,1))+", Y="+STR$(cpos(ctrl,2)) ELSE txt$ = "Control "+STR$(ctrl)+", Step size "+STR$(move)+", W="+STR$(cpos(ctrl,3))+", H="+STR$(cpos(ctrl,4)) ENDIF ENDIF IF MM.DEVICE$ = "MMBasic for Windows" THEN TEXT 10, MM.VRES - 30, txt$+SPACE$(40) ELSE PRINT CHR$(27)+"[1A"+txt$+SPACE$(40) ENDIF txt$="" END SUB position_data: DATA 70,30,70,20,1 DATA 140,30,70,20,1 DATA 80,150,70,20,1 DATA 245,108,145,15,1 DATA 110,80,70,15,1 DATA 135,205,70,20,2 DATA 114,114,70,20,1 DATA -1, -1, -1, -1, -1 'USER_DATA ' place your resources here. Fonts etc. Tested on MMB4W and picomite with LCD. Jim VK7JH MMedit MMBasic Help |
||||
| TassyJim Guru Joined: 07/08/2011 Location: AustraliaPosts: 6101 |
MMEdit V5.1.4 is available and it contains the GUI design feature. See the MMEdit5 thread Jim VK7JH MMedit MMBasic Help |
||||
| Andrew_G Guru Joined: 18/10/2016 Location: AustraliaPosts: 847 |
Hi Jim, Thanks so much for this. I've updated to it but will play properly tomorrow. I'll post any comments on the MMEdit5 thread. Cheers, Andrew |
||||
 Print this page |
