Join us on Discord!
You can help CodeWalrus stay online by donating here.

Simple Axe Menu [Axe Tutorial~ish]

Started by CKH4, January 14, 2015, 04:56:35 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

CKH4

Here is some simple code that may help new Axe programmers learn the basics of a menu or even allow basic programmers to get into Axe Parser.

Screenshot:


Features:

  • Easy to change
  • Readable Code
  • Use custom select images

Code:
.MENU

ClrDraw

[0103030303030100]->Pic1
[80C0C0C0C0C08000]

7->X
4->Y->W

Fix 5

Text(X+5,Y,"PLAY
Text(X+1,Y+8,"SCORES
Text(X+5,Y+16,"HELP
Text(X+5,Y+24,"QUIT

RectI(X,Y,25,7

Pt-Change(X-9,Y,Pic1
Pt-Change(X+26,Y,Pic1+8

DispGraph

Repeat getKey(15)

If Y!=(W+24)
If getKey(1)

Y+8->theta

RectI(X,Y,25,7
Pt-Change(X-9,Y,Pic1
Pt-Change(X+26,Y,Pic1+8

Repeat Y=theta
RectI(X,Y,25,7
Pt-Change(X-9,Y,Pic1
Pt-Change(X+26,Y,Pic1+8
DispGraph
RectI(X,Y,25,7
Pt-Change(X-9,Y,Pic1
Pt-Change(X+26,Y,Pic1+8
Y++
End
RectI(X,Y,25,7
Pt-Change(X-9,Y,Pic1
Pt-Change(X+26,Y,Pic1+8
DispGraph
End
End

If Y!=W
If getKey(4)

Y-8->theta

RectI(X,Y,25,7
Pt-Change(X-9,Y,Pic1
Pt-Change(X+26,Y,Pic1+8

Repeat Y=theta
RectI(X,Y,25,7
Pt-Change(X-9,Y,Pic1
Pt-Change(X+26,Y,Pic1+8
DispGraph
RectI(X,Y,25,7
Pt-Change(X-9,Y,Pic1
Pt-Change(X+26,Y,Pic1+8
Y--
End
RectI(X,Y,25,7
Pt-Change(X-9,Y,Pic1
Pt-Change(X+26,Y,Pic1+8
DispGraph
End
End

Pause 10

End

Fix 4


If you want any help or have any questions I'll attempt to help you out. I will update this until I consider it complete.
  • Calculators owned: TI-83+, TI-84+


Dream of Omnimaga

I am unsure if there was another tutorial available before on Omni for such menu, although I think you should make yours so that the code is commented, to explain what each part do. Also nice menu by the way. It reminds me my xLIB xLIB Revolution menu :P
  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U

Duke "Tape" Eiyeron

Hey, it looks a lot like the mockup I did just before starting HBE on Axe!



And that's the same idea I had (a counter to move the bar). I was sure that was not too ugly. Thanks for make me sure of this choice.
  • Calculators owned: A lot.

CKH4

#3
Quote from: DJ Omnimaga on January 14, 2015, 07:16:03 AM
I am unsure if there was another tutorial available before on Omni for such menu, although I think you should make yours so that the code is commented, to explain what each part do. Also nice menu by the way. It reminds me my xLIB xLIB Revolution menu :P
Commenting the code is next on my to-do, then sending each button to the right Lbl. Maybe I'll do the labels with expressions.

Quote from: Eiyeron on January 14, 2015, 07:31:32 AM
Hey, it looks a lot like the mockup I did just before starting HBE on Axe!



And that's the same idea I had (a counter to move the bar). I was sure that was not too ugly. Thanks for make me sure of this choice.
Nice menu, how did you draw the menu items pictures? I chose to use the inverted one so that I could use just one buffer without redrawing the text.

Edit.
I had originally used for loops but they don't want to go backwards.
  • Calculators owned: TI-83+, TI-84+


alberthrocks

I thought I'd share something that I wrote a while ago, with Runer112.

Original post can be found here, post content follows:




One of the concepts I've been working on for Axe GUI Library is this other side of it. I wanted to try something new - offering GUI functions that integrate seemlessly inside the program. Or, if the developer happened to want more control, give them access to some drawing functions, and let the developer handle all the other code. This portion of Axe GUI Library is geared to game developers, but also to any developers wanting a GUI without the full blown GUI. (Mouseless is one aspect.)

That said, no worries - I'm still interested in the regular, window/mouse based Axe GUI Library! :) I'm just adding another side of it to cater to other developers as well.

So what do I have for today? I have the "advanced drawing routine" done and implemented for... MENUS! :D
This routine provides the drawing, all you need to do is provide the input! :)
I've attached BOTH the source and the compiled Axe binary for your convenience.
I strongly suggest opening the source 8Xp inside a PC source editor of some kind. It's very, very, long.
The routine of interest is MNU (line "Lbl MNU" all the way to "Return", as well as routines that are used in routine MNU).
Don't get the code? Thank Runer112 for that extreme optimization that made this routine possible! :D (The original one was very, very slow)

prgmAGMENUD is the binary, which is a significant menu demo program.
prgmAGMENUDS is the source of that program.

This routine can possibly be implemented into actual menus in the regular GUI! (Not sure if actual menubars->menus would work on a calc, but click-button-to-show-menu would work.) Of course, this routine needs more work, esp. to support no animation.

Enjoy! :D

Thanks Darl181 for the GIF recording! :D


Dream of Omnimaga

Ooh that looks nice as well. I like the double column layout actually :D
  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U

CKH4

Oh, this is very cool. I'll try it later.
  • Calculators owned: TI-83+, TI-84+


Duke "Tape" Eiyeron

Quote from: CKH4 on January 14, 2015, 02:57:53 PM
Quote from: DJ Omnimaga on January 14, 2015, 07:16:03 AM
I am unsure if there was another tutorial available before on Omni for such menu, although I think you should make yours so that the code is commented, to explain what each part do. Also nice menu by the way. It reminds me my xLIB xLIB Revolution menu :P
Commenting the code is next on my to-do, then sending each button to the right Lbl. Maybe I'll do the labels with expressions.

Quote from: Eiyeron on January 14, 2015, 07:31:32 AM
Hey, it looks a lot like the mockup I did just before starting HBE on Axe!



And that's the same idea I had (a counter to move the bar). I was sure that was not too ugly. Thanks for make me sure of this choice.
Nice menu, how did you draw the menu items pictures? I chose to use the inverted one so that I could use just one buffer without redrawing the text.

Edit.
I had originally used for loops but they don't want to go backwards.

I used a custom routine which scales sprites by drawing Rects.
  • Calculators owned: A lot.

CKH4

  • Calculators owned: TI-83+, TI-84+


Hayleia

Your code isn't really what I'd call "readable", and I can tell that just at your third line. Yeah, the one with "Pic1". Because that doesn't tell me what's in the sprite. You could have used "→°LolSprite" (but with a descriptive name of course) instead.

I also think I see a lot of repetitions in your code, where you could at least have used a subroutine.

And last but not least, "easily changeable" applies to codes that either are really readable or don't contain any data. And this doesn't apply to yours, it has Text data, it knows the number of "buttons", etc, so when you'll want to change it, you'll have to read it all and not forget anything to change.

Here's what I use in Smash for example. OK, the code isn't exactly what I'd call readable :P
But the rest is readable, all labels and pointers have suggestive names. And it is easily changeable since there is no data in the menu code, all you have to do is change the data, add an entry or remove one, etc.
Don't use it, it lacks something you need to make it run. If you try it this way on your calc, it will most likely crash, except if you are lucky. But you can check in Smash's source code, that's really what I use (well, that's an old version thta changes a bit compared to the latest version but it will most likely be back in a new version).

Screenshot and code (in spoiler to save space):

[spoiler]

Lbl Menu
ClrDraw
0->D
°MainMenu->r1
While 1
0->r4
For({r1->r2})
r2++
!If D-r4
Text(2,56,{r2+11}^^r)
256
Else
232
End
->F
Copy({r2+2}^^r->r3+2,L2,{r3}*{r3+1})
{r2}+({r3}*4)-({r3}*4*F/256)*256+{r2+1}+({r3+1}/2)-({r3+1}/2*F/256) Asm(E5)
{r3}^^r Asm(E5)
F Asm(E5)
L2
Asm(CD7298) .sub(L3)
r2+12->r2
r4++
End
L6+768-108-1
For(108)
{+1->r2} xor 255->{r2}
End
DispGraphClrDraw
WKP()
~1->r2
D*13+r1+1->r3
For(4)
getKey(r2+++1)?{r3+r2+7}->D
End
If getKey(54)
If {r3+4}
Goto ({r3+5}^^r)
Else
0->D
{r3+5}^^r->r1
End
WLP()
ElseIf getKey(48)
If {r1-3}
Goto ({r1-2}^^r)
Else
0->D
{r1-2}^^r->r1
End
WLP()
End
End

/.../

.Menu structure:
.Data(flag if previous, label if previous)
.Lbl CurrentMenu
.[number of buttons]
.Data(flag if previous, label if previous ^^r)
.Data(X (centered),Y (centered),sprite^^r,flag if ok,label if ok^^r,button if down,button if left,button if right,button if up, TxtPtr)
.Data(same for the second button)
.etc
.the "flag if ok/previous" is at 1 if the following label is a real label, and at 0 if it's a pointer to another menu structure to read with the menu routine

Data(1,|LTitleScreen^^r)
[]->°MainMenu
[04]
Data(01,01,°SmashSpr^^r  ,0,°SmashMenu^^r,2,0,1,0,°SmashTxt^^r)
Data(68,02,°OptionsSpr^^r,0,°MainMenu^^r ,2,0,1,1,°OptionsTxt^^r)
Data(37,27,°DataSpr^^r   ,0,°MainMenu^^r ,3,0,2,1,°DataTxt^^r)
Data(47,41,°CreditsSpr^^r,0,°MainMenu^^r ,3,0,3,2,°CreditsTxt^^r)

[]->°SmashSpr
[092B]
[00007FFFFFFFFFFFFF0003FFFFFFFFFFFFFF001F8000000000000E003C0007800000000000F00FC1E6739CE73801C1EFF870E739CE7003820FFC39CE739CE00719CFFF1C9CE739C00E382FFF8E39CE73800C782FFFC6739CE70018FBCFFFE72739CE0039F80FFFF38E739C0031FA2FFFF98000000033FB6FFFF9FFFE700067FAAFFFFCFFFCE00067FA2FFFFCFFF9C00067FA2FFFFCFFF38000CFFA2FFFFE7FE70000CFF80FFFFE7FCE0000CFF9CFFFFE7F9C0000CFFA2FFFFE7F380000CFFA2FFFFE7E700000CFFBEFFFFE7CE00000CFFA2FFFFE79C00000CFFA2FFFFE73800000CFF80FFFFE670000006001E00000CE00000060020000009C0000006001C000003800000033F82FFFF87000000033F82FFFF8E000000039FBCFFFF1C000000018F80FFFE3800000000C7A2FFFC7000000000E3A2FFF8E00000000071BEFFF1C00000000038A2FFE380000000001C22FF8700000000000F02FC1E000000000003C00078000000000001F803F00000000000003FFF8000000000000007FC00000000000]
[]->°OptionsSpr
[0318]
[007E0003FFC007FBE00FE3F01FC3F83F87EC7F87E67F87C67F8186FFC007FFE00FFFE00FFFC13FFFC3FFFF83FF7F87FE7F07FE7F0FFE3E0FFC1E9FF80E1FF007BFE003FFC0007E00]
[]->°DataSpr
[070D]
[0007FFFFFFF000000FFFFFFFFE000018FFFFFFFF00003000FEFEFFC00077FEFEFEFFE000F7E2E08C23E001F000EEF6FDF003F000EE86E1F807F000EEB6EDF80FF000EEB6EDF81FF000F0C731FC3FFFFFFFFFFFFC7FFFFFFFFFFFFC]
[]->°CreditsSpr
[060D]
[FFFFFFFFFFFFFFFFFFFFFFFF7FFFFFEB7FFF7FFFFFEF7FFE3F08860A10FE3F7BBAEB77FE1F7B82EB75FC1F7BBEEB7AF80F7BBEEB7EF80F8BC30B90F007FFFFFFFFC007FFFFFFFF8003FFFFFFFC00]

[]->°SmashTxt
"Start fighting now !"[00]
[]->°OptionsTxt
"Set general preferences."[00]
[]->°DataTxt
"Manage profile data."[00]
[]->°CreditsTxt
"Contributors to this game."[00]

Data(0,°MainMenu^^r)
[]->°SmashMenu
[02]
Data(01,1,°SoloSpr^^r ,1,|LSetSoloMulti^^r,1,0,1,0,°SoloTxt^^r)
Data(23,3,°MultiSpr^^r,1,|LSetSoloMulti^^r,1,0,1,0,°MultiTxt^^r)

[]->°SoloSpr
[0933]
[000007FFFFFFFFFFFF00007FFFFFFFFFFFFE0001FC000078000FFC0007E07E0048001FF8001F80C30048003FF0003E00991C48E07FE0007C009F774BB8FFC000F0008EC1CE0DFF8001E000839CCCE7FF0003C000E19CCCE7FE0007C000399CCCE7FC000F8000F99CCCE7F8000F00009189CC4FF0001F000083C14E0FE0001E0000FE7F7BFFC0003E0000000001FF80003C0000000003FF00007C03FF800007FE00007C020080000FFC000078020080001FF8000078020080003FF00000F8020080007FE00000F802008000FFC00000F802008001FF800000F803FF8003FF000000F802AD8007FE000000F803F8800FFC000000F802AD801FF8000000F803FF803FF0000000FC02AA807FE0000000FC03FF80FFC00000007C02AA81FF800000007E03FF83FF000000007E02AA87FE000000007F03FF8FFC000000003F00001FF8000000003F80003FF0000000001FC0007FE0000000001FC000FFC0000000000FE001FF80000000000FF803FF000000000007FC07FE000000000003FE0FFC000000000001FF9FF8000000000000FFFFF00000000000007FFFE00000000000003FFFC00000000000001FFF8000000000000007FF0000000000000001FE00000000000000007C000000000000]

[]->°MultiSpr
[0933]
[0000000000003E00000000000000007F8000000000000000F3E000000000000001E0F800000000000003C07C00000000000007803E0000000000000F000F0000000000001E00078000000000003C0007C00000000000780003E00000000000F00001F00000000001E00001F00000000003C00000F80000000007800FFEF8000000000F0008027C000000001E0008027C000000003CFFE8027E00000000788028023E00000000F08028023E00000001E08028023E00000003C0802FFE3F0000000780802AB63F0000000F00802FE23F0000001E00FFEAB63F0000003C00AB6FFE3F0000007800FE2AAA3F000000F000AB6FFE3F000001E000FFEAAA7F000003C000AAAFFE7F0000078000FFEAAA7F00000F0000AAAFFEFE00001E0000FFE000FE00003C0000AAA001FE0000780000FFE001FE0000F00000000003FC0001E000003C0E07FC0003DF8F80241B07F8000790988027D10FF8000F1090F3A67F1FF0001E10F0DAE4027FF0003C1264CA6402FFE000781264CA6673FFC000F01264CA6673FF8001E0130CCA6673FF0003FFF30CCE6673FE0007FFF39CC06613FC000FFFF39CE26713F8001FFFFFFFFFFFFFE0003FFFFFFFFFFFFF80007FFFFFFFFFFFFE0000FFFFFFFFFFFFE00000]

[]->°SoloTxt
"Two on the same calc."[00]

[]->°MultiTxt
"Use the link port."[00]

[/spoiler]

Dream of Omnimaga

#10
Off-topic: Hayleia, Protip: Chrome tags nested in spoiler tags makes code users cry. :P (due to SMF bug)

  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U

Hayleia

Yeah, I know (and I use FireFox so it doesn't bother me :P) but did you see how long the code was ? I thought it wouldn't be a good idea to post it outside of a spoiler.
Or would it be possible to have scrollable code ? I mean that the "window" with the code would have a max size and would have a scrollbar so we can still see all of it ?

Dream of Omnimaga

#12
I use [spoiler]
Quotesource

code

here
[/spoiler] in such case (click quote to see my post source). Nobbc isn't required but you might need to disable smileys

EDIT Also I tried to get rid of scrollbars and max width before in CODE tags' CSS, and I still had the issue, so it might be an internal bug or I'm missing something out on CSS3.
  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U

CKH4

Hayleia:
I understand what your saying about it not being really readable. I plan to fix this with comments but for right now I want it to be easy enough for a ti basic programmer to get it (no extreme optimizations). In terms of changeable I meant most things were adaptable without changing more than 3 things. I'm going to add my to-do list to the main post but for now here it is:
1. Use a subroutine for drawing the rectangles.
2. Make minor optimizations.
3. Comment the code.

Also why is your username Hayleia? (I only ask because when I read it letter by letter I realized that I hadn't read it correctly before)

DJ O:
You may have to be more specific,
.spoiler .code {
  min-height: 256px;
}

Or use javascript to change it. I wrote a script (jquery) but I'm not quite fluent in javascript so I can't write one out again.
  • Calculators owned: TI-83+, TI-84+


Hayleia

Quote from: CKH4 on January 17, 2015, 03:21:04 PM
Hayleia:
I understand what your saying about it not being really readable. I plan to fix this with comments but for right now I want it to be easy enough for a ti basic programmer to get it (no extreme optimizations).
Well, changing your sprites names to "°ThatSprite" instead of "Pic1" is not something too hard, even for a beginner ;)
Same, you can use custom variable names. Not really needed when those variables are X and Y, but for example, MyX MyY EnemyX EnemyY are more readable than X Y U V.

Quote from: CKH4 on January 17, 2015, 03:21:04 PM
Also why is your username Hayleia? (I only ask because when I read it letter by letter I realized that I hadn't read it correctly before)
Sekrett!! :P
Jk, the reason is so stupid I'll never say it. And you're not the first one to misread it :P

Powered by EzPortal