GunUi is a set of webcomponents that enables you - the frontend developer - to build complex - Gun - applications without writing any javascript.
Just link an element to a 'data-point' in your Gun data by setting attributes.
<gunui-button soul="lights" prop="hall.ceiling">Light</gunui-button> and you're all set.
gunui-slider is a Gun wrapper around paper-slider
- Visual control a Numeric value in your Gun data.
- Syncs the state of the slider with changes in Gun
- ...and then some...Take a look at the demos
- Gun loaded in your main document
- gunui-base in your main document
( When Polymer 3 arrives we can skip the bower part, but for now...)
bower install gunui-slider --save
<!doctype html>
<html lang="en">
<head>
<!-- load Gun from somewhere ( required ) -->
<script src="my_path_to_gun.js"></script>
<!-- import gunui-base ( required )-->
<link rel="import" href="/bower_components/gunui-base/gunui-base.html">
<!-- import gunui-checkbox -->
<link rel="import" href="/bower_components/gunui-slider/gunui-slider.html">
</head>
<body>
<gunui-base></gunui-base>
<!-- somewhere in your app, or in a custom element -->
<gunui-slider soul="lights" prop="lights.1.state.bri"></gunui-slider>
</body>
</html>
That's it. No javascript!
You now control the property in Gun!
Now you are ready to start building great apps with Gun but without having to write javascript :).
Take a look at all the GunUi elements available.
If you don't fully understand the purpose of gunui take a look at some of the GunUi elements.
| Element | Demo | Type | Change | Observe | Available |
|---|---|---|---|---|---|
| gunui-button | demo | Boolean | ✅ | ✅ | ✅ |
| gunui-checkbox | demo | Boolean | ✅ | ✅ | ✅ |
| gunui-toggle | Boolean | ✅ | ✅ | 🔜 | |
| gunui-progress | demo | Numeric | 🔲 | ✅ | ✅ |
| gunui-slider | demo | Numeric | ✅ | ✅ | ✅ |
| gunui-input | Numeric / String | ✅ | ✅ | 🔜 | |
| gunui-textfield | String | ✅ | ✅ | 🔜 |
I am not much of an e-mail reader, but please post issues and questions.
It would speed things up if you notify me in the Gun gitter @Stefdv