html
Utilities for Tasks working with HTML.
This includes HTML templates and associated functions.
DIMPLE_HTML: str = '\n<html lang="en">\n <head>\n <title>dimple_thaum - UglyMol</title>\n <meta charset="utf-8" />\n <meta name="viewport" content="width=device-width, user-scalable=no" />\n <meta name="theme-color" content="#333333" />\n <style>\n body {\n font-family: sans-serif;\n }\n canvas {\n display: block;\n }\n #viewer {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n }\n #hud {\n font-size: 15px;\n color: #ddd;\n background-color: rgba(0, 0, 0, 0.6);\n text-align: center;\n position: absolute;\n top: 10px;\n left: 50%;\n transform: translateX(-50%);\n padding: 2px 8px;\n border-radius: 5px;\n z-index: 9;\n white-space: pre-line;\n }\n #hud u {\n padding: 0 8px;\n text-decoration: none;\n border: solid;\n border-width: 1px 0;\n }\n #hud s {\n padding: 0 8px;\n text-decoration: none;\n opacity: 0.5;\n }\n #help {\n display: none;\n font-size: 16px;\n color: #eee;\n background-color: rgba(0, 0, 0, 0.7);\n position: absolute;\n left: 20px;\n top: 50%;\n transform: translateY(-50%);\n cursor: default;\n padding: 5px;\n border-radius: 5px;\n z-index: 9;\n white-space: pre-line;\n }\n #inset {\n width: 200px;\n height: 200px;\n background-color: #888;\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 2;\n display: none;\n }\n a {\n color: #59c;\n }\n </style>\n <script src="uglymol.js"></script>\n <script src="wasm/mtz.js"></script>\n </head>\n <body style="background-color: black;">\n <div id="viewer">\n <canvas width="1561" height="1" style="width: 1561px; height: 1px;"></canvas>\n </div>\n <header id="hud" onmousedown="event.stopPropagation();" ondblclick="event.stopPropagation();">This is UglyMol not Coot. <a href="#" onclick="V.toggle_help(); return false;">H shows help.</a></header>\n <footer id="help" style="display: none;">\n <b>mouse:</b>\n Left = rotate Middle or Ctrl+Left = pan Right = zoom Ctrl+Right = clipping Ctrl+Shift+Right = roll Wheel = σ level Shift+Wheel = diff map σ\n <b>keyboard:</b>\n H = toggle help S = general style L = ligand style T = water style C = coloring B = bg color E = toggle fog Q = label font +/- = sigma level ]/[ = map radius D/F = clip width </> = move clip M/N = zoom U = unitcell box Y =\n hydrogens V = inactive models R = center view W = wireframe style I = spin K = rock Home/End = bond width \\ = bond caps P = nearest Cα Shift+P = permalink (Shift+)space = next res. Shift+F = full screen \n <a href="https://uglymol.github.io">uglymol</a> 0.7.0\n </footer>\n <div id="inset"></div>\n <script>\n V = new UM.Viewer({ viewer: "viewer", hud: "hud", help: "help" });\n V.load_pdb("final.pdb");\n GemmiMtz().then(function (Module) {\n UM.load_maps_from_mtz(Module, V, "final.mtz", ["FWT", "PHWT", "DELFWT", "PHDELWT"]);\n });\n </script>\n </body>\n</html>\n'
module-attribute
HTML Template for UglyMol display of dimple results.