Webpage Complete! (Part 2)

Originally, I was going to wait till we were able to get the LDC1000 working before adding extras to the website, but I ran out of patience pretty fast. I started attempting to create a “Total Stats” column for the total amount raised and the winning team, but I ran into several issues. The first issue I ran into was that I could not add the values together, and that was due to the fact that it was stored as a string, so when I added them up, the values were just placed side by side. For example if I tried adding “$0.13” and “$0.27”, I would end up with “$0.13$0.27.” After I saw this, I knew I was not using the right data type. To fix this, I went to my energia sketch to remove the “$” when it was sending the data over. Afterwards, I went to Node-Red and added “parseFloat” for “msg.payload” in order to turn the data type to float, allowing it to have decimals. Then I went to add the values again, and sure enough, it worked! I just had to had the “$” through the template node in Node-Red. The next issue I ran into was that the total value would show up in a weird way sometimes. For example, sometimes it would show a weird value like “$0.150000000001” when it is supposed to say “$0.16,” and after clicking the buttons on the coin counter simulator, it would catch up and spit out the values normally. I had to make sure that the values were never going past 2 decimal places, so I looked up how to control this online, and I found out out that I had to add “var variablename = number.toFixed(x);” where variablename is a new variable, number is the value I want to a certain decimal point, and x is the number of places after the decimal. After adjusting that, the values read out properly! The next thing I added to the webpage was which team was winning explicitly. Doing this was much simpler than the “total amount” feature I added. All I did was create if/else statements, so if the points in coin counter 1 was greater than the points in coin counter 2, it would read out “team 1,” and vice-versa for team 2. Adding these two features to the website was more time consuming than I thought, but the final result was very pleasing, and I’m really happy I spent extra time on it! Below are pictures of what the webpage looks like now!

Screen Shot 2016-04-19 at 10.36.26 PMScreen Shot 2016-04-19 at 10.36.42 PM

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s