update: selectable mascot image

index.js

@@ -79,6 +79,14 @@ app.on('ready', () => {
           },
           accelerator: "F5"
         },
+        {
+          label: 'Mascot',
+          click: (item, focusedWindow) => {
+            if (focusedWindow)
+            focusedWindow.webContents.executeJavaScript('ugj_selectMascot()');
+          },
+          accelerator: "CommandOrControl+M"
+        },
         {
           label: 'About',
           click: () => {

package.json

@@ -23,7 +23,9 @@
     "electron-rebuild": "^2.3.4"
   },
   "dependencies": {
+    "@tensorflow/tfjs-node": "^3.0.0",
     "axios": "^0.21.1",
+    "face-api.js": "^0.22.2",
     "nodemailer": "^6.4.17",
     "ocoge_pigpiod": "file:local_modules/ocoge_pigpiod"
   }

scripts/eleclib.js

@@ -6,6 +6,7 @@
 // Hard Coding!!!
 const appName = 'ocoge';
 const defpath = '/home/pi/Documents/ocoge/';
+const mascotDefPath = '/home/pi/Applications/ocoge/img/';
 // Require
 const fs = require('fs');
 const path = require("path");
@@ -17,6 +18,7 @@ const clipboard = require('electron').clipboard;
 
 var saveFilepath = null;
 var wsChanged = false;
+var mascotFilePath = './img/cogechee.png';
 
 // 0で数値の桁合わせ
 // NUM=値 LEN=桁数
@@ -72,7 +74,7 @@ exports.newFile = () => setSaveFilepath(null);
 
 // ワークスペースファイル読み込みの一連の動作のラッパ
 exports.loadWsFile = () => {
-    let filepath = openFile('xml');
+    let filepath = openFile('xml', defpath);
     if (filepath.length > 0) {
         if (saveFilepath === null) {
             setSaveFilepath(filepath);
@@ -84,27 +86,32 @@ exports.loadWsFile = () => {
 }
 // その他ファイル読み込みの一連の動作のラッパ
 exports.loadFile = ext => {
-    let filepath = openFile(ext);
+    let filepath = openFile(ext, defpath);
     if (filepath.length > 0) {
         return readFromFile(filepath);
     } else {
         return '';
     }
 }
+exports.selectMascotFile = () => {
+    return openFile('png', mascotDefPath);
+}
 // オープンファイルダイアログ
-const openFile = ext => {
+const openFile = (ext, dpath) => {
     let filter;
     if (ext == 'xml') {
-        filter = { name: 'xml file', extensions: ['xml'] };
+        filter = { name: 'XML - Extensible Markup Language', extensions: ['xml'] };
     } else if (ext == 'js') {
-        filter = { name: 'javascript file', extensions: ['js'] };
+        filter = { name: 'JS - JavaScript', extensions: ['js'] };
+    } else if (ext == 'png') {
+        filter = { name: 'PNG - Portable Network Graphics', extensions: ['png'] };
     } else {
         filter = { name: 'text file', extensions: ['txt'] };
     }
     let filepaths = dialog.showOpenDialogSync(mainWin, {
         properties: ['openFile'],
         title: 'Select a file',
-        defaultPath: defpath,
+        defaultPath: dpath,
         filters: [
             filter
         ]
@@ -207,7 +214,7 @@ exports.killAllChildren = () => {
 exports.savePrefsToLS = () => {
     let wc = '0';
     if (wsChanged) wc = '1';
-    let o = { 'saveFilepath': saveFilepath, 'wsChanged': wc };
+    let o = { 'saveFilepath': saveFilepath, 'wsChanged': wc, 'mascotFilePath': mascotFilePath };
     let s = JSON.stringify(o);
     localStorage.setItem("abrage.json", s);
 }
@@ -219,8 +226,13 @@ exports.loadPrefsFromLS = () => {
     setSaveFilepath(o.saveFilepath);
     if (o.wsChanged == '0') this.setWsChanged(false);
     else this.setWsChanged(true);
+    if (o.mascotFilePath) this.setMascotFilePath(o.mascotFilePath);
 }
 
+// マスコット画像パスをプロパティにセット
+exports.setMascotFilePath = fpath => mascotFilePath = fpath;
+exports.getMascotFilePath = () => mascotFilePath;
+
 
 // ファイル名にアプリケーションのドキュメントルートまでのパスをつけて返す
 exports.getDocPath = filename => {

scripts/ugj_script.js

@@ -110,18 +110,31 @@ Blockly.registry.register(
 //============ User Customize End ===============
 
 
-//canvasの準備
+//背景canvasの準備
-const ugj_canvasBgImg = imgSrc => {
+const ugj_canvasBgImg = (imgSrc, x, y) => { //x,y == -1: center or middle
     let el = document.getElementById('canvas_bg');
     let ctx = el.getContext('2d');
+    ctx.fillStyle = 'rgb(255,255,255)';
+    ctx.fillRect(0,0,480,360);
     let img = new Image();
     img.src = imgSrc;
-    // img.onload = () => ctx.drawImage(img, 140, 80); // ミミィ
+    img.onload = () => {
-    img.onload = () => ctx.drawImage(img, 140, 0); // こげちー
+        if (x<0) { //センタリング
+            let w = img.width;
+            if (w>=480) x=0;
+            else x = Math.floor((480 - w) / 2);
+        }
+        if (y<0) { //縦中寄せ
+            let h = img.height;
+            if (h>=360) y=0;
+            else y = Math.floor((360 - h) /2);
+        }
+        ctx.drawImage(img, x, y);
+    }
 };
 // マスコット
 // ugj_canvasBgImg("./img/mimmy.png?" + new Date().getTime()); // ミミィ
-ugj_canvasBgImg("./img/cogechee.png?" + new Date().getTime()); // こげちー
+// ugj_canvasBgImg("./img/cogechee.png?" + new Date().getTime(), -1,-1); // こげちー
 
 // HTML部品のインスタンス - 画面上の必要な部品はすべてここで取得しておく
 ugjel_displayArea = document.getElementById('display_area'); // ディスプレイ部
@@ -142,6 +155,15 @@ ugj_sounds = (names => { // サウンドファイルのいろいろの配列の
 
 // メソッド
 
+// マスコット選択
+const ugj_selectMascot = () => {
+    let fname = elec.selectMascotFile();
+    if (fname) {
+        ugj_canvasBgImg(fname, -1, -1);
+        elec.setMascotFilePath(fname);
+    }
+}
+
 // サウンド再生 - 連続再生のため、再生開始後すぐにオーディオ要素を再生成する
 const ugj_soundPlay = soundName => {
     ugj_sounds[soundName]['audio'].play();
@@ -421,7 +443,7 @@ var workspace = Blockly.inject(blocklyDiv,
         grid: {
             spacing: 20,
             length: 1,
-            colour: '#fff',//888
+            colour: '#888',//888
             snap: true
         },
         zoom: { startScale: 1.0, controls: true },
@@ -484,6 +506,8 @@ window.onload = () => {
     setTimeout(() => { // 環境設定のロードが終わってからイベントリスナを作成
         workspace.addChangeListener(ugj_wsUpdateCB);
     }, 100);
+    // 背景canvas
+    ugj_canvasBgImg(elec.getMascotFilePath(), -1,-1);
 }
 window.onbeforeunload = () => {
     ugj_saveWorkspace();