ayushsharma82 · ayushsharma82 · Feb 5, 2024 · Feb 5, 2024 · Feb 5, 2024 · Feb 5, 2024
diff --git a/docs/cards/air.md b/docs/cards/air.md
@@ -9,31 +9,15 @@ This is an exclusive feature of DASH Pro. Check it out [here](https://espdash.pr
 :::
 
 
-#### Preview:
 <img className="card-preview" src="/img/v4/air-card.png" width="280px" alt="Preview" />
 
 <br/>
-
-
 <br/>
 
 This card adds a distinctive air/wind icon, and just like generic card you can add a symbol which will be appended to your data. This card can be used to show something related to air pressure/wind speed etc.
 
-<br/>
-
-#### Type:
-`AIR_CARD`
-
-<br/>
-
-#### Valid Data Types:
-- `int`
-- `float`
-- `String`
+### Initializer
 
-<br/>
-
-#### Initializer:
 ```cpp
 /* 
   Air Card
@@ -42,9 +26,13 @@ This card adds a distinctive air/wind icon, and just like generic card you can a
 Card card1(&dashboard, AIR_CARD, "Power Consumption", "kWh");
 ```
 
-<br/>
+### Callback
 
-#### Updaters:
+:::note
+*Air card doesn't require any callback.*
+:::
+
+### Updater
 
 ```cpp
 card1.update(int value);
@@ -64,5 +52,28 @@ Or you can also update the symbol along with the value like this:
 card1.update(value, "kWh");
 ```
 
-<br/>
-<br/>
+### Reference
+
+This is a reference sketch showing positions for intializer and updater.
+
+<!-- A complete dummy sketch showing positions for intializer and updater -->
+```cpp
+
+...
+
+/* Air card initializer */
+Card air(&dashboard, AIR_CARD, "Wind Speed", "kmph");
+
+
+void setup() {
+  ...
+
+  /* Air card updater - can be used anywhere (apart from global scope) */
+  air.update(100);
+}
+
+void loop() {
+  ...
+}
+
+```
diff --git a/docs/cards/button.md b/docs/cards/button.md
@@ -4,30 +4,16 @@ sidebar_label: Toggle Button
 sidebar_position: 6
 ---
 
-#### Preview:
-
 <img className="card-preview" src="/img/v4/button-card-false.png" width="280px" alt="Button Card Preview" />
- &nbsp; 
 <img className="card-preview" src="/img/v4/button-card-true.png" width="280px" alt="Button Card Preview" />
 
 <br/>
 <br/>
 
 Button card adds a interactive toggle button to your dashboard. This provides you with a simple `1` or `0` input from your dashboard.
 
-<br/>
-
-#### Type:
-`BUTTON_CARD`
+### Initializer
 
-<br/>
-
-#### Valid Data Types:
-- `int`
-
-<br/>
-
-#### Initializer:
 ```cpp
 /* 
   Button Card
@@ -36,9 +22,8 @@ Button card adds a interactive toggle button to your dashboard. This provides yo
 Card card1(&dashboard, BUTTON_CARD, "Test Button");
 ```
 
-<br/>
+### Callback
 
-#### Callback:
 Button card requires a callback function which will be executed when we receive a input from our dashboard. In this example, we will use the `attachCallback` function and provide a lambda function with a boolean argument.
 
 In the case of button card, the value sent by your dashboard will be opposite of your current value. For Example: If your button is set to `0`, then clicking that button on dashboard will trigger this callback with `1`.
@@ -57,9 +42,7 @@ card1.attachCallback([&](int value){
 });
 ```
 
-<br/>
-
-#### Updaters:
+### Updater
 
 ```cpp
 card1.update(1);
@@ -68,5 +51,35 @@ card1.update(1);
 ```cpp
 card1.update(0);
 ```
-<br/>
-<br/>
+
+### Reference
+
+This is a reference sketch showing positions for intializer, callback and updater.
+
+<!-- A complete dummy sketch showing positions for intializer and updater -->
+```cpp
+
+...
+
+/* Button card initializer */
+Card button(&dashboard, BUTTON_CARD, "Test Button");
+
+
+void setup() {
+  ...
+
+  /* Button card callback */
+  button.attachCallback([&](int value){
+    Serial.println("Button Callback Triggered: "+String((value == 1)?"true":"false"));
+    /* Button card updater - you need to update the button with latest value upon firing of callback */
+    button.update(value);
+    /* Send update to dashboard */
+    dashboard.sendUpdates();
+  });
+}
+
+void loop() {
+  ...
+}
+
+```
diff --git a/docs/cards/dropdown.md b/docs/cards/dropdown.md
@@ -8,32 +8,16 @@ sidebar_position: 13
 This is an exclusive feature of DASH Pro. Check it out [here](https://espdash.pro).
 :::
 
-
-#### Preview:
 <img className="card-preview" src="/img/v4/dropdown-card.png" width="280px" alt="Preview" />
- &nbsp; 
 <img className="card-preview" src="/img/v4/dropdown-card-2.png" width="280px" alt="Preview" />
 
 <br/>
-
-
 <br/>
 
 This card adds a dropdown selectable list on your dashboard. You can pass "," comma separated list as it's secondary value with unlimited number of choices.
 
-<br/>
-
-#### Type:
-`DROPDOWN_CARD`
-
-<br/>
-
-#### Valid Data Types:
-- `String`
-
-<br/>
+### Initializer
 
-#### Initializer:
 ```cpp
 /* 
   Dropdown Card
@@ -42,9 +26,7 @@ This card adds a dropdown selectable list on your dashboard. You can pass "," co
 Card card1(&dashboard, DROPDOWN_CARD, "Test Dropdown", "Option1,Option2,Option3,Option4");
 ```
 
-<br/>
-
-#### Callback:
+### Callback
 
 The Dropdown Card requires a callback function that will be invoked when input is received from the dashboard. This function should utilize the `attachCallback` method and provide a lambda function with a `const char*` parameter.
 
@@ -62,9 +44,7 @@ card1.attachCallback([&](const char* value){
 });
 ```
 
-<br/>
-
-#### Updaters:
+### Updater
 
 This will change the selected value of our dropdown:
 
@@ -79,5 +59,34 @@ Or you can also update the choices along with the value like this:
 card1.update(const char* value, const char* choices);
 ```
 
-<br/>
-<br/>
+### Reference
+
+This is a reference sketch showing positions for intializer, callback and updater.
+
+<!-- A complete dummy sketch showing positions for intializer and updater -->
+```cpp
+
+...
+
+/* Dropdown card initializer */
+Card dropdown(&dashboard, DROPDOWN_CARD, "Test Dropdown", "Option1,Option2,Option3,Option4");
+
+
+void setup() {
+  ...
+
+  /* Dropdown card callback */
+  dropdown.attachCallback([&](const char* value){
+    Serial.println("Dropdown Callback Triggered: "+String(value));
+    /* Dropdown card updater - you need to update the button with latest value upon firing of callback */
+    dropdown.update(value);
+    /* Send update to dashboard */
+    dashboard.sendUpdates();
+  });
+}
+
+void loop() {
+  ...
+}
+
+```
diff --git a/docs/cards/energy.md b/docs/cards/energy.md
@@ -8,30 +8,15 @@ sidebar_position: 9
 This is an exclusive feature of DASH Pro. Check it out [here](https://espdash.pro).
 :::
 
-#### Preview:
-
 <img className="card-preview" src="/img/v4/energy-card.png" width="280px" alt="Energy Card Preview" />
 
 <br/>
 <br/>
 
 This card adds a distinctive energy/power icon, and just like generic card you can add a symbol which will be appended to your data. This card can be used to show something related to power consumption and usage etc.
 
-<br/>
-
-#### Type:
-`ENERGY_CARD`
-
-<br/>
-
-#### Valid Data Types:
-- `int`
-- `float`
-- `String`
+### Initializer
 
-<br/>
-
-#### Initializer:
 ```cpp
 /* 
   Energy Card
@@ -40,9 +25,13 @@ This card adds a distinctive energy/power icon, and just like generic card you c
 Card card1(&dashboard, ENERGY_CARD, "Power Consumption", "kWh");
 ```
 
-<br/>
+### Callback
 
-#### Updaters:
+:::note
+*Energy card doesn't require any callback.*
+:::
+
+### Updater
 
 ```cpp
 card1.update(int value);
@@ -62,6 +51,28 @@ Or you can also update the symbol along with the value like this:
 card1.update(value, "kWh");
 ```
 
-<br/>
+### Reference
 
-<br/>
+This is a reference sketch showing positions for intializer and updater.
+
+<!-- A complete dummy sketch showing positions for intializer and updater -->
+```cpp
+
+...
+
+/* Energy card initializer */
+Card energy(&dashboard, ENERGY_CARD, "Power Consumption", "kWh");
+
+
+void setup() {
+  ...
+
+  /* Energy card updater - can be used anywhere (apart from global scope) */
+  energy.update(100);
+}
+
+void loop() {
+  ...
+}
+
+```