平凡的幸福: 程式設計

顯示具有 程式設計 標籤的文章。顯示所有文章

D3.js如何選擇上一階元素（Panent Node）

先來看下列 d3.js 的程式碼，我要產生兩個不同大小、顏色的圓形

svg_test03 = d3.select("#svg_test03")
svg_test03_g = svg_test03.append('g')
svg_test03_g
  .append('circle')
  .attr('cx', 80 )
  .attr('cy', 60)
  .attr('r', 50)
  .attr('fill','#ff0000')
  .append('circle')
  .attr('cx', 80 )
  .attr('cy', 60)
  .attr('r', 40)
  .attr('fill','#ffffff')

其產生的svg碼如下，第二個圓被包在第一圓的程式碼之中，顯然這並不符合我們的需求，實際上第二個圓在網頁上也是沒有顯示出來

我們要的結果應該是兩個圓形都要在<g>元素底下才對。我們修改一下程式碼，讓第二個圓在新建時應該先取得上一階元素（<g>）

svg_test03_g
  .append('circle')
  .attr('cx', 80 )
  .attr('cy', 60)
  .attr('r', 50)
  .attr('fill','#ff0000')
  .select(function() { return this.parentNode; }) //取得上一階元素
  .append('circle')
  .attr('cx', 80 )
  .attr('cy', 60)
  .attr('r', 40)
  .attr('fill','#ffffff')

利用this.parentNode來取得上一階元素後再增加第二個圓，此時svg才會符合我們的期待，網頁上也才能正確顯示兩個圓形

如果要取得上二階的元素時，可以使用兩次的this.parentNode：

.select(function() { return this.parentNode; })

.select(function() { return this.parentNode; }) //利用兩次來取得上兩階的元素

之前用 [[d3.js]] 測試綁定資料時，都是參考網路上的教學，也都是比較簡單的單一元素，今天測試如果我的圖形需要多個圖層元素組合而成，那應該要如何做呢？

一開始我的想法是用function，把圖層元素組合的程式包成一個function，接著將元素的一些參數都改成變數，要產生幾個就呼叫幾次function，這樣的做法測試是可行的。

雖然用function可以解決，但是好像不符 [[D3.js]] 的理念，所以又在網路上多多學習，果然是我對它不夠了解，沒有用到它精華的地方。

這次測試的想法是，我有兩個圓，外圓比較大，內圓比較小且是白色的，所以兩個圓疊起來就像是一個甜甜圈，而我想要產生三個甜甜圈，而這三個甜甜圈有不同的大小與顏色。

測試成功的程式碼如下：

HTML：

<div>
    <svg id="svg_test02" width="500" height="300"></svg>
</div>

Javascript：

// circle_cx是圓心x的座標位置；circle_r_o是外圓的半徑；circle_r_i是內圓的半徑；fill_d是外圓的顏色
json_text02 = [ 
  {"circle_cx": 80,"circle_r_o": 50,"circle_r_i": 40,"fill_d":"#FF0000"},
  {"circle_cx": 200,"circle_r_o": 60,"circle_r_i": 50,"fill_d":"#00FF00"},
  {"circle_cx": 350,"circle_r_o": 70,"circle_r_i": 60,"fill_d":"#0000FF"} ]

svg_test02 = d3.select("#svg_test02")

//先產生多個<g>，因為陣列有3個元素，所以會新增3個新的<g>。因為實際沒有元素，所以要用.enter()增加<g>元素
svg_test02_g = svg_test02.selectAll('g').data(json_text02).enter().append('g') 

//選擇所有的<g>，並增加外圓，因為實際沒有元素，所以要用.enter()
svg_test02_g           
  .selectAll('g')
  .data(json_text02) 
  .enter() 
  .append('circle')
  .attr('cx', (d) => { return d.circle_cx} )
  .attr('cy', 150)
  .attr('r', (d) => { return d.circle_r_o})
  .attr('fill',(d) => { return d.fill_d })

//選擇所有的<g>，並增加內圓，因為實際沒有元素，所以要用.enter()
svg_test02_g           
  .selectAll('g')
  .data(json_text02)
  .enter() 
  .append('circle')
  .attr('cx', (d) => { return d.circle_cx} )
  .attr('cy', 150)
  .attr('r', (d) => { return d.circle_r_i})
  .attr('fill','#ffffff')  //固定白色

