Adventures in Coding: Javascript

Adventures in Coding: Javascript

Following some successes with the Bet Generator in both Python & C I turned my attention to the project work with the kids from Little Sandbox. The key elements that would be needed for the Kerbinator project, as far as I could tell were:

  • A map,
  • a database that stored the drop kerb locations in the form of coordinates,
  • the means to collect the coordinates and add them to the database
  • markers added to the map from the database

All sounds pretty complicated.

I’d been advised to use MongoDB to store the data and NodeJS as the server. So I found a tutorial to create a simple form based app using Node and Mongo and followed it. And then a few weeks later i followed it again because I couldn’t remember any of it.

The key things I learned here was the way different javascript files relate to each other, how to install node and a variety of other services such as Express, Mongo and Mongoose and even how to do some validation and check for logged in users. All useful stuff and i’d highly recommend the tutorial as it was very thorough and easy to follow.

Now I’m not about to create the Kerbinator app for the kids, but I was aware that in order to support them with their project and set them tasks to help them learn what to do, I needed to know how to do it myself. I wanted to give them the skills to help them work out how to bring the project to life.

One of my favourite things to do is find TV and Film locations. This started when we went to New York in 2015 and spent 12 days wandering around Manhatten getting photos of ourselves outside all kinds of obscure locations – the house from Breakfast at Tiffany’s, Leon’s Apartment and obviously the Ghostbusters’ Fire Station. Since then, wherever we go in the world we check out any TV or Films from the area and watch them so we can go scouting for their locations. It’s become something of a game for us, trying to find the exact camera angle to recreate a particular shot.

Google maps is great for storing locations but it has so many other locations also added so I decided I would make my own Movie Locations App.

I’m not going to go through all the code here as it’s still an ongoing work in progress, however if you’re interested, you can view the files on GitHub.

So for the Movie Location App I wanted to have the following:

  • An online form on which I could input the coordinates of the locations along with the title of the film or TV show and a description of the location itself.
  • A database to store the information
  • Map markers.

I followed the instructions to get the basics set up, the required node modules, MongoDB and the initial structure of files, which consisted of:

  • config.js
  • moviemap.js
  • package
  • package.json
  • package-lock.json
  • public
    • index.html
    • style.css
    • scripts
      • moviemap_map.js

And using the same format as before I adapted the form and the mongoose schema to change the database and form fields to store longitude, latitude, film, description.

The form worked, I could complete the form and see the data being added to the database but I couldn’t get the map to display markers.

I called in some help from Joe, our volunteer at Little Sandbox. Or to put it another way I cheated..!

What I learned is that there’s no set way of doing things, there are all kinds of ways to achieve the same thing. Joe had been working with the kids on Kerbinator and already has the map markers and database set up so he gave me access to the files and I was able to incorporate his code with my code to finally get my map working the way I wanted. To this day I don’t know why my marker code wasn’t working, but Joe’s code was much more elegant than mine so I went with it.

So at this stage, I have a map, with a form for inputting location and film info. A database that stores the information and markers being added to the map from the database.

That feels like a good place to pause. Now i want to either work on adding information windows so i can easily see what each location is, or in the interest of understanding Kerbinator, add in a geolocation function for writing device coordinates to the database… but that’s for another day.

Make your own: Brookside board game

Make your own: Brookside board game

In 2017 my other half (OH) and I, started watching Brookside from the beginning. We are currently at the tail end of 1986 – one of Brookie’s finest years, featuring storylines such as: Tracey Corkhill’s affair with her teacher, Sheila’s rape, Gordon Collins coming out as gay and Heather’s husband dying from a drug overdose.

My OH picked up the Downton Abbey Destination board game from a charity shop and we played it several times over Christmas, enjoying the style of play.

Having undertaken some research I discovered that there is a whole range of destination games, including New York and London and that the original game was created by a taxi driver.

So naturally, I decided to make a Brookside one for his birthday.

The board

