Skip to content
Snippets Groups Projects
Commit 117543b2 authored by StarArawn's avatar StarArawn
Browse files

Beef up the READEME.

parent 60f92a8f
No related branches found
No related tags found
No related merge requests found
# kayak_ui <p align="center">
\ No newline at end of file <img src="images/kayak.svg" alt="Kayak UI" width="600" />
</p>
<br/><br/><br/><br/>
<h1>
<p align="center">
Kayak UI
<p>
</h1>
## What is Kayak UI?
Kayak UI is a declarative UI that can be used to make user interfaces in Rust primarily targeting games. It's free an open-source!
<br/>
## WARNING
Kayak UI is in the very early stages of development. Important features are missing and documentation is non-existent. There are a few weird oddities because of how the rsx proc macro works, but these could be fixed in the future. Currently kayak is built to be used inside of bevy and as such the existing renderer is built with that in mind, however Kayak UI is render agnostic and could be rendered using any modern rendering API.
<br/>
## Features
- Easy to use declarative syntax using a custom proc macro
- Basic widget and global state management
- Input events
- Fast and accurate layouts using morphorm: https://github.com/geom3trik/morphorm
- A bunch of default components check out `kayak_components`!
- Style system built to kind of mimic CSS styles.
- Image and Nine patch rendering.
## Bevy Renderer Features
- Image and NinePatch renderer
- Fast MSDF Font renderer
- Quad renderer with rounded corners.
- Custom UI node to ensure UI renders on top of 3D and 2D entities.
- Fully integrated into bevy to capture input events, use bevy assets(images, etc).
## Example Screenshot
<img src="images/screen1.png" alt="Kayak UI" width="600" />
<br/><br/>
## Declarative
Kayak UI makes it painless to build out complex UI's using custom or pre-built widgets. Custom widgets are layed out in a XML like syntax that allows you to more easily visualize the widget tree. Here's an example of that syntax:
```rust
rsx! {
<App>
<Button styles={Some(play_button_styles)}>
<Text
size={30.0}
content={"Hello World!".to_string()}
/>
</Button>
</App>
}
```
You can easily declare your own custom widgets:
```rust
#[widget]
pub fn MyCustomWidget(children: Children, styles: Option<Style>) {
rsx! {
<>
{children}
</>
}
}
```
<br/>
## Widget State
```rust
#[widget]
fn Counter(context: &mut KayakContext) {
let count = {
let x = context.create_state(0i32).unwrap();
*x
};
let id = self.get_id();
let on_event = OnEvent::new(move |context, event| match event.event_type {
EventType::Click => {
context.set_current_id(id);
context.set_state(count + 1);
}
_ => {}
});
rsx! {
<>
<Window position={(50.0, 50.0)} size={(300.0, 300.0)} title={"Counter Example".to_string()}>
<Text size={32.0} content={format!("Current Count: {}", count).to_string()} />
<Button on_event={Some(on_event)}>
<Text size={24.0} content={"Count!".to_string()} />
</Button>
</Window>
</>
}
}
```
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="400px"
height="auto"
viewBox="0 0 105.15361 35.339237"
version="1.1"
id="svg5"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
sodipodi:docname="drawing.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="3.0003928"
inkscape:cx="234.80259"
inkscape:cy="44.160884"
inkscape:window-width="1920"
inkscape:window-height="1027"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="layer1"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<defs
id="defs2">
<linearGradient
id="linearGradient1220"
inkscape:swatch="solid">
<stop
style="stop-color:#ffffff;stop-opacity:1;"
offset="0"
id="stop1218" />
</linearGradient>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-34.545261,-95.557219)">
<path
id="path5390"
inkscape:connector-curvature="0"
sodipodi:nodetypes="csssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssscccccccccc"
style="opacity:1;mix-blend-mode:lighten;fill:#000000;stroke:#ffffff;stroke-width:0.555625;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:2.3;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 106.97339,95.844462 c -0.22224,-0.03308 -0.44794,0.04183 -0.66913,0.08138 -0.23785,0.04253 -0.53727,-0.0063 -0.70528,0.167277 -0.14758,0.152485 -0.014,0.444024 -0.12659,0.623914 -0.15798,0.252442 -0.4971,0.334116 -0.70982,0.542528 -0.18996,0.186132 -0.42021,0.369385 -0.49731,0.623914 -0.093,0.306864 0.0816,0.637831 0.0814,0.95848 0,0.473445 -0.18325,0.945621 -0.12206,1.415095 0.042,0.32237 0.22627,0.60968 0.33004,0.91779 0.0882,0.26198 0.0757,0.57555 0.24865,0.79118 0.12083,0.15061 0.38656,0.13443 0.50184,0.28935 0.14509,0.19503 0.13922,0.46834 0.16728,0.7098 0.024,0.20658 0.12516,0.45781 0,0.62391 -0.12171,0.16153 -0.38137,0.17978 -0.58322,0.16728 -0.21093,-0.0131 -0.38986,-0.33395 -0.58322,-0.24865 -0.22938,0.10117 -0.15034,0.47918 -0.24866,0.70979 -0.0484,0.11346 -0.0731,0.25044 -0.16728,0.33004 -0.17841,0.15074 -0.46296,0.0982 -0.66913,0.20797 -0.15704,0.0836 -0.2777,0.22254 -0.41592,0.33457 -0.22219,0.18004 -0.44953,0.35407 -0.66461,0.54253 -0.25821,0.22623 -0.58002,0.4073 -0.75049,0.70527 -0.15577,0.27228 -0.12339,0.61571 -0.20798,0.91779 -0.0832,0.29691 -0.21986,0.57777 -0.29388,0.87709 -0.081,0.32758 -0.10406,0.66686 -0.16275,0.99915 -0.0392,0.22208 -0.0356,0.45823 -0.12659,0.6646 -0.0842,0.19113 -0.25295,0.33253 -0.37526,0.50184 -0.12802,0.17724 -0.290515,0.33644 -0.375235,0.538 -0.08798,0.20926 -0.105396,0.44313 -0.126589,0.66914 -0.01302,0.13804 0.0822,0.30429 0,0.41592 -0.111358,0.15123 -0.386081,0.0569 -0.538004,0.16728 -0.137311,0.0998 -0.14858,0.32814 -0.293873,0.41593 -0.275828,0.16665 -0.639445,0.0809 -0.95848,0.12659 -0.26416,0.0378 -0.525859,0.0935 -0.791183,0.12206 -0.220686,0.0237 -0.443865,0.0639 -0.664607,0.0407 -0.258172,-0.0271 -0.492231,-0.18174 -0.750491,-0.20796 -0.220903,-0.0224 -0.456141,-0.0313 -0.66458,0.0452 -0.307605,0.11283 -0.561472,0.34959 -0.791184,0.58322 -0.202313,0.20573 -0.451855,0.42111 -0.501835,0.70527 -0.01762,0.10011 0.145889,0.21531 0.08139,0.29387 -0.838994,1.02201 -2.722033,0.18107 -3.95605,-0.29387 -0.295698,-0.1138 -0.465931,-0.72247 -0.750491,-0.58322 -0.124536,0.0609 0.122161,0.35039 0,0.41592 -0.175318,0.0941 -0.360018,-0.18604 -0.497311,-0.33004 -0.16837,-0.17657 -0.1867,-0.4736 -0.375258,-0.62844 -0.159504,-0.13098 -0.388091,-0.14067 -0.583221,-0.20796 -0.373936,-0.12898 -0.7493,-0.25377 -1.125749,-0.37526 -0.664104,-0.21433 -1.322705,-0.44932 -1.998319,-0.62392 -0.397748,-0.10278 -0.799809,-0.19509 -1.207108,-0.24865 -0.716915,-0.0943 -1.4428,-0.10549 -2.165589,-0.12659 -0.486568,-0.0142 -0.973534,0 -1.460314,0 -0.500327,0 -1.017297,-0.12793 -1.500982,0 -0.353642,0.0935 -0.696065,0.2831 -0.953955,0.54252 -0.280167,0.28184 -0.434075,0.67149 -0.583221,1.03984 -0.12401,0.30628 -0.21949,0.62974 -0.25318,0.95848 -0.02846,0.27776 -0.121359,0.61233 0.04521,0.8364 0.219837,0.29573 0.684081,0.27924 1.039839,0.37526 0.517684,0.13971 1.053254,0.20251 1.582367,0.28935 0.568061,0.0932 1.137444,0.17968 1.708971,0.24866 0.719957,0.0869 1.442958,0.14714 2.165588,0.20797 0.582665,0.049 1.16496,0.11788 1.749636,0.12659 0.639472,0.01 1.282065,-0.004 1.916933,-0.0814 0.421296,-0.0514 0.863891,-0.0723 1.247828,-0.25318 0.257823,-0.1215 0.411004,-0.40786 0.664581,-0.538 0.141808,-0.0728 0.301942,-0.13443 0.461168,-0.12659 0.117679,0.006 0.263279,0.0295 0.330042,0.12659 0.05464,0.0795 -0.08688,0.24745 0,0.28934 0.161327,0.0778 0.252253,-0.27299 0.420449,-0.33456 0.430398,-0.15754 0.916384,-0.0237 1.374404,-0.0407 0.304509,-0.0113 0.855478,-0.33989 0.913263,-0.0407 0.111471,0.577 -1.117336,0.36687 -1.663753,0.58322 -0.508767,0.20143 -1.004755,0.43402 -1.500981,0.66461 -0.462095,0.2147 -0.905775,0.46905 -1.374405,0.66913 -0.36793,0.15707 -0.739457,0.31197 -1.125749,0.41593 -1.020604,0.27471 -2.098464,0.28707 -3.123936,0.54252 -0.169254,0.0422 -0.323188,0.1529 -0.497337,0.16276 -0.410157,0.0232 -0.797877,-0.21286 -1.207108,-0.24866 -0.471594,-0.0413 -0.946944,0.0145 -1.419622,0.0407 -0.514827,0.0285 -1.027589,0.0869 -1.541675,0.12659 -0.583009,0.045 -1.228222,-0.13804 -1.749663,0.12659 -0.209753,0.10645 -0.3919,0.31187 -0.456618,0.53801 -0.05407,0.18891 0.208132,0.42936 0.0859,0.58322 -0.641456,0.80748 -2.055204,0.17345 -3.083454,0.25318 -0.7638,0.0592 -1.528975,0.1007 -2.292192,0.16728 -1.085003,0.0947 -2.161699,0.34864 -3.250671,0.33004 -0.714745,-0.0122 -1.414621,-0.37005 -2.124895,-0.28935 -0.30898,0.0351 -0.566102,0.27734 -0.872569,0.33004 -1.902989,0.32719 -3.8608,-0.0912 -5.791465,-0.12207 -1.24923,-0.02 -2.505842,0.094 -3.748087,-0.0407 -0.338217,-0.0367 -0.717233,-0.0176 -0.999146,-0.20796 -0.373751,-0.25242 -0.428678,-0.80979 -0.750491,-1.12575 -0.422698,-0.415 -0.970968,-0.68506 -1.496483,-0.95848 -0.45384,-0.23612 -0.924349,-0.45506 -1.419622,-0.58323 -0.351076,-0.0908 -0.718794,-0.15203 -1.080532,-0.12659 -0.544036,0.0383 -1.081088,0.20115 -1.582367,0.41593 -0.390578,0.16736 -0.746628,0.41214 -1.085057,0.66913 -0.390683,0.29665 -0.701198,0.6881 -1.080531,0.99915 -0.05758,0.0472 -0.109535,0.10968 -0.180843,0.13111 -0.431932,0.1298 -0.901806,-0.0281 -1.351809,-0.0588 -1.4964,-0.10192 -2.989788,-0.24918 -4.48045,-0.41592 -1.199303,-0.13417 -2.390325,-0.60354 -3.589602,-0.47019 -0.395658,0.044 -0.871802,0.10113 -1.121225,0.41143 -0.273473,0.3402 -0.355706,0.89963 -0.176324,1.29754 0.262142,0.58148 1.022298,0.77449 1.591416,1.06246 1.639385,0.82952 3.502025,1.13498 5.181071,1.88077 0.690668,0.30675 1.332071,0.71432 2.002843,1.06246 1.270582,0.65944 2.563997,1.2746 3.829314,1.94405 0.971788,0.51416 1.917224,1.07717 2.888986,1.59142 1.226555,0.64907 2.463191,1.27968 3.711839,1.88528 0.797772,0.38696 1.596205,0.77468 2.414244,1.1167 0.308874,0.12914 0.60915,0.30412 0.940382,0.35264 1.714262,0.25109 3.459162,-0.20784 5.185569,-0.35264 1.376389,-0.11544 2.764896,-0.16151 4.123266,-0.41142 1.480238,-0.27231 2.893219,-0.83487 4.358217,-1.17999 2.709598,-0.63839 5.442744,-1.18219 8.187531,-1.64566 2.287323,-0.38621 4.630209,-0.44159 6.894513,-0.9449 1.74535,-0.38794 3.361002,-1.28434 5.122333,-1.59142 1.316646,-0.22955 2.682082,0.01 4.005792,-0.17632 1.499288,-0.21057 2.947988,-0.69212 4.417219,-1.05794 0.531677,-0.13238 1.063937,-0.26318 1.591417,-0.41142 1.40255,-0.39415 2.80829,-0.78492 4.182,-1.27043 0.52269,-0.18474 0.99605,-0.5258 1.54168,-0.62391 0.46445,-0.0835 0.95186,0.13062 1.41509,0.0407 0.47633,-0.0925 0.85387,-0.51115 1.33372,-0.58322 0.4845,-0.0728 0.9806,0.26686 1.46031,0.16728 0.29813,-0.0619 0.49572,-0.38299 0.79119,-0.45662 0.37748,-0.0941 0.77882,0.0744 1.16641,0.0407 0.80563,-0.0701 1.60216,-0.25913 2.37358,-0.50184 0.47471,-0.14937 0.92234,-0.37504 1.3744,-0.58322 0.3379,-0.15562 0.63524,-0.42005 0.99915,-0.49731 0.61235,-0.13003 1.39602,-0.3202 1.87624,0.0814 0.14221,0.11891 -0.0605,0.51062 0.12205,0.54253 0.17957,0.0314 0.12938,-0.38261 0.2939,-0.46114 0.89511,-0.42731 2.00115,0.0688 2.95672,0.33456 0.19166,0.0533 0.34816,0.20624 0.54253,0.24866 0.5698,0.12436 1.16644,0 1.74966,0 0.69323,0 1.38673,-0.0198 2.07968,0 0.50096,0.0143 1.00327,0.0275 1.50101,0.0859 0.39224,0.046 0.77795,0.13667 1.16641,0.20797 2.72415,0.50004 5.39538,1.52252 8.16504,1.54168 0.3243,0.002 0.95224,0.15698 0.95845,-0.16728 0.0574,-2.98186 -5.81792,-1.32149 -8.74818,-1.87624 -1.42406,-0.26959 -2.84982,-0.54713 -4.29048,-0.70527 -0.99475,-0.1092 -2.00165,-0.0687 -2.99747,-0.16729 -0.97708,-0.0968 -2.11947,0.15808 -2.91597,-0.41592 -0.12575,-0.0906 -0.25985,-0.26988 -0.20799,-0.41593 0.21421,-0.60317 1.17676,-0.50575 1.74967,-0.79118 0.46722,-0.23279 0.93334,-0.47133 1.3744,-0.75049 0.25979,-0.16445 0.6132,-0.26522 0.74597,-0.54253 0.11991,-0.2504 -0.10795,-0.56253 -0.0407,-0.83188 0.0983,-0.39341 0.41195,-0.69866 0.62391,-1.04436 0.20563,-0.33544 0.4473,-0.64987 0.62841,-0.99915 0.13153,-0.25368 0.25887,-0.51443 0.33004,-0.79118 0.0347,-0.13507 0.10745,-0.29115 0.0452,-0.41593 -0.0368,-0.0738 -0.13086,-0.11504 -0.21248,-0.12659 -0.38259,-0.0541 -0.7959,0.0855 -1.12125,0.29388 -0.25787,0.16516 -0.28173,0.656 -0.5832,0.70979 -0.19084,0.0341 -0.31996,-0.22684 -0.50186,-0.29387 -0.14505,-0.0535 -0.30901,-0.12737 -0.45662,-0.0814 -0.20653,0.0644 -0.30813,0.30369 -0.46114,0.45662 -0.16656,0.16649 -0.44884,0.27138 -0.49731,0.50183 -0.0243,0.11531 0.18711,0.22895 0.12657,0.33004 -0.17324,0.2893 -0.66656,0.11833 -1.00367,0.12659 -0.37473,0.009 -0.75054,-0.0303 -1.12122,-0.0859 -0.1833,-0.0275 -0.35764,-0.10889 -0.54253,-0.12207 -0.51419,-0.0367 -1.0342,0.0315 -1.5417,0.12207 -0.45463,0.0812 -0.87847,0.2975 -1.33368,0.37526 -0.23223,0.0397 -0.47771,-0.0156 -0.7053,0.0452 -0.24027,0.0642 -0.44741,0.21735 -0.66911,0.33004 -0.32149,0.16342 -0.61344,0.39693 -0.95848,0.50184 -0.12036,0.0366 -0.28159,0.12472 -0.37523,0.0407 -0.27929,-0.25063 -0.29038,-0.88805 0,-1.12575 0.16534,-0.13536 0.41542,0.10939 0.62841,0.12659 0.35925,0.029 0.73335,0.0561 1.08053,-0.0407 0.30539,-0.0851 0.59172,-0.25415 0.83188,-0.46114 0.27763,-0.2393 0.48548,-0.55534 0.6691,-0.87257 0.14314,-0.24731 0.27395,-0.51099 0.33007,-0.79118 0.0464,-0.232 0.0764,-0.48591 0,-0.7098 -0.0733,-0.21452 -0.28487,-0.35306 -0.41595,-0.53801 -0.35412,-0.49961 -0.68469,-1.01621 -0.99917,-1.54167 -0.39934,-0.66734 -0.72848,-1.37494 -1.12572,-2.04354 -0.21014,-0.35364 -0.33462,-0.79423 -0.66461,-1.03984 -0.2426,-0.18057 -0.61965,-0.0828 -0.87257,-0.24866 -0.0913,-0.0599 -0.184,-0.14663 -0.20797,-0.25318 -0.0628,-0.27884 0.1616,-0.54983 0.20797,-0.83187 0.0272,-0.16561 -0.004,-0.34018 0.0407,-0.50184 0.0913,-0.3275 0.35399,-0.58814 0.45567,-0.9126 0.0884,-0.28212 0.0845,-0.37446 0.0651,-0.66947 -0.0109,-0.16567 0.0558,-0.58301 -0.0731,-0.6875 -0.0704,-0.057 -0.20019,-0.0743 -0.27128,-0.0181 -0.21454,0.16966 -0.0571,0.54727 -0.13562,0.80928 -0.0984,0.32832 -0.0742,0.96631 -0.41593,0.94039 -0.20085,-0.0152 -0.13916,-0.3827 -0.15823,-0.58323 -0.0303,-0.31895 0.0511,-0.63878 0.0723,-0.95848 0.0175,-0.26358 0.12788,-0.5403 0.0452,-0.79118 -0.031,-0.0941 -0.0937,-0.20532 -0.19003,-0.2285 -0.10992,-0.0265 -0.14786,0.1834 -0.20767,0.27935 -0.1413,0.22666 0.0635,0.53409 0.041,0.80023 -0.0216,0.25542 -0.0337,0.50959 -0.2717,0.60471 -0.13818,0.0552 -0.18962,-0.18742 -0.22495,-0.33197 -0.10757,-0.44022 0.14048,-0.91694 -0.0237,-1.377 -0.0437,-0.12246 -0.14167,-0.29078 -0.27125,-0.2803 -0.12626,0.0102 -0.21713,0.18528 -0.21701,0.31194 0,0.27832 0.03,0.59455 0.03,0.84447 0,0.24992 0.0255,0.58674 -0.16566,0.62487 -0.15201,0.0303 -0.14864,-0.27273 -0.20795,-0.41593 -0.0839,-0.20253 -0.12927,-0.41931 -0.20799,-0.62391 -0.037,-0.096 -0.0398,-0.22342 -0.12385,-0.28276 -0.0773,-0.0545 -0.21764,-0.0885 -0.28303,-0.0202 -0.19091,0.19945 0.0818,0.54705 0.0949,0.82283 0.0107,0.22584 -0.0163,0.45207 -0.0136,0.67815 0.003,0.23983 0.012,0.4798 0.0316,0.71885 0.0103,0.12556 0.094,0.25908 0.0452,0.37526 -0.0832,0.19817 -0.31909,0.49027 -0.51088,0.39333 -0.25427,-0.1285 0.0429,-0.57068 0.0181,-0.85448 -0.0134,-0.15457 0.0383,-0.37004 -0.0904,-0.45661 -0.11846,-0.0797 -0.32354,-0.0234 -0.42045,0.0814 -0.24508,0.26503 0.23206,1.0061 -0.12208,1.076 -0.16873,0.0333 -0.19366,-0.28913 -0.24865,-0.45212 -0.12083,-0.35803 -0.27638,-0.75943 -0.16729,-1.12122 0.0598,-0.19819 0.31753,-0.27903 0.41593,-0.46114 0.12964,-0.2399 0.18339,-0.51962 0.20798,-0.79119 0.0338,-0.3733 -0.0193,-0.75234 -0.0859,-1.121222 -0.0619,-0.342636 -0.14785,-0.685536 -0.28935,-1.003671 -0.0858,-0.192958 -0.28209,-0.333454 -0.33456,-0.538004 -0.0622,-0.242678 0.11591,-0.511519 0.0407,-0.75049 -0.0264,-0.08397 -0.10126,-0.144989 -0.16276,-0.207968 -0.21395,-0.219094 -0.4313,-0.45593 -0.70982,-0.583221 -0.15436,-0.07054 -0.33936,-0.03688 -0.50184,-0.0859 -0.26033,-0.07854 -0.47704,-0.29001 -0.74599,-0.330041 z m -57.422524,22.096148 1.374405,0.28935 0.831876,0.62844 1.12575,0.66461 -0.289349,0.0814 -5.9182,-0.12207 0.04521,-0.29387 1.288495,-0.79119 z" />
</g>
</svg>
images/screen1.png

24.4 KiB

0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment