Control » Topic: MPC-inspired Interface

ronji on "MPC-inspired Interface"

ronji — Mon, 14 Feb 2011 00:07:59 +0000

no rush! it'll be a cool feature when it's ready =)

admin on "MPC-inspired Interface"

admin — Sun, 13 Feb 2011 22:57:17 +0000

Argggghhhh... can't get it to work and can't spend any more time on it now. I'll have to come back to it someday.

admin on "MPC-inspired Interface"

admin — Sun, 13 Feb 2011 22:07:41 +0000

Here's a test uploading a .json file... guessing it won't work.

admin on "MPC-inspired Interface"

admin — Sun, 13 Feb 2011 21:58:31 +0000

Good suggestion... I'll look into it.

ronji on "MPC-inspired Interface"

ronji — Sun, 13 Feb 2011 21:20:35 +0000

nice, i like it! it will definitely make it easier to post snippets of code. would it be possible for you to enable some sort of reasonably sized attachments for posts? these files seem to be pretty small, so maybe something like 100k max? just a suggestion, might make it easier for people to share full interfaces if they don't have webspace of their own, which may be rare in a group of people writing json files =p

admin on "MPC-inspired Interface"

admin — Sun, 13 Feb 2011 21:04:23 +0000

I decreased the font-size which helps a little bit... maybe I'll put up a sticky asking people to use the back-ticks like you suggested. I only noticed that option yesterday, so chances are other people are also unaware. And also encourage people to post links to their JSON when possible.

ronji on "MPC-inspired Interface"

ronji — Sun, 13 Feb 2011 20:09:03 +0000

thanks =)
i like bbpress. it is definitely minimal, which is great, but it can be slightly less intuitive when it comes to posting more than just a basic comment. you can post code fairly easily with the backticks (the tilde (~) button without shift)

admin on "MPC-inspired Interface"

admin — Sun, 13 Feb 2011 19:53:45 +0000

Blech... let me try and just change the style for the "code" tag before I go installing phpbb. Every time I've made a phpBB forum it's been filled with spam. This has been running for a couple of weeks now and I yet to receive a single spam hit, for whatever reason.

And lest anyone get too excited, my emulation probably won't extend to having 16 scenes of different note / cc combinations. But I've got some cool tricks in it that I think outdo the padKontrol in some other respects.

Ronji, nice looking blog! I like that theme...

ronji on "MPC-inspired Interface"

ronji — Sun, 13 Feb 2011 18:30:40 +0000

i'll link to the interface on my website so it doesn't take so much space in this thread =)
http://www.sk8dork.com/files/control/
(you should be able to just click the json file and view the text in chrome, hopefully other browsers too)
(i haven't bothered removing your license comment, heh)

evilmonkey on "MPC-inspired Interface"

evilmonkey — Sun, 13 Feb 2011 18:04:47 +0000

Looks like great progress!

Ronji: Control can indeed support scenes and I know how to do it in terms of psuedocode, but javascript is not my forte (in fact I never used it before) so I'll refrain from posting further code. Let's see what Charlie comes up with with the padcontrol emulator.

Can you post your code as you have it so far? Thanks!

Charlie: BBPress does not seem to be a good forum software, especially if people are sharing code. You may want to consider something like phpBB that allows the users more formatting options.

I'm also looking forward to your padcontrol emulator.

admin on "MPC-inspired Interface"

admin — Sun, 13 Feb 2011 01:15:02 +0000

The logo looks great :) What I normally do to get squares is declare a variable at the top of the screen named whRatio (for width / height ratio). In portrait mode, I set that to 2 / 3. In landscape mode, 3 / 2. Then you can do this:

"bounds": [0,0, .5, .5 * whRatio],

and always be guaranteed a square as long as you use the same two numbers for the width and the height (in this case .5).

I didn't think about knobs, bounds and radius... good catch! I fixed it so bounds can include radius instead of width and height for the next release... just pass in three numbers to bounds instead of 4. This will be included in the next update.

ronji on "MPC-inspired Interface"

ronji — Sun, 13 Feb 2011 00:45:43 +0000

