javascript 網頁設計環境架設 - yeoman

1. 安裝 node.js

2. 安裝 yeoman 可使用終端機 --- npm install -g yo

3. 安裝 Bower  可使用終端機 --- npm install -g bower

4. 安裝 Grunt  可使用終端機 --- npm install -g grunt-cli

5. 安裝 generator-threejs-module (其他generator可於yeoman Discovering generators 搜尋)

安裝過程遇到以下Error

npm ERR! Please try running this command again as root/Administrator.

輸入以下指令再輸入密碼(解決方式來源)

sudo chown -R $USER /usr/local

6. CD 至想新增專案之資料夾

7. 終端機指令：yo

8. 選擇 Threejs Module

9. 終端機指令：grunt

此時會打開一個新網頁，而之後在專案資料夾開發，儲存時會在瀏覽器上做自動重新載入網頁

Mac 中開啟 iOS Safari console log

在 iOS 中進入設定→ Safari(在左側欄) → 進階 → 網頁檢視器，將其打開

然後 iOS 設備連接至 Mac

iOS 設備及 Mac 打開 Safari

在 Mac 的 Safari 中選取--開發 → 需要 log 的 iOS 設備 → 需要 log 的網頁分頁

PCHOME 24HR - 大榮

這邊只是單純做記錄，基本上PCHOME服務良好，會繼續支持。


之前在PCHOME下單，狀況都很好，黑貓或郵局都很快速的將貨送達。
很多東西一日送達很方便，即便有些東西不是最便宜，但省去交通以及時間的情況下，他是我最佳的選擇。

這次在PCHOME下單雙人床墊，晚上11點下單，照之前的經驗，大部份是隔天早上8-9點就送到，而這次卻等到傍晚還沒送來。追蹤了一下，東西還停在桃園。

後來等到週日一早，看到貨已經在板橋了，雖然看不懂全欠的意思＠＿＠，但想說應該會上午就送到吧。結果到了中午（過了36小時），沒收到任何電話。但有約必須出門，且隔天需要上班無法收貨的狀況下，決定把貨退掉了。

週一上班後，沒意外的接到貨運電話，告知因為無法收貨，所以已經將貨品退訂。

以上過程我覺得就只是買賣交易偶而會碰到的情況，也不覺得有什麼。

然而出於好奇，便上了PCHOME看了一下處理流程。結果發現，居然變成已送達，而且是在打給我之前就送達。這......(這時才上網截圖，所以第一張圖是完整的送貨流程)

備記：退貨退款正常

HTML截取定位資訊轉存至THREE.js

if (navigator.geolocation) {
setInterval("enableGeolocation()",5000);
} else {
    alert("Geolocation is not supported by this browser.");
}

function enableGeolocation() {
navigator.geolocation.getCurrentPosition(showPosition);
}

function showPosition(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
}

HTML截取攝影機畫面

來源：http://www.html5rocks.com/en/tutorials/getusermedia/intro/

if (navigator.getUserMedia) {

    if (typeof MediaStreamTrack != 'undefined' && typeof MediaStreamTrack.getSources != 'undefined'){//Chrome 選擇後攝影機
      MediaStreamTrack.getSources(function gotSources(sourceInfos){
          var option = document.createElement("option");
          var hasRearCamera = false;
          for (var i = 0; i != sourceInfos.length; ++i) {
            var sourceInfo = sourceInfos[i];
            if (sourceInfo.kind === 'video') {
                if (!hasRearCamera) {
                    option.value = sourceInfo.id;
                    option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
                };
                if( sourceInfo.facing === 'environment' ) {
                    hasRearCamera = true;
                    option.value = sourceInfo.id;
                    option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
                    navigator.getUserMedia({video: { optional: [{sourceId: option.value}] }}, successCallback, errorCallback);
                }
            }
          }
          if (!hasRearCamera) {
            navigator.getUserMedia({video: { optional: [{sourceId: option.value}] }}, successCallback, errorCallback);
          }
      });
    }else{
        navigator.getUserMedia({video: true}, successCallback, errorCallback);
    }
 
} else {
    sendError('Native web camera streaming (getUserMedia) not supported in this browser.');
}

HTML5 + WebGL 實作小筆記

