MakingQRCodes.md

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
# Making QR Codes with minimal dependencies

You can use a JavaScript library like [qrcode.js](https://davidshimjs.github.io/qrcodejs/) to generate a text QR code given a string of text. Here is an example function that uses this library:

```javascript
function generateTextQRCode(text) {
  // Create a new QR code instance
  var qr = new QRCode(document.createElement("div"), {
    text: text,
    width: 128,
    height: 128,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H,
  });

  // Get the QR code's SVG element
  var svg = qr._htOption.renderer.getSvg();

  // Get the SVG's innerHTML as a string
  var svgString = new XMLSerializer().serializeToString(svg);

  // Return the SVG string
  return svgString;
}
```

Here's how you can use this function to generate a text QR code for a given string:

```javascript
var text = "Hello, World!";
var svgString = generateTextQRCode(text);
console.log(svgString);

```

Ron says:

> Show me an HTML page that queries two REST endpoints - "https://server.sw.gy/vendors/{vendor_id}" and "https://server.sw.gy/vendors{vendor_id}/reps/{vendor_rep_id}" using "vendor_id" and "vendor_rep_id" provided as URL query params. When the results are returned, use the "vendor-rep-id" attribute of the second REST call's response (a JSON object) and the constant CONFERENCE_ID ("83A6728F-8DBE-4373-8B6F-3F0369C11620") to create a QR code. The QR code should contain text of the JSON object `{"vendor-rep-id":vendor_rep_id, "conference-id":CONFERENCE_ID}`, substituting the associated vendor_rep_id and CONFERENCE_ID values. Capture and retain the "vendor-image-url" attribute of the first REST call's response. 

Sure, here's an example HTML page that queries the two REST endpoints, generates a QR code using the response data, and displays the vendor image:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Vendor and Rep Details</title>
  <script src="https://cdn.jsdelivr.net/qrcodejs/1.0.0/qrcode.min.js"></script>
  <script>
    function getVendorDetails() {
      const urlParams = new URLSearchParams(window.location.search);
      const vendorId = urlParams.get('vendor_id');
      const vendorRepId = urlParams.get('vendor_rep_id');

      fetch(`https://server.sw.gy/vendors/${vendorId}`)
        .then(response => response.json())
        .then(data => {
          document.getElementById("vendor-image").src = data['vendor-image-url'];
        });

      fetch(`https://server.sw.gy/vendors/${vendorId}/reps/${vendorRepId}`)
        .then(response => response.json())
        .then(data => {
          const qrData = {
            "vendor-rep-id": data["vendor-rep-id"],
            "conference-id": "83A6728F-8DBE-4373-8B6F-3F0369C11620"
          };
          const qrCode = new QRCode(document.getElementById("qr-code"), {
            text: JSON.stringify(qrData),
            width: 128,
            height: 128,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
          });
        });
    }
  </script>
</head>
<body onload="getVendorDetails()">
  <div>
    <img id="vendor-image" src="" />
  </div>
  <div>
    <div id="qr-code"></div>
  </div>
</body>
</html>
```

To use this page, you would pass in the `vendor_id` and `vendor_rep_id` as URL query parameters, like this:

			https://yourwebsite.com/vendor-details.html?vendor_id=123&vendor_rep_id=456


When the page loads, it will use the provided `vendor_id` and `vendor_rep_id` to fetch data from the two REST endpoints. Once the responses are received, the vendor image will be displayed and a QR code will be generated using the `vendor_rep_id` and `CONFERENCE_ID` constant. The QR code will be displayed on the page.