Robots and Physical Computing

Friday, 2 April 2021

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

Sunday, 14 March 2021

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

Saturday, 6 March 2021

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>

</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

Sunday, 28 February 2021

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

Friday, 26 February 2021

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>

</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>

</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>

</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>

</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>

</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>

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

Monday, 22 February 2021

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