improved text placement

Reviewed-on: #16

ModEnum.maxpat

@@ -10,9 +10,11 @@
 		}
 ,
 		"classnamespace" : "box",
-		"rect" : [ 294.0, 100.0, 1083.0, 787.0 ],
+		"rect" : [ 53.0, 190.0, 1417.0, 704.0 ],
+		"bglocked" : 1,
 		"openinpresentation" : 1,
 		"gridsize" : [ 15.0, 15.0 ],
+		"toolbars_unpinned_last_save" : 15,
 		"boxes" : [ 			{
 				"box" : 				{
 					"id" : "obj-5",
@@ -51,11 +53,11 @@
 				"box" : 				{
 					"id" : "obj-46",
 					"maxclass" : "newobj",
-					"numinlets" : 3,
+					"numinlets" : 4,
-					"numoutlets" : 3,
+					"numoutlets" : 4,
-					"outlettype" : [ "", "", "" ],
+					"outlettype" : [ "", "", "", "" ],
-					"patching_rect" : [ 207.5, 93.827167987823486, 135.0, 22.0 ],
+					"patching_rect" : [ 207.5, 93.827167987823486, 193.0, 22.0 ],
-					"text" : "routepass param reload"
+					"text" : "routepass param reload viewMode"
 				}
 
 			}
@@ -305,53 +307,61 @@
 			}
 , 			{
 				"box" : 				{
+					"fontname" : "Arial Bold",
 					"id" : "obj-165",
 					"maxclass" : "comment",
 					"numinlets" : 1,
 					"numoutlets" : 0,
-					"patching_rect" : [ 447.0, 1145.0, 91.0, 20.0 ],
+					"patching_rect" : [ 447.0, 1145.0, 96.0, 20.0 ],
 					"presentation" : 1,
-					"presentation_rect" : [ 192.0, 126.0, 91.0, 20.0 ],
+					"presentation_rect" : [ 673.0, 18.0, 96.0, 20.0 ],
-					"text" : "Custom wave 4"
+					"text" : "Custom wave 4",
+					"textcolor" : [ 0.254901960784314, 0.411764705882353, 0.882352941176471, 1.0 ]
 				}
 
 			}
 , 			{
 				"box" : 				{
+					"fontname" : "Arial Bold",
 					"id" : "obj-166",
 					"maxclass" : "comment",
 					"numinlets" : 1,
 					"numoutlets" : 0,
-					"patching_rect" : [ 356.0, 1145.0, 91.0, 20.0 ],
+					"patching_rect" : [ 356.0, 1145.0, 96.0, 20.0 ],
 					"presentation" : 1,
-					"presentation_rect" : [ 16.0, 126.0, 91.0, 20.0 ],
+					"presentation_rect" : [ 459.666666666666629, 18.0, 96.0, 20.0 ],
-					"text" : "Custom wave 3"
+					"text" : "Custom wave 3",
+					"textcolor" : [ 0.254901960784314, 0.411764705882353, 0.882352941176471, 1.0 ]
 				}
 
 			}
 , 			{
 				"box" : 				{
+					"fontname" : "Arial Bold",
 					"id" : "obj-164",
 					"maxclass" : "comment",
 					"numinlets" : 1,
 					"numoutlets" : 0,
-					"patching_rect" : [ 447.0, 1123.0, 91.0, 20.0 ],
+					"patching_rect" : [ 447.0, 1123.0, 96.0, 20.0 ],
 					"presentation" : 1,
-					"presentation_rect" : [ 192.0, 14.0, 91.0, 20.0 ],
+					"presentation_rect" : [ 246.333333333333314, 18.0, 96.0, 20.0 ],
-					"text" : "Custom wave 2"
+					"text" : "Custom wave 2",
+					"textcolor" : [ 0.254901960784314, 0.411764705882353, 0.882352941176471, 1.0 ]
 				}
 
 			}
 , 			{
 				"box" : 				{
+					"fontname" : "Arial Bold",
 					"id" : "obj-163",
 					"maxclass" : "comment",
 					"numinlets" : 1,
 					"numoutlets" : 0,
-					"patching_rect" : [ 356.0, 1123.0, 91.0, 20.0 ],
+					"patching_rect" : [ 356.0, 1123.0, 96.0, 20.0 ],
 					"presentation" : 1,
-					"presentation_rect" : [ 16.0, 14.0, 91.0, 20.0 ],
+					"presentation_rect" : [ 33.0, 18.0, 96.0, 20.0 ],
-					"text" : "Custom wave 1"
+					"text" : "Custom wave 1",
+					"textcolor" : [ 0.254901960784314, 0.411764705882353, 0.882352941176471, 1.0 ]
 				}
 
 			}
@@ -545,7 +555,7 @@
 
 							}
  ],