haha, i wasted like 10 minutes making the "logo" in this interface =) and yeah, my buttons are not actually square, which for some reason is more apparent when i look at the image vertically
http://img689.imageshack.us/i/padcontrol.png/

ronji on "MPC-inspired Interface"

ronji — Sat, 12 Feb 2011 22:42:14 +0000

awesome!
by the way , on those knobs, the old syntax would not change the size of the knobs at all no matter what values i entered, but bounds worked perfectly. specifically, i found that the 4th value (height) is the only one that will change the size of the knob. i commented out bounds and used radius, which of course without any x/y coords it stuck it in top left at the radius i chose (i used "radius": [.125], for example). it seems to me that using bounds is easier since you have it all in one line rather than specifying x/y on another line, unless x/y can be included on the radius line?

also, i noticed that while knobs only use a radius for size, buttons and other box controls kinda follow a percentage of the screen width and height, so in order to make a truly square button on the screen i have to use width .125 and height .150 for example. (at least that gives me what looks like a square. forgive me if i didn't do any real math to come to those values)

admin on "MPC-inspired Interface"

admin — Sat, 12 Feb 2011 22:02:41 +0000

Knobs actually use "radius" instead of width and height:

http://charlie-roberts.com/Control/?page_id=85

...and both the old syntax ("x", "y" etc) and the new bounds syntax should work fine. Basically all bounds does is convert the values you pass to it into the same x,y,width and height values that the old syntax uses.

Evilmonkey, yes, you can definitely switch the modes similar to how you wrote it! Nice. It would be closer to the following:

window.switchPadMode = function(padToSwitch, mode) {
    padToSwitch.mode = mode;
}

... and then:

{
    "name":"switcher",
    "type": "Button",
    "ontouchstart":"window.switchPadMode(window.pad1, 'toggle'); window.switchPadMode(window.pad2, 'momentary');",
}

... assuming you had two pads with the names pad1 and pad2. If you had an array of all the pads you could also loop through that and change them all at once... when I finish the padKontrol emulator I'll post it as an example of how to do that.

- Charlie

ronji on "MPC-inspired Interface"

ronji — Sat, 12 Feb 2011 20:22:29 +0000

hmmm.. it would be awesome to mimic padkontrol functionality even closer and add "edit" functionality for the multiple scenes. so you could press an edit button and maybe a text entry field or a list scroller would appear where you could tap a pad and set it to note or cc and specify exactly which note or cc! the actual padkontrol changes scenes with a scene button, which you hold and press one of the 16 pads to determine which scene (i.e. scene button + top left button = scene 1, etc left to right top to bottom). sounds like it would be pretty complicated if it's even possible!

evilmonkey on "MPC-inspired Interface"

evilmonkey — Sat, 12 Feb 2011 18:47:35 +0000

hmmm...off the cuff, I could think of one way of switching between cc and noteon. I'm thinking of something like this.

At the top of the interface file:
var padmode="cc";
function switchpadmode(){
if this.padmode=="cc" { this.padmode="noteon"; }
else { this.padmode="cc"; }
}

Then you need the switch button:
{
"name": "tabButton",
"type": "Button",
"bounds":[.25,.25,.1,.1],
"mode": "momentary",
"stroke": "#aaa",
"ontouchstart": "this.switchpadmode()",
},

And then at the end of each pad button, you'd need an if statement that decides whether to send a noteon or a cc. I'm actually not sure how to write an if statement that will choose which JSON code to execute, but that shouldn't be hard to find. The logic seems sound though. =))

ronji on "MPC-inspired Interface"

ronji — Sat, 12 Feb 2011 16:55:09 +0000

of course, it would be cool to figure out how to set up "scenes" like on the real padkontrol, so you could have multiple pad configurations that could be toggled by pressing one or two buttons, switching from notes to ccs or whatever. this may be possible with Control already, but i know nothing about javascript. i have a feeling charlie was working on a more robust padkontrol interface than just a button grid and xy pad like i made =)

evilmonkey on "MPC-inspired Interface"

evilmonkey — Sat, 12 Feb 2011 13:56:27 +0000

I gotta get ableton and learn how to use it. I just have virtual dj right now and I think it has no use for anything but cc codes in midi. It does not have support for instruments so sending noteon wouldn't be useful for anything. Good additions though, if/when I do get ableton I'll check it out.