Obviously I needed more locations than just the 5 houses on Brookside close so I added places that had provided the setting for various storylines over the first 4 years:

  • The Swan (The local pub)
  • The Woods (Behind the close)
  • The Bookies (Edna and Ralph like a cheeky bet)
  • The tool hire shop (Barry & Terry set up)
  • The train station
  • Gav’s Shed (which he builds from old doors in his back yard)
  • The Union (Where Bobby works as an elected Union rep)
  • Church
  • University (Where Karen Grant studies)
  • Hospital (Where Sandra works)
  • The DSS (Where Damon signs on)
  • Court (Where George Jackson is found guilty)
  • Brookside Comp (The local high school)
  • The Park (Where the summer carnival takes place)
  • The Pier Head (Where Karen interviewed Paula Yates on a boat)

I sketched a design on paper before creating it in inkscape. I used the grid settings set at 25mm wide and made each square a potential space. I didn’t want it to be too easy to get around, so I threw some obstacles in the way.

The most important thing was the layout of the 5 houses and the T junction at the end of the close, as well as the distinctive bend in the road.

After that I took artistic license with the location of places on the board.

You can download the file here:
Game Board

I used 4 sheets of 3mm plywood 300 x 400.
Once cut and etched I attached the top pieces together using strong gaffer tape. I then attached the two bottom pieces together. I the attached top to bottom but only on one side to allow for easily folding down to A3 size.

I printed off a sheet of icon stickers which represent post and RPA cards (see below) I placed these at random locations on the board. I had intended to engrave these but I completely forgot.

The playing pieces

I chose cookers for the playing pieces as a nod to Gav and Petra’s arrival on the close.
I designed them using tinkercad and printed them on the 3d printer.

Tokens

I decided the currency in the game would be bevvies. So I cut a load of beer tokens.

Download the pdf file here. I cut 200 tokens which took about 4 hours in total.

Download the dxf and stl files (board game, beer token and playing pieces)

The cards

The point of the game is to travel around the board visiting locations and earning tokens for completing a task. Naturally I wanted these tasks to be in some way relevant to Brookside so for example one of the tasks at the courthouse was “Free George Jackson”, one of the tasks at No. 8’s Garage was “Catch Sinbad stealing food from Annabel’s freezer.”

Tasks / Location cards would be worth 1, 2, 3 or 4 bevvies. I wanted to make sure there was a good mix of each number and a spread across the locations. Although, I may have been slightly biased towards No.10 given that so much exciting stuff happened there, it got more 4 bevvy cards than the others. I largely stayed within 1982 – 1986 but where I knew about future events I did make reference to them occasionally, for instance, “Help lay new flagtones” at number 10 – as a small nod to the later body under the patio storyline.

In addition to the location cards I wanted chance cards. If you imagine the community chest and chance cards in Monopoly, the Downton Abbey equivalents were “Carson Cards” and “Post Cards”. I maintained the Post cards but named the other cards Rate Payers Association Cards (in fact, one of the Number 8 location tasks is to join the rate payers association – worth 1 bevvy!).

I created a spreadsheet with 6 tabs for each of the cards – with locations divided by reward value.

I then created a mail merge with 16 cards per sheet, taking the data from each tab. I also added in a image file on each sheet, whether that was 1, 2, 3 or 4 bevvies.

I printed the RPA cards on green card, the locations and post on white.

I created back designs for each too – the location cards displaying the Brookside Close street sign, the Rate Payers Association cards using an adapted Brookside logo and the postcards using a Liverpool post image.

You can download all the merged files or the component parts if you want to make up your own

1 bevvy
2 bevvy
3 bevvy
4 bevvy
Location backs
RPA tasks
RPA backs
Post tasks
Post backs

My final task was to make a box. I ordered a couple of sheets of A1 card and used the following dimensions:
base rectangle width 41cm x 31cm

I made the sides 5cm high – so i doubled this up so the sides could be folded over to make them sturdier. I also added wings to the longer edges which could be stuck down under the flap of the short edges to maintain the structure.
For the lid I made the box larger by 2mm.

(Sorry – I forgot to photograph this process and I did it all by hand with a pencil and ruler so I have no design files to link to).

Finally I created a collage of Brookside images annd placed the logo on top. I stuck 2 A4 sticker sheets together and fed it through the A3 printer and then placed these on the lid.

