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
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 2nd Feb 2019 09:07 Edited at: 10th Jul 2020 09:39
Link
A long time ago I shared some functions for creating and updating sprites and text to reduce the number of SetSprite* and SetText* lines needed to create and update text and sprites.

https://forum.thegamecreators.com/thread/218912

I've recently been looking on building on those two that I use a lot with the plan to possibly create some basic UI framework that I could use in an existing app and all future apps I build with AGK. I don't use AppGameKit to build games, although there is a game element in my current app. I realise there are better languages and tools to build non gaming apps but I do love working with AppGameKit so will do as much as I can with it. I struggle to learn new things as well, probably through lack of motivation and time.

Anyway the reason for this post is that I want to get feedback on what I've created so far (which isn't much) before I get so far in to the framework and release the code for others to use and find out it's poorly done that is no good for anyone. And I'm also hoping it's something that can be built on and improved by others

Firstly I apologise for the lack of comments. I'm really bad with comments, but I can and will go through the code at a later date and add some.

I'm attaching two lots of code, the framework, and an example script which shows 4 UI elements: cards, buttons, sprites, and text. What I'm working on now is lists as I want a way to show a list of items in the current app.

For the buttons it has code to detect if a button was pressed or released by simply calling if (OryUIGetButtonPressed(button1)) or if (OryUIGetButtonReleased(button1))

One of the things I don't like with it so far and not sure a nice work around is the number of different parameters that I allow and how they're all named differently for each element which in time will get very confusing and easy to forget. If you look in the type typeOryUIParameters you will see all of the different parameters that each of the UI elements accept so far. For example to change the button text you'd use text, to change the card text you'd used titleText and contentText, for the List element that I've not yet finished (it's commented out) it'll be leftText and rightText. Some of the elements share the parameters so you may notice that to update a text element string you'd use text which is the same as the button.

Even though the parameters are named differently across them all I'm hoping that it's built in a way that it's easy to add another sprite function/setting to the list i.e. physicsOn:true which will call SetSpritePhysicsOn() for the sprite that's being created/updated. I don't use physics so I've not added them to this framework yet.

Framework
EDIT: The code is now too big to post on the forum so have uploaded to GitHub: https://github.com/KevinCrossDCL/OryUI

Examples


I like to work with percentage positioning and sizing as it's easier to work with so the default sizes of things would be really small if the VirtualResolution line was uncommented. It'll be easy to change the default sizes if you don't work in percentages. Maybe a constant variable would be needed to switch the default sizes based on your preference.

One problem with this framework is you can't delete items from the different collections so if you've created 50 buttons in the app you can't remove button 25 if you no longer need it, however it did dawn on me today that I can create some functions like OryUIDeleteButton(btnPlayAgain) which would at least delete the text and sprites that are assigned to the button. It couldn't remove the index from the collection because then all of the other buttons after that one would be broken.

What do you think of it so far? Please be honest with the feedback as the point is to get something that can be used by others, and hopefully something that others can build on and share too. A nice little open source UI framework for AppGameKit that's a breeze to use.

I've added a screenshot to show what the example script looks like in the AppGameKit Player
OryUI - A WIP AGK2 UI Framework

Attachments

Login to view attachments
Back to top
Profile PM Email
=PRoF=
21
Years of Service
User Offline
Joined: 17th Mar 2003
Location: Milton Keynes, UK
Posted: 2nd Feb 2019 11:16
Link
Nice! I will look at this properly on Monday. My own UI functions leave a fair bit to be desired.
Back to top
Profile PM Email Website
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 2nd Feb 2019 11:42 Edited at: 2nd Feb 2019 11:46
Link
Thanks =PRoF= I should have mentioned that these don't create native UI looking elements so the cards and buttons don't appear like native cards and buttons but with a bit of time/skill I reckon they could. All we'd need to do is create default looks based for each operating system that closely resemble those on that operating system.

Here's an example of the framework UI Cards in an app. I've placed the cards so that they are all joined but I was able to basically produce 4 of the sections and a button in the screenshots with the below lines. To keep the code readable I've removed some of the text substitution I'm doing on that screen and replaced it with X's.



What the framework can't do at the moment is show those playing cards (not UI cards) in a grid I'm thinking a gallery or image grid feature. Nor can it do the bar charts shown for the results from the simulation. Those I've had to add in other ways. Being able to create a bar chart from a few lines would be nice.

The framework also doesn't create any of the other stuff in these screenshots like the top bar and navigation or the scroll to top button.