執行結果如下：

Powershell_批次備份與複製（微軟模擬飛行）

因為微軟模擬飛行的遊戲需要中文化，網路上的說法是官方中文包放在遊戲目錄內，要自己更名，也就是將中文包的檔名改成英文檔名，但是遊戲的目錄下有一百多個中文包，所以用powershell來批次處理，希望改完後可以成功中文化

這支程式會先將英文檔名更名備份，再將中文檔名改為英文檔名，因為有設定參數，所以其實也可以用來批次處理其他的檔案

# -----程式使用方式-----
  # 語法： test001.ps1 -en [英文語系檔名] -tw [中文語系檔名]
  # 例如： test001.ps1 -en us_en.lang -tw tw_cn.lang
  # -------------------
  
  
  #param是設定參數，如下設定了兩個參數：en、tw
  param($en,$tw)
  
  $US_filename = $en #英文語系檔
  $TW_filename = $tw #中文語系檔
  $US_filename_bk = $US_filename + ".bk" #英文原始檔備份的檔名
  
  if ( $US_filename -and $TW_filename) {
  
      get-childitem -Path "E:\images\test001" -Filter $US_filename -Recurse | foreach {
  
          write-host  "----------------------------------------------------------------"
          write-host  "原始檔名："  $_.FullName
  
          #更名
          Rename-Item -Path $_.FullName -NewName $US_filename_bk
  
          $US_Fullname_bk = -join($_.DirectoryName,"\$US_filename_bk")
  
          #檢查更名是否成功
          if ((Test-Path -Path $US_Fullname_bk )) {
              write-host  "更名：" $_.Name "-->" $US_filename_bk
  
              #複製中文語系並更名
              $TW_Fullname = -join($_.DirectoryName,"\$TW_filename") #完整的中文語系路徑
              $US_Fullname = -join($_.DirectoryName,"\$US_filename") #完整的英文語系路徑（Copy用）
              Copy-Item -Path $TW_Fullname -Destination $US_Fullname -Force
              write-host  "複製並更名：" $TW_Fullname "-->" $US_filename_bk
          
  
          } else {
              write-host  "更名失敗" 
          }
      }
  
  } else {
      write-host "參數en或tw的值為空白，語法：test001.ps1 -en [英文語系檔名] -tw [中文語系檔名]"
  }

忙裡偷閒，用powershell自動撰寫檢查記錄表

#### 我有檢查系統。我有檢查系統。我有檢查系統。很重要，所以要說三遍。

其實事由是這樣的，因為每天需要檢查系統並且記錄，記錄的方式是用Word，內容部份如下：

每天手動複製前一天的Word，更改檔案名稱為今天的日期，再將內容變更日期，逐一檢查沒問題再填上ok

由上的步驟可知，有幾個是浪費時間的操作，第一個是手動複製Word，第二是更改檔案名稱，第三是更改內容的日期。

為了~~增加程式設計的能力~~，所以用powershell來幫我完成上述的動作。

首先產生一個樣版的Word，檔案為sample.doc，如下：

#### 完整的powershell程式碼如下，檔案名稱autoLogWord.ps1

$Path="E:\定期檢查記錄\每日檢查記錄\"

$Word=new-object -ComObject "Word.Application"
$Word.Visible=$true
$Doc=$Word.Documents.open($Path + "sample.doc")

$Table=$Word.ActiveDocument.Tables(1)

$Year=(get-date).tostring("yyyy")
$Month=(get-date).tostring("MM")
$Day=(get-date).tostring("dd")

for($i=2; $i -lt 16; $i++){
  $Table.Cell($i,1).Range.InsertAfter($Year)
  $Table.Cell($i,2).Range.InsertAfter($Month)
  $Table.Cell($i,3).Range.InsertAfter($Day)
}

$NewFile=$Path + $Year + $Month + $Day + ".doc"

$Doc.SaveAs([ref]$NewFile)

$Doc.Close()
$Word.Quit()

explorer.exe 'E:\定期檢查記錄\每日檢查記錄'

#### 程式說明：

