

<!doctype html>
<html >

  <head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

 <title>Test Zawgyi encoding of page</title>
<style>
  @font-face {
    font-family: ZawgyiOne;
    src: url(res/fonts/ZawgyiOne.ttf);
  }


  @font-face {
    font-family: Padauk;
    src: url(res/fonts/Padauk.ttf);
  }
 
   
 .zaw5 {
    font-family: ZawgyiOne;
    font-size:26px;
   }   

  
 .bur5 {
    font-family: Padauk;
    font-size:26px;
  }
  
  .sz{font-size:26px;}


</style>

  </head>
  <body class='sz'>
   <div class="container">
    <div class="row">
 <div class="col-bg-1">
  <form name=f1>
   Test UI : 
   <div>
   Is keyboard Zawgyi : <input type=checkbox id=isZawgyi onchange="isZawgyiChnged(this)">
   
    <div title="For ref - unicode text with Zawgyi font (works only if this device has this font) 
   Test String 1 with Zawgyi-One font" class="zaw5" >
Label 1	 ၿဖိဳး ၾကာ   ၾကည္း  ေျပာျပခ် ၿမိဳ  ျဖစ္သ
   </div> 
<div  style = "font-family:Padauk;" title="Same string 2 with  Padunk font This string is in Zawgyi encoding. Meaning with Zawgyi font will look in one way (and mean one thing in Burmese) but with Unicode "Padauk" Burmese font will look different. This file is saved with Unicode-16 encoding (not default UTF-8)" class="bur5">
Label 2	 ၿဖိဳး ၾကာ   ၾကည္း  ေျပာျပခ် ၿမိဳ  ျဖစ္သ
      </div>  

  <div style = "font-family:Padauk;" id = 'dev1a' class="bur5">Label 3 Unicode က္က  က  မြန်မာနိုင်ငံ</div>
 <div id = 'dev1b' class="zaw5" >Label 4 Zawgyi ျမန္မာနိုင္ငံ</div> 
 
 
 <div>
 <span title='Label to prompt user what to type' class="bur5">To detect if Zawgyi encoding, type မြန်မာနိုင်ငံ or <span class="zaw5" >ျမန္မာနိုင္ငံ</span>  <input type=text id=t1 len=20>
 <input type=button class="btn btn-primary" value="Go" onclick="goProcess()" id=btn1>
<div id = "dev2out" title="Output appended with <br>" style="font-family:Padauk;">Output :<br><br> </div> 

 
    <div id = "dev2err" title="Exceptions if any appended with <br>"
     style="font-family:Padauk;">(Errs 2) <br><br>
    </div> 
    </div>
      
 </div> 
 </div>
On pressing Go we convert a string from Zawgyi to Unicode and back. <br>
 (1) If device does not have the Burmese Unicode font installed some of the unicode text might appear incorrectly.<br>
 (2) If you do not have the Zawgyi-One font intalled then some of the Zawgyi text will be rendered with the default font and not look accurate.<br>
 In both cases can ignore that as our app will only display the sected encoding. So some devices will have either Zawgyi or  Unicode appearing correctly. And some will have both both appearing correctly.
 

<br>
<div>

</div>
</form>
</body>

 
  <script src="https://ajax.googleapis.com/ajax/libs/myanmar-tools/1.1.3/zawgyi_detector.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/myanmar-tools/1.1.0/zawgyi_converter.min.js"></script>
  <!-- script src="res/js/myzu.js"></script>  
  <script src="res/js/zaw2.js"></script> -->
   <script type="text/javascript" src="https://zawgyi-unicode-test.appspot.com/js/myzu.js"></script>

<script>
const zawgyi_converter = new google_myanmar_tools.ZawgyiConverter();
var isZawgyiEncoding = false;//set on change of checkbox
const output1 = document.getElementById('dev2out'); 
const excptn =  document.getElementById('dev2err');;//initialize to exception 

function isZawgyiChnged(itm){
	isZawgyiEncoding = itm.checked;
	output1.innerHTML = "User selected is Zawgyi Encoding : " + isZawgyiEncoding + ", time " + new Date() + "<br>";
}
function goProcess(){
	//this is a test function to test the capabilities of the library. In app code we will only convert to Zawgyi if phone is Zawgyi.

	var userTypedText = document.f1.t1.value;//from UI
	const UnicodeStr = "က္က  က  မြန်မာနိုင်ငံ ကဥွ ကညွ က္ဋ က္";
	const ZawgyiString = "ျမန္မာနိုင္ငံ";

	///alert('TODO isZawgyiEncoding, userTypedText, UnicodeStr, ZawgyiString ');
	var output = "Start Process: <br>User selected, is Zawgyi Encoding : " +
		isZawgyiEncoding + ", time " + new Date() + "<br>";
	output1.innerHTML = output;
	var result = "na";
	try{
		result = predict(userTypedText);
		var prediction = result.probability === -1 ? "No Signal" : (result.probability < 0.01 ? 	"Unicode" : (result.probability > 0.99 ? "See Zawgyi" : "Not Enough Info"));

	output = output + "Prediction for user string " + prediction + " (Score: " + formatFixed(result.score) 	+ "; Zawgyi Probability: " + result.probability.toFixed(4) + ".)<br>";	
	var o2 = "";
	if(isZawgyiEncoding){
		o2 = "User text in Unicode : " + zawgyi_converter.zawgyiToUnicode(userTypedText) + ".<br>";
		
	}else{
		o2 = "User text already in Unicode. " + userTypedText + " <br>";
	}
	output = output + o2;
	output = output + "Covert test : U to Z " + zawgyi_converter.unicodeToZawgyi(UnicodeStr) +
	 "<br> Z to U :" + 		 zawgyi_converter.zawgyiToUnicode(ZawgyiString) +
	  ", U to Z to U :" + 
	 zawgyi_converter.zawgyiToUnicode(zawgyi_converter.unicodeToZawgyi(UnicodeStr)) + "; expect :" 	+ UnicodeStr + ". Zawgyi str :" + ZawgyiString;
 	const u2 = "ဖြိုး ကြာ   ကြည်း  ပြောပြချ မြို  ဖြစ်သ";
 	const z2 = "ၿဖိဳး ၾကာ   ၾကည္း  ေျပာျပခ် ၿမိဳ  ျဖစ္သ";
 	const u2z = zawgyi_converter.unicodeToZawgyi(u2);
 	const z2u = zawgyi_converter.zawgyiToUnicode(u2z); 	
 	output = output + "<br> u2 : " + u2 + "; -> z :" + u2z + "; back to U :" + z2u + ", same U :" 	+ (z2u === u2);
 	const u3 = zawgyi_converter.zawgyiToUnicode(z2); 
 	const z3 = zawgyi_converter.unicodeToZawgyi(u3);
 	//const z3u = zawgyi_converter.zawgyiToUnicode(u2z); 	
 	output = output + "<br> z2 : " + z2 + "; -> u  :" + u3 + "; back to Z :" + z3 + ", same Z :" 	+ (z3 === z2); 	
	//put to output div
	}catch(e){
		//log to exception div
		excptn.innerHTML="Exception : " + e + "<br> Current output " + output;//and trace where we are 
	}
	output1.innerHTML =  output;
	
}
function formatFixed(number) {
	return (number > 0 ? "+" : "") + number.toFixed(4);
}


function getIndexForCodePoint(cp) {
	// Standard Myanmar code point range before digits
	var STD_CP0 = 0x1000;
	var STD_CP1 = 0x103F;

	// Standard Myanmar code point range after digits
	var AFT_CP0 = 0x104A;
	var AFT_CP1 = 0x109F;

	// Extended Myanmar code point range A
	var EXA_CP0 = 0xAA60;
	var EXA_CP1 = 0xAA7F;

	// Extended Myanmar code point range B
	var EXB_CP0 = 0xA9E0;
	var EXB_CP1 = 0xA9FF;

	// Unicode space characters
	var SPC_CP0 = 0x2000;
	var SPC_CP1 = 0x200B;

	// Indices into Markov nodes
	var STD_OFFSET = 1;
	var AFT_OFFSET = STD_OFFSET + STD_CP1 - STD_CP0 + 1;
	var EXA_OFFSET = AFT_OFFSET + AFT_CP1 - AFT_CP0 + 1;
	var EXB_OFFSET = EXA_OFFSET + EXA_CP1 - EXA_CP0 + 1;
	var SPC_OFFSET = EXB_OFFSET + EXB_CP1 - EXB_CP0 + 1;
	var NUM_STATES = SPC_OFFSET + SPC_CP1 - SPC_CP0 + 1;

	if (STD_CP0 <= cp && cp <= STD_CP1) {
		return cp - STD_CP0 + STD_OFFSET;
	}
	if (AFT_CP0 <= cp && cp <= AFT_CP1) {
		return cp - AFT_CP0 + AFT_OFFSET;
	}
	if (EXA_CP0 <= cp && cp <= EXA_CP1) {
		return cp - EXA_CP0 + EXA_OFFSET;
	}
	if (EXB_CP0 <= cp && cp <= EXB_CP1) {
		return cp - EXB_CP0 + EXB_OFFSET;
	}
	if (SPC_CP0 <= cp && cp <= SPC_CP1) {
		return cp - SPC_CP0 + SPC_OFFSET;
	}
	return 0;
}


