CodeWalrus

Development => Calculators => Calc Projects, Programming & Tutorials => Topic started by: CKH4 on January 14, 2015, 04:56:35 AM

Title: Simple Axe Menu [Axe Tutorial~ish]
Post by: CKH4 on January 14, 2015, 04:56:35 AM
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:
(http://i.imgur.com/LZjj2Vl.gif)

Features:

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.
Title: Re: Simple Axe Menu [Axe Tutorial~ish]
Post by: Dream of 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
Title: Re: Simple Axe Menu [Axe Tutorial~ish]
Post by: Duke "Tape" 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!

(https://www.omnimaga.org/index.php?action=dlattach;topic=19406.0;attach=15890;image)

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.
Title: Re: Simple Axe Menu [Axe Tutorial~ish]
Post by: 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!

(https://www.omnimaga.org/index.php?action=dlattach;topic=19406.0;attach=15890;image)

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.
Title: Re: Simple Axe Menu [Axe Tutorial~ish]
Post by: alberthrocks on January 14, 2015, 04:17:00 PM
I thought I'd share something that I wrote a while ago, with Runer112.

Original post can be found here (https://www.omnimaga.org/ti-z80-calculator-projects/axe-gui-library/msg217727/#msg217727), 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

(http://i.imgur.com/2xf1kIs.gif)
Title: Re: Simple Axe Menu [Axe Tutorial~ish]
Post by: Dream of Omnimaga on January 14, 2015, 04:32:09 PM
Ooh that looks nice as well. I like the double column layout actually :D
Title: Re: Simple Axe Menu [Axe Tutorial~ish]
Post by: CKH4 on January 14, 2015, 04:41:56 PM
Oh, this is very cool. I'll try it later.
Title: Re: Simple Axe Menu [Axe Tutorial~ish]
Post by: Duke "Tape" Eiyeron on January 14, 2015, 05:52:26 PM
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!

(https://www.omnimaga.org/index.php?action=dlattach;topic=19406.0;attach=15890;image)

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.
Title: Re: Simple Axe Menu [Axe Tutorial~ish]
Post by: CKH4 on January 14, 2015, 06:49:06 PM
Ok cool, it's pretty cool.
Title: Re: Simple Axe Menu [Axe Tutorial~ish]
Post by: Hayleia on January 17, 2015, 07:29:46 AM
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]
Title: Re: Simple Axe Menu [Axe Tutorial~ish]
Post by: Dream of Omnimaga on January 17, 2015, 07:41:40 AM
Off-topic: Hayleia, Protip: Chrome tags nested in spoiler tags makes code users cry. :P (due to SMF bug)

(https://img.ourl.ca/Screenshot_2015-01-17-02-46-01.png)
Title: Re: Simple Axe Menu [Axe Tutorial~ish]
Post by: Hayleia on January 17, 2015, 07:49:34 AM
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 ?
Title: Re: Simple Axe Menu [Axe Tutorial~ish]
Post by: Dream of Omnimaga on January 17, 2015, 07:54:35 AM
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.
Title: Re: Simple Axe Menu [Axe Tutorial~ish]
Post by: 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). 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.
Title: Re: Simple Axe Menu [Axe Tutorial~ish]
Post by: Hayleia on January 17, 2015, 05:02:10 PM
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
Title: Re: Simple Axe Menu [Axe Tutorial~ish]
Post by: CKH4 on January 17, 2015, 05:10:28 PM
I didn't know that you could use custom variable names. That's pretty cool. I'll update it on Monday (hopefully) when I can use a computer.
Title: Re: Simple Axe Menu [Axe Tutorial~ish]
Post by: Dream of Omnimaga on January 17, 2015, 06:49:36 PM
Wow I didn't know we could use custom var and pointer names O.O I swear that when I last used Axe seriously in early 2010 it was impossible...
Title: Re: Simple Axe Menu [Axe Tutorial~ish]
Post by: Hayleia on January 17, 2015, 07:19:33 PM
Yeah, I have no idea when it was introduced but it is really convenient.

You know that °A is the pointer to A, well to declare another pointer, custom named, just declare it with L5+35→°Lolz for example, or [FFFFFFFFFFFFFFFF]→°BlackSprite.
You can then do Pt-On(X,Y,°BlackSprite). And since °A points to A, °Lolz points to Lolz and you can do whatever you want with Lolz, like Lolz++, etc ;)
(just be sure to use safe ram areas when creating new variables :P).
Title: Re: Simple Axe Menu [Axe Tutorial~ish]
Post by: Dream of Omnimaga on January 18, 2015, 01:46:45 AM
Pretty nifty :D. So Axe became a step closer to PC and higher end calculator model programming languages :D
Title: Re: Simple Axe Menu [Axe Tutorial~ish]
Post by: Duke "Tape" Eiyeron on January 18, 2015, 07:30:58 AM
You don't know everything Axe could do for you.
It's an amazing language Quigibo and Runer did.
Title: Re: Simple Axe Menu [Axe Tutorial~ish]
Post by: Hayleia on January 18, 2015, 08:19:45 AM
Yeah, this kind of things make Axe really convenient to use (same for other languages with macros and all). See Topaz and Smash. I only made additions to Topaz but never changed the engine because I hardcoded every offset and it was too annoying to change something everywhere. But I made a SMASHH file for SSBO, full of macros, empty of code, and thanks to this, I was able to change the engine several times without spending too much time :)
(it is just maybe a bit unoptimized this way but on the other hand, it makes me spend even less time understanding what I wrote when I get back to work on it after a long pause).