Attachments

Login to view attachments
Back to top
Profile PM Email
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 2nd Feb 2019 15:15 Edited at: 2nd Feb 2019 15:15
Link
I now have a basic list with left and right text that can be created with 1 line and 1 line per list item. At the moment it can only insert at the end but that's why I've got a parameter to state which index you want the item added. -1 goes to the end of the list.



I will share the final code once I've got insert by index added. For now I'm going to start building what I've done into my own project.

Attachments

Login to view attachments
Back to top
Profile PM Email
puzzler2018
User Banned
Posted: 2nd Feb 2019 17:10
Link
This is impressive Works Kevin, keep it going.. will come very useful
Back to top
Profile
Rick Nasher
6
Years of Service
User Offline
Joined: 25th Jul 2017
Location: Amsterdam
Posted: 3rd Feb 2019 09:34
Link
Cool stuff.
Back to top
Profile PM Email Website
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 3rd Feb 2019 19:25 Edited at: 3rd Feb 2019 19:38
Link
I'm not 100% happy with the list code and set up so will hold off sharing as I may need to split the different type of lists out, i.e. lists with thumbnails, lists with 2 lines, lists with 1 line. At the moment they're all in one and that might be too much

But here's a rough example for creating a list similar to the one shown in the attached screenshot.



The attached screenshot is how it looks inside my app populated with real data. I do however have the multiple OryUIUpdateListItem lines shown above in a for loop, so even less code.

Attachments

Login to view attachments
Back to top
Profile PM Email
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 4th Feb 2019 02:01 Edited at: 4th Feb 2019 02:05
Link
Here's a new version that includes lists.

You can create 1 line, and 2 line list items. I haven't added 3 in yet. I've added a to do list on the list section for this and other list stuff.

You can also have images on the left of each item in the list

I've added some comments, mainly at the top of each section, and I've moved everything about in the file so that each component is grouped with it's own type, globals and functions.

I can't seem to post with the full code included so have uploaded to GitHub. I'm new to GitHub so probably haven't got everything set right. Will look into it soon.

Framework
https://github.com/KevinCrossDCL/OryUI

Example


The above example produces the list shown in the attached image.

I'm in the middle of updating my current app and building on this at the same time so not sure what will be added in next but it's definitely going to get more added to it.

Attachments

Login to view attachments
Back to top
Profile PM Email
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 14th Feb 2019 20:07 Edited at: 14th Feb 2019 20:36
Link
I've started using this site as a guide to designing the components: https://material.io/design/components/text-fields.html

It looks like it's an open source framework so hopefully not doing anything wrong by doing so. I've been working on the textfield. It's not quite finished as I need to create a function to get the text typed, and there's no customisation added to it yet but thought it looked pretty good as is.



Textfields aren't available in the github version yet and the cards will most likely be replaced completely so that I can get something similar to the ones shown in: https://material.io/design/components/cards.html. Just lacking time at the moment as I'm trying to update another app and put some of this into it.

I'm not creative enough to create a framework that's unique and doesn't look like one particular operating system so it's getting the Android look and feel. My current app has an Android'ish look and feel, even on iOS.

Just to show how simple it is to get that exact same textfield here's the code:


P.S. please ignore the fact I can't spell my name in the video.
OryUI - A WIP AGK2 UI Framework
Back to top
Profile PM Email
=PRoF=
21
Years of Service
User Offline
Joined: 17th Mar 2003
Location: Milton Keynes, UK
Posted: 14th Feb 2019 20:58
Link
Sorry it's taken so long to get back to you about this, it's been a busy few days, but I'm really impressed! I had a quick mess around with it, and I can't wait to see it when it's more finished

Keep it up dude
Back to top
Profile PM Email Website
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 14th Feb 2019 21:20
Link
Thank you =ProF=. Yeah while some of its usable it's probably not a good idea to really use it at the moment as I'm likely to change things drastically as I work on it. For example I definitely want to change the cards when I have time. But I want to openly share the code. Someone might find something from it useful or have some good ideas on how it can be improved.
OryUI - A WIP AGK2 UI Framework
Back to top
Profile PM Email
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 14th Feb 2019 21:59
Link
Here's a quick example showing different coloured edit boxes and the code to produce them. I haven't got the edit box text coloured yet so it doesn't really work with dark coloured edit boxes. It's easy enough to do but not really sure what to call the parameter for the edit box text colour and I don't need dark textfields yet.

