mde.tw

  • Home
    • Site Map
    • reveal
    • blog
  • 程式
    • cp2022
      • cp-syllabus
    • wcm2023
    • cmsimde
      • Portable Python
      • Token and SSH
      • Bootstrap
      • Bugs
      • Frameworks
    • Problem solving
    • Programming
      • Computer
      • Program
      • Python
      • ANSIC
      • Rust
      • Carbon
    • TCExam
      • sendmail
    • Three.js
    • ffmepg
    • Pandoc
    • VSCode
    • Powershell
    • Blockchain
  • Brython
    • Unitconvert
    • Game
    • Simulator
    • Algorithms
  • CPython
    • Pybean
    • PDF
    • RoboDK
    • CAD
      • Python for SW
      • Python for INV
      • Python for NX
    • CAE
    • BS4
    • PostgreSQL
    • PyQt
    • MS Graph
      • MS Teams
  • 設計
    • cad2022
      • cad-syllabus
    • cd2023
    • ME
      • Trends
      • Gears
      • Robots
      • Vehicle
      • Aircraft
      • 3D print
      • Computer Vision
      • Industry 4.0
    • Reference
      • Portable NX1980
      • template and SSH
      • Pull Requests
      • Resolve Conflicts
      • Revealjs
      • Virtualbox
      • cube
    • Solvespace
    • Realizable
    • Bash
    • Leo Editor
    • Fossil SCM
    • Classroom
    • Gazebo
    • Webots
    • Deep RL
  • NX
    • NX1980_setup
    • NX2206
    • NXOpen
    • Mechatronics
  • CoppeliaSim
    • Lua
    • Foosball
    • Examples
      • ZeroMQ
    • Mujoco
    • ROS
  • Projects
    • Wink
    • pjcopsim
      • Copsim Doc
      • Webots Doc
    • pjgazebo
    • pjcontrol
    • pjgithub
    • pjexam
    • pyslvs
    • pjfem
    • pjblender
    • OpenTextbooks
Resolve Conflicts << Previous Next >> Virtualbox

Revealjs

https://revealjs.com/ 是一個 Javascript 程式框架, 可用來建立全球資訊網上的簡報.

將 reveal.js 納入分組倉儲的真正目的, 是能直接在統一的 GitHub 提交推送過程中, 持續查核各組員對於協同產品開發流程的貢獻度.

至於為何要利用 markdown 格式, 在 Leo Editor 中轉為 index.html 進行展示, 是希望在組員改版間避開以 html 格式處理衝突的難度.

課程中所採的各種方法並非限制, 而是在衡量協同利弊得失後的可行方法之一.你們可以就各種工具在協同產品設計流程中的應用. 進行討論及實作, 然後查驗所採行的方法是否也能:

  1. 持續改進
  2. 保有各組員的改版紀錄
  3. 方便處理合併及展示
  4. 具永續性及可應變性

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

Copyright © All rights reserved | This template is made with by Colorlib