Under the work of v0.9.7 documentation

mkdocs/acelements.md

@@ -345,7 +345,7 @@ ACSubmit ( *name* <small>\[</small> , *value* <small>\]</small> <small>\[</small
 
 ACText ( *name* <small>\[</small> , *value* <small>\]</small> <small>\[</small> , *style* <small>\]</small> )
 
-!!! hint "Declaration macro usage"
+!!! memo "Declaration macro usage"
     For example, *AutoConnectText* can be declared using macros.
     ```cpp
     AutoConnectText caption("caption", "hello, world", "color:blue;")

mkdocs/acjson.md

@@ -1,100 +1,22 @@
 ## Describe custom Web pages with JSON
 
-You can embed custom Web pages written in JSON into AutoConnect without declaring AutoConnectAux & AutoConnectElements in sketches. Custom Web page declaration in JSON can be included in the sketch in advance as the fixed string, or it can be stored in the external file such as SPIFFS for stream loading. You can also load and save AutoConnectElements objects individually.[^1]
-
-<div class="codehilite" style="overflow:auto;width:400px;height:400px;"><pre>
-{
-  "title": "MQTT Setting",
-  "uri": "/mqtt_setting",
-  "menu": true,
-  "element": [
-    {
-      "name": "header",
-      "type": "ACText",
-      "value": "<h2>MQTT broker settings</h2>",
-      "style": "text-align:center;color:#2f4f4f;"
-    },
-    {
-      "name": "caption",
-      "type": "ACText",
-      "value": "Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak",
-      "style": "font-family:serif;color:#4682b4;"
-    },
-    {
-      "name": "mqttserver",
-      "type": "ACInput",
-      "value": "",
-      "placeholder": "MQTT broker server",
-      "label": "Server"
-    },
-    {
-      "name": "channelid",
-      "type": "ACInput",
-      "value": "",
-      "label": "Channel ID"
-    },
-    {
-      "name": "userkey",
-      "type": "ACInput",
-      "value": "NRTFYGJ6TJFGX4RC",
-      "label": "User Key"
-    },
-    {
-      "name": "apikey",
-      "type": "ACInput",
-      "value": "",
-      "label": "API Key"
-    },
-    {
-      "name": "period",
-      "type": "ACRadio",
-      "label": "Update period",
-      "value": [
-        "30 sec.",
-        "60 sec.",
-        "180 sec."
-      ],
-      "arrange": "vertical",
-      "checked": 1
-    },
-    {
-      "name": "newline",
-      "type": "ACElement",
-      "value": "<hr>"
-    },
-    {
-      "name": "uniqueid",
-      "type": "ACCheckbox",
-      "value": "unique",
-      "label": "Use APID unique",
-      "checked": false
-    },
-    {
-      "name": "hostname",
-      "type": "ACInput",
-      "label": "ESP host name",
-      "value": ""
-    },
-    {
-      "name": "save",
-      "type": "ACSubmit",
-      "value": "Save&Start",
-      "uri": "/mqtt_save"
-    },
-    {
-      "name": "discard",
-      "type": "ACSubmit",
-      "value": "Discard",
-      "uri": "/"
-    }
-  ]
-}
-```
-</pre></div>
+You can embed custom Web pages written in [**JSON**](https://www.json.org/index.html) into AutoConnect without declaring AutoConnectAux &amp; AutoConnectElements in sketches. Custom Web page declaration in JSON can be included in the sketch in advance as the fixed string, or it can be stored in the external file such as SPIFFS for stream loading. You can also load and save AutoConnectElements objects individually.[^1]
 
 [^1]:Loading and saving AutoConnect parameters adopt this method.
 
+By providing the following JSON document to AutoConnect, you can include the custom Web page as the bellow:
+
+<div style="float:left;width:50%;height:470px;overflow:auto"><img src="./images/ac_json.png"></div>
+<img style="margin-left:30px;width:40%;height:470px;" src="./images/ac_mqtt_setting.png">
+
+!!! note "Order of elements on a custom Web page"
+    The order in which AutoConnectElements are arranged on the custom Web page is the order described in JSON.
+
 !!! caution "Need ArduinoJson v5"
     To process the AutoConnectAux &amp; AutoConnectElements written in the JSON is you need to install the [ArduinoJson version 5](https://arduinojson.org/v5/doc/installation/) library.
 
-The order in which AutoConnectElements are arranged on the custom Web page is the order described in JSON.
+## JSON objects &amp; elements for the custom Web page
+
+### JSON document structure for AutoConnectAux
+
+

mkdocs/css/paragraph.css

@@ -19,15 +19,22 @@
 }
 
 .md-typeset .codehilitetable .linenodiv {
-  background-color: #364549 !important;
+  background-color: #222 !important;
 }
 
 .md-typeset .codehilitetable .linenodiv pre {
-  background-color: #364549 !important;
+  background-color: #222 !important;
   color: #aaa;
   margin: 0;
 }
 
+.md-typeset .codehilitetable .md-clipboard:before {
+  color: rgba(240,240,240,.8);
+}
+.md-typeset .codehilitetable .md-clipboard:hover:before {
+  color: rgba(102,217,224,1);
+}
+
 .apidef {
   display: inline-block;
   width: 100px;