<?php
namespace entities\html;

class Input
{
   public function __construct(
      $name=null, $type=null, $value=null, $class=null, $clear_on_focus=false)
   {
      $this->name = $name;
      $this->type = $type;
      $this->value = $value;
      $this->class = $class;
      $this->clear_on_focus = $clear_on_focus;
   }
   public function __toString()
   {
      return $this->build_html();
   }
   private function build_html()
   {
      $markup = "<input";
      $markup .= $this->build_assignments();
      if ($this->clear_on_focus)
      {
         $markup .= " onFocus=\"this.value='';this.style.color='black'\"";
      }
      $markup .= "/>\n";
      return $markup;
   }
   protected function build_assignments()
   {
      $assignments = $this->build_assignment("name");
      $assignments .= $this->build_assignment("type");
      $assignments .= $this->build_assignment("value");
      $assignments .= $this->build_assignment("class");
      return $assignments;
   }
   private function build_assignment($name)
   {
      $value = $this->$name;
      if (!is_null($value))
      {
         return " $name=\"$value\"";
      }
      return null;
   }
}
<?php
namespace entities\html;

class Page
{
   private $scripts = array();
   public function __construct($title=null)
   {
      $this->set_title($title);
      $this->css_path = $GLOBALS["CSS_PATH"];
   }
   protected function set_title($title)
   {
      $this->title = $title;
   }
   public function __toString()
   {
      return $this->build_html();
   }
   private function build_html()
   {
      $markup = "<html>\n";
      $markup .= "<head>\n";
      $markup .= $this->build_head();
      $markup .= "</head>\n";
      $markup .= $this->build_body();
      $markup .= "</html>\n";
      return $markup;
   }
   protected function build_head()
   {
      $markup = $this->build_title();
      $markup .= $this->build_style_link();
      $markup .= $this->build_script_tags();
      $markup .= $this->build_description();
      $markup .= $this->build_thumbnail_link();
      $markup .= $this->build_favicon_link();
      return $markup;
   }
   private function build_title()
   {
      $markup = "<title>" . $this->title . "</title>\n";
      $markup .= new Meta($this->title, "title");
      return $markup;
   }
   private function build_style_link()
   {
      $tag = "<link href=\"" . $this->css_path . "\" rel=\"stylesheet\">\n";
      return $tag;
   }
   protected function build_script_tags()
   {
      $markup = "";
      foreach ($this->scripts as $path)
      {
         $markup .= new Script($path);
      }
      return $markup;
   }
   private function build_description()
   {
      return new Meta($GLOBALS["PAGE_DESCRIPTION"], "description") . "\n";
   }
   private function build_thumbnail_link()
   {
      $tag = "<link rel=\"image_src\"";
      $tag .= " href=\"" . $GLOBALS["THUMBNAIL_PATH"] . "\"/>";
      return $tag;
   }
   private function build_favicon_link()
   {
      return new Link("shortcut icon", $GLOBALS["FAVICON_PATH"]);
   }
   private function build_body()
   {
      $markup = "<body>\n";
      $markup .= $this->build_content();
      $markup .= "</body>\n";
      return $markup;
   }
   protected function build_content()
   {
      return "";
   }
   protected function add_script($path)
   {
      $this->scripts[] = $path;
   }
}
<?php
namespace entities\html;

class Script
{
   public function __construct($path=null, $content=null)
   {
      $this->path = $path;
      $this->content = $content;
   }
   public function __toString()
   {
      return $this->build_html();
   }
   public function build_html()
   {
      $markup = "<script";
      if (!is_null($this->path))
      {
         $markup .= " src=\"" . $this->path . "\"";
      }
      $markup .= ">";
      $markup .= $this->build_content();
      $markup .= "</script>\n";
      return $markup;
   }
   protected function build_content()
   {
      return $this->content;
   }
}
<?php
namespace entities\html;

class A extends Element
{
   public function __construct($href=null, $content=null, $id=null, $class=null)
   {
      parent::__construct("a", $id, $class);
      $this->add_attribute("href", $href);
      $this->content = $content;
   }
   protected function build_content()
   {
      $content = $this->content;
      if (is_null($content))
      {
         $content = $this->get_attribute("href");
      }
      return $content;
   }
}
<?php
namespace entities\html;

class IFrame extends Element
{
   public function __construct($id, $src, $width, $height)
   {
      parent::__construct("iframe", $id);
      $this->add_attribute("src", $src);
      $this->add_attribute("width", $width);
      $this->add_attribute("height", $height);
      $this->add_attribute("frameborder", "0");
   }
}
34.204.180.1
34.204.180.1
34.204.180.1
 
January 23, 2021

I wanted to document this chat-controlled robot I made for Babycastles' LOLCAM📸 that accepts a predefined set of commands like a character in an RPG party 〰 commands like walk, spin, bash, drill. It can also understand donut, worm, ring, wheels, and more. The signal for each command is transmitted as a 24-bit value over infrared using two Arduinos, one with an infrared LED, and the other with an infrared receiver. I built the transmitter circuit, and the receiver was built into the board that came with the mBot robot kit. The infrared library IRLib2 was used to transmit and receive the data as a 24-bit value.


fig. 1.1: the LEDs don't have much to do with this post!

I wanted to control the robot the way the infrared remote that came with the mBot controlled it, but the difference would be that since we would be getting input from the computer, it would be like having a remote with an unlimited amount of buttons. The way the remote works is each button press sends a 24-bit value to the robot over infrared. Inspired by Game Boy Advance registers and tracker commands, I started thinking that if we packed multiple parameters into the 24 bits, it would allow a custom move to be sent each time, so I wrote transmitter and receiver code to process commands that looked like this:

bit
name
description
00
time
multiply by 64 to get duration of command in ms
01
02
03
04
left
multiply by 16 to get left motor power
05
06
07
08
right
multiply by 16 to get right motor power
09
10
11
12
left sign
0 = left wheel backward, 1 = left wheel forward
13
right sign
0 = right wheel forward, 1 = right wheel backward
14
robot id
0 = send to player one, 1 = send to player two
15
flip
negate motor signs when repeating command
16
repeats
number of times to repeat command
17
18
19
delay
multiply by 128 to get time between repeats in ms
20
21
22
23
swap
swap the motor power values on repeat
fig 1.2: tightly stuffed bits

The first command I was able to send with this method that seemed interesting was one that made the mBot do a wheelie.

$ ./send_command.py 15 12 15 1 0 0 0 7 0 1
sending 0xff871fcf...


fig 1.3: sick wheels

A side effect of sending the signal this way is any button on any infrared remote will cause the robot to do something. The star command was actually reverse engineered from looking at the code a random remote button sent. For the robot's debut, it ended up with 15 preset commands (that number is in stonks 📈). I posted a highlights video on social media of how the chat controls turned out.

This idea was inspired by a remote frog tank LED project I made for Ribbit's Frog World which had a similar concept: press a button, and in a remote location where 🐸 and 🐠 live, an LED would turn on.


fig 2.1: saying hi to froggo remotely using an LED

😇 The transmitter and receiver Arduino programs are available to be copied and modified 😇