Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit Classic Chat / OryUI - AGK UI Framework - WIP

Author
Message
Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 17th Apr 2019 15:32
Aside from sliders, and it eventually looking different on iOS, is there anything else you'd like to see added to OryUI for it to be something you might consider using?

If I was to put together a roadmap I'd probably say this was the plan/direction (not specifically in this order):

* Sliders (https://material.io/design/components/sliders.html)
* Data tables (https://material.io/design/components/data-tables.html)
* Image lists (https://material.io/design/components/image-lists.html)
* Fancier cards (https://material.io/design/components/cards.html)
* Start updating some of the older components to make them consistent
* Look for speed improvements wherever possible
* iOS theme, and other themes. Should be easier with the default settings file that was added in the last version
* Example templates that clone popular existing apps (just the UI, not fully working apps)
* Improved documentation and move the documentation away from GitHub
OryUI - A WIP AGK2 UI Framework
Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 25th Apr 2019 01:08 Edited at: 25th Apr 2019 08:36
I needed to replace my pagination code in my app so though I'd have a go at adding pagination to the framework

The below code shows the 3 pagination components in the attached video. Not much to it





I've also attached a screenshot showing a couple more styles.
OryUI - A WIP AGK2 UI Framework

Attachments

Login to view attachments
DannyD
2
Years of Service
User Offline
Joined: 29th Aug 2017
Location:
Posted: 25th Apr 2019 01:21
@Kevin Cross

Just come across your UI.
IS there a complete axample using these functions?
THanks
Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 25th Apr 2019 07:06 Edited at: 25th Apr 2019 07:06
@DannyD there's no complete script yet that showcases all of the components if that's what you mean but there's a wiki section on github that shows example code for each one.

The pagination component will be in the next version as well as a bunch of fixes already made to the other components.
OryUI - A WIP AGK2 UI Framework
DannyD
2
Years of Service
User Offline
Joined: 29th Aug 2017
Location:
Posted: 26th Apr 2019 00:01
Thank @Kevin
I really like the work. Been searching for something like this for a while, and I finally found it.

Found the wiki....

Something like this added to AppGameKit will make it really popular.

Thanks for your time and effort in doing this

Cheers
Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 26th Apr 2019 07:41 Edited at: 26th Apr 2019 07:49
Quote: "Something like this added to AppGameKit will make it really popular."


I agree 100%. Maybe not OryUI specifically without some experienced people getting involved and polishing and improving the code or TGC creating an official version. But it shows that you can definitely create an almost native look and feel with just sprites and text. And I've proved that editboxes can finally look nice!

It would appeal to a much larger group of developers if they new it was possible and easy to create non game apps with AGK2, and the word app in the name AppGameKit will finally be more fitting!

If an official version ever does get released by TGC in the future because they see that it would entice more buyers then I hope its like OryUI where the plan is that you can customise and skin it to have it look how you want. I wouldn't want them releasing a fixed UI that can't be customised and looks like AppGameKit Studio as that would be horrible on mobile.
OryUI - A WIP AGK2 UI Framework
Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 14th May 2019 19:09
The OryUIPagination component is now available on GitHub. I haven't been able to upload it sooner. There's also a number of fixes/improvements made to some of the other components

https://github.com/KevinCrossDCL/OryUI/blob/master/changelog.txt
OryUI - A WIP AGK2 UI Framework
Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 15th May 2019 12:26 Edited at: 15th May 2019 12:26
It looks like I forgot to update the main OryUI.agc file on GitHub so new parameters referenced in the components aren't included in the current version of that file on GitHub and so you would get errors when including all of the files. I don't know if there's a better way of updating GitHub with AppGameKit as there's no versioning/git control available (I can't get the Geany plugins working on the Mac), but at the moment I'm copying and pasting code from each file I know I've updated to the files on GitHub, and uploading any new files. I forgot to copy and paste the code for the OryUI.agc file. Will just have to get in the habit of updating all of them, even if no changes were made.

I'll update the files again later on today when home from work.
OryUI - A WIP AGK2 UI Framework
DannyD
2
Years of Service
User Offline
Joined: 29th Aug 2017
Location:
Posted: 16th May 2019 00:44
Thanks for the update, appreciate

Danie
DannyD
2
Years of Service
User Offline
Joined: 29th Aug 2017
Location:
Posted: 16th May 2019 03:34
Thanks Kevin

O.4 works good...
Small demo from the wiki Examples


Error in HTML5 , but....
After renaming some media : left-Shadow.png to Left-Shafow.png (capital L) and top-shadow.png to Top-Shadow.png (Capital T) it worked perfect in HTML 5 aswell
See attached Screenshot

Cheers
Danie




Attachments

Login to view attachments
Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 16th May 2019 07:33 Edited at: 16th May 2019 07:43
Thank you DannyD. I never tested it in a HTML export. Good to see that it works in that too.

And I'll check out the media thing you mentioned. I thought the filenames did have capital letters at the front of each word. I'll fix if not

EDIT: One thing I noticed was that 4 shadow images were missing from the Media folder. Those have now been added and available on GitHub.
OryUI - A WIP AGK2 UI Framework
Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 16th May 2019 08:24 Edited at: 16th May 2019 08:25
@DannyD

I've amended your example to include the top bar and navigation menu now that the shadow images are available. I've also positioned/resized things so that I can get the new pagination component showing too

You may notice that I've changed your dialog functions. I recommend updating the existing dialog rather than creating new ones if you're going to use the same variable because otherwise the old ones aren't being destroyed. What I do is create an empty dialog: dialog = OryUICreateDialog("") outside of the main loop, and whenever I need to show it I use that one and add the buttons to it. You'll see I've removed the insert buttons and used OryUISetDialogButtonCount(dialog, 3) which will insert buttons if the last dialog shown had less then 3 and remove any extras if the last dialog shown had more than 3.

OryUI - A WIP AGK2 UI Framework
DannyD
2
Years of Service
User Offline
Joined: 29th Aug 2017
Location:
Posted: 16th May 2019 08:28
Thanks Kevin
Will test it now...
Cheers
Danie
DannyD
2
Years of Service
User Offline
Joined: 29th Aug 2017
Location:
Posted: 16th May 2019 08:54
Kevin

I see I might use your DLC more and more.

I don't want to re-invent the wheel, but were thinking of doing a GUI /Designer/code generator using the QryUI libraryies, or is there something out there?

Will be mainly for myself to help with quick designs, but willing to share...

Cheers
Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 16th May 2019 09:02 Edited at: 16th May 2019 09:03
That would be an awesome tool. And something I'd use if it allowed for multiple screens/scenes. My current app I'm updating has almost 30 screens, all using this framework.

The OryUI framework is only a few months old so nothing like that exists for it at the moment.

I plan to share an example project with multiple screens as soon as I can so that people can see how I'm currently doing it.
OryUI - A WIP AGK2 UI Framework
DannyD
2
Years of Service
User Offline
Joined: 29th Aug 2017
Location:
Posted: 16th May 2019 09:08
Have you ever speak to TGC/Preben.Rick

Could be nice if they can incorporate this in AGKS

Let me see how I can get some spare time, and start with something

Cheers
Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 16th May 2019 09:20
I haven't spoken to either about it as I didn't think they'd be interested, and because it's still at an early stage. But I would like to see this or even something similar in Studio. With their direction I may be able to adapt it accordingly.
OryUI - A WIP AGK2 UI Framework
ghzero
2
Years of Service
User Offline
Joined: 13th Jun 2017
Location: Germany
Posted: 11th Aug 2019 13:30
Best regards Kevin,

looking hopefully forward to see your next updates or release on github.


best regards,
ghzero

..almost with my develop-lowprofile-pc: lenovo-m93p with ssd, ram:16gb, cpu+gpu: intel core-i5 4570t @ 2.9ghz, os:win10pro-64bit
Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 11th Aug 2019 13:56
Thanks, there will be a new version soon. Still inconsistencies throughout (codewise) which I'd like to tackle at a later date. Lots of fixes, and 2 extra components although one isn't really a UI one. Scroll to top buttons and a HTTPS ASync and file upload queueing system. I've been using it in my current app for over a year or so but have rewritten it so that it can be used by others and so that it is a similar set up as the UI elements with how you use and call it.
OryUI - A WIP AGK2 UI Framework
Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 14th Aug 2019 09:08 Edited at: 14th Aug 2019 10:48
I thought I'd take a moment to explain in a little more detail the OryUI HTTPS Queueing system and why it's freaking useful

What it does is allow you to queue any number of SendHTTPRequestASync and SendHTTPFile calls at once and call any number of custom functions for each one when the response code from each shows a successful send. The file one hasn't been properly tested yet but in the old version before moving it over to OryUI it worked fine.

This is useful because you don't have to wait for the success signal before allowing a user to do something else that might send a new http request and complicate things. It also moves things to the back of the queue if it's failed to get a success signal after a number of attempts. You could in theory queue 100's of requests one after the other in the same cycle and have each one call a different function once they have the success signal, and the queueing system handles all of that and moves them about until the queue is empty.

To initialise a queue it's as simple as:



To add items to the queue it's just one line:



In the above example the name command is useful because if I send that same or similar line to the queue again with the same name and script and the original item is still in the queue it will replace the original one with the latest call. For updating a specific user the name may be quite unique and substituted with a variable on the string i.e. "name:UpdateUser" + str(selectedUserID) + ";script:...."

I can also force an item to the front of the queue with the addToFront:true parameter



If I want something to stick in the front of the queue until completed and not have the queue move it to the back after a number of fails I would add stickUntilComplete:true (sorry name best I could come up with)



Here's a simple example of how to react to different successful http requests in your app:



There are a number of other GetHTTPSQueue functions like the one above that returns the response code and response string from the request, as well as the number of failed attempts so far, so that you can react in the app and show something like a message/dialog that says there seems to be an issue at the moment etc. It also has a command that will print out on the screen the queue, so when debugging you can see what's in the queue at anytime. There's also a function that return the number of items in queue which is handy if you want to display an animated busy icon in your app when there's items in the queue so that the user can see that the action they just did hasn't properly completed yet.

One thing I've noticed while putting this post together is that there seems to be a function missing for returning the name of the request which is kind of important for my app so I'll add that in before releasing.

I'll try and get a new version uploaded by the end of the week. From what I've tested so far the queueing system is working fine but if I find any bugs the more I use it I'll add a fix. As mentioned above I haven't tested the file upload part yet and it will be a while before I need to but I can't see why it wouldn't work.
OryUI - A WIP AGK2 UI Framework
Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 16th Aug 2019 21:16 Edited at: 16th Aug 2019 21:37
Version 0.6a of OryUI is now available on github: https://github.com/KevinCrossDCL/OryUI

I forgot to add the function that would return the name/ID of the queue item that was last successful but I do need it so will get it in the next version.

The changelog can be found here: https://github.com/KevinCrossDCL/OryUI/blob/master/changelog.txt

Are there any components/UI elements that you'd like to see added to OryUI?
OryUI - A WIP AGK2 UI Framework
DannyD
2
Years of Service
User Offline
Joined: 29th Aug 2017
Location:
Posted: 17th Aug 2019 00:57
Thanks Kevin, downloading now....
ghzero
2
Years of Service
User Offline
Joined: 13th Jun 2017
Location: Germany
Posted: 18th Aug 2019 14:54 Edited at: 18th Aug 2019 14:54
wow Kevin Cross,
nice to see that new release of Ory was done by You - I have heavyiest awaited the next version.

to your question:
Are there any components/UI elements that you'd like to see added to OryUI?

..I will come back later and stay thankfully for your time and your work!
best regards,
ghzero

..almost with my develop-lowprofile-pc: lenovo-m93p with ssd, ram:16gb, cpu+gpu: intel core-i5 4570t @ 2.9ghz, os:win10pro-64bit
Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 18th Aug 2019 21:37 Edited at: 18th Aug 2019 21:57
I'm going to have to release a new version (probably tomorrow). I renamed some of the HTTPSQueue functions so that the new one I needed made sense. Here are the changes to this component

- Added function OryUIClearHTTPSQueue()
- Added function OryUIGetHTTPSQueueRequestName()
- Added function OryUIResetHTTPSQueueFailedCount()
- Added parameter 'delay' (this will let you set the delay between each request)
- Renamed function OryUIGetHTTPSQueueResponse() to OryUIGetHTTPSQueueRequestResponse()
- Renamed function OryUIGetHTTPSQueueResponseCode() to OryUIGetHTTPSQueueRequestResponseCode()
- Renamed function OryUIGetHTTPSQueueScript() to OryUIGetHTTPSQueueRequestScript()

I've also added a circular progress indicator (a loading/busy wheel). I put it under OryUIProgressIndicator because this site which I've used a lot while building OryUI has it under a progress indicator https://material.io/design/components/progress-indicators.html

Here's a screenshot of the new circular loading wheel which is easily customisable, and easy to set up with your own animation frames. You can also adjust the size.

I have this showing whenever there's an item in the HTTPS Queue

OryUI - A WIP AGK2 UI Framework

Attachments

Login to view attachments
Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 19th Aug 2019 20:18
Version 0.7a of OryUI is now available on github: https://github.com/KevinCrossDCL/OryUI

The changelog can be found here: https://github.com/KevinCrossDCL/OryUI/blob/master/changelog.txt
OryUI - A WIP AGK2 UI Framework
Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 11th Sep 2019 16:13 Edited at: 11th Sep 2019 16:37
I thought I'd have a go at converting hex colours to RGB after a small bit of research to understand how they are converted. Will probably add this to OryUI so that you can colour components with RGB or Hex.

There's probably other and better ways to convert hex colours to RGB but I don't think it's that bad. Here's the page that helped explain the conversion and provided the formula: https://medium.com/@donatbalipapp/colours-maths-90346fb5abda



It's a shame that we have to store it in an array first and aren't able to just do something like this: SetTextColor(text1, HexToRGB("#0bc50a"))

EDIT: I updated the function to default to white if the hex colour code is invalid.
2nd EDIT: Updated again to allow for short 3 digit hex colours like #F19 which is a pink.
OryUI - A WIP AGK2 UI Framework
Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 12th Sep 2019 00:58
Version 0.8a of OryUI is now available on github: https://github.com/KevinCrossDCL/OryUI

I've added the option to reference colours with hex code i.e. color:#f63703

All of the *color and *colorID parameters now use a function to see if the value you've supplied is a comma delimited RGB, RGBA colour, a MakeColor() id, or a hex color code. Because *color and *colorID now call the same function I will stop adding *colorID to new components.

This version also has a few bug fixes, some of which was causing the app to crash.

The changelog can be found here: https://github.com/KevinCrossDCL/OryUI/blob/master/changelog.txt
OryUI - A WIP AGK2 UI Framework
blink0k
AGK Developer
Gold Codemaster
6
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 12th Sep 2019 01:17
val(hex-string, 16)

Will convert a hex string to an integer
Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 12th Sep 2019 01:34
When I did that earlier it created a long integer like 713412433. I had no idea how that would be applied to SetTextColor(text1, red, green, blue, alpha)
OryUI - A WIP AGK2 UI Framework
blink0k
AGK Developer
Gold Codemaster
6
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 12th Sep 2019 01:38 Edited at: 12th Sep 2019 01:41
You can use it to get the RGB individually like; (From a "#hexval" string)
R = val(mid(hex$, 2, 2), 16)
G = val(mid(hex$, 4, 2), 16)
B = val(mid(hex$, 6, 2), 16)
Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 12th Sep 2019 01:39 Edited at: 12th Sep 2019 01:41
That is what I'm doing in the function above.

EDIT: Ok, I can see how I can shrink the code a bit so will update it for the next version. Thank you
OryUI - A WIP AGK2 UI Framework
blink0k
AGK Developer
Gold Codemaster
6
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 12th Sep 2019 01:41
Sorry. If you want to use the whole integer you could try this;

GetColorRed(Val(mid(hex, 2, -1), 16))
GetColorBlue(Val(mid(hex, 2, -1), 16))
GetColorGreen(Val(mid(hex, 2, -1), 16))

to extract the RGB from the value
blink0k
AGK Developer
Gold Codemaster
6
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 12th Sep 2019 01:44
Do you have a color picker?
Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 12th Sep 2019 01:52
I tend to use the Mac OS one that lets you get the rgb values of any pixel on the screen if that's what you mean.
OryUI - A WIP AGK2 UI Framework
blink0k
AGK Developer
Gold Codemaster
6
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 12th Sep 2019 01:55 Edited at: 12th Sep 2019 01:56
I was thinking for your OryUI interface?

Attachments

Login to view attachments
Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 12th Sep 2019 08:02
Oh ok, then no not yet. Do you have any examples of mobile apps or games where this is used and useful? (aside from a painting/art app of course). Just trying to guage how useful it would be.
OryUI - A WIP AGK2 UI Framework
blink0k
AGK Developer
Gold Codemaster
6
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 12th Sep 2019 08:58
It might be good for setting the color of controls. text color, background color etc.
Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 12th Sep 2019 14:07 Edited at: 12th Sep 2019 14:08
OryUI is unfortunately a UI framework you have to code. There's no windows/mac program to design your app screens and position the components etc. so using a color picker to color the components won't be possible. Programming a visual designer would be nice, but probably beyond me at the moment, and definitely don't have the time.

Hopefully OryUI inspires TGC and they either copy it for AppGameKit Studio or create one like it so that we can create professional looking apps with it
OryUI - A WIP AGK2 UI Framework
Bored of the Rings
14
Years of Service
User Offline
Joined: 25th Feb 2005
Location: Middle Earth
Posted: 12th Sep 2019 14:19
only just saw this , I'll have a look and give it a try. many thanks.
Professional Programmer, languages: SAS, C++, SQL, PL-SQL, DBPro, Purebasic, JavaScript, others

Login to post a reply

Server time is: 2019-09-17 05:12:52
Your offset time is: 2019-09-17 05:12:52