SlideShare a Scribd company logo
1032
Practical Linux System Administration
Final Report
Group 8 - 吳 芷 恩 <100212067>
1
題目
2
題目發想緣起
3
實作所需材料
4
材料 取得來源 價格
Raspberry Pi BlueT $--
Logitech Webcam C310 PChome $699
Servo motor SG90 Ruten $48
Stepper motor 28BYJ-48-5V Ruten $50
ULN2003 Driver Board Ruten $27
Dupont Line Ruten $20
Steel wire Hardware store $5
Mouse toy DAISO $39
★ Web server - LAMP
★ Automatically send ip to Email - Postfix
運用與課程內容中相關的技巧
5
★ Stepper motor
○ software: Pi4J http://pi4j.com/
○ code:https://github.com/Pi4J/pi4j/blob/master/pi4j-
example/src/main/java/StepperMotorGpioExample.java
★ Servo motor
○ software: Python
○ code:https://www.youtube.com/watch?v=ddlDgUymbxc
★ Webcam
○ software: MJPG-streamer http://sourceforge.net/projects/mjpg-
streamer/
★ Webpage
○ software: LAMP
○ code: HTML, PHP, JavaScript AJAX http://php.
net/manual/en/function.shell-exec.php http://www.w3schools.
com/ajax/ajax_example.asp
使用的現有軟體與來源
6
ULN2003
Driver Board
(Stepper motor)
實作過程 - GPIO 配置
7
Servo motor
實作過程 - GPIO 配置 (cont’d)
8
實作過程 - webcam
9
Builds MJPG-streamer
➢ sudo apt-get update
➢ sudo apt-get install subversion libjpeg8-dev imagemagick
➢ sudo svn checkout svn://svn.code.sf.net/p/mjpg-streamer/code
➢ cd code/mjpg-streamer
➢ sudo make clean all
➢ export LD_LIBRARY_PATH=.
➢ ./mjpg_streamer -i "./input_uvc.so" -o "./output_http.so -w ./www"
Auto run MJPG-streamer when pi boots up
➢ sudo vim /etc/rc.local
➢ add codes before exit 0 :
export STREAMER_PATH=/home/pi/code/mjpg-streamer
export LD_LIBRARY_PATH=$ STREAMER_PATH
$STREAMER_PATH/mjpg_streamer -i “input_uvc.so -y = YUYV” -o
“output_http.so -w $STREAMER_PATH/www” &s
實作過程 - MJPG-streamer
10
★ servo90.php
<?php
echo shell_exec("sudo python servo90.py")
?>
實作過程 - Coding
(servo90.php & servo90.py)
11
★ servo90.py
import RPi.GPIO as GPIO
import time
GPIO.setmode(GPIO.BOARD)
GPIO.setup(7,GPIO.OUT)
p = GPIO.PWM(7,50)
p.start(7.5)
count=0
while (count<4):
p.ChangeDutyCycle(2.5)
time.sleep(0.25)
p.ChangeDutyCycle(7.5)
time.sleep(0.25)
count=count+1
p.stop()
GPIO.cleanup()
★ servo180.php
<?php
echo shell_exec("sudo python servo180.py")
?>
實作過程 - Coding
(servo180.php & servo180.py)
12
★ servo180.py
import RPi.GPIO as GPIO
import time
GPIO.setmode(GPIO.BOARD)
GPIO.setup(7,GPIO.OUT)
p = GPIO.PWM(7,50)
p.start(7.5)
count=0
while (count<4):
p.ChangeDutyCycle(12.5)
time.sleep(0.5)
p.ChangeDutyCycle(2.5)
time.sleep(0.5)
count=count+1
p.stop()
GPIO.cleanup()
★ step45.php
<?php
echo shell_exec("sudo java -classpath .:classes:
/opt/pi4j/lib/'*' step45")
?>
★ step-45.php
<?php
echo shell_exec("sudo java -classpath .:classes:
/opt/pi4j/lib/'*' stepm45")
?>
★ step90.php
<?php
echo shell_exec("sudo java -classpath .:classes:
/opt/pi4j/lib/'*' step90")
?>
★ step-90.php
<?php
echo shell_exec("sudo java -classpath .:classes:
/opt/pi4j/lib/'*' stepm90")
?>
實作過程 - Coding
(step45/-45/90/-90/180/-180.php)
13
★ step180.php
<?php
echo shell_exec("sudo java -classpath .:classes:
/opt/pi4j/lib/'*' step180")
?>
★ step-180.php
<?php
echo shell_exec("sudo java -classpath .:classes:
/opt/pi4j/lib/'*' stepm180")
?>
★ step45.java
import com.pi4j.component.motor.impl.GpioStepperMotorComponent;
import com.pi4j.io.gpio.GpioController;
import com.pi4j.io.gpio.GpioFactory;
import com.pi4j.io.gpio.GpioPinDigitalOutput;
import com.pi4j.io.gpio.PinState;
import com.pi4j.io.gpio.RaspiPin;
public class step45 {
public static void main(String[] args) throws InterruptedException {
System.out.println("<--Pi4J--> GPIO Stepper Motor Example ... started.");
// create gpio controller
final GpioController gpio = GpioFactory.getInstance();
// provision gpio pins #00 to #03 as output pins and ensure in LOW state
final GpioPinDigitalOutput[] pins = {
gpio.provisionDigitalOutputPin(RaspiPin.GPIO_00, PinState.LOW),
gpio.provisionDigitalOutputPin(RaspiPin.GPIO_01, PinState.LOW),
gpio.provisionDigitalOutputPin(RaspiPin.GPIO_02, PinState.LOW),
gpio.provisionDigitalOutputPin(RaspiPin.GPIO_03, PinState.LOW)};
實作過程 - Coding
(step45.java)
14
★ step45.java (cont’d)
// this will ensure that the motor is stopped when the program terminates
gpio.setShutdownOptions(true, PinState.LOW, pins);
// create motor component
GpioStepperMotorComponent motor = new GpioStepperMotorComponent(pins);
// @see http://www.lirtex.com/robotics/stepper-motor-controller-circuit/
// for additional details on stepping techniques
// create byte array to demonstrate a double-step sequencing
// (In this method two coils are turned on simultaneously. This method does not generate
// a smooth movement as the previous method, and it requires double the current, but as
// return it generates double the torque.)
byte[] double_step_sequence = new byte[4];
double_step_sequence[0] = (byte) 0b0011;
double_step_sequence[1] = (byte) 0b0110;
double_step_sequence[2] = (byte) 0b1100;
double_step_sequence[3] = (byte) 0b1001;
// define stepper parameters before attempting to control motor
// anything lower than 2 ms does not work for my sample motor using single step sequence
motor.setStepInterval(1);
motor.setStepSequence(double_step_sequence);
實作過程 - Coding
(step45.java <cont’d>)
15
★ step45.java (cont’d)
// There are 32 steps per revolution on my sample motor, and inside is a ~1/64 reduction gear set.
// Gear reduction is actually: (32/9)/(22/11)x(26/9)x(31/10)=63.683950617
// This means is that there are really 32*63.683950617 steps per revolution = 2037.88641975 ~ 2038 steps!
motor.setStepsPerRevolution(2038);
motor.rotate(0.125);
System.out.println(" Motor STOPPED.");
// final stop to ensure no motor activity
motor.stop();
// stop all GPIO activity/threads by shutting down the GPIO controller
// (this method will forcefully shutdown all GPIO monitoring threads and scheduled tasks)
gpio.shutdown();
}
}
實作過程 - Coding
(step45.java <cont’d>)
16
change some code...
★ stepm45.java
public class stepm45 {
……………….
motor.rotate(-0.125);
★ step90.java
public class step90 {
……………….
motor.rotate(0.25);
★ stepm90.java
public class stepm90 {
……………….
motor.rotate(-0.25);
實作過程 - Coding
(stepm45/90/m90/180/m180.java)
17
★ step180.java
public class step180 {
……………….
motor.rotate(0.5);
★ stepm180.java
public class step180 {
……………….
motor.rotate(0.5);
★ index.php
<html>
<Iframe src="http://192.168.0.106:8080/javascript_simple.html" width="660" height="500"></Iframe>
<p>toy control:
<button type="button" name="button" onclick="servo90()">90 degrees</button>
<button type="button" name="button2" onclick="servo180()">180 degrees</button></p>
<p>Webcam control:
<img src="playmeow.png" align="right" height="100">
<button type="button" name="button3" onclick="step45()">L 45 degrees</button>
<button type="button" name="button4" onclick="stepm45()">R 45 degrees</button></p>
<p><font color="#ffffff">Webcam control: </font>
<button type="button" name="button5" onclick="step90()">L 90 degrees</button>
<button type="button" name="button6" onclick="stepm90()">R 90 degrees</button></p>
<p><font color="#ffffff">Webcam control: </font>
<button type="button" name="button7" onclick="step180()">L 180 degrees</button>
<button type="button" name="button8" onclick="stepm180()">R 180 degrees</button></p>
<script>
function servo90(){
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("POST","servo90.php",true);
xmlhttp.send();
}
實作過程 - Coding
(index.php)
18
★ index.php (cont’d)
function servo180(){
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("POST","servo180.php",true);
xmlhttp.send();
}
function step45(){
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("POST","step45.php",true);
xmlhttp.send();
}
function stepm45(){
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("POST","step-45.php",true);
xmlhttp.send();
}
function step90(){
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("POST","step90.php",true);
xmlhttp.send();
}
實作過程 - Coding
(index.php <cont’d>)
19
function stepm90(){
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("POST","step-90.php",true);
xmlhttp.send();
}
function step180(){
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("POST","step180.php",true);
xmlhttp.send();
}
function stepm180(){
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("POST","step-180.php",true);
xmlhttp.send();
}
</script>
</html>
實作過程
20
實作過程
21
!在網頁上控制 伺服馬達&步進馬達 !
➔ 以超連結控制會跳出新視窗 Noooooo~!!!
Helper - RichEGG
RichEGG : 改用AJAX ~
!在沒有Public ip、路由器不是自己的情況下,從外部開啟控制網頁!
➔ DDNS 無法設定 Noooooo~!!!
➔ 以3G行動網卡代替 $_$不是長遠之計
Helper - BlueT
BlueT : 可以用ssh 或vpn解決, 到 ipv6 普及就沒有這個問題了~
➔ ssh reverse tunnel 需要額外一台有Public ip的機器=.=
➔ VPN 綁定裝置以外的裝置會無法使用 T_T
➔ 無解 >_<....
實作過程 - 困難與解決
22
實際產出 - 外觀
23
實際產出 - 外觀
24
實際產出 - 試玩(改良前)
25
實際產出 - 試玩 (改良後)
26
實際產出 - Firefox
27
實際產出 - Safari
28
實際產出 - Chrome
29
實際產出 - ipad safari
30
實際產出 - smartphone chrome
31
網頁:
http://www.w3schools.com
https://www.youtube.com/watch?v=ddlDgUymbxc
http://www.codedata.com.tw/java/java-embedded-10-gpio-motor
http://www.ntex.tw/wordpress/545.html
https://sites.google.com/site/raspberypishare0918/
http://www.powenko.com/wordpress/?p=4324
書籍:
Raspberry Pi最佳入門與實戰應用 , 柯博文 , 碁峰 ,2015-01-08
Raspberry Pi超炫專案與完全實戰 , 柯博文 , 碁峰 ,2014-09-26
參考資料
32
END
THANK YOU !
Q & A
33

More Related Content

Similar to 1032 practical linux system administration (14)

PPTX
[5]投影片 futurewad樹莓派研習會 141218
CAVEDU Education
 
PDF
Openwrt, linux e GPIO al LinuxDay 2010 Roma
Claudio Mignanti
 
PPTX
phase3.pptx
BalRaj75
 
PDF
Based on raspberry pi with the application of Stepper
冠宇 陳
 
PDF
RMOUG QEW Family Coding Event- Raspberry PI
Kellyn Pot'Vin-Gorman
 
PDF
Raspberry Pi 4.pdf
Engineering Funda
 
DOCX
Intelligent autonomous robotics with projects in waayoo.com
Praveen Pandey
 
PPTX
Motordrive
Mahdi Babaei
 
DOCX
Advanced robotics with vision based control using onboard image processing in...
Praveen Pandey
 
DOCX
Advanced robotics with vision based control using onboard image processing 5
Praveen Pandey
 
PDF
OpenBot-Code
Anshuman Dhar
 
PDF
Open bot
Anshuman Dhar
 
PDF
Interfacing the Raspberry Pi to the World
Omer Kilic
 
PDF
IRJET- IOT Based Surveillance Robotic Car using Raspberry PI
IRJET Journal
 
[5]投影片 futurewad樹莓派研習會 141218
CAVEDU Education
 
Openwrt, linux e GPIO al LinuxDay 2010 Roma
Claudio Mignanti
 
phase3.pptx
BalRaj75
 
Based on raspberry pi with the application of Stepper
冠宇 陳
 
RMOUG QEW Family Coding Event- Raspberry PI
Kellyn Pot'Vin-Gorman
 
Raspberry Pi 4.pdf
Engineering Funda
 
Intelligent autonomous robotics with projects in waayoo.com
Praveen Pandey
 
Motordrive
Mahdi Babaei
 
Advanced robotics with vision based control using onboard image processing in...
Praveen Pandey
 
Advanced robotics with vision based control using onboard image processing 5
Praveen Pandey
 
OpenBot-Code
Anshuman Dhar
 
Open bot
Anshuman Dhar
 
Interfacing the Raspberry Pi to the World
Omer Kilic
 
IRJET- IOT Based Surveillance Robotic Car using Raspberry PI
IRJET Journal
 

Recently uploaded (12)

PDF
4 Tips for Reducing Tool Deflection in CNC Machining.pdf
Content Swap
 
PPTX
INTERNET OF THINGS (IOT) network of interconnected devices.
rp1256748
 
PPTX
Modern machinery.pptx sjsjnshhsnsnnjnnbbbb
raipureastha08
 
PPTX
PPT FOR BASIC UNDERSTANDING OF COMPUTER HARDWARE, SOFTWARE & FIRMWARE
kavishvora10
 
PPTX
Basics of Memristors from zero to hero.pptx
onterusmail
 
PDF
HUAWEI MOBILE PHONE IMPORTED FROM CHINA TO THAILAND REPORT.pdf.pdf
youyou851038
 
DOCX
What Is Zoning Map Software and Why It Matters for Communities
riffatparveenseo
 
PPTX
Basics of Memristors and fundamentals.pptx
onterusmail
 
PDF
Abbreviations in NC-ISM_syllabus.pdf hejsnsjs
raipureastha08
 
PPTX
Normal distriutionvggggggggggggggggggg.pptx
JayeshTaneja4
 
PPTX
White and Blue Illustrated Technology Cybersecurity Presentation.pptx
sysybituin27
 
PPTX
basic_parts-of_computer-1618-754-622.pptx
patelravi16187
 
4 Tips for Reducing Tool Deflection in CNC Machining.pdf
Content Swap
 
INTERNET OF THINGS (IOT) network of interconnected devices.
rp1256748
 
Modern machinery.pptx sjsjnshhsnsnnjnnbbbb
raipureastha08
 
PPT FOR BASIC UNDERSTANDING OF COMPUTER HARDWARE, SOFTWARE & FIRMWARE
kavishvora10
 
Basics of Memristors from zero to hero.pptx
onterusmail
 
HUAWEI MOBILE PHONE IMPORTED FROM CHINA TO THAILAND REPORT.pdf.pdf
youyou851038
 
What Is Zoning Map Software and Why It Matters for Communities
riffatparveenseo
 
Basics of Memristors and fundamentals.pptx
onterusmail
 
Abbreviations in NC-ISM_syllabus.pdf hejsnsjs
raipureastha08
 
Normal distriutionvggggggggggggggggggg.pptx
JayeshTaneja4
 
White and Blue Illustrated Technology Cybersecurity Presentation.pptx
sysybituin27
 
basic_parts-of_computer-1618-754-622.pptx
patelravi16187
 
Ad

1032 practical linux system administration

  • 1. 1032 Practical Linux System Administration Final Report Group 8 - 吳 芷 恩 <100212067> 1
  • 4. 實作所需材料 4 材料 取得來源 價格 Raspberry Pi BlueT $-- Logitech Webcam C310 PChome $699 Servo motor SG90 Ruten $48 Stepper motor 28BYJ-48-5V Ruten $50 ULN2003 Driver Board Ruten $27 Dupont Line Ruten $20 Steel wire Hardware store $5 Mouse toy DAISO $39
  • 5. ★ Web server - LAMP ★ Automatically send ip to Email - Postfix 運用與課程內容中相關的技巧 5
  • 6. ★ Stepper motor ○ software: Pi4J http://pi4j.com/ ○ code:https://github.com/Pi4J/pi4j/blob/master/pi4j- example/src/main/java/StepperMotorGpioExample.java ★ Servo motor ○ software: Python ○ code:https://www.youtube.com/watch?v=ddlDgUymbxc ★ Webcam ○ software: MJPG-streamer http://sourceforge.net/projects/mjpg- streamer/ ★ Webpage ○ software: LAMP ○ code: HTML, PHP, JavaScript AJAX http://php. net/manual/en/function.shell-exec.php http://www.w3schools. com/ajax/ajax_example.asp 使用的現有軟體與來源 6
  • 8. Servo motor 實作過程 - GPIO 配置 (cont’d) 8
  • 10. Builds MJPG-streamer ➢ sudo apt-get update ➢ sudo apt-get install subversion libjpeg8-dev imagemagick ➢ sudo svn checkout svn://svn.code.sf.net/p/mjpg-streamer/code ➢ cd code/mjpg-streamer ➢ sudo make clean all ➢ export LD_LIBRARY_PATH=. ➢ ./mjpg_streamer -i "./input_uvc.so" -o "./output_http.so -w ./www" Auto run MJPG-streamer when pi boots up ➢ sudo vim /etc/rc.local ➢ add codes before exit 0 : export STREAMER_PATH=/home/pi/code/mjpg-streamer export LD_LIBRARY_PATH=$ STREAMER_PATH $STREAMER_PATH/mjpg_streamer -i “input_uvc.so -y = YUYV” -o “output_http.so -w $STREAMER_PATH/www” &s 實作過程 - MJPG-streamer 10
  • 11. ★ servo90.php <?php echo shell_exec("sudo python servo90.py") ?> 實作過程 - Coding (servo90.php & servo90.py) 11 ★ servo90.py import RPi.GPIO as GPIO import time GPIO.setmode(GPIO.BOARD) GPIO.setup(7,GPIO.OUT) p = GPIO.PWM(7,50) p.start(7.5) count=0 while (count<4): p.ChangeDutyCycle(2.5) time.sleep(0.25) p.ChangeDutyCycle(7.5) time.sleep(0.25) count=count+1 p.stop() GPIO.cleanup()
  • 12. ★ servo180.php <?php echo shell_exec("sudo python servo180.py") ?> 實作過程 - Coding (servo180.php & servo180.py) 12 ★ servo180.py import RPi.GPIO as GPIO import time GPIO.setmode(GPIO.BOARD) GPIO.setup(7,GPIO.OUT) p = GPIO.PWM(7,50) p.start(7.5) count=0 while (count<4): p.ChangeDutyCycle(12.5) time.sleep(0.5) p.ChangeDutyCycle(2.5) time.sleep(0.5) count=count+1 p.stop() GPIO.cleanup()
  • 13. ★ step45.php <?php echo shell_exec("sudo java -classpath .:classes: /opt/pi4j/lib/'*' step45") ?> ★ step-45.php <?php echo shell_exec("sudo java -classpath .:classes: /opt/pi4j/lib/'*' stepm45") ?> ★ step90.php <?php echo shell_exec("sudo java -classpath .:classes: /opt/pi4j/lib/'*' step90") ?> ★ step-90.php <?php echo shell_exec("sudo java -classpath .:classes: /opt/pi4j/lib/'*' stepm90") ?> 實作過程 - Coding (step45/-45/90/-90/180/-180.php) 13 ★ step180.php <?php echo shell_exec("sudo java -classpath .:classes: /opt/pi4j/lib/'*' step180") ?> ★ step-180.php <?php echo shell_exec("sudo java -classpath .:classes: /opt/pi4j/lib/'*' stepm180") ?>
  • 14. ★ step45.java import com.pi4j.component.motor.impl.GpioStepperMotorComponent; import com.pi4j.io.gpio.GpioController; import com.pi4j.io.gpio.GpioFactory; import com.pi4j.io.gpio.GpioPinDigitalOutput; import com.pi4j.io.gpio.PinState; import com.pi4j.io.gpio.RaspiPin; public class step45 { public static void main(String[] args) throws InterruptedException { System.out.println("<--Pi4J--> GPIO Stepper Motor Example ... started."); // create gpio controller final GpioController gpio = GpioFactory.getInstance(); // provision gpio pins #00 to #03 as output pins and ensure in LOW state final GpioPinDigitalOutput[] pins = { gpio.provisionDigitalOutputPin(RaspiPin.GPIO_00, PinState.LOW), gpio.provisionDigitalOutputPin(RaspiPin.GPIO_01, PinState.LOW), gpio.provisionDigitalOutputPin(RaspiPin.GPIO_02, PinState.LOW), gpio.provisionDigitalOutputPin(RaspiPin.GPIO_03, PinState.LOW)}; 實作過程 - Coding (step45.java) 14
  • 15. ★ step45.java (cont’d) // this will ensure that the motor is stopped when the program terminates gpio.setShutdownOptions(true, PinState.LOW, pins); // create motor component GpioStepperMotorComponent motor = new GpioStepperMotorComponent(pins); // @see http://www.lirtex.com/robotics/stepper-motor-controller-circuit/ // for additional details on stepping techniques // create byte array to demonstrate a double-step sequencing // (In this method two coils are turned on simultaneously. This method does not generate // a smooth movement as the previous method, and it requires double the current, but as // return it generates double the torque.) byte[] double_step_sequence = new byte[4]; double_step_sequence[0] = (byte) 0b0011; double_step_sequence[1] = (byte) 0b0110; double_step_sequence[2] = (byte) 0b1100; double_step_sequence[3] = (byte) 0b1001; // define stepper parameters before attempting to control motor // anything lower than 2 ms does not work for my sample motor using single step sequence motor.setStepInterval(1); motor.setStepSequence(double_step_sequence); 實作過程 - Coding (step45.java <cont’d>) 15
  • 16. ★ step45.java (cont’d) // There are 32 steps per revolution on my sample motor, and inside is a ~1/64 reduction gear set. // Gear reduction is actually: (32/9)/(22/11)x(26/9)x(31/10)=63.683950617 // This means is that there are really 32*63.683950617 steps per revolution = 2037.88641975 ~ 2038 steps! motor.setStepsPerRevolution(2038); motor.rotate(0.125); System.out.println(" Motor STOPPED."); // final stop to ensure no motor activity motor.stop(); // stop all GPIO activity/threads by shutting down the GPIO controller // (this method will forcefully shutdown all GPIO monitoring threads and scheduled tasks) gpio.shutdown(); } } 實作過程 - Coding (step45.java <cont’d>) 16
  • 17. change some code... ★ stepm45.java public class stepm45 { ………………. motor.rotate(-0.125); ★ step90.java public class step90 { ………………. motor.rotate(0.25); ★ stepm90.java public class stepm90 { ………………. motor.rotate(-0.25); 實作過程 - Coding (stepm45/90/m90/180/m180.java) 17 ★ step180.java public class step180 { ………………. motor.rotate(0.5); ★ stepm180.java public class step180 { ………………. motor.rotate(0.5);
  • 18. ★ index.php <html> <Iframe src="http://192.168.0.106:8080/javascript_simple.html" width="660" height="500"></Iframe> <p>toy control: <button type="button" name="button" onclick="servo90()">90 degrees</button> <button type="button" name="button2" onclick="servo180()">180 degrees</button></p> <p>Webcam control: <img src="playmeow.png" align="right" height="100"> <button type="button" name="button3" onclick="step45()">L 45 degrees</button> <button type="button" name="button4" onclick="stepm45()">R 45 degrees</button></p> <p><font color="#ffffff">Webcam control: </font> <button type="button" name="button5" onclick="step90()">L 90 degrees</button> <button type="button" name="button6" onclick="stepm90()">R 90 degrees</button></p> <p><font color="#ffffff">Webcam control: </font> <button type="button" name="button7" onclick="step180()">L 180 degrees</button> <button type="button" name="button8" onclick="stepm180()">R 180 degrees</button></p> <script> function servo90(){ var xmlhttp=new XMLHttpRequest(); xmlhttp.open("POST","servo90.php",true); xmlhttp.send(); } 實作過程 - Coding (index.php) 18
  • 19. ★ index.php (cont’d) function servo180(){ var xmlhttp=new XMLHttpRequest(); xmlhttp.open("POST","servo180.php",true); xmlhttp.send(); } function step45(){ var xmlhttp=new XMLHttpRequest(); xmlhttp.open("POST","step45.php",true); xmlhttp.send(); } function stepm45(){ var xmlhttp=new XMLHttpRequest(); xmlhttp.open("POST","step-45.php",true); xmlhttp.send(); } function step90(){ var xmlhttp=new XMLHttpRequest(); xmlhttp.open("POST","step90.php",true); xmlhttp.send(); } 實作過程 - Coding (index.php <cont’d>) 19 function stepm90(){ var xmlhttp=new XMLHttpRequest(); xmlhttp.open("POST","step-90.php",true); xmlhttp.send(); } function step180(){ var xmlhttp=new XMLHttpRequest(); xmlhttp.open("POST","step180.php",true); xmlhttp.send(); } function stepm180(){ var xmlhttp=new XMLHttpRequest(); xmlhttp.open("POST","step-180.php",true); xmlhttp.send(); } </script> </html>
  • 22. !在網頁上控制 伺服馬達&步進馬達 ! ➔ 以超連結控制會跳出新視窗 Noooooo~!!! Helper - RichEGG RichEGG : 改用AJAX ~ !在沒有Public ip、路由器不是自己的情況下,從外部開啟控制網頁! ➔ DDNS 無法設定 Noooooo~!!! ➔ 以3G行動網卡代替 $_$不是長遠之計 Helper - BlueT BlueT : 可以用ssh 或vpn解決, 到 ipv6 普及就沒有這個問題了~ ➔ ssh reverse tunnel 需要額外一台有Public ip的機器=.= ➔ VPN 綁定裝置以外的裝置會無法使用 T_T ➔ 無解 >_<.... 實作過程 - 困難與解決 22
  • 26. 實際產出 - 試玩 (改良後) 26
  • 30. 實際產出 - ipad safari 30