sjdv1982/test-smiles.html

## test-smiles.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="kekule/release/kekule.js?modules=chemWidget,openbabel,indigo"></script>


<script>
Kekule.Indigo.enable();


function load_kekule() {
  chemViewer = new Kekule.ChemWidget.Viewer(document.getElementById('kekule'));
}

function display_kekule(smi) {
  var mol = Kekule.IO.loadFormatData(smi, "smi");
  chemViewer.setChemObj(mol);
}


function display() {
  var smi = document.getElementById("smiles").value;
  console.log(smi);
  display_kekule(smi);
}

$(window).on('load', function(){
      console.log("OK");
      load_kekule();
      display();
      $('textarea').on('change', display);
});

</script
</head>
<body>

<h2> SMILES </h2>
<textarea rows="10" cols="50" id="smiles"  style="font-size: 12pt">
CCN(c1cc(C)ccc1C)S(=O)(=O)c1cc(C(N)=O)n(C)c1
</textarea>

<div id="div2">
<h2> Kekule </h2>
<div id="kekule" style="width:100%;height:650px"
		 data-widget="Kekule.ChemWidget.Viewer2D" data-enable-toolbar="true" data-auto-size="true" data-padding="20"
		 data-toolbar-evoke-modes="[0]"
</div>


</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="kekule/release/kekule.js?modules=chemWidget,openbabel,indigo"></script>


	<script>
	Kekule.Indigo.enable();


	function load_kekule() {
	chemViewer = new Kekule.ChemWidget.Viewer(document.getElementById('kekule'));
	}

	function display_kekule(smi) {
	var mol = Kekule.IO.loadFormatData(smi, "smi");
	chemViewer.setChemObj(mol);
	}


	function display() {
	var smi = document.getElementById("smiles").value;
	console.log(smi);
	display_kekule(smi);
	}

	$(window).on('load', function(){
	console.log("OK");
	load_kekule();
	display();
	$('textarea').on('change', display);
	});

	</script
	</head>
	<body>

	<h2> SMILES </h2>
	<textarea rows="10" cols="50" id="smiles" style="font-size: 12pt">
	CCN(c1cc(C)ccc1C)S(=O)(=O)c1cc(C(N)=O)n(C)c1
	</textarea>

	<div id="div2">
	<h2> Kekule </h2>
	<div id="kekule" style="width:100%;height:650px"
	data-widget="Kekule.ChemWidget.Viewer2D" data-enable-toolbar="true" data-auto-size="true" data-padding="20"
	data-toolbar-evoke-modes="[0]"
	</div>



	</body>
	</html>