Also if no labelText is given then really the Placeholder label shown in purple shouldn't really be shown. I'll get that sorted soon.



OryUI - A WIP AGK2 UI Framework

Attachments

Login to view attachments
Back to top
Profile PM Email
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 16th Feb 2019 11:17 Edited at: 16th Feb 2019 11:18
Link
A question for those that have created libraries of code that they use in their projects and include in a similar way to this:

#insert "..\OryUI Framework\OryUI.agc"

Do you also have a library of common images that you would load in a similar way, or do you copy all of the images into the project folder?

I've created a floating action button (https://material.io/design/components/buttons-floating-action-button.html#anatomy) and have created a simple save icon png file but I can't seem to get the path right to load it.

Here's how the project looks folder structure wise:

+ OryUI Framework\
++ OryUI.agc
++ media\
+++ Icon-Save.png

+ My Project\
++ media

In my project main agc file I'm including the framework i.e.: #insert "..\OryUI Framework\OryUI.agc"

And in the OryUI.agc file I have this LoadImage line:

global oryUIIconSave as integer : oryUIIconSave = LoadImage("Icon-Save.png")

I've tried a number of different paths including:

LoadImage("media\Icon-Save.png")
LoadImage("..\OryUI Framework\media\Icon-Save.png")

Will I have to copy all of the framework images into my project? That's ok, but if it's possible not to then I'd prefer that.
OryUI - A WIP AGK2 UI Framework
Back to top
Profile PM Email
Ortu
DBPro Master
16
Years of Service
User Offline
Joined: 21st Nov 2007
Location: Austin, TX
Posted: 16th Feb 2019 16:59
Link
You could probably load them from a common folder outside of the project while developing, but you'd have to move them into ther project media for distribution so might as well just copy to media to start with something like

Agk/projects/oryuimmedia as your source
Then copy to new projects
Agk/projects/game1/media/oryuimedia
Agk/projects/game2/media/oryuimedia
http://games.joshkirklin.com/sulium

A single player RPG featuring a branching, player driven storyline of meaningful choices and multiple endings alongside challenging active combat and intelligent AI.
Back to top
Profile PM Email Website
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 16th Feb 2019 17:09 Edited at: 16th Feb 2019 18:31
Link
Ok thanks for confirming. I'll keep them in a seperate folder like you suggested, but inside the projects media folder
OryUI - A WIP AGK2 UI Framework
Back to top
Profile PM Email
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 22nd Feb 2019 21:57 Edited at: 22nd Feb 2019 22:06
Link
Here's a couple of screenshots showing a number of OryUI elements

* The camera button on the profile pic and the save button bottom right is a OryUIFloatingActionButton. You can place this on the screen like this "placement:bottomRight" and if you want to attach it to the bottom right of the sprite like the screenshot it's "attachToSpriteID:<spriteID>;placement:bottomRight"
* The username is using the above mentioned OryUITextfields (fully working)
* The horizontal radio buttons are using OryUIButtonGroup (fully working)
* The different sections which has a header text and smaller text is a OryUICard, although I still plan to rewrite this component
* And where my Discord username is showing that's a OryUIList component which now has right icons (only delete at the moment) To change the icon it's as simple as "rightIcon: Delete" or "rightIcon:Edit"

The right icon on the list hasn't been programmed to do anything yet. Need to have a think of the best and simplest way to do this as the list could have multiple items so need to know which icon was pressed and decide how to action it. Even a delete button opens up problems as I have to think how can I set it so that the person using this framework can decide whether or not they want a confirm delete alert, and if so what wording they want to use. I need the delete button in this app I'm updating in the screenshots so will have to come up with something.

The version on GitHub hasn't been updated with all of this yet but I have made a lot of improvements with the code.

The framework still does not include the top bar and back button, or the button at the bottom which scrolls the screen back to the top

At the moment to keep each component manageable I've split them out into seperate files which get included at the top like this:

OryUI - A WIP AGK2 UI Framework

Attachments

Login to view attachments
Back to top
Profile PM Email
=PRoF=
21
Years of Service
User Offline
Joined: 17th Mar 2003
Location: Milton Keynes, UK
Posted: 22nd Feb 2019 23:47
Link
The more I see of this, the more and more impressed I am.
Back to top
Profile PM Email Website
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 24th Feb 2019 12:17 Edited at: 24th Feb 2019 12:17
Link
I've now updated GitHub with the latest version I have. It's unlikely I'm going to make any more drastic changes to the existing components. It'll be mainly fixing any bugs and adding new stuff to an existing component. The existing parameters are unlikely to change too, so any changes made hopefully shouldn't break your app/game.

