-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlime.html
758 lines (496 loc) · 22.4 KB
/
lime.html
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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="melis">
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<title>Lemon Kit- Lime</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Additional CSS Files -->
<link rel="stylesheet" href="assets/css/fontawesome.css">
<link rel="stylesheet" href="assets/css/templatemo-edu-meeting.css">
<link rel="stylesheet" href="assets/css/owl.css">
<link rel="stylesheet" href="assets/css/lightbox.css">
<!--
TemplateMo 569 Edu Meeting
https://templatemo.com/tm-569-edu-meeting
-->
</head>
<body>
<!-- Sub Header -->
<div class="sub-header">
<div class="container">
<div class="row">
<div class="col-lg-8 col-sm-8">
<div class="left-content">
<p>HisarCS<em> IdeaLab</em></p>
</div>
</div>
<div class="col-lg-4 col-sm-4">
<div class="right-icons">
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-behance"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- ***** Header Area Start ***** -->
<header class="header-area header-sticky">
<div class="container">
<div class="row">
<div class="col-12">
<nav class="main-nav">
<!-- ***** Logo Start ***** -->
<a href="index.html" class="logo">
Lemon Robotics Kit
</a>
<!-- ***** Logo End ***** -->
<!-- ***** Menu Start ***** -->
<ul class="nav">
<! Home Button -->
<li><a href="index.html">Home</a></li>
<! Prereqs? -->
<li>
<a href="prereq.html">PreReqs</a>
</li>
<! Lime Button -->
<li class="scroll-to-section"><a href="javascript:void(0)" href="#top" class="active">Lime </a></li>
<! Satsuma Button -->
<li>
<a href="satsuma.html">Satsuma</a>
</li>
<!-- Lemon Button
<li ><a href="lemon.html">Lemon </a></li>
-->
<li class="scroll-to-section"><a href="#contact">Contact</a></li>
</ul>
<a class='menu-trigger'>
<span>Menu</span>
</a>
<!-- ***** Menu End ***** -->
</nav>
</div>
</div>
</div>
</header>
<!-- ***** Header Area End ***** -->
<section class="section main-banner" id="top" data-section="section1">
<img src="assets/images/lime/balikgercek2.png" height="800">
<div class="video-overlay header-text">
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="caption">
<h6 style="font-size: 30px;">Here is how to put together your first model!</h6>
<h2>Welcome to Lime!</h2>
<p>Lime is the first level available in the Lemon Robotics Kit. To build it, make sure you have all the elements required (learn more about these in the prerequisites segment) and follow the steps below!</p>
</section>
<section class="upcoming-meetings" id="meetings">
<div class="container">
<div class="top">
<div class="col-lg-12">
<h1 style=" color: whitesmoke; text-align: center; padding-top: 0px; padding-bottom: 10px; font-display: bold;">Start Now: Build Lime</h1>
<br>
<!-- KRAFTPLEX INSTRUCTIONS --------------------- -->
<div class="row ">
<div class="col-lg-12 ">
<h3 style=" color: orange; text-align: left; padding-top: 30px;" class="featurette-heading ">
Assemble the Kraftplex Body & Learn About 3D Design
</h3>
<a> <h3 style=" color: deepskyblue; text-align: left; padding-top: 30px;" class="featurette-heading ">
<span class="tab"></span> 1) Assembling the Head and the Tail</a>
</h3>
<p style="color: whitesmoke;"> In this</a> document you will learn how to put togethr the tail of the fish. You will need a glue and the images to complete this step.
<br>
Pro tip: make sure to check the video above to see how everything is done!
<br>
<br>
Firstly, Stick the "T" shaped wooden components to the spots where the sign "T" appears as shadows. Make certain that it is properly attached. (Be sure to wait 30 seconds after gluing the parts together.) After that, let's put these pieces together, make sure that every part of the product is in the right spot.
<br>
Finally, once you've properly constructed it, carefully glue it together.
<br>
<br>
</p>
<center>
<div class="row">
<div class="col-md-5">
<div class="row">
<img src="assets/images/lime/balikcizim.jpg" height="400" width="400" style="border-radius: 30px;">
</div>
</div>
<!-- -->
<br>
<br>
<div class="col-md-5">
<div class="row">
<img src="assets/images/lime/balikkafasi.jpg" height="400" width="500" style="border-radius: 30px;">
<br>
</div>
</div>
</div>
</center>
<br>
</h3>
<br>
<p style="color: whitesmoke;"> Now,</a> you will learn how to assemble the head.
<br>
Stick the "T" shaped wooden components to the spots where the sign "T" appears as shadows. Make certain that it is properly attached, just like you did in the tail.
<br><br>
Stretch the two zigzag-like parts out carefully without applying much physical force.
<br>
<br>
After stretching it out, begin building it up as seen in the video. (Check that "T" staring through the inside) While building, apply the long item to the section where the head is longer. Don't forget to glue on a continuous and attentive basis while you're building.
<br>
</p>
<br>
<br>
</div>
<center>
<div class="col-md-7">
<img class="featurette-heading "style="border-radius: 30px; display: inline-block;" src="assets/images/lime/balikfusion.jpg" height="400">
</center>
<br>
</div>
<br>
<br>
<br>
-
<div class="row">
<div class="col-lg-12">
<center>
<video width="700" height="490" controls>
<source src="assets/images/lime/headtail.mp4" type="video/mp4">
</video>
</center>
<br>
<br>
<br>
</div>
-
<div class="row">
<div class="col-md-6">
<a > <h3 style=" color: deepskyblue; text-align: left; padding-top: 30px;" class="featurette-heading ">
<span class="tab"></span> 2) Main Body</a>
</h3>
<br>
<p style="color: whitesmoke;"></a>
First, get two of each item that is shown in the video.
<br>
Connect the rising part of the black piece with the round board and close the other piece on it carefully. Examine the video carefully for the complete process. (Repeat this step again with the remaining pieces.)
<br>
<br>
Second, gather these pieces with glue to complete the fish's main body.
<br>
Examine the video to stick them together. (Be sure to stick them evenly.)
<br>
<br>
Place your screws in the second and third holes, and use nuts to secure them.
<br>
Get the parts from the first step as well as these items.
<br>
<br>
Make sure the servo is positioned on the rising section of the black piece. After assembling, use the short screw to link them. Examine the picture for the process.(Repeat this step again with the remaining pieces.)
<br>
Place the servos in the body's downward position, as shown in the video.
<br>
<br>
Insert your screws into the final two holes and secure them with nuts. Check that the servos are still in their proper places. (They shouldn't move) The final look should look like this.
Finally, we'll connect the tail and head to the body.
<br>
Fixate the pieces with the connectors shape, as shown in the model.
<br><br>
The final product should look like this.
Congratulations! Now that the fish's modeling is complete, let's move on to the electronics.
</p>
<br>
</a>
</div>
<div class="col-md-5">
<br>
<img src="assets/images/lime/balikon.jpg" style="border-radius: 30px; display: inline-block;" height= "700"; >
</div>
</a>
</a>
</div>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-lg-12">
<center>
<video width="700" height="490" controls>
<source src="assets/images/lime/body.mp4" type="video/mp4">
</video>
</center>
<center>
<video width="700" height="490" controls>
<source src="assets/images/lime/assemble.mp4" type="video/mp4">
</video>
</center>
<br>
<br>
</div>
<div class="row ">
<div class="col-lg-12 ">
<h3 style=" color: orange; text-align: left; padding-top: 30px;" class="featurette-heading ">
Start your electronics!
</h3>
<br>
<a> <h3 style=" color: deepskyblue; text-align: left; padding-top: 30px;" class="featurette-heading ">
<span class="tab"></span> 3)Learning Servos With “Lime”</a>
<br>
</h3>
<p style="color: whitesmoke;"> <span class="tab"></span> The robot fish Lime has very little electronic involvement, boasting only two servos to control. Therefore it’s a perfect stepping stone for the other robots in this kit, Satsuma, and Lemon. But before we start, you must understand the fundamental concept on which servo motors work: PWM.
<br>
<br>
Pulse Width Modulation (PWM), is the main way we communicate with servos. This method involves sending different widths of electrical pulse to the device through the control wire, aka the GP pins for the pico. A servo motor can usually only turn 90° in either direction for a total of 180° movement.
<br>
<br>
<span class="tab"></span> The motor's neutral position is defined as the position where the servo has the same amount of potential rotation in the both the clockwise or counter-clockwise direction. The PWM sent to the motor determines position of the shaft, and based on the duration of the pulse sent via the control wire; the rotor will turn to the desired position.
<br>
<br>
The servo motor expects to see a pulse every 20 milliseconds (ms) and the length of the pulse will determine how far the motor turns. For example, a 1.5ms pulse will make the motor turn to the 90° position. Shorter than 1.5ms moves it in the counter clockwise direction toward the 0° position, and any longer than 1.5ms will turn the servo in a clockwise direction toward the 180° position.
</p>
<center>
<div class="col-md-5">
<br>
<img src="assets/images/lime/pulse.png" style="border-radius: 30px;" >
<br>
</div>
</center>
<p style="color: whitesmoke;"> <span class="tab"></span>
<br>
<br>
Now that we know how servo motors work, let’s actually connect some to our pico. As you can see from the robot in front of you, servo motors have 3 colored cables conjoined together. The colors of these cables are what we use to see the function of each one of them. For the servo motors we will be using, the tower pro mg90s, the black cable represents a ground connection, the red cable represents a power connection, and the yellow/orange cable is the PWM connection.
<br>
<br>
But we can’t connect these cables outright since none of these 3 ports are adjacent to each other on the Pico, so we will need to connect additional jumper cables to get it to work.
</p>
</div>
<br>
<center>
<div class="col-md-5">
<br>
<img src="assets/images/lime/MG90S.png" style="border-radius: 30px; display: inline-block;" height= "300"; >
</div>
</center>
<br>
<p style="color: whitesmoke;"> <span class="tab"></span>
<br>
<br>
When working on these kits, we will be using the standard cable denominations of Male Male (MM), Female Female (FF), and Male Female (MF). A male cable is a cable that has a connecting tip while a female cable does not, and has a hollow input point. While connecting our servos to the pico we will be using MF jumper cables. Attach each cable to the according pins:
<br>
<br>
1st servo: <br>
GND cable to pin 3 <br>
Power cable to Vbus on pin 40 <br>
Input cable to pin 1 <br>
<br><br>
2nd servo:<br>
GND cable to pin 38<br>
Power cable to Vbus on pin 39<br>
Input cable to pin 2<br>
<br>
After you’ve connected the servos to the pico it should look like this diagram:
<br>
<br>
</p>
</div>
<br>
<center>
<div class="col-md-5">
<img src="assets/images/lime/circuit1.png" style="border-radius: 30px; display: inline-block;" height= "550"; >
</div>
</div>
</center>
<a > <h3 style=" color: deepskyblue; text-align: left; padding-top: 30px;" class="featurette-heading ">
<span class="tab"></span>
<br>
4)Learning To Code With “Lime”</a>
</h3>
<p style="color: whitesmoke;">
<br>
Next let’s move on to programming. To start coding open up the Mu editor and open the code.py file installed on the pico. This will be the file we will be working on since it is the default file curcuitpython uses when executing code. When you open it you will only see a single line written that has print(“Hello World”) on it. <br>
<br>
</p>
<center>
<div class="col-md-5">
<img src="assets/images/lime/te.png" style="border-radius: 30px;" width="400" height= "300"; >
</div>
</center>
<p style="color: whitesmoke;">
<br>
<br>
When you first open Mu, your window might have the serial console open as it is in the image above. The serial console is not open by default so we need to open it through serial button in the button bar. The serial console is important because it helps us keep track of the state and outputs of the pico. When you first open serial you will see a message written on the screen saying that auto reload is on.
<br>
<br>
What this means is that curcuitpython right now is on it’s default mode where either when the pico first receives power or when the code.py file is saved - by pressing the save button, the code.py file will be automatically executed. This is the default mode of curcuitpython operated microcontrollers, however by pressing a key in the serial console window we will be redirected to the Read-Evaluate-Print-Loop (REPL).
<br>
<br>
After entering the REPL the auto-reload function will be turned off and you will be prompted to enter commands by the three chevrons (>>>). The REPL will only accept one line of code at a time so although it isn’t good for longer pieces of code, it is a perfect environment to test smaller sets of commands and debug your code. To test this out let’s write a simple print command into the REPL:
<br>
<br>
</p>
<div style="width:auto;height:60;background-color: lightgray;">
<pre>
<code style="color: black; padding-left: initial;">
>>> print(<a style="color: darkred;">"Hello World"</a>)
Hello World
</code>
</pre>
</div>
<p style="color: whitesmoke;">
<br>
As you can see we received an immediate followup to the command we entered. To exit the REPL, you need to press Ctrl + D which will return curcuitpython to the auto-reload mode and run code.py as well. Now that we know some of the intricacies of curcuitpython and the Mu editor, let’s start programming for Lime.
<br>
<br>
First let’s import some of the libraries we will be using. You may remember that the ones with the adafruit prefix are the ones we downloaded externally. These are libraries that are developed specifically for curcuitpython and adafruit components so they will come in very handy during our development.
<br>
<br>
</p>
----
<div style="width:auto;height:auto;background-color: lightgray;corner-radius:30px">
<pre>
<code style="color: black; padding-left: initial;">
<b>import</b> time
<b>import</b> board
<b>import</b> pwmio
<b>from</b> adafruit_motor <b>import</b> servo
</code>
</pre>
</div>
<p style="color: whitesmoke;">
<br>
<br>
Next, for our servos to receive pwm inputs, we need to configure a PWMOut object based on where our input pin on the servo is located. The PWMOut object has three arguments we need to enter being the digital address of our input pin, the initial duty cycle, and the frequency at which the pwm pin will operate. So in this instance we have made objects of our pwm output channels based on the pins 1, and 2, cycled the pin to with 50% duty cycle (half of 2 ** 16) at 50hz.
<br>
<br>
</p>
<div style="width:auto;height:auto;background-color: lightgray;">
<pre>
<code style="color: black; padding-left: initial;">
pwm1 = pwmio.PWMOut(board.GP5, duty_cycle=<a style="color: darkred">2</a> ** <a style="color: darkred">15</a>, frequency=<a style="color: darkred">50</a>)
pwm2 = pwmio.PWMOut(board.GP6, duty_cycle=<a style="color: darkred">2</a> ** <a style="color: darkred">15</a>, frequency=<a style="color: darkred">50</a>)
</code>
</pre>
</div>
<p style="color: whitesmoke;">
<br>
<br>
Next we create servo objects from the adafruit library so that we can control the servos. Normally without the use of this library we would have to convert pwm data to other forms such as angles to make our calculations, however this library conveniently gives us many tools, such as the aforementioned conversion tool, that will speed up the development of our projects!
<br>
<br>
</p>
<div style="width:auto;height:auto;background-color: lightgray;">
<pre>
<code style="color: black; padding-left: initial;">
my_servo1 = servo.Servo(pwm1)
my_servo2 = servo.Servo(pwm2)
</code>
</pre>
</div>
<p style="color: whitesmoke;">
<br><br>
Finally we need to write some code so that the servos of the fish will move in a continuous motion that resembles flopping. To accomplish this we have decided that an infinite loop of large rotations is the most suitable since just like fish flopping lime will make a motion similar to the erratic nature of flopping. Just as we mentioned before instead of having to use pwm values to communicate with the servo we can use familiar system of geometrical angles instead.
<br>
<br>
</p>
--
<div style="width:auto;height:auto;background-color: lightgray;">
<pre>
<code style="color: black; padding-left: initial;">
<b>while True:</b>
<b>for</b> angle <b>in</b> range:(<a style="color: darkred">0</a>, <a style="color: darkred">180</a>, <a style="color: darkred">5</a>): <a style="color: dimgray;"> # 0 - 180 degrees, 5 degrees at a time.</a>
my_servo1.angle = angle
my_servo2.angle = angle
print(angle)
time.sleep(<a style="color: darkred">0.05</a>)
for angle in range(<a style="color: darkred">180</a>, <a style="color: darkred">0</a>, <a style="color: darkred">-5</a>): <a style="color: dimgray;"># 180 - 0 degrees, 5 degrees at a time.</a>
my_servo1.angle = angle
my_servo2.angle = angle
print(angle)
time.sleep(<a style="color: darkred">0.05</a>)
</code>
</pre>
</div>
<p style="color: whitesmoke;"> <br> <br>
When you run this code you should see your lime robot moving in a fast and continuous motion. If your robot
does not move, please check your wiring as there is nothing wrong with the code.
</p>
<!-- SEEETTT --------------------- -->
<h3 style=" color: orange; text-align: left; padding-top: 30px;" class="featurette-heading ">
Good Job! You have come this far and completed the first level of the lemon robotics kit, Lime. Go ahead and challenge yourself with the next level, Satsuma on the next page.
</h3>
<!----- Footer ---- -->
<div class="footer">
<p>Lemon Robotics Kit
<br>Design: <a style="color: orangered;" >HisarCS - İdeaLab .)</a></p>
<p> idealab@hisarschool.k12.tr </p>
<p> 2022 </p>
<!---- footer - -->
</div>
</section>
<!-- Scripts -->
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/isotope.min.js"></script>
<script src="assets/js/owl-carousel.js"></script>
<script src="assets/js/lightbox.js"></script>
<script src="assets/js/tabs.js"></script>
<script src="assets/js/isotope.js"></script>
<script src="assets/js/video.js"></script>
<script src="assets/js/slick-slider.js"></script>
<script src="assets/js/custom.js"></script>
<script>
//according to loftblog tut
$('.nav li:first').addClass('active');
var showSection = function showSection(section, isAnimate) {
var
direction = section.replace(/#/, ''),
reqSection = $('.section').filter('[data-section="' + direction + '"]'),
reqSectionPos = reqSection.offset().top - 0;
if (isAnimate) {
$('body, html').animate({
scrollTop: reqSectionPos },
800);
} else {
$('body, html').scrollTop(reqSectionPos);
}
};
var checkSection = function checkSection() {
$('.section').each(function () {
var
$this = $(this),
topEdge = $this.offset().top - 80,
bottomEdge = topEdge + $this.height(),
wScroll = $(window).scrollTop();
if (topEdge < wScroll && bottomEdge > wScroll) {
var
currentId = $this.data('section'),
reqLink = $('a').filter('[href*=\\#' + currentId + ']');
reqLink.closest('li').addClass('active').
siblings().removeClass('active');
}
});
};
$('.main-menu, .responsive-menu, .scroll-to-section').on('click', 'a', function (e) {
e.preventDefault();
showSection($(this).attr('href'), true);
});
$(window).scroll(function () {
checkSection();
});
</script>
</body>
</body>
</html>