qr-code-styling/inspect-paths.html at master · linkbreakers-com/qr-code-styling · GitHub

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
<!DOCTYPE html>
<html>
<head><title>Inspect Paths</title></head>
<body style="padding: 40px; font-family: monospace; font-size: 12px;">
    <h1>Path Inspector</h1>
    <div id="qr"></div>
    <div id="output" style="margin-top: 20px; background: #f0f0f0; padding: 15px;"></div>

    <script src="./lib/qr-code-styling.js"></script>
    <script>
        const output = document.getElementById('output');
        const log = (msg) => {
            console.log(msg);
            output.innerHTML += msg + '<br>';
        };

        const qr = new QRCodeStyling({
            width: 400,
            height: 400,
            data: "TEST",
            type: "svg",
            cornerSquareOptions: {
                type: "leaf",
                color: "#FF0000"
            },
            cornerDotOptions: {
                type: "teardrop",
                color: "#0000FF"
            },
            dotsOptions: {
                color: "#000000",
                type: "square"
            }
        });

        qr.append(document.getElementById("qr"));

        setTimeout(() => {
            const svg = document.querySelector('#qr svg');
            if (!svg) {
                log('No SVG found');
                return;
            }

            const paths = svg.querySelectorAll('path');
            log(`Total paths: ${paths.length}\n`);

            // Find red paths (corner squares) and blue paths (corner dots)
            log('=== RED PATHS (Corner Squares - should be leaf) ===');
            let redCount = 0;
            paths.forEach((path, i) => {
                const fill = path.getAttribute('fill');
                const stroke = path.getAttribute('stroke');
                const color = fill || stroke;

                if (color && (color.includes('FF0000') || color === 'red' || color === '#FF0000')) {
                    redCount++;
                    const d = path.getAttribute('d');
                    log(`Red path ${redCount}: ${d ? d.substring(0, 150) : 'no d'}...`);
                }
            });

            log(`\n=== BLUE PATHS (Corner Dots - should be teardrop) ===`);
            let blueCount = 0;
            paths.forEach((path, i) => {
                const fill = path.getAttribute('fill');
                const stroke = path.getAttribute('stroke');
                const color = fill || stroke;

                if (color && (color.includes('0000FF') || color === 'blue' || color === '#0000FF')) {
                    blueCount++;
                    const d = path.getAttribute('d');
                    log(`Blue path ${blueCount}: ${d ? d.substring(0, 150) : 'no d'}...`);
                }
            });

            log(`\nTotal red (corner square): ${redCount}`);
            log(`Total blue (corner dot): ${blueCount}`);
        }, 500);
    </script>
</body>
</html>