-						"originid" : "pat-3857"
+						"originid" : "pat-180"
 					}
 ,
 					"patching_rect" : [ 724.0, 1441.0, 95.0, 22.0 ],
@@ -592,9 +602,11 @@
 , 			{
 				"box" : 				{
 					"addpoints" : [ 0.0, 62.666666666666664, 0, 101.694915254237287, 100.0, 0, 230.363894333230689, 0.0, 0, 549.512830503443411, 0.0, 0, 861.016949152542338, 100.0, 0, 1000.0, 0.0, 0 ],
+					"bgcolor" : [ 0.968627450980392, 0.968627450980392, 0.968627450980392, 1.0 ],
 					"classic_curve" : 1,
 					"hidden" : 1,
 					"id" : "obj-153",
+					"linecolor" : [ 0.254901960784314, 0.411764705882353, 0.882352941176471, 1.0 ],
 					"maxclass" : "function",
 					"numinlets" : 1,
 					"numoutlets" : 4,
@@ -603,7 +615,7 @@
 					"parameter_enable" : 0,
 					"patching_rect" : [ 724.0, 1479.0, 159.5, 52.0 ],
 					"presentation" : 1,
-					"presentation_rect" : [ 193.0, 172.0, 159.5, 52.0 ],
+					"presentation_rect" : [ 673.0, 64.0, 159.5, 52.0 ],
 					"range" : [ 0.0, 100.0 ],
 					"varname" : "userFunction4"
 				}
@@ -765,7 +777,7 @@
 
 							}
  ],
-						"originid" : "pat-3859"
+						"originid" : "pat-182"
 					}
 ,
 					"patching_rect" : [ 510.0, 1441.0, 95.0, 22.0 ],
@@ -812,8 +824,10 @@
 , 			{
 				"box" : 				{
 					"addpoints" : [ 0.0, 0.0, 0, 390.95744680851061, 0.0, 0, 390.95744680851061, 82.666666666666671, 0, 638.418079096045176, 100.0, 0, 881.355932203389784, 51.851851851851855, 0 ],
+					"bgcolor" : [ 0.968627450980392, 0.968627450980392, 0.968627450980392, 1.0 ],
 					"classic_curve" : 1,
 					"id" : "obj-148",
+					"linecolor" : [ 0.254901960784314, 0.411764705882353, 0.882352941176471, 1.0 ],
 					"maxclass" : "function",
 					"numinlets" : 1,
 					"numoutlets" : 4,
@@ -822,7 +836,7 @@
 					"parameter_enable" : 0,
 					"patching_rect" : [ 510.0, 1479.0, 159.5, 52.0 ],
 					"presentation" : 1,
-					"presentation_rect" : [ 16.5, 172.0, 161.0, 52.0 ],
+					"presentation_rect" : [ 460.0, 64.0, 161.0, 52.0 ],
 					"range" : [ 0.0, 100.0 ],
 					"varname" : "userFunction3"
 				}
@@ -984,7 +998,7 @@
 
 							}
  ],
-						"originid" : "pat-3861"
+						"originid" : "pat-184"
 					}
 ,
 					"patching_rect" : [ 296.0, 1441.0, 95.0, 22.0 ],
@@ -1031,9 +1045,11 @@
 , 			{
 				"box" : 				{
 					"addpoints" : [ 0.0, 0.0, 0, 108.474576271186436, 100.0, 0, 108.474576271186436, 100.0, 0, 1000.0, 0.0, 0 ],
+					"bgcolor" : [ 0.968627450980392, 0.968627450980392, 0.968627450980392, 1.0 ],
 					"classic_curve" : 1,
 					"hidden" : 1,
 					"id" : "obj-143",
+					"linecolor" : [ 0.254901960784314, 0.411764705882353, 0.882352941176471, 1.0 ],
 					"maxclass" : "function",
 					"numinlets" : 1,
 					"numoutlets" : 4,
@@ -1042,7 +1058,7 @@
 					"parameter_enable" : 0,
 					"patching_rect" : [ 296.0, 1479.0, 159.5, 52.0 ],
 					"presentation" : 1,
-					"presentation_rect" : [ 193.0, 60.0, 159.5, 52.0 ],
+					"presentation_rect" : [ 246.0, 64.0, 159.5, 52.0 ],
 					"range" : [ 0.0, 100.0 ],
 					"varname" : "userFunction2"
 				}
@@ -1216,7 +1232,7 @@
 
 							}
  ],
-						"originid" : "pat-3863"
+						"originid" : "pat-186"
 					}
 ,
 					"patching_rect" : [ 82.0, 1441.0, 95.0, 22.0 ],
@@ -1238,6 +1254,7 @@
 			}
 , 			{
 				"box" : 				{
+					"bgcolor" : [ 0.968627450980392, 0.968627450980392, 0.968627450980392, 1.0 ],
 					"candicane2" : [ 0.145098, 0.203922, 0.356863, 1.0 ],
 					"candicane3" : [ 0.290196, 0.411765, 0.713726, 1.0 ],
 					"candicane4" : [ 0.439216, 0.619608, 0.070588, 1.0 ],
@@ -1255,10 +1272,11 @@
 					"patching_rect" : [ 320.0, 1282.0, 162.0, 52.0 ],
 					"peakcolor" : [ 0.498039, 0.498039, 0.498039, 1.0 ],
 					"presentation" : 1,
-					"presentation_rect" : [ 192.0, 172.0, 162.0, 52.0 ],
+					"presentation_rect" : [ 672.0, 64.0, 162.0, 52.0 ],
 					"setminmax" : [ 0.0, 127.0 ],
 					"settype" : 0,
 					"size" : 50,
+					"slidercolor" : [ 0.254901960784314, 0.411764705882353, 0.882352941176471, 1.0 ],
 					"varname" : "userWave4"
 				}
 
@@ -1277,6 +1295,7 @@
 			}
 , 			{
 				"box" : 				{
+					"bgcolor" : [ 0.968627450980392, 0.968627450980392, 0.968627450980392, 1.0 ],
 					"candicane2" : [ 0.145098, 0.203922, 0.356863, 1.0 ],
 					"candicane3" : [ 0.290196, 0.411765, 0.713726, 1.0 ],
 					"candicane4" : [ 0.439216, 0.619608, 0.070588, 1.0 ],
@@ -1295,10 +1314,11 @@
 					"patching_rect" : [ 320.0, 1185.0, 162.0, 52.0 ],
 					"peakcolor" : [ 0.498039, 0.498039, 0.498039, 1.0 ],
 					"presentation" : 1,
-					"presentation_rect" : [ 16.0, 172.0, 162.0, 52.0 ],
+					"presentation_rect" : [ 460.0, 64.0, 162.0, 52.0 ],
 					"setminmax" : [ 0.0, 127.0 ],
 					"settype" : 0,
 					"size" : 50,
+					"slidercolor" : [ 0.254901960784314, 0.411764705882353, 0.882352941176471, 1.0 ],
 					"varname" : "userWave3"
 				}
 
@@ -1363,6 +1383,15 @@
 			}
 , 			{
 				"box" : 				{
+					"bgfillcolor_angle" : 270.0,
+					"bgfillcolor_autogradient" : 0.0,
+					"bgfillcolor_color" : [ 0.847058823529412, 0.847058823529412, 0.847058823529412, 1.0 ],
+					"bgfillcolor_color1" : [ 1.0, 1.0, 1.0, 1.0 ],
+					"bgfillcolor_color2" : [ 0.847058823529412, 0.847058823529412, 0.847058823529412, 1.0 ],
+					"bgfillcolor_proportion" : 0.5,
+					"bgfillcolor_type" : "gradient",
+					"color" : [ 0.254901960784314, 0.411764705882353, 0.882352941176471, 1.0 ],
+					"elementcolor" : [ 1.0, 1.0, 1.0, 1.0 ],
 					"id" : "obj-96",
 					"items" : [ "free", "draw", "wave", ",", "function", "wave" ],
 					"maxclass" : "umenu",
@@ -1372,7 +1401,8 @@
 					"parameter_enable" : 0,
 					"patching_rect" : [ 844.0, 1185.0, 106.0, 22.0 ],
 					"presentation" : 1,
-					"presentation_rect" : [ 192.0, 148.0, 106.0, 22.0 ],
+					"presentation_rect" : [ 673.0, 40.0, 106.0, 22.0 ],
+					"textcolor" : [ 0.254901960784314, 0.411764705882353, 0.882352941176471, 1.0 ],
 					"varname" : "umenu[3]"
 				}
 
@@ -1391,6 +1421,15 @@
 			}
 , 			{
 				"box" : 				{
+					"bgfillcolor_angle" : 270.0,
+					"bgfillcolor_autogradient" : 0.0,
+					"bgfillcolor_color" : [ 0.847058823529412, 0.847058823529412, 0.847058823529412, 1.0 ],
+					"bgfillcolor_color1" : [ 1.0, 1.0, 1.0, 1.0 ],
+					"bgfillcolor_color2" : [ 0.847058823529412, 0.847058823529412, 0.847058823529412, 1.0 ],
+					"bgfillcolor_proportion" : 0.5,
+					"bgfillcolor_type" : "gradient",
+					"color" : [ 0.254901960784314, 0.411764705882353, 0.882352941176471, 1.0 ],
+					"elementcolor" : [ 1.0, 1.0, 1.0, 1.0 ],
 					"id" : "obj-91",
 					"items" : [ "free", "draw", "wave", ",", "function", "wave" ],
 					"maxclass" : "umenu",
@@ -1400,7 +1439,8 @@
 					"parameter_enable" : 0,
 					"patching_rect" : [ 735.0, 1185.0, 106.0, 22.0 ],
 					"presentation" : 1,
-					"presentation_rect" : [ 16.0, 148.0, 106.0, 22.0 ],
+					"presentation_rect" : [ 459.666666666666629, 40.0, 106.0, 22.0 ],
+					"textcolor" : [ 0.254901960784314, 0.411764705882353, 0.882352941176471, 1.0 ],
 					"varname" : "umenu[2]"
 				}
 
@@ -1419,6 +1459,15 @@
 			}
 , 			{
 				"box" : 				{
+					"bgfillcolor_angle" : 270.0,
+					"bgfillcolor_autogradient" : 0.0,
+					"bgfillcolor_color" : [ 0.847058823529412, 0.847058823529412, 0.847058823529412, 1.0 ],
+					"bgfillcolor_color1" : [ 1.0, 1.0, 1.0, 1.0 ],
+					"bgfillcolor_color2" : [ 0.847058823529412, 0.847058823529412, 0.847058823529412, 1.0 ],
+					"bgfillcolor_proportion" : 0.5,
+					"bgfillcolor_type" : "gradient",
+					"color" : [ 0.254901960784314, 0.411764705882353, 0.882352941176471, 1.0 ],
+					"elementcolor" : [ 1.0, 1.0, 1.0, 1.0 ],
 					"id" : "obj-88",
 					"items" : [ "free", "draw", "wave", ",", "function", "wave" ],
 					"maxclass" : "umenu",
@@ -1428,7 +1477,8 @@
 					"parameter_enable" : 0,
 					"patching_rect" : [ 626.0, 1185.0, 106.0, 22.0 ],
 					"presentation" : 1,
-					"presentation_rect" : [ 192.0, 36.0, 106.0, 22.0 ],
+					"presentation_rect" : [ 246.333333333333314, 40.0, 106.0, 22.0 ],
+					"textcolor" : [ 0.254901960784314, 0.411764705882353, 0.882352941176471, 1.0 ],
 					"varname" : "umenu[1]"
 				}
 
@@ -1730,7 +1780,7 @@
 
 							}
  ],
-						"originid" : "pat-3865"
+						"originid" : "pat-188"
 					}
 ,
 					"patching_rect" : [ 517.0, 1267.0, 129.0, 22.0 ],
