Git Product home page Git Product logo

oryui's Introduction

OryUI logo

OryUI

OryUI (v0.16a) is a UI framework to be used with AGK2 (AppGameKit). It's written in Tier 1 and is a work in progress.

With it you can create the following UI widgets:

  • Buttons
  • Button Groups (Radio buttons)
  • Checkboxes
  • Dialogs
  • Edit Avatar Screen
  • Floating Action Buttons
  • HTTPS Queueing System (not a UI widget)
  • Input Spinners
  • Lists (1 or 2 line lists with left and right text, and thumbnail/icon images if required)
  • Menus (Drop down / pop up type menus)
  • Navigation Drawers
  • Pagination
  • Progress Indicators
  • Scroll Bars (including Fast Scroller)
  • Scroll To Top Button
  • Sprites
  • Switches
  • Tabs
  • Text
  • Text Cards (Simple cards, with title and supporting text)
  • Textfields
  • Tooltips
  • Top Bars

OryUI at the moment is set to work with percentage based positioning and sizing. The aim is to eventually have it work just as well with pixel based positioning and sizing (although I don't work with pixel based apps so it's not a high priority for me). This is an important fact to consider because a button 30% wide and 5% high will look much smaller if you're not using percentages because it will actually be sized as 30px wide and 5px high. Another example is the Edit Avatar screen which fills the screen when using percentages, but looks silly on pixel based positioning and sizing because it only fills 100x100 pixels of the screen.

How widgets are called and displayed may change slightly. All effort would be taken to make sure future changes made will not break old code in your app.

This repository includes an examples folder with a couple of AGK projects, including a kitchen sink demo which will eventually showcase most of the OryUI widgets. At the moment the kitchen sink only contains examples of a few widgets. More will be added over time.

OryUI will work with your programs if you use #option_explicit.

Installation

To include it in your project add the following line to the top of your script

#insert "..\OryUI\OryUI.agc"
#insert "..\OryUI\OryUIButton.agc"
#insert "..\OryUI\OryUIButtonGroup.agc"
#insert "..\OryUI\OryUICheckbox.agc"
#insert "..\OryUI\OryUIDialog.agc"
#insert "..\OryUI\OryUIEditAvatarScreen.agc"
#insert "..\OryUI\OryUIFloatingActionButton.agc"
#insert "..\OryUI\OryUIHTTPSQueue.agc"
#insert "..\OryUI\OryUIInputSpinner.agc"
#insert "..\OryUI\OryUIList.agc"
#insert "..\OryUI\OryUIMedia.agc"
#insert "..\OryUI\OryUIMenu.agc"
#insert "..\OryUI\OryUINavigationDrawer.agc"
#insert "..\OryUI\OryUIPagination.agc"
#insert "..\OryUI\OryUIProgressIndicator.agc"
#insert "..\OryUI\OryUIScrollBar.agc"
#insert "..\OryUI\OryUIScrollToTop.agc"
#insert "..\OryUI\OryUISprite.agc"
#insert "..\OryUI\OryUISwitch.agc"
#insert "..\OryUI\OryUITabs.agc"
#insert "..\OryUI\OryUIText.agc"
#insert "..\OryUI\OryUITextCard.agc"
#insert "..\OryUI\OryUITextfield.agc"
#insert "..\OryUI\OryUITooltip.agc"
#insert "..\OryUI\OryUITopBar.agc"
#insert "..\OryUI\OryUITouch.agc"
#insert "..\OryUI\OryUIDefaultSettings.agc"

You will also need to copy the OryUIMedia folder from this repository media folder into your media folder as a subfolder i.e. media\OryUIMedia.

The above insert lines are based on the files being placed in your project folder. You will need to change the insert paths if you place the files somewhere else.

A copy of AGK2 is required to use OryUI. For more information on AGK2 check out: https://www.appgamekit.com

For best results run your OryUI designed app on a mobile device via AGK Broadcast, or compile as APK/IPA and install the app on your device. You may experience flickering/bouncing when running the app in AGK Studio on your computer, at least on Mac OS. The flickering/bouncing doesn't happen on the device. Hopefully someone will find the reason for this bug and offer a solution in the future.

Example Main.agc

// Add the above OryUI #insert lines here along with the usual Set functions that get included in a new .agc file i.e.: SetScissor(0, 0, 0, 0)

#constant constHomeScreen 1
#constant constAboutScreen 2

#insert "HomeScreen.agc"
#insert "AboutScreen.agc"

OryUISetSyncRate(30, 0)

global screen as integer
screen = constHomeScreen

do
	select screen
		case constHomeScreen
			HomeScreen()
		endcase
		case constAboutScreen
			AboutScreen()
		endcase
	endselect
loop

Example Screen File i.e. HomeScreen.agc

function HomeScreen()
	SetViewOffset(0, 0)

	// Initiate Screen
	contentHeight# as float

	topBar as integer : topBar = OryUICreateTopBar("text:Home;depth:10")
	contentHeight# = contentHeight# + OryUIGetTopBarHeight(topBar) + 2
	
	button as integer : button = OryUICreateButton("text:About;offset:center;position:50," + str(contentHeight#) + ";depth:20")
	contentHeight# = contentHeight# + OryUIGetButtonHeight(button)
	
	// Manage Screen
	do
		OryUIInsertTopBarListener(topBar)
		if (OryUIGetButtonReleased(button))
			screen = constAboutScreen
		endif
		
		// Change Screen?
		if (screen <> constHomeScreen) then exit

		// Scroll Limits
		OryUISetScreenScrollLimits(0, 0, 0, contentHeight#)
		
		OryUISync()
	loop
	
	// Delete all OryUI created widgets
	OryUIDeleteAllWidgets()
endfunction

Documentation

I've started on some documentation which can be found here in the Wiki section: https://github.com/KevinCrossDCL/OryUI/wiki

Contributing

Please check out the How to contribute to OryUI guide for guidelines about how to proceed.

Screenshots

          

Showcase

ChastiKey (App Store / Play Store)

Feedback / Suggestions

This is the first framework I've attempted to create so any feedback, suggestions, and constructive criticsm will be greatly appreciated. You can contact me on the below forum post:

License

The OryUI framework is open-source software licensed under the MIT license.

The OryUI framework uses icons from the Material icons set. Material icons

oryui's People

Contributors

kevincrossdcl avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.