nexus-js / ui Goto Github PK

View Code? Open in Web Editor NEW

839.0 48.0 127.0 54.25 MB

NexusUI: Web Audio Interfaces

Home Page: http://nexus-js.github.io/ui/

HTML 4.27% JavaScript 95.55% CSS 0.13% Shell 0.05%

javascript web-audio javascript-toolkit nexusui computer-music electroacoustic-music

ui's People

Contributors

Stargazers

Watchers

Forkers

fredeerock drakh jemgold diki baatar bussiere wlabranche fyatao microinfo woerwin ifa6 pixelpusher lucifly willthemoor ingleashish daveseidel matteomenapace metaphoric therewasaguy davydka nrfm blackeyedpony amitayd gllmar is00hcw mcanthony joearms dinukadesilva icalderond alessandrostone alepom motekulo webaudiohaptics angeldude taylorbf jpowers777 emainier flummingbird pseuyi matthewjwolff t3kt ianmunrobot videodromm jbxro drjekyllandmrhyde phonexhsu hepiyellow alexeitipenko mchenetz lathertonj chr15m drc3p0 markzman italoadler jrosequist brunocampos keithhill55 dombarrett mixflame daniel-hershel wiltonlazary plinkout17 retroglyph xportell jadynl rachelnoble77 orjanskoglund1 mtamahori berraknil perbyhring nogbit darkdoon mscottnelson dgrmunch macromachines adsrlab shivamvyas25 bryanhclark jeffbaucom wuxiaogu essingen123 nebrekab solertis tallan9 starfishmod the-cc-dev khanhnhungtran davidzdw mrjellyb atul122018 richardmax mimic-sussex tatecarson mau-dev vladansaracpv tbazin silconsystem clemofi justkd frantic0

ui's Issues

Build - Error: Cannot find module 'webfontloader'

Getting this error (with latest clone from git), maybe webfontloader is missing from package.json dependencies?