https://github.com/KevinCrossDCL/OryUI

I still haven't finished the card how I want so I've kept the old version of the card and called it OryUITextCard as it only has text elements on it.

I do plan to add a lot more to this over time including the top bar and navigation. I'll update this post as and when I do.

I've updated the Wiki pages on GitHub for each component and all should have example code.

Please let me know what you think, and if you encounter any problems, or have suggestions for improvements.
OryUI - A WIP AGK2 UI Framework
Back to top
Profile PM Email
ghzero
6
Years of Service
User Offline
Joined: 13th Jun 2017
Location: Germany
Posted: 2nd Mar 2019 08:54
Link
Hi Kevin,
thank you very much for sharing of your work.

best regards,
ghzero
Back to top
Profile PM
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 3rd Mar 2019 21:45 Edited at: 4th Mar 2019 13:20
Link
Here's a sneak peek at the profile image moving and scaling screen. This can be called with two lines of code once you've picked an image from your gallery



There is obviously more code for the avatar on the first screen and the floating action button, but the 2 lines of code above creates the black screen, and acts on each of the buttons, panning and zooming.

profilePicID in the code is the image ID from GetChosenImage()

I'll be adding this to the framework on GitHub soon



You currently have an option to have a circle frame like the one shown in the video or a square one. The final image is always cropped as a square image, including the circle frame shown in the video. To return/access the final image it's as simple as: OryUIGetFinalProfileImage(editImageScreen)

P.S. having watched the video I can see that the background behind the picture that's being panned and zoomed is not black. It should have been, I must have changed it before creating that video. It should be black by default, or will be in the final code.
OryUI - A WIP AGK2 UI Framework
Back to top
Profile PM Email
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 4th Mar 2019 14:04
Link
I forgot to ask. Does anyone know if this type of screen in my last post has a specific name? I'm calling it ProfileImageScreen until I find out that there's a better or actual name for such a screen.
OryUI - A WIP AGK2 UI Framework
Back to top
Profile PM Email
blink0k
Moderator
11
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 4th Mar 2019 20:37
Link
I think the term for it is "Avatar"
Back to top
Profile PM
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 4th Mar 2019 22:23
Link
Thanks blick0k but does the actual screen type have a special name, a screen where you can pan and zoom your avatar in a frame? I can call it AvatarImageScreen but would rather call it by its correct name if the screen has a proper name.
OryUI - A WIP AGK2 UI Framework
Back to top
Profile PM Email
Ortu
DBPro Master
16
Years of Service
User Offline
Joined: 21st Nov 2007
Location: Austin, TX
Posted: 4th Mar 2019 22:41
Link
Don't think it has a specific name, it is usually just part of the "select avatar" workflow

Any combination of select, choose, edit, avatar, image, profile, photo, and so on. I've seen them all, there's no common standard
http://games.joshkirklin.com/sulium

A single player RPG featuring a branching, player driven storyline of meaningful choices and multiple endings alongside challenging active combat and intelligent AI.
Back to top
Profile PM Email Website
blink0k
Moderator
11
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 4th Mar 2019 22:43
Link
Facebook calls it "Edit thumbnail"
Back to top
Profile PM
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 4th Mar 2019 23:07
Link
Thank you. I had already renamed all of the functions to Edit Avatar before seeing your last post but Avatar as you originally said sounds better, and better than thumbnail because the avatar might be displayed as a large image in some apps.
OryUI - A WIP AGK2 UI Framework
Back to top
Profile PM Email
blink0k
Moderator
11
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 4th Mar 2019 23:08
Link
I prefer avatar as well. Thumbnail is really just an image
Back to top
Profile PM
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 5th Mar 2019 08:56 Edited at: 5th Mar 2019 08:56
Link
The GitHub repo has now been updated with the EditAvatarScreen component. There's a working example script on the wiki page showing how to use it. There's more code than I liked in the example but a chunk of that is choosing the image from your gallery, and dealing with the floating action buttons.

The absolute minimum code required for it is pretty much this:

OryUI - A WIP AGK2 UI Framework
Back to top
Profile PM Email
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 10th Mar 2019 11:41
Link
I'm working on OryUITopBar at the moment. There will be two versions you can pick from, standard, and extended. You can add action icons to the right and change the navigation icon on the left. You can also align the title text. Changing the colours of all elements is also possible, but not shown in the attached screenshot.