And there you have it. A Brookside board game.

We have played this so many times already and we love it.

Make Your Own: Bet Generator Money Box

Make Your Own: Bet Generator Money Box

In this make I’ve built a money box with a bet generator using an Arduino. For more information on why you can read previous blog entries and follow the progress I made in working out this build. But here I present you with the instructions to make something similar.

For this make you will need:

  • Arduino
  • LCD1620 screen
  • Header pins
  • Breadboard
  • Male to female jumper wires
  • Male to male jumper wires
  • Female to female jumper wires
  • Push button
  • 220 ohm resistor
  • 3mm plywood
  • 2 M3 bolts
  • 3 M3 nuts
  • 2 zip ties
  • Velcro strips
  • Prototyping board

You’ll also need access to:

  • Soldering iron
  • Laser Cutter
  • Scissors

 

The Circuit

Step 1: Solder the pin header to the LCD1602

Step 2: Assemble the Arduino and screen on a breadboard as follows:

From the LCD screen:

  • Both end pins (VSS & K) go to ground and the next pins along (VDD & A) go to 5V
  • VO goes to the middle pin on the potentiometer
  • RS goes to Arduino Digital Pin 12
  • RW goes to ground
  • E goes to Arduino 11
  • D4 goes to Arduino 5
  • D5 goes to Arduino 4
  • D6 goes to Arduino 3
  • D7 goes to Arduino 2

The push button:

  • connect the resistor between the positive leg and 5V
  • connect ground leg to ground
  • connect positive leg to Arduino 8

The potentiometer

With the turner facing you the left pin goes to 5V and the right pin goes to ground.

Finally:

Connect the breadboard positive and negative rails to  the Arduino 5v and Gnd pins.

The Code

Connect the Arduino to a computer and log in to the online Arduino web editor or use the IDE to create a new sketch.
Copy and paste this code and upload it to the Arduino.


      #include 
LiquidCrystal lcd(12, 11, 5, 4, 3, 2); //set the LCD pins to Arduino rs, E, D4, D5, D6, D7

  char * scores [] = {"1-0","2-0","3-0","4-0","5-0","2-1","3-1","4-1","5-1","3-2","4-2","5-2","4-3","5-3","5-4"};
  char * goaltime [] = {"First","Last"};
  char * player[] = {"Salah", "Firmino","Mane","Shaqiri","Milner"};


long betscore;
long bettime;
long betplayer;



// constants won't change. They're used here to set pin numbers:
const int buttonPin = 8;     // the number of the pushbutton pin


// variables will change:
int buttonState = 0;         // variable for reading the pushbutton status

void setup() {
  lcd.begin(16, 2);
  lcd.clear();
  
}
void loop() {
  pinMode(buttonPin, INPUT);
  buttonState = digitalRead(buttonPin);
  betscore = (random(sizeof(scores)/sizeof(char*)));
  bettime = (random(sizeof(goaltime)/sizeof(char*)));
  betplayer = (random(sizeof(player)/sizeof(char*)));
   if (buttonState == LOW) {
    lcd.setCursor(0, 0);
    lcd.print(scores[betscore]);
    lcd.setCursor(0, 1);
    lcd.print(goaltime[bettime]);
    lcd.setCursor(6, 1);
    lcd.print(player[betplayer]);
    delay(5000);
    lcd.clear();
   }  
   else {
     lcd.clear();
   }
}  

    

Casing

Assuming it all works you can move on to making a casing for it.

Download file – Case design

Cut the design using a laser cutter.

Assembly

While using the breadboard you probably used male to male jumper wires. We can now attach wires directly to the pin header on the screen using male to female wires. We can also connect the potentiometer to the screen using a female to female wire.

I used 2 pieces of prototyping board and soldered all the ground wires  to one and all the 5V wires to another, ensuring there was a connection between all the wires. Remember the resistor also connects to 5V so you may need an extra wire between the resistor and the prototyping board.