@@ -1753,6 +1803,15 @@
 			}
 , 			{
 				"box" : 				{
+					"bgfillcolor_angle" : 270.0,
+					"bgfillcolor_autogradient" : 0.0,
+					"bgfillcolor_color" : [ 0.847058823529412, 0.847058823529412, 0.847058823529412, 1.0 ],
+					"bgfillcolor_color1" : [ 1.0, 1.0, 1.0, 1.0 ],
+					"bgfillcolor_color2" : [ 0.847058823529412, 0.847058823529412, 0.847058823529412, 1.0 ],
+					"bgfillcolor_proportion" : 0.5,
+					"bgfillcolor_type" : "gradient",
+					"color" : [ 0.254901960784314, 0.411764705882353, 0.882352941176471, 1.0 ],
+					"elementcolor" : [ 1.0, 1.0, 1.0, 1.0 ],
 					"id" : "obj-3",
 					"items" : [ "free", "draw", "wave", ",", "function", "wave" ],
 					"maxclass" : "umenu",
@@ -1762,7 +1821,8 @@
 					"parameter_enable" : 0,
 					"patching_rect" : [ 517.0, 1185.0, 106.0, 22.0 ],
 					"presentation" : 1,
-					"presentation_rect" : [ 16.0, 36.0, 106.0, 22.0 ],
+					"presentation_rect" : [ 33.0, 40.0, 106.0, 22.0 ],
+					"textcolor" : [ 0.254901960784314, 0.411764705882353, 0.882352941176471, 1.0 ],
 					"varname" : "umenu"
 				}
 
@@ -1817,8 +1877,10 @@
 , 			{
 				"box" : 				{
 					"addpoints" : [ 0.0, 0.0, 0, 549.512830503443411, 0.0, 0, 549.512830503443411, 100.0, 0, 859.042553191489333, 0.0, 0, 916.534107099188191, 100.0, 0, 1000.0, 62.666666666666664, 0 ],
+					"bgcolor" : [ 0.968627450980392, 0.968627450980392, 0.968627450980392, 1.0 ],
 					"classic_curve" : 1,
 					"id" : "obj-7",
+					"linecolor" : [ 0.254901960784314, 0.411764705882353, 0.882352941176471, 1.0 ],
 					"maxclass" : "function",
 					"numinlets" : 1,
 					"numoutlets" : 4,
@@ -1827,7 +1889,7 @@
 					"parameter_enable" : 0,
 					"patching_rect" : [ 82.0, 1479.0, 159.5, 52.0 ],
 					"presentation" : 1,
-					"presentation_rect" : [ 17.0, 60.0, 159.5, 52.0 ],
+					"presentation_rect" : [ 33.0, 64.0, 159.5, 52.0 ],
 					"range" : [ 0.0, 100.0 ],
 					"varname" : "userFunction1"
 				}
@@ -1886,6 +1948,7 @@
 			}
 , 			{
 				"box" : 				{
+					"bgcolor" : [ 0.968627450980392, 0.968627450980392, 0.968627450980392, 1.0 ],
 					"candicane2" : [ 0.145098, 0.203922, 0.356863, 1.0 ],
 					"candicane3" : [ 0.290196, 0.411765, 0.713726, 1.0 ],
 					"candicane4" : [ 0.439216, 0.619608, 0.070588, 1.0 ],
@@ -1903,10 +1966,11 @@
 					"patching_rect" : [ 144.0, 1282.0, 162.0, 52.0 ],
 					"peakcolor" : [ 0.498039, 0.498039, 0.498039, 1.0 ],
 					"presentation" : 1,
-					"presentation_rect" : [ 192.0, 60.0, 162.0, 52.0 ],
+					"presentation_rect" : [ 246.0, 64.0, 162.0, 52.0 ],
 					"setminmax" : [ 0.0, 127.0 ],
 					"settype" : 0,
 					"size" : 50,
+					"slidercolor" : [ 0.254901960784314, 0.411764705882353, 0.882352941176471, 1.0 ],
 					"varname" : "userWave2"
 				}
 
@@ -2050,7 +2114,7 @@
 
 							}
  ],
-						"originid" : "pat-3867"
+						"originid" : "pat-190"
 					}
 ,
 					"patching_rect" : [ 619.0, 89.0, 66.0, 22.0 ],
@@ -2069,18 +2133,6 @@
 					"patching_rect" : [ 144.0, 1123.0, 24.0, 24.0 ]
 				}
 
