2016教學軟體設計

2016年12月8日星期四

60508013E_林子婷,Week13

105/12/08

1.Hour of code - https://hourofcode.com/us/zh/learn

迪士尼授權學程式
http://partners.disney.com/hour-of-code

2. Hello Processing

http://hello.processing.org/

2016年12月6日星期二

1. Apache+PHP+MySQL+Processing
Wamp：Window's Apache,MySQL,PHP
  http://www.wampserver.com/en/
Mamp：Mac's Apache,MySQL,PHP

安裝Visual Studio 2012
  https://www.microsoft.com/zh-TW/download/details.aspx?id=30679

安裝Visual Studio 2015
  https://www.microsoft.com/en-us/download/details.aspx?id=48145

*架設網站

1. 先到 C:\wamp64\www\建一個資料夾把網頁檔案丟進去

2. 在網頁的地方打localhost/資料夾名稱就可以看到網頁

3. PHP & MySQL教學
https://pjchender.blogspot.tw/2015/03/php-mysql.html

4. 開啟notepad++，將檔案存在C:\wamp64\www 之下，檔案類型要選 php

5. 建資料庫(第八堂課)
a. 到localhost的網頁點選下面Tools的phpmyadmin
b. 用root登入(之後記得換帳號、密碼，以免被入侵)
c. 建立資料庫資料夾

d. 建立資料表名稱和欄位(可先用excel模擬)

e. 建資料欄位

f. key in內容

g. 打php

<?php
$link=mysqli_connect("localhost","root","");
mysqli_select_db($link,"ntnu_ice");
$result=mysqli_query($link,"select * from name");

while($row= $result->fetch_assoc()){
echo $row["ID"]."<br>";
echo $row["Name"]."<br>";
echo $row["Tele"]."<br><hr><br>";
}

?>

Week12 施柏豪上課筆記

本日課程內容大綱：

實作Processing與資料庫的資料對接功能
1. 在個人筆電上使用WAMP套件包架設網頁伺服器
2. 新增&設定資料庫中的資料表內容
3. 在Processing中匯入SQL相關函式庫，進行資料庫串接

1.WAMP安裝設定

WAMP是Windows+Apache+MySQL+PHP的縮寫，如果要使用網頁資料庫就必須連到Server端，而此套件包有助於幫助我們在個人電腦上免費快速(?)的建置出伺服器環境，理想上，安裝好以WAMP之後，WampServer 管理程式會自動啟動Web Server與資料庫伺服器，如果Windows 的桌面上的工作列WampServer 管理程式顯示綠色的「W」圖示，表示所有伺服器系統已經成功啟動。

但事情總是不會如此順利，可能會出現的問題如下：

1. 網頁伺服器需要Port 80的使用權限，但是如果個人筆電環境有安裝其他使用此Port的程式，我們就需要另外想一個Port去設定此網頁伺服器環境，或是找到原本使用80 Port的程式，並更改其Port號。

2. WAMP SEVER套件包有一個官網可以直接下載，這個官網提供最新的Apache與MySQL套件組合，如我發文時間的當下版本是 Apache 2.4.23 – PHP 5.6.25/7.0.10 – MySQL 5.7.14，後面的數字感覺沒什麼意義，但實際安裝後依當時套件更新的狀況或是電腦環境的差異，可能會出現很多不可預料的套件衝突，這時候，就要去找不同版本套件的網路資訊再重新安裝測試，通常這邊出問題就要花很久時間處理，有經驗的人可能可以比較快地看錯誤訊息而解決問題。

3. 通常MySQL裝好以後會使用PhpMyAdmin 這個Web-Base資料庫管理工具進行資料庫操作，PhpMyAdmin通常也會搭配Apache或是PHP版本，個別安裝這些服務出問題的機率蠻高的，所以WAMP套件包有其實用性。

