Forem: Hessler5

Web Scraping Using Image Processing

Hessler5 — Wed, 14 Feb 2024 20:14:54 +0000

My final project for my software engineering bootcamp was a web scraping site that uses image processing to scrape images from a given URL. The idea for this came when I was trying to think about a way to gather a large set of images to use as a machine learning data set. I knew that scrapping would be the way to go for this kind of collection but I was unhappy with how brittle traditional web scrapers were.

The scrapers back end uses Selenium, Pillow and the Chrome Driver to accomplish its task. The first step is Selenium opens up the page using the Chrome Driver in headless mode and injects custom css into the DOM. The custom CSS consists of a colored border around each image as well as a color key in the top left corner of the page. I also have CSS to make sure all images as well as the color key render on top of the page. As a note the color key is necessary because Pillow detects RGB values of pixels differently than how they render on the webpage. Once the CSS is injected Selenium takes a screenshot of the entire page.

The screenshot is then processed by the Python Pillow library where each pixel is scanned to see if it matches the color key in the top left corner. Once a pixel matches the key an algorithm checks to see if this pixel is the start of an image. If an image is detected the height and width of the image is found and then used to crop the page screenshot into the desired sub image.

The desired images are then zipped up and sent to the front end where a user can rename and download them. The images are all deleted on the back after the scrape is complete.

Advantages

The biggest advantage is Pixel Harvester can work on any website that uses image tags regardless of HTML structure or css selectors.
This scraper allows you to scrape the entire webpage without having to travel to each individual image link which lowers the scrapers overall footprint on the website.
The images that are scrapped are at the same resolution as how they appear on the website.

Challenges

The biggest challenge this web scraper faces is the challenge all web scrapers face and that is bot detection. Because many websites do not render in headless mode screenshots for those websites will be blank and there will be no images to capture. This scraper makes no attempt to subvert bot detection in order to obey the terms and service of websites that do not wish to be scraped.
With the wide range of how websites are coded some websites that may appear to work at first will fail to produce desired results. For example if a website utilizes the background img attribute to display images instead of using html img tags the scraper will not be able to detect those images and no results will be returned.

Friends List Implementation Using Python Flask

Hessler5 — Fri, 26 Jan 2024 17:45:21 +0000

Whilst working on a recent Flask project that required a friends list relationship I realized there was a lack of explicit examples on how to implement such a thing so below is the solution I came up with.

To begin this relationship is called a self-referential many-to-many relationship since a User can be related to many Users. This is what makes this problem tricky and can tigger errors in Flask. Many of the examples you see online for friends lists with flask I would describe as a follower connections because they just document a connection between users and nothing else. The trick with a friends list is that you need other attributes associated with the connection other than just foreign keys. These attributes are used to show things like the status of the request ie. has it been accepted ect.

Follower Example
To create a follower example you can just implement an association table.

follower_connection = db.table(
'follower_connections', metadata,
db.Column('follower_id', db.Integer, db.ForeignKey('user.id'), primary_key = True)
db.Column('followed_id', db.Integer, db.ForeignKey('user.id'), primary_key = True)
)

class User(db.Model)
    __tablename__ = 'users'

    id = db.Column(db.Integer, primary_key = True)

    followers = db.relationship('User', secondary = 
        friend_connection, 
        primaryjoin=id==follower_connection.c.follower_id,
        secondaryjoin=id=follower_connection.c.followed_id)

As a note on the above, you could potentially create a friends list architecture using multiple association tables where depending on the status of the relationship you move the relationship between a pending table and an accepted table but I found the below example more straight forward.

Friends List Example
To create the friends list I used an association table so that I could have other values associated with the relationship.

class User(db.Model)
    __tablename__ = 'user'

    id = db.Column(db.Integer, primary_key = True)