-			}
-, 			{
-				"box" : 				{
-					"id" : "obj-13",
-					"maxclass" : "message",
-					"numinlets" : 2,
-					"numoutlets" : 1,
-					"outlettype" : [ "" ],
-					"patching_rect" : [ 469.0, 170.0, 56.0, 22.0 ],
-					"text" : "dumpNN"
-				}
-
 			}
 , 			{
 				"box" : 				{
@@ -2108,6 +2160,7 @@
 			}
 , 			{
 				"box" : 				{
+					"bgcolor" : [ 0.968627450980392, 0.968627450980392, 0.968627450980392, 1.0 ],
 					"candicane2" : [ 0.145098, 0.203922, 0.356863, 1.0 ],
 					"candicane3" : [ 0.290196, 0.411765, 0.713726, 1.0 ],
 					"candicane4" : [ 0.439216, 0.619608, 0.070588, 1.0 ],
@@ -2126,10 +2179,11 @@
 					"patching_rect" : [ 144.0, 1185.0, 162.0, 52.0 ],
 					"peakcolor" : [ 0.498039, 0.498039, 0.498039, 1.0 ],
 					"presentation" : 1,
-					"presentation_rect" : [ 16.0, 60.0, 162.0, 52.0 ],
+					"presentation_rect" : [ 33.0, 64.0, 162.0, 52.0 ],
 					"setminmax" : [ 0.0, 127.0 ],
 					"settype" : 0,
 					"size" : 50,
+					"slidercolor" : [ 0.254901960784314, 0.411764705882353, 0.882352941176471, 1.0 ],
 					"varname" : "userWave1"
 				}
 
@@ -2316,11 +2370,30 @@
 					"outlettype" : [ "" ],
 					"patching_rect" : [ 397.0, 210.0, 838.631580829620361, 368.0 ],
 					"presentation" : 1,
-					"presentation_rect" : [ 16.0, 247.0, 838.631580829620361, 368.0 ],
+					"presentation_rect" : [ 16.0, 139.0, 839.0, 474.0 ],
 					"rendermode" : 0,
 					"url" : "file://lfogui.html"
 				}
 
+			}
+, 			{
+				"box" : 				{
+					"angle" : 270.0,
+					"background" : 1,
+					"bgcolor" : [ 1.0, 1.0, 1.0, 1.0 ],
+					"border" : 1,
+					"bordercolor" : [ 0.254901960784314, 0.411764705882353, 0.882352941176471, 1.0 ],
+					"id" : "obj-9",
+					"maxclass" : "panel",
+					"mode" : 0,
+					"numinlets" : 1,
+					"numoutlets" : 0,
+					"patching_rect" : [ 541.5, 393.5, 128.0, 128.0 ],
+					"presentation" : 1,
+					"presentation_rect" : [ 16.0, 8.0, 839.0, 130.0 ],
+					"proportion" : 0.5
+				}
+
 			}
  ],
 		"lines" : [ 			{
@@ -2455,13 +2528,6 @@
 					"source" : [ "obj-126", 0 ]
 				}
 
-			}
-, 			{
-				"patchline" : 				{
-					"destination" : [ "obj-2", 0 ],
-					"source" : [ "obj-13", 0 ]
-				}
-
 			}
 , 			{
 				"patchline" : 				{
@@ -2855,6 +2921,13 @@
 					"source" : [ "obj-46", 1 ]
 				}
 
+			}
+, 			{
+				"patchline" : 				{
+					"destination" : [ "obj-2", 0 ],
+					"source" : [ "obj-46", 2 ]
+				}
+
 			}
 , 			{
 				"patchline" : 				{
@@ -3249,7 +3322,7 @@
 
 			}
  ],
-		"originid" : "pat-3855",
+		"originid" : "pat-178",
 		"parameters" : 		{
 			"obj-25" : [ "dict", "dict", 0 ],
 			"parameterbanks" : 			{
@@ -3265,7 +3338,8 @@
 		}
 ,
 		"dependency_cache" : [  ],
-		"autosave" : 0
+		"autosave" : 0,
+		"bgcolor" : [ 1.0, 1.0, 1.0, 1.0 ]
 	}
 
 }

