freeman-lab / control-panel Goto Github PK

I know this library is somehow unmaintained, well, in case that someone still watches it, i'd like to ask whether there's simple way to make value of range input direcly editable.

Hey @freeman-lab,

I'm playing around with some ideas to improve the authoring process for Idyll, and one of them is to automatically give the user a control panel that hooks into the reactive state (see idyll-lang/idyll#320).

This is working great, but it only updates in one direction. Is there a way to programmatically update the control panel's state?

If your touch event falls onto the rail instead of the little grabber, it has no effect on touch devices. Solutions either seem to be to drop the built-in element with this undesirable behavior or to make the grabbable area slightly wider.

Hi

I'm using control-panel in an angular application in a component using Three.js
I get the following error on the console:

core.js:1448 ERROR TypeError: fs.readFileSync is not a function at new Plate (index.js:29) at Plate (index.js:15)

Any advice how to resolve this?

Best
stefan

Sometimes the variables can be a lot, so grouping and collapsing of the inputs can be really useful.

Here is an example oh what I'm talking about:

http://www.curious-creature.com/pbr_sandbox/

dat.gui of course supports it and it's very useful, any plan for this library to support it?

Hi!

I started playing with various fields, and have found that sometimes it is useful to have additional field types:

• textarea - for large text content, like description, tagline, title, data-uri encoded image, svg etc. In conjunction with autosize it is even better than usual type='text'. As an option - replace default text input with textarea and autosize. API won’t change, for the end user there will be no difference, but UX will be smoother.
• radio - an alternative for select. It may work better for small sets, as it shows all possible options at once, which makes interaction easier and faster.
• custom - renders custom user HTML. That could be dividers, section titles, custom inputs, like vecN inputs, unit inputs (number + unit select), reset button, file input etc. It is quite easy to implement, and covers the rest of possible use-cases. Also that allows for extending control-panel with additional fields from other packages.

Any thoughts?

Hi @freeman-lab, very nice lib!
I was really laughing hard when I saw this repo, as recently I’ve spent 3 days on exact functionality in prama (parameters manager). Funny thing is that API is literally the same. But prama is nowhere close to the nice style of control-panel.
Therefore I can just share bugs and features I stumbled upon.
First off, it seems range slider does not work in iOS. I used Lea Veorou’s multirange for that purpose.
Second, it would be really nice to have control panel draggable, because some components, like gl-spectrum are full-screen. Though that task can be solved by user.
Third, I found that saving and loading current state to sessionStorage might come in handy at debugging, to avoid setting up parameters anew each page reload.
Wished I knew that package 3 days before!

When two control panels are placed next to each other but non-overlapping, the color picker from one panel can be hidden by the other panel. A few attempts at playing with the z-index failed. Probably something tricky with the positioning settings. Big 👍 if anyone can figure this out =)

When trying to use control-panel with Webpack, I get:

Uncaught Error: Cannot find module "fs"

and

./node_modules/control-panel/index.js Module not found: Error: Can't resolve 'fs' in '$PATH_TO_PROJECT/node_modules/control-panel'.

This seems to be a known problem with other repos (see here, for example), but the solutions provided for those repos (namely, adding node: { fs: "empty: } to the webpack.config.js) do not seem to work — trying that results in a new error: Uncaught TypeError: fs.readFileSync is not a function.

Following up on that error leads to information that fs.readFileSync will never truly work in the browser, as it is a Node function (see here).

There's at least one issue with viewing the control panel on iOS/android. This issue can be a place to track it, as well as any others that we find.

• range slider doesn't work because it's not supported on iOS, we should be able to use multirange instead (thanks @dfcreative for the tip!)

As pointed out by @dfcreative, for some use cases it might be really useful to be able to drag the panel around the screen. Unclear whether we want to add that to this module, or just put together a nice simple demo showing others how to make the panel draggable by composing with other modules (assuming it's simple!).

I end up typing this in nearly every example, otherwise the events leak through and, for example, pan the underlying view even when I'm dragging a slider:

var el = document.querySelector('.control-panel');
var events = ['mousemove', 'click', 'mousedown', 'mouseup'];
for (var i = 0; i < events.length; i++) {
  el.addEventListener(events[i], function(ev) {
    ev.stopPropagation();
  });
}

Note to self: make a PR for this! I wonder what the full set of events stopped from propagating should be.

In https://github.com/freeman-lab/control-panel#example

Should be:
{type: 'select', label: 'select one', options: ['option 1', 'option 2'], initial: 'option 1'} ,{type: 'multibox', label: 'check many', count: 3, initial: [true, false, true]}

Thanks for a great tool!

Hi freeman,

Nice project and thank you for your work! I just use it and it is perfect except I think one little Close Panel button like dat-gui or dis-gui would be good for preview demo when editing.

I show you a picture for this.