function predict(input) {
	var totalDelta = 0.0;
	var prevCp = 0;
	var prevState = 0;
	var record = [];
	var seenTransition = false;
	for (let offset = 0; offset <= input.length; offset++) {
		var cp;
		var currState;
		if (offset === input.length) {
			cp = 0;
			currState = 0;
		} else {
            // Note: All interesting characters are in the BMP.
            cp = input.charCodeAt(offset);
			currState = getIndexForCodePoint(cp);
		}
		var isNullState = (currState === 0);
		// Ignore 0-to-0 transitions
		if (prevState != 0 || currState != 0) {
			var delta = window.detector.model.classifier.getLogProbabilityDifference(prevState, currState);
			record.push({ prevCp, cp, delta, isNullState, hasSignal: true });
			totalDelta += delta;
			seenTransition = true;
		} else {
			record.push({ prevCp, cp, isNullState, hasSignal: false });
		}
		prevCp = cp;
		prevState = currState;
	}

	// Special case: if there is no signal (both log probabilities are zero), return -1.
	// This happens when the input string contains no Myanmar-range code points.
	var probability, score;
	if (!seenTransition) {
		score = 0;
		probability = -Infinity;
	} else {
		// result = Pz/(Pu+Pz)
		//        = exp(logPz)/(exp(logPu)+exp(logPz))
		//        = 1/(1+exp(logPu-logPz))
		score = totalDelta;
		probability = 1.0 / (1.0 + Math.exp(totalDelta));
	}

	return { score, probability, record };
}

window.detector = new google_myanmar_tools.ZawgyiDetector();


</script>


<script>
function codePointInfo(str){
}
</script>


</div></div>


 <section class="text-center">
 <div class="container">
 <h1 class="heading">Zawgyi and  Unicode Strings with different fonts</h1>
 </div>
  </section>
<div class="container">

<a name=tr2>1 Transliterated strings</a>
<div  class = "row"><div class="col-bg-1"> <span class="zaw5">
လမ္းၫႊန္ေျမပံုပင္ျဖစ္ေၾကာင္း၊ Zawgyi</span><br/>
<span class="bur5">လမ္းၫႊန္ေျမပံုပင္ျဖစ္ေၾကာင္း၊ </span>Zawgyi with Burmese Unicode font<br/>

<span class='sz'>လမ္းၫႊန္ေျမပံုပင္ျဖစ္ေၾကာင္း၊ Zawgyi with default font</span><br/>

<br/>
</div></div>

<div  class = "row "><div class="col-bg-1"><span class="bur5">
လမ်းညွှန်မြေပုံပင်ဖြစ်ကြောင်း၊ </span>Unicode<br/><br/> </div></div>
2 Same string rendered in different fonts
<div  class = "row"><div class="col-bg-1"> <span class="zaw5">
ပံု Zawgyi</span> Depending on context same characters can be drawn differently (matras)<br/>
<span class='sz'>ပံု</span> Zawgyi with default font<br/>

<span class="bur5">ပံု </span>Zawgyi with Burmese Unicode font<br/>
<br/>
</div></div>

<div  class = "row "><div class="col-bg-1"><span class="bur5">
ပံု Unicode</span><br/><br/> </div></div>

3 Text fields (initially with same string) with transliteration
<div  class = "row"><div class="col-bg-1"> <span >
<input id=t1z value="ပံု" class="zaw5"> Zawgyi</span> <span class="btn btn-primary" onclick="toUni('t1z', 'uval1')">--> U</span>   <span class="bur5" id=uval1>uval1</span><br/><br/></div></div>

<div  class = "row "><div class="col-bg-1"><span >
<input id=t2z value="ပံု" class="bur5"> Unicode</span> <span class="btn btn-primary" onclick="toZaw('t2z', 'zval1')">--> Z</span>  <span class="zaw5" id=zval1></span><br/><br/> </div></div>

</div>

</div></div>
<br/><br/>

<script>
//zawgyi_converter.zawgyiToUnicode(userTypedText)

function toUni(frm, toSpn){
  var source_element = document.getElementById(frm);

   var text_in = source_element.value;
   var outText = zawgyi_converter.zawgyiToUnicode(text_in);
   var output_area = document.getElementById(toSpn);
   //var hx = textToHex (output_area);
   output_area.innerHTML = outText ;//+ " || " + hx ; 
}

function toZaw(frm, toSpn){
  var source_element = document.getElementById(frm);

   var text_in = source_element.value;
   var outText = zawgyi_converter.unicodeToZawgyi(text_in);
   var output_area = document.getElementById(toSpn);
   //var hx = textToHex (output_area);
   output_area.innerHTML = outText ;//+ " || " + hx ; 
}
</script>
</html>

<!--
public_html/pages/prog/html/js2
-->