Added ColorUrl and alternative item edit mode

Additional to on/off/dim items i added color items. The colorUrl gets executed if a PUT is received with xy/ct/hue/sat in the body. Also changed the emulated bulb type to "Extended color light".
Added "Change Editmode" button in the editdevice screen. Switch between manual JSON edit and the tabular variant. Local unsaved changes in one mode carry over to the other. Through this edit variant it's possible to change the order of items and do copy/paste.

src/main/java/com/bwssystems/HABridge/api/hue/DeviceResponse.java

@@ -14,6 +14,8 @@ public class DeviceResponse {
     private String luminaireuniqueid;
     private String uniqueid;
     private String swversion;
+    private String swconfigid;
+    private String productid;
 
     public DeviceState getState() {
         return state;
@@ -71,6 +73,23 @@ public class DeviceResponse {
         this.swversion = swversion;
     }
 
+    public String getSwconfigid() {
+        return swconfigid;
+    }
+
+    public void setSwconfigid(String swconfigid) {
+        this.swconfigid = swconfigid;
+    }
+    
+    public String getProductid() {
+        return productid;
+    }
+
+	public void setProductid(String productid) {
+        this.productid = productid;
+    }
+
+
     public String getLuminaireuniqueid() {
 		return luminaireuniqueid;
 	}
@@ -86,9 +105,11 @@ public class DeviceResponse {
         response.setName(device.getName());
         response.setUniqueid(device.getUniqueid());
         response.setManufacturername("Philips");
-        response.setType("Dimmable light");
+        response.setType("Extended color light");
-        response.setModelid("LWB004");
+        response.setModelid("LCT010");
-        response.setSwversion("66012040");
+        response.setSwversion("1.15.2_r19181");
+		response.setSwconfigid("F921C859");
+		response.setProductid("Philips-LCT010-1-A19ECLv4");
         response.setLuminaireuniqueid(null);
 
         return response;

src/main/java/com/bwssystems/HABridge/api/hue/DeviceState.java

@@ -1,6 +1,6 @@
 package com.bwssystems.HABridge.api.hue;
 
-// import java.util.ArrayList;
+import java.util.ArrayList;
 import java.util.List;
 
 /**
@@ -12,11 +12,12 @@ public class DeviceState {
     private int hue;
     private int sat;
     private String effect;
+    private List<Double> xy;
     private int ct;
     private String alert;
     private String colormode;
     private boolean reachable;
-    private List<Double> xy;
+    
 //    private int transitiontime;
 
     public boolean isOn() {
@@ -41,6 +42,7 @@ public class DeviceState {
 
     public void setHue(int hue) {
         this.hue = hue;
+        this.colormode = "hs";
     }
 
     public int getSat() {
@@ -49,6 +51,7 @@ public class DeviceState {
 
     public void setSat(int sat) {
         this.sat = sat;
+        this.colormode = "hs";
     }
 
     public String getEffect() {
@@ -65,6 +68,7 @@ public class DeviceState {
 
     public void setCt(int ct) {
         this.ct = ct;
+        this.colormode = "ct";
     }
 
     public String getAlert() {
@@ -97,6 +101,7 @@ public class DeviceState {
 
     public void setXy(List<Double> xy) {
         this.xy = xy;
+        this.colormode = "xy";
     }
 //    public int getTransitiontime() {
 //		return transitiontime;
@@ -109,11 +114,12 @@ public class DeviceState {
 	public static DeviceState createDeviceState() {
     	DeviceState newDeviceState = new DeviceState();
     	newDeviceState.fillIn();
-//    	newDeviceState.setColormode("none");
+    	newDeviceState.setColormode("ct");
-//    	ArrayList<Double> doubleArray = new ArrayList<Double>();
+    	newDeviceState.setCt(200);
-//    	doubleArray.add(new Double(0));
+    	ArrayList<Double> doubleArray = new ArrayList<Double>();
-//    	doubleArray.add(new Double(0));
+    	doubleArray.add(new Double(0));
-//    	newDeviceState.setXy(doubleArray);
+    	doubleArray.add(new Double(0));
+    	newDeviceState.setXy(doubleArray);
     	
     	return newDeviceState;
     }

src/main/java/com/bwssystems/HABridge/dao/DeviceDescriptor.java

@@ -38,6 +38,9 @@ public class DeviceDescriptor{
     @SerializedName("onUrl")
     @Expose
     private String onUrl;
+    @SerializedName("colorUrl")
+    @Expose
+    private String colorUrl;
     @SerializedName("headers")
     @Expose
     private String headers;
@@ -142,6 +145,14 @@ public class DeviceDescriptor{
         this.onUrl = onUrl;
     }
 
+    public String getColorUrl() {
+        return colorUrl;
+    }
+
+    public void setColorUrl(String colorUrl) {
+        this.colorUrl = colorUrl;
+    }
+
     public String getId() {
         return id;
     }
@@ -282,6 +293,9 @@ public class DeviceDescriptor{
 		
 		if(this.offUrl != null && this.offUrl.contains(aType))
 			return true;
+
+		if(this.colorUrl != null && this.colorUrl.contains(aType))
+			return true;
 		
 		return false;
 	}

src/main/java/com/bwssystems/HABridge/hue/HueMulator.java

@@ -467,16 +467,6 @@ public class HueMulator {
 			notFirstChange = true;
 		}
 
-		if (body.contains("\"ct\"")) {
-			if (notFirstChange)
-				responseString = responseString + ",";
-			responseString = responseString + "{\"success\":{\"/lights/" + lightId + "/state/ct\":" + stateChanges.getCt()
-					+ "}}";
-			if (deviceState != null)
-				deviceState.setCt(stateChanges.getCt());
-			notFirstChange = true;
-		}
-
 		if (body.contains("\"xy\"")) {
 			if (notFirstChange)
 				responseString = responseString + ",";
@@ -485,36 +475,34 @@ public class HueMulator {
 			if (deviceState != null)
 				deviceState.setXy(stateChanges.getXy());
 			notFirstChange = true;
-		}
+		} else if (body.contains("\"ct\"")) {
-
-		if (body.contains("\"hue\"")) {
 			if (notFirstChange)
 				responseString = responseString + ",";
-			responseString = responseString + "{\"success\":{\"/lights/" + lightId + "/state/hue\":" + stateChanges.getHue()
+			responseString = responseString + "{\"success\":{\"/lights/" + lightId + "/state/ct\":" + stateChanges.getCt()
 					+ "}}";
 			if (deviceState != null)
-				deviceState.setHue(stateChanges.getHue());
+				deviceState.setCt(stateChanges.getCt());
 			notFirstChange = true;
-		}
+		} else {
+			if (body.contains("\"hue\"")) {
+				if (notFirstChange)
+					responseString = responseString + ",";
+				responseString = responseString + "{\"success\":{\"/lights/" + lightId + "/state/hue\":" + stateChanges.getHue()
+						+ "}}";
+				if (deviceState != null)
+					deviceState.setHue(stateChanges.getHue());
+				notFirstChange = true;
+			}
 
-		if (body.contains("\"sat\"")) {
+			if (body.contains("\"sat\"")) {
-			if (notFirstChange)
+				if (notFirstChange)
-				responseString = responseString + ",";
+					responseString = responseString + ",";
-			responseString = responseString + "{\"success\":{\"/lights/" + lightId + "/state/sat\":" + stateChanges.getSat()
+				responseString = responseString + "{\"success\":{\"/lights/" + lightId + "/state/sat\":" + stateChanges.getSat()
-					+ "}}";
+						+ "}}";
-			if (deviceState != null)
+				if (deviceState != null)
-				deviceState.setSat(stateChanges.getSat());
+					deviceState.setSat(stateChanges.getSat());
-			notFirstChange = true;
+				notFirstChange = true;
-		}
+			}	
-
-		if (body.contains("\"ct_inc\"")) {
-			if (notFirstChange)
-				responseString = responseString + ",";
-			responseString = responseString + "{\"success\":{\"/lights/" + lightId + "/state/ct_inc\":"
-					+ stateChanges.getCt_inc() + "}}";
-			if (deviceState != null)
-				deviceState.setCt(deviceState.getCt() + stateChanges.getCt_inc());
-			notFirstChange = true;
 		}
 
 		if (body.contains("\"xy_inc\"")) {
@@ -525,26 +513,34 @@ public class HueMulator {
 			if (deviceState != null)
 				deviceState.setXy(stateChanges.getXy());
 			notFirstChange = true;
-		}
+		} else if (body.contains("\"ct_inc\"")) {
-
-		if (body.contains("\"hue_inc\"")) {
 			if (notFirstChange)
 				responseString = responseString + ",";
-			responseString = responseString + "{\"success\":{\"/lights/" + lightId + "/state/hue_inc\":"
+			responseString = responseString + "{\"success\":{\"/lights/" + lightId + "/state/ct_inc\":"
-					+ stateChanges.getHue_inc() + "}}";
+					+ stateChanges.getCt_inc() + "}}";
 			if (deviceState != null)
-				deviceState.setHue(deviceState.getHue() + stateChanges.getHue_inc());
+				deviceState.setCt(deviceState.getCt() + stateChanges.getCt_inc());
 			notFirstChange = true;
-		}
+		} else {
+			if (body.contains("\"hue_inc\"")) {
+				if (notFirstChange)
+					responseString = responseString + ",";
+				responseString = responseString + "{\"success\":{\"/lights/" + lightId + "/state/hue_inc\":"
+						+ stateChanges.getHue_inc() + "}}";
+				if (deviceState != null)
+					deviceState.setHue(deviceState.getHue() + stateChanges.getHue_inc());
+				notFirstChange = true;
+			}
 
-		if (body.contains("\"sat_inc\"")) {
+			if (body.contains("\"sat_inc\"")) {
-			if (notFirstChange)
+				if (notFirstChange)
-				responseString = responseString + ",";
+					responseString = responseString + ",";
-			responseString = responseString + "{\"success\":{\"/lights/" + lightId + "/state/sat_inc\":"
+				responseString = responseString + "{\"success\":{\"/lights/" + lightId + "/state/sat_inc\":"
-					+ stateChanges.getSat_inc() + "}}";
+						+ stateChanges.getSat_inc() + "}}";
-			if (deviceState != null)
+				if (deviceState != null)
-				deviceState.setSat(deviceState.getSat() + stateChanges.getSat_inc());
+					deviceState.setSat(deviceState.getSat() + stateChanges.getSat_inc());
-			notFirstChange = true;
+				notFirstChange = true;
+			}	
 		}
 
 		if (body.contains("\"effect\"")) {
@@ -931,7 +927,9 @@ public class HueMulator {
 			if (url == null || url.length() == 0)
 				url = device.getOnUrl();
 		} else {
-			if (theStateChanges.isOn()) {
+			if (body.contains("\"xy\"") || body.contains("\"ct\"") || body.contains("\"hue\"")) {
+				url = device.getColorUrl();
+			} else if (theStateChanges.isOn()) {
 				url = device.getOnUrl();
 			} else if (!theStateChanges.isOn()) {
 				url = device.getOffUrl();

src/main/resources/public/scripts/app.js

@@ -410,6 +410,9 @@ app.service ('bridgeService', function ($rootScope, $http, $base64, $location, n
 		
 		if(device.offUrl !== undefined && device.offUrl !== null && device.offUrl.indexOf(aType) >= 0)
 			return true;
+
+		if(device.colorUrl !== undefined && device.colorUrl !== null && device.colorUrl.indexOf(aType) >= 0)
+			return true;
 		
 		
 		return false;
@@ -1185,17 +1188,20 @@ app.service ('bridgeService', function ($rootScope, $http, $base64, $location, n
 		return formattedItem;
 	};
 
-	this.buildUrls = function (onpayload, dimpayload, offpayload, isObject, anId, deviceName, deviceTarget, deviceType, deviceMapType, count, delay) {
+	this.buildUrls = function (onpayload, dimpayload, offpayload, colorpayload, isObject, anId, deviceName, deviceTarget, deviceType, deviceMapType, count, delay) {
 		var currentOn = "";
 		var currentDim = "";
 		var currentOff = "";
+		var currentColor = "";
 		if (self.state.device !== undefined && self.state.device !== null) {
 			if (self.state.device.onUrl !== undefined && self.state.device.onUrl !== null&& self.state.device.onUrl !== "")
 				currentOn = self.state.device.onUrl;
 			if (self.state.device.dimUrl !== undefined && self.state.device.dimUrl !== null && self.state.device.dimUrl !== "")
 				currentDim = self.state.device.dimUrl;
-			if (self.state.device.offUrl !== undefined && self.state.device.offnUrl !== null && self.state.device.offnUrl !== "")
+			if (self.state.device.offUrl !== undefined && self.state.device.offUrl !== null && self.state.device.offUrl !== "")
 				currentOff = self.state.device.offUrl;
+			if (self.state.device.colorUrl !== undefined && self.state.device.colorUrl !== null && self.state.device.colorUrl !== "")
+				currentColor = self.state.device.colorUrl;
 		}
 		if (self.state.device !== undefined && self.state.device !== null && self.state.device.mapType !== undefined && self.state.device.mapType !== null && self.state.device.mapType !== "") {
 			self.state.device.mapId = self.state.device.mapId + "-" + anId;
@@ -1210,6 +1216,9 @@ app.service ('bridgeService', function ($rootScope, $http, $base64, $location, n
 			if (offpayload !== undefined && offpayload !== null && offpayload !== "") {
 				self.state.device.offUrl = self.formatUrlItem(currentOff);
 			}
+			if (colorpayload !== undefined && colorpayload !== null && colorpayload !== "") {
+				self.state.device.colorUrl = self.formatUrlItem(currentColor);
+			}
 		} else if (self.state.device === undefined || self.state.device === null || self.state.device.mapType === undefined || self.state.device.mapType === null || self.state.device.mapType === "") {
 			this.clearDevice();
 			self.state.device.deviceType = deviceType;
@@ -1223,6 +1232,8 @@ app.service ('bridgeService', function ($rootScope, $http, $base64, $location, n
 				self.state.device.onUrl = "[{\"item\":";
 			if (offpayload !== undefined && offpayload !== null && offpayload !== "")
 				self.state.device.offUrl = "[{\"item\":";
+			if (colorpayload !== undefined && colorpayload !== null && colorpayload !== "")
+				self.state.device.colorUrl = "[{\"item\":";
 		}
 		
 		if (isObject) {
@@ -1232,6 +1243,8 @@ app.service ('bridgeService', function ($rootScope, $http, $base64, $location, n
 				self.state.device.onUrl = self.state.device.onUrl + onpayload;
 			if (offpayload !== undefined && offpayload !== null && offpayload !== "")
 				self.state.device.offUrl = self.state.device.offUrl + offpayload;
+			if (colorpayload !== undefined && colorpayload !== null && colorpayload !== "")
+				self.state.device.colorUrl = self.state.device.colorUrl + colorpayload;
 			
 		} else {
 			if (dimpayload !== undefined && dimpayload !== null && dimpayload !== "")
@@ -1240,6 +1253,8 @@ app.service ('bridgeService', function ($rootScope, $http, $base64, $location, n
 				self.state.device.onUrl = self.state.device.onUrl + "\"" + onpayload + "\"";
 			if (offpayload !== undefined && offpayload !== null && offpayload !== "")
 				self.state.device.offUrl = self.state.device.offUrl + "\"" + offpayload + "\"";
+			if (colorpayload !== undefined && colorpayload !== null && colorpayload !== "")
+				self.state.device.colorUrl = self.state.device.colorUrl + "\"" + colorpayload + "\"";
 		}
 		
 		if (count !== undefined && count !== null && count !== "") {
@@ -1249,6 +1264,8 @@ app.service ('bridgeService', function ($rootScope, $http, $base64, $location, n
 				self.state.device.onUrl = self.state.device.onUrl + ",\"count\":\"" + count;
 			if (offpayload !== undefined && offpayload !== null && offpayload !== "")
 				self.state.device.offUrl = self.state.device.offUrl + ",\"count\":\"" + count;
+			if (colorpayload !== undefined && colorpayload !== null && colorpayload !== "")
+				self.state.device.colorUrl = self.state.device.colorUrl + ",\"count\":\"" + count;
 		}
 		if (delay !== undefined && delay !== null && delay !== "") {
 			if (dimpayload !== undefined && dimpayload !== null && dimpayload !== "")
@@ -1257,6 +1274,8 @@ app.service ('bridgeService', function ($rootScope, $http, $base64, $location, n
 				self.state.device.onUrl = self.state.device.onUrl + ",\"delay\":\"" + delay;
 			if (offpayload !== undefined && offpayload !== null && offpayload !== "")
 				self.state.device.offUrl = self.state.device.offUrl + ",\"delay\":\"" + delay;
+			if (colorpayload !== undefined && colorpayload !== null && colorpayload !== "")
+				self.state.device.colorUrl = self.state.device.colorUrl + ",\"delay\":\"" + delay;
 		}
 		if (dimpayload !== undefined && dimpayload !== null && dimpayload !== "")
 			self.state.device.dimUrl = self.state.device.dimUrl + ",\"type\":\"" + deviceMapType + "\"}]";
@@ -1264,6 +1283,8 @@ app.service ('bridgeService', function ($rootScope, $http, $base64, $location, n
 			self.state.device.onUrl = self.state.device.onUrl + ",\"type\":\"" + deviceMapType + "\"}]";
 		if (offpayload !== undefined && offpayload !== null && offpayload !== "")
 			self.state.device.offUrl = self.state.device.offUrl + ",\"type\":\"" + deviceMapType + "\"}]";
+		if (colorpayload !== undefined && colorpayload !== null && colorpayload !== "")
+			self.state.device.colorUrl = self.state.device.colorUrl + ",\"type\":\"" + deviceMapType + "\"}]";
 	};
 });
 
@@ -1639,7 +1660,7 @@ app.controller('ViewingController', function ($scope, $location, bridgeService,
 		var dialogNeeded = false;
 		if ((type === "on" && device.onUrl !== undefined && bridgeService.aContainsB(device.onUrl, "${intensity")) ||
 				(type === "off" && device.offUrl !== undefined && bridgeService.aContainsB(device.offUrl, "${intensity")) ||
-				(type === "dim" && device.dimUrl !== undefined)) {
+				(type === "dim" && device.dimUrl !== undefined) || (type === "color" && device.colorUrl !== undefined)) {
 			$scope.bridge.device = device;
 			$scope.bridge.type = type;
 			ngDialog.open({
@@ -1783,10 +1804,10 @@ app.controller('VeraController', function ($scope, $location, bridgeService, ngD
 				+ "/data_request?id=action&output_format=json&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=1&DeviceNum="
 				+ veradevice.id;
 			offpayload = "http://" + veradevice.veraaddress + ":" + $scope.vera.port
-			+ "/data_request?id=action&output_format=json&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0&DeviceNum="
+				+ "/data_request?id=action&output_format=json&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0&DeviceNum="
-			+ veradevice.id;
+				+ veradevice.id;
-
+			
-			bridgeService.buildUrls(onpayload, dimpayload, offpayload, false, veradevice.id, veradevice.name, veradevice.veraname, "switch", "veraDevice", null, null);
+			bridgeService.buildUrls(onpayload, dimpayload, offpayload, null, false, veradevice.id, veradevice.name, veradevice.veraname, "switch", "veraDevice", null, null);
 			$scope.device = bridgeService.state.device;
 			if (!buildonly) {
 				bridgeService.editNewDevice($scope.device);
@@ -1802,7 +1823,7 @@ app.controller('VeraController', function ($scope, $location, bridgeService, ngD
 			+ "/data_request?id=action&output_format=json&serviceId=urn:micasaverde-com:serviceId:HomeAutomationGateway1&action=RunScene&SceneNum="
 			+ verascene.id;
 
-		bridgeService.buildUrls(onpayload, null, offpayload, false, verascene.id, verascene.name, verascene.veraname, "scene", "veraScene", null, null);
+		bridgeService.buildUrls(onpayload, null, offpayload, null, false, verascene.id, verascene.name, verascene.veraname, "scene", "veraScene", null, null);
 		$scope.device = bridgeService.state.device;
 		bridgeService.editNewDevice($scope.device);
 		$location.path('/editdevice');
@@ -1824,6 +1845,7 @@ app.controller('VeraController', function ($scope, $location, bridgeService, ngD
 							onUrl: $scope.device.onUrl,
 							dimUrl: $scope.device.dimUrl,
 							offUrl: $scope.device.offUrl,
+							colorUrl: $scope.device.colorUrl,
 							headers: $scope.device.headers,
 							httpVerb: $scope.device.httpVerb,
 							contentType: $scope.device.contentType,
@@ -1924,7 +1946,7 @@ app.controller('HarmonyController', function ($scope, $location, bridgeService,
 		onpayload = "{\"name\":\"" + harmonyactivity.activity.id + "\",\"hub\":\"" + harmonyactivity.hub + "\"}";
 		offpayload = "{\"name\":\"-1\",\"hub\":\"" + harmonyactivity.hub + "\"}";		
 
-		bridgeService.buildUrls(onpayload, null, offpayload, true, harmonyactivity.activity.id,  harmonyactivity.activity.label, harmonyactivity.hub, "activity", "harmonyActivity", null, null);
+		bridgeService.buildUrls(onpayload, null, offpayload, null, true, harmonyactivity.activity.id,  harmonyactivity.activity.label, harmonyactivity.hub, "activity", "harmonyActivity", null, null);
 		$scope.device = bridgeService.state.device;
 		bridgeService.editNewDevice($scope.device);
 		$location.path('/editdevice');
@@ -1943,7 +1965,7 @@ app.controller('HarmonyController', function ($scope, $location, bridgeService,
 			postCmd = "\"}";
 		offpayload = "{\"device\":\"" + harmonydevice.device.id + "\",\"button\":\"" + actionOff.command + "\",\"hub\":\"" + harmonydevice.hub + postCmd;
 
-		bridgeService.buildUrls(onpayload, null, offpayload, true, actionOn.command,  harmonydevice.device.label, harmonydevice.hub, "button", "harmonyButton", null, null);
+		bridgeService.buildUrls(onpayload, null, offpayload, null, true, actionOn.command,  harmonydevice.device.label, harmonydevice.hub, "button", "harmonyButton", null, null);
 		$scope.device = bridgeService.state.device;
 		bridgeService.editNewDevice($scope.device);
 		$location.path('/editdevice');
@@ -1987,7 +2009,7 @@ app.controller('NestController', function ($scope, $location, bridgeService, ngD
 	$scope.buildNestHomeUrls = function (nestitem) {
 		onpayload = "{\"name\":\"" + nestitem.id + "\",\"away\":false,\"control\":\"status\"}";
 		offpayload = "{\"name\":\"" + nestitem.id + "\",\"away\":true,\"control\":\"status\"}";
-		bridgeService.buildUrls(onpayload, null, offpayload, true, nestitem.id,  nestitem.name, nestitem.name, "home", "nestHomeAway", null, null);
+		bridgeService.buildUrls(onpayload, null, offpayload, null, true, nestitem.id,  nestitem.name, nestitem.name, "home", "nestHomeAway", null, null);
 		$scope.device = bridgeService.state.device;
 		bridgeService.editNewDevice($scope.device);
 		$location.path('/editdevice');
@@ -1997,7 +2019,7 @@ app.controller('NestController', function ($scope, $location, bridgeService, ngD
 		onpayload = "{\"name\":\"" + nestitem.id + "\",\"control\":\"temp\",\"temp\":\"${intensity.percent}\"}";
 		dimpayload = "{\"name\":\"" + nestitem.id + "\",\"control\":\"temp\",\"temp\":\"${intensity.percent}\"}";
 		offpayload = "{\"name\":\"" + nestitem.id + "\",\"control\":\"off\"}";
-		bridgeService.buildUrls(onpayload, dimpayload, offpayload, true, nestitem.id + "-SetTemp",  nestitem.name.substr(0, nestitem.name.indexOf("(")) + " Temperature", nestitem.location, "thermo", "nestThermoSet", null, null);
+		bridgeService.buildUrls(onpayload, dimpayload, offpayload, null, true, nestitem.id + "-SetTemp",  nestitem.name.substr(0, nestitem.name.indexOf("(")) + " Temperature", nestitem.location, "thermo", "nestThermoSet", null, null);
 		$scope.device = bridgeService.state.device;
 		bridgeService.editNewDevice($scope.device);
 		$location.path('/editdevice');
@@ -2007,7 +2029,7 @@ app.controller('NestController', function ($scope, $location, bridgeService, ngD
 		onpayload = "{\"name\":\"" + nestitem.id + "\",\"control\":\"heat\"}";
 		dimpayload = "{\"name\":\"" + nestitem.id + "\",\"control\":\"temp\",\"temp\":\"${intensity.percent}\"}";
 		offpayload = "{\"name\":\"" + nestitem.id + "\",\"control\":\"off\"}";
-		bridgeService.buildUrls(onpayload, dimpayload, offpayload, true, nestitem.id + "-SetHeat",  nestitem.name.substr(0, nestitem.name.indexOf("(")) + " Heat", nestitem.location, "thermo", "nestThermoSet", null, null);
+		bridgeService.buildUrls(onpayload, dimpayload, offpayload, null, true, nestitem.id + "-SetHeat",  nestitem.name.substr(0, nestitem.name.indexOf("(")) + " Heat", nestitem.location, "thermo", "nestThermoSet", null, null);
 		$scope.device = bridgeService.state.device;
 		bridgeService.editNewDevice($scope.device);
 		$location.path('/editdevice');
@@ -2017,7 +2039,7 @@ app.controller('NestController', function ($scope, $location, bridgeService, ngD
 		onpayload = "{\"name\":\"" + nestitem.id + "\",\"control\":\"cool\"}";
 		dimpayload = "{\"name\":\"" + nestitem.id + "\",\"control\":\"temp\",\"temp\":\"${intensity.percent}\"}";
 		offpayload = "{\"name\":\"" + nestitem.id + "\",\"control\":\"off\"}";
-		bridgeService.buildUrls(onpayload,dimpayload, offpayload, true, nestitem.id + "-SetCool",  nestitem.name.substr(0, nestitem.name.indexOf("(")) + " Cool", nestitem.location, "thermo", "nestThermoSet", null, null);
+		bridgeService.buildUrls(onpayload,dimpayload, offpayload, null, true, nestitem.id + "-SetCool",  nestitem.name.substr(0, nestitem.name.indexOf("(")) + " Cool", nestitem.location, "thermo", "nestThermoSet", null, null);
 		$scope.device = bridgeService.state.device;
 		bridgeService.editNewDevice($scope.device);
 		$location.path('/editdevice');
@@ -2026,7 +2048,7 @@ app.controller('NestController', function ($scope, $location, bridgeService, ngD
 	$scope.buildNestRangeUrls = function (nestitem) {
 		onpayload = "{\"name\":\"" + nestitem.id + "\",\"control\":\"range\"}";
 		offpayload = "{\"name\":\"" + nestitem.id + "\",\"control\":\"off\"}";
-		bridgeService.buildUrls(onpayload, null, offpayload, true, nestitem.id + "-SetRange",  nestitem.name.substr(0, nestitem.name.indexOf("(")) + " Range", nestitem.location, "thermo", "nestThermoSet", null, null);
+		bridgeService.buildUrls(onpayload, null, offpayload, null, true, nestitem.id + "-SetRange",  nestitem.name.substr(0, nestitem.name.indexOf("(")) + " Range", nestitem.location, "thermo", "nestThermoSet", null, null);
 		$scope.device = bridgeService.state.device;
 		bridgeService.editNewDevice($scope.device);
 		$location.path('/editdevice');
@@ -2035,7 +2057,7 @@ app.controller('NestController', function ($scope, $location, bridgeService, ngD
 	$scope.buildNestOffUrls = function (nestitem) {
 		onpayload = "{\"name\":\"" + nestitem.id + "\",\"control\":\"range\"}";
 		offpayload = "{\"name\":\"" + nestitem.id + "\",\"control\":\"off\"}";
-		bridgeService.buildUrls(onpayload, null, offpayload, true, nestitem.id + "-TurnOff",  nestitem.name.substr(0, nestitem.name.indexOf("(")) + " Thermostat", nestitem.location, "thermo", "nestThermoSet", null, null);
+		bridgeService.buildUrls(onpayload, null, offpayload, null, true, nestitem.id + "-TurnOff",  nestitem.name.substr(0, nestitem.name.indexOf("(")) + " Thermostat", nestitem.location, "thermo", "nestThermoSet", null, null);
 		$scope.device = bridgeService.state.device;
 		bridgeService.editNewDevice($scope.device);
 		$location.path('/editdevice');
@@ -2044,7 +2066,7 @@ app.controller('NestController', function ($scope, $location, bridgeService, ngD
 	$scope.buildNestFanUrls = function (nestitem) {
 		onpayload = "{\"name\":\"" + nestitem.id + "\",\"control\":\"fan-on\"}";
 		offpayload = "{\"name\":\"" + nestitem.id + "\",\"control\":\"fan-auto\"}";
-		bridgeService.buildUrls(onpayload, null, offpayload, true, nestitem.id + "-SetFan",  nestitem.name.substr(0, nestitem.name.indexOf("(")) + " Fan", nestitem.location, "thermo", "nestThermoSet", null, null);
+		bridgeService.buildUrls(onpayload, null, offpayload, null, true, nestitem.id + "-SetFan",  nestitem.name.substr(0, nestitem.name.indexOf("(")) + " Fan", nestitem.location, "thermo", "nestThermoSet", null, null);
 		$scope.device = bridgeService.state.device;
 		bridgeService.editNewDevice($scope.device);
 		$location.path('/editdevice');
@@ -2090,7 +2112,7 @@ app.controller('HueController', function ($scope, $location, bridgeService, ngDi
 	$scope.buildDeviceUrls = function (huedevice, buildonly) {
 		onpayload = "{\"ipAddress\":\"" + huedevice.hueaddress + "\",\"deviceId\":\"" + huedevice.huedeviceid +"\",\"hueName\":\"" + huedevice.huename + "\"}";
 		offpayload = "{\"ipAddress\":\"" + huedevice.hueaddress + "\",\"deviceId\":\"" + huedevice.huedeviceid +"\",\"hueName\":\"" + huedevice.huename + "\"}";
-		bridgeService.buildUrls(onpayload, null, offpayload, true, huedevice.device.uniqueid,  huedevice.device.name, huedevice.huename, "passthru",  "hueDevice", null, null);
+		bridgeService.buildUrls(onpayload, null, offpayload, null, true, huedevice.device.uniqueid,  huedevice.device.name, huedevice.huename, "passthru",  "hueDevice", null, null);
 		$scope.device = bridgeService.state.device;
 		if (!buildonly) {
 			bridgeService.editNewDevice($scope.device);
@@ -2114,6 +2136,7 @@ app.controller('HueController', function ($scope, $location, bridgeService, ngDi
 							onUrl: $scope.device.onUrl,
 							dimUrl: $scope.device.dimUrl,
 							offUrl: $scope.device.offUrl,
+							colorUrl: $scope.device.colorUrl,
 							headers: $scope.device.headers,
 							httpVerb: $scope.device.httpVerb,
 							contentType: $scope.device.contentType,
@@ -2257,7 +2280,7 @@ app.controller('HalController', function ($scope, $location, bridgeService, ngDi
 		+ preOffCmd
 		+ nameCmd
 		+ haldevice.haldevicename.replaceAll(" ", "%20");
-		bridgeService.buildUrls(onpayload, dimpayload, offpayload, false, haldevice.haldevicename + "-" + haldevice.haladdress.name,  haldevice.haldevicename, haldevice.haladdress.name, aDeviceType,  "halDevice", null, null);
+		bridgeService.buildUrls(onpayload, dimpayload, offpayload, null, false, haldevice.haldevicename + "-" + haldevice.haladdress.name,  haldevice.haldevicename, haldevice.haladdress.name, aDeviceType,  "halDevice", null, null);
 		$scope.device = bridgeService.state.device;
 		if (!buildonly) {
 			bridgeService.editNewDevice($scope.device);
@@ -2271,7 +2294,7 @@ app.controller('HalController', function ($scope, $location, bridgeService, ngDi
 		onpayload = "http://" + haldevice.haladdress.ip + "/IrService!IrCmd=Set!IrDevice=" + haldevice.haldevicename.replaceAll(" ", "%20") + "!IrButton=" + actionOn.DeviceName.replaceAll(" ", "%20");
 		offpayload = "http://" + haldevice.haladdress.ip + "/IrService!IrCmd=Set!IrDevice=" + haldevice.haldevicename.replaceAll(" ", "%20") + "!IrButton=" + actionOff.DeviceName.replaceAll(" ", "%20");
 
-		bridgeService.buildUrls(onpayload, null, offpayload, false, haldevice.haldevicename + "-" + haldevice.haladdress.name + "-" + actionOn.DeviceName,  haldevice.haldevicename, haldevice.haladdress.name, "button",  "halButton", null, null);
+		bridgeService.buildUrls(onpayload, null, offpayload, null, false, haldevice.haldevicename + "-" + haldevice.haladdress.name + "-" + actionOn.DeviceName,  haldevice.haldevicename, haldevice.haladdress.name, "button",  "halButton", null, null);
 		$scope.device = bridgeService.state.device;
 		if (!buildonly) {
 			bridgeService.editNewDevice($scope.device);
@@ -2282,7 +2305,7 @@ app.controller('HalController', function ($scope, $location, bridgeService, ngDi
 	$scope.buildHALHomeUrls = function (haldevice, buildonly) {
 		onpayload = "http://" + haldevice.haladdress.ip + "/ModeService!ModeCmd=Set!ModeName=Home";
 		offpayload = "http://" + haldevice.haladdress.ip + "/ModeService!ModeCmd=Set!ModeName=Away";
-		bridgeService.buildUrls(onpayload, null, offpayload, false, haldevice.haldevicename + "-" + haldevice.haladdress.name + "-HomeAway",  haldevice.haldevicename, haldevice.haladdress.name, "home",  "halHome", null, null);
+		bridgeService.buildUrls(onpayload, null, offpayload, null, false, haldevice.haldevicename + "-" + haldevice.haladdress.name + "-HomeAway",  haldevice.haldevicename, haldevice.haladdress.name, "home",  "halHome", null, null);
 		$scope.device = bridgeService.state.device;
 		if (!buildonly) {
 			bridgeService.editNewDevice($scope.device);
@@ -2303,7 +2326,7 @@ app.controller('HalController', function ($scope, $location, bridgeService, ngDi
 		+ "/HVACService!HVACCmd=Set!HVACName=" 
 		+ haldevice.haldevicename.replaceAll(" ", "%20") 
 		+ "!HVACMode=Off";
-		bridgeService.buildUrls(onpayload, dimpayload, offpayload, false, haldevice.haldevicename + "-" + haldevice.haladdress.name + "-SetHeat",  haldevice.haldevicename + " Heat", haldevice.haladdress.name, "thermo",  "halThermoSet", null, null);
+		bridgeService.buildUrls(onpayload, dimpayload, offpayload, null, false, haldevice.haldevicename + "-" + haldevice.haladdress.name + "-SetHeat",  haldevice.haldevicename + " Heat", haldevice.haladdress.name, "thermo",  "halThermoSet", null, null);
 		$scope.device = bridgeService.state.device;
 		if (!buildonly) {
 			bridgeService.editNewDevice($scope.device);
@@ -2324,7 +2347,7 @@ app.controller('HalController', function ($scope, $location, bridgeService, ngDi
 		+ "/HVACService!HVACCmd=Set!HVACName=" 
 		+ haldevice.haldevicename.replaceAll(" ", "%20") 
 		+ "!HVACMode=Off";
-		bridgeService.buildUrls(onpayload, dimpayload, offpayload, false, haldevice.haldevicename + "-" + haldevice.haladdress.name + "-SetCool",  haldevice.haldevicename + " Cool", haldevice.haladdress.name, "thermo",  "halThermoSet", null, null);
+		bridgeService.buildUrls(onpayload, dimpayload, offpayload, null, false, haldevice.haldevicename + "-" + haldevice.haladdress.name + "-SetCool",  haldevice.haldevicename + " Cool", haldevice.haladdress.name, "thermo",  "halThermoSet", null, null);
 		$scope.device = bridgeService.state.device;
 		if (!buildonly) {
 			bridgeService.editNewDevice($scope.device);
@@ -2341,7 +2364,7 @@ app.controller('HalController', function ($scope, $location, bridgeService, ngDi
 		+ "/HVACService!HVACCmd=Set!HVACName=" 
 		+ haldevice.haldevicename.replaceAll(" ", "%20") 
 		+ "!HVACMode=Off";
-		bridgeService.buildUrls(onpayload, null, offpayload, false, haldevice.haldevicename + "-" + haldevice.haladdress.name + "-SetAuto",  haldevice.haldevicename + " Auto", haldevice.haladdress.name, "thermo",  "halThermoSet", null, null);
+		bridgeService.buildUrls(onpayload, null, offpayload, null, false, haldevice.haldevicename + "-" + haldevice.haladdress.name + "-SetAuto",  haldevice.haldevicename + " Auto", haldevice.haladdress.name, "thermo",  "halThermoSet", null, null);
 		$scope.device = bridgeService.state.device;
 		if (!buildonly) {
 			bridgeService.editNewDevice($scope.device);
@@ -2358,7 +2381,7 @@ app.controller('HalController', function ($scope, $location, bridgeService, ngDi
 		+ "/HVACService!HVACCmd=Set!HVACName=" 
 		+ haldevice.haldevicename.replaceAll(" ", "%20") 
 		+ "!HVACMode=Off";
-		bridgeService.buildUrls(onpayload, null, offpayload, false, haldevice.haldevicename + "-" + haldevice.haladdress.name + "-TurnOff",  haldevice.haldevicename + " Thermostat", haldevice.haladdress.name, "thermo",  "halThermoSet", null, null);
+		bridgeService.buildUrls(onpayload, null, offpayload, null, false, haldevice.haldevicename + "-" + haldevice.haladdress.name + "-TurnOff",  haldevice.haldevicename + " Thermostat", haldevice.haladdress.name, "thermo",  "halThermoSet", null, null);
 		$scope.device = bridgeService.state.device;
 		if (!buildonly) {
 			bridgeService.editNewDevice($scope.device);
@@ -2375,7 +2398,7 @@ app.controller('HalController', function ($scope, $location, bridgeService, ngDi
 			+ "/HVACService!HVACCmd=Set!HVACName=" 
 			+ haldevice.haldevicename.replaceAll(" ", "%20") 
 			+ "!FanMode=Auto";
-		bridgeService.buildUrls(onpayload, null, offpayload, false, haldevice.haldevicename + "-" + haldevice.haladdress.name + "-SetFan",  haldevice.haldevicename + " Fan", haldevice.haladdress.name, "thermo",  "halThermoSet", null, null);
+		bridgeService.buildUrls(onpayload, null, offpayload, null, false, haldevice.haldevicename + "-" + haldevice.haladdress.name + "-SetFan",  haldevice.haldevicename + " Fan", haldevice.haladdress.name, "thermo",  "halThermoSet", null, null);
 		$scope.device = bridgeService.state.device;
 		if (!buildonly) {
 			bridgeService.editNewDevice($scope.device);
@@ -2404,6 +2427,7 @@ app.controller('HalController', function ($scope, $location, bridgeService, ngDi
 							onUrl: $scope.device.onUrl,
 							dimUrl: $scope.device.dimUrl,
 							offUrl: $scope.device.offUrl,
+							colorUrl: $scope.device.colorUrl,
 							headers: $scope.device.headers,
 							httpVerb: $scope.device.httpVerb,
 							contentType: $scope.device.contentType,
@@ -2499,7 +2523,7 @@ app.controller('MQTTController', function ($scope, $location, bridgeService, ngD
 		onpayload = "{\"clientId\":\"" + mqttbroker.clientId + "\",\"topic\":\"" + mqtttopic + "\",\"message\":\"" + mqttmessage + "\",\"qos\":\"" + mqttqos + "\",\"retain\":\"" + mqttretain + "\"}";
 		offpayload = "{\"clientId\":\"" + mqttbroker.clientId + "\",\"topic\":\"" + mqtttopic + "\",\"message\":\"" + mqttmessage + "\",\"qos\":\"" + mqttqos + "\",\"retain\":\"" + mqttretain + "\"}";
 
-		bridgeService.buildUrls(onpayload, null, offpayload, true, mqttbroker.clientId + "-" + mqtttopic, mqttbroker.clientId + mqtttopic, mqttbroker.clientId, "mqtt",  "mqttMessage", null, null);
+		bridgeService.buildUrls(onpayload, null, offpayload, null, true, mqttbroker.clientId + "-" + mqtttopic, mqttbroker.clientId + mqtttopic, mqttbroker.clientId, "mqtt",  "mqttMessage", null, null);
 		$scope.device = bridgeService.state.device;
 		bridgeService.editNewDevice($scope.device);
 		$location.path('/editdevice');
@@ -2551,7 +2575,7 @@ app.controller('HassController', function ($scope, $location, bridgeService, ngD
 			dimpayload = "{\"entityId\":\"" + hassdevice.deviceState.entity_id + "\",\"hassName\":\"" + hassdevice.hassname + "\",\"state\":\"on\"}";
 		offpayload = "{\"entityId\":\"" + hassdevice.deviceState.entity_id + "\",\"hassName\":\"" + hassdevice.hassname + "\",\"state\":\"off\"}";
 
-		bridgeService.buildUrls(onpayload, dimpayload, offpayload, true, hassdevice.hassname + "-" + hassdevice.deviceState.entity_id, hassdevice.deviceState.entity_id, hassdevice.hassname, hassdevice.domain,  "hassDevice", null, null);
+		bridgeService.buildUrls(onpayload, dimpayload, offpayload, null, true, hassdevice.hassname + "-" + hassdevice.deviceState.entity_id, hassdevice.deviceState.entity_id, hassdevice.hassname, hassdevice.domain,  "hassDevice", null, null);
 		$scope.device = bridgeService.state.device;
 		if (!buildonly) {
 			bridgeService.editNewDevice($scope.device);
@@ -2575,6 +2599,7 @@ app.controller('HassController', function ($scope, $location, bridgeService, ngD
 							onUrl: $scope.device.onUrl,
 							dimUrl: $scope.device.dimUrl,
 							offUrl: $scope.device.offUrl,
+							colorUrl: $scope.device.colorUrl,
 							headers: $scope.device.headers,
 							httpVerb: $scope.device.httpVerb,
 							contentType: $scope.device.contentType,
@@ -2706,7 +2731,7 @@ app.controller('DomoticzController', function ($scope, $location, bridgeService,
 		+ preCmd
 		+ domoticzdevice.idx
 		+ postOffCmd;
-		bridgeService.buildUrls(onpayload, dimpayload, offpayload, false, domoticzdevice.devicename + "-" + domoticzdevice.domoticzname,  domoticzdevice.devicename, domoticzdevice.domoticzname, aDeviceType,  "domoticzDevice", null, null);
+		bridgeService.buildUrls(onpayload, dimpayload, offpayload, null, false, domoticzdevice.devicename + "-" + domoticzdevice.domoticzname,  domoticzdevice.devicename, domoticzdevice.domoticzname, aDeviceType,  "domoticzDevice", null, null);
 		$scope.device = bridgeService.state.device;
 		if (!buildonly) {
 			bridgeService.editNewDevice($scope.device);
@@ -2730,6 +2755,7 @@ app.controller('DomoticzController', function ($scope, $location, bridgeService,
 							onUrl: $scope.device.onUrl,
 							dimUrl: $scope.device.dimUrl,
 							offUrl: $scope.device.offUrl,
+							colorUrl: $scope.device.colorUrl,
 							headers: $scope.device.headers,
 							httpVerb: $scope.device.httpVerb,
 							contentType: $scope.device.contentType,
@@ -2828,7 +2854,7 @@ app.controller('LifxController', function ($scope, $location, bridgeService, ngD
 		dimpayload = angular.toJson(lifxdevice);
 		onpayload = angular.toJson(lifxdevice);
 		offpayload = angular.toJson(lifxdevice);
-		bridgeService.buildUrls(onpayload, dimpayload, offpayload, true, lifxdevice.name,  lifxdevice.name, lifxdevice.name, null,  "lifxDevice", null, null);
+		bridgeService.buildUrls(onpayload, dimpayload, offpayload, null, true, lifxdevice.name,  lifxdevice.name, lifxdevice.name, null,  "lifxDevice", null, null);
 		$scope.device = bridgeService.state.device;
 		if (!buildonly) {
 			bridgeService.editNewDevice($scope.device);
@@ -2852,6 +2878,7 @@ app.controller('LifxController', function ($scope, $location, bridgeService, ngD
 							onUrl: $scope.device.onUrl,
 							dimUrl: $scope.device.dimUrl,
 							offUrl: $scope.device.offUrl,
+							colorUrl: $scope.device.colorUrl,
 							headers: $scope.device.headers,
 							httpVerb: $scope.device.httpVerb,
 							contentType: $scope.device.contentType,
@@ -2955,7 +2982,7 @@ app.controller('SomfyController', function ($scope, $location, bridgeService, ng
         onpayload = "{\"label\":\"Label that is ignored probably\",\"actions\":[{\"deviceURL\":\""+ somfydevice.deviceUrl+"\",\"commands\":[{\"name\":\"open\",\"parameters\":[]}]}]}";
         offpayload = "{\"label\":\"Label that is ignored probably\",\"actions\":[{\"deviceURL\":\""+ somfydevice.deviceUrl+"\",\"commands\":[{\"name\":\"close\",\"parameters\":[]}]}]}";
 
-        bridgeService.buildUrls(onpayload, dimpayload, offpayload, true, somfydevice.id,  somfydevice.name, somfydevice.somfyname, "switch",  "somfyDevice", null, null);
+        bridgeService.buildUrls(onpayload, dimpayload, offpayload, null, true, somfydevice.id,  somfydevice.name, somfydevice.somfyname, "switch",  "somfyDevice", null, null);
         $scope.device = bridgeService.state.device;
         if (!buildonly) {
         			bridgeService.editNewDevice($scope.device);
@@ -2980,6 +3007,7 @@ app.controller('SomfyController', function ($scope, $location, bridgeService, ng
 							onUrl: $scope.device.onUrl,
 							dimUrl: $scope.device.dimUrl,
 							offUrl: $scope.device.offUrl,
+							colorUrl: $scope.device.colorUrl,
 							headers: $scope.device.headers,
 							httpVerb: $scope.device.httpVerb,
 							contentType: $scope.device.contentType,
@@ -3065,18 +3093,35 @@ app.controller('EditController', function ($scope, $location, bridgeService) {
 	$scope.onDevices = null;
 	$scope.dimDevices = null;
 	$scope.offDevices = null;
+	$scope.colorDevices = null;
+	$scope.showUrls = false;
+	$scope.onUrl = null;
+	$scope.dimUrl = null;
+	$scope.offUrl = null;
+	$scope.colorUrl = null;
 	if ($scope.device !== undefined && $scope.device.name !== undefined) {
-		if($scope.bridge.device.onUrl !== undefined)
+		if($scope.bridge.device.onUrl !== undefined) {
 			$scope.onDevices = bridgeService.getCallObjects($scope.bridge.device.onUrl);
-		if($scope.bridge.device.dimUrl !== undefined)
+			$scope.onUrl = $scope.bridge.device.onUrl.split("},").join("},\n");
+		}
+		if($scope.bridge.device.dimUrl !== undefined) {
 			$scope.dimDevices = bridgeService.getCallObjects($scope.bridge.device.dimUrl);
-		if($scope.bridge.device.offUrl !== undefined)
+			$scope.dimUrl = $scope.bridge.device.dimUrl.split("},").join("},\n");
+		}
+		if($scope.bridge.device.offUrl !== undefined) {
 			$scope.offDevices = bridgeService.getCallObjects($scope.bridge.device.offUrl);
+			$scope.offUrl = $scope.bridge.device.offUrl.split("},").join("},\n");
+		}
+		if($scope.bridge.device.colorUrl !== undefined) {
+			$scope.colorDevices = bridgeService.getCallObjects($scope.bridge.device.colorUrl);
+			$scope.colorUrl = $scope.bridge.device.colorUrl.split("},").join("},\n");
+		}
 	}
 	
 	$scope.newOnItem = {};
 	$scope.newDimItem = {};
 	$scope.newOffItem = {};
+	$scope.newColorItem = {};
 	$scope.mapTypeSelected = bridgeService.getMapType($scope.device.mapType); 
 	$scope.device_dim_control = "";
 	$scope.imgButtonsUrl = "glyphicon glyphicon-plus";
@@ -3087,9 +3132,16 @@ app.controller('EditController', function ($scope, $location, bridgeService) {
 		$scope.onDevices = null;
 		$scope.dimDevices = null;
 		$scope.offDevices = null;
+		$scope.colorDevices = null;
+		$scope.showUrls = false;
+		$scope.onUrl = null;
+		$scope.dimUrl = null;
+		$scope.offUrl = null;
+		$scope.colorUrl = null;
 		$scope.newOnItem = {};
 		$scope.newDimItem = {};
 		$scope.newOffItem = {};
+		$scope.newColorItem = {};
 		$scope.device = bridgeService.state.device;
 		$scope.mapTypeSelected = null;
 	};
@@ -3116,12 +3168,22 @@ app.controller('EditController', function ($scope, $location, bridgeService) {
 		else
 			$scope.device.mapType = null;
 		
-		if ($scope.onDevices !== null)
+		if ($scope.showUrls) {
-			$scope.device.onUrl = angular.toJson(bridgeService.updateCallObjectsType($scope.onDevices));
+			$scope.device.onUrl = ($scope.onUrl == undefined || $scope.onUrl == null || $scope.onUrl == "") ? null :  $scope.onUrl.replace(/\r?\n|\r/g,"");
-		if ($scope.dimDevices !== null)
+			$scope.device.dimUrl = ($scope.dimUrl == undefined || $scope.dimUrl == null || $scope.dimUrl == "") ? null :  $scope.dimUrl.replace(/\r?\n|\r/g,"");
-			$scope.device.dimUrl = angular.toJson(bridgeService.updateCallObjectsType($scope.dimDevices));
+			$scope.device.offUrl = ($scope.offUrl == undefined || $scope.offUrl == null || $scope.offUrl == "") ? null :  $scope.offUrl.replace(/\r?\n|\r/g,"");
-		if ($scope.offDevices !== null)
+			$scope.device.colorUrl = ($scope.colorUrl == undefined || $scope.colorUrl == null || $scope.colorUrl == "") ? null :  $scope.colorUrl.replace(/\r?\n|\r/g,"");
-			$scope.device.offUrl = angular.toJson(bridgeService.updateCallObjectsType($scope.offDevices));
+		} else {
+			if ($scope.onDevices !== null)
+				$scope.device.onUrl = angular.toJson(bridgeService.updateCallObjectsType($scope.onDevices));
+			if ($scope.dimDevices !== null)
+				$scope.device.dimUrl = angular.toJson(bridgeService.updateCallObjectsType($scope.dimDevices));
+			if ($scope.offDevices !== null)
+				$scope.device.offUrl = angular.toJson(bridgeService.updateCallObjectsType($scope.offDevices));
+			if ($scope.colorDevices !== null)
+				$scope.device.colorUrl = angular.toJson(bridgeService.updateCallObjectsType($scope.colorDevices));	
+		}
+		
 
 		bridgeService.addDevice($scope.device).then(
 				function () {
@@ -3148,7 +3210,7 @@ app.controller('EditController', function ($scope, $location, bridgeService) {
     };
     $scope.removeItemOn = function (anItem) {
     	for(var i = $scope.onDevices.length - 1; i >= 0; i--) {
-    	    if($scope.onDevices[i].item === anItem.item && $scope.onDevices[i].type === anItem.type) {
+    		if($scope.onDevices[i] === anItem) {
     	    	$scope.onDevices.splice(i, 1);
     	    }
     	}    	
@@ -3165,8 +3227,8 @@ app.controller('EditController', function ($scope, $location, bridgeService) {
     };
     $scope.removeItemDim = function (anItem) {
     	for(var i = $scope.dimDevices.length - 1; i >= 0; i--) {
-    	    if($scope.dimDevices[i].item === anItem.item && $scope.dimDevices[i].type === anItem.type) {
+    	    if($scope.dimDevices[i] === anItem) {
-    	    	$scope.dimDevices.splice(i, 1);
+    	      	$scope.dimDevices.splice(i, 1);
     	    }
     	}    	
     };
@@ -3182,11 +3244,30 @@ app.controller('EditController', function ($scope, $location, bridgeService) {
     };
     $scope.removeItemOff = function (anItem) {
     	for(var i = $scope.offDevices.length - 1; i >= 0; i--) {
-    	    if($scope.offDevices[i].item === anItem.item && $scope.offDevices[i].type === anItem.type) {
+    	    if($scope.offDevices[i] === anItem) {
     	    	$scope.offDevices.splice(i, 1);
     	    }
     	}    	
     };
+
+    $scope.addItemColor = function (anItem) {
+    	if (anItem.item === undefined || anItem.item === null || anItem.item === "")
+    		return;
+    	var newitem = { item: anItem.item, type: anItem.type, delay: anItem.delay, count: anItem.count, filterIPs: anItem.filterIPs, httpVerb: anItem.httpVerb, httpBody: anItem.httpBody, httpHeaders: anItem.httpHeaders, contentType: anItem.contentType };
+    	if ($scope.colorDevices === null)
+    		$scope.colorDevices = [];
+    	$scope.colorDevices.push(newitem);
+    	$scope.newColorItem = {};
+    };
+    $scope.removeItemColor = function (anItem) {
+    	for(var i = $scope.colorDevices.length - 1; i >= 0; i--) {
+    	    if($scope.colorDevices[i] === anItem) {
+    	    	$scope.colorDevices.splice(i, 1);
+    	    }
+    	}    	
+    };
+
+
 	$scope.toggleButtons = function () {
 		$scope.buttonsVisible = !$scope.buttonsVisible;
 		if($scope.buttonsVisible)
@@ -3195,6 +3276,22 @@ app.controller('EditController', function ($scope, $location, bridgeService) {
 			$scope.imgButtonsUrl = "glyphicon glyphicon-plus";
 	};
 
+	$scope.changeEditmode = function () {
+		// copy local changes over to other edit mode
+		if ($scope.showUrls) {
+			$scope.onDevices = ($scope.onUrl == undefined || $scope.onUrl == null || $scope.onUrl == "") ? null :  bridgeService.getCallObjects($scope.onUrl.replace(/\r?\n|\r/g,"")); 
+			$scope.dimDevices = ($scope.dimUrl == undefined || $scope.dimUrl == null || $scope.dimUrl == "") ? null : bridgeService.getCallObjects($scope.dimUrl.replace(/\r?\n|\r/g,""));
+			$scope.offDevices = ($scope.offUrl == undefined || $scope.offUrl == null || $scope.offUrl == "") ? null : bridgeService.getCallObjects($scope.offUrl.replace(/\r?\n|\r/g,""));
+			$scope.colorDevices = ($scope.colorUrl == undefined || $scope.colorUrl == null || $scope.colorUrl == "") ? null : bridgeService.getCallObjects($scope.colorUrl.replace(/\r?\n|\r/g,""));
+		} else {
+			$scope.onUrl = ($scope.onDevices !== null) ? angular.toJson(bridgeService.updateCallObjectsType($scope.onDevices)).split("},").join("},\n") : null;
+			$scope.dimUrl = ($scope.dimDevices !== null) ? angular.toJson(bridgeService.updateCallObjectsType($scope.dimDevices)).split("},").join("},\n") : null;
+			$scope.offUrl = ($scope.offDevices !== null) ? angular.toJson(bridgeService.updateCallObjectsType($scope.offDevices)).split("},").join("},\n") : null;
+			$scope.colorUrl = ($scope.colorDevices !== null) ? angular.toJson(bridgeService.updateCallObjectsType($scope.colorDevices)).split("},").join("},\n") : null;	
+		}
+		$scope.showUrls = !$scope.showUrls;
+	};
+
 });
 
 app.filter('configuredVeraDevices', function (bridgeService) {

src/main/resources/public/views/editdevice.html

@@ -56,6 +56,7 @@
 					ng-click="editDevice(false)">Update Bridge Device</button>
 				<button class="btn btn-danger" ng-click="clearDevice()">Clear
 					Device</button>
+				<button class="btn" ng-click="changeEditmode()">Change Editmode</button>
 			</p>
 			<table class="table table-bordered table-striped table-hover">
 
@@ -147,7 +148,14 @@
 					<td><input type="text" class="form-control" id="device-map-id"
 						ng-model="device.mapId" placeholder="1111"></td>
 				</tr>
-				<tr>
+				<tr ng-hide="!showUrls">
+					<td><label>OnUrl</label></td>
+
+					<td><textarea class="form-control" id="device-on-url" style="min-height: 250px; min-width: 1300px" 
+						ng-model="onUrl" placeholder="default"></textarea></td>
+				</tr>
+				
+				<tr ng-hide="showUrls">
 					<td><label>On Items</label></td>
 
 					<td><scrollable-table watch="onDevices">
@@ -159,7 +167,7 @@
 									<th>Target Item</th>
 									<th>Delay</th>
 									<th>Count</th>
-									<th>Filter IPs</th>
+									<!--<th>Filter IPs</th>-->
 									<th>Http Verb</th>
 									<th>Http Body</th>
 									<th>Http Headers</th>
@@ -171,20 +179,20 @@
 							<tr ng-repeat="onItem in onDevices">
 							<div class="col-xs-12 col-md-4">
 								<td><select
-									ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
+									ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]" style="max-width: 150px"
 									ng-model="onItem.type"></select></td>
 								<td><textarea rows="1" class="form-control"
-										id="item-target" ng-model="onItem.item" placeholder="The Call"></textarea></td>
+										id="item-target" ng-model="onItem.item" style="min-width: 600px" placeholder="The Call"></textarea></td>
-								<td><textarea rows="1" class="form-control"
+								<td><textarea rows="1" class="form-control" style="max-width: 80px; min-width: 80px"
 										id="item-delay" ng-model="onItem.delay" placeholder="millis"></textarea></td>
-								<td><textarea rows="1" class="form-control"
+								<td><textarea rows="1" class="form-control" style="max-width: 80px; min-width: 80px"
 										id="item-count" ng-model="onItem.count" placeholder="number"></textarea></td>
-								<td><textarea rows="1" class="form-control"
+								<!--<td><textarea rows="1" class="form-control"
 										id="item-filterIPs" ng-model="onItem.filterIPs"
-										placeholder="restrict IPs"></textarea></td>
+										placeholder="restrict IPs"></textarea></td>-->
-								<td><select name="item-http-verb" id="item-http-verb"
+								<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
 									ng-model="onItem.httpVerb">
-										<option value="">---Please select---</option>
+										<option value="">---</option>
 										<!-- not selected / blank option -->
 										<option value="GET">GET</option>
 										<option value="PUT">PUT</option>
@@ -196,7 +204,7 @@
 								<td><textarea rows="1" cols="16" class="form-control"
 										id="item-httpHeaders" ng-model="onItem.httpHeaders"
 										placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
-								<td><select name="item-content-type" id="item-content-type"
+								<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
 									ng-model="onItem.contentType">
 										<option value="">---Please select---</option>
 										<!-- not selected / blank option -->
@@ -220,24 +228,24 @@
 							</tr>
 							<tr>
 							<div class="col-xs-12 col-md-4">
-								<td><select
+								<td><select style="max-width: 150px"
 									ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
 									ng-model="newOnItem.type"></select></td>
 								<td><textarea rows="1" cols="20" class="form-control"
-										id="item-target" ng-model="newOnItem.item"
+										id="item-target" style="min-width: 600px" ng-model="newOnItem.item"
 										placeholder="The Call"></textarea></td>
-								<td><textarea rows="1" cols="4" class="form-control"
+								<td><textarea rows="1" cols="4" class="form-control" style="max-width: 80px; min-width: 80px"
 										id="item-delay" ng-model="newOnItem.delay"
 										placeholder="millis"></textarea></td>
-								<td><textarea rows="1" cols="2" class="form-control"
+								<td><textarea rows="1" cols="2" class="form-control" style="max-width: 80px; min-width: 80px"
 										id="item-count" ng-model="newOnItem.count"
 										placeholder="number"></textarea></td>
-								<td><textarea rows="1" cols="16" class="form-control"
+								<!--<td><textarea rows="1" cols="16" class="form-control"
 										id="item-filterIPs" ng-model="newOnItem.filterIPs"
-										placeholder="restrict IPs"></textarea></td>
+										placeholder="restrict IPs"></textarea></td>-->
-								<td><select name="item-http-verb" id="item-http-verb"
+								<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
 									ng-model="newOnItem.httpVerb">
-										<option value="">---Please select---</option>
+										<option value="">---</option>
 										<!-- not selected / blank option -->
 										<option value="GET">GET</option>
 										<option value="PUT">PUT</option>
@@ -249,7 +257,7 @@
 								<td><textarea rows="1" cols="16" class="form-control"
 										id="item-httpHeaders" ng-model="newOnItem.httpHeaders"
 										placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
-								<td><select name="item-content-type" id="item-content-type"
+								<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
 									ng-model="newOnItem.contentType">
 										<option value="">---Please select---</option>
 										<!-- not selected / blank option -->
@@ -274,7 +282,14 @@
 						</table>
 						</scrollable-table></td>
 				</tr>
-				<tr>
+				<tr ng-hide="!showUrls">
+					<td><label>DimUrl</label></td>
+
+					<td><textarea class="form-control" id="device-dim-url" style="min-height: 250px; min-width: 1300px"
+						ng-model="dimUrl" placeholder="default"></textarea></td>
+				</tr>
+				
+				<tr ng-hide="showUrls">
 					<td><label>Dim Items</label></td>
 
 					<td><scrollable-table watch="dimDevices">
@@ -286,7 +301,7 @@
 									<th>Target Item</th>
 									<th>Delay</th>
 									<th>Count</th>
-									<th>Filter IPs</th>
+									<!--<th>Filter IPs</th>-->
 									<th>Http Verb</th>
 									<th>Http Body</th>
 									<th>Http Headers</th>
@@ -297,22 +312,22 @@
 							</thead>
 							<tr ng-repeat="dimItem in dimDevices">
 							<div class="col-xs-12 col-md-4">
-								<td><select
+								<td><select style="max-width: 150px"
 									ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
 									ng-model="dimItem.type"></select></td>
 								<td><textarea rows="1" cols="20" class="form-control"
-										id="item-target" ng-model="dimItem.item"
+										id="item-target" ng-model="dimItem.item" style="min-width: 600px"
 										placeholder="The Call"></textarea></td>
-								<td><textarea rows="1" cols="4" class="form-control"
+								<td><textarea rows="1" cols="4" class="form-control" style="max-width: 80px; min-width: 80px"
 										id="item-delay" ng-model="dimItem.delay" placeholder="millis"></textarea></td>
-								<td><textarea rows="1" cols="2" class="form-control"
+								<td><textarea rows="1" cols="2" class="form-control" style="max-width: 80px; min-width: 80px"
 										id="item-count" ng-model="dimItem.count" placeholder="number"></textarea></td>
-								<td><textarea rows="1" cols="16" class="form-control"
+								<!--<td><textarea rows="1" cols="16" class="form-control"
 										id="item-filterIPs" ng-model="dimItem.filterIPs"
-										placeholder="restrict IPs"></textarea></td>
+										placeholder="restrict IPs"></textarea></td>-->
-								<td><select name="item-http-verb" id="item-http-verb"
+								<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
 									ng-model="dimItem.httpVerb">
-										<option value="">---Please select---</option>
+										<option value="">---</option>
 										<!-- not selected / blank option -->
 										<option value="GET">GET</option>
 										<option value="PUT">PUT</option>
@@ -324,7 +339,7 @@
 								<td><textarea rows="1" cols="16" class="form-control"
 										id="item-httpHeaders" ng-model="dimItem.httpHeaders"
 										placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
-								<td><select name="item-content-type" id="item-content-type"
+								<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
 									ng-model="dimItem.contentType">
 										<option value="">---Please select---</option>
 										<!-- not selected / blank option -->
@@ -348,24 +363,24 @@
 							</tr>
 							<tr>
 							<div class="col-xs-12 col-md-4">
-								<td><select
+								<td><select style="max-width: 150px"
 									ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
 									ng-model="newDimItem.type"></select></td>
 								<td><textarea rows="1" cols="20" class="form-control"
-										id="item-target" ng-model="newDimItem.item"
+										id="item-target" ng-model="newDimItem.item" style="min-width: 600px"
 										placeholder="The Call"></textarea></td>
-								<td><textarea rows="1" cols="4" class="form-control"
+								<td><textarea rows="1" cols="4" class="form-control" style="max-width: 80px; min-width: 80px"
 										id="item-delay" ng-model="newDimItem.delay"
 										placeholder="millis"></textarea></td>
-								<td><textarea rows="1" cols="2" class="form-control"
+								<td><textarea rows="1" cols="2" class="form-control" style="max-width: 80px; min-width: 80px"
 										id="item-count" ng-model="newDimItem.count"
 										placeholder="number"></textarea></td>
-								<td><textarea rows="1" cols="16" class="form-control"
+								<!--<td><textarea rows="1" cols="16" class="form-control"
 										id="item-filterIPs" ng-model="newDimItem.filterIPs"
-										placeholder="restrict IPs"></textarea></td>
+										placeholder="restrict IPs"></textarea></td> -->
-								<td><select name="item-http-verb" id="item-http-verb"
+								<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
 									ng-model="newDimItem.httpVerb">
-										<option value="">---Please select---</option>
+										<option value="">---</option>
 										<!-- not selected / blank option -->
 										<option value="GET">GET</option>
 										<option value="PUT">PUT</option>
@@ -377,7 +392,7 @@
 								<td><textarea rows="1" cols="16" class="form-control"
 										id="item-httpHeaders" ng-model="newDimItem.httpHeaders"
 										placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
-								<td><select name="item-content-type" id="item-content-type"
+								<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
 									ng-model="newDimItem.contentType">
 										<option value="">---Please select---</option>
 										<!-- not selected / blank option -->
@@ -402,7 +417,14 @@
 						</table>
 						</scrollable-table></td>
 				</tr>
-				<tr>
+				<tr ng-hide="!showUrls">
+					<td><label>OffUrl</label></td>
+
+					<td><textarea class="form-control" id="device-off-url" style="min-height: 250px; min-width: 1300px"
+						ng-model="offUrl" placeholder="default"></textarea></td>
+				</tr>
+				
+				<tr ng-hide="showUrls">
 					<td><label>Off Items</label></td>
 
 					<td><scrollable-table watch="offDevices">
@@ -414,7 +436,7 @@
 									<th>Target Item</th>
 									<th>Delay</th>
 									<th>Count</th>
-									<th>Filter IPs</th>
+									<!--<th>Filter IPs</th>-->
 									<th>Http Verb</th>
 									<th>Http Body</th>
 									<th>Http Headers</th>
@@ -425,22 +447,22 @@
 							</thead>
 							<tr ng-repeat="offItem in offDevices">
 							<div class="col-xs-12 col-md-4">
-								<td><select
+								<td><select style="max-width: 150px"
 									ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
 									ng-model="offItem.type"></select></td>
 								<td><textarea rows="1" cols="20" class="form-control"
-										id="item-target" ng-model="offItem.item"
+										id="item-target" ng-model="offItem.item" style="min-width: 600px"
 										placeholder="The Call"></textarea></td>
-								<td><textarea rows="1" cols="4" class="form-control"
+								<td><textarea rows="1" cols="4" class="form-control" style="max-width: 80px; min-width: 80px"
 										id="item-delay" ng-model="offItem.delay" placeholder="millis"></textarea></td>
-								<td><textarea rows="1" cols="2" class="form-control"
+								<td><textarea rows="1" cols="2" class="form-control" style="max-width: 80px; min-width: 80px"
 										id="item-count" ng-model="offItem.count" placeholder="number"></textarea></td>
-								<td><textarea rows="1" cols="16" class="form-control"
+								<!--<td><textarea rows="1" cols="16" class="form-control"
 										id="item-filterIPs" ng-model="offItem.filterIPs"
-										placeholder="restrict IPs"></textarea></td>
+										placeholder="restrict IPs"></textarea></td>-->
-								<td><select name="item-http-verb" id="item-http-verb"
+								<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
 									ng-model="offItem.httpVerb">
-										<option value="">---Please select---</option>
+										<option value="">---</option>
 										<!-- not selected / blank option -->
 										<option value="GET">GET</option>
 										<option value="PUT">PUT</option>
@@ -452,7 +474,7 @@
 								<td><textarea rows="1" cols="16" class="form-control"
 										id="item-httpHeaders" ng-model="offItem.httpHeaders"
 										placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
-								<td><select name="item-content-type" id="item-content-type"
+								<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
 									ng-model="offItem.contentType">
 										<option value="">---Please select---</option>
 										<!-- not selected / blank option -->
@@ -476,24 +498,24 @@
 							</tr>
 							<tr>
 							<div class="col-xs-12 col-md-4">
-								<td><select
+								<td><select style="max-width: 150px"
 									ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
 									ng-model="newOffItem.type"></select></td>
 								<td><textarea rows="1" cols="20" class="form-control"
-										id="item-target" ng-model="newOffItem.item"
+										id="item-target" ng-model="newOffItem.item" style="min-width: 600px"
 										placeholder="The Call"></textarea></td>
-								<td><textarea rows="1" cols="4" class="form-control"
+								<td><textarea rows="1" cols="4" class="form-control" style="max-width: 80px; min-width: 80px"
 										id="item-delay" ng-model="newOffItem.delay"
 										placeholder="millis"></textarea></td>
-								<td><textarea rows="1" cols="2" class="form-control"
+								<td><textarea rows="1" cols="2" class="form-control" style="max-width: 80px; min-width: 80px"
 										id="item-count" ng-model="newOffItem.count"
 										placeholder="number"></textarea></td>
-								<td><textarea rows="1" cols="16" class="form-control"
+								<!--<td><textarea rows="1" cols="16" class="form-control"
 										id="item-filterIPs" ng-model="newOffItem.filterIPs"
-										placeholder="restrict IPs"></textarea></td>
+										placeholder="restrict IPs"></textarea></td>-->
-								<td><select name="item-http-verb" id="item-http-verb"
+								<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
 									ng-model="newOffItem.httpVerb">
-										<option value="">---Please select---</option>
+										<option value="">---</option>
 										<!-- not selected / blank option -->
 										<option value="GET">GET</option>
 										<option value="PUT">PUT</option>
@@ -505,7 +527,7 @@
 								<td><textarea rows="1" cols="16" class="form-control"
 										id="item-httpHeaders" ng-model="newOffItem.httpHeaders"
 										placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
-								<td><select name="item-content-type" id="item-content-type"
+								<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
 									ng-model="newOffItem.contentType">
 										<option value="">---Please select---</option>
 										<!-- not selected / blank option -->
@@ -530,6 +552,140 @@
 						</table>
 						</scrollable-table></td>
 				</tr>
+				<tr ng-hide="!showUrls">
+					<td><label>ColorUrl</label></td>
+
+					<td><textarea class="form-control" id="device-color-url" style="min-height: 250px; min-width: 1300px"
+						ng-model="colorUrl" placeholder="default"></textarea></td>
+				</tr>
+				<tr ng-hide="showUrls">
+					<td><label>Color Items</label></td>
+
+					<td><scrollable-table watch="colorDevices">
+						<table class="table table-bordered table-striped table-hover">
+							<thead>
+								<tr>
+							<div class="col-xs-12 col-md-4">
+									<th>Type</th>
+									<th>Target Item</th>
+									<th>Delay</th>
+									<th>Count</th>
+									<!--<th>Filter IPs</th>-->
+									<th>Http Verb</th>
+									<th>Http Body</th>
+									<th>Http Headers</th>
+									<th>Content Type</th>
+									<th>Manage</th>
+							</div>
+								</tr>
+							</thead>
+							<tr ng-repeat="colorItem in colorDevices">
+							<div class="col-xs-12 col-md-4">
+								<td><select style="max-width: 150px"
+									ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
+									ng-model="colorItem.type"></select></td>
+								<td><textarea rows="1" cols="20" class="form-control"
+										id="item-target" ng-model="colorItem.item" style="min-width: 600px"
+										placeholder="The Call"></textarea></td>
+								<td><textarea rows="1" cols="4" class="form-control" style="max-width: 80px; min-width: 80px"
+										id="item-delay" ng-model="colorItem.delay" placeholder="millis"></textarea></td>
+								<td><textarea rows="1" cols="2" class="form-control" style="max-width: 80px; min-width: 80px"
+										id="item-count" ng-model="colorItem.count" placeholder="number"></textarea></td>
+								<!--<td><textarea rows="1" cols="16" class="form-control"
+										id="item-filterIPs" ng-model="colorItem.filterIPs"
+										placeholder="restrict IPs"></textarea></td>-->
+								<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
+									ng-model="colorItem.httpVerb">
+										<option value="">---</option>
+										<!-- not selected / blank option -->
+										<option value="GET">GET</option>
+										<option value="PUT">PUT</option>
+										<option value="POST">POST</option>
+								</select></td>
+								<td><textarea rows="1" cols="16" class="form-control"
+										id="item-httpBody" ng-model="colorItem.httpBody"
+										placeholder="body args"></textarea></td>
+								<td><textarea rows="1" cols="16" class="form-control"
+										id="item-httpHeaders" ng-model="colorItem.httpHeaders"
+										placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
+								<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
+									ng-model="colorItem.contentType">
+										<option value="">---Please select---</option>
+										<!-- not selected / blank option -->
+										<option value="application/atom+xml">application/atom+xml</option>
+										<option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
+										<option value="application/json">application/json</option>
+										<option value="application/octet-stream">application/octet-stream</option>
+										<option value="application/svg+xml">application/svg+xml</option>
+										<option value="application/xhtml+xml">application/xhtml+xml</option>
+										<option value="application/xml">application/xml</option>
+										<option value="*">*</option>
+										<option value="multipart/form-data">multipart/form-data</option>
+										<option value="text/html">text/html</option>
+										<option value="text/plain">text/plain</option>
+										<option value="text/xml">text/xml</option>
+										<option value="*/*">*/*</option>
+								</select></td>
+								<td><button class="btn btn-danger" type="submit"
+										ng-click="removeItemColor(colorItem)">Del</button></td>
+							</div>
+							</tr>
+							<tr>
+							<div class="col-xs-12 col-md-4">
+								<td><select style="max-width: 150px"
+									ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
+									ng-model="newColorItem.type"></select></td>
+								<td><textarea rows="1" cols="20" class="form-control"
+										id="item-target" ng-model="newColorItem.item" style="min-width: 600px"
+										placeholder="The Call"></textarea></td>
+								<td><textarea rows="1" cols="4" class="form-control" style="max-width: 80px; min-width: 80px"
+										id="item-delay" ng-model="newColorItem.delay"
+										placeholder="millis"></textarea></td>
+								<td><textarea rows="1" cols="2" class="form-control" style="max-width: 80px; min-width: 80px"
+										id="item-count" ng-model="newColorItem.count"
+										placeholder="number"></textarea></td>
+								<!--<td><textarea rows="1" cols="16" class="form-control"
+										id="item-filterIPs" ng-model="newColorItem.filterIPs"
+										placeholder="restrict IPs"></textarea></td>-->
+								<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
+									ng-model="newColorItem.httpVerb">
+										<option value="">---</option>
+										<!-- not selected / blank option -->
+										<option value="GET">GET</option>
+										<option value="PUT">PUT</option>
+										<option value="POST">POST</option>
+								</select></td>
+								<td><textarea rows="1" cols="16" class="form-control"
+										id="item-httpBody" ng-model="newColorItem.httpBody"
+										placeholder="body args"></textarea></td>
+								<td><textarea rows="1" cols="16" class="form-control"
+										id="item-httpHeaders" ng-model="newColorItem.httpHeaders"
+										placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
+								<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
+									ng-model="newColorItem.contentType">
+										<option value="">---Please select---</option>
+										<!-- not selected / blank option -->
+										<option value="application/atom+xml">application/atom+xml</option>
+										<option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
+										<option value="application/json">application/json</option>
+										<option value="application/octet-stream">application/octet-stream</option>
+										<option value="application/svg+xml">application/svg+xml</option>
+										<option value="application/xhtml+xml">application/xhtml+xml</option>
+										<option value="application/xml">application/xml</option>
+										<option value="*">*</option>
+										<option value="multipart/form-data">multipart/form-data</option>
+										<option value="text/html">text/html</option>
+										<option value="text/plain">text/plain</option>
+										<option value="text/xml">text/xml</option>
+										<option value="*/*">*/*</option>
+								</select></td>
+								<td><button class="btn btn-success" type="submit"
+										ng-click="addItemColor(newColorItem)">Add</button></td>
+							</div>
+							</tr>
+						</table>
+						</scrollable-table></td>
+				</tr>
 				<tr>
 					<td><label>Legacy Fields <a ng-click="toggleButtons()"><span class={{imgButtonsUrl}} aria-hidden="true"></span></a></label>
 					</td>