dist/JSME_additional_data.html at main · reese-lee1/dist · 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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<html>

<head>
    <title>Structure modified and atom mark demo</title>
    <script type="text/javascript" language="javascript" src="jsme/jsme.nocache.js"></script>
    <style>
        em {
            background-color: rgb(102, 255, 255);
        }


    </style>

    <script>

        //this function will be called after the JavaScriptApplet code has been loaded.
        function jsmeOnLoad() {
            var color = "#ad7a76";
            jsmeApplet = new JSApplet.JSME("jsme_container", "380px", "340px", {
                "options": "oldlook,marker,pseudoMark,markAtomOnly",
                "atombgsize": "0.5",
                "bondbgsize": "0.5",
                "guicolor": "#DDEEEE",
                "markerIconColor": color,
            });

            jsmeApplet.setCallBack("AfterStructureModified", showEvent);
            jsmeApplet.setCallBack("AfterPaste", showEvent);

            jsmeApplet.setBackGroundColorPalette([color]);

            document.getElementById("log").value = "";
        }

        function showEvent(event) {

            var log = document.getElementById("log");
            log.value = event.action + " at: " + event.atomE + " b: " + event.bondE + " m: " + event.molecule + ' n atoms: ' + event.src.totalNumberOfAtoms() + " origin: " + event.origin + "\n" + log.value;
        }

        function insertAD(at) {
            jsmeApplet.setAtomAdditionalData(at, {msg: 'You can save any data you want in the atom additional data field' +  at, 'at': at}, true, true);
            jsmeApplet.setAtomBackgroundColors(0, at + ',1');
        }

        function getAD(at) {
            var log = document.getElementById("log");

            log.value += '\n' + JSON.stringify(jsmeApplet.getAtomAdditionalData(at)) + '\n';
        }


        function insertBD(b) {
            jsmeApplet.setBondAdditionalData(b, {msg: 'Lorem Ipsum', msg2: 'I am a bond', 'bond_index': b}, true, true);
            jsmeApplet.setBondBackgroundColors(0, b + ',2');
        }

        function getBD(b) {
            var log = document.getElementById("log");

            log.value += '\n' + JSON.stringify(jsmeApplet.getBondAdditionalData(b))+ '\n';
        }


        function readMolFile() {
            var mol = "heade 123458r\n" +
                "JME\n" +
                "\n" +
                "  4  3  0  0  0  0  0  0  0  0999 V2000\n" +
                "    0.0000    2.1000    0.0000 C   1  0  0  0  0  0  0  0  0  0  0  0\n" +
                "    1.2124    1.3999    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n" +
                "    2.4248    2.1000    0.0000 C   1  0  0  0  0  0  0  0  0  0  0  0\n" +
                "    1.2124    0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n" +
                "  1  2  1  0  0  0  0\n" +
                "  2  3  1  0  0  0  0\n" +
                "  2  4  1  0  0  0  0\n" +
                "M  ISO  1   1  13\n" +
                "M  ISO  1   3  13\n" +
                "M  END\n"

            jsmeApplet.readMolFile(mol);

        }
    </script>
</head>

<body>
<H1>Adding additional arbitrary data to atoms and bonds</H1>
<p>
    Arbitrary data (e.g. JSON object) can be saved into the atom and bond data structures.
    Methods are g(s)etAtomAdditionalData, g(s)etBondAdditionalData. This page shows also the use of the pseudoMark
    option, custom marker color circle (markerIconColor), custom bond and atom background colors (setAtomBackgroundColors, setBondBackgroundColors),
    custom size for atom and bond background coloring.

</p>
<div id="jsme_container"></div>
<button type="button" id="clear_but" onclick='document.getElementById("log").value=""'>Clear log</button>
<BR>
After structure changed event:
<BR>
<textarea id="log" rows="15" cols="80"> </textarea>
<BR>
<table>
    <tr>
        <td style="font-weight:bold;" colspan="4">Import predefined chemical structure to applet:</td>
    </tr>
    <tr>
        <td id="readReactionButton">
            <button type="button" onclick='readMolFile();'>Read MOL</button>

        </td>
        <td>
            <button type="button" onclick='insertAD(1);'>Insert AD in atom 1</button>
        </td>

        <td>
            <button type="button" onclick='getAD(1);'>Get AD from atom 1</button>
        </td>

        <td>
            <button type="button" onclick='insertAD(2);'>Insert AD in atom 2</button>
        </td>

        <td>
            <button type="button" onclick='getAD(2);'>Get AD from atom 2</button>
        </td>

    </tr>
    <td>
        <button type="button" onclick='insertBD(1);'>Insert BD in bond 1</button>
    </td>

    <td>
        <button type="button" onclick='getBD(1);'>Get BD from bond 1</button>
    </td>


    <tr>

    </tr>
</table>

<BR>

</body>
</html>