Initial experiments with Code Bug Connect

Code Bug has been around for a while, and it is incredibly cute, When it first came, it was a very interesting piece of kit - and it is still is and fun to play with. It spec means it is still a very useful piece of kit.

• 5x5 Red LED display
• 2 buttons
• 6 touch sensitive I/O pads (4 input/output, power and ground)
• Micro USB socket
• CR2032 battery holder
• Expansion port for I2C, SPI and UART

• Blockly-based online programming interface
• CodeBug emulator for checking code before downloading

In 2020 Code Bug launched and successfully funded a Kickstarter campaign (https://www.kickstarter.com/projects/codebug/codebug-connect-cute-colourful-and-programmable-iot-wearable ) for a new version the Code Bug - CodeBug Connect with a serious upgrade.(and the name Connect is highly appropriate with USB tethering and Wifi capability in this version. The technical specification (taken from their site https://www.kickstarter.com/projects/codebug/codebug-connect-cute-colourful-and-programmable-iot-wearable ) shows how much of an upgrade this is:

• 5x5 RGB LEDs with dedicated hardware driver/buffer
• Two 5 way navigation joysticks
• Onboard Accelerometer
• 4 GPIO legs, including high impedance sensing for detecting touch (think  MaKey MaKey TM)
• 6 Sewable/croc-clip-able loops. 4 I/O including analogue 1 power and ground
• 6 pin GPIO 0.1" header (configurable for UART/I2C/SPI, I2S or analogue audio out)
• QuadCore -- four heterogeneous processors
• 4MB Flash Storage
• 2.4GHz WiFi 802.11 b/n/g, Station and Soft AP (simultaneous)
• Experimental long range wireless 0.8km to another CodeBug Connect
• UART terminal access over USB
• High efficiency SMPS Boost convertor for battery (JST PH connector)
• High efficiency SMPS Buck convertor from 5V USB

Recently the early version of the Connects have been arriving and it is cool (IMHO). 

The getting going guide  https://cbc.docs.codebug.org.uk/gettingstarted/quickstart.html lives it up to its name and does a better explanation of doing this than I can provide here.

First I played with the USB and the blockly style programming tool https://www.codebug.org.uk/newide/ (see above) essentially producing a very slightly modified version of their starter code. You can perhaps see the Python style coming in with the while True coming in. Works well and it showed one of the different between this version and the older one; the LEDs are now colourful instead of red only. Programming it, while using the laptops USB to power it does lead to pulling the cable in and out to get the code to run - but that is fine and is clearly explained in the guide

You can connect it via wifi to a phone or a laptop so tried it with a phone. The getting started guide explains it well and the online editor allows you to program in micropython and example is shown below

import cbc

from color import Color

import time

while True:

  cbc.display.scroll_text(str(" Bug 1"), fg=Color('#f0ff20'))

  time.sleep(1)

 

They have even thought about security. I set my system to connect via wifi through my phone; but when I want to connect through my laptop I had to go through  the adoption process to try it on my phone and a laptop - sounds scary but it is well explained in the getting going guide and is relatively simple to do.

Looking forward to exploring the device a lot more, the guide also includes a number of code examples to play with and explore. A feature I particularly liked was seeing the block code rendered as python when using the editor on the phone.

All opinions in this blog are the Author's and should not in any way be seen as reflecting the views of any organisation the Author has any association with. Twitter @scottturneruon

Make yourself a virtual gallery

This short post builds on the previous posts (below), unless you have used A-Frame before please have a look at these:

WebVR playtime 1: Basics of setting up, images and rotating blocks.

WebVR playtime 2: video, 360 video and objects

Using Glitch  (https://glitch.com/) as a web development and hosting tool. We are going to create the start of a virtual Gallery, essentially 4 rectangles that images can be posted on, a cylinder that also images can be wrapped around and the floor and the sky.

To do it following is posted into the index.hml

<html> 

<head>   

 <script src="https://aframe.io/releases/1.2.0/aframe.min.js">   </script> 

</head> 

<body>   

  <a-scene>     

    <a-box position="-1 2 -1" 

rotation="0 -30 0" color="white" depth="2" 

height="4" width="0.5" 

src="https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2Fpanic.png?v=1573395380360"></a-box>     

   <a-box position="-4.5 2 -1" 

rotation="0 -30 0" color="white" depth="2" height="4" 

width="0.5" 

src="https://cdn.glitch.com/e7ab4c95-5e85-4dc0-9bee-da6f7e87efcf%2Fdiginorth1.PNG?v=1615066351771"></a-box>     

   <a-box position="-1 2 -6" 

rotation="0 -30 0" color="yellow" depth="2" 

height="4" width="0.5" 

src="https://cdn.glitch.com/425c1a98-7ba9-463d-817d-6b491a516246%2F97b3bf6d-ced1-4041-80d4-b6c9a98ba43d.jfif?v=1614341330757"></a-box>     

   <a-box position="-4.5 2 -6" 

rotation="0 -30 0" color="white" depth="2" 

height="4" width="0.5" 

src="https://cdn.glitch.com/e7ab4c95-5e85-4dc0-9bee-da6f7e87efcf%2Fvex2.gif?v=1615066487037"></a-box>     

<a-cylinder position="1 0.75 -3" 

radius="0.5" height="1.5" color="#FFC65D" src="https://cdn.glitch.com/e7ab4c95-5e85-4dc0-9bee-da6f7e87efcf%2FPicture1.png?v=1615066388587"></a-cylinder>     

<a-plane position="0 0 -4" 

rotation="-90 0 0" width="20" height="20" color="#7BC8A4"></a-plane>  

<a-sky color="white"></a-sky>   

</a-scene> 

</body>

</html>

Now to change the images all you need to do is change the URL in the src="". If you are doing this in Glitch it is easier often to copy the images into the asset folder and copy the URL produced.

Ideas to take this further 

• Rotate the cylinder so the image can be seen completely from a standing position.
• Wrap an image on the floor, sky or on a new shape.

All opinions in this blog are the Author's and should not in any way be seen as reflecting the views of any organisation the Author has any association with. Twitter @scottturneruon

Most viewed post - Feb 2021 on Robots and Physical computing Blog

Click on the links in red to read more.

Explaining the Tinkercad microbit Neural network

In a previous post, I looked at developing a neural network in Tinkercad around the Microbit (details available here ) and the whole model ...

Making a neural network in Tinkercad from Microbits

Tinkercad and microbit neural network In a previous post I produced a single neuron based around microbits in Tickercad - see here . To exte...

VR robot in a maze - from Blocks to Python

Recently I produced a post about playing with Vex Robotics VexCode VR blocks and the Maze Playground. The post finished with me saying I w...

Easy, Free and no markers Augmented Reality - location based AR

For a few years, I have been a fan of Aframe and AR.js - these are fantastic tools for creating web-based Virtual and Augmented Reality.  No...

Tinkercad and Microbit: To make a neuron

The free online CAD (and so much more) package Tinkercad  https://www.tinkercad.com/ under circuits; now has microbits as part of the list ...

Blog stats: Most read posts in January 2021

Popular Posts Playing with Marty the Robot: Set-up and go This post forms part of occasional posts about playing  with Marty the Robot V2 ( ...

Escape the Maze with a VR robot - Vex VR

You don't need to buy a robot to get programming a robot, now there are a range of free and relatively simple to start with robot simula...

Build yourself a Planet - Web VR

Using Mozzila's brilliant AFrame, a web-based Virtual Reality model of a planet with rings and include a moon with an image on it. St...

How to produce a Microbit neural network

This is really part two of a set of post  in response to a question from Carl Simmons ( @Activ8Thinking ) concerning building a   micro:bit ...

Speech Recognition in Scratch 3 - turning Hello into Bonjour!

The Raspberry Pi Foundation recently released a programming activity Alien Language , with support Dale from Machine Learning for Kids , tha.

All opinions in this blog are the Author's and should not in any way be seen as reflecting the views of any organisation the Author has any association with. Twitter @scottturneruon

Build yourself a Planet - Web VR

Using Mozzila's brilliant AFrame, a web-based Virtual Reality model of a planet with rings and include a moon with an image on it.

Step 1. Basic Planet
The first step is to set a new site in Glitch.com  and then add a white sphere on a black background.

<html>

  <head>

    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>

  </head>

  <body>

    <a-scene>

     <a-sphere position="0 1.25 -5" radius="3" color="white" >

      </a-sphere>   

      <a-sky color="black"></a-sky>

    </a-scene>

  </body>

</html>

 

 

Using the Aframe 'tags' to create a white sphere and to create a black background

Step 2: Rotate the planet and add some colour
Now we can add a surface to the planet by finding an appropriate image to wrap around the sphere. in this example, I used the site Solar Systems Scope (https://www.solarsystemscope.com/textures/) and downloaded an image of Jupiter's surface (https://www.solarsystemscope.com/textures/download/2k_jupiter.jpg).

 

(a)If you are using Glitch: This needs to be copied into the assets folder of the project and the URL generated (by left-clicking on the image when it is in the folder) copied.

(b)On you own site upload the image to the same folder as the webpage the ‘URL’ will be filename

(c ) Alternatively use this URL in either approach https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2F2k_jupiter.jpg?v=1573393224376

 

Now by adding src="" and in the speech-marks paste in the URL for the image; the image wraps around the sphere.

<html>

  <head>

    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>

  </head>

  <body>

    <a-scene>

     <a-sphere position="0 1.25 -5" radius="3" color="white" src="https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2F2k_jupiter.jpg?v=1573393224376"

               animation="property: rotation; to: 0 360 0; loop: true; dur: 10000">

 

      </a-sphere>   

      <a-sky color="black"></a-sky>

    </a-scene>

  </body>

</html>

 

Now to rotate it  add, also within the , section animation="property: rotation; to: 0 360 0; loop: true; dur: 10000" (see above or the code at the end of the post for more details).

 

Step 3: Adding ring
In Aframe if you nest another object with the <></> of another object it's position is set relative to the first object. This principle is going to be used here put a ring around the planet. The first stage is to add the ring object is used for this and a the same rotating animation is used. We are going to use a squashed doughnut shape <a-torus> to do this. One the webpage is running you will probably need use the down arrow key to zoom out to see the ring.

 

<html>

  <head>

    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>

  </head>

  <body>

    <a-scene>

     <a-sphere position="0 1.25 -5" radius="3" color="white" src="https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2F2k_jupiter.jpg?v=1573393224376"

               animation="property: rotation; to: 0 360 0; loop: true; dur: 10000">

          <a-torus position="0 0 0"

                 arc="360"

                 rotation="90 0 0"

                 color="white" radius="5"

                 radius-tubular="0.05"

                 animation="property: rotation; to:  90 0 0; loop: true; dur: 3000">

         </a-torus>

 

      </a-sphere>   

      <a-sky color="black"></a-sky>

    </a-scene>

  </body>

</html>

 

Step 4: Adding a moon
The process is really just combining elements of the steps 1-3. Create a new sphere,set the radius to something around 0.25 to 0.5; colour it with whatever you feel is appropriate, add an image (in the example code one has been added) if you want, set a rotation (it is is fun to play with these a bit and place the moon on the ring (setting position="5 0 0" in this case does this.

If the images are accessible as web sources this could be a great option.

<html>

  <head>

    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>

  </head>

  <body>

    <a-scene>

     <a-sphere position="0 1.25 -5" radius="3" color="white" src="https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2F2k_jupiter.jpg?v=1573393224376"

               animation="property: rotation; to: 0 360 0; loop: true; dur: 10000">

          <a-torus position="0 0 0"

                 arc="360"

                 rotation="90 0 0"

                 color="white" radius="5"

                 radius-tubular="0.05"

                 animation="property: rotation; to:  90 0 0; loop: true; dur: 3000">

              <a-sphere position="5 0 0"

                 rotation="0 0 0"

                 radius="0.5"

                 color="yellow" src="https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2Fpanic.png?v=1573395380360"

                 animation="property: rotation; to:  0 259 0; loop: true; dur: 3000">

              </a-sphere>

 

         </a-torus>

 

      </a-sphere>   

      <a-sky color="black"></a-sky>

    </a-scene>

  </body>

</html>

 

 

Step 5: Lets us add some text.

So we might want to put some text into the world we can do that with <a-text value=””>

<html>

  <head>

    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>

  </head>

  <body>

    <a-scene>

     <a-sphere position="0 1.25 -5" radius="3" color="white" src="https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2F2k_jupiter.jpg?v=1573393224376"

               animation="property: rotation; to: 0 360 0; loop: true; dur: 10000">

          <a-torus position="0 0 0"

                 arc="360"

                 rotation="90 0 0"

                 color="white" radius="5"

                 radius-tubular="0.05"

                 animation="property: rotation; to:  90 0 0; loop: true; dur: 3000">

              <a-sphere position="5 0 0"

                 rotation="0 0 0"

                 radius="0.5"

                 color="yellow" src="https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2Fpanic.png?v=1573395380360"

                 animation="property: rotation; to:  0 259 0; loop: true; dur: 3000">

              </a-sphere>

 

         </a-torus>

      </a-sphere> 

      <a-text value="Planet CCCU Computing" position="0 4 -2"></a-text>

      <a-sky color="black"></a-sky>

    </a-scene>

  </body>

</html>

 

We can get interesting effects if we add the text between  </a-sphere> and </a-torus> Try adding this in there. <a-text value="Planet CCCU Computing" position="0 3 -2"></a-text>

 

Have a play with altering the text and putting the line elsewhere in the code. What happens?

 

 

 

Step 6:

Now going to use an image to change the background. The image is "space" by fleskw is licensed with CC BY 2.0. To view a copy of this license, visit https://creativecommons.org/licenses/by/2.0 You will need to change the sky colour to a light colour for this to work. So change the sky line in the code to

 

      <a-sky color="white" src="https://cdn.glitch.com/425c1a98-7ba9-463d-817d-6b491a516246%2F97b3bf6d-ced1-4041-80d4-b6c9a98ba43d.jfif?v=1614341330757"></a-sky>

 

 

 

 

L

All opinions in this blog are the Author's and should not in any way be seen as reflecting the views of any organisation the Author has any association with. Twitter @scottturneruon

VR robot in a maze - from Blocks to Python

Recently I produced a post about playing with Vex Robotics VexCode VR blocks and the Maze Playground.

The post finished with me saying I would like to play with Python and do a Python version of it. Well it is actually very easy to do it.

You can do it in two stages from the block code. First click on the <> icon (lighted in the figure above and it gives a further view producing Python code that changes as you change the blocks. The last stage is to convert to a text project (button at the bottom right of the screen.

Example of the code.

myVariable = 0

def when_started1():

global myVariable

drivetrain.drive_for(FORWARD, 100, MM)

while not down_eye.detect(RED):

drivetrain.drive_for(FORWARD, 5, MM)

if right_bumper.pressed():

drivetrain.drive_for(REVERSE, 30, MM)

drivetrain.turn_for(LEFT, 20, DEGREES)

drivetrain.drive_for(FORWARD, 20, MM)

else:

if left_bumper.pressed():

drivetrain.drive_for(REVERSE, 30, MM)

drivetrain.turn_for(LEFT, 120, DEGREES)

drivetrain.drive_for(FORWARD, 10, MM)

else:

drivetrain.turn_for(RIGHT, 10, DEGREES)

drivetrain.drive_for(FORWARD, 10, MM)

wait(5, MSEC)

vr_thread(when_started1())

The code in action

This is possibly a nice transition tool going from block-based programming to text-based.

Related posts

https://robotsandphysicalcomputing.blogspot.com/2021/02/escape-maze-with-vr-robot-vex-vr.html

All opinions in this blog are the Author's and should not in any way be seen as reflecting the views of any organisation the Author h any association with. Twitter @scottturneruon

Escape the Maze with a VR robot - Vex VR

You don't need to buy a robot to get programming a robot, now there are a range of free and relatively simple to start with robot simulators to play with. Three examples are listed below:

- Make code for Lego EV3 https://robotsandphysicalcomputing.blogspot.com/2020/05/programming-robots-virtually-3-lego-ev3.html 

- iRobot simulator https://robotsandphysicalcomputing.blogspot.com/2020/04/programming-robots-virtually-2-irobot.html

- Vex robotics Vexcode VR  https://robotsandphysicalcomputing.blogspot.com/2020/04/programming-robots-virtually-1-vexcode.html 

It is the last one of these (https://www.vexrobotics.com/vexcode-vr) that is the focus of this post and return to hit, after an earlier discussion in https://robotsandphysicalcomputing.blogspot.com/2020/04/programming-robots-virtually-1-vexcode.html . 

Two of the nice things about the package, apart from being free, are it uses a Scratch-like programming language and it provides a 3D environment and models - playgrounds for a number of scenarios. 

So in this post, I will be discussing playing, or rather starting to play with the robot navigating a 3D maze (see the figure above). A feature I particularly like is you can change the views from an overhead view to an onboard version or one that seems to follow the robot.

So as I starting point I programmed it to essentially bounce along the walls keeping the wall on it's right and stopping when the downward 'eye' detects red on the floor for the end of the maze. The sensors include left and right bumper sensors; along with two sensors for detecting colours one facing forward and one down. The code I use is shown below:

It took 8 minutes to solve the maze - which is slow. I would be interested to see the solutions of others being shared. As a simulated robot programming system this is great fun and challenging, I would recommend having a play iot is free and available at https://www.vexrobotics.com/vexcode-vr. I want to have a go with the Python version to replicate or better the solution above (start it as a text project rather than a blocks project when starting a new project).

All opinions in this blog are the Author's and should not in any way be seen as reflecting the views of any organisation the Author has any association with. Twitter @scottturneruon

Explaining the Tinkercad microbit Neural network

In a previous post, I looked at developing a neural network in Tinkercad around the Microbit (details available here) and the whole model can be found at  https://www.tinkercad.com/things/hPV4nU0Asr5-smooth-bojo 

Quick overview of a simple neural network; at its simplest is has at least three layers of neurons where the output of the first layer's neuron, the input layer, is connected as an input to every neuron in the next layer, the hidden layer. The output of the neurons in the hidden layer connects as inputs to every neuron in the final output layer - which gives the outputs from the network The figure below gives an overview; neurons are processing units.

Well, sort of. Neurons as processing units is certainly true for the hidden and the output layers. It is not true though for the input layer; this is literally a layer of inputs with no processing going on. So going back to the first figure of tinkercad microbit neural network and comparing it with the overview of the neural network we can see the three layers.

The input layer is just the two switches.  Hidden layer neurons taks the inputs and processes them (the red abd green microbits in the image. finally, the yellow microbit takes inputs from the 'hidden layer neurons' is the output layer - a single output requires a single neuron in the output layer.

All of this can be found at https://www.tinkercad.com/things/hPV4nU0Asr5-smooth-bojo

Have a play,

All opinions in this blog are the Author's and should not in any way be seen as reflecting the views of any organisation the Author has any association with. Twitter @scottturneruon's