diff --git a/panels/config/zwave/zwave-usercodes.html b/panels/config/zwave/zwave-usercodes.html
index cef1aa6a7c..dde3c442fe 100644
--- a/panels/config/zwave/zwave-usercodes.html
+++ b/panels/config/zwave/zwave-usercodes.html
@@ -46,11 +46,13 @@
             <div class='card-actions'>
               <paper-input
                 label='User code'
-                type=number
-                value='{{selectedUserCodeValue}}'
+                type='text'
+                allowed-pattern='[0-9,a-f,x,\\]'
                 maxlength='{{userCodeMaxLen}}'
-                min='0'>
+                minlength='16'
+                value='{{selectedUserCodeValue}}'>
               </paper-input>
+              <pre>Ascii: &#91;[[computedCodeOutput]]&#93;</pre>
             </div>
             <div class='card-actions'>
               <ha-call-service-button
@@ -106,8 +108,12 @@ class ZwaveUsercodes extends Polymer.Element {
       },
 
       selectedUserCodeValue: {
-        type: Number,
-        value: -1
+        type: String,
+      },
+
+      computedCodeOutput: {
+        type: String,
+        value: ''
       },
     };
   }
@@ -137,10 +143,10 @@ class ZwaveUsercodes extends Polymer.Element {
 
   selectedUserCodeChanged(selectedUserCode) {
     if (this.selectedUserCode === -1 || selectedUserCode === -1) return;
-    var value = (parseInt((this.userCodes[selectedUserCode].value.code).trim()));
-    this.userCodeMaxLen = (this.userCodes[selectedUserCode].value.length);
-    if (isNaN(value)) this.selectedUserCodeValue = '';
-    else this.selectedUserCodeValue = value;
+    var value = this.userCodes[selectedUserCode].value.code;
+    this.userCodeMaxLen = (this.userCodes[selectedUserCode].value.length * 4);
+    this.selectedUserCodeValue = this.a2hex(value);
+    this.computedCodeOutput = this.hex2a(this.selectedUserCodeValue);
   }
 
   computeUserCodeServiceData(selectedUserCodeValue, type) {
@@ -148,7 +154,8 @@ class ZwaveUsercodes extends Polymer.Element {
     var serviceData = null;
     var valueData = null;
     if (type === 'Add') {
-      valueData = selectedUserCodeValue;
+      valueData = this.hex2a(selectedUserCodeValue);
+      this.computedCodeOutput = valueData;
       serviceData = {
         node_id: this.nodes[this.selectedNode].attributes.node_id,
         code_slot: this.selectedUserCode,
@@ -178,6 +185,31 @@ class ZwaveUsercodes extends Polymer.Element {
       this.selectedUserCodeChanged(this.selectedUserCode);
     }.bind(this));
   }
+
+  a2hex(str) {
+    var arr = [];
+    var output = '';
+    for (var i = 0, l = str.length; i < l; i++) {
+      var hex = Number(str.charCodeAt(i)).toString(16);
+      if (hex === '0') {
+        output = '00';
+      } else {
+        output = hex;
+      }
+      arr.push('\\x' + output);
+    }
+    return arr.join('');
+  }
+
+  hex2a(hexx) {
+    var hex = hexx.toString();
+    var hexMod = hex.replace(/\\x/g, '');
+    var str = '';
+    for (var i = 0; i < hexMod.length; i += 2) {
+      str += String.fromCharCode(parseInt(hexMod.substr(i, 2), 16));
+    }
+    return str;
+  }
 }
 
 customElements.define(ZwaveUsercodes.is, ZwaveUsercodes);