1.
(1) iOS 7 以前(包含)，無法使用瀏覽器取得攝影機畫面。(navigator.getUserMedia函式)
(2) Chrome on android 可以用程式抓出所有多媒體設備，並且判斷需要的設備做選擇，例如後攝影機。(判斷式：http://kanbear.blogspot.tw/2014/07/htmlthreejs_21.html)
(3) Firefox on android 無法以程式選擇需要的攝影機，在使用者授權攝影機使用時交由使用者決定攝影機。
(4) Opera on android 預設使用後攝影機。

HTML截取陀螺儀轉存至THREE.js

來源：http://w3c.github.io/deviceorientation/spec-source-orientation.html
其實似乎直接用四元素的公式就可以使用了，但因為實作上需要對應實際地標方向，需要做一些旋轉，在測試期間換成矩陣去儲存，後來就沒有改回四元素。

var alpha = 0;
var beta = 0;
var gamma = 0;
var gyroscopeQuaternion = new THREE.Quaternion();
gyroscopeQuaternion.setFromEuler(new THREE.Euler(0,0,0));

if (window.DeviceMotionEvent==undefined) {
}
else {
window.ondeviceorientation = function(event) {
alpha = event.alpha;
beta = event.beta;
gamma = event.gamma;
}

setInterval(function() {

var _x = beta  ? beta  * degtorad : 0; // beta value
var _y = gamma ? gamma * degtorad : 0; // gamma value
var _z = alpha ? alpha * degtorad : 0; // alpha value

var cX = Math.cos( _x );
var cY = Math.cos( _y );
var cZ = Math.cos( _z );
var sX = Math.sin( _x );
var sY = Math.sin( _y );
var sZ = Math.sin( _z );

//
// ZXY rotation matrix construction.
//

var m11 = cZ * cY - sZ * sX * sY;
var m12 = - cX * sZ;
var m13 = cY * sZ * sX + cZ * sY;

var m21 = cY * sZ + cZ * sX * sY;
var m22 = cZ * cX;
var m23 = sZ * sY - cZ * cY * sX;

var m31 = - cX * sY;
var m32 = sX;
var m33 = cX * cY;

var rotationMatrix = new THREE.Matrix4(
m11,    m12,    m13,    0,
m21,    m22,    m23,    0,
m31,    m32,    m33,    0,
 0,      0,      0,    1
);

gyroscopeQuaternion = new THREE.Quaternion();
gyroscopeQuaternion.setFromRotationMatrix(rotationMatrix);

}, 100);
}

在Unity 用Gmail帳號寄信 C#

using UnityEngine;//純Log用

using System;

using System.IO;

using System.Net;

using System.Net.Mail;

using System.Net.Security;

using System.Security.Cryptography.X509Certificates;

public class Mail {

public void SendMail() {

     MailMessage mail = new MailMessage();

     mail.From = new MailAddress("寄件者信箱");

     mail.To.Add("收件者信箱");

     mail.Subject = "主旨";

     try{

          //內文附圖

          AlternateView plainView = AlternateView.CreateAlternateViewFromString("<p>",null, "text/plain");

          mail.AlternateViews.Add(plainView);

          AlternateView htmlView = CreateAlternateView("Floor0001");

          mail.AlternateViews.Add(htmlView);

          

          //附件

          FileStream imageFileStream = new FileStream(Application.streamingAssetsPath+"/Floor0001.jpg",FileMode.Open);

          Attachment attachment = new Attachment(imageFileStream,"Floor0001.jpg");

          mail.Attachments.Add(attachment);

          

          Debug.Log("Success");

     }catch{

          Debug.Log("Fail");

     }

     SmtpClient smtpServer = new SmtpClient("smtp.gmail.com");

     smtpServer.Port = 587;

     smtpServer.Credentials = new System.Net.NetworkCredential("寄件者信箱", "寄件者密碼") as ICredentialsByHost;

     smtpServer.EnableSsl = true;

     ServicePointManager.ServerCertificateValidationCallback = 

          delegate(object s, X509Certificate certificate, X509Chain chain, SslPolicyErrors sslPolicyErrors) {  return true; };

     smtpServer.Send(mail);

     }

     private AlternateView CreateAlternateView(string pictureName) {

          string htmlBody = "<html><body><img src=cid:"+pictureName+"A></img><p>" +

                    "<img src=cid:"+pictureName+"B></img><p>" +

                    "Send by unity3d!</body></html>";

          AlternateView alternateView = AlternateView.CreateAlternateViewFromString(

                    htmlBody,

                    null, "text/html");

          LinkedResource imageA = new LinkedResource(Application.streamingAssetsPath+"/"+pictureName+"A.jpg" );

          imageA.ContentId = pictureName+"A";

          LinkedResource imageB = new LinkedResource(Application.streamingAssetsPath+"/"+pictureName+"B.jpg" );

          imageB.ContentId = pictureName+"B";

          alternateView.LinkedResources.Add(imageA);

          alternateView.LinkedResources.Add(imageB);

          return alternateView;

     }

}

在Mac顯示Android上Unity App的Log

1.開啟終端機

2.將adb拖入終端機會自動顯示路徑

3.出現路徑後加上" logcat -s Unity"

4.按下return

adb在SDK資料夾中

/adt-bundle-mac-x86_64-20131030/sdk/platform-tools/adb