Plug in the Arduino again to make sure it is all connected and working and then assemble the box.

  • I started with sticking the USB socket through the square hole on the side panel.
  • Push the button through the round hole on the top piece and the LCD screen through the large rectangle hole. If there’s a nut for the push button add this to the front to secure it in place. The screen should be a snug fit so won’t require screwing.
  • The hole on the remaining side panel is for the potentiometer.

Glue all the side pieces together with the base and then carefully bundle together all the wires and fit them into the space before adding the lid. Do not glue this in place as you may need to access the wires inside in future.

If the wires push the lid up secure it with elastic bands.

Plug the Arduino in and check it’s still all working….

 

 

Optional Money Box

I used the following design for the money box which includes a space for depositing money and a hatch at the back to retrieve the money. I secured the betting generator box to the top using velcro strips. And then cut a fancy front piece for decorative purposes.

Download – The money box design file

Download – The front piece design file

  • Use zip ties to attach the hatch to the box forming hinges
  • Attach the small rectangle with 2 holes to the outside of door plate using a bolt and secure it on the inside with a nut.
  • Thread a bolt from inside the money box through the 3mm hole above the hatch, secure with a nut and then push through the remaining hole of the small rectangle and secure with a nut. This will be the open and closing mechanism for the hatch.
  • Glue all the sides together.
  • Glue the front piece to the front of the box and use velcro strips to secure the bet generator to the top of the money box

 

Adventures in Electronics: A betting generator

Adventures in Electronics: A betting generator

In my last update, I’d just written the code in C to randonly create a bet determining the score line by which Liverpool would win a match and who would score either the first or last goal. Having already written it in the (quite frankly much easier) Python, I had come up against some issues getting my LCD screen to work with a Raspberry Pi and so had turned to Arduino, despite my reluctance to attempt to write anything in C.

Having written the code and successfully tested it printing to the console, I logged into the online Arduino IDE and copied the code into a sketch that I had previously used to test the LCD screen. However, when I came to verify it, it failed. Repeatedly. Even though the code worked for the console.

I did some more googling and came across this instructable for Arduino that randomly chose a name from a list and printed it to the LCD.

I downloaded the sketch and tested it with the Arduino which worked fine – although it automatically changed the name every 5 seconds which wasn’t what I wanted, I wanted mine to only generate the information on a button press.  So I set about changing the code gradually. First of all I copied the format for generating the array of names and repeated it twice so I had the scores, timing and player.

So far so good, the information being shown was now random bet information, but it was automatically changing every 5 seconds. I needed to work out a button press so I used the sample digital button sketch and added that to my code, I removed all the remaining code from the previous example and would you believe it? It worked.

Then came the casing.

I measured all the parts, generated a box on box-designer and added some cut outs for the screen, potentiometer and USB cable.

I used 2 bits of protyping board and soldered all the ground wires to one and all the 5V wires to another

I swapped out the male to male jumper wires for male to female and connected the data pins to the Arduino.

And I chose a push button and soldered the LED and the push button pin wire to the positive terminal.

I plugged the Arduino in and nothing. Well, the screen came on but there was no data being pushed to the screen. It was blank. I was devastated. I tried rebuilding it on a breadboard and again, nothing happened. I was gutted,

I took everything home with me with a view to tackling it again over the weekend.

It was about 12:30am while in bed that it hit me – I’d forgotten to ground the RW pin. Maybe that was it. My very understanding other half said “Do you want to to test it?” And 2 minutes later I was enjoying my hot chocolate in bed, watching Brookside surrounded by wires.

Except, I couldn’t tell whether the problem was fixed because actually, the potentiometer was no longer working. I tried a different one, still nothing. I couldn’t adjust the screen contrast to see if the data was being written to the screen.

Another blow. The only thing I could think of, was that the connections on the LCD had been damaged. I would need to try another screen.

So Saturday afternoon, I head over to work, I assemble the whole thing again on a breadboard and again, nothing. So I tried an alternative screen and that worked. My hunch, may have been correct. So after soldering a set of header pins to the screen I reconnected all the wires I’d soldered the day before including an additional ground pin from RW and finally the whole thing worked.

I quickly assembled the box and all the wires before it could somehow change its mind! Throw in a Frank Spencer moment where I squeezed the glue too hard and the whole thing burst over the desk, chair and floor, and you have a faithful account of my bet generator adventure.

