SharcScout offers you not only scouting but also a strategy board! On the home page, you are greeted with your team logo, team name, team number and two buttons: Game Plan and Scouting. Also the website could be added to your phone's or tablet's home screen making it almost indistinguishable from a native app. You can simply say "Add to Home Screen" from your browsers options. Example images of IOS and Android could be seen below.
Gameplan page will open a page that has the field as the background. This image will be vertical or horizontal based on the device's screen size. On this page, you can draw simply by touching the screen. Also, you can clear the screen by pressing the “Clear” button located in the left side of the screen. This usually comes in handy when you have to strategize quickly before a match in the pits.
Also, the form disappears when the "+" button is pressed again. In this screen, you can search a team by their team name or their team number. The "Search" button will list short summaries of each match your scouting team scouted. There will be more analysis features added in the near future.
- First of all, go to Firebase and create a database.
- Then, clone the repository to the hosting of your choice. (GitHub and Repl.it are great free options!) (Be aware that your database config details are completely visible in the source code. It is recommended not to share this website anyone except your team members for security reasons.)
- Thirdly, open the scouting.js file. In this file, go to line 411,192 and change the variables starting with "your" with your database config details. You should be replacing the "null" statements.
- At this point, the website is fully functional. Let's move on to customizing the design
In this section, we will be setting up the favicon, app icon and the team logo on the home page. You should have all of these files in the correct formats (.ico, .jpg, etc.) in a folder. After you have your final files, drop them into “res” folder.
Now, you should change the href tags on lines 8, 9 and 19 in index.html
Congratulations, you have set up all your media files!
SharcScout comes with 2019 field images. (The images used are taken from ChiefDelphi. I will give credit as soon as I find that post again!) However, if you want to have custom field images you can simply upload new images to the root of the project and change the names to “field” and “fieldvertical” if your images are JPG.
If you have other formats, then you should change line 7 on gameplan.css and line 10 in script.js Awesome, you should have your custom images working right now!
You can change other CSS attributes in style.css, scouting.css and scouting.html
You can also go in the HTML files to change the names and placeholders with your teams name and number.
- It is strongly recommended to shrink your images with an online tool in order to maximize your loading speed.
- Make sure you have all the image types for favicon and app icon in the correct format and size.