I was looking at a page called Javascript: Convert Strings to Binary (and representing in a nerdy way!) where you can convert a String into binary dots using Javascript and I loved that, but how I can do that? Since the code isn't for making that grid...

Recommended Answers

All 3 Replies

Nathan,

View the page's source and search for "fillsdfkalsjdfak". You will find the function that writes the dots on the page.

You will also need a small stylesheet, slightly higher up in the source. Search for "img.zerosafdfasd".

You might like to grab your own copy of the dot image and store it locally. Then edit the function to use the local copy with a relative url, rather than the original over the internet.

Airshow

I've tried this it worked in part, since the dots wont get smaller there are just a lot of big dots

Nathan,

The small dots are achieved with css.

If they are all large, then either the stylesheet is not properly in place or the class="....." statement in the code is not correct.

After posting last night, I played with the code and ended up with this implementation, which is a bit more complex but a lot more fun:

<!DOCTYPE html>
<head>
<title>ASCII dots</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#asciiPattern img.zero { width: 6px; height: 6px; padding: 5px; }
</style>
<script type="text/javascript">
onload = function(){
	function convertToDots(elID, str){
	  var i,j,d,row,rowArray,clss,el = document.getElementById(elID);
	  el.innerHTML = '';
	  for(i=0; i<str.length; i++){
	    d = str.charCodeAt(i);
	    row = document.createElement('div');
	    el.appendChild(row);
	    rowArray = [];
	    for(j=0; j<8; j++) {
	      clss = (d%2 == 0) ? "zero" : ""; 
	      d = Math.floor(d/2);
	      rowArray.unshift('<img class="'+clss+'" src="images/dotaj8.png" />');
	    }
	    row.innerHTML = rowArray.join('');
	  }
	}
	var txt = document.getElementById("txt");
	var goButton = document.getElementById("goButton");
	goButton.onclick = txt.onkeyup = function(){
		convertToDots('asciiPattern', txt.value);
	};
	goButton.onclick();
}
</script>
</head>
<body>

<div id="controls">
	<input type="text" id="txt" value="Welcome" />&nbsp;<button id="goButton">Go</button>
</div>
<div id="asciiPattern"></div>

</body>
</html>

The "go" button is included for any browser that does not support the onkeyup event.

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.