The finished make has put me in such a great mood. This is my first make that involved coding, electronics and crafting and I’m so proud of myself I could burst.

If you would like to make your own the full instructions are here.

 

 

 

 

 

Adventures in C – A betting generator (take two)

Adventures in C – A betting generator (take two)

My Raspberry Pi powered betting generator hit a bit of a roadblock today. I found a batch of LCD1202 screens and wired one up to the Pi. I found a whole load of tutorials and set up guides for using this screen with a Raspi and python, but no matter how many I tried, I could not get the screen to display anything. The contrast was fine, sometimes it would display a random collection of characters but never what was being generated by the script.

On the second day of piscreen adventures, I learned how to SSH into the Raspi from my laptop because I was finding it difficult to type in code on the Raspi while reading the code on my laptop, the monitor I was using was small and blurry, it wasn’t a fun experience. Still accessing the pi remotely made me feel like some kind of hacker which kept me amused for longer than it should have. Needless to say though, eventually the persistent failure of the screen to play with the Raspi was making me particularly frustrated.

During my travels around the web I found a whole load of tutorials for Arduino too, so I dismantled the Pi and wired up the Arduino instead. Once I got the Arduino IDE installed I found the LiquidCrystal example and sent it to the board… guess what? it worked first time. The LCD screen mocked me with its Hello World and a number displaying how many seconds since the code ran.

Ok so at least we know the screen works.

But my bet generator is written in Python and I do not know C at all. In fact, I was so reluctant to try recreating it in C that I RETURNED TO THE PI.

My head is in my hands even now, wondering why on earth I wasted a further few hours trying to make the pi work.

Eventually, I gave up and decided it was time to at least investigate C. Starting with the standard Hello World and jumping right on up to creating a betting generator. I found a script for creating a random sentence generator and, I suppose, I hacked it 🙂 There was a lot of false starts and errors but eventually it compiled and ran.

The results of the bets are here:

And I’ve already assembled the Arduino, so now I just need to work out how to push the results to the LCD screen instead of the console.

Adventures in Python: A betting generator

Adventures in Python: A betting generator

This week, I was having a discussion with my other half about football and money and the subject came round to betting. Whenever he goes to the match his mates all chip in a few quid and they put a bet on. The bet is usually the final score AND either the first or last goal scorer. Needless to say they never win any money.

We realised that while it is possible to have small windfalls through betting, it is so random, and obviously so stacked against you, otherwise how would bookmakers earn a living, that the amount you have to spend cumulatively far outweighs the amount you might win.

We decided to make that money work for us instead – we will enjoy the excitement of a bet while saving money.

Uh-oh! I feel a maker project coming on… Introducing Ralph & Edna’s Fixed Odds Betting Shop (named after Edna Cross and Ralph Hardwick from Brookside – they loved having a cheeky little bet)!

Both of us will place a £10 bet on a randomly generated final score AND first or last goalscorer. If either of us win, we win £20. If we lose the money goes into a savings box. At the end of the football season we’ll use whatever we have to go on holiday or something. There’s still a small chance one of us will win some money each week, but the house definitely wins most of the time – just in our case the house is ours so we win either way!

The make

Ultimately I want to make a money box that represents the house/betting shop. But I want to include a button that, when pressed, will display the random bet each of us is making.

I’m imagining this will use a Raspberry Pi or Arduino (depending on what we have lying around the makerspace that I can test on) and a 16 character, 2 line LCD screen.

For now though I’ve created a python script that will generate the bet for me.

I initially followed a tutorial for a magic 8 ball (be careful though if you’re trying it – this code is for python 2 but my laptop uses python 3 so there are a few discrepancies in the tutorial namely raw_input has been replaced by input and print now requires parentheses)

I noticed the random module was appearing a lot in the various forums and comments so I had a read about that here

It took a few attempts but eventually I came up with a bit of code (see featured image) which, miraculously worked for me.

Here’s the bets it generated…

Now I just need to learn how to run it from a button press and output it to the LCD screen and I’ll have my bet generator gadget!