On the Fly UTF-8 encoder/decoder

fkapnist · Post by **fkapnist** » Fri May 27, 2016 10:56 am

If you use javascript to get a meta tag such as Page Title which might be in a foreign language, you can't bring it into Neobook as a variable unless it is converted to decimal code. When you want to send it back to HTML the variable must be converted again to foreign language. It took me forever to find the code below, I tried dozens of coders and decoders but nothing seemed to work in a way that could go in and out of Neobook without loss of data. This code can be modified to use on the fly when setting and getting Neobook variables:

[syntax=javascript]<!DOCTYPE html>
<html lang=en manifest=eff.appcache>

<head>
<meta charset=utf-8>
<title>UTF-8 encoder/decoder</title>
<meta name=viewport content="width=device-width,initial-scale=1">
<style>html,textarea{font:1em/1.6 sans-serif}body{max-width:40em;padding:0 1em}h1{text-align:center;font-size:1.3em;margin:0 0 .5em;padding-top:1em}h2{font-size:1em}a{color:#333;text-decoration:none;border-bottom:1px solid #aaa;padding:.1em .2em}a:hover,a:focus{color:#fff;border-color:#036;background:#36c}textarea{font-family:Monaco,Consolas,monospace}#footer{margin-top:2em;text-align:center}textarea{border:3px double green;background:#90ee90;width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;margin:1em 0 .5em;padding:.7em;resize:vertical;min-height:9.5em}code{font-family:Monaco,Consolas,monospace;font-size:.9em;white-space:pre;white-space:pre-wrap;word-wrap:break-word}.invalid,:invalid{border-color:red;background:#ffb6c1}@media(min-width:42em){html{font-size:1.2em;background:#c4c4c4;height:100%}body{margin:0 auto;padding:0 2em;min-height:100%;background:#fff;border:solid #aaa;border-width:0 1px}}</style>
<meta name=description content="An online, on-the-fly UTF-8 encoder/decoder.">
</head>

<h1>UTF-8 encoder/decoder</h1>
<noscript><strong>To use this tool, please <a href=http://enable-javascript.com/>enable JavaScript</a> and reload the page.</strong></noscript>
<h2>UTF-8-decoded:</h2>
<textarea autofocus rows="1" cols="20">Foo ? bar &#55348;&#57094; baz ☃ qux</textarea>
<h2>UTF-8-encoded: (<a href=#Foo%20%C2%A9%20bar%20%F0%9D%8C%86%20baz%20%E2%98%83%20qux id=permalink>permalink</a>)</h2>
<textarea rows="1" cols="20">\x46\x6F\x6F\x20\xC2\xA9\x20\x62\x61\x72\x20\xF0\x9D\x8C\x86\x20\x62\x61\x7A\x20\xE2\x98\x83\x20\x71\x75\x78</textarea>
<h2>About this tool</h2>
<p>This tool uses <a href=http://mths.be/utf8js>utf8.js</a> to UTF-8-encode any string you enter in the ?decoded? field, or to decode any UTF-8-encoded string you enter in the ?encoded? field.
<p id=footer>Made by <a href=http://mathiasbynens.be/>@mathias</a> ? <a href=https://github.com/mathiasbynens/mother ... utf-8>fork this on GitHub!</a></p>
<script>
/*! http://mths.be/utf8js v2.0.0 by @mathias */;

(function(n){var g=typeof exports=="object"&&exports;
var t=typeof module=="object"&&module&&module.exports==g&&module;
var m=typeof global=="object"&&global;
if(m.global===m||m.window===m){n=m}var l=String.fromCharCode;
function f(x){var w=[];
var v=0;
var y=x.length;
var z;
var u;
while(v<y){z=x.charCodeAt(v++);
if(z>=55296&&z<=56319&&v<y){u=x.charCodeAt(v++);
if((u&64512)==56320){w.push(((z&1023)<<10)+(u&1023)+65536)}else{w.push(z);
v--}}else{w.push(z)}}return w}function q(y){var w=y.length;
var v=-1;
var x;
var u="";
while(++v<w){x=y[v];
if(x>65535){x-=65536;u+=l(x>>>10&1023|55296);
x=56320|x&1023}u+=l(x)}return u}function e(v,u){return l(((v>>u)&63)|128)}function p(u){if((u&4294967168)==0){return l(u)}var v="";
if((u&4294965248)==0){v=l(((u>>6)&31)|192)}else{if((u&4294901760)==0){v=l(((u>>12)&15)|224);
v+=e(u,6)}else{if((u&4292870144)==0){v=l(((u>>18)&7)|240);
v+=e(u,12);
v+=e(u,6)}}}v+=l((u&63)|128);
return v}function o(x){var w=f(x);
var y=w.length;
var v=-1;
var u;
var z="";
while(++v<y){u=w[v];
z+=p(u)}return z}function a(){if(j>=i){throw Error("Invalid byte index")}var u=k[j]&255;
j++;
if((u&192)==128){return u&63}throw Error("Invalid continuation byte")}function c(){var v;
var u;
var y;
var x;
var w;
if(j>i){throw Error("Invalid byte index")}if(j==i){return false}v=k[j]&255;
j++;
if((v&128)==0){return v}if((v&224)==192){var u=a();
w=((v&31)<<6)|u;
if(w>=128){return w}else{throw Error("Invalid continuation byte")}}if((v&240)==224){u=a();
y=a();
w=((v&15)<<12)|(u<<6)|y;
if(w>=2048){return w}else{throw Error("Invalid continuation byte")}}if((v&248)==240){u=a();
y=a();
x=a();
w=((v&15)<<18)|(u<<12)|(y<<6)|x;if(w>=65536&&w<=1114111){return w}}throw Error("Invalid UTF-8 detected")}var k;
var i;
var j;
function b(w){k=f(w);i=k.length;
j=0;
var u=[];
var v;
while((v=c())!==false){u.push(v)}return q(u)}var d={version:"2.0.0",encode:o,decode:b};
if(typeof define=="function"&&typeof define.amd=="object"&&define.amd){define(function(){return d})}else{if(g&&!g.nodeType){if(t){t.exports=d}else{var r={};
var h=r.hasOwnProperty;for(var s in d){h.call(d,s)&&(g[s]=d[s])}}}else{n.utf8=d}}}(this));
(function(window,document){var textareas=document.getElementsByTagName("textarea"),decoded=textareas[0],encoded=textareas[1],permalink=document.getElementById("permalink"),storage=(function(){var uid=new Date,storage,result;
try{(storage=window.localStorage).setItem(uid,uid);
result=storage.getItem(uid)==uid;
storage.removeItem(uid);
return result&&storage}catch(e){}}()),stringFromCharCode=String.fromCharCode;
function encode(string){return encodeURIComponent(string).replace(/['()_*]/g,function(character){return"%"+character.charCodeAt().toString(16)})}function hexEscape(string){var length=string.length;var index=-1;
var result="";
var hex;
while(++index<length){hex=string.charCodeAt(index).toString(16).toUpperCase();
result+="\\x"+("00"+hex).slice(-2)}return result}function update(){var shouldDecode=this==encoded;
var value;
if(shouldDecode){try{value=utf8.decode(eval("'"+encoded.value+"'"));
decoded.value=value;
decoded.className=encoded.className=""}catch(e){decoded.value="ERROR: invalid input";
decoded.className=encoded.className="invalid"}}else{value=utf8.encode(decoded.value);
encoded.value=hexEscape(value);decoded.className=encoded.className=""}value=decoded.value;
permalink.hash=encode(value);
storage&&(storage.utf8=value)}decoded.onkeyup=encoded.onkeyup=update;
decoded.oninput=encoded.oninput=function(){decoded.onkeyup=encoded.onkeyup=null;update.call(this)};
if(storage){storage.utf8&&(decoded.value=storage.utf8);
update()}window.onhashchange=function(){decoded.value=decodeURIComponent(location.hash.slice(1))
;update()};
if(location.hash){window.onhashchange()}}(this,document));
window._gaq=[["_setAccount","UA-6065217-60"],["_trackPageview"]];
(function(e,a){var c=e.createElement(a),b=e.getElementsByTagName(a)[0];
c.src="//www.google-analytics.com/ga.js";
b.parentNode.insertBefore(c,b)}(document,"script"))</script>[/syntax]

find it on the web here:
https://mothereff.in/utf-8

Here is a stripped down version for use in Neobook.
You can insert it into your HTML pages or use it as an external script (utf8.js). But since this is for Neobook beginners here is a simple secret: Put the entire code in a webBrowser object (BrowserLoadFromStr) and position the object to the left of your publication so the user will never see it. Now you can use basic Clipboard cut and paste or other simple Actions to send UTF-8 strings in and out of the text fields and into your publication (P.S. you must give names or ids to the text fields to suit your publication)...

[syntax=javascript]<!DOCTYPE html>
<html lang=en manifest=eff.appcache>

<head>
<meta charset=utf-8>
<title>UTF-8 encoder/decoder</title>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta name=description content="An online, on-the-fly UTF-8 encoder/decoder.">
</head>

<body topmargin="1" leftmargin="1">

<p>UTF-8 HTML TEXT decoded:</p>
<textarea autofocus rows="6" cols="44" name="In" style="width: 375; height: 128"></textarea>
<p>UTF-8 NEOBOOK VAR encoded:</p>
<textarea rows="6" cols="44" name="Out"></textarea>
<script>
/*! http://mths.be/utf8js v2.0.0 by @mathias */;

(function(n){var g=typeof exports=="object"&&exports;
var t=typeof module=="object"&&module&&module.exports==g&&module;
var m=typeof global=="object"&&global;
if(m.global===m||m.window===m){n=m}var l=String.fromCharCode;
function f(x){var w=[];
var v=0;
var y=x.length;
var z;
var u;
while(v<y){z=x.charCodeAt(v++);
if(z>=55296&&z<=56319&&v<y){u=x.charCodeAt(v++);
if((u&64512)==56320){w.push(((z&1023)<<10)+(u&1023)+65536)}else{w.push(z);
v--}}else{w.push(z)}}return w}function q(y){var w=y.length;
var v=-1;
var x;
var u="";
while(++v<w){x=y[v];
if(x>65535){x-=65536;u+=l(x>>>10&1023|55296);
x=56320|x&1023}u+=l(x)}return u}function e(v,u){return l(((v>>u)&63)|128)}function p(u){if((u&4294967168)==0){return l(u)}var v="";
if((u&4294965248)==0){v=l(((u>>6)&31)|192)}else{if((u&4294901760)==0){v=l(((u>>12)&15)|224);
v+=e(u,6)}else{if((u&4292870144)==0){v=l(((u>>18)&7)|240);
v+=e(u,12);
v+=e(u,6)}}}v+=l((u&63)|128);
return v}function o(x){var w=f(x);
var y=w.length;
var v=-1;
var u;
var z="";
while(++v<y){u=w[v];
z+=p(u)}return z}function a(){if(j>=i){throw Error("Invalid byte index")}var u=k[j]&255;
j++;
if((u&192)==128){return u&63}throw Error("Invalid continuation byte")}function c(){var v;
var u;
var y;
var x;
var w;
if(j>i){throw Error("Invalid byte index")}if(j==i){return false}v=k[j]&255;
j++;
if((v&128)==0){return v}if((v&224)==192){var u=a();
w=((v&31)<<6)|u;
if(w>=128){return w}else{throw Error("Invalid continuation byte")}}if((v&240)==224){u=a();
y=a();
w=((v&15)<<12)|(u<<6)|y;
if(w>=2048){return w}else{throw Error("Invalid continuation byte")}}if((v&248)==240){u=a();
y=a();
x=a();
w=((v&15)<<18)|(u<<12)|(y<<6)|x;if(w>=65536&&w<=1114111){return w}}throw Error("Invalid UTF-8 detected")}var k;
var i;
var j;
function b(w){k=f(w);i=k.length;
j=0;
var u=[];
var v;
while((v=c())!==false){u.push(v)}return q(u)}var d={version:"2.0.0",encode:o,decode:b};
if(typeof define=="function"&&typeof define.amd=="object"&&define.amd){define(function(){return d})}else{if(g&&!g.nodeType){if(t){t.exports=d}else{var r={};
var h=r.hasOwnProperty;for(var s in d){h.call(d,s)&&(g[s]=d[s])}}}else{n.utf8=d}}}(this));
(function(window,document){var textareas=document.getElementsByTagName("textarea"),decoded=textareas[0],encoded=textareas[1],permalink=document.getElementById("permalink"),storage=(function(){var uid=new Date,storage,result;
try{(storage=window.localStorage).setItem(uid,uid);
result=storage.getItem(uid)==uid;
storage.removeItem(uid);
return result&&storage}catch(e){}}()),stringFromCharCode=String.fromCharCode;
function encode(string){return encodeURIComponent(string).replace(/['()_*]/g,function(character){return"%"+character.charCodeAt().toString(16)})}function hexEscape(string){var length=string.length;var index=-1;
var result="";
var hex;
while(++index<length){hex=string.charCodeAt(index).toString(16).toUpperCase();
result+="\\x"+("00"+hex).slice(-2)}return result}function update(){var shouldDecode=this==encoded;
var value;
if(shouldDecode){try{value=utf8.decode(eval("'"+encoded.value+"'"));
decoded.value=value;
decoded.className=encoded.className=""}catch(e){decoded.value="ERROR: invalid input";
decoded.className=encoded.className="invalid"}}else{value=utf8.encode(decoded.value);
encoded.value=hexEscape(value);decoded.className=encoded.className=""}value=decoded.value;
permalink.hash=encode(value);
storage&&(storage.utf8=value)}decoded.onkeyup=encoded.onkeyup=update;
decoded.oninput=encoded.oninput=function(){decoded.onkeyup=encoded.onkeyup=null;update.call(this)};
if(storage){storage.utf8&&(decoded.value=storage.utf8);
update()}window.onhashchange=function(){decoded.value=decodeURIComponent(location.hash.slice(1))
;update()};
if(location.hash){window.onhashchange()}}(this,document));
window._gaq=[["_setAccount","UA-6065217-60"],["_trackPageview"]];
(function(e,a){var c=e.createElement(a),b=e.getElementsByTagName(a)[0];
c.src="//www.google-analytics.com/ga.js";
b.parentNode.insertBefore(c,b)}(document,"script"))
</script>[/syntax]

.

fkapnist · Post by **fkapnist** » Sat May 28, 2016 12:53 pm

if you copy and paste between WebBrowser objects you do not need to code/decode Unicode at all. You can do it directly with javascript and the clipboard (because using Neobook action commands will lose the correct Unicode character display)

For example, to copy a web page title(info) to the caption of a HTML button(B3), don't use execCommand("Copy"). Use window.clipboardData.getData. (Backup the clipboard contents before and restore them after. There are also 3rd party clipboard managers that can handle more than just text)

SetVar "[TempClipboard]" "[Clipboard]"
BrowserExecScript "WebBrowser1" "var info=(window.document.title);|window.clipboardData.setData ([#34]Text[#34], info);" "JScript"
BrowserExecScript "WebBrowser2" "info=(window.clipboardData.getData ([#34]Text[#34]));|window.document.getElementById('B3').value=info;" "JScript"
SetVar "[Clipboard]" "[TempClipboard]"

Archived NeoSoft Support Forum

On the Fly UTF-8 encoder/decoder

On the Fly UTF-8 encoder/decoder

Re: On the Fly UTF-8 encoder/decoder