{"id":536,"date":"2019-09-16T12:48:37","date_gmt":"2019-09-16T02:48:37","guid":{"rendered":"https:\/\/x37v.com\/x37v\/?p=536"},"modified":"2019-09-17T15:49:42","modified_gmt":"2019-09-17T05:49:42","slug":"max-objects-in-css","status":"publish","type":"post","link":"https:\/\/x37v.com\/x37v\/max\/max-objects-in-css\/","title":{"rendered":"Max objects in HTML\/CSS"},"content":{"rendered":"

This is a post with no point other than to share some CSS styles I made for recreating the appearance of Max 8 objects in a web browser. I’ve been planning to post several short entries about Max ideas, and after using a square bracket notation to convey Max code in text\u00a0[like this]<\/code> (when posting on the Max forums<\/a>\u00a0for example), I tried recreating them in HTML and CSS to help make text-based description of Max code a little more intuitive.<\/p>\n

These styles reproduce the vanilla styling of Max 8 objects<\/em>, messages<\/em> and comments<\/em>. With the exception of bubble comments, all elements are displayed in their unlocked state like this:<\/p>\n

\n
sah~<\/code> jit.pwindow @size 1280 720<\/code> qmetro 20 @active 1<\/code><\/div>\n
replace drumloop.aif<\/code> read bounce.mov<\/code> startwindow<\/code><\/div>\n
-40<\/code> 2.71<\/code> C-2<\/code><\/div>\n
Load sample then hit spacebar<\/code> Ensure dac~ is running<\/code> Use localhost\/127.0.0.1 port 9000<\/code><\/div>\n
Click and drag in the multislider<\/code> Switch between fullscreen and windowed<\/code> Turn on metro<\/code><\/div>\n<\/section>\n

Usage<\/h3>\n

Max objects can be created with any semantically appropriate inline\/inline-block element, eg. <code><\/code> or <span><\/code> \u2014\u00a0the rules in the stylesheet will set display: inline-block;<\/code> on the element used. As the elements are inline-blocks, they can be placed inline within text<\/code> like this<\/code>.<\/p>\n

Give the element a class of \"max object\"<\/code>, \"max message\"<\/code>, \"max number\"<\/code>, \"max comment\"<\/code>, \"max comment bubble\"<\/code>, (or \"max comment bubble multiline\"<\/code>) to produce the desired object. (See Examples below).<\/p>\n

I’ve also sketched up a jQuery<\/a> script that adds an adjustable number of inlets and outlets based on the elements’ data-inlets<\/code> and data-outlets<\/code> attributes.\u00a0 By default, objects are given an inlet and an outlet, unless specified otherwise by adding data-inlets=\"5\"<\/code> and data-outlets=\"2\"<\/code> attributes. Messages, numbers, and comments are given their standard number of inlets and outlets without having to explicitly specify them. Inlets and outlets can be suppressed though by adding\u00a0data-inlets=\"false\"<\/code> (or\u00a0data-inlets=\"0\"<\/code>) and data-outlets=\"false\"<\/code> (or data-outlets=\"0\"<\/code>).<\/p>\n

Examples<\/h3>\n
\nmetro 125<\/code>
\n<code class=\"max object\" data-inlets=\"2\" data-outlets=\"1\">metro 125<\/code><\/code><\/p>\n

vst~ 8 8 VCV-Bridge.vst<\/code>
\n<code class=\"max object\" data-inlets=\"8\" data-outlets=\"14\">vst~ 8 8 VCV-Bridge.vst<\/code><\/code><\/p>\n

jit.bfg<\/code>
\n<code class=\"max object\" data-inlets=\"1\" data-outlets=\"2\">jit.bfg<\/code><\/code><\/p>\n

cpuclock<\/code>
\n<code class=\"max object\">cpuclock<\/code><\/code><\/p>\n

p adstatus_settings<\/code>
\n<code class=\"max object\" data-inlets=\"0\" data-outlets=\"0\">p adstatus_settings<\/code><\/code><\/p>\n

read ducks.mov, bang<\/code>
\n<code class=\"max message\">read ducks.mov, bang<\/code><\/code><\/p>\n

replace drumLoop.aif<\/code>
\n<code class=\"max message\">replace drumLoop.aif<\/code><\/code><\/p>\n

\"CC 4\" $1<\/code>
\n<code class=\"max message\">\"CC 4\" $1<\/code><\/code><\/p>\n

74<\/code>
\n<code class=\"max number\">74<\/code><\/code><\/p>\n

A#5<\/code>
\n<code class=\"max number selected\">A#5<\/code><\/code><\/p>\n

0.98<\/code>
\n<code class=\"max number\">0.98<\/code><\/code><\/p>\n

0.0016328<\/code>
\n<code class=\"max number selected\">0.0016328<\/code><\/code><\/p>\n

A regular comment<\/code>
\n<code class=\"max comment\">A regular comment<\/code><\/code><\/p>\n

A 'bubble' comment<\/code>
\n<code class=\"max comment bubble\" data-arrow=\"left\">A 'bubble' comment<\/code><\/code><\/section>\n

For completeness, comments can also be forced to be multiline with the addition of the ‘multiline’ class, like this:<\/p>\n

\nA 'bubble' comment that
\nspans multiple lines.<\/code>
\n<code class=\"max comment bubble multiline\" data-arrow=\"left\">A 'bubble' comment that<br \/>spans multiple lines<\/code><\/code>
\n<\/section>\n

(As bubble comments are displayed as ‘inline-block’ elements, multiline bubble comments must have line breaks in them with <br \/> element as shown above, to force the text to wrap over multiple lines).<\/p>\n

Bubble Comments<\/h3>\n

Changing the data-arrow<\/code> attribute can also be used to change the side of the bubble comment’s arrow like this:<\/p>\n

\nA left arrow 'bubble' comment<\/code>
\n<code class=\"max comment bubble\" data-arrow=\"left\">A left arrow 'bubble' comment<\/code><\/code><\/p>\n

A top arrow 'bubble' comment<\/code>
\n<code class=\"max comment bubble\" data-arrow=\"top\">A top arrow 'bubble' comment<\/code><\/code><\/p>\n

A right arrow 'bubble' comment<\/code>
\n<code class=\"max comment bubble\" data-arrow=\"right\">A right arrow 'bubble' comment<\/code><\/code><\/p>\n

A bottom arrow 'bubble' comment<\/code>
\n<code class=\"max comment bubble\" data-arrow=\"bottom\">A bottom arrow 'bubble' comment<\/code><\/code><\/p>\n

A multiline left
\narrow 'bubble' comment<\/code>
\n<code class=\"max comment bubble multiline\" data-arrow=\"left\">A multiline<br \/>left arrow 'bubble' comment<\/code><\/code><\/p>\n

A multiline top
\narrow 'bubble' comment<\/code>
\n<code class=\"max comment bubble multiline\" data-arrow=\"top\">A multiline<br \/>top arrow 'bubble' comment<\/code><\/code><\/p>\n

A multiline right
\narrow 'bubble' comment<\/code>
\n<code class=\"max comment bubble multiline\" data-arrow=\"right\">A multiline<br \/>right arrow 'bubble' comment<\/code><\/code><\/p>\n

A multiline bottom
\narrow 'bubble' comment<\/code>
\n<code class=\"max comment bubble multiline\" data-arrow=\"botton\">A multiline<br \/>bottom arrow 'bubble' comment<\/code><\/code>
\n<\/section>\n

Unlocked Patcher<\/h3>\n

Lastly, if you want to add a patcher<\/em> canvas to your page, use\u00a0a block element (eg. <section><\/code>) with a \"max patcher\"<\/code> class like this:\u00a0<section class=\"max patcher\"><\/section><\/code> \u2014 and nest your elements inside it, eg.<\/p>\n

jit.hello<\/code><\/section>\n

<section class=\"max patcher\">
\n<code class=\"max object\">jit.hello<\/code>
\n<\/section><\/code><\/section>\n

Patchers can also have a data-zoom<\/code> attribute if you want to increase\/decrease zoom levels. Acceptable values are 25%, 50%, 75%, 100%, 125%, 150%, 200%, 300%, 400%. Treat this as a bonus feature that may not work in some browsers (Firefox, Opera).<\/p>\n

jit.bfg<\/code><\/section>\n

<section class=\"max patcher\" data-zoom=\"200%\">
\n<code class=\"max object\">jit.bfg<\/code>
\n<\/section><\/code><\/section>\n

Download<\/h3>\n

Download the CSS and JS files:<\/p>\n