What it doesn't do at the moment is put extra actions into a drop down menu if there's 3 or more, or based on the users setting. I personally don't need this at the moment as the most actions I need on the right is 2, but it may get added later on. With extended on you could produce a similar top bar as the one in the Xbox app where it has 6 icons on the top row and the page title below it centred.

The top bar component is being based on the information on this page: https://material.io/design/components/app-bars-top.html

Here's some examples on how to create each of the 3 top bars in the attached screenshot:

1.


2.


3.


It's not available on GitHub yet but will be soon, just need to program it so that it reacts to the button presses.
OryUI - A WIP AGK2 UI Framework

Attachments

Login to view attachments
Back to top
Profile PM Email
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 18th Mar 2019 20:03
Link
Still no new code to share at the moment but I have added 3 new components to the mix. OryUIProgressIndicator, OryUITabs, and OryUITopBar. Based on these:

https://material.io/design/components/progress-indicators.html
https://material.io/design/components/tabs.html
https://material.io/design/components/app-bars-top.html

Mine do not have full functionality shown in those pages, just the minimum that I currently need.

I'm working on a drop down menu now and wanted to see how anyone else might go about adding a shadow underneath a sprite. I can create an image with a shadow and place it underneath (that's what I did with the OryUIFloatingActionButton component) but that may cause problems when menus are sized in a way that the shadow sprite underneath appears stretched or distorted.

Is this some that could be done with maybe shaders? Shaders aren't my forte, and I don't understand them at all. I've attached an image showing a drop down menu with a shadow underneath it. Not my work but something I'd like to replicate.

Also, the reason why nothing has been updated on github yet is I'm working on this while re-building my app with it so it takes a bit of time. Writing the accompanying wiki pages for each new component takes time too. I'm working on the Menu component now because my app currently has drop down menus in several places, for example filtering and sorting items on the screen but it's too fiddly to add new ones when I need them.

OryUI - A WIP AGK2 UI Framework

Attachments

Login to view attachments
Back to top
Profile PM Email
ghzero
6
Years of Service
User Offline
Joined: 13th Jun 2017
Location: Germany
Posted: 19th Mar 2019 16:04
Link
Hey Kevin,
thank you for your time and your power to share your UI-Framework with us - I really know that an UI-Framework is really really needed by most of us to complete fancy apps ...games of course too...
best regards and keep going on - I am looking forward to future to download your reworked UI-Framework to play and code with it.
Back to top
Profile PM
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 19th Mar 2019 16:39
Link
Thank you. I will get a new version out as soon as I can.

I've noticed when copying components to create new ones that I haven't been 100% consistent with things where I've made improvements to new ones and not applied the same learnings to the old ones, so some will change slightly behind the scenes, hopefully without breaking things.

My main priority is to get as much of it in place as I can, based on what I need right now and then go through and tidy it up when I have more time. I also want to offer a way to easily theme your UI by setting a bunch of constants which will be used in all of the components so if you want a blue UI you can set a couple of constants accordingly and all UI components will be set as blue by default without you having to put "color:0,0,255" on each one you add to your app. Same with default sizes for everything. It also needs an easy way for you to add your own custom icons to it too. So far the UI only has about 5 different icons which you can use on lists, floating action buttons, and the menu. Icons like: add, delete, and camera. But I know more are needed, and there will probably be times where you need unique/custom ones.
OryUI - A WIP AGK2 UI Framework
Back to top
Profile PM Email
haliop_New
User Banned
Posted: 21st Mar 2019 14:00
Link
this looks very promising!
Back to top
Profile
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 24th Mar 2019 17:19 Edited at: 24th Mar 2019 17:22
Link
The version on GitHub now has OryUIMenu, OryUIProgressIndicator, OryUITabs, and OryUITopBar

As mentioned in my previous post, I haven't been consistent and don't have time to go through it and tidy it up, so things may change slightly when I do.

https://github.com/KevinCrossDCL/OryUI/

I've attached a number of screenshots showing the tabs, top bar, menu, textfields, floating action buttons, and button groups etc. in a work in progress app rewrite.

Let me know what you think if you play around with it. I'm open to suggestions, fixes, and improvements

The list of recent changes can be found in this file: https://github.com/KevinCrossDCL/OryUI/blob/master/changelog.txt
OryUI - A WIP AGK2 UI Framework

Attachments

Login to view attachments
Back to top
Profile PM Email
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 25th Mar 2019 00:11
Link
I'm working on the next version and now have the OryUIButtonGroup component showing icons.

