2019年10月16日 星期三

[ Django 教學 ] 在樣版程式中放入圖片

HTML教學:HTML 基礎

本篇文章有兩個學習重點:

  1. 如何使用IMG標籤
  2. 圖片檔案在Django的MTV架構下,放在static目錄

本篇文章是承接上一篇文章-在Django中把變數傳到樣版的教學。

1.首先在網路在下載南開的圖片,網址:http://pre.nkut.edu.tw/files/archive/340_dc473239.jpg
2.建立static\images目錄並把下載圖檔存放在static\images目錄下,並更名為nankai.jpg
3.修改在templates目錄下的index.html檔案
3.1 加入{% load staticfiles %}
3.2 加入img標籤

4.執行結果
127.0.0.1:8000/南開科技大學

2019年10月14日 星期一

[ Django 教學 ] 在Django中把變數傳到樣版

請參考前一篇文章-"再探Django,第一個樣版"

1.輸入現在時刻的HTML程式。

2.加入取得現在時刻的程式

3.測試

[ Django 教學 ] 再探Django,第一個樣版

請先參考前一篇文章:"初探Django,Hello APP"
1.當您已經建立虛擬環境,再開啟cmd時,可以輸入
workon first
來啟動虛擬環境。


2.利用文字編輯器,本範例是使用IDLE,開啟新檔,輸入下列程式,儲存在firstproject/templates/index.html。

3.開啟myapp/views.py, 修改sayhello2程式碼,其中locals()是指把區域變數用參數方式,傳給render()函式。

4.修改urls.py


5.切換目錄以及啟動網站。
cd firstproject
python manage.py runserver

6.開啟網站

7.輸入使用者測試網站

2019年10月13日 星期日

[ Django 教學 ] 初探Django,Hello APP

1. 要先裝Python,下載可以到https://www.python.org/downloads/

2.為了管理專案,我們會把所有安裝的套件都放在一個虛擬環境中,Windows環境可以先到https://pypi.org/project/virtualenvwrapper-win/參考,打開cmd可以先輸入下列指令。

pip install virtualenvwrapper-win

3.測試Python版本。

4.建立虛擬環境
mkvirtualenv first

5.安裝Django
pip install django

6.建立第一個Django專案
django-admin startproject firstproject

7.切換到專案的目錄
cd firstproject

8.用檔案管理員查看專案


9. 建立第一支APP
python manage.py startapp myapp

10. 查看第一支APP的目錄及檔案

11. 執行資料庫同步指令
python manage.py migrate

12. 啟動網站
python manage.py runserver

13.開啟瀏覽器讀取網站內容
127.0.0.1:8000

14.安裝APP,使用IDLE打開settings.py

15.輸入樣版位置。

16.設定語言

17.設定時區

18.打開urls.py,新增一個首頁path以及對應到的函式

19.打開views.py編輯sayhello函式

20.測式

21.新增帶有使用者名稱的路徑及函式

22.編寫sayheelo2函式


23.測試

使用Unity和Vuforia以擴增實境方式來製作生日快樂影片播放APP

請先參考前一篇文章,"利用Unity和Vufroia來設計擴增實境"。

1. 更換成生日快樂的Target。


2.增加一個Plane的物件,記得滙入影片。

3.將Mesh Renderer取消,讓Plane物件呈現透明。

4.調整大小,使其和卡片一樣大。

5.增加元件,選擇Add Component。

6. 增加Video Player元件。

7.選擇影片。

8.設定播放影片

9.編譯成APK

10.測試

11. 影片反轉,可以把Plane物件的y值設為180。


利用Unity和Vufroia來設計擴增實境

1.打開Unity建立新檔


2.刪除Main Camera物件

3. 打開File->Build Settings

4.切換Andriod平台

5.按下Player Settings,在XR Settings中,設定Vuforia Augment Realty。

6.取消multithreaded Rendering以及設定Pachage Name,要全部都小寫,而且至少要兩層,換句話說要有一個"."

7. 增加vuforia/CameraAR物件

8. 增加Vuforia/Image物件

9.打開Asset Store,並把視寫設定為Maximize。

10. 下載Unity-Chan模型並滙入(Import)。

11. 打開Vuforia,在Target Manager中把圖片上傳,並選擇想要的Target,再按下Download Database,記得選Unity格式輸出。

12. 再Unity下,在Asset視窗下按下右鍵,選擇Import Package->Custom Package,滙入第11步驟的資料庫檔案。

13. 選擇Image Target,在右邊選擇剛滙入的資料庫以及選擇圖片。

14.選擇CamaraAR物件,打開 Open Vuforia configuration

15. 在Vuforia License Manager中產生一個Development Key,選擇該KEY,複製全部KEY。

16.打上一個步驟中的Key貼在Open License Key中。

17.打開Unity-chan!中的Prefabs,選擇最右邊的unitychan_dynamic,拖移至左上角的Image Target上。

18. 最後編譯製作成APK檔

19.執行結果