ronji on "MPC-inspired Interface"

ronji — Sat, 12 Feb 2011 04:29:45 +0000

ah, so that must also be why i was having trouble figuring out sending midi notes instead of cc. i figured it out though! i changed all the pads to the range
'"midi": ["noteon", 1, 36],'
up to
'"midi": ["noteon", 1, 51],'

and now by default the pads trigger ableton live's operator pads =)
thanks for the heads up about the new syntax! i should have noticed with all the pads i changed.

too bad i can't edit my outdated interface post =/

evilmonkey on "MPC-inspired Interface"

evilmonkey — Sat, 12 Feb 2011 04:14:21 +0000

Yeah, I realized why you're having problems resizing the knobs: I used depreciated syntax to set the size in my original example. I followed Charlie's guide, but that hasn't been updated yet to reflect Control v1.1. Here's what you do:

Instead of:
"x":.60, "y":.0,
"width":.25, "height":.25,

Use:
"bounds":[.60, 0, .25, .25],

The first number is the x coordinate, second number is the y coordinate, third number is width and fourth number is height.

Have fun!

ronji on "MPC-inspired Interface"

ronji — Sat, 12 Feb 2011 03:11:57 +0000

since this is the first thing i saw when i got home today, i decided to dive in and tweak it!

i own a padKONTROL, and i love it, so i decided to make it look like one. i'm having trouble with the knobs... i can't seem to resize them. i looked at the reference page for knobs and i can't see what i'm doing wrong! i haven't tested this yet, but thought i'd post what i have so far and hopefully get some direction on the knob size. they're not so bad really, but i wanted to make them smaller.

loadedInterfaceName = "padCONTROL";

interfaceOrientation = "landscape";

