Migrating Matlab's molecule viewer to UIFigure

5 次查看(过去 30 天)
Hi!
Matlab's molecule viewer uses Jmol (an open-source Java viewer for chemical structures in 3D) inside the Matlab-figure enviroment. I am now trying to get the JavaScript version of Jmol (JSmol) to work inside a Matlab UIFigure, which - as far as I understand - uses HTML/CSS/Javascript to essentially build a "Web app". I have been reading on Yair Altman's blog undocumentedmatlab to get some clues on how to interact with the UIFigure's document-object-model(DOM). Unfortunately I have not been able to embed the relevent JSmol code to the DOM. I am using mlapptools to manipulate the DOM.
I am thankful for any pointers that might help in trying to get this to work.
Here is my demo code where I am trying to inject the relevent script tags (scriptText) to the head tag.
% Create the figure
fig = uifigure('Name', 'JSmol test');
panel = uipanel(fig);
totalWidth = 450; %px
totalHeight = 350; %px
% set the uipanel's Position property to the required dimensions
panel.Position(3) = totalWidth; % WIDTH
panel.Position(4) = totalHeight; % HEIGHT
scriptText = [...
'''<script type="text/javascript" src="./jsmol/JSmol.min.js"></script>\n', ...
' <script type="text/javascript" src="./jsmol/jquery/jquery.js"></script>\n', ...
'\n',...
'Jmol._isAsync = false;\n', ...
'var jmolApplet0;\n', ...
'var s = document.location.search;\n', ...
'Jmol._debugCode = (s.indexOf("debugcode") >= 0);\n', ...
'jmol_isReady = function(applet) {\n', ...
' document.title = (applet._id + " - Jmol " + Jmol.___JmolVersion)\n', ...
' Jmol._getElement(applet, "appletdiv").style.border="1px solid blue"\n', ...
'}\n', ...
'\n',...
'var Info = {\n', ...
' width: 420,\n', ...
' height: 300,\n', ...
' debug: false,\n', ...
' color: "0xFFFFFF",\n', ...
' addSelectionOptions: true,\n', ...
' use: "HTML5", \n', ...
' j2sPath: "./jsmol/j2s", \n', ...
' jarPath: "./java",\n', ...
' jarFile: "JmolAppletSigned.jar",\n', ...
' isSigned: true,\n', ...
' script: "set zoomlarge false;set antialiasDisplay;load data/1STM-chainA.pdb",\n', ...
' serverURL: "https://chemapps.stolaf.edu/jmol/jsmol/php/jsmol.php",\n', ...
' readyFunction: jmol_isReady,\n', ...
' disableJ2SLoadMonitor: true,\n', ...
' allowJavaScript: true \n', ...
'}\n', ...
'\n',...
'$(document).ready(function() {\n', ...
' $("#appdiv").html(Jmol.getAppletHtml("jmolApplet0", Info))\n', ...
'})\n', ...
' var lastPrompt=0;', ...
'</script>''', ...
];
% get the uipanel data-tag attr.
[webWindow, panelID] = mlapptools.getWebElements(panel);
% Make a nodeID string to make the JS call more generic
nodeID = sprintf('''[%s="%s"]''', panelID.ID_attr, panelID.ID_val);
% JS that creates a div called appdiv where JSmol will be put
js = sprintf( ...
[ ...
'var d = document.createElement("div");', ...
'd.setAttribute("id","appdiv");', ...
'document.querySelectorAll(%s)[0]',...
'.replaceChild(d,document.querySelectorAll(%s)[0].firstChild);' ...
], ...
nodeID, nodeID ...
);
% execute the JS
webWindow.executeJS(js);
% get the webWindow object
webWindow = mlapptools.getWebWindow(fig);
% inject the script tags
webWindow.executeJS(['document.head.innerHTML += ',scriptText]);

回答(0 个)

类别

Help CenterFile Exchange 中查找有关 App Building 的更多信息

产品


版本

R2019a

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!

Translated by