colejd / guify Goto Github PK

I am trying to implement on-the-fly multi-language support by changing labels.
I tried the following but it didn't work. Does anyone know a solution?

	var web_text = ['label1','label2']
	gui2.Register([
		{
			type: 'select',
			label: web_text[0],
			options: ["MANUAL", "AUTOGAIN", "AUTOEXPOSURE"],
			onChange: (data) => {
				console.log(data);
			}
		}
	});

	// other part of the code
	web_text[0] = 'new label in other language'

I was testing the following example code but found that the variable binding is not working.

When I run the code, "Stepped Range" starts with 8 instead of 64 and the log message in the call-back always prints 64 regardless of the slider value. Do you see any problem with the code?

	var container_gui = document.getElementById("gui-container");
	container_gui.style.display = "none";
	// Create the GUI
	var gui2 = new guify({
		theme: 'dark', // dark, light, yorha, or theme object
		align: 'right', // left, right
		width: 300,
		barMode: 'none', // none, overlay, above, offset
		panelMode: 'inner',
		opacity: 0.95,
		root: container_gui,
		open: false
	});

	var steppedNumber = 64;
	gui2.Register({
		type: 'range',
		label: 'Stepped Range',
		min: 8, max: 64, step: 8,
		object: this, property: "steppedNumber",
		onChange: (data) => {
			console.log(steppedNumber);
		}
	});

Edit 1:
I have track the problem and found the opts.object is undefined in the following code.

"object: this" was not defined as the code was in a module.

'<script type="module" src="./build/abovecode.js"></script>'

Is there a way to fix this without moving the code out of the module? It should be a module due to "import".

Hey! I loved your lib and decided to create a thin React wrapper around it.

https://github.com/dbismut/react-guify

Maybe you’d like to mention it in the ReadMe?

Also, I may have overlooked some options but there’s no way to update panel or component options after initialization, is there?

The css value of class ".guify-container" :
.guify-container {
position: absolute;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
All of Div can not be triggered because of the "height: 100%".

In the current example, the "onChange" event is triggered whenever the slider is moved.
Is it possible to make it triggered on the mouse up event?

Hi There,

First of all thanks for that great UI contribution. Was searching for something like this for a long time.
I think there is a bug with the checkboxes.
Every checkbox after the first registered do not work, but instead trigger the first checkbox that was registered.

This bug also happens in your demo. Just try to check the second checkbox.

Cheers,
bel

I cant remove the scrollbars on the gui not sure why.

And how to disable components? For example buttons...

I'm just getting started with guify, but I run into an issue when using the npm version. The default export is not a constructor:

All I'm doing is this:

import guifiy from "guify";

const gui = new guifiy();

And I get the error _guify.default is not a constructor.

Here's a demonstration of the bug:

https://codesandbox.io/s/eloquent-williams-vlqze?file=/src/index.js

This is using guify 0.15.1, the last version as of now.