Arduino Simulator [3] Day 34

This post follows on the progress of the previous days. If you want to read the start of this project here is part 1, and here’s part 2. Now on to this project

So as you can tell this is one hell of a long project [it freakin has three parts for crying out loud]. I realized while working on this, I keep forgetting what I have to do or complete so we’ll have a list to keep track of the progress. So here’s what’s left for me to do

I decided to start with the easy part [or so I thought] with responsiveness. Here’s how it looked like when I tested it

I didn’t really know why it’s doing that so I decided to show off the borders to actually understand what’s going on

and that’s where the aha moment came. As you can see the container is actually adjusting its size, but the image isn’t really responding to the change. So after some digging around it turns out

okay, so let’s try to fix it. [if you’re interested, I used this blog post as reference to making the SVG responsive]  and well

Okay, it’s responsive. However, as you can, there’s’ a breakpoint where everything is stacked on top of each other so we work on the positioning and

still, there is a huge gap so a bit more tweaking

damn it, it’s  still iffy [sad face]  Okay… I’m going to ignore this for the time being. Let’s go back to the list

I’ll start working on the numbers being the same in both the setup and loop. I started off by grabbing the port numbers of the loop

then  I need to make first they are in the proper range (0-9) and display the proper error message if it exceeds the range

okay, we’re on a good track. now, since the loop can have duplicates as in port numbers then I have to filter the ports once I have them in order to check it with the setup. I think I didn’t explain what I want to do properly let’s do it one more time. When setting up your ports, you initialize them once not more than once. Meaning in your setup function you can add pinMode(0, OUTPUT) twice. So no duplicate pin modes. To do this I started by grabbing the pin modes array

and then a function that checks for duplicates. And …

YES! It displays the proper message if there are duplicate pins.  Next step is the loop function. Here it’s okay to have duplicate digitalwrites.  So here I need to remove the duplicates to test the equality of the pin modes in both the setup and loop functions. I started off by making a remove duplicate function and tested it out through the console

Awesome it removed the duplicates.  Now I checked the equality of both the pin ports in both functions and here’s the result of testing them in the console

Okay, the function is working. It’s time to test it in the IDE and…

Wooohoooo! We’re making progress my friends. yes, we are. If you’re interested in the resources that helped me out here are they:

Okay back to the list

hmmm, I want to do an easy one here which is the deactivating the default animation. You see when you visit the site it automatically runs the script in the info witch basically blinks the first diode port0 and if you start writing your own script you can see that port0 is still blinking

This was pretty simple just remove the default I set and

however, let’s check if I wrote another script would it still work properly?

Humm it turns out it keeps the animation of the previously run script. just an easy fox which is resetting them all not just the default. And with that

All it well with the world, and we check off one more item from the list!

Okay, let’s do the color bit. I think the color of the bulb when it’s blinking is a bit dark as you can see

[side note] Can we take a moment to appreciate my file naming skills

[side note over]

So this was an easy fix just change the fill color to a brighter tone and

Let’s cross that out of our list

oooh, we’re almost there people almost. Let’s fix the animation a bit. This was easy. fixing some keyframes, adding animation for high and low and well I think it looks sorta better

list, list, list

will you look at that I can taste the freedom from this project? So I’ll start the high and low. Now the problem here is that all the diodes are blinking however it depends on the sketch if a port has both a high and low then it blinks otherwise it either stays on or off depending on the values (high and low) So I decided to approach this by making an object that holds the port number, it’s high and low value, and delay if any. It was a bit tricky because of the way I initially set the variables. Yet with some tweaking, the object sorta works

all was well until I was setting the event listener for the animation because for some reason it’s null :/

after yours truly figured out what’s wrong [I basically targeted the wrong objects] and now BAM we have low and high working

okay, we’re on a roll! let’s cross that from the list

I’m still not sure how I’ll be approaching the delay so let’s go back to responsiveness… [damn it] So after a couple of tests [actually a lot] we have a responsive site 🙂

now let’s look at our list again

[breath] Okay now this last task is one hell of a kicker. It took a really long while for me to find a way to make the object properly grab the delay of the right port and

The only way you can tell the way I felt when it actually worked is the name of the name of the gif


okay now adjusting the run script we have

looking at the list

… I wanna cry. My god, this was one long project! I truly made it! You can test it out on my site here. It would really mean a lot if you tested it because I really worked hard on this. If you read this far, THANK YOU!

I have a couple of resources I’d like to share with you if you’re interested

Now excuse me while I go collapse somewhere after this. Till then happy coding 🙂

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *