Tag: UI

Black on white with Max 7

Making Max 7 look like 6.

update: 9/2017 – this has turned out to be an unworkable solution – short of reassigning the color scheme for every possible UI object. The main reason being that the default text color UI objects in Max 7 is white. So, if you cut and paste or load another patch you will need to change each UI object by hand.

What’s this about?

The UI in Max 7 reverses foreground and background from previous versions of Max (and Pd).  Additionally,  a secondary toolbar menu frames the patcher and all sub-patchers. For example, here is a simple Max 6 patch and its Max 7 equivalent.

Max 6:

Max 7:

Regardless of which look you find more appealing, the new UI is problematic in several ways.

  • Light text on dark background can be difficult (blurry)  for people with vision impairment – given the same font size and screen brightness.
  • Patches created in previous versions of Max lose their original design.
  • Larger objects and toolbar frames consume more screen space.
  • If you like to sketch ideas with pencil – an empty white patcher screen is like paper.

Max 7 doesn’t include a black-on-white style, but you can make your own. And lose the toolbar. Here is a new and improved version of the patch:

Making a new style

The process is arcane. But it took less than a half hour to get results. Then I wasted time endlessly tweaking.

The secret recipe came from a 2014 Cycling 74 forum post by Phiol, with assistance from Ben Bracken. Everything you need to know is explained in Phiol’s first 2 posts in the thread. https://cycling74.com/forums/topic/custom-color-scheme-layout-setup-walkthrough/#.V6oHMZMrIcg

I encourage you to read both posts and follow the steps precisely. There are no shortcuts. I will paraphrase Phiol’s method here:

  1. In a default patcher, make a bunch of objects and then in the Format Palette (object inspector) change them to whatever colors you want
  2. Select all the objects in the patcher
  3. In the Format palette, make a new style – this style will be for multiple objects
  4. Select the patcher to activate it in the Format palette
  5. In the Style menu (located in the patcher inspector window), select the style you just made, applying it to the patcher level
  6. Delete all of the objects in the patcher
  7. Save a new template (in dropdown file menu “create template”) and make it your default.

And then the bad news:

Step 1. is important.
  • You must start from a blank “Default Patcher Template” and choose “Default Max7”
  • You cannot copy/paste objects that you had already done your custom colors. You will have to start from scratch. one by one.
  • In the inspector window, make sure the “Appearance style” has nothing selected in it’s umenu

Then do all the steps mentioned in the previous thread.

The Glitch/bug:

-Gradients objects do not work.
For example, [message and umenu] would not keep my custom colors.

Workaround: Once you have started a new patch, reselect your “custom_style” in patch inspector window or the ‘format’ sub menu. That is, click the style that should already be selected/checked – and now it should work.

So yes, for now, as we start a new patch we will we have to make it a habit to always select our “custom_style” in patcher inspector window or the format sub-menu.

patcher inspector window

format submenu

(click the paintbucket icon on the top toolbar)

 

Copy style to library

Also, when you open older Max6 patches and/or the help patch and want to apply your new custom style template, make sure that in the “Format” dropdown menu you have selected the “copy style to library”.

Loading Max 6 patches

Once you’ve done this, you will be able to apply you’re custom style to older/help patchers and resave them with your custom look. To do so, you open Inpector’s Appearance again, and select your “custom_style” that will be in the Library style.

Walking through the process of step one

If you are totally confused at this point, so was I.

Starting with step one above,  make a patch with common objects, that looks something like this:

Select each object individually, then with inspector, change the background color to white, or a lighter shade, and the text color to black.

You may need to experiment. Try with a small number of objects at first – because you will probably need to do the whole process several times. As noted above, you have start from the begining  each time by hand. You can’t modify a style after you save it.

Then, you should be able to follow the rest of the steps from Phiol’s post.

The objects used for this style are:

  • umenu*
  • button
  • dial
  • toggle
  • generic object
  • textedit
  • slider
  • message*

*these objects use gradients

Making a white patcher background

  • open a blank patcher
  • ctrl click on the background and select “Inspector Window”.
  • Change the unlocked and locked background colors to white.
  • Then, from the File menu, select ‘create template’ and give it the same name as the template you selected in step 7 above (and make sure to check ‘default for new patchers’)

Getting rid of the tool bar frame

The procedure is basically the same as setting the white background.

  • In a blankpatcher, open the inspector window and uncheck ‘show toolbar on open’.
  •  Then, from the File menu, select ‘create template’ and give it the same name as the template you selected in step 7 above (and make sure to check ‘default for new patchers’)

Note: you can toggle the toolbar anytime with <cmd>8

 If subpatchers  still have the default look

If you create a subpatch and it reverts back to the default style then…

  • In a blank patcher, open the inspector window and set the subpatcher template to your new tempate created in step 7 above.
  •  Then, from the File menu, select ‘create template’ and give it the same name as the template you selected in step 7 above (and make sure to check ‘default for new patchers’)

More about styles and templates in Max 7

Check out the Cycling 74 vignettes about styles and templates to get a better understanding of what’s going on here:

https://docs.cycling74.com/max7/vignettes/styles

https://docs.cycling74.com/max7/vignettes/templates

gibberface web audio

interface.js user interface plus gibberish.js audio engine.

By Charlie Roberts

https://github.com/charlieroberts/gibberface

Audio example of XY controller to contol pitch and pulsewidth of oscillators (pictured above).

Local clone: tkzic/gibberface – WIth a local web server running in tkzic. Here is a typical URL for testing: http://127.0.0.1:8000/gibberface/index.html

Low resolution LED interface

Lots of information in a few pixels.

Computer displays have evolved to high resolutions. What about the other direction? This experiment  is a display interface using a grid of LED’s. Essentially, very large pixels.

information types
  • on/off 
  • small numbers (0-10)
  • large numbers (0-10,000,000)
  • clocks
  • level indicators
  • connections
  • map keys (i.e., explanations of symbols) 
communicating with LED’s

LED’s communicate information using

  • brightness
  • color
  • movement
ideas

With just a few LED’s its easy to display a clear message. A large matrix of LEDS can get confusing. Here are a few suggestions:

  • Use separate regions for each block of information.
  • Draw guide markers to help locate positions by giving frame of reference.
  • Animation catches the eye but also distracts, and confuses.

examples

traffic lights

An effective but inefficient signaling method.

resistor codes:

Resistors use a numeric color code.

Find the value of any resistor by looking at the first four 4 color bands. Colors represent  base 10 exponential notation.

abacus

An abacus uses 5 or 10 beads for each digit. Faster than decoding a resistor and works with one color – but takes up more space.

level meters

Segmented level meters convey information using a line of pixels:

binary clock

Represents digits using binary coded decimal notation.

An LED grid in Max

This grid design was used for the visual interface of a shortwave radio:

And an etch-a-sketch:

download

https://github.com/tkzic/max-projects

folder: LED-display/rx-320/

files:

  • rxpanel2.maxpat (main patch)
  • panel2.js (javascript)

instructions

There are 2 large toggles – one for etch-a-sketch, and another for the radio simulator. Try one, then toggle it off before trying another one. If you forget – just restart the patch.

The number box near the top can be used to expand or contract the display size (while it is active) The default size is 17.

how it works

The same patch generated both video examples above. It uses javascript to make a two dimensional array of Max led objects. Each object is addressable by its position in the array. Here’s the code to make the objects:

//
// makecells - create matrix of led objects
//
function makecells( x, y, color )
{

var p;		// this patcher
var tmpstr;
var objname;

	post( "makecells: ", x, y, color );
	post( );

	p = this.patcher;

// make cells

	for( i = 0; i < x; i++ )
		{
		for(j = 0; j < y; j++ )
			{
			cell[i][j] = p.newdefault(xorigin + (i * cellspace), yorigin + (j * cellspace), "led" );    // create leds
			if(color != 9 )
				{
				cell[i][j].hidden = 0;
				cell[i][j].message( "pict", color );
				}
			else
				{
				cell[i][j].hidden = 1;
				}

			cell[i][j].varname = "led" + i + "x" +  j;							//  assigns name for future use	
			}
		}

}

 

blobs

Although each LED in a grid is addressable, its easier to group sections of the grid into blobs. Each blob is a unit that displays data, like a number for example. There are several types of blobs:

Here are the properties of a blob:

//  blob data structure
//
//   x, y upper left
//   lengthx, lengthy, 
//
//   orientation: 0 = horizontal, 1 = vertical
//   step  1 = downward or rightward,  -1 = upward or leftward  (this defines the corner of origin too)
//
//   data lorange, hirange
//   scale: 0 = no, 1 = yes
//
//   blobtype: 0 = generic decimal,  1 = spare,  2 = pushbutton flash,  3 = radiobutton, 
//   color code 0-9
//   contrast color 0-9
//
//   signed ( 0 = no, 1 = yes)		// booooooooooooooolean  
//   colorshift ( 0 = normal , 1 = use different colors every 3 digits, like comma separators (frequency display)
//
//   blink  (milliseconds duration for pushbutton flash type only (led blinktime )
//      
//   radio number
//   name
//   value
//
//

 

Blob data examples

Lets look at examples of various ways to display data – as used in the shortwave radio video above.

Here are 3 blobs that represent numbers in three different ways.

The far left column and the bottom row are key graphics. They give a frame of reference for the data.

columns

Moving from left to right…

The LED’s far left column, are a graphic key, starting with red on the bottom, represent the numbers 1-9

The next blue column is just a divider

The 3rd column of white dots is the signal strength data ranging from the 0-9. The current value is ‘4’, represented by a column of 4 dots.

The next nine columns (4-12) represent the frequency in Hz. ranging from 0-999,999,999. The data is in groups of three (as you can see by looking at the graphical key in the bottom row). The number currently displayed is: 4,999,991.

Negative frequencies are displayed by shifting the colors to values that don’t match the key graphic.

The last column is a radio button with 4 possible values and is currently set to ‘3’

rows

The bottom row is a key graphic, showing a different color, or group of colors for each data item. So for example, there is one white dot under the signal strength data in column 3. There are 3 groups of 3 dots (yellow, green, yellow) in columns 4-12 representing the frequency data in the format: 999,999,999.

The 2nd blue row from the bottom is a divider.

The next shows which data items are being controlled by modulators. The 3 white LED’s show modulation of frequency data in the million’s, 100’s, and ten’s  places.

Modulator units

There are 5 modulator units in the display. Data is represented using a color code..

  1.  red
  2. green
  3. blue
  4. yellow
  5. white

Gray LED’s represent ‘momentary’ controls in the off state. When a momentary button is pressed, it will blink white.

Here is an example of a modulator unit

The blue LED’s are just dividers (background space)

columns

The first column of data on the left is the on/off indicator and the modulator’s ID number.

The top LED of the column is the on/off toggle. It is blank, which means off.

The next two red LED’s together represent the ID number of the modulator: red = 1

For the remaining columns, the top row indicates whether the input gate is open allowing other modulators to control the parameter. Grey indicates the gate is closed, A white LED means the input gate is open.

The second and third columns of data are the clock speed and wave type. The 2 LEDS in each column are grouped together and are using the color code above. The clock speed is 5 (white). The wave type is 4 (yellow)

The fourth and fifth columns of data are the low and high range. Low range value is 5 (white) and high range value is 2 (green) – which doesn’t make sense, but this is simulator data.

The last column is the modulator destination activity indicator: grey if zero (not assigned) or white if any non-zero value.

modulator data structure:
// modulator data structure
// these are fixed structures 8x2, with specific color rules
//
// ulx, uly
// mod id number 1-n 
// on	: 0 = off, 1 = on
// modin :  modulation source index 0-4
// clockspeed  :  0-4
// wavetype : 0-4
// lorange : 0-4
// hirange : 0-4
// ingate : 0 - 4  (tells which control is being modulated)
// spare
// destination : 0-127 destination index  // this is displayed elsewhere
//

 

hardware interface

Adafruit 32×32 RGB LED panel

https://www.adafruit.com/products/1484?gclid=CMzrnYDB1b4CFTQQ7AodjXkAFw

local file notes:

files are also in tkzic/new max radio project/

There is a newer version adapted for the Max radio project – basically same code, but file names are

  • rxpanel3.maxpat
  • panel3.js