Welcome back for another episode of let’s build a bot! This week we’re building the front-end of Mr. Good Bot!

So look out the window and pick up every stitch because beatniks are out to make it rich!

Come, let the Bene Gesserit Reverend Mother Joy Muad’Dib guide you in the Weirding Way!

And… in case you missed it, those last couple sentence are an obscurish (but stupidly clever) way of joking that I’m a witch.

Like Donovan sang (paraphrasing)… “It must be the season of the October crone!”.

Yeah I know… its less funny if I explain it like that but I’d hate for the censorship bots to think I’m starting a cult.. okay, okay… another cult!

Look, I still contest it was valuable research alright!

Nonetheless, I don’t want to end up on the blacklist again, so… let’s just build the dang bot!

Mr. Good Bot’s Front-end

Sam (my research bot) and I went down into my bot dungeon… er… I mean “subterranean research facility” where we set about designing and constructing Mr. Good Bot for the amusement and bewilderment of all!

Design Considerations:

  • Any and all code should be short, simple and sweet… like me (that’s not true).
  • Everything should be easy for ANYONE, even illiterate people, to use and modify… wait, no… excuse me, that’s insensitive! What I meant to say is, people who can’t read and write code. 😛
  • Ideally Mr. Good Bot would be “skinable” to have more than one look and maybe even have the option to wear “accessories” because even though you never have the time, sometimes… accessories are fun!
  • Extra credit for cross-platform operation.
  • I’m juggling many irons in the fire ATM, so I should try to get the most effect for the least amount of effort on this project. Sort of a “Pareto’s principle of strategic half-assery”.

While discussing our options for rapid prototyping Mr. Good Bot, Sam and I made this list of methods we might use to animate the new bot:

Potential Animation Methods:

  • Still Frames.
  • Dynamic Layered SVG.
  • Pure HTML & JavaScript Canvas Animation.
  • A 3rd Party Animation Library.
  • Sacrificing a virgin… uh.. martini to summon an ancient automaton.

After careful consideration of all the factors Sam was frightfully dead-set on that last method because it involved his Bender Rodriguez impression!

Sam mentioned something about the possibility of meeting the great ToBoR “groking well” but the simulations he ran indicated the probability of success was inconclusive at best and likely low if positive.

So, I made Sam stop wasting my quality Spiced Melange Web Colors and we looked at our other options.

SVG

We decided against Dynamic Layered SVG’s because I have first hand knowledge that most technologically impaired geeks prefer raster over vector image creation.

As silly as that may seem at face value, I can understand why some feel that way.

Sometimes it really is just more fun to manipulate the squiggly colors as little quantized pixels of Joy rather than the product of markup or an equation!

Moving beyond the clearly undue self-aggrandizement for a moment, raster is a simpler and a more straightforward concept that many people already know and are comfortable with.

Also, using SVG would require that people use a very particular svg object naming convention that I would have to define and if you recall there is the critical half-assery constraint to account for.

On top of that, I’ve had issues with seamless performance with crossplatform SVG animations… but if the moons of Arrakis align just right you can make interactive SVGs work!

HTML & JavaScript on a Canvas Element

Two things:

  1. This violates the need to be simple and modifiable by everyone.
  2. It’s kind of a pain in the ass for rapid prototyping! 😛

Nuff said.

3rd Party Animation Library

Look, I’m not going to say it’s not doable, but… it’s going to be a lot like that time Napoleon marched across the alps… extravagant and full of propaganda and in the end you’re left asking “Why?” and declaring “Never again!”!

I won’t subject my audience to that level of abuse!

Still Frames

After considering all options available, Sam and I decided to go with still frame animation because it would be the easiest for non-coders to play with and it is the only option left standing after reviewing all the other options!

Simply put, everybody can draw a picture.

You can use these raster image editors if you don’t already have one:

I use GIMP for manual raster image work by choice (it indiscriminately works on Win, Mac & Linux, but the fact it’s free ain’t half bad either!) and Photoshop is a good choice also.

Although, I would add that having to run Photoshop on a virtual machine to be able to use it on Linux after having paid for it is BS!

GIMP is a lot like VISA (not a sponsor!) it’s everywhere you want to be, though unlike VISA there are no late payments!

Oh, and uh… in case it’s not abundantly clear, #its_never_a_sponsor!

“WHAT?! You mean… we have to draw every face permutation?”

No! Of course not! That would be wasteful & magically delicious… I mean… silly & redundant!

We just need to draw each isolated component but we’ll probably get into all that next week or the week after assuming I don’t take the opportunity to write about Project Orion for Columbus Day because that just totally makes sense to me. 😛

Front-End Code – MrGoodBot.php

Below is the code for this week, it creates a web page and uses CSS to add a little style!

There is a select dropdown element used for changing the skin, the “value” property is the name of the subfolder the skin is in, note it will be case sensitive on Linux.

After that there is an image tag with the element id of “face” and as you might guess this is the DOM object we use to draw Mr. Good Bot’s face.

Lastly, there is a little JavaScript that uses AJAX “POST” requests to change the face image.

Note the random numbers appended to the source link image name to prevent browsers from caching the image and not updating after it is loaded the first time:

Face.src = ‘skins/current_face.png?’ + Math.random();

Once the new face image is loaded, a timeout is used to wash, rinse & repeat ad infinitum with the decisions for assembling the face left to the backend code which we’ll cover in an upcoming post.

As is, when loaded you will just get a black screen but this code is boilerplate and fully functional and ready to display our bots face.

The Code

Copy -> Paste -> Run!

<!DOCTYPE html>
<html lang="en">
<title>Mr Good Bot</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
    background-color: #000;
    overflow: hidden;
}
.pullright{
    float:right;
    text-align:right;
} 
</style>
<body>

<select id='skin' class='pullright'>
    <option value='Default'>Default</option>
    <option value='Nucleus'>Nucleus</option>
    <option value='Pixel'>Pixel</option>
    <option value='Pumpkin'>Pumpkin</option>
</select>

<img src="" style="width:100%" id='face'>

<script>
var Face = document.getElementById('face');
function AnimateFace(){       
   var httpRequest = new XMLHttpRequest();
   var Skin = document.getElementById('skin');
   Skin = 'skin=' + Skin.options[Skin.selectedIndex].value;
   httpRequest.onreadystatechange = function(){
      if(httpRequest.readyState == 4 && httpRequest.status == 200){
         Face.src = 'skins/current_face.png?' + Math.random();
         setTimeout(AnimateFace, 120 * Math.floor(Math.random() * 11) + 1);
      }
   }
   
   httpRequest.open('POST', 'Face.php', true);
   httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   httpRequest.send(Skin); 
}
AnimateFace();
</script>

</body>
</html>

Mr. Good Bot Goes to GitHub

You can follow along for free on GitHub as I release and update Mr. Good Bot’s code.

GitHub: MrGoodBot

 

Mr. Cool Bot Wallpaper

In keeping with last weeks Good Bot themed, time-honored tradition of including a wallpaper, here’s another, please enjoy!

Mr. Cool Bot Wallpaper

Mr Cool Bot 1920 x 1280 Wallpaper
Mr Cool Bot 1920 x 1280 Wallpaper

 

Next week we’ll look at how to create faces & skins for Mr. Good Bot but for now it looks like my ride is here so I’ll see you all next time and thanks for reading!

 


If it is by will alone that you love bots then set your mind in motion!

May thoughts acquire speed, bots acquire stains, the stains become you supporting my content through Patreon for $1 or more every month!

But, if all you can do is like, share, comment and subscribe… well that’s cool too!

Much Love,

~Joy