其中$Word=new-object -ComObject "Word.Application" ：為引入Word應用程式物件

$Doc=$Word.Documents.open($Path + "sample.doc") ：就是開啟樣版檔案

$Table=$Word.ActiveDocument.Tables(1) ：因為我們要操作的內容是Word的表格，所以要引入，參數1是指Word上第一個表格

for($i=2; $i -lt 16; $i++) ：因為表格的第1列是標題，所以從第2列開始，而我的記錄表格實際上有15列，所以加上-lt（小於）的運算子

$Table.Cell($i,1).Range.InsertAfter($Year) ：這個就像是Excel的儲存格操作一樣，指定第幾欄第幾列並將資料填上

$NewFile=$Path + $Year + $Month + $Day + ".doc" ：依照今天日期的年、月、日建立檔名

$Doc.SaveAs([ref]$NewFile) ：實際存檔

#### 設定排程

有了程式，當然要設定排程，這樣才能每天自動幫我執行。

CORS Error：the resource is in more-private address space 'private'

今天在學習React.js時，利用fetch api來取得JSON的資料時，出現了CORS的錯誤：
The request client is not a secure context and the resource is in more-private address space `private`.

但是我在Server端已經設定好CORS，應該不會出現這個訊息才是。

後來在網路上找到了問題，原來是chrome在版本94之後，它不允許不安全的公網（訪問者）存取不安全的私網资源。

解決的其中一個方式是將兩邊的網路都設置為https，但是我只是學習而已，好像沒有必要設定SSL

另一個方式是進入chrome的設置頁：chrome://flags ，找到Block insecure private network requests，把值設定為disable

VS Code遠端開發功能測試

微軟在VS Code 11月更新版本有遠端開發預覽功能—遠端通道（Remote Tunnels），

遠端通道讓開發者可以安全地從任意裝置使用vscode.dev，或是VS Code桌面的遠端通道擴充套件來存取自己的機器進行遠端開發。

在本機上開啟VS Code，如下點選頭像圖示後選取「啟用遠端通道存取」

接著會要求以Github的帳戶登入

登入後VS Code就會啟用遠端通道，並且出現如下圖的訊息，可以複製連結

將連結貼上瀏覽器的網址列上，就可以在vscode.dev上開發自己機器上程式，如下圖

如果要關閉通道或其他功能，在本機的VS Code上點選頭像圖示後再選擇下圖紅色圈框處

這功能實在方便，讓工程師在外可以臨時馬上連線修改，不過也讓工作變成隨時可做。

我是新手：react遇到問題：Imported JSX component Test_hello must be in PascalCase or SCREAMING_SNAKE_CASE

在學習react的過程中，有一次出現警告：Imported JSX component Test_hello must be in PascalCase or SCREAMING_SNAKE_CASE

這是因為我的命名沒有依react建議的駝峰格式所出現的警告，所以我把組件Test_hello改為TestHello就可以了，記得第一個字母需要大寫。

react : WebSocket connection to ws:// failed

最近剛開始學習react，依文件建置好專案，因為Port 3000已被佔用

所以修改了package.json，改為Port 5555

執行npm start，沒有出現錯誤，瀏覽器也正確呈現Hello World

但是瀏覽器開發人員工具的主控台上出現了下列的訊息：
WebSocket connection to 'ws://192.192.192.10:5555/ws' failed:

因為我是架設docker container來學習react，所以有Port Mapping：9920 -> 5555

因此實際上瀏覽器的url網址列上是：http://192.192.192.10:9920

所以當WebSocket以Port 5555呼叫時當然會failed

我的解決方法是將docker container的Port Mapping改為一致5555 -> 5555，這樣就沒有問題了。

變更react測試用的port：3000

react預設的port是3000，但是因為我的測試環境docker有指定特殊的port mapping，所以需要更改預設的port

我的作業系統是Ubuntu，要變更react預設的port有兩種方式：

一、設定環境變數，在Linux指令下達：export PORT=5555

二、更改package.json
在react專案資料夾裡，找到package.json，並修改內容：

"start": "react-scripts start", 修改成 "PORT=5555 react-scripts start",

之後執行npm start時，就會以PORT 5555來啟用服務。

Oracle PRAGMA RESTRICT_REFERENCES 簡易說明與測試

今天開發人員問我知不知道RESTRICT_REFERENCES()的功能，我也是第一次看到，所以到google尋找並記錄下來。

PRAGMA RESTRICT_REFERENCES()，它可以看做是對子程式做權限的控管，檢查子程式的純度（PURITY）。可以避免例如A在DML上呼叫函式時，B因為不知情而修改該函式，雖然B在編譯上沒有問題，但是卻因為觸發到DML限制，進而導致A原本正常的DML發生錯誤。

語法：PRAGMA RESTRICT_REFERENCES(function_name | default , )RNDS, WNDS, RNPS, WNPS) | , TRUST);

RNDS，WNDS，RNPS，WNPS可以同時設定。但設定參數值為TRUST時，其它的值則全部失效。

function_name：應用的function
DEFAUT：是指應用在package的所有子程式、函式。
RNDS（Read No Database State）：不能讀取任何資料庫的資訊，包括任何的表，連dual這個表也不行
RNPS（Read No Package State）：不能讀取任何package的狀態資訊，如變數等。
WNDS（Write No Database State）：不能在資料庫寫入任何資料（即不能修改表）。
WNPS（Write No Package State）：不能向package寫入任何資訊（例如不能修改package變數的值）

TRUST，指出子程式是可以相信，故不受限。這個選項通常是用來PL/SQL在呼叫外部函數（如JAVA）時，因為PL/SQL是無法對外部函數進行限制。

範例：

create or replace package pkg_test is
  a number := 543;
  function test01 return number;
  function test02 return number;
  pragma restrict_references(test01, wnps);
  pragma restrict_references(test02, wnps);
end;


create or replace package body pkg_test is

    function test01 return number as
    begin
        a := 123;
        return a;
    end;

    function test02 return number as
    begin
        return a + 10 ;
    end;

    function test03 return number as
        b number ;
    begin
        b := 123;
        return b;
    end;
    
    function test04 return number as
    begin
        a := 9999;
        return a;
    end;
    
end pkg_test;

test01變更了package的變數a的值，故編譯錯誤：PLS-00452: Subprogram 'TEST01' violates its associated pragma

test02只使用變數值，故未被限制；

test03則未使用到package的變數，而是使用function內部的變數，所以未被限制住

test04因為未定義restrict_references，故可以變更a的值

Websocket簡單範例

Websocket是一種網路傳輸協定，可以在TCP連接上全雙工通訊，允許伺服器端主動向客戶端推播資料，只要一次的交握，就可以建立不中斷的連接，以進行雙工通訊。

例如為了取得數個球場上比賽的即時分數，因為每個球場比賽得分的時間都不相同，所以使用的方式是在client端每隔幾秒就向Server發送一次http request，向Server取回最新的訊息。

若改以Websocket，因為可以保持連線，所以不必像http request每一次的連線，都需要重送header等重覆的資料，可加快傳輸的速度。

另外，Websocket因為可以由Server來廣播資料，所以當server收到來自A球場的比數時，可以同時將比數發送給B球場、C球場的client。

以http request的方式，必需讓A、B、C球場每隔數秒就要連線一次，但是每次的連線都不一定會有新的資料，這樣的做法會增加Server的負擔。

以下是我測試Websocket的程式，我用node.js來架設server。

node.js：安裝ws套件，npm install ws

建立app.js，內容如下：

//import  ws 套件
const SocketServer = require('ws').Server

const express = require('express')
const path = require('path')

//設定port
const PORT = 80 

const routeAPI = express.Router();

const app = express()

app.use('/', express.static(__dirname + '/'));

routeAPI.route('/')
    .get((req, res) => {
        res.status(200).send("OK");
    })

routeAPI.route('/test01')
    .get((req, res) => {
        res.sendFile('test01.html', { root: path.join(__dirname) });
    })


app.use('/', routeAPI);


//創建 express 物件，綁定監聽  port , 設定開啟後在 console 中提示
const server = app.listen(PORT, () => {
    console.log("Listening on ${PORT}")
})


//將 express 交給 SocketServer 開啟 WebSocket 的服務
const ws = new SocketServer({ server })

