How This Works.rtf

{\rtf1\ansi\ansicpg1252\cocoartf1187\cocoasubrtf400
\cocoascreenfonts1{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fmodern\fcharset0 Courier;}
{\colortbl;\red255\green255\blue255;}
{\info
{\author Peter Nyboer}
{\*\company Livid Instruments}
{\*\copyright 2012 Livid Instruments}}\margl1440\margr1440\vieww12000\viewh10200\viewkind0
\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\pardirnatural

\f0\fs24 \cf0 Guide to the web based editor code.\
ADDING A CONTROLLER\'85\
Make an SVG and grep the shit out of it so it is in Rafael graphics/JSON format. Insert the JSON into a "
\f1 controller[<productid>]"
\f0  object in 
\i faceplate.js
\i0 , within 
\b beginfaceplate()
\b0 .\
sysexToLivid.js and lividToSysex will need their own entries for the product ID. These have all the functions that process all the sysex to-and-from the "
\f1 livid
\f0 " object.\
There are several product-specific arrays in 
\i uitocontroller.js 
\i0 that need adding and updating:\

\f1 <CONTROLLER NAME>
\f0  = (pid==<product id>) - just a boolean so we can make adjustments based on the controller. Nicer than always using the "
\f1 pid
\f0 " value.\

\f1 requests[<product id>]
\f0  is an array of sysex command numbers whose values we want to pull from the device\

\f1 sx_send[<product id>] 
\f0 is anarray of sysex command numbers that are used and sent to configure the device\

\f1 livid
\f0  may need an additional property or two if there is something new about the product, beyond pots, btns, etc.\

\f1 crtoID[<product id>] 
\f0 gives you the ID of a Column/Row value for led note and cc maps (CMD 35 and 36).\

\f1 IDtocr[<product id>]
\f0  maps gives you the CR value for an ID. Used when converting 
\f1 livid
\f0  object to sysex.\

\f1 posi[<product id>].btn
\f0  (and others) maps position in MIDI map commands (like CMD 10,11,16, etc) to ID.\

\f1 ipos[<product id>].btn
\f0  (& others) maps ID to correct position in MIDI map commands.\

\f1 dim[<product id>] 
\f0 provides dimensions of the controller image (e.g. 'faceplate_4.png') for spacing the graphics. Would be nice to fetch this programmatically, but I hard code it.\
\
ON START\'85.\
We use 
\b window.onload()
\b0  in 
\i editor.html
\i0  to call
\b \
makemidimenu(). 
\b0 This uses the Jazz plugin to put all the ports in the first menu presented to the user.\
User selects a port from the menu, and \

\b midioutports()
\b0  is called in 
\i midiio.js 
\i0 which sets both the midi in and out ports, clears out the scrim, and then calls \

\b inquire()
\b0  in 
\i uitocontroller.js
\i0  to turn on the 
\f1 requesting
\f0  flag and then find out which model controller is on the port. This sends a sysex message to the controller which answers back with model and firmware version. Then, \

\b procSysex()
\b0  will detect this and call \

\b product() 
\b0 adjusts the UI based on the features. The Rafael graphics (mouseover) are setup with the\

\b beginfaceplate()
\b0  function. 
\b product()
\b0  finally calls the\

\b request()
\b0   to send all the request sysex settings commands using a call-response method. That's managed by the \

\b procSysex()
\b0  function which also detects the end of the request process (
\f1 requesting
\f0  flag=0). All the settings are dumped into the 
\f1 sx
\f0  array with\

\b procSyesx() 
\b0 during the request process. All the sysex is then processed into the 
\f1 livid
\f0  object with \

\b toobj()
\b0  and 
\b sxToObj()
\b0  to organize the data in a way that makes sense for the UI.\
\
WHEN A FORM ELEMENT IS USED\
When a user makes a change in the inspectors (forms), the jquery listener has a callback \

\b $(:input).change( function\{\'85\}) 
\b0 that detects ANY changes in ANY form. The function detects the type of form ('btn', 'pot', 'globl', etc) the input originates from, processes the values into the right types, then calls\

\b submit_one()
\b0  (or 
\b colormap_set()
\b0 ) to update the "livid" object and send sysex to the controller with the \

\b globl_set()
\b0  or 
\b UI()
\b0  functions.\
\
WHEN A MIDI (note,cc) MESSAGE IS SENT FROM THE CONTROLLER\
\
WHEN A CONTROL ELEMENT IS CLICKED\
call function 
\b getid()
\b0  to parse the DOM name into type and index\
which calls function 
\b updatectlinspector()
\b0  which gets all the relevant data for the index at that type of control in the livid object, and updates the DOM ui. There is a similar function for the globals 
\b updateglobalinspector()\

\b0 \
WHEN A CONTROL ELEMENT IS MOUSED-OVER\
\
}