Donate245Patreon129


Javascript API Client Code

To use PlantUML image generation, a text diagram description have to be :

  1. Encoded in UTF-8
  2. Compressed using Deflate algorithm
  3. Reencoded in ASCII using a transformation close to base64

This is exactly what the following compress() function is doing.


<!--  taken from https://github.com/johan/js-deflate -->
<script src="rawdeflate.js"></script>
<script>
$ = function(id){ return document.getElementById(id) };

function encode64(data) {
r = "";
for (i=0; i<data.length; i+=3) {
 if (i+2==data.length) {
r +=append3bytes(data.charCodeAt(i), data.charCodeAt(i+1), 0);
} else if (i+1==data.length) {
r += append3bytes(data.charCodeAt(i), 0, 0);
} else {
r += append3bytes(data.charCodeAt(i), data.charCodeAt(i+1),
data.charCodeAt(i+2));
}
}
return r;
}

function append3bytes(b1, b2, b3) {
c1 = b1 >> 2;
c2 = ((b1 & 0x3) << 4) | (b2 >> 4);
c3 = ((b2 & 0xF) << 2) | (b3 >> 6);
c4 = b3 & 0x3F;
r = "";
r += encode6bit(c1 & 0x3F);
r += encode6bit(c2 & 0x3F);
r += encode6bit(c3 & 0x3F);
r += encode6bit(c4 & 0x3F);
return r;
}

function encode6bit(b) {
if (b < 10) {
 return String.fromCharCode(48 + b);
}
b -= 10;
if (b < 26) {
 return String.fromCharCode(65 + b);
}
b -= 26;
if (b < 26) {
 return String.fromCharCode(97 + b);
}
b -= 26;
if (b == 0) {
 return '-';
}
if (b == 1) {
 return '_';
}
return '?';
}

var deflater = window.SharedWorker && new SharedWorker('rawdeflate.js');
if (deflater) {
deflater.port.addEventListener('message', done_deflating, false);
deflater.port.start();
} else if (window.Worker) {
deflater = new Worker('rawdeflate.js');
deflater.onmessage = done_deflating;
}

function done_deflating(e) {
$('im').src = "http://www.plantuml.com/plantuml/img/"+encode64(e.data);
}

function compress(s) {
//UTF8
s = unescape(encodeURIComponent(s));

if (deflater) {
if (deflater.port && deflater.port.postMessage) {
deflater.port.postMessage(s);
} else {
deflater.postMessage(s);
}
  } else {
 setTimeout(function() {
      done_deflating({ data: deflate(s) });
}, 100);
  }
}
</script>

<form>
<textarea id="inflated" cols="64" rows="16">Bob->Alice : hello