lfogui.css

@@ -27,8 +27,7 @@ body {
     height: 100%;
     margin: 0px;
     border: 0;
-    overflow-x: hidden;
+    overflow-x: scroll;
-    /* no horizontal scrollbar*/
     overflow-y: scroll;
     display: block;
     /* No floating content on sides */
@@ -77,12 +76,17 @@ td button {
 
 /* table */
 table {
-    overflow: scroll;
     margin: 1em;
+    padding: 0em;
     border-collapse: collapse;
     background-color: lightsteelblue;
 }
 
+/* points datacells should have a min-width*/
+.enum-count {
+    min-width: 5.6em;
+}
+
 th {
     padding: 0.4em 0.3em;
     text-align: left;
@@ -90,18 +94,26 @@ th {
 
 thead {
     color: white;
-    background-color: royalblue;
+    background-color: var(--active);
 }
 
-tr, td {
+tr,
+td {
     margin: 0em;
 }
 
+td:last-child {
+    white-space: nowrap;
+    overflow: hidden;
+    padding: 0;
+}
+
 /* input types */
 /* dropdown list */
 select {
     width: 100%;
 }
+
 /*
 option, select>* {
     font-size: 0.8em !important;
@@ -113,12 +125,14 @@ option, select>* {
 option {
     background-color: var(--active);
 }
+
 option:not(:checked) {
     background-color: white;
 }
 
 /* input */
-input, select {
+input,
+select {
     border: 1px solid var(--active);
     color: var(--active);
     margin: 0;
@@ -128,6 +142,11 @@ input, select {
     box-sizing: border-box;
 }
 
+input {
+    padding-left: 5px;
+    /*slight padding on left*/
+}
+
 input[type=number] {
     width: 50px;
 }
@@ -249,6 +268,8 @@ h5 {
     font-size: small;
     margin-left: 2px;
     margin-top: 5px;
+    display: none;
+    /*hide*/
 }
 
 

lfogui.js

@@ -30,7 +30,7 @@ const LockModes = Object.freeze({
 var modPhases = Array(MAXLFOS).fill(0);
 var firstUpdateTime = Date.now();
 
-const MODULATORLABELS = ["inst", "type", "shape", "param", "timebase", "min", "max", "phase", "center"];
+const MODULATORLABELS = ["inst", "type", "shape", "param", "timebase", "min", "max", "phase", "center", "result", "", ""];
 const ENUMERATORLABELS = ["inst", "parameter", "# points"];
 
 
@@ -282,6 +282,11 @@ function MasterLfoHandler() {
             setTicks(event.detail);
         }
 
+        function handleChangeViewMode(event){
+            setEnabled(true);
+            setViewMode(event.detail);
+        }
+
         function setNN(event) {
 
             for (let i = 0; i < MAXLFOS; i++) {
@@ -352,6 +357,7 @@ function MasterLfoHandler() {
         window.addEventListener('userFunction', handleChangeUserFunction);
         window.addEventListener('userDefinedType', handleChangeUserDefinedType);
         window.addEventListener('maxTicks', handleMaxTicks);
+        window.addEventListener('viewMode', handleChangeViewMode);
 
         return () => {
             window.removeEventListener('loadDict', handleLoad);
@@ -366,6 +372,7 @@ function MasterLfoHandler() {
             window.removeEventListener('userFunction', handleChangeUserFunction);
             window.removeEventListener('userDefinedType', handleChangeUserDefinedType);
             window.removeEventListener('maxTicks', handleMaxTicks);
+            window.removeEventListener('viewMode', handleChangeViewMode);
         };
     }, [...allModArrays, ...allEnumArrays, ...allEnumMats, userDefinedWaves, userDefinedFunctions, userDefinedTypes, modCenterVals, render, beatsInMeasure, ticks]);
 
@@ -628,6 +635,10 @@ if (!DEBUG) {
         window.dispatchEvent(new CustomEvent('userWave', { 'detail': data }));
     });
 
+    window.max.bindInlet("viewMode", (mode) => {
+        window.dispatchEvent(new CustomEvent('viewMode', { 'detail': parseInt(mode) }));
+    });
+
     window.max.bindInlet("userFunction", (index, ...points) => {
         //list of 101 points between 0-100
         let data = { points, index };