Robot Controller Dashboard - Copy this Html, Bootstrap Component to your project

Write a web page using bento grid to display robot controller information, here is the order and description: Connect area: contains IP and connect button, when pressed will send IP and connection request to the device. If not connected, other areas are hidden and cannot interact => If connected, display Activate area Activate area: contains 1 activate button, after connecting the user presses activate to start controlling, if not activated, other areas are hidden Status area: Values ​​and displays in this box, boolean values ​​such as Inpos (1 = #3DCD58), Protective Stop (1 = #B10043), Drag Status (1 = #3DCD58), On Soft Limit (1 = #B10043), Socket Connect (1 = #3DCD58), Emergency Stop (1 = #B10043), when the value = 0 will be displayed as a label, the default label color will follow the general theme. When the value changes, there will be a color to display according to the description With text values, Error Code, Rapid Rate, User ID and Tool ID will be displayed in the following layout: Error Code Rapid Rate <value> <value> User ID Tool ID <value> <value> All values ​​will be displayed in 2 columns in the area TCP display and control area: contains 6 information: X <value> mm Rx <value>° Y <value> mm Ry <value>° Z <value> mm Rz <value>° beside each area, there is a + control button to increase or decrease Joint display and control area contains 6 information: J1 <value> ° J2 <value> ° J3 <value> ° J4 <value> ° J5 <value> ° J6 <value> ° beside each area, there is a + control button to increase or decrease Feedback display area