Erezs-MacBook-Pro:nexusUI hepi$ ./node_modules/gulp/bin/gulp.js 
[20:32:11] Using gulpfile ~/Documents/dev/nexusUI/gulpfile.js
[20:32:11] Starting 'default'...
[20:32:11] Starting 'browserify'...
[20:32:12] { Error: Cannot find module 'webfontloader' from '/Users/hepi/Documents/dev/nexusUI'
    at /Users/hepi/Documents/dev/nexusUI/node_modules/browser-resolve/node_modules/resolve/lib/async.js:46:17
    at process (/Users/hepi/Documents/dev/nexusUI/node_modules/browser-resolve/node_modules/resolve/lib/async.js:173:43)
    at ondir (/Users/hepi/Documents/dev/nexusUI/node_modules/browser-resolve/node_modules/resolve/lib/async.js:188:17)
    at load (/Users/hepi/Documents/dev/nexusUI/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
    at onex (/Users/hepi/Documents/dev/nexusUI/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
    at /Users/hepi/Documents/dev/nexusUI/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:123:15)
  stream:

Resizing widgets after creation

Hello,

Thanks for the NexusUI, it looks great.
I'm trying to incorporate it in my project and I have trouble resizing/moving the widget after it's created. Is that not possible currently?

Thanks!

Matrix widget size updates properly upon .init() not .draw()

If I set the following matrix's size it's not updated properly until .init() is called.

The documentation here indicates that it should update upon calling .draw(): http://www.nexusosc.com/api/#matrix

This example updates size with .init(): https://github.com/lsu-emdm/nexusUI/blob/388f2e55ba6b5e1043f953f7a3eddd435e44c788/examples/matrix/index.html

The following code produces the attached UI:

<html>
<head>   
    <script src="lib/jquery-1.11.1.min.js"></script>
    <script src="lib/nexusUI.js"></script> 

    <script>
        nx.onload = function() {
            nx.sendsTo("js");

            patternMatrix.row = 8;
            patternMatrix.col = 16;
            patternMatrix.draw();
        }
    </script>   
</head>

<body>
    <canvas nx="matrix" id="patternMatrix" width="750px" height="500px"></canvas>
</body>
</html>

This occurs in Google Chrome 37.0.2062.120

Motion widget

We should have a <canvas nx="motion"></canvas> widget which tracks device acceleration (not tilt) using ondevicemotion

Need to be able to change 'nx' attribute name

Hi,
I am trying to use nexusUI component with React.
React uses JSX, and it ignores any custom HTML attributes. So the 'nx' attribute on canvas element is not rendered.
To go around that, React passes through attributes prefixed with 'data-'

It would be a good idea that the canvas attribute name ('nx') used for nexus components would be settable.
I see it is used in the manager.transform function (and some other places).

I've trying changing the manager.transform function, and making it use 'data-nx', and it works.

Thanks,
Erez

Animation is hidden in the documentation

The documentation is gone that listed how to enable and use animation on any of the objects.

Envelope - apply as an animation to some parameter

There should be a way to apply an envelope to a parameter or js variable and then trigger it when wanted.

Set initial value for slider

Hi, I'm making some experiments with this interesting library,
but I can't get to set an initial value for a Slider, which is frustrating.

nx.onload = function() {
  slider1.val = 0.40;
  // also tried:
  // slider1.value = 0.40;
  // slider1.init();
  // slider1.draw();
};

websockets?

hi,
what if we could have websockets instead/in complement of OSC?

Web components

The dev branch now has a folder /webcomponents which has an example of a nexusUI dial invoked as a web component:

<nx-dial></nx-dial>

However, I have some concerns about using this method.

The browser actually renders the component as this:

<nx-dial>
  <canvas id="dial1"><canvas>
</nx-dial

I worry that users will have less transparent access to the underlying canvas, for example if they want to animate it with jQuery or get its style. If a user alters the <nx-dial> using JS, we need to make sure certain altered properties (like width/height) are transferred to the inner canvas, and vice versa.

I will read more on this subject but it is worth a brainstorm / discussion for now as to whether we really want to pick up this approach.

The syntax is actually only negligibly shorter, since we can't use <dial> and must use <nx-dial> or another hyphenated name.

Much improved number widget

I've just given the number widget a big update. Some of the changes:

input by typing
You can now click on a number widget and change its value by typing. Clicking and dragging will still let you scroll its value up or down. This works on mobile as well.

.min and .max
New .min and .max properties define the range of possible numbers. Default is -20000 to 20000

.step
New .step property defines the increment.

number1.step = 1  // integers only (default)
number1.step = .01  // will be a float that increments by .01
number1.step = 100  // overtones of 100

.rate
Sensitivity of mouse/touch movement

number1.rate = .1  // moving mouse upward 10px will increment number by 1 step (= slow)
number1.rate = .25  // moving mouse upward 4px will increment number by 1 step (default)
number1.rate = 1  // moving mouse upward 1px will increment number by 1 step (= fast)

It may be some time before the dev branch is merged to master. In the meantime, the dev branch should be stable for use with these new features. If you encounter any bugs with this widget, please share them here.

An example is in /example/number.html

Button image on load

Hi Im trying to load an ui made with buttons and to use an image for everybutton , so i use
the button.setImage( src) method, the problem is that it does not show the images when i load the page , it show the images only after you click in the buttons, what im doing worng?
any way to load images on toggles too?
thanks!

Bug in keyboard I think

Either this code is wrong:

<script src="./nexusUI.js"></script>
<body></body>
<script>
  nx.add("keyboard",{name:'key', w:600});

  nx.widgets["key"].on('*', function(data) {
      console.log('data', data);
  })
</script>

Or the documentation is wrong

When I run this in chrome and look in the console I see something like this

data Object {on: 12, note: 62, midi: "62 1"}
bug.html:7 data Object {on: 0, note: 62, midi: "62 0"}
bug.html:7 data Object {on: 12, note: 64, midi: "64 1"}
bug.html:7 data Object {on: 0, note: 64, midi: "64 0"}
bug.html:7 data Object {on: 12, note: 65, midi: "65 1"}
bug.html:7 data Object {on: 0, note: 65, midi: "65 0"}
bug.html:7 data Object {on: 13, note: 67, midi: "67 1"}
bug.html:7 data Object {on: 0, note: 67, midi: "67 0"}

The documentation says on should be 0 or 1 but I more or less arbitrary non zero values

Waveform selector

We should have an audio buffer visualizer with a range selector. This is in the works. It should include a way to dynamically pass in a buffer.

waveform1.setBuffer( buffer )

full screen scaling

I've been playing with NexusUI - it's very nice. The ipad-demo.html in the examples
does not scale to full screen on my iPad. I think it would be nice to make a demo that removes
the browser chrome and goes full-screen on an iPad

If you add

To the head of the page, then browse to page from the iPad and save the link (Add to home screen)
then when you refresh the from the home screen all the browser chrome is removed - but the
application does not scale to fill the screen -

This use case - full screen on the iPad with large controls is exactly what I need for music
applications :-) - that and websockets. Conversion from websockets to OSC can be done
"upstream"

Cheers

Colors widget load time

Using several (and big) colors widgets I noticed that nexus loading time slowed down quite a lot. To make it load fast again I substitued the two for-loops in colors.prototype.draw function by a bitmap image:

var img = new Image();
img.src = 'img/colors.png';
$(img).load(function(){
    context.drawImage(img,0,0);
});

Customize controls

Hi!

I want to customize the sliders and knobs, how do I use a png image to replace the default "skin"?

Thanks!

E.D.

using nexusUI with npm

you have to install the extend module or nexusUI won't work.

pixels example mislabled

The "pixels.maxpat" example is really the button patch.

Metroball has issues rendering label, tracks events on label area

Hi,

The metroball component has some issues when rendering labels.
Also, when a label is rendered, it appear the space used by the label is not being discarded when tracking user interactions, which can lead to some odd results:

Keep up the great work, guys! :)