//當client連線時
ws.on('connection', ws_conn => {
  console.log('Client connected')
  
  //收到client資料時
  ws_conn.on("message", data => {
    //client資料是Buffer格式，需要轉成字串
    data = data.toString()  
    console.log(data) 

    // 發送消息給client 
    ws_conn.send("server return:" + data)
    
    //取得所有連接中的 client
    let clients = ws.clients 
	
    //發送資料至每個client
    clients.forEach(client => {
      client.send("server return :" + data)  
    })
  })
})

//當連線關閉
ws.on('close', () => {
  console.log('Close connected')
})

建立test01.html，內容如下：


<!DOCTYPE html>
<html lang="zh-TW">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> WebSocket Test</title>
</head>

<body>
    <textarea id="txtShow" disabled></textarea>
    <input id="txtInput" type="text">
    <button id="btnSend">送出</button>
    <button id="btnClose">關閉</button>
</body>

</html>

<script src="jquery-3.4.1.min.js"></script>

<script>

    // 建立 WebSocket (本例 server 端於本地運行)
    let url = 'ws://192.192.192.10:9910'
    var ws = new WebSocket(url)
    // 監聽連線狀態
    ws.onopen = () => {
        console.log('open connection')
    }
    ws.onclose = () => {
        console.log('close connection');
    }
    //接收 Server 發送的訊息
    ws.onmessage = event => {
        console.dir(event)
        let txt = event.data
        $("#txtShow").val(txt)
    }

    
    $('#btnSend').on('click',() => {
        let txt = $('#txtInput').val()
        //發送訊息
        ws.send(txt)
    })

    $("#btnClose").on('click',() => {
        ws.close()
    })

</script>

Google Flutter local_auth Error: no_fragment_activity

最近在學習Google Flutter時，使用了local_auth的指紋認證package，在執行時出現下列的警告：

PlatformException(no_fragment_activity, local_auth plugin requires activity to be a FragmentActivity.,null,null)

到專案目錄底下，開啟MainActivity.kt，例如我的目錄如下：F:\Project\test01\android\app\src\main\kotlin\com\example\test01\

增加下列：
import io.flutter.embedding.android.FlutterFragmentActivity

將FlutterActivity改為FlutterFragmentActivity：

class MainActivity: FlutterActivity() {}
改成
class MainActivity: FlutterFragmentActivity() { }

重新執行即可解決。發生此原因是因為local_auth需要使用FlutterFragmentActivity類別來呈現出指紋視窗

Google Flutter build winodws app error:Bad UTF-8 encoding...

最近在研究google flutter這個跨平台的程式語言，已成功建置andriod與web，今天來測試windows的部份。

我已經安裝好vistual studio 2022 Community版，接著執行flutter doctor來檢查，結果出現下列的錯誤：Bad UTF-8 encoding found while decoding string

在這裡有提到解決的方案：
https://github.com/flutter/flutter/issues/102451#issuecomment-1124651845

依說明到 https://github.com/microsoft/vswhere/releases 下載vswhere.exe，並把它取代原本的檔案。
vswhere.exe路徑：C:\Program Files (x86)\Microsoft Visual Studio\Installer

完成後，重新執行flutter doctor檢查，這次檢查就成功了，接著再執行flutter build windows來建置也沒有問題了。

D3.js：利用image()函數來加入圖片

下列是程式碼範例，利用image()函數來加入圖片

svg_01 = d3.select("#div01").append("svg")
        .attr("width", "100%")
        .attr("height", "100%")
        .attr("viewBox","0 0 300 80")
        .attr("id", "ID001")
        .append("g")
svg_01.append("svg:image")
    .attr('x', 100) //x座標
    .attr('y', 100) //y座標
    .attr('width', 150) //指定圖片寬度
    .attr('height', 150) //指定圖片長度
    .attr("xlink:href", "img/001.png") //圖片路徑與檔名

在python程式碼內設定環境變數PATH

我有一支python的程式，內容需要依環境變數PATH來尋找執行檔。

除了在執行python前先設定好環境檔之外，也可以利用python來直接設定

其程式碼如下：

import os
os.environ["PATH"] += os.pathsep + os.pathsep.join(["/flask/","/opt/firefox"])

