home..

PixelPartner Individual Review

October 2023 (1616 Words, 9 Minutes)

Image to base64 writeup:

Summary:

Downloading blank image bug:

We thought that the following line in the code already solved the issue:

if (file) {
    const reader = new FileReader();

if (uploadedImage.width == 0) {
    //sends alert
    alert('Please upload an image before trying to download');
        return;
}

Summary

Backend history:

Link to the commit

Summary:

Displaying the history

Link to the commit

This is the code that I made using Mr. Mortensen’s example:

<script>
    //setting up url
    const apiUrl = "http://localhost:8017/api/pixel-partner-api/get_database";
    let images = [];
    //fetches data from the url
    function fetchDatabase() {
        fetch(apiUrl)
        //parsing as json
        .then(response => response.json())
        .then(response => {
            images = response;
            //gets the table id
            table = document.getElementById(imageTables);
            //loops through and fills in the table
            images.forEach(entry => {
                const row = table.insertRow();
                const nameCell = row.insertCell(0); 
                const functionCell = row.insertCell(1); 
                const imageCell = row.insertCell(2);

                nameCell.innerHTML = entry.name;
                functionCell.innerHTML = entry.function;
                imageCell = entry.image;
            })
        })
    }
</script>

<h2>Image upload history:</h2>
<table id="imageTables">
    <tr>
        <th>Name</th>
        <th>Function</th>
        <th>Image</th>
    </tr>
</table>

Most recent code (we are currently working on this)

<script>
    //setting up url
    // const apiUrl = "http://localhost:8017/api/pixel-partner-api/get_database";
    const apiUrl = "https://fte.stu.nighthawkcodingsociety.com/api/pixel-partner-api/get_database";
    let images = [];
    //fetches data from the url
    function fetchDatabase() {
        fetch(apiUrl)
        //parsing as json
        .then(response => response.json())
        .then(response => {
            var images = JSON.parse(response).reverse();
            console.log(images)
            //gets the table id
            var table = document.getElementById("imageTables");
            //loops through and fills in the table
            for(var element of images){
                var row = table.insertRow();
                var nameCell = row.insertCell(0); 
                var functionCell = row.insertCell(1); 
                var imageCell = row.insertCell(2);

                nameCell.innerHTML = element.name;
                functionCell.innerHTML = element.func;

                const fileExtension = element.name.split('.').pop();

                var Imagecell = new Image();
                Imagecell.src = 'data:image/' + fileExtension + ';base64,' + element.image;
                imageCell.appendChild(Imagecell)

                console.log(element);
            }
        })
    }
    //calls function to fetch database
    fetchDatabase();
</script>

<h2>Image upload history:</h2>
<table id="imageTables">
    <tr>
        <th>Name</th>
        <th>Function</th>
        <th>Image</th>
    </tr>
</table>

Clearing the image history

Link to frontend commit Link to backend commit

# Initialize DB
def initializeDatabase():
    # Global so all functions can use
    global engine, Session, session

    # Create a database connection and session
    engine = create_engine('sqlite:///database2.db')
    Session = sessionmaker(bind=engine)
    session = Session()

    # Create the database table
    Base.metadata.create_all(engine)

def clearDatabase():
    initializeDatabase()
    session.query(Images).delete()
    session.commit()
    session.close()

class _ClearDatabase(Resource):
    def get(self):
        clearDatabase()

api.add_resource(_ClearDatabase, '/clear_database')

<button onclick="clearDatabase()">Clear Image History</button>
<button onclick="refreshPage()">Refresh Database</button>

    function clearDatabase() {
        fetch(apiUrl2, {method: 'GET'})
        .catch(err => {
            error(err + " " + response.status);
            });
    }
    function refreshPage() {
        window.location.reload();
    }

Summary:

Our team teach

Other team teaches

College Board Quiz

I got a score of 57/66 on the College Board quiz, so there’s certainly a lot of mistakes that I could touch on. For the sake of time, I want to only review the questions that I missed the concept instead of just silly mistakes.

Q30

Question 30:

Freeform

Question 33:

CB

Question 43:

CB

Question 47:

The rest of the corrections are about non conceptual mistakes

CB

Question 22:

CB

Question 31:

CB

Queston 52:

CB

Question 56:

CB

Question 66:

Extra Credit:

Reflection

I came into this class with little to no coding experience. At first, it felt like I was trapped in a maze with no idea of how to get out. However as the weeks rolled by, I started to navigate through this maze with the aid of my teachers, classmates, and friends and my knowledge slowly started to grow. Over the past almost 12 weeks, I’ve found myself starting to get over the learning curve and make my way though this maze. Now that I’m approaching the end, I know that there will be more challenges in the next trimester of this class, but I am ready to tackle them as a stronger, more resilient person than I was this summer. This experience has been super rewarding for me and I can only thank the people who have supported me throughout this journey. I feel nothing but anticipation and excitement for the next trimester of this class, and I hope that I can finish this year as a fully fledged coder ready to take on CSA.

© 2024    •  Powered by Soopr   •  Theme  Moonwalk