When you have text and icons on the buttons it will automatically centre them both (as seen in the attached screenshot)
OryUI - A WIP AGK2 UI Framework

Attachments

Login to view attachments
Back to top
Profile PM Email
haliop_New
User Banned
Posted: 25th Mar 2019 09:03
Link
regardless of my reasons to open this forum when I wake up, there is another reason.
OryUi.

this is truly incredible.

Do you know what I was thinking?

Ios/Android UIs

get my point?

like, all android UI looks about the same, and all IOS UI looks about the same...
why don't you, check to see if you are on Android, then show the android type UI
and if you are on IOS, then show the IOS UI type

and obviously, make an integer to select "Do you want to override and show Android on Ios or Ios on android "
ha, that would be incredible! , I would actually buy this without a second thought.
Back to top
Profile
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 25th Mar 2019 09:24
Link
@haliop_New that is the plan (eventually), to have it switch designs based on the device OS. My app has always had the Android look, even on Apple which I admit isn't good, but thankfully Apple hasn't complained yet, neither have the users.

I'm really struggling with time at the moment but after my next big app update (which could take another month or so) I plan to focus more on this as I enjoy working on it and seeing how far it can be taken. I also want to look at having an option to use json data when setting each component, probably as an extra option which will probably be quicker. But at the moment I don't know how to set all variables that weren't called in the function parameters via json as -999999 like I do now with the long strings. If anyone has any ideas please share. I think it would make things run quicker because at the moment the app chops up that string, so the longer the string the slower it is, especially if you have a page full of them.
OryUI - A WIP AGK2 UI Framework
Back to top
Profile PM Email
haliop_New
User Banned
Posted: 25th Mar 2019 10:56
Link
why not build your own Scripting lang?

meaning, you choose what is where,

so something like this:

byte 1 - 255 (using agk file commands)
so you have 255 options, your code should be familiar with these options, so its more for you to code, but less the length of the strings.
once you go Integer, you'll have 32,000,000 options

so,
floats will just keep the positions and sizes of the UI elements.
bytes will hold everything that is not above the 255 option limits.
and integer only where you need them to be.

do you understand?
I have already done something like this, to create massive images and textures... an 8k res image costs only like 250 KB with layers and animations etc..
Back to top
Profile
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 25th Mar 2019 11:23
Link
If you're able to provide some basic examples of what you've done without showing your full code then that would be great because I'm not sure I'm understanding what you're saying.

I'm using -999999 as the equivalent of null because you're not likely to ever use those numbers as values in your app. It's the closest I can get to null.

Using json without doing this I believe would set all variables you've not defined as 0 and then it will position everything to 0,0 if you didn't specifically set the position in the create or update line for that component.

So I want the user to be able to define the settings for a button with json i.e. '{ "size": "30, 5", "text": "Press Me", "color": "150, 150, 150, 255" }' and be sure that all other valid options for that button aren't set as 0 by default because they weren't defined, but instead set as a number no one is likely to ever use i.e. -999999

That way when I check to see if they've provided the position I can search for OryUIParameters.position#[1] and [2] and make sure that the value is greater than -999999, if it isn't then I ignore that setting and then check the next, like text color. etc. Defaulting to 0 for variables didn't provide in the json line will cause a lot of issues as 0 is a valid and acceptable value.

Something like this when creating types would have been great



The OryUI.agc file shows how I'm defining, reading, and chopping up the semi-colon delimited strings.
OryUI - A WIP AGK2 UI Framework
Back to top
Profile PM Email
haliop_New
User Banned
Posted: 25th Mar 2019 12:02
Link
do you have WhatsApp?
here is my email, send me your WhatsApp or telegram so we can talk in RT.
I'll probably have a solution for you until the day is over just want to know a bit more.
Nadav.rosenberg787@gmail.com
Back to top
Profile
ghzero
6
Years of Service
User Offline
Joined: 13th Jun 2017
Location: Germany
Posted: 25th Mar 2019 15:26 Edited at: 25th Mar 2019 15:35
Link
Hi Kevin,
great to notice that you have released beta0.2 - thank you!!! Iam currently playing around with the buttons and figuring out how to use them ideal and wise in games.