這樣就可以在原有PATH變數內再加上兩個路徑

Google Chrome不使用快取重新讀取網頁

當瀏覽器開啟網頁時，通常都會將一些靜態內容儲存在快取（cache）中，這樣可以加速網頁載入速度。

但是對於開發人員而言，經常會需要重讀網頁來檢視網頁修改後的結果，但是重新載入的是快取的網頁，也就看不出來修改後的結果。

對於Google Chrome瀏覽器，先按F12打開開發者工具，再長按重新讀取直到出現選單，就可以強制不以快取重讀網頁了。

vue.js在使用v-for中自訂id名稱

因為我用Bootstrap來美化html的項目，剛好有數個需要指定id的radio元件，而且id還不能一樣。

因為用vue.js的v-for來產生數個radio元件，所以可以如下設定不同的ID名稱

主要加入這段：v-bind:id="'inlineRadio' + index"

<div  v-for="(items,index) in items" class="form-check form-check-inline">
    <input class="form-check-input" name="inlineRadioOptions" type="radio" v-bind:id="'inlineRadio' + index"  v-bind:value="items.name"  v-model="tag" >
    <label class="form-check-label" v-bind:for="'inlineRadio' + index">{{items.name}}</label>
</div>

結果就如下圖，每個元件都有不同的ID名稱

git 還原單一檔案至上個版本

今天在練習用git版本控制來還原單一個檔案，而不是全部都退回，因為這個操作對我而言，應該會比較常用，所以記錄一下學習步驟。

我有兩個檔案test1.txt、test2.txt

commit後結果如下圖

接著在test1.txt增加內容

commit後結果如下圖

接著我在test2.txt增加內容，但是沒有commit，接著模擬需要把test1.txt還原

先用reset解除commit：
$ git reset HEAD^

如圖的版本002紀錄會被移除，但是保留檔案的修改內容，若是對應的檔案有在做修改，則以後續修改版本為主。

所以目前的test1.txt、test2.txt的內容都還保留住

接著把test1.txt還原：
$ git checkout test1.txt

如下圖test1.txt的內容已經被還原了，但是test2.txt的內容是不變的。

另外，我在其他文章上看到可以先產生新的分支，再切換至分支後還原單一檔案，沒有問題後再將分支合併，這樣的做法似乎比較安全一點。

利用Edge的webauthn虛擬驗證程式來測試webauthn網頁

最近在學習無密碼登入，所以依樣寫了一個希望能用指紋來登入的測試網頁。

因為每次在PC端修改完要測試時，就需要把網頁上傳到伺服器上並且用手機開啟來測試。

如今無意間發現微軟的一篇文章有提到可以用Edge來模擬webauthn，網址如下：

https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/webauthn/

我的部份程式如下，希望使用指紋的功能

在Edge把webauth的功能頁打開，設定一個新的驗證器

傳輸有四個選項：

usb：removable USB.

nfc：Near Field Communication (NFC).

ble：Bluetooth Smart (Bluetooth Low Energy / BLE).

internal：a client device-specific transport, i.e., it is a platform authenticator.

新增完成後，一開始是沒有任何認證的，如下圖

接著把我的webauthn測試頁網載入，就成功產生了一個認證，這樣就不必再用手機來測試了。

還可以把認證移除或匯出，以後續驗證使用。

nginx+uwsgi+flask：CORS跨網域錯誤解決

我有一個以nginx+uwsgi+flask架設的Web API服務，但是在網頁呼叫該API時，瀏覽器出現了CORS跨網域錯誤。

這是瀏覽器為了安全性而設置的規則，我找到兩個方案：一個以flask來設置；另一個以nginx來設定。

flask方案（因為我用nginx架設服務，所以我不確定該方式是否有效的）：

1、安裝 flask_cors 套件：pip install flask_cors

2、程式如下：

from flask import Flask

from flask_cors import CORS

app = Flask(__name__)

CORS(app)

@app.route("/")

def helloWorld():

return "Hello!"

nginx方案（我用此方案）：

在設定檔nginx.conf的每個區段加入下列語法：

add_header Access-Control-Allow-Origin *;

add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';

add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

程式範例如下：

location /ft-prtg {