檢視分鏡表.php 的原始碼

[[分類:與AI協力製作影片]]
是「上傳檔案櫃」的加強功能，請參考[[jendo::上傳檔案櫃]]。
==theme.php==
有一部分 theme.php 也需要更改，才能讓 分鏡表.php 正常顯示，修改共三處說明如下：
*<b>html1 第四段</b>：登入成功後的導航列中，增加「啟用分鏡表」功能的核取方塊：
*在「分鏡表」路徑以下者，就出現分鏡表核取方塊， id 為 story ：
<pre>if(substr(urldecode($_SERVER['SCRIPT_NAME']),0,22)=='/uploadFiles/分鏡表'){
	$html1.="<span style='font-size:smaller;color:#000'><input type='checkbox' id='story'/>分鏡表&emsp;</span>\n";
}</pre>
*<b>html1 第六段</b>：產生分鏡表並置於輸出緩衝區：
*在「分鏡表」路徑以下者，就出現 storyContent 部分，裡面取出「分鏡表.php」的產出：
<pre>if(substr(urldecode($_SERVER['SCRIPT_NAME']),0,22)=='/uploadFiles/分鏡表'){
	$html1.="<nowiki><div id='storyContent' style='display:none;'></nowiki>    ";
	ob_start();	// 開啟輸出緩衝區，區內容暫不輸出
	include('/volume1/web/uploadFiles/分鏡表/分鏡圖.php');	// 載入分鏡表功能
	$html1 .= ob_get_clean();	// 取得上一行 include 產生的輸出內容
	$html1.="</div>";
}</pre>
*<b>html2</b>中：
*若是上述核取方塊被打勾，就隱藏content，顯示storyContent。反之，若是沒有被打勾，就顯示content，隱藏storyContent。
<pre>document.getElementById('story').addEventListener('change', function() {
	let storyContent = document.getElementById('storyContent');
	let content = document.getElementById('content');
	if (this.checked) {
		storyContent.style.display = 'block';
		content.style.display = 'none';
	} else {
		storyContent.style.display = 'none';
		content.style.display = 'block';
	}
});</pre>

==分鏡表.php==
*<b>第2-3行很重要，要寫存放圖片的資料夾與分鏡表文字檔:</b>
**$folder = '.'; // 圖片存放的資料夾
**$storyboard_file = './分鏡圖.txt'; // 分鏡表的文字檔
*<b>第5-61行為格式設定。</b>
*<b>第64-78行是讀取分鏡表文字檔內容</b>
$storyboard_data = []; //初始化 $storyboard_data 陣列，用來存儲解析後的分鏡表數據。
if (file_exists($storyboard_file)) {//檢查 $storyboard_file 是否存在，防止文件缺失時產生錯誤。
:    $lines = file($storyboard_file, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
://讀取文件內容，使用 file() 來讀取文件的每一行。FILE_IGNORE_NEW_LINES：移除每行的換行符 (\n)。FILE_SKIP_EMPTY_LINES：跳過空行，避免無效數據
:    foreach ($lines as $line) {//瀏覽諸$lines 陣列，逐行解析數據。
::        list($id, $filename, $description, $hint, $timestamp, $subtitle) = explode('|', $line);
:://使用 explode('|', $line) 解析一行數據，以 | 為分隔符。解析出的數據按照順序存入對應的變數：
::        $storyboard_data[] = [//將解析後的數據存入 $storyboard_data 陣列：id 轉換為整數（確保排序正確）。其他字段用 trim() 去除首尾空白，避免數據問題。
:::            'id' => (int)$id,
:::            'filename' => trim($filename),
:::            'description' => trim($description),
:::           'hint' => trim($hint),
:::           'timestamp' => trim($timestamp),
:::           'subtitle' => trim($subtitle)
::       ];
:    }
}
*<b>第80-83行是按 ID 排序</b>
usort($storyboard_data, function($a, $b) {//使用 usort() 以 id 升序排序，確保顯示順序與分鏡 ID 一致。
:    return $a['id'] - $b['id'];
});

*<b>第86-98行是顯示圖片</b>
foreach ($storyboard_data as $storyboard) {//瀏覽排序後的 $storyboard_data 陣列。
:    $file_path = $folder . '/' . $storyboard['filename'];//拼接完整的圖片路徑，$folder 是圖片存放的資料夾。
:    if (file_exists($file_path)) {
::        $html .= "<nowiki><div class='storyboard-item' data-filename='{$storyboard['filename']}'></nowiki>
:::                    <nowiki><img src='$file_path' alt='{$storyboard['filename']}' data-filename='{$storyboard['filename']}'></nowiki>
:::                    <nowiki><div class='description'><span style='color:brown;font-size:larger'>{$storyboard['id']}. </span>描述:{$storyboard['description']}</div></nowiki>
:::                    <nowiki><div class='hint'>提示:{$storyboard['hint']}</div></nowiki>
:::                    <nowiki><div class='timestamp'>時間:{$storyboard['timestamp']}</div></nowiki>
:::                    <nowiki><div class='hint'>字幕:{$storyboard['subtitle']}</div></nowiki>
::                  <nowiki></div></nowiki>";
:   }
}
*<b>第103-109行為設定右鍵選單與上傳區。</b>
*<b>第111-163行為java script程式。</b>
**分別有監聽右鍵事件(按圖片右鍵，在相對應位置出現選單)
**點選更換圖片選單(如果按了上述的選單內容，做出相對應的反應，之後隱藏選單)
**監聽圖片選擇事件(呼叫'分鏡上傳.php'，上傳圖片後，強制換成新圖片)
**點擊畫面隱藏選單(若沒有上傳新圖，可以按畫面其他位置隱藏選單

==分鏡上傳.php==
*<b>第3-7行，寫存放新圖與舊圖的資料夾</b>
*<b>第9-12行，獲取檔名與設定儲存路徑、允許附檔名</b>
*<b>第15-19行，附檔名檢查</b>
*<b>第22-27行，確保新舊圖資料夾存在</b>
*<b>第30-34行，移動舊圖到備份資料夾</b>
*<b>第37-44行，儲存新圖或報錯</b>

==待修改與測式==
: http://jendo.org/uploadFiles/分鏡表/test
# 補縮圖 work
# 建子資料夾，功能會繼承
# 分鏡圖.txt 按右鍵編輯
## http 下載 本地端
## 本地編輯
## 存檔時 http 上傳