Page 1 of 1

Panel demo, version 2

Posted: Sat Jan 03, 2015 5:55 pm
by Dutchman
In order to get some experience in the usage of pages, I have made a demo program.
It shows the usage of pages for the generation of autonomous Graph-, Text- or List-panels.

Code: Select all

'PAGE demo version 2, by Dutchman, january 2015
sw=SCREEN_WIDTH()
sh=SCREEN_HEIGHT()
OPTION BASE 1
DRAW FONT NAME "Arial-BoldMT"
DRAW FONT SIZE 20
'--- start in TEXT view
PRINT "In TEXT view"
'
graphpanel:
Pgr$="Graphics Panel"
b$="Push" ' button text
w=200 ! h=300
CALL InitGraphPanel(Pgr$,b$,w,h,3)
'--- draw something in panel
SPRITE "rect" BEGIN w/3,h/3 ' object to show
  GRAPHICS CLEAR 1,1,0
SPRITE "rect" END
SPRITE Pgr$ BEGIN
  SPRITE "rect" AT w/3,h/3
  SPRITE "rect" dA 10 ' rotate
  SPRITE "rect" SHOW ! SPRITE "rect" play
SPRITE Pgr$ END
PAUSE 0.3
'--- move panel
DO ! PAGE Pgr$ AT 20+10*SIN(TIMER()/100),100
UNTIL BUTTON_PRESSED(Pgr$)
PAGE Pgr$ HIDE
'
textpanel:
Ptx$="Text Panel"
b$="Next" ' button text
w=200 ! h=200
CALL InitTextPanel(Ptx$,b$,w,h,7)
'--- write something in panel
top$="<center><h3>Text Panel</h3></center>"
msg1$="Some text<br><br>Written with "
msg2$="<b>HTML</b> format and styling tags"
BROWSER Ptx$ SET TEXT top$&msg1$&msg2$
PAUSE 0.3
'--- move panel
DO ! PAGE Ptx$ AT 10,50+10*SIN(TIMER()/100)
UNTIL BUTTON_PRESSED(Ptx$)
PAGE Ptx$ HIDE
'
listpanel:
Pls$="List Panel"
b$="Done" ' button text
w=200 ! h=300
CALL InitListPanel(Pls$,b$,w,h,5)
'--- fill list with array-content
n=9 ! DIM list$(n)
For i=1 TO n ! List$(i)="Item "&i ! next i
LIST Pls$ SET TEXT list$
PAGE Pls$ AT 80,100
'
'--- wait for done
DO ! UNTIL BUTTON_PRESSED(Pls$)
'
'--- Show all in TEXT and in GRAPHICS view
done=0
showall:
BROWSER Ptx$ SET TEXT "Text panel cleared"
PAGE Ptx$ AT 100,50 ! PAGE Ptx$ SHOW
PAGE Pgr$ AT 10,50 ! PAGE Pgr$ SHOW
PAGE Pls$ AT 80,100 ! PAGE Pls$ SHOW
DO ! UNTIL BUTTON_PRESSED(Pls$)
IF done THEN exit
'--- change to graphics view
done=1
GRAPHICS ! GRAPHICS CLEAR
DRAW TEXT "In GRAPHICS view" AT 10,0
PAGE Pgr$ SET ! PAGE Ptx$ SET ! PAGE Pls$ SET 
GOTO showall
exit:
'--- Restore 'empty' page without interface objects
PAGE "" SET ' back to empty page
TEXT ! pause 1 ! TEXT CLEAR
END

'========== F U N C T I O N S ===============
DEF InitTextPanel(n$,b$,w,h,edge)
PAGE n$ SET
PAGE n$ FRAME 0,0,w,h
PAGE n$ COLOR 0,0.7,0,1
'----- Create button
bh=25 ! by=h-bh-edge-2 ! bw=w-2*edge
CALL BottomButton(n$,b$,edge,by,bw,bh)
'----- Create text area
BROWSER n$ AT edge,edge+top SIZE w-2*edge,h-4*edge-bh
END DEF