if you need/want ideas for future improvements - I can fill out this easy...
-an good idea is to have examples for each main-feature in an simple and an fancy(eye-candy-like) way to show whats possible and how.
-I currently notice that I need function to know about the amount of pressed and/or released buttons in sum to know if an button was pressed/released exclusive(only this one).
-for games settings an slider (horizontal) is useful for example to adjust the brightness; it is generally an rectangle areas that present an value range and visual moving pointer on touch to show on which level the settings is currently.
-another fine things are scrolling content; from bottom to upper way, from right to left - just to view informations....possible with auto-movement and/or manually movement by touch.

anyway thank you and keep you work up.
Back to top
Profile PM
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 25th Mar 2019 15:42
Link
@ghzero, thanks, and yes I'm open to feedback and suggestions.

For games, you can add images to the buttons (not icons, that's next version) but using an imageID you can skin the button so that it doesn't look like a plain box button.

Also there's two functions in the OryUITouch.agc which can also be used for buttons (much simpler than buttons if you don't want text labels on them):

OryUIGetSpritePressed()
Returns the last sprite ID pressed.

OryUIGetSpriteReleased()
Returns the last sprite ID released.

They are the equivalent to GetSpriteHit but take into account releasing touch on the same sprite that you originally touched etc. so swiping your finger all around the screen won't trigger code that GetSpriteHit might.

You'll need to include the two required touch tracking functions to your main game loop if you want to use the above functions.

OryUI - A WIP AGK2 UI Framework
Back to top
Profile PM Email
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 25th Mar 2019 15:52 Edited at: 25th Mar 2019 16:03
Link
Quote: "
-an good idea is to have examples for each main-feature in an simple and an fancy(eye-candy-like) way to show whats possible and how.
"

Once I have more time I'd like to produce basic templates to mirror existing apps as close as I can with the framework so maybe a basic SnapChat or WhatsApp template. Not fully working templates.

I find updating the GitHub wiki pages a bit laborious and not that fancy. I expect that it will eventually move to OryUI.com where it can be a little more visual. It's just a problem with lack of time at the moment.

Quote: "
-I currently notice that I need function to know about the amount of pressed and/or released buttons in sum to know if an button was pressed/released exclusive(only this one).
"

Is that you need a function that's not available? I don't fully understand your need so please explain a little further.

Quote: "
-for games settings an slider (horizontal) is useful for example to adjust the brightness; it is generally an rectangle areas that present an value range and visual moving pointer on touch to show on which level the settings is currently.
"

I had sliders in an earlier version of my app. I can look at adding those in, and in a way that it only needs one or two lines of code to add.

Quote: "
-another fine things are scrolling content; from bottom to upper way, from right to left - just to view informations....possible with auto-movement and/or manually movement by touch.
"

You can scroll the screen with touch in the framework already. Check out the OryUISetScreenScrollLimits(minX, maxX, minY, maxY) function: https://github.com/KevinCrossDCL/OryUI/wiki/OryUITouch

You will need the two tracking functions I mentioned above.

OryUISetScreenScrollLimits(0, 1000, 0, 1000) will let you pan a scene that's 1000x1000% in size (remember everything with the framework is percentage based at the moment). And that's from ViewOffsetX 0 to ViewOffsetX 1000 so if you want to restrict the movement to say ViewOffsetX 250 and ViewOffsetX 500 you'd set it like this: OryUISetScreenScrollLimits(250, 500, 0, 1000). Can't remember what happens if the ViewOffsetX is currently 0 when you set the limits.

In my app I move to the screen by adjusting the viewoffset and then apply the screen scroll limits. I have all of the different screens side by side on the scene so splash screen at ViewOffsetX() = 0, screen one at ViewOffsetX() = 100, and screen two at ViewOffsetX() = 200 etc.
OryUI - A WIP AGK2 UI Framework
Back to top
Profile PM Email
ghzero
6
Years of Service
User Offline
Joined: 13th Jun 2017
Location: Germany
Posted: 27th Mar 2019 15:42 Edited at: 27th Mar 2019 15:44
Link
Quote: "Quote: "
-I currently notice that I need function to know about the amount of pressed and/or released buttons in sum to know if an button was pressed/released exclusive(only this one).
"

Is that you need a function that's not available? I don't fully understand your need so please explain a little further.
"


Hi Kevin,
reason is; I want to know in my app if the pressed button was pressed exclusive. (my definition of exclusive = user pressed only this single button.)
so I created an function to count the amount of the currently pressed buttons to know about this situation.
the reason behind this checking of exclusivity is : in my app the user is going to choice that are sensible and should not used together with opposite choices.