Toggle multiple keyboard eys

Hey Ben and Team,
This is a really great project. I'm digging into it.
I'm trying to toggle multiple keys in sustain mode.
var onS = [0,2,4,5,7,9,11];
for (x=0; x<onS.length; x++) {
keyboard1.toggle( keyboard1.keys[onS[x]], true );
}
var offS = [1,3,6,8,10];
for (y=0; y<offS.length; y++) {
keyboard1.toggle( keyboard1.keys[offS[y]], false );
}
I think this should toggle all the white keys (in C maj). I'm getting unexpected toggling.

Better labels

This is a must have, at the current point of development. I see three possible mechanisms:

On canvas
One way is to draw the text at the bottom of each element's canvas, like it is now, but to shrink each GUI so there is no overlap. However, this means that the user needs to account for that text when they size their widget. A 50x50 button would need to have a canvas sized 50x70 to account for the extra text space. I don't like the idea of making the user do that math.

<canvas nx="button" label="ping" width="50px" height="70px"></canvas>

I suppose we could resize the canvas automatically, to turn a 50x50 canvas into a 50x70 canvas, with a warning that adding a label increases a canvas by 20px.

Regardless, I don't think text on looks great, it doesn't have automatic wordwrap, etc.

Modules
I have been thinking more and more about creating NexusUI modules –– a

with several widgets and text labels inside. In this case, the text labels could be made with regular HTML. These modules could be created with web components (temperamental) or just with a

, like this:

<div nx="button" label="start" style="width:50px;height:50px;"></div>

This div could be filled automatically with a button and a

text label.

A nice aspect of this method is that it could quickly lead to larger modules, like <div nx="sequencer"> which could include a matrix, toggle, bpm dial, and labels for each.

Leave it to the user
Since widget's are plain HTML canvases right now, a user can fairly easily add a div label that fits the style of their site, using the following paradigm:

<div>
   <canvas nx="button"></canvas>
   <div class="label">Start</div>
</div>

It's posible to reload nexusui?

hi!, i'm working in a emberjs application with nexusui widgets, but i don't found
how to encapsulate nexusui widgets correctly.

Normally, any javascript library i use has some method to create widgets programatically. I need
to create the widget's canvas with some like "createElement" and then attack nexusui to that
element, this is possible with nexusui?

I see that nexus ui uses the document's onload event to init the library on all canvas elements, it's the only way to init widgets?

Thanks!

Changing keyboard key colors

Is there a way to define the colors of the "white" and "black" keys on the keyboard?

Latency testing of interaction and output events

typo on e.stopPropagation()

hi,
isn't it e.stopPropagation() instead of e.stopPropogation() on line 393?

Metroball freezes browser window (chrome) when balls drawn too far out of bounds

quick fix - just limited the range of the ball x position to the widget width

metroball.prototype.addNewMB = function(ballpos) {
var nextIndex = this.CurrentBalls.length;
ballpos.x = Math.max(0, Math.min(this.GUI.w, ballpos.x));
this.CurrentBalls[nextIndex] = new this.Ball(nextIndex, ballpos.x, ballpos.y, this);
}

Local Docs Generation script

Look into script to generate local documentation. Add to .gitignore so that it doesnt get uploaded.

multislider acces value list

Hello! first say that nexus is a great thing, really love it!
Actually im developing a ui editor based in vvvv http://vvvv.org/
already get it working with most of the widgets.
but actually i have problems to acces the multislider list data.
I tried to acces the array and convert it to string, but no good result.
this is the function:
multislider1.on('*',function(data) {
var a = data.slice(0);
var b= a.toString();
if ("vvvv" in window) vvvv.multislider1(b);
})
what im doing wrong?
another issue is to set the Osc to work in an upload ui in a website ,,,how can i set the ip and transmit the osc?
thanks

number: limit range

It'd be nice to be able to limit number's range.

Also, would be great to be able to use number to scroll between values (like with the menu, but in place).

Envelope - add more segments/joints

We should be able to add more joints/segments to the envelope. This would allow for an AD(S)R as well as more complex envelopes.

Feature request: Matrix - Allow highlighted steps to selected programmatically.

e.g.

matrix.highlightStep(x, y);
matrix.highlightCol(x);
matrix.highlightRow(y);

Examing .set() alternatives -- move to ES6 getter and setter methods?

From an API perspective, slider1.value = 0.4 is more convenient than slider1.val.value = 0.4; slider1.draw(); or slider1.set( .... ).

Look into approaches for a simplified API with same core functionality and ease of development.

showLabels only works for sliders

Hi,

i like to display lables on a toggle element but it doesnt work. It seems that label work only for sliders. Thats the way how I tried it.

nx.showLabels = true;
nx.setLabels("on");

Best,
Marco

Keyboard range settings

It would be much more flexible to have a midi base pitch combined with the number of pitches for the keyboard as opposed to strict octaves. This would allow a keyboard to start on a low A and run for 88 keys. It would also need to shift the pattern of white and black keys to accommodate the alternate starting pitch

Typewriter animations

Hey so pressing 'v' lights up a key on the bottom right of the iinterface.

Also my ALT key doesn't do anyting, nor do some of the punctuation marks. (comma, period, and regular slash).

Running Chrome on Windows 8.1. Not sure if that helps.

Integer number

Does it possible to get (and display) int value from the number element? I try to .set rounded value, but it was very "glitch" solution... Don't found anything about this in API documentation.

Add osc.js

Try osc.js in chrome. Add as a transmission protocol

multislider.setSliderValue() is broken

I can't seem to call the method .setSliderValue on any multisliders, it returns "Uncaught ReferenceError: msg is not defined nexusUI.js: 3368"