pages = [[
{
"name": "refresh",
"type": "Button",
"x": .1, "y": .0,
"width": .1, "height": .1,
"startingValue": 0,
"isLocal": true,
"mode": "contact",
"ontouchstart": "interfaceManager.refreshInterface()",
"stroke": "#aaa",
},
{
"name": "refreshLabel",
"type": "Label",
"x": .1, "y": .0,
"width": .1, "height": .1,
"isLocal": true,
"value": "refresh",
},
{
"name": "tabButton",
"type": "Button",
"x": .0, "y": .0,
"width": .1, "height": .1,
"mode": "toggle",
"stroke": "#aaa",
"isLocal": true,
"ontouchstart": "if(this.value == this.max) { control.showToolbar(); } else { control.hideToolbar(); }",
},
{
"name": "tabButtonLabel",
"type": "Label",
"x": .0, "y": .0,
"width": .1, "height": .1,
"mode": "contact",
"isLocal": true,
"value": "menu",
},

/* 12 pads begin */
{
"name": "pad0",
"type": "Button",
"bounds": [.360, .8, .125, .15],
"mode": "momentary",
"stroke": "#aaa",
"midi": ["cc", 1, 1],
},
{
"name": "pad1",
"type": "Button",
"bounds": [.515, .8, .125, .15],
"mode": "momentary",
"stroke": "#aaa",
"midi": ["cc", 1, 2],
},
{
"name": "pad2",
"type": "Button",
"bounds": [.670, .8, .125, .15],
"mode": "momentary",
"stroke": "#aaa",
"midi": ["cc", 1, 3],
},
{
"name": "pad3",
"type": "Button",
"bounds": [.825, .8, .125, .15],
"mode": "momentary",
"stroke": "#aaa",
"midi": ["cc", 1, 4],
},
{
"name": "pad4",
"type": "Button",
"bounds": [.360, .615, .125, .15],
"mode": "momentary",
"stroke": "#aaa",
"midi": ["cc", 1, 5],
},
{
"name": "pad5",
"type": "Button",
"bounds": [.515, .615, .125, .15],
"mode": "momentary",
"stroke": "#aaa",
"midi": ["cc", 1, 6],
},
{
"name": "pad6",
"type": "Button",
"bounds": [.670, .615, .125, .15],
"mode": "momentary",
"stroke": "#aaa",
"midi": ["cc", 1, 7],
},
{
"name": "pad7",
"type": "Button",
"bounds": [.825, .615, .125, .15],
"mode": "momentary",
"stroke": "#aaa",
"midi": ["cc", 1, 8],
},
{
"name": "pad8",
"type": "Button",
"bounds": [.360, .430, .125, .15],
"mode": "momentary",
"stroke": "#aaa",
"midi": ["cc", 1, 9],
},
{
"name": "pad9",
"type": "Button",
"bounds": [.515, .430, .125, .15],
"mode": "momentary",
"stroke": "#aaa",
"midi": ["cc", 1, 10],
},
{
"name": "pad10",
"type": "Button",
"bounds": [.670, .430, .125, .15],
"mode": "momentary",
"stroke": "#aaa",
"midi": ["cc", 1, 11],
},
{
"name": "pad11",
"type": "Button",
"bounds": [.825, .430, .125, .15],
"mode": "momentary",
"stroke": "#aaa",
"midi": ["cc", 1, 12],
},
{
"name": "pad12",
"type": "Button",
"bounds": [.360, .245, .125, .15],
"mode": "momentary",
"stroke": "#aaa",
"midi": ["cc", 1, 13],
},
{
"name": "pad13",
"type": "Button",
"bounds": [.515, .245, .125, .15],
"mode": "momentary",
"stroke": "#aaa",
"midi": ["cc", 1, 14],
},
{
"name": "pad14",
"type": "Button",
"bounds": [.670, .245, .125, .15],
"mode": "momentary",
"stroke": "#aaa",
"midi": ["cc", 1, 15],
},
{
"name": "pad15",
"type": "Button",
"bounds": [.825, .245, .125, .15],
"mode": "momentary",
"stroke": "#aaa",
"midi": ["cc", 1, 16],
},
/* 16 pads end */

/*xy start*/
{
"name":"multi1",
"type":"MultiTouchXY",
"bounds": [.01, .69, .3, .3],
"midi":["cc", 1, 17],
},
/*slider end*/

/*volume knob start*/
{
"name":"knob1",
"type":"Knob",
"x":.80, "y":.0,
"width":.25, "height":.25,
"midi":["cc", 1, 18],
},
/*volume knob end*/

/*gain knob start*/
{
"name":"knob2",
"type":"Knob",
"x":.60, "y":.0,
"width":.25, "height":.25,
"midi":["cc", 1, 19],
},
/*gain knob end*/

]

];

evilmonkey on "MPC-inspired Interface"

evilmonkey — Sat, 12 Feb 2011 02:28:46 +0000

I don't actually remember what an MPC does (my friend has one, I don't), but I think there's typically a switch: you can either set it up to play while you hold a pad and stop once you let go or the pads just trigger a sample that will play until it ends. I'm no MPC expert, unfortunately.

I'd be curious to see what you come up with.

admin on "MPC-inspired Interface"

admin — Sat, 12 Feb 2011 01:50:53 +0000

Cool! I was actually just working on a pad interface today... trying to emulate the xy controls on the Korg PadKontrol. Good to know how the MPC is setup, maybe I'll try and change the one I'm working on to follow that convention.

So as someone familiar with the MPC, is the MPC note repeat feature basically just "Hold down a pad and the note will repeat at a rate determined by a slider"? That's the same thing the PadKontrol does but I'm curious if there's more to it on a MPC.

evilmonkey on "MPC-inspired Interface"

evilmonkey — Sat, 12 Feb 2011 00:04:57 +0000

Hi all,

