ptosco.github.io/test_phantomjs.html at main · ptosco/ptosco.github.io · 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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>StructureRenderer PhantomJS example - generate SVG using bundle</title>
        <style>
            table {
                font-family: Arial, Helvetica, sans-serif;
            }
        </style>
    </head>
    <body>
        <div>
            <table style="width: 100%;">
                <tbody>
                    <tr>
                        <td style="margin: 5px 10px;">
                            <div id="rdk-str-rnr-mol-1"></div>
                        </td>
                        <td style="margin: 5px 10px;">
                            <div><b>SMILES:</b></div>
                            <div style="word-break: break-all" id="smiles-string-1">&nbsp;</div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script>
            var unpkgRendererBundle = 'https://unpkg.com/rdkit-structure-renderer/dist/rdkit-structure-renderer-bundle.js';
            var unpkgMinimalLibPath = 'https://unpkg.com/rdkit-structure-renderer/public';
            var basename = 'RDKit_minimal_legacy';
            var onRendererLoaded = function() {
                var defaultDrawOpts = {
                    bondLineWidth: 0.7,
                    multipleBondOffset: 0.25,
                    baseFontSize: 1.0,
                    minFontSize: -1,
                    maxFontSize: -1,
                    annotationFontScale: 0.7,
                    highlightBondWidthMultiplier: 20,
                    dummyIsotopeLabels: false,
                    atomColourPalette: {
                        0: [0.1, 0.1, 0.1],
                        1: [0.0, 0.0, 0.0],
                        6: [0.0, 0.0, 0.0],
                        7: [0.0, 0.0, 1.0],
                        8: [1.0, 0.0, 0.0],
                        9: [0.0, 0.498, 0.0],
                        15: [0.498, 0.0, 0.498],
                        16: [0.498, 0.247, 0.0],
                        17: [0.0, 0.498, 0.0],
                        35: [0.0, 0.498, 0.0],
                        53: [0.247, 0.0, 0.498],
                    },
                    backgroundColour: [1, 1, 1, 1],
                };
                var renderer = window.RDKitStructureRenderer;
                if (typeof renderer === 'object' && typeof renderer.init === 'function') {
                    if (typeof renderer.getDefaultDrawOpts === 'function') {
                        renderer.getDefaultDrawOpts = function() { return defaultDrawOpts; };
                    }
                    // The following requests not to spawn Web Workers (unsupported on legacy browsers)
                    if (typeof renderer.getMaxConcurrency === 'function') {
                        renderer.getMaxConcurrency = function() { return 0; };
                    }
                    if (typeof renderer.getIsLegacyBrowser === 'function') {
                        renderer.getIsLegacyBrowser = function() { return true; };
                    }
                    var rendererPromise = renderer.init(unpkgMinimalLibPath, basename);
                }
            };
            var renderer = function() {
                if (!document.head.querySelector('script[id=rendererLoad]')) {
                    var rendererBundle = document.createElement('script');
                    rendererBundle.id = "rendererLoad";
                    rendererBundle.src = unpkgRendererBundle;
                    rendererBundle.onload = onRendererLoaded;
                    if (typeof document.head === 'object') {
                        document.head.appendChild(rendererBundle);
                    }
                }
                return {
                    then: function(callback) {
                        if (typeof this.callback === 'undefined') {
                            this.callback = callback;
                        }
                        if (window.RDKitStructureRenderer) {
                            if (this.intervalId) {
                                clearInterval(this.intervalId);
                                this.intervalId = null;
                            }
                            this.callback(window.RDKitStructureRenderer);
                        } else if (typeof this.intervalId === 'undefined' && typeof this.then.bind === 'function') {
                            this.intervalId = setInterval(this.then.bind(this), 1000);
                        }
                    }
                };
            };
            var renderSmiles = function(uniqueId, smiles, width, height) {
                var divId = 'rdk-str-rnr-mol-' + uniqueId;
                var smilesStructureDiv = document.getElementById(divId);
                if (smilesStructureDiv) {
                    smilesStructureDiv.setAttribute('class', 'rdk-str-rnr-mol-container');
                    smilesStructureDiv.setAttribute('style', 'width: ' + width + 'px; height: ' + height + 'px;');
                    smilesStructureDiv.setAttribute('data-mol', smiles);
                    smilesStructureDiv.setAttribute('data-use-svg', '');
                    renderer().then(function(r) {
                        r.updateMolDrawDivIfNeeded(uniqueId);
                    });
                }
                var smilesStringId = 'smiles-string-' + uniqueId;
                var smilesStringDiv = document.getElementById(smilesStringId);
                if (smilesStringDiv) {
                    smilesStringDiv.innerHTML = smiles;
                }
            }

            var uniqueId = '1';
            var smiles = 'O=C(O)[C@@H]2N3C(=O)[C@@H](NC(=O)[C@@H](c1ccc(O)cc1)N)[C@H]3SC2(C)C';
            var width = 300;
            var height = 200;
            renderSmiles(uniqueId, smiles, width, height);
        </script>
    </body>
</html>