pitdisplay/index.html at master · Kevin-OConnor/pitdisplay · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<html>
    <head>
        <title>FRC Team 238 Robot Tour</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/animate.css">
        <link rel="stylesheet" href="css/main.css">
        <script type="text/javascript" src="./js/2.2.0-jquery.min.js"></script>
        <script type="text/javascript" src="./js/bootstrap.min.js"></script>
        <script type="text/javascript" src="./js/main.js"></script>

        <script>
            jQuery.fn.center = function () {
                this.css("position", "absolute");
                this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
                        $(window).scrollTop()) + "px");
                this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
                        $(window).scrollLeft()) + "px");
                return this;
            };

            var sponsorShowing = 1;
            var robotPhotoShowing = 1;
            $(function () {
                document.addEventListener('contextmenu', event => event.preventDefault());//no right clicks allowed

                var totalH = $(window).height();
                var totalW = $(window).width();
                var sponsorsHeight = totalH / 7;
                var phototextHeight = sponsorsHeight * 1.5;
                var logoHeight = totalH / 12;
                var nonRotatorHeights = logoHeight + sponsorsHeight + phototextHeight + 150;//alert(totalH);
                var imagerotatorHeight = totalH - nonRotatorHeights - 20;//alert(imagerotatorHeight);

                $("#photoTextDesc").css("height", phototextHeight);
                $("#thanksbanner").css("padding-bottom", sponsorsHeight);
                $("#touchButtonContainer").css("padding-top", logoHeight + 5);
                $("#photoTextDesc").css("bottom", sponsorsHeight + $("#thanksbanner").height());
                $(".footerheight").css("height", sponsorsHeight);
                $("#logoheight").height(logoHeight);
                $("#botimages").height(imagerotatorHeight);
                $(".robotphoto").css("max-height", imagerotatorHeight - 40);
                $(".robotphoto").css("max-width", ((totalW / 5) * 3));
                //$("#botimages").center();
                setInterval(changeSponsor, 5000);
                $("#leftButton").click(function () {
                    rotateRobotImageBackwards();
                });
                $("#rightButton").click(function () {
                    rotateRobotImageForward();
                });
                $(".sizedimg").css("max-height", sponsorsHeight - 25);
                $(".sizedimg").css("max-width", totalW - 25);
            });
            function rotateRobotImageForward() {
                $("#robotPhoto" + robotPhotoShowing).hide("fast");
                $("#textDesc" + robotPhotoShowing).hide();
                robotPhotoShowing++;
                if (robotPhotoShowing > 7) {
                    robotPhotoShowing = 1;
                }
                $("#robotPhoto" + robotPhotoShowing).show("fast");
                $("#textDesc" + robotPhotoShowing).show();
            }
            function rotateRobotImageBackwards() {
                $("#robotPhoto" + robotPhotoShowing).hide("fast");
                $("#textDesc" + robotPhotoShowing).hide();
                robotPhotoShowing--;
                if (robotPhotoShowing < 1) {
                    robotPhotoShowing = 7;
                }
                $("#robotPhoto" + robotPhotoShowing).show("fast");
                $("#textDesc" + robotPhotoShowing).show();
            }
            function changeSponsor() {
                $("#sponsor" + sponsorShowing).hide("medium");
                sponsorShowing++;
                if (sponsorShowing > 17) {
                    sponsorShowing = 1;
                }
                $("#sponsor" + sponsorShowing).show("fast");
            }

        </script>
        <style>
            .cn {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .inner {
                display: inline-block;
                font-size: 3vw;
            }
        </style>
    </head>
    <body>
        <div style="position:absolute;top:20px;left:15px;padding:5px;background-color:black;z-index:1;font-size:30px;width:15%;" class="text-center" id="leftButton">
            <img src="images/arrowleft.png" alt="Move Left" id="leftArr" style="margin-left:auto;margin-right:auto;" />
        </div>
        <div style="position:absolute;top:20px;right:15px;padding:5px;background-color:black;z-index:1;" class="text-center" id="rightButton">
            <img src="images/arrowright.png" alt="Move Right" id="rightArr" style="margin-left:auto;margin-right:auto;" />
        </div>
        <div style="padding:5px;z-index:1;font-size:25px;width:100%;" class="text-center" id="touchButtonContainer">
            <div style="position:relative;left:50%;float:left;">
                <div style="position:relative;left:-50%;float:left;background-color:gray;color:yellow;padding:5px;">
                    I'm a touch screen!<br />Just click the arrows to see more
                </div>
            </div>
        </div>

        <div class="center-block" style="position:absolute;top:0;width:100%;background-color:black;min-height:75px;" id="logoheight">
            <img src="images/logo.png" alt="238 Logo" id="teamlogo" style="margin-left:auto;margin-right:auto;display:block;height:85%;" />
        </div>

        <div id="botimages" style="width:100%;text-align:center;">
            <div style="width:100%;text-align:center;" class="cn">
                <div id="robotPhoto1" class="inner">
                    <p class="robotTitle">CATWOMAN</p>
                    <img src="images/robot/1.png" alt="RobotPhoto1" class="robotphoto"/>
                </div>
                <div id="robotPhoto2" class="" style="display:none;">
                    <p class="robotTitle">Elevator Collapsed</p>
                    <img src="images/robot/2.png" alt="RobotPhoto2" class="robotphoto"/>
                </div>
                <div id="robotPhoto3" class="" style="display:none;">
                    <p class="robotTitle">Elevator Extended</p>
                    <img src="images/robot/3.png" alt="RobotPhoto3" class="robotphoto" />
                </div>
                <div id="robotPhoto4" class="" style="display:none;">
                    <p class="robotTitle">Facing the Boss!</p>
                    <img src="images/robot/4.png" alt="RobotPhoto4" class="robotphoto" />
                </div>
                <div id="robotPhoto5" class="" style="display:none;">
                    <p class="robotTitle">Forks</p>
                    <img src="images/robot/5.png" alt="RobotPhoto5" class="robotphoto" />
                </div>
                <div id="robotPhoto6" class="" style="display:none;">
                    <p class="robotTitle">Intake</p>
                    <img src="images/robot/6.png" alt="RobotPhoto6" class="robotphoto" />
                </div>
                <div id="robotPhoto7" class="" style="display:none;">
                    <p class="robotTitle">Drivetrain</p>
                    <img src="images/robot/7.png" alt="RobotPhoto7" class="robotphoto" />
                </div>
            </div>
        </div>

        <div id="photoTextDesc" style="position:absolute;width:100%;overflow:hidden;padding-left:10px;padding-right:10px;" align="justify" class="cn">
            <div id="textDesc1" class="robotDescription inner">Team 238's Robot for the 2018 season is CATWOMAN. We named this robot Catwoman to go along with our Batman villain
                theme where our competition bot is the villain's name and our practice bot is their alter ego. Catwoman is sly, cunning, has great strategy
                skills and is great at climbing which goes along with the endgame for this year.</div>
            <div id="textDesc2" class="robotDescription" style="display:none;">Our two stage elevator can reach up to 7 feet high! It shifts back and forth between a high speed mode for lifting
                cubes fast and high torque mode for more power while climbing. It is powered by 3 mini-CIMs through two continuous 15mm wide HTD belt runs.
                On the top of our elevator are 2 hooks meant for climbing in order to face the boss. </div>
            <div id="textDesc3" class="robotDescription" style="display:none;">Our two stage elevator can reach up to 7 feet high! It shifts back and forth between a high speed mode for lifting
                cubes fast and high torque mode for more power while climbing. It is powered by 3 mini-CIMs through two continuous 15mm wide HTD belt runs.
                On the top of our elevator are 2 hooks meant for climbing in order to face the boss. </div>
            <div id="textDesc4" class="robotDescription" style="display:none;">This pair of forks are used to lift other robots in order to get the ranking point for facing the boss. Our alliance
                partner just has to drive on to our forks and we can lift them. They are deployed via a pneumatic latch.</div>
            <div id="textDesc5" class="robotDescription" style="display:none;">This pair of forks are used to lift other robots in order to get the ranking point for facing the boss. An alliance
                partner just has to drive on to our forks and we can lift them. They are deployed via a pneumatic latch.</div>
            <div id="textDesc6" class="robotDescription" style="display:none;">This intake has 4 compliant wheels that actively grabs cubes and holds it on a plate to carry up the elevator.
                The intake is being run off two 9:1 gearboxes powered by 775pros. The intake wrist is powered by at 252:1 gearbox with a BAG motor.
                Another great feature of our intake is that it is really flexible and will wrap around the cube. If another robot runs into our intake
                it can bend out of the way.</div>
            <div id="textDesc7" class="robotDescription" style="display:none;">Our drivetrain this year follows the west coast style with 6 - 6&quot; wheels: 2 omnis and 4 Colsons. We have a
                3 mini-CIM pneumatic ball shifter that allows us to have two different speeds, 8 and 17 ft/s. Our electrical board was carefully planned
                out and even designed in CAD to ensure all the components had their own spot.</div>
        </div>

        <div class="" id="thanksbanner"
             style="position:absolute;bottom:0;width:100%;background-color:black;color:white;font-size:20px;overflow:hidden;">
            <div class="text-center"><em>Team 238 Would Like To Thank Our Generous Sponsors:</em></div>
        </div>

        <div class="text-center cn center-block footerheight"
             style="position:absolute;bottom:0;width:100%;background-color:yellow;min-height:75px;font-size:20px;vertical-align:middle;overflow:hidden;">
            <div id="sponsormaxheight">
                <div id="sponsor1" class="inner"><img src="images/sponsors/bosch-logo.png" alt="Bosch" class="sizedimg" /></div>
                <div style="display:none;" id="sponsor2" class="inner"><img src="images/sponsors/mmhs-logo.png" alt="Manchester Memorial High School" class="sizedimg" /></div>
                <div style="display:none;" id="sponsor3" class="inner"><img src="images/sponsors/nhdoe-logo.png" alt="New Hampshire Department of Education" class="sizedimg" /></div>
                <div style="display:none;" id="sponsor4" class="inner"><img src="images/sponsors/ti-logo.png" alt="TI" class="sizedimg" /></div>
                <div style="display:none;" id="sponsor5" class="inner"><img src="images/sponsors/bae-logo.png" alt="BAE Systems" class="sizedimg" /></div>
                <div style="display:none;" id="sponsor6" class="inner">Davignon Club</div>
                <div style="display:none;" id="sponsor7" class="inner"><img src="images/sponsors/first-logo.png" alt="FIRST" class="sizedimg" /></div>
                <div style="display:none;" id="sponsor8" class="inner"><img src="images/sponsors/mp-logo.png" alt="Millennium Precision LLC" class="sizedimg" /></div>
                <div style="display:none;" id="sponsor9" class="inner"><img src="images/sponsors/mushield-logo.png" alt="MuShield Company" class="sizedimg" /></div>
                <div style="display:none;" id="sponsor10" class="inner"><img src="images/sponsors/rapid-logo.png" alt="Rapid Manufacturing" class="sizedimg" /></div>
                <div style="display:none;" id="sponsor11" class="inner"><img src="images/sponsors/sunrise-logo.png" alt="Sunrise Labs Inc." class="sizedimg" /></div>
                <div style="display:none;" id="sponsor12" class="inner"><img src="images/sponsors/wcp-logo.png" alt="WestCoast Products" class="sizedimg" /></div>
                <div style="display:none;" id="sponsor13" class="inner"><img src="images/sponsors/autodesk-logo.png" alt="Autodesk" class="sizedimg" /></div>
                <div style="display:none;" id="sponsor14" class="inner"><img src="images/sponsors/bb-logo.png" alt="Batteries Plus Bulbs" class="sizedimg" /></div>
                <div style="display:none;" id="sponsor15" class="inner"><img src="images/sponsors/first-nh-logo.png" alt="FIRST New Hampshire" class="sizedimg" /></div>
                <div style="display:none;" id="sponsor16" class="inner"><img src="images/sponsors/marmon-logo.png" alt="Marmon Aerospace & Defense" class="sizedimg" /></div>
                <div style="display:none;" id="sponsor17" class="inner">Temco Tool Co., Inc.</div>
            </div>
        </div>
    </body>
</html>