Resolve Conflicts <<
Previous Next >> Virtualbox
Revealjs
https://revealjs.com/ 是一個 Javascript 程式框架, 可用來建立全球資訊網上的簡報.
將 reveal.js 納入分組倉儲的真正目的, 是能直接在統一的 GitHub 提交推送過程中, 持續查核各組員對於協同產品開發流程的貢獻度.
至於為何要利用 markdown 格式, 在 Leo Editor 中轉為 index.html 進行展示, 是希望在組員改版間避開以 html 格式處理衝突的難度.
課程中所採的各種方法並非限制, 而是在衡量協同利弊得失後的可行方法之一.你們可以就各種工具在協同產品設計流程中的應用. 進行討論及實作, 然後查驗所採行的方法是否也能:
- 持續改進
- 保有各組員的改版紀錄
- 方便處理合併及展示
- 具永續性及可應變性
https://github.com/hakimel/reveal.js 引用了許多 Javascript 程式庫, 這些程式庫的改版非常頻繁, 經常造成改版頻率相對緩慢的 cmsimde 經常收到來自 Github 的改版通知.
因此在利用 cmsimde 建立 cd2022 課程網站與大分組網站時, 若要直接使用 Reveal.js 建立線上簡報, 就必須將 cmsimde 的 reveal 目錄內容保持在最新的 Reveal.js 版本.
https://github.com/mdecycu/cmsimde_site 就是用於開發 cmsimde 的倉儲. cmsimde_site 的 main 分支直接將 cmsimde 內容放入 cmsimde 目錄, 可以直接根據需求修改其中的任何內容, 當測試無誤後(尚未使用 unittest), 將改版內容反應至 cmsimde 後, 將在 cmsimde_site 倉儲中的 submodule 分支中進行測試.
由於 cmsimde_site 的 main 分支直接將 cmsimde 當作子目錄, 而 submodule 分支則將 cmsimde 當作子模組. 從 main 分支切換到 submodule, 由於需要同時取下 cmsimde 子模組資料, 因此使用:
git checkout -f submodule --recurse-submodules
而從 submodule 分支切換回 main 分支, 則使用:
git checkout -f main
cmsimde 倉儲中的 config/reveal.leo 使用 Leo Editor 編輯各簡報頁面內容. reveal.leo 中包含 demo.html 中的各種簡報應用, 使用者可以從 Leo Editor 專案中取出所需的簡報頁面進行編輯.
以下影片說明如何利用 Leo Editor 編輯 config/reveal.leo 網際簡報檔案:
以下影片說明如何利用 Leo Editor 編輯 config/pelican.leo 網誌檔案:
在 reveal.js 簡報中, 希望展示 Brython 程式:
<h2>綠色方塊移動</h2>
<!-- div 利用 margin:0px auto; style 置中 -->
<!-- 利用 style 中的 width 與 height 宣告 div 執行範圍 -->
<div style="width:600px;height:600px;margin:0px auto;" id="brython_div1">
<!-- 加入啟動按鈕後的 Rect 行走程式原始碼 -->
<script type="text/python">
# 這個程式用於 demo 綠色方塊沿著特定網格路徑行走
# 從 Brython 程式庫中的 browser 模組導入 document 類別, 並以簡寫設定為 doc
from browser import document as doc
# 從 browser 模組導入 html 類別, 主要用於建立 CANVAS 標註物件, 並插入頁面中
from browser import html
# 用於定時執行特定函式
import browser.timer
# 導入亂數模組
from random import random, randint
# 利用 html 建立一個 CANVAS 標註物件, 與變數 canvas 對應
canvas = html.CANVAS(width = 400, height = 400)
# 將 canvas 標註的 id 設為 "canvas"
canvas.id = "canvas"
# 將 document 中 id 為 "brython_div" 的標註
# 設為與 brython_div 變數對應
brython_div = doc["brython_div1"]
# 建立 buttons
brython_div <= html.BUTTON("啟動", id="power")
brython_div <= html.BR()
# 將 canvas 標註放入 brython_div1 所在位置
# 頁面中原本就已經放入 <div id="brython_div"></div> 標註
brython_div <= canvas
# 將頁面中 id 為 canvas 的 CANVAS 設為與 canvas 變數對應
canvas = doc["canvas"]
# 將 canvas 的 2d 繪圖 context 命名為 ctx
ctx = canvas.getContext("2d")
# 建立一個 dRect() 函式
# s default 為 1, c defaul 為紅色
def dRect(lux, luy, w, h, s=1, c='#ff0000'):
ctx.lineWidth = s
ctx.strokeStyle = c
ctx.beginPath();
ctx.rect(lux, luy, w, h)
ctx.stroke();
# 建立畫直線函式
def draw_line(x1, y1, x2, y2, color="#ff0000"):
ctx.beginPath()
ctx.moveTo(x1, y1)
ctx.lineTo(x2, y2)
ctx.strokeStyle = color
ctx.stroke()
# 建立 write Text 函式
def wText(x, y, t, s=14, c='#0000ff'):
ctx.font = str(s) + "px Arial";
ctx.fillText(t, x, y)
# 定義畫格線的函式
def grid(startx, starty, w, h, wnum, hnum, pixel=1, color="#ff0000"):
# 利用迴圈與座標增量繪圖
# 因為輸入 wnum 與 hnum 為格子數, 畫格線數則需加上 1
for i in range(wnum+1):
for j in range(hnum+1):
# 畫上下直線
yend = starty + h*(hnum)
xend = startx + w*(wnum)
x = startx + i*w
draw_line(x, starty, x, yend, color)
# 畫左右直線
y = starty + j*h
draw_line(startx, y, xend, y, color)
#wText(w/2-10, y-w/2, str(j))
# 從兩個座標點求中心點座標
def center(lx, ly, rx, ry):
# lx is x coord of the left up corner
# rx is the x coord of th right down corner
x = (lx + rx)/2
y = (ly + ry)/2
return x, y
# 畫出填色方塊
def draw_rect(gx, gy, gw, gh, color="lime"):
# gx is the grid coord at x direction
# gy is the grid coord at y direction
# gw is the with of the green rect
# gh is the height of the green rect
lx = origx + (gx-1)*w
ly = origy + (gy-1)*h
rx = origx + gx*w
ry = origy + gy*h
cx, cy = center(lx, ly, rx, ry)
# glx is the x coord of the left corner
# gly is the y coord of the left corner
glx = cx - gw/2
gly = cy - gh/2
# 利用設定的顏色值畫出 rectangle
ctx.fillStyle = color
ctx.fillRect(glx, gly, gw, gh)
# 以白色覆蓋位於 (nowx, nowy)
# 且比目標方塊長寬各大於 1 pixel的方塊
def wipe():
draw_rect(nowx, nowy, int(w*0.9)+1, int(h*0.9)+1, color="white")
# 畫出位於 (nowx, nowy) 的綠色方塊
def draw():
draw_rect(nowx, nowy, int(w*0.9), int(h*0.9), color="lime")
# 繞著外圍行走
def walk():
global stepx, stepy
# 向下
if nowy < hnum and nowx == 1:
stepx = 0
stepy = 1
# 向右
elif nowx < wnum and nowy == hnum:
stepx = 1
stepy = 0
# 向上
elif nowy == hnum and nowx == wnum:
stepx = 0
stepy = -1
# 向左
elif nowx == wnum and nowy == 1:
stepx = -1
stepy = 0
# 每隔短暫時間即呼叫執行一次的函式
def game():
# 因 nowx 與 nowy 在函式外宣告
# 且在函式內改變對應值, 因此需宣告為 global
global nowx, nowy
walk()
wipe()
nowx += stepx
nowy += stepy
draw()
# 將 anim 設為 None
anim = None
def launchAnimation(ev):
global anim
# 初始啟動, anim 為 None
if anim is None:
# 每 0.08 秒執行一次 draw 函式繪圖
#anim = timer.set_interval(draw, 80)
anim = browser.timer.set_interval(game, 100)
# 初始啟動後, 按鈕文字轉為"暫停"
doc['power'].text = '暫停'
elif anim == 'hold':
# 當 anim 為 'hold' 表示曾經暫停後的啟動, 因此持續以 set_interval() 持續旋轉, 且將 power 文字轉為"暫停"
#anim = timer.set_interval(draw, 80)
anim = browser.timer.set_interval(game, 100)
doc['power'].text = '暫停'
else:
# 初始啟動後, 使用者再按 power, 此時 anim 非 None 也不是 'hold', 因此會執行 clear_interval() 暫停
# 且將 anim 變數設為 'hold', 且 power 文字轉為"繼續"
#timer.clear_interval(anim)
browser.timer.clear_interval(anim)
anim = 'hold'
doc['power'].text = '繼續'
# 綠色方塊起點座標與 x 及 y 方向的座標增量
nowx = 1
nowy = 1
stepx = 0
stepy = 0
# 設定格數
# width 方向格子數
wnum = 15
# height 方向格子數
hnum = 15
# 設定線寬
pixel = 1
# 設定 w 寬度
w = int(canvas.width/wnum) - pixel
# 設定 h 高度
h = int(canvas.height/hnum) - pixel
# 設定繪圖座標點起點位置
origx = 1
origy = 1
# 利用 grid 函式畫出格線
grid(origx, origy, w, h, wnum, hnum, pixel=1, color="black")
doc["power"].bind("click", launchAnimation)
#browser.timer.set_interval(game, 100)
</script>
Resolve Conflicts <<
Previous Next >> Virtualbox