4. 話雖如此講，但是依據我之前實際開發網頁或是建置網站的經驗，常常碰到的狀況是要使用某個服務，但是此服務依存於PHP某個新/舊版本，這時候就要想辦法再解除安裝去升版本或是降版本，套件版本相依性的問題，不出現還好，一出現就是要花時間再去查詢網路資料，閱讀國外的網路論壇上的英文去解決問題更是家常便飯，不過英文看久了就習慣了😄。
5. 一般在設定WAMP安裝過程可能會去GOOGLE其他人在網路分享的資料，這一步大家都會做，但是其實國外資訊的東西更新的速度很快，可能更新之後的系統架構，之前寫的解法就不能用了，如果還依照去年、前年的方式去一步一步實作，做完你的系統 crash 掉也是很稀鬆平常的事，所以，有資料可以看不一定是好，跌倒多了累積出來的經驗與心得才是解決問題最重要的。
6. 基於第5點的內容，我不禁想再多紀錄一件事，以自己安裝架站這件事，買書來看通常幫助有限，想想看一本書從作者編輯到印刷出版，可能經過一陣時間了，如果是這種不斷更新套件版本的系統或是程式，只要國外的人因為效能安全因素，更換系統或是函式庫，書上的內容其實就不太有參考性了，所以要嘛就去天瓏書局買最新出版的電腦書籍，要嘛就自己上網找資料歸納解決問題的方式。

2.PhpMyAdmin設定
接下來是PhpMyAdmin資料表新增與欄位的設定，在這邊需要留意是的繁體中文編碼的問題，建立新的資料表編碼預設是 latin1_swedish_ci，需要改成 utf8_unicode_ci，如果還有其他中文亂碼的問題，可以參考這網站的資料整理：
解決 PHP/mySQL 資料庫讀取中文顯示亂碼或問號 - mrmu 設計工作室

總結：

從大學時期就開始Linux與做網站，碩士班時期因為幫忙老闆執行教育部數位閱讀計畫，使用 CentOS 架網站累積很多心得，以上這些是我的一些心得感想，剛好這學期葉老師在這堂課使用WAMP環境作為 Processing 串接資料庫，所以藉此機會在此分享我的實務經驗給其他同學了解，希望自己進步的同時，也能幫助到其他人~

2016年12月2日星期五

20161124 小楓兒筆記

數位餐桌

Smart Table for Dining

https://www.youtube.com/watch?v=CbT7ape3M4U

Le Petit Chef

https://www.youtube.com/watch?v=yBJEP4lsRFY

實作：數位餐桌

餐桌

餐桌上有盤子

拖拉盤子，任意擺盤

PVector[] dish=new PVector[4];

void setup(){

size(640,480);

dish[0]=new PVector(100,100); ←小盤子的位置

dish[1]=new PVector(540,100);

dish[2]=new PVector(100,380);

dish[3]=new PVector(540,380);

}