in this context I noticed that the pressed button flags are not perfectly falls back to not pressed anymore - if I use mouseclicks in windows.
(I investigate this and will come back after testing results .)
Back to top
Profile PM
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 27th Mar 2019 18:04 Edited at: 27th Mar 2019 18:05
Link
If you want exclusive buttons then check out OryUIButtonGroup. It works the same as radio buttons where you can only pick one choice in the group.

And thanks in advance for any details you give for bugs you find. I've found a bunch which will be fixed in the next version. Going to try and get basic dialogs and possibly a navigation menu before the next release. I need both.

haliop_New came up with a way that I can probably switch it json which may increase speeds when you have long parameter strings. It doesn't make much sense to manage both versions overtime so the long string version may be replaced. I will need to do some testing first. Just saying this in case you invest too much time with it and I make the switch. I didn't want to break code but I guess its inevitable at this early stage.
OryUI - A WIP AGK2 UI Framework
Back to top
Profile PM Email
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 27th Mar 2019 22:08 Edited at: 27th Mar 2019 23:08
Link
Not finished yet but here's some examples of Dialogs.

They by default autosize (height only) to the content and buttons that exist, although this part of code needs tidying up a bit. You also have the option to stack the buttons. I haven't got buttons aligning to the centre yet but I was working from this page where they're all aligned to the right. They also auto position to the centre of the screen when shown and all other actions like scrolling of the screen is disabled until the alert is closed. There's a faded black sprite covering the background behind the alert which the below site calls a Scrim.

https://material.io/design/components/dialogs.html#specs

Here's the code that creates each 3 versions. The last two look a bit bad with the colours chosen, but wanted to show that all of it should be customisable. You can make the button backgrounds the same colour as the alert window if you wish like example 1. If there's a picture in the background you would have to make them transparent instead.

Example 1


Example 2


Example 3 (background image was taken from pixabay)


My current app has similar dialogs that also shows a "Do not show again" tickbox message, so I will get that into the framework as well.

What's the appropriate word or name for making all buttons on the same row the same width and to fit to main parent width, in this case the dialog window? Looking for a good parameter name to use for this as it's going to be an easy thing to do, just can't think of a suitable and descriptive name to use.

EDIT: It's called 'flex' in CSS so I called it flexButtons and have uploaded 3 more images (examples 4, 5, and 6) which show flexButtons set as true
OryUI - A WIP AGK2 UI Framework

Attachments

Login to view attachments
Back to top
Profile PM Email
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 2nd Apr 2019 00:05 Edited at: 2nd Apr 2019 00:06
Link
A preview of the OryUINavigationDrawer component. As seen in the screenshots you can have it at the left (default), right or bottom. The left and right menus scroll if there's options out of view, the bottom doesn't yet.

The text size, icons, and padding will be adjusted as the options are a bit too close each other. I'll also be adding a header section to the menu where you can add larger text, and image(s), like a background image and/or avatar.

Here's some example code which produces the attached screenshots

OryUI - A WIP AGK2 UI Framework

Attachments

Login to view attachments
Back to top
Profile PM Email
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 3rd Apr 2019 00:17
Link
Looking a bit more polished now don't you think? I don't have access to many icons so using the same camera one, but each row can have a seperate one.

I'm going to leave the bottom menu out for now.
OryUI - A WIP AGK2 UI Framework

Attachments

Login to view attachments
Back to top
Profile PM Email
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 10th Apr 2019 22:35 Edited at: 10th Apr 2019 22:57
Link
I've just created a simple InputSpinner component for setting numerical values. I will definitely look at getting sliders set up soon. I'm going to try and get a new version that has new components and lots of fixes ready for github by this weekend.

I've uploaded a second screenshot that shows that the numbers in the centre of each InputSpinner is actually an editbox which can be changed by typing a value.



Can't remember if I said this but I tested one or two components with JSON and there wasn't much of a speed difference for it to be worth rewriting so I won't be making that major change to the framework.
OryUI - A WIP AGK2 UI Framework

Attachments

Login to view attachments
Back to top
Profile PM Email
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 13th Apr 2019 11:58
Link
Version 0.3a is now available on GitHub. Lots of fixes and the following new components have been added:

* OryUIDialog
* OryUIInputSpinner
* OryUINavigationDrawer
* OryUITooltip

Please let me know what you think, and any feedback/suggestions you might have.

https://github.com/KevinCrossDCL/OryUI/
OryUI - A WIP AGK2 UI Framework
Back to top
Profile PM Email
Back to top

Login to post a reply

Server time is: 2024-04-16 22:57:22
Your offset time is: 2024-04-16 22:57:22