class Friendship(db.model)
    __tablename__ = 'freindships'

    id = db.Column(db.Integer, primary_key = True)
    friendship_status = db.Column(db.Boolean, default = False)
    requestee_id = db.Column(db.Integer, db.ForeignKey('user.id))
    acceptee_id = db.Column(db.Integer, db.ForeignKey('user.id))

   requestee = db.relationship("User", foreign_keys=[requestee_id])
   acceptee = db.relationship("User", foreign_keys=[acceptee_id])

The important thing to remember about the above example is to specify the foreign key relationship or else you will get an error. Once you have the relationship established you can use the boolean status or any other field you choose to establish the state of the friendship.

Tank Movement in Pygame

Hessler5 — Thu, 04 Jan 2024 20:34:45 +0000

Play Toy Tanks Here

For my phase 3 project at the Flatiron School I decided to make a tank game using the Pygame modules. This being the first game I have ever made there was quite a learning curve and I want to document some of the challenges I encountered regarding rotation and angular movement and how I solved for them.

Tank Rotation
Quickly upon diving into video game movement I realized moving a tank would be a tougher task then your average 2-D sidescroller. This being due to the fact tanks have to rotate 360 degrees and can move along any one of these angles. The first thing I tackled was rotating the tank Image. Un-intutivly when I used the pygame.transoform.rotate() method on my image it did not achieve the the results I intend. If you just use pygame.transoform.rotate() your image will appear to bounce around inside of a box because pygame is not keeping the center coordinates of the image the same post rotation.

As can be seen in the below images as you rotate the tanks image 30 degrees the center point illustrated as the blue dot is not consistent. Also not the expansion and contraction of the image rect as the tank rotates illustrated in green.

The way I fixed this was creating a source of truth image that never gets drawn but is used to create a source of truth rect. Every time the rotated image gets rotated you updated the center of the updated images rect to be the center of the source of truth rect. Then you blit the rotated image to the screen with the rotated rect. That way the tank always appears to spin around the same point. As an added note as the tank moves around the screen I made sure to updated the position on both the source of truth rect and the the rotated rect so that the centers of the two rects would stay consistent.

Below is the tank rotating 30 degrees again but with the center updated every rotation.

Tank Movement
After figuring out rotation I tackled the movement. In a typical top down game movement is fairly straight forward, for up/down movement increment the Y cord and for left/right increment the x cord. However when moving at a 35% angle form the origin with a velocity of for example 1 how much do you increment x and Y? This is where trigonometry comes in but luckily pyagme has some built in tools to help with the math.

Pygame.Vector2() is what I used to make the tank movement trivial. I wont attempt to define a vector here as there are much better sources online but for the purposes of this blog a vector is just a (x, y) coordinate that when compared to the origin (0, 0) you can draw an arrow showing both distance and direction. Along with pygame.Vector2() you can use the .rotate(angle) method which will rotate you vector for you without having to do the math yourself. So if you create a vector where x is 0 and Y is your forward velocity. Then rotate the vector by the current rotation of the tank you will get the corresponding x and Y increments. You can then add this onto the center coordinate of the rectangle you are using to blit your tank to the screen and presto your tank will be moving in the appropriate direction! Here is a great Stack Overflow response that helped me understand this topic.

The circle around the tank in the below image shows the incremental distance the tank can travel in at any angle. The black dot illustrates a radian of (0, velocity). The green dot show the radian updated for a rotation of 30 degrees. If you then add the x of the new radian to the x cord of the tank center and likewise for y the tank will move in the appropriate direction.

A Few Added Notes
If you want your tank to shoot in the angle you are facing you would use the same logic as how you moved the tank. If you want your bullet to bounce off things just track the x and y collision separately. If x collides multiply the x vector cord by a value of -1 and likewise for the y.

I would strongly encourage any one making a tank game to use a mask for collision detection on the tank. I wont go into how to use masks in this blog but here is a great Youtube video I used to understand them. If you use the rect of a rotated tank instead of a mask for collision your tanks hit box will be enlarged when the tank is rotated as illustrated above and it will make movement and hit detection very clunky.

RGB vs. Hex colors

Hessler5 — Thu, 07 Dec 2023 19:24:59 +0000

Whilst working on a recent javascript browser application involving color selection I was curious about what the difference between RGB and Hex colors were. Below is an aggregation of the differences I found plus some code to convert between the two.

Transparency
The first and only material difference between RGB and Hex is that you can easily add a transparency value to RGB. RGBA() in javascript/CSS allows you to specify a transparency value thats between 0 and 1 with 1 being full opaque. ex. RGBA(255, 255, 255, .5)

RGB Readability
RGB is easier for humans to interpreter as each value corresponds to the intensity of the red, green, or blue values being emitted by the LCDs of the screen. The min value being 0 and max value being 255. 0 being no light is emitted and 255 meaning the the pixel is at full intensity for that color (assuming you are using an LED screen). 255 being the max value as the human eye cannot detect more than 255 levels per color. Conveniently colors are often stored as 8 bits which 2^8=256 options per color.

Hex Convenience
The only explanation I was able to find for the existence of hex color values was that they are easier and shorter to write. Hex is just the 0-255 value from rgb converted to base 16 or hexadecimal. With hexadecimal 10, 11, 12, 13, 14 and 15 correspond to A, B, C, D, E, and F in that order. This allows a 3 digit color to be represented as only 2 digits in hex making a hex value only 7 digits long once you account for the # prefix.

Hex to RGB Conversion

const HEXtoRGB = hex => {
//checks for short hand hex values and converts to unshortened version
    hex = hex.replace(/#/g, '');
    if (hex.length === 3) {
        hex = hex.split('').map(function (hex) {
            return hex + hex;
        }).join('');
    }
//regex returns variable results which is an array of [total hex value, first hex value, second hex value, third hex value]
    var result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})[\da-z]{0,0}$/i.exec(hex);
//ParseInt(x, 16) returns x as a base 16 number
    if (result) {
        var red = parseInt(result[1], 16);
        var green = parseInt(result[2], 16);
        var blue = parseInt(result[3], 16);

        return [red, green, blue];
    } else {
        // invalid color
        return null;
    }
};

RGB to Hex Conversion

const RGBtoHEX = rgb => {
//checks to make sure rgb is valid and converts to an array with colors split out
    rgb = rgb.match(/^rgba?\(\s?(\d+),?\s?(\d+),?\s?(\d+),?\s?\/?\s?(\d?\.?\d+|\d+)%?\)$/i);
//initializes hex variable
    let hex = '';
//if rgb is a valid rgb format the below will make sure the rgb value is between 0 and 255
    if (rgb) {
        var red = rgb[1] < 0 ? 0 : rgb[1] > 255 ? 255 : rgb[1];
        var green = rgb[2] < 0 ? 0 : rgb[2] > 255 ? 255 : rgb[2];
        var blue = rgb[3] < 0 ? 0 : rgb[3] > 255 ? 255 : rgb[3];
//concatenates # + each color value in hex
        hex = "#" +
//toString takes a paramater of base which is inherited when toString is used on a number
//The "0" and .slice(-2) are in case the hex value is 1 digit the 0 is required to keep the format correct
            ("0" + parseInt(red, 10).toString(16)).slice(-2) +
            ("0" + parseInt(green, 10).toString(16)).slice(-2) +
            ("0" + parseInt(blue, 10).toString(16)).slice(-2)
    }
    return hex;
};

sources:
Youtube video explaining LED displays: https://www.youtube.com/watch?v=uyLDA9QT8EY&ab_channel=BasicsExplained%2CH3Vtux

Historical source of RGB and hex particularly the response from Philip Yip:
https://www.quora.com/What-is-the-history-behind-why-we-use-hex-color-codes

Hexadecimal colors:
https://en.wikipedia.org/wiki/Hexadecimal

Converting hex to RGB:
https://www.pluralsight.com/blog/tutorials/understanding-hexadecimal-colors-simple#:~:text=a%20hex%20code%3F-,Hex%20color%20codes%20are%20one%20type%20of%20HTML%20color%20code,of%20values%20in%20binary%20code.

Website with full list of color conversions:
https://www.html-code-generator.com/javascript/color-converter-script

Learning to Code with Lego

Hessler5 — Tue, 14 Nov 2023 20:39:45 +0000

Comparing coding to playing with Lego is a well accepted analogy in the software development space. I think there is good reason for this as each function, variable, conditional statement, ect. can be viewed as a block of Lego that can be used to create a larger composition. I think you could take the analogy a step further and bring it into the real world where you could teach the fundamentals of coding structure using Lego as the framework.

After learning the basics of coding as well as observing others around me learn to code I think people pick up very quickly how each individual component of code work. It is rather easy to remember the syntax of a for loop or how to declare a variable but its a much bigger step to know how to assemble those parts into a functioning piece of code. This is where a Lego framework could be used as a stepping stone into how all of these pieces work together.

Below is an example of how you could represent the two sum algorithm with legos as a way to ease into the problem.

Two Sum description from LeetCode

Given an array of integers nums and an integer target, 
return indices of the two numbers such that they add 
up to target.

You may assume that each input would have exactly 
one solution, and you may not use the same element twice.

Problem Illustrated in Lego

Here someone would be presented with all of the lines of the Two Sum problem represented as a pile of lego and a framework that needs to be filled out.

Problem Solved in Lego

It would be up to the person to fit the bricks into the framework in the correct order to make the code run smoothly.

Code Solution

var twoSum = function(nums, target) {

  const obj = {};

  for (let i = 0; i < nums.length; i++) {
    const complement = target - nums[i];

    if (obj[complement] !== undefined) {
      return [obj[complement], i];
    }

    obj[nums[i]] = i;
  }

  return [];
};

Creating Product Cards from an API

This format could also be scaled up to visualize more complex code such as adding javascript to a webpage. The next example shows a more involved coding problem where we need to display text content from an array provided by an API.

Problem Illustrated in Lego

Problem Solved in Lego

Code Solution

fetch("APIurl")
.then(resp => resp.Json())
.then(data => {

let containerDiv = document.querySelector("div")

for(let i = 0; i < data.length; i++){
let newCard = document.createElement("p")
newCard.textContent = data[i].content
containerDiv.appendChild(newCard)
}
})

In summary I think you could use an analogy like the above to bridge the gap between memorizing code syntax and actually using code to create desired outcomes. The problems could be scaled up or down based on where you were at in your coding journey and the lego bricks could represent code of varying size as well. There is also potential here for adaption to an educational game or web application.