void draw(){

background(255);

ellipse(320,240,400,400);//rotating circle

ellipse(100,100,100,100); ←大盤子的位置

ellipse(540,100,100,100);

ellipse(100,380,100,100);

ellipse(540,380,100,100);

for(int i=0;i<4;i++){

ellipse(dish[i].x,dish[i].y,90,90);

}

int nowDish=-1;

void mousePressed(){

for(int i=0;i<4;i++){

if(dist(dish[i].x,dish[i].y,mouseX,mouseY)<45){

nowDish=i;

}

void mouseDragged(){

if(nowDish!=-1)

dish[nowDish].x=mouseX; ←滑鼠移動盤子

dish[nowDish].y=mouseY;

}

void mouseReleased(){

nowDish=-1;

}

拖拉盤子會有角度線

按任意鍵盤子會旋轉

PVector[] dish=new PVector[4];
float[]r={0,0,0,0};
float[]angle={0,0,0,0};
void setup(){
size(640,480);
dish[0]=new PVector(100,100);
dish[1]=new PVector(540,100);
dish[2]=new PVector(100,380);
dish[3]=new PVector(540,380);
}

void draw(){
background(255);
ellipse(320,240,400,400);//rotating circle
ellipse(100,100,100,100);
ellipse(540,100,100,100);
ellipse(100,380,100,100);
ellipse(540,380,100,100);
for(int i=0;i<4;i++){
ellipse(dish[i].x,dish[i].y,90,90);
line(dish[i].x,dish[i].y,320,240);
}
if(keyPressed){
for(int i=0;i<4;i++){
angle[i]-=0.01;
dish[i].x=r[i]*cos(angle[i])+320;
dish[i].y=r[i]*sin(angle[i])+240;
}
}
}
int nowDish=-1;
void mousePressed(){
for(int i=0;i<4;i++){
if(dist(dish[i].x,dish[i].y,mouseX,mouseY)<45){
nowDish=i;
}
}
}
void mouseDragged(){
if(nowDish!=-1)
dish[nowDish].x=mouseX;
dish[nowDish].y=mouseY;
r[nowDish]=sqrt((mouseX-320)*(mouseX-320)+(mouseY-240)*(mouseY-240));
angle[nowDish]=atan2(mouseY-240,mouseX-320);
}
void mouseReleased(){
nowDish=-1;
}

*開車
https://www.facebook.com/162587530761269/videos/302527540100600/?hc_location=ufi

實作：停車

車子可以前進、後退、左轉、右轉

void setup(){
size(640,480,P3D);
rectMode(CENTER);
}
float carX=640/2,carY=320/2;
float carDir=0.6,caeWheel=0;
void drawCar(){
translate(carX,carY);
rotateZ(carDir);
rect(0,0,187,89);
if(keyPressed&&keyCode==UP){
carX+=cos(carDir);carY+=sin(carDir);
}
else if(keyPressed&&keyCode==DOWN){
carX-=cos(carDir);carY-=sin(carDir);
}
else if(keyPressed&&keyCode==RIGHT){
carDir+=0.01;
}
else if(keyPressed&&keyCode==LEFT){
carDir-=0.01;
}
}
void draw(){
background(100);
drawCar();
}
void keyPressed(){
}

調整前輪作轉彎

void setup() {
size(640, 480, P3D);
rectMode(CENTER);
}
float carX=640/2, carY=320/2;
float carDir=0.6, carWheel=0;
void drawCar() {
pushMatrix();
translate(carX, carY);
rotateZ(carDir);
rect(0, 0, 187, 89);
drawWheel(127/2,89/2,1);
drawWheel(127/2,-89/2,1);
drawWheel(-127/2,89/2,0);
drawWheel(-127/2,-89/2,0);

if (keyPressed&&keyCode==UP) {
carX+=cos(carDir+carWheel);carY+=sin(carDir+carWheel);
carDir+=carWheel/50;
} else if (keyPressed&&keyCode==DOWN) {
carX-=cos(carDir+carWheel);carY-=sin(carDir+carWheel);
carDir-=carWheel/50;
} else if (keyPressed&&keyCode==RIGHT) {
carWheel+=0.01;
if (carWheel>0.3) carWheel=0.3;
} else if (keyPressed&&keyCode==LEFT) {
carWheel-=0.01;
if (carWheel<-0.3) carWheel=-0.1;
}
popMatrix();
}
void drawWheel(float x,float y,int front) {
pushMatrix();
translate(x,y);
if(front==1) rotateZ(carWheel);
rect(0,0,40,20);
popMatrix();
}
void draw() {
background(100);
drawCar();
}
void keyPressed() {
}

*VR
用 HoloLens 加上空拍機, 學習太極拳
https://www.youtube.com/watch?v=KtVltAT7a-U&feature=youtu.be

故宮山水畫
https://youtu.be/MNuMH_OvptU

敦煌石窟
https://youtu.be/O3ZZCGgLgJM

*PowerPoint 的快速鍵
1. F5 播放
2. 播放時, 按 W 會變 White白色, 按 B 會變成 Black黑色
3. 直接按數字後再敲 Enter, ex. 按 11 Enter 就會跳到第 11頁
4. 可以用畫筆來畫

rectMode()

https://www.processing.org/reference/rectMode_.html