Hi all, I have a programmable custom controller that has network connection and a web interface which mimics the push button actions of the controller. I'd like to create a better GUI as the one provided is pretty basic but I don't have much understanding on how to do this. Can anyone point me in the direction of resources or if there is a programmer out there that can help it would be appreciated. I can do HTML fairly easily and CSS to a certain point but managing JSON is beyond me!
Commands such as this is what is returned when entering the url http://xxx.xxx.xxx.xxx/json/base_status and that should feed into the web interface GUI to set the layout rules.
{
"base_status": {
"status_id": 1,
"unit_name": "",
"buttons": [{
"id": 1,
"mode": "low",
"rgb": [255, 255, 255],
"css": "rgb(255, 255, 255)",
"label": ""
}, {
"id": 2,
"mode": "low",
"rgb": [255, 255, 255],
"css": "rgb(255, 255, 255)",
"label": ""
}, {
"id": 3,
"mode": "low",
"rgb": [255, 255, 255],
"css": "rgb(255, 255, 255)",
"label": ""
}, {
"id": 4,
"mode": "low",
"rgb": [255, 255, 255],
"css": "rgb(255, 255, 255)",
"label": ""
}, {
"id": 5,
"mode": "low",
"rgb": [255, 255, 255],
"css": "rgb(255, 255, 255)",
"label": ""
}, {
"id": 6,
"mode": "low",
"rgb": [255, 255, 255],
"css": "rgb(255, 255, 255)",
"label": ""
}, {
"id": 7,
"mode": "low",
"rgb": [255, 255, 255],
"css": "rgb(255, 255, 255)",
"label": ""
}, {
"id": 8,
"mode": "low",
"rgb": [255, 255, 255],
"css": "rgb(255, 255, 255)",
"label": ""
}, {
"id": 9,
"mode": "low",
"rgb": [255, 255, 255],
"css": "rgb(255, 255, 255)",
"label": ""
}, {
"id": 10,
"mode": "low",
"rgb": [255, 255, 255],
"css": "rgb(255, 255, 255)",
"label": ""
}]
}
}
Commands such as this is what is returned when entering the url http://xxx.xxx.xxx.xxx/json/base_status and that should feed into the web interface GUI to set the layout rules.
{
"base_status": {
"status_id": 1,
"unit_name": "",
"buttons": [{
"id": 1,
"mode": "low",
"rgb": [255, 255, 255],
"css": "rgb(255, 255, 255)",
"label": ""
}, {
"id": 2,
"mode": "low",
"rgb": [255, 255, 255],
"css": "rgb(255, 255, 255)",
"label": ""
}, {
"id": 3,
"mode": "low",
"rgb": [255, 255, 255],
"css": "rgb(255, 255, 255)",
"label": ""
}, {
"id": 4,
"mode": "low",
"rgb": [255, 255, 255],
"css": "rgb(255, 255, 255)",
"label": ""
}, {
"id": 5,
"mode": "low",
"rgb": [255, 255, 255],
"css": "rgb(255, 255, 255)",
"label": ""
}, {
"id": 6,
"mode": "low",
"rgb": [255, 255, 255],
"css": "rgb(255, 255, 255)",
"label": ""
}, {
"id": 7,
"mode": "low",
"rgb": [255, 255, 255],
"css": "rgb(255, 255, 255)",
"label": ""
}, {
"id": 8,
"mode": "low",
"rgb": [255, 255, 255],
"css": "rgb(255, 255, 255)",
"label": ""
}, {
"id": 9,
"mode": "low",
"rgb": [255, 255, 255],
"css": "rgb(255, 255, 255)",
"label": ""
}, {
"id": 10,
"mode": "low",
"rgb": [255, 255, 255],
"css": "rgb(255, 255, 255)",
"label": ""
}]
}
}
Comment