I had a half an hour and wanted to create something relatively simple. Behold, an MPC-inspired interface (http://www.soundonsound.com/sos/may07/images/AkaiMPC500_l.jpg ). I didn't code anything to the right of the pads because I'm on an ipod touch and there's just not enough screenspace to make it useful. If someone with an ipad wants to extend it, please be my guest.

It sends MIDI signals as follows: pads: 0-CC1 through 0-CC12 in accordance with the MPC's pad numbering system (i.e. CC1 is the bottom left pad, CC12 is the top right pad.); knobs are 0-CC13 and 0-CC14; and the slider is 0-CC15.

Have fun!

--EM

--------code start--------

/*License: BSD
Use, share and enjoy!
--"evilmonkey" */

loadedInterfaceName = "Music Production Console";

interfaceOrientation = "landscape";

pages = [[
/*{
"name": "refresh",
"type": "Button",
"x": .8, "y": .9,
"width": .1, "height": .1,
"startingValue": 0,
"isLocal": true,
"mode": "contact",
"ontouchstart": "interfaceManager.refreshInterface()",
"stroke": "#aaa",
},
{
"name": "refreshLabel",
"type": "Label",
"x": .8, "y": .9,
"width": .1, "height": .1,
"isLocal": true,
"value": "refresh",
},*/
{
"name": "tabButton",
"type": "Button",
"x": .9, "y": .9,
"width": .1, "height": .1,
"mode": "toggle",
"stroke": "#aaa",
"isLocal": true,
"ontouchstart": "if(this.value == this.max) { control.showToolbar(); } else { control.hideToolbar(); }",
},
{
"name": "tabButtonLabel",
"type": "Label",
"x": .9, "y": .9,
"width": .1, "height": .1,
"mode": "contact",
"isLocal": true,
"value": "menu",
},

/* 12 pads begin */
{
"name": "pad0",
"type": "Button",
"bounds": [.2, .8, .15, .15],
"mode": "contact",
"stroke": "#aaa",
"midi": ["cc", 1, 1],
},
{
"name": "pad1",
"type": "Button",
"bounds": [.4, .8, .15, .15],
"mode": "contact",
"stroke": "#aaa",
"midi": ["cc", 1, 2],
},
{
"name": "pad2",
"type": "Button",
"bounds": [.6, .8, .15, .15],
"mode": "contact",
"stroke": "#aaa",
"midi": ["cc", 1, 3],
},
{
"name": "pad3",
"type": "Button",
"bounds": [.2, .55, .15, .15],
"mode": "contact",
"stroke": "#aaa",
"midi": ["cc", 1, 4],
},
{
"name": "pad4",
"type": "Button",
"bounds": [.4, .55, .15, .15],
"mode": "contact",
"stroke": "#aaa",
"midi": ["cc", 1, 5],
},
{
"name": "pad5",
"type": "Button",
"bounds": [.6, .55, .15, .15],
"mode": "contact",
"stroke": "#aaa",
"midi": ["cc", 1, 6],
},
{
"name": "pad6",
"type": "Button",
"bounds": [.2, .30, .15, .15],
"mode": "contact",
"stroke": "#aaa",
"midi": ["cc", 1, 7],
},
{
"name": "pad7",
"type": "Button",
"bounds": [.4, .30, .15, .15],
"mode": "contact",
"stroke": "#aaa",
"midi": ["cc", 1, 8],
},
{
"name": "pad8",
"type": "Button",
"bounds": [.6, .30, .15, .15],
"mode": "contact",
"stroke": "#aaa",
"midi": ["cc", 1, 9],
},
{
"name": "pad9",
"type": "Button",
"bounds": [.2, .05, .15, .15],
"mode": "contact",
"stroke": "#aaa",
"midi": ["cc", 1, 10],
},
{
"name": "pad10",
"type": "Button",
"bounds": [.4, .05, .15, .15],
"mode": "contact",
"stroke": "#aaa",
"midi": ["cc", 1, 11],
},
{
"name": "pad11",
"type": "Button",
"bounds": [.6, .05, .15, .15],
"mode": "contact",
"stroke": "#aaa",
"midi": ["cc", 1, 12],
},
/* 12 pads end */

/*slider start*/
{
"name":"mySlider",
"type":"Slider",
"x":0, "y":.5,
"width":.10, "height":.5,
"isVertical":true,
"midi":["cc", 1, 15],
},
/*slider end*/

/*volume knob start*/
{
"name":"volKnob",
"type":"Knob",
"x":0, "y":0,
"width":.15, "height":.15,
"midi":["cc", 1, 13],
},
/*volume knob end*/

/*gain knob start*/
{
"name":"gainKnob",
"type":"Knob",
"x":0, "y":.25,
"width":.15, "height":.15,
"midi":["cc", 1, 14],
},
/*gain knob end*/

]

];

--------code end-------------