Skip to content

Commit

Permalink
Merge branch 'develop'
Browse files Browse the repository at this point in the history
  • Loading branch information
colejd committed Dec 20, 2021
2 parents beae4ec + 42e1f41 commit 4cafddd
Show file tree
Hide file tree
Showing 11 changed files with 136 additions and 30 deletions.
Binary file added .meta-files/images/Hero-Screenshot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions changelog.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
## 0.15.1

- Fixed a bug preventing folders from being removed with `Remove()`.
- There was an issue introduced by 0.15.0 where the guify-container covers all content and has a higher z-index than the content underneath, eating all touch/click events. To fix this, the z-index of guify-container is now unset, and the sub-elements are given the z-index that guify-container used to get (9999).

## 0.15.0

- POTENTIALLY BREAKING CHANGE: Modified the way the GUI elements are constructed internally. If you're modifying the internals in your CSS, make sure everything looks right!
Expand Down
5 changes: 5 additions & 0 deletions contributing.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Contributing

All work on this library is done against the `develop` branch, which gets merged into `main` when a new release is ready. Accordingly, if you'd like to contribute to Guify, please work off of the `develop` branch.

This isn't strictly necessary, but please make sure you're not introducing any new ESLint warnings. If you're on VS Code, you can install the ESLint plugin to make this easier, or you can run it from the command line with `npm run lint`.
9 changes: 9 additions & 0 deletions lib/guify.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion lib/guify.js.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/guify.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/guify.min.js.map

Large diffs are not rendered by default.

