diff --git a/.gitignore b/.gitignore
index aee88fd..2df21cc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,7 @@ lib-cov
 *.pid
 *.gz
 
+js
 pids
 logs
 results
diff --git a/dmx-web.js b/dmx-web.js
index 13dcdc6..b6b3366 100755
--- a/dmx-web.js
+++ b/dmx-web.js
@@ -52,6 +52,28 @@ function DMXWeb() {
     res.sendFile(__dirname + '/index.html');
   });
 
+	
+  app.get('/index.html', (req, res) => {
+    res.sendFile(__dirname + '/index.html');
+  });
+
+ app.get('/js/jquery-ui.min.js', (req, res) => {
+    res.sendFile(__dirname + '/js/jquery-ui.min.js');
+  });
+
+ app.get('/js/bootstrap.min.js', (req, res) => {
+    res.sendFile(__dirname + '/js/bootstrap.min.js');
+  });
+
+ app.get('/js/jquery.min.js', (req, res) => {
+    res.sendFile(__dirname + '/js/jquery.min.js');
+  });
+
+ app.get('/js/bootstrap-combined.min.css', (req, res) => {
+    res.sendFile(__dirname + '/js/bootstrap-combined.min.css');
+  });
+
+
   app.get('/config', (req, res) => {
     const response = {'devices': dmx.devices, 'universes': {}};
 
diff --git a/index.html b/index.html
index 0e1cfc2..184bda1 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
 	<title>DMX Lichtschalter</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta name="apple-mobile-web-app-capable" content="yes" />
-	<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
+	<link href="/js/bootstrap-combined.min.css" rel="stylesheet">
 	<style>
 	body {
 		background: #222;
@@ -14,6 +14,10 @@
 	h1 {
 		clear: both;
 	}
+	h1 span {
+		font-size: small;
+		color: lightgrey;
+	}
 	input[type=range] {
 		-webkit-appearance: slider-vertical;
 		height: 100px;
@@ -42,14 +46,17 @@
 		text-align: center;
 		float: left;
 	}
-	
+	.ranges {
+		float: left;
+		max-width: 200px;
+	}
 	.btn {
 		margin-bottom: 1em;
 	}
 	</style>
-	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
-	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
-	<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
+	<script src="/js/jquery.min.js"></script>
+	<script src="/js/jquery-ui.min.js"></script>
+	<script src="/js/bootstrap.min.js"></script>
 	<script src="/socket.io/socket.io.js"></script>
 	<script>
 		function get_html_id(universe, channel) {
@@ -121,15 +128,68 @@
 				}
 			});
 			
-			
 			/* sliders */
 			for(var universe in setup.universes) {
-				var html = "<div><h1>" + universe + "</h1>";
+				var html = "<div><h1>" + universe + " &nbsp; <span>(<a target=\"new\" href=\"/state/"+universe+"\">get state for preset</a>)</span></h1>";
+
+				/* global device type control */
+				var types = {}
+				for(var device in setup.universes[universe].devices) {
+					var dev = setup.universes[universe].devices[device];
+					types[dev.type] = (types[dev.type] || []).concat([dev.address])
+				}
+				html += '<h4 class="name">Same Device Type Control</h4>';
+				for (var type in types) {
+					html += '<div class="device">';
+					html += '<h5 class="name">'+type+'</h5>';
+
+					for(var channel in devices[type].channels) {
+						var channel_id = ''
+						for (var type_channel in types[type]) channel_id += (Number(types[type][type_channel]) + Number(channel)) + ','
+						var html_id = get_html_id(universe, channel_id);
+						html += '<div class="channel">'
+						html += '<label for="' + html_id + '">' + devices[type].channels[channel] + '</label>';
+						html += '<input  id="' + html_id + '" type="range" min="0" value="0" max="255" orient="vertical">'
+						html += '</div>'
+					}
+
+					html += '<div class="ranges">'
+					// /* rgb */
+					if(devices[type].channels.includes('red') && devices[type].channels.includes('blue') && devices[type].channels.includes('green')) {
+						var html_id = get_html_id(universe, types[type].join(','));
+						html += '<input id="picker_'+html_id+'" type="color" data-red="'+devices[type].channels.indexOf('red');
+						html += '" data-green="'+devices[type].channels.indexOf('green')+'" data-blue="'+devices[type].channels.indexOf('blue')+'"/>';
+					}
+
+					/* ranges with options */
+					if (devices[type].ranges) {
+						for(var r in devices[type].ranges) {
+							const range = devices[type].ranges[r]
+							if (range.type !== 'option') continue
+							
+							var html_id = get_html_id(universe, types[type].join(','));
+							html += '<select id="'+r+'_'+html_id+'">'
+            				html += '<option values="">'+r+' values</option>'
+							for(var k in range.options) {
+								html += '<option value="' + range.options[k].value + '">'+ range.options[k].label +'</option>'
+							}
+							html += '</select>'
+						}
+					}
+					html += '</div>'
+
+					html += '</div>';
+				}
+				html += '</div>'
+
+				/* individual device control */
+				html += '<br style="clear: both;"/><br />'
+				html += '<h4 class="name">Individual Device Control</h4>';
 				for(var device in setup.universes[universe].devices) {
 					var dev = setup.universes[universe].devices[device];
 					html += '<div class="device">';
 					if(dev.name !== undefined) {
-						html += '<h4 class="name">'+dev.name+'</h4>'
+						html += '<h5 class="name">'+dev.name+'</h5>'
 					}
 					for(var channel in devices[dev.type].channels) {
 						var channel_id = dev.address + Number(channel)
@@ -139,13 +199,35 @@
 						html += '<input  id="' + html_id + '" type="range" min="0" value="0" max="255" orient="vertical">'
 						html += '</div>'
 					}
+
+					html += '<div class="ranges">'
+
+					/* rgb */
 					if(devices[dev.type].channels.includes('red') && devices[dev.type].channels.includes('blue') && devices[dev.type].channels.includes('green')) {
 						var html_id = get_html_id(universe, dev.address);
 						html += '<input id="picker_'+html_id+'" type="color" data-red="'+devices[dev.type].channels.indexOf('red');
 						html += '" data-green="'+devices[dev.type].channels.indexOf('green')+'" data-blue="'+devices[dev.type].channels.indexOf('blue')+'"/>';
 					}
+
+					/* ranges with options */
+					if (devices[dev.type].ranges) {
+						for(var r in devices[dev.type].ranges) {
+							const range = devices[dev.type].ranges[r]
+							if (range.type !== 'option') continue
+							
+							var html_id = get_html_id(universe, types[type].join(','));
+							html += '<select id="'+r+'_'+html_id+'">'
+            				html += '<option values="">'+r+' values</option>'
+							for(var k in range.options) {
+								html += '<option value="' + range.options[k].value + '">'+ range.options[k].label +'</option>'
+							}
+							html += '</select>'
+						}
+					}
 					html += '</div>'
 				}
+				html += '</div>'
+	
 				html += "</div>";
 				$(html).hide().appendTo('#sliders').fadeIn();
 			}
@@ -175,17 +257,48 @@
 					var u = {};
 					var tar = $(e.target);
 					var value = rgb_to_array(tar.val());
-					u[Number(i[3])+Number(tar.data('red'))] = value[0];
-					u[Number(i[3])+Number(tar.data('green'))] = value[1];
-					u[Number(i[3])+Number(tar.data('blue'))] = value[2];
+					
+					i[3] = i[3].split(',')
+					for (var port in i[3]) {
+						u[Number(port)+Number(tar.data('red'))] = value[0];
+						u[Number(port)+Number(tar.data('green'))] = value[1];
+						u[Number(port)+Number(tar.data('blue'))] = value[2];
+					}
+					
+					console.log(i[2], u)
 					socket.emit('update', i[2], u);
-				}
-				else {
+				} else {
 					var u = {};
-					u[i[2]] = e.target.value;
+					console.log(i)
+
+					i[2] = i[2].split(',')
+					for (var port in i[2]) {
+						u[i[2][Number(port)]] = Number(e.target.value)
+					}
+					
+					console.log(i[1], u)
 					socket.emit('update', i[1], u);
 				}
 			});
+			$("select").live("change", function(e) {
+				var i = e.target.id.split('_');
+				var u = {};
+
+				i[3] = i[3].split(',')
+				for (var port in i[3]) {
+					if (i[0] === 'ctrl') {
+						u[i[3][Number(port)]] = Number(e.target.value)
+					} else {
+						console.log(i[3][port])
+						u[i[3][port]] = 11;
+						u[i[3][port]+1] = Number(e.target.value); // todo find number of option	
+					} 
+				}
+
+				console.log("update", i[2], u)
+				socket.emit('update', i[2], u);
+			})
+			
 			socket.emit('request_refresh');
 		});
 		socket.on('update', function (universe, update) {
@@ -221,6 +334,7 @@
 			});
 			
 		});
+		console.log(socket)
 	</script>
 </head>
 <body>
@@ -250,6 +364,7 @@
 <div id="scripts"    class="tab-pane">
 	
 </div>
+
 </div>
 </div>
 </body>