DEF InitListPanel(n$,b$,w,h,edge)
r=0 ! g=0 ! b=1
PAGE n$ SET
PAGE n$ FRAME 0,0,w,h
PAGE n$ COLOR r,g,b,1
'----- Create button
bh=25 ! by=h-bh-edge-2 ! bw=w-2*edge
CALL BottomButton(n$,b$,edge,by,bw,bh)
'----- Add title
DRAW COLOR 1,1,1 'text color
CALL PanelTitle(n$&"top",n$,bw,bh,r,g,b)
SPRITE n$&"top" AT edge,edge
'----- Create list area
SET LISTS CUSTOM
FILL COLOR 0,0.5,0 ! DRAW COLOR 1,1,1
DIM na$(1)
LIST n$ TEXT na$ AT edge,edge+bh SIZE w-2*edge,h-4*edge-2*bh
END DEF

DEF InitGraphPanel(n$,b$,w,h,edge)
PAGE n$ SET
PAGE n$ FRAME 0,0,w,h
PAGE n$ COLOR 0.7,0.7,0.7,1
'----- Create button
bh=25 ! by=h-bh-edge ! bw=w-2*edge
CALL BottomButton(n$,b$,edge,by,bw,bh)
'----- create graph area within edge
OPTION SPRITE POS NORMAL
SPRITE n$ BEGIN w-2*edge,h-3*edge-bh
  GRAPHICS CLEAR 0,0,1
  x=(w-TEXT_WIDTH(n$))/2-edge
  DRAW COLOR 1,1,0
  DRAW TEXT n$ AT x,0
SPRITE n$ END
SPRITE n$ AT edge,edge
SPRITE n$ SHOW
END DEF

DEF PanelTitle(n$,t$,w,h,r,g,b)
SPRITE n$ BEGIN w,h
  GRAPHICS CLEAR r,g,b
  tw= TEXT_WIDTH(t$)
  DRAW TEXT t$ AT (w-tw)/2,0
SPRITE END
SPRITE n$ SHOW
END DEF

DEF BottomButton(n$,t$,x,y,w,h)
SET BUTTONS CUSTOM
FILL COLOR 1,0,0 ! DRAW COLOR 1,1,0
SET BUTTONS FONT SIZE h*0.7
BUTTON n$ TITLE t$ AT x,y SIZE w,h
END DEF
It is remarkable that in the display with the three panels together, the rectangle stops rotating if the list is pushed up or down.
With the experience obtained from this code, I feel the need to extend the introduction to pages in the PDF-manual.
The given example in there is rather poor and will be replaced.
The manual will be updated.

Re: Panel demo

Posted: Sat Jan 03, 2015 6:40 pm
by Mr. Kibernetik
This is great example!

Re: Panel demo

Posted: Sun Jan 04, 2015 2:27 am
by Dav
Neat code snippet! I've been learning a lot from the programs you've posted here. Thanks for sharing.

- Dav

Re: Panel demo

Posted: Sun Jan 04, 2015 2:38 am
by DrChip
Nice!

Re: Panel demo

Posted: Sun Jan 04, 2015 5:36 am
by Dutchman
Thank you Mr.K., Dave and DrChip :D

Re: Panel demo, version 2

Posted: Wed Jan 07, 2015 3:18 pm
by Dutchman
It was not obvious to me that pages, whether they contain graphics, text or other stuff, could be displayed in TEXT view as well as GRAPHICS view.
Therefore I have extended the demo program to both views.
Keep touching "Done" to enter finally in graphics view.

Re: Panel demo, version 2

Posted: Wed Jan 07, 2015 3:26 pm
by Mr. Kibernetik
On iPhone I have this:

Image

Re: Panel demo, version 2

Posted: Wed Jan 07, 2015 3:37 pm
by Dutchman
Thanks for the picture. :D

Re: Panel demo, version 2

Posted: Wed Jan 07, 2015 4:16 pm
by Dutchman
Mr. Kibernetik wrote:On iPhone I have this: ……
Now I understand that the picture is too high. :oops:
I have reduced the maximum height so that it now (probably) will run on iPhone too.

Re: Panel demo, version 2

Posted: Wed Jan 07, 2015 4:18 pm
by Mr. Kibernetik
Dutchman wrote:I have reduced the maximum height so that it now (probably) will run on iPhone too.
Yes, now it works fine! Thank you for example!