Using NexusUI with React - Solution

Hi,

Previously I mentioned that in order to use NexusUI with react the property name "nx" must be changed to "data-nx" (See issue #59).

I did that localy, and it works in a very simple case, but here is the next blocker issue !

It is common in React to have a React Component render different React DOM Elements along it's lifecycle.
For example in this render method:
render() { if (!this.state.connected) { return <div>not connected</div>; } return <canvas data-nx="dial" />; }
it renders a <div/> when not connected , otherwise, renders a NexusUI dial canvas.
In this case the problem is that the dial is not visible, not painted. I can see the 'canvas' element on the DOM (chrome debug tools) but that's it. (same code without the condition rendering of the

works fine).

I think this happens, because NexusUI scans for canvas element on the onLoad event only. And React doesn't reload the document, it manipulates the dom. So thought I would use the manager.add function but it creates a canvas element. I don't want NexusUI to create the canvas, I guess I need React to create it.

So I guess I need to add an ability to add/remove existing canvas elements to the manager.
How would I add that, roughly?

Select Object

The nx="select" object, won't let me move it's position around. Also setting the select's choices via js didn't seem to work.

Mouse clicks don't register on widgets

I'm using an Asus Zenbook UX303U (touchscreen) running Windows 10.0.14393. My mouse clicks are not registering with nexus widgets in chrome (Version 55.0.2883.87 m (64-bit)) or Firefox Developer Edition 52.0a2 (2017-01-23) (32-bit). The widgets work fine when I use my touchscreen.

Feature request: Toggle matrix

I'd love a matrix containing toggle buttons rather than sliders.

problems installing

hi,
awesome project, super impressive and useful.

however i have problems getting max to talk to chrome properly. i am using the demo.html project supplied nexusUI-master/up folder. i placed this folder into my webserver (XAMPP running on Mac OSX 10.9). from there i open demo.html. in max 6.1.7 i am opening demo.maxpat. to get it working at all i had to copy jquerry.js and nexusUI.js manually to that folder and change the javascript paths in the demo.html file.

now, when i use the UI in demo.html within chrome and click on the "bang"-like object max complains:
nexusUp.js: Javascript TypeError: elemToSet is null, line 102
error calling function setElement[nexusUp.js]. the bang in max has the same object name, but maybe the it get's confused since the OSC string send is:
incoming: /buttonnx4436959/press 1.

the other problem is that i can't send data from max to chrome. when i first opened the demo patch i got an error message saying that uipatch is null. once i opened the nexusUp.maxpat file i found a dropbox to correct file paths. so i changed the paths to my file system, the message box displays the path to the up folder correctly and i connected a loadbang to that message box that the paths are set properly. now that error message disappears. however i still can't send data to chrome. neither with the ajax or local transmission protocol i get data sent to chrome.

would you mind pinpointing me in the right direction so i could get the patch fully working?

cheers and thanks a million.

:)
const

every click related widget is broken in firefox

I was revisiting the nexusUI to build something with it but it isn't working anymore in firefox (38.0.5) but is still working in IE.

It seems that clicks are not processed.

widget.getName() returns empty string

It seems like widget.getName() does a regexp match to find the widget type (i.e. "dial", "button", etc) according to the constructor function name.

See:
https://github.com/lsu-emdm/nexusUI/blob/master/lib/core/widget.js#L347

This might be somewhat brittle and error prone, and it seems that indeed the widgets that I checked use an anonymous constructor function:

var dial = module.exports = function(target) {

So the regex finds no match and returns an empty string.

Perhaps the widget type should be registered by the widget itself in a more explicit way?

While in web audio this kind of math can done on the receiving end, that is not true for some users who are sending data as OSC to video software.

This will also be useful if we use web component wrappers to bind dials with number widgets.

nexus-js / ui Goto Github PK

ui's People

Contributors

Stargazers

Watchers

Forkers

ui's Issues

Recommend Projects

Recommend Topics

Recommend Org