Added documentation for qr code component (#1748)

Co-authored-by: Oxan van Leeuwen <oxan@oxanvanleeuwen.nl>

components/display/index.rst

@@ -482,6 +482,42 @@ And then later in code:
     - Axis labels are currently not possible without manually placing them.
     - The grid and border color is set with it.graph(), while the traces are defined separately.
 
+QR Codes
+********
+
+Use this component to generate a QR-code containing a string on the device, which can then be drawn on compatible displays.
+
+.. code-block:: yaml
+
+    qr_code:
+      - id: homepage_qr
+        value: esphome.io
+
+Configuration variables:
+
+- **id** (**Required**, :ref:`config-id`): The ID with which you will be able to reference the QR-code later
+  in your display code.
+- **value** (**Required**, string): The string which you want to encode in the QR-code.
+- **ecc** (*Optional*, string): The error correction code level you want to use. Defaults to ``LOW``. You can use one of the following values:
+
+  - ``LOW`` - The QR Code can tolerate about 7% erroneous codewords
+  - ``MEDIUM`` - The QR Code can tolerate about 15% erroneous codewords
+  - ``QUARTILE`` - The QR Code can tolerate about 25% erroneous codewords
+  - ``HIGH`` - The QR Code can tolerate about 30% erroneous codewords
+
+To draw the QR-code, call the ``it.qr_code`` function from your render lambda:
+
+.. code-block:: yaml
+
+    display:
+      - platform: ...
+        # ...
+        pages:
+          - id: page1
+            lambda: |-
+              // Draw the QR-code at position [x=50,y=0] with white color and a 2x scale
+              it.qr_code(50, 0, id(homepage_qr), Color(255,255,255), 2);
+
 Images
 ******