11 changes: 7 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,19 @@
"//": "--------------- Script Info --------------- ",
"name": "guify",
"author": "Jonathan Cole <[email protected]>",
"version": "0.15.0",
"version": "0.15.1",
"description": "A simple GUI for inspecting and changing JS variables",
"keywords": [
"gui",
"ui",
"inspect",
"inspector",
"bind",
"ui",
"binding",
"project",
"creative coding"
"creative coding",
"p5",
"three"
],
"repository": {
"type": "git",
Expand All @@ -26,11 +29,11 @@
"scripts": {
"build:prod": "webpack --mode=production",
"build:dev": "webpack --mode=development --progress",
"buildall": "npm-run-all build:prod build:dev",
"build:dev:watch": "webpack --mode=development --progress --watch",
"serve": "webpack serve --mode=development",
"develop": "npm-run-all --parallel build:dev:watch serve",
"test": "mocha --require @babel/register --colors ./test/*.spec.js",
"buildall": "npm-run-all build:prod build:dev",
"prepublish": "npm run-script buildall",
"ci": "npm run-script buildall",
"lint": "eslint ."
Expand Down
120 changes: 97 additions & 23 deletions readme.md
Original file line number Diff line number Diff line change
@@ -1,39 +1,70 @@
# guify

<p align="center">
<img src="https://raw.githubusercontent.com/colejd/guify/main/docs/Guify.png" width="80%">
<img src="./.meta-files/images/Hero-Screenshot.png" width="80%">
</p>
<p align="center">
<a href="https://badge.fury.io/js/guify"><img src="https://badge.fury.io/js/guify.svg" alt="npm version" height="18"></a>
</p>

<p align="center">
<a href="https://jons.website/projects/guify">Demo</a>
|
<a href="/docs/api.md">Docs</a>
</p>

Guify provides you a simple GUI for your JS code. I made this because there wasn't anything really good for quick GUI creation for things like [three.js](https://threejs.org/) or [p5.js](https://p5js.org/) projects.
Guify is a runtime JS library that gives you a simple way to build a GUI for your JS projects. It pairs very well with [three.js](https://threejs.org/) and [p5.js](https://p5js.org/). Consider it an opinionated take on [dat.GUI](https://github.com/dataarts/dat.gui).

Guify gives you toast notifications, as well as an optional header bar to give your project a "web app" look. Each component of the GUI can be bound to a variable so you don't have to manually poll its state.
Here are the big features:

Guify is designed to be accessibility-friendly, but I don't have a good way to test it. If something doesn't work for you, please file an issue and I'll do my best to help!

[Check out the React version!](https://github.com/dbismut/react-guify)
* Bind any UI component to any variable. Guify supports arbitrary text inputs, colors, ranges, file inputs, booleans, and more.
* Guify is easy to graft onto any page and integrate with your existing JS code. Just point your components at the variables you already have:
```js
var someVariable = 0;
guify.Register([{
{
type: 'range',
object: this, property: 'someProperty',
label: 'Some Property',
min: 0, max: 20, step: 1
},
}])
```
* Give it that "web app" look with an optional header bar and easy toast notifications.
* Style it however you'd like. You can use one of three built-in themes, or build your own to get exactly the look you want.
---
## Installation
`npm install --save guify`, or copy `guify.js` from [`/lib`](/lib).
Below are some common ways to integrate Guify with your setup.
## Usage
For browser projects, you can use the transpiled version in [`/lib`](/lib).
If you're working with ES6 (for example, in a Node project), you can
use the files at [`/src`](/src) directly.
### Quick Start (Browser)
To integrate on an existing page, you can use the transpiled version in [`/lib`](/lib), either by including it with your files or using a CDN:
```html
<script src="https://unpkg.com/[email protected]/lib/guify.min.js"></script>
```
This adds a `guify` function at the global level, which you can use to construct the GUI. For example:
```html
<script src="https://unpkg.com/[email protected]/lib/guify.min.js"></script>
<script>
var gui = new guify({ ... })
gui.register([ ... ])
</script>
```
See the <a href="#Usage">Usage guide</a> below for more details. [example.html](/example/index.html) also demonstrates this pattern.
The API can be found at [/docs/api.md](/docs/api.md).
### Quick Start (NPM)
First, install with NPM: `npm install --save guify`
### Quick Start
First import using either `require` or ES6 imports:
Then you can import using either `require` or `import` depending on your preference:
```js
// ES6
import guify from 'guify'
Expand All @@ -43,39 +74,81 @@ let guify = require('guify');
```
Then you can make a quick GUI this way:
```js
var gui = new guify({ ... });
gui.Register([ ... ]);
```
See the <a href="#Usage">Usage guide</a> below for more details.
### Quick Start (React)
Check out the unofficial [React port](https://github.com/dbismut/react-guify).
---
## Usage
Once you have Guify available to construct in your project, make a `guify` instance:
```js
var gui = new guify({
title: "Some Title",
align: 'right',
theme: 'light'
});
```
The various controls in Guify are called "components". You can feed component definitions to Guify as follows:
```js
gui.Register([
{
{ // A slider representing a value between 0 and 20
type: 'range', label: 'Range',
min: 0, max: 20, step: 1
min: 0, max: 20, step: 1,
onChange: (value) => {
console.log(value);
}
},
{
type: 'button', label: 'Button'
type: 'button', label: 'Button',
action: () => {
console.log('Button clicked!');
}
},
{
type: 'checkbox', label: 'Checkbox'
type: 'checkbox', label: 'Checkbox',
onChange: (value) => {
console.log(value);
}
}
]);
```
See [example.html](/example/index.html) for a more complete example.
You can also bind components representing a value to your JS variables instead of using an `onChange()` handler. For example:
```js
var someNumber = 10;
gui.Register([
{ // A slider representing `someNumber`, constrained between 0 and 20.
type: 'range', label: 'Range',
min: 0, max: 20, step: 1,
object: this, property: 'someNumber'
},
```
There are many points of customization here. See the docs at [/docs/api.md](/docs/api.md). A much more robust example can also be found at [example.html](/example/index.html).
### Building This Package
If you want to build this package, you can run `npm install` and then `npm run build`, which will create `/lib/guify.min.js`.
If you want to build this package, you can run `npm install` and then `npm run build:prod`, which will create `/lib/guify.min.js`.
NPM commands:
- `build:prod`: Creates `/lib/guify.min.js`, the default script used by this package.
- `build:dev`: Creates `/lib/guify.js`.
- `develop`: Runs `build:dev` and serves the `/example` directory as a static web page.
---
## Changelog
See [changelog.md](/changelog.md).
Expand All @@ -89,5 +162,6 @@ This package is largely based on [control-panel](https://github.com/freeman-lab/
For setting this up, I used [webpack-library-starter](https://github.com/krasimir/webpack-library-starter).
## Alternatives
- [Dat.GUI](https://github.com/dataarts/dat.gui)
- [dat.GUI](https://github.com/dataarts/dat.gui)
- [Control-Panel](https://github.com/freeman-lab/control-panel)
- [Oui](https://github.com/wearekuva/oui)
6 changes: 6 additions & 0 deletions src/components/public/folder.js
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,12 @@ export default class Folder extends ComponentBase {
this.folderContainer.classList.add("guify-folder-closed");
this.arrow.innerHTML = "&#9656;"; // Right triangle
}
}

Remove() {
if (this.folderContainer) {
this.folderContainer.parentNode.removeChild(this.folderContainer);
}
super.Remove();
}
}
4 changes: 4 additions & 0 deletions src/gui.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@
left: 0;
width: 100%;
height: 100%;
}

/* Sub-elements of guify-container should appear over anything else. */
.guify-container > * {
z-index: 9999;
}

Expand Down

0 comments on commit 4cafddd

Please sign in to comment.