@Rizzington_I

DevLog #5: Final Touches

• In this final Devlog I have spent countless hours touching up on final edits to make sure this project is ready to ship. It took a lot of configuring to get the site running up on GitHub pages and unfortunately because this website is a part of my team repository I cannot create it.
  DONT WORRY: I found a solution…
• Instead, I have put the website code into a new repository where I have admin access and I have added the link for the GitHub Pages! I hope you guys enjoy it and I’ll put the link here if you want to check it out. BTW: I reccomend taking a look at the Team Gallery and the Robot Page as I would consider those the fun parts of the site.
  LINK: https://rizzington-iii.github.io/FTC-Team-Website-32483/index.html

Enjoy!

Devlog #1: Downloads & Base Code

For the past couple days (about a week), I started on a simulation site for the FIRST Tech Challenge Competition. I am creating this simulation to make coding easier and more effective to test during the season.

PEDROPATHING (MODE #1)

• So this is the PedroPath Mode and essentially it’s a 2D simulation where the user can plot points and tell the sim how to rotate the bot. In real life this happens through mecanum wheel usage. Once the points are plotted you can see your bot in action and the code will be generated to achieve this in real life.

I have successfully completed the base code for this version but I am yet to complete the app.jsx file. Without that file being done the site won’t be functionable and both modes will not work. I am using jsx to code this because it will be much more efficient since there will be less coding to do rather than having a separate css file.

FTC SIMULATION (MODE #2)

• This is the 3D simulation where users can import CAD files of their robot and code the robot. Then they can run this and run trial and error tests on their code. This simulation also will support the usage of FTC competition approved controllers such as a PS4 controller.

The base code for the 3D simulation is complete
and once the app.jsx code is finished I can finally start testing it on the local server on VS Code.

The Article Hub page is complete with scrolling containers for differing categories that hold cards with the article title, date, article-class, as well as an image. These cards are linked to HTML pages that contain the actual article but those are yet to be updated. Now I’ve moved onto the robot page where I am going to insert information on our past season’s robot (ARC). I am currently trying to put in a 3D image visualizer where the user can drag around the see the image, which is going to be our robot. I’ve also added contact details that are linked onto the sidebar.

One thing that was really annoying was formatting and making sure that the containers are all aligned because some of the scrolling containers overlapped into other categories and it looked really messy. Turns out in the end it was just one misplaced line between two css classes.

So far this is what I have finished:

• The sidebar is complete but I may still have to add other pages
• The About Us, Meet the Team, Sponsor Us, Feedback, Mission Statement, and Outreach page are complete. Although some of them have placeholder images for the time being until I can dig up the right ones from my phone.

The stuff that I am currently working on:

• I am working on the Article Hub page which is essentially a page that contains more pages. It has links to these small blog posts (articles) that could be useful for other robotics teams that participate in the upcoming season.

The stuff that still hasn’t been touched:

• The robot page isn’t done and all the links to the blogs lead me to a blank white page. So I still have more work to do.

Back to what I’m working on:

• In the article hub, for some reason the div cards that are links to their respective articles are placed correctly in my first section which is labeled latest releases. On the other hand in my second section (Hardware Articles), the cards don’t start in the same spot and for some reason the title of the Hardware Article is covered behind the scrolling container of the first section. By the way the article cards are div cards that are linked to the html blog pages as well as contain the title of the article, an image, the date, and what type of info is covered: (hardware, software, team management, exclusive stories). Debugging this is going to take some extra time but all great things take time and hopefully this turns out well.

Currently on the website I am working on the outreach page of our team website. I am part of a FTC (FIRST Tech Challenge) team and I am coding this website for our team. This is going to be our second year and we want to share our knowledge from the past season to other rookie teams which is why we have created this website. I have added an Article Hub page which I will start to edit next once the outreach page is done. The article Hub contains articles for teams and viewers to read which have information that can help teams be successful during their season.

The outreach page that I am working on right now contains an image carousel that I have the css styling for on a different page. I tried to create a version two but make it smaller and it worked but for some reason it doesn’t allow the div card with text show up. When I change images I can see the text show up and then vanish as it moves from one image to another. I tinkered with this for a while and I’m either going to have to re-create a new css styling class for the image carousel or shift it to the right. For some reason if I keep the carousel to the right with the text on the left it works perfectly but if do it the other way around it messes it up.