# 聯課筆記
### Patient 實境演練
https://hapi.fhir.tw/fhir/Patient/7146
### 初診病人表單
- 範例表單：[衛福部初診病患基本資料卡空白表格](https://www.ccd.mohw.gov.tw/public/forms/e831aad3547e45eae064a58922202bd5.pdf)
- 範例 HTML Code：
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Hello World!</title>
</head>
<body>
<h1>病患初診資料表</h1>
<form action="">
<label for="">姓名</label>
<input type="text">
<br><br>
<label for="">出生年月日</label>
<input type="date">
<br><br>
<label for="">性別</label>
<input type="radio" name="gender" id="" value="male">男
<input type="radio" name="gender" id="" value="female">女
<br><br>
<label for="">身分證字號</label>
<input type="text">
<br><br>
<label for="">連絡電話</label>
<input type="text">
<br><br>
<label for="">行動電話</label>
<input type="text">
<br><br>
<label for="">職業</label>
<input type="radio" name="job" id="" value="mil">軍
<input type="radio" name="job" id="" value="pub">公
<input type="radio" name="job" id="" value="edu">教
<br><br>
<label for="">婚姻</label>
<input type="radio" name="marriage" id="" value="0">未婚
<input type="radio" name="marriage" id="" value="1">已婚
<input type="radio" name="marriage" id="" value="2">離婚
<input type="radio" name="marriage" id="" value="3">喪偶
</form>
</body>
</html>
```
### HTML5 Canvas
index.html：
```htmlmixed=
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<script src="canvas.js"></script>
</head>
<body onload="init()">
<canvas height="500" width="500" id="cv" style="border: 1px solid black;"></canvas>
</body>
</html>
```
```javascript=
function init() {
let canvas = document.getElementById('cv');
let ctx = canvas.getContext('2d');
// 弧形
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.beginPath();
ctx.arc(250, 250, 150, 0, Math.PI * 2 );
ctx.closePath();
ctx.fill();
ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.beginPath();
ctx.arc(250, 250, 100, 0, Math.PI * 2 );
ctx.closePath();
ctx.fill();
ctx.fillStyle = 'rgb(0, 100, 175)';
ctx.beginPath();
ctx.arc(250, 250, 100, 0, Math.PI / 2 );
ctx.lineTo(250,250);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(250, 250, 100, Math.PI , -Math.PI / 2 );
ctx.lineTo(250,250);
ctx.closePath();
ctx.fill();
ctx.font = "60px sans-serif";
ctx.fillText('B M W', 170, 460);
// 畫三角形
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(100, 300);
ctx.lineTo(300, 100);
ctx.closePath();
ctx.stroke();
// 矩形
ctx.fillRect(400, 400, 50, 50);
}
```
### 實作醫療影像標記工具
index.html：
```htmlembedded=
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<script src="canvas.js"></script>
</head>
<body onload="init()">
<canvas height="600" width="439" id="cv" style="border: 1px solid black;"></canvas>
</body>
</html>
```
canvas.js：
```javascript=
function init() {
let canvas = document.getElementById('cv');
let ctx = canvas.getContext('2d');
let img = new Image();
img.onload = () => {
ctx.drawImage(img, 0, 0);
draw(ctx);
listen(canvas, ctx);
};
img.src = './image.jpg';
}
function draw(ctx) {
ctx.strokeStyle = 'rgb(255, 0, 0)'
// TODO
ctx.beginPath();
ctx.moveTo(70, 170);
ctx.lineTo(70, 250);
ctx.lineTo(120, 250);
ctx.lineTo(120, 170);
ctx.closePath();
ctx.stroke();
}
function listen(canvas, ctx) {
const rect = canvas.getBoundingClientRect();
canvas.addEventListener('mousedown', (e) => {
const pos = getPos(e, rect);
ctx.beginPath();
ctx.moveTo(pos.x, pos.y);
});
canvas.addEventListener('mouseup', (e) => {
const pos = getPos(e, rect);
ctx.lineTo(pos.x, pos.y);
ctx.closePath();
ctx.stroke();
});
}
function getPos(e, rect) {
return {
x: e.clientX - rect.left,
y: e.clientY - rect.top
};
}
```
### 實作初診基本資料表單登錄
index.html
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="./fhir.js"></script>
<title>Hello World!</title>
</head>
<body>
<h1>病患初診資料表</h1>
<form action="">
<label for="">姓名</label>
<input type="text" id="name">
<br><br>
<label for="">出生日期</label>
<input type="date" id="birthDate">
<br><br>
<label for="">性別</label>
<input type="radio" name="gender" id="gender_male" value="male">男
<input type="radio" name="gender" id="gender_female" value="female">女
<br><br>
<label for="">身分證字號</label>
<input type="text" id="uid">
<br><br>
<label for="">連絡電話（公）</label>
<input type="text" id="phone_work">
<br><br>
<label for="">連絡電話（宅）</label>
<input type="text" id="phone_home">
<br><br>
<label for="">連絡電話（手機）</label>
<input type="text" id="phone_mobile">
<br><br>
<label for="">聯絡地址</label>
<input type="text" id="address">
<br><br>
<label for="">電子信箱</label>
<input type="text" id="mail">
<br><br>
<label for="">緊急聯絡人－姓名</label>
<input type="text" id="contact_name">
<br><br>
<label for="">緊急聯絡人－關係</label>
<input type="text" id="contact_relationship">
<br><br>
<label for="">緊急聯絡人－聯絡電話</label>
<input type="text" id="contact_phone">
<br><br>
<button onclick="uploadFhirData()">送出</button>
</form>
</body>
</html>
```
fhir.js
```javascript=
function convertToFhir(data){
const fhirData = {
resourceType: "Patient",
identifier: [{
use: "official",
type: {
"system": "http://terminology.hl7.org/CodeSystem/v2-0203",
"code": "NI",
"display": "身分證字號"
},
value: data.uid
}],
name: [{
use: "official",
text: data.name
}],
birthDate: data.birthDate,
gender: data.gender,
telecom: [
{
system: "phone",
value: data.phone_home,
use: "home"
},
{
system: "phone",
value: data.phone_work,
use: "work"
}, {
system: "phone",
value: data.phone_mobile,
use: "mobile"
}, {
system: "email",
value: data.mail,
use: "home"
}
],
address: data.address,
contact: [{
relationship: [{
text: data.contact_relationship
}],
name: {
use: "official",
text: data.contact_name
},
telecom: [{
system: "phone",
value: data.contact_phone,
use: "home"
}]
}],
};
return fhirData;
}
function uploadFhirData(){
// 從表單抓取資料
const data = {
name: document.getElementById("name").value, // 姓名
birthDate: document.getElementById("birthDate").value, // 生日
gender: document.getElementById("gender_male").checked ? "male" : "female", // 性別
uid: document.getElementById("uid").value, // 身份證字號
phone_work: document.getElementById("phone_work").value, // 連絡電話(公)
phone_home: document.getElementById("phone_home").value, // 連絡電話 (宅)
phone_mobile: document.getElementById("phone_mobile").value, // 連絡電話 (手機)
address: document.getElementById("address").value, // 聯絡地址
mail: document.getElementById("mail").value, // 電子信箱
contact_name: document.getElementById("contact_name").value, // 緊急聯絡人－姓名
contact_relationship: document.getElementById("contact_relationship").value, // 緊急聯絡人－關係
contact_phone: document.getElementById("contact_phone").value // 連絡電話
}
console.log(convertToFhir(data));
}
```
Sign in with Wallet
Connect another wallet