iT邦幫忙

2022 iThome 鐵人賽

DAY 17
0
Modern Web

從新開始學習p5.js畫出一片天系列 第 17

D17_檔案操作_TXT、CSV、HTML檔

  • 分享至 

  • xImage
  •  

檔案操作

今天來整理在p5.js如何載入檔案到網頁中。
檔案的類型有 html, csv, json, xls, txt, php等
使用 loadStrings('assets/test.txt', (result) => {}); 來載入文字檔,
回傳的時將一行一行的文字轉換成陣列的方式。

要讀取每一陣列元素,可以用迴圈for的方式查看
for(txt of result){
console.log(txt);
//-- 將每一行文字改以建立 p 元件標籤呈現,並加到id為p1的div中
select("#p1").child(createP(txt));
}

loadStrings()

載入 test.txt 一般的純文字的文件

<body>
	<div id="p1"></div>
</body>
let can;
let result;
function preload() {
  result = loadStrings('assets/test.txt', (result) =>{
	for(txt of result){
		console.log(txt);
		select("#p1").child(createP(txt));
	}
	select("#p1").style("padding", "10px");
  });
}

function setup() {

	can = createCanvas(200, 200);
	can.id("can1");
	can.class("c1");
	can.style("padding", "10px");
	background(0);

	fill(255);
	textAlign(LEFT, TOP);
    textSize(24);
	text("canvas", 10, 10);
}

test.txt 內容
test.txt 內容

執行結果
https://ithelp.ithome.com.tw/upload/images/20221001/20152098GyECKucF9X.png

載入 test.html 具有DOM標籤元件的文件

let can;
let result;
function preload() {
  result = loadStrings('assets/test.html', (result) =>{
	for(txt of result){
		console.log(txt);
		select("#p1").child(createElement("div", txt));
	}
	select("#p1").style("padding", "10px");
  });
}

test.html 原始檔
test.html 原始檔

會保有DOM標籤元件的效果
執行結果
執行結果

左邊為執行的結果,右邊為載入的原始內容

載入 test.csv 具有表格格式的文件,用「,」作為資料分隔字元
可以使用 loadStrings('assets/test.csv'),也可以用 loadTable('assets/test.csv', 'csv', 'header')方法。

let result;
function preload() {
	result = loadStrings('assets/test.csv', (result) => {
		let str = "<table>";
		let n = 0;
		for (txt of result) {
			console.log(txt);
			str += "<tr>";
			let tds = txt.split(",");
			for (td of tds) {
				if (n == 0) {
					str += "<th>" + td + "</th>";
				} else {
					str += "<td>" + td + "</td>";
				}
			}
			str += "</tr>";
			n++;
		}
		str += "</table>";
		let table = createElement("table", str);
		table.style("border", "solid");
		select("#p1").child(table);
		select("#p1").style("padding", "10px");
	});
}

test.csv 原始檔
test.csv 原始檔

執行結果
執行結果


上一篇
D16_MultiGraphics 多個Graphic的操作
下一篇
D18_檔案操作(JSON檔)
系列文
從新開始學習p5.js畫出一片天40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言