ocoge/scripts/ugj_script.js

const testfunc = () => {
  elec.openURL('http://ocoge.club');
}

//============ User Customize Start ===============
// テーマ
// カスタムブロックカラー定義
Blockly.HSV_SATURATION = 0.55;
Blockly.HSV_VALUE = 0.75;
var gpio_color = '0';
var multimedia_color = '240';
var network_color = '340';
var special_color = '20';
var snippets_color = '90';

var theme = Blockly.Theme.defineTheme('ocoge', {
  'base': Blockly.Themes.Classic,
  'startHats': true,
  'componentStyles': {
    'toolboxBackgroundColour': 'aliceblue',
    'flyoutBackgroundColour': 'lavender',
    'toolboxForegroundColour': 'white',
    'flyoutForegroundColour': 'steelblue'
  },
  'blockStyles': {
    'gpio_blocks': {
      "colourPrimary": gpio_color
    },
    'multimedia_blocks': {
      "colourPrimary": multimedia_color
    },
    'network_blocks': {
      "colourPrimary": network_color
    },
    'special_blocks': {
      "colourPrimary": special_color
    },
    'snippets_blocks': {
      "colourPrimary": snippets_color
    }
  },
  'categoryStyles': {
    "gpio_category": {
      "colour": gpio_color
    },
    "multimedia_category": {
      "colour": multimedia_color
    },
    "network_category": {
      "colour": network_color
    },
    "special_category": {
      "colour": special_color
    },
    "snippets_category": {
      "colour": snippets_color
    }
  },
});

// Customize messages
Blockly.Msg["CONTROLS_IF_MSG_THEN"] = "ならば";
Blockly.Msg["CONTROLS_REPEAT_INPUT_DO"] = "";
Blockly.Msg["MATH_CHANGE_TITLE"] = "変数 %1 を %2 増やす";
Blockly.Msg["VARIABLES_SET"] = "変数 %1 を %2 にする";
Blockly.Msg["TEXT_PRINT_TITLE"] = "ダイアログに %1 を表示";
Blockly.Msg["LOGIC_BOOLEAN_FALSE"] = "偽";
Blockly.Msg["LOGIC_BOOLEAN_TOOLTIP"] = "真 または 偽 を返します。";
Blockly.Msg["LOGIC_BOOLEAN_TRUE"] = "真";
// ローカライズ対応の準備
Blockly.Msg["GPIO_START_TITLE"] = "GPIO を使えるようにする";
Blockly.Msg["GPIO_START_TOOLTIP"] = "GPIOを初期化して接続します。";
Blockly.Msg["GPIO_STOP_TITLE"] = "GPIO の後片付けをする";
Blockly.Msg["GPIO_STOP_TOOLTIP"] = "GPIOとの接続を終了します。";

// Customize Toolbox
class CustomCategory extends Blockly.ToolboxCategory {
  /** Constructor for a custom category. @override */
  constructor(categoryDef, toolbox, opt_parent) {
    super(categoryDef, toolbox, opt_parent);
  }
  /** @override */
  addColourBorder_(colour) {
    this.rowDiv_.style.backgroundColor = colour;
  }
  /** @override */
  setSelected(isSelected) {
    // We do not store the label span on the category, so use getElementsByClassName.
    var labelDom = this.rowDiv_.getElementsByClassName('blocklyTreeLabel')[0];
    if (isSelected) {
      // Change the background color of the div to white.
      this.rowDiv_.style.backgroundColor = 'white';
      // Set the colour of the text to the colour of the category.
      labelDom.style.color = this.colour_;
      this.iconDom_.style.color = this.colour_;
    } else {
      // Set the background back to the original colour.
      this.rowDiv_.style.backgroundColor = this.colour_;
      // Set the text back to white.
      labelDom.style.color = 'white';
      this.iconDom_.style.color = 'white';
    }
    // This is used for accessibility purposes.
    Blockly.utils.aria.setState(/** @type {!Element} */(this.htmlDiv_),
      Blockly.utils.aria.State.SELECTED, isSelected);
  }
}
Blockly.registry.register(
  Blockly.registry.Type.TOOLBOX_ITEM,
  Blockly.ToolboxCategory.registrationName,
  CustomCategory, true);
//============ User Customize End ===============


//背景canvasとマスコットの準備
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 = () => {
    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);
  }
};

// HTML部品のインスタンス - 画面上の必要な部品はすべてここで取得しておく
ugjel_displayArea = document.getElementById('display_area'); // ディスプレイ部
ugjel_blackboard = document.getElementById('blackboard'); // 黒板
ugjel_inputForm = document.getElementById('inputForm'); // 入力フォーム
ugjel_inputBox = document.getElementById('inputBox'); // 入力フィールド

// その他のプロパティ
ugj_inputEvLstnrID = 0; // 入力フォームの動的イベントリスナの最新のID
ugj_sounds = (names => { // サウンドファイルのいろいろの配列の初期化
  let sounds = [];
  names.forEach(value => {
    let filepath = `./sounds/${value}.wav`;
    sounds[value] = { 'file': filepath, 'audio': new Audio(filepath) };
  });
  return sounds;
})(['meow', 'bounce', 'type_chime', 'type_dink', 'type_tap', 'type_space', 'type_return']); // サウンドファイルのベース名のリスト

// メソッド

// マスコット選択
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();
  ugj_sounds[soundName]['audio'] = new Audio(ugj_sounds[soundName]['file']);
};

// OK,Cancel ２択のダイアログを表示
const ugj_confirm = (title, message, callback) => {
  CustomDialog.show(title, message, {
    showOkay: true,
    onOkay: () => callback(true),
    showCancel: true,
    onCancel: () => callback(false)
  });
};

const ugj_htmlEntities = str =>// HTMLエンティティのエスケープ
  String(str).replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');//.replace(/&/g, '&amp;').replace(/ /g, '&nbsp;');

// 新規ワークスペース
const ugj_newWorkspace = () => {
  ugj_confirm('新規ワークスペース', '保存していない内容はすべて破棄されます。よろしいですか？', okey => {
    if (okey) {
      workspace.clear();
      elec.newFile();
    }
  });
}

// ワークスペースをファイルに保存・読込
const ugj_saveWorkspaceToFile = () => {
  let xml = Blockly.Xml.workspaceToDom(workspace);
  let xml_text = Blockly.Xml.domToText(xml);
  if (elec.saveWsFile(xml_text) === false) {
    alert('保存できませんでした。');
  }
}
const ugj_loadWorkspaceFromFile = () => {
  let xml_text = elec.loadWsFile();
  if (xml_text.length > 0) {
    let xml = Blockly.Xml.textToDom(xml_text);
    Blockly.Xml.domToWorkspace(xml, workspace);
  }
}

// ワークスペースを別名で保存
const ugj_saveWorkspaceAs = () => {
  elec.newFile();
  ugj_saveWorkspaceToFile();
}

// ワークスペースをローカルストレージに保存・読込
const ugj_saveWorkspace = () => {
  // Workspace
  let xml = Blockly.Xml.workspaceToDom(workspace);
  let xml_text = Blockly.Xml.domToText(xml);
  localStorage.setItem("ocoge.xml", xml_text);
}
const ugj_loadWorkspace = () => {
  // Workspace
  let xml_text = localStorage.getItem("ocoge.xml");
  if (xml_text !== null) {
    if (xml_text.length != 0) {
      let xml = Blockly.Xml.textToDom(xml_text);
      Blockly.Xml.domToWorkspace(xml, workspace);
    }
  }
}

// ワークスペースからコードを生成して必要であれば整形処理をする
const ugj_createCode = (args) => {
  addAsync = args.async || false;
  beautify = args.beautify || false;

  let code = Blockly.JavaScript.workspaceToCode(workspace);

  // 追加モジュールのrequire
  let requires = [
    ['_gpio_', false, `const pi = require('ocoge_pigpiod');\n`],
    ['_axios_', false, `const axios = require('axios');\n`],
    ['_sendmail', false, `const nodemailer = require('nodemailer');\n`],
    ['_cloudspeech_', false, `const speech = require('@google-cloud/speech');\nconst recorder = require('node-record-lpcm16');\n`],
    ['_httpserver', false, `const http = require('http');\n`],
    ['_file_', false, `const fs = require('fs');\n`],
    // ['_bme280', false, `const BME280 = require('bme280-sensor');`],
    ['_dht', false, `const dht = require("node-dht-sensor").promises;`],
    ['_socket_', false, `const net = require('net');`]
  ];
  let blockArray = workspace.getAllBlocks();
  blockArray.forEach(value => {
    for (var i = 0, l = requires.length; i < l; i++) {
      if (value.type.indexOf(requires[i][0]) >= 0) requires[i][1] = true;
    }
  });
  for (var i = 0, l = requires.length; i < l; i++) {
    if (requires[i][1]) code = requires[i][2] + code;
  }

  // await使用のため、必要に応じてコード全体をasync付き即時関数でラップ
  if (addAsync) {
    code = [
      '(async () => {',
      code,
      '})();'
    ].join('\n');
  }

  // コードを綺麗に
  if (beautify) code = js_beautify(code, { indent_size: 2 });

  return code;
}

// ブロックスクリプト実行
const ugj_runCode = () => {
  document.activeElement.blur(); //実行ボタンからフォーカスを外す：エンターキー押下が悪さをするため
  let code = ugj_createCode({ 'async': true });
  try {
    eval(code);
  } catch (e) {
    alert(e);
  }
}

// JavaScriptコードをダイアログで表示・保存
// エレメントのオブジェクトとかコールバックとか
// 色々この中で完結させてみる
const ugj_showCode = () => {
  const dialog = document.getElementById('codeDlg');
  const content = document.getElementById('dlgContent');
  const btn_close = document.getElementById('dlgClose');
  const btn_export = document.getElementById('dlgExport');
  const chkbox_cli = document.getElementById('dlgCli');

  let code = ugj_createCode({ 'beautify': true });
  code = ugj_htmlEntities(code);
  content.innerHTML = PR.prettyPrintOne(code, 'js', true);

  dialog.showModal();

  const close_cb = () => {
    dialog.close();
    btn_close.removeEventListener('click', close_cb);
    btn_export.removeEventListener('click', export_cb);
  }
  const export_cb = () => {
    code = ugj_createCode({ 'async': true, 'beautify': true });
    // blackboardWrite()をconsole.log()に書き換え、
    // document... と ugj_... と elec... をコメントアウト（ブラウザ関連部分の追放という意味では不完全なので注意）
    if (chkbox_cli.checked)
      code = code.replace(/const appendDiv[^#]*\/\/#/gm, 'const blackboardWrite = text => console.log(text);').replace(/(^(?=.*document.)[^;]*;)/gm, '/* $1 */').replace(/(^(?=.*ugj_)[^;]*;)/gm, '/* $1 */').replace(/(^(?=.*elec.)[^;]*;)/gm, '/* $1 */');
    if (elec.saveFile(code, 'js') === false) {
      alert('保存できませんでした。');
    }
    close_cb();
  }
  btn_close.addEventListener('click', close_cb);
  btn_export.addEventListener('click', export_cb);
}


// フキダシ
ugj_fdTimeoutID = null;
ugj_fdRecentBox = null;
const ugj_fukidashi = (text, sec) => {
  // Canvas Context
  const context = document.getElementById('canvas').getContext('2d');
  // 吹き出しを消去する関数
  const clearFd = (x, y, w, h) => context.clearRect(x, y, w, h);
  // 前回の思い出を忘れる
  if (ugj_fdRecentBox !== null) {
    clearFd(ugj_fdRecentBox.x, ugj_fdRecentBox.y, ugj_fdRecentBox.w, ugj_fdRecentBox.h);
    clearTimeout(ugj_fdTimeoutID);
    ugj_fdRecentBox = null;
  }

  // 基本設定
  let rtopX = 170; // フキダシ右上 X座標
  let rtopY = 40; // フキダシ右上 Y座標
  let boxWidth = 140;
  let padding = 5;
  let radius = 5;// 円弧の半径

  // 吹き出しの背景色
  context.fillStyle = "#b7e6ff";

  // テキスト設定
  let limitedWidth = boxWidth - (padding * 2);
  let size = 14;
  context.font = size + "px ''";

  // テキスト調整　行に分解
  let lineTextList = text.split("\n");
  let newLineTextList = [];
  lineTextList.forEach((lineText) => {
    if (context.measureText(lineText).width > limitedWidth) {
      characterList = lineText.split("");// 1文字ずつ分割
      let preLineText = "";
      lineText = "";
      characterList.forEach((character) => {
        lineText += character;
        if (context.measureText(lineText).width > limitedWidth) {
          newLineTextList.push(preLineText);
          lineText = character;
        }
        preLineText = lineText;
      });
    }
    newLineTextList.push(lineText);
  });
  let lineLength = newLineTextList.length;

  // 角丸
  let width = boxWidth;// 枠の幅
  let height = (size * lineLength) + (padding * 3); // 枠の高さ
  let toRadianCoefficient = Math.PI / 180; // 角度からラジアンへの変換係数
  // 角丸原点（左上座標）
  let boxOrigin = {
    "x": rtopX - width,
    "y": rtopY,
  }
  // 円弧から円弧までの直線は自動で引かれます、角度は回り方によって変わります。
  // arc(中心x, 中心y, 半径, 開始角度, 終了角度, 反時計回り)
  context.beginPath();
  context.arc(boxOrigin.x + radius, boxOrigin.y + radius, radius, 180 * toRadianCoefficient, 270 * toRadianCoefficient, false);// 左上
  context.arc(boxOrigin.x + width - radius, boxOrigin.y + radius, radius, 270 * toRadianCoefficient, 0, false);// 右上
  context.arc(boxOrigin.x + width - radius, boxOrigin.y + height - radius, radius, 0, 90 * toRadianCoefficient, false);// 右下
  context.arc(boxOrigin.x + radius, boxOrigin.y + height - radius, radius, 90 * toRadianCoefficient, 180 * toRadianCoefficient, false);// 左下
  context.closePath();
  context.fill();

  // 矢印（ヒゲ）
  let arrow = {
    "x": rtopX - width / 2 + 40,
    "y": rtopY + height + 10,
    "width": 10,
    "height": 10,
  }
  context.beginPath();
  context.moveTo(arrow.x, arrow.y);
  context.lineTo(arrow.x, arrow.y - arrow.height);
  context.lineTo(arrow.x - arrow.width, arrow.y - arrow.height);
  context.fill();

  // テキスト描画
  context.fillStyle = "#000000";
  newLineTextList.forEach((lineText, index) => {
    context.fillText(lineText, boxOrigin.x + padding, boxOrigin.y + padding + (size * (index + 1)));
  });

  // 描画した吹き出しの位置情報を保存
  ugj_fdRecentBox = { x: boxOrigin.x, y: boxOrigin.y, w: width, h: height + arrow.height };
  // 指定時間後に消去（0以下で自動消去なし）
  if (sec > 0) {
    ugj_fdTimeoutID = setTimeout(() => {
      clearFd(boxOrigin.x, boxOrigin.y, width, height + arrow.height);
    }, sec * 1000);
  }

  // return [boxOrigin.x, boxOrigin.y, width, height+arrow.height];
  // https://qiita.com/horikeso/items/95595f379a8dfa63c34a
}

//=====================================
//======= Blockly GUI codes ===========
// Use in a block or block definition:

// Resizable workspace injection script
var blocklyArea = document.getElementById('blocklyArea');
var blocklyDiv = document.getElementById('blocklyDiv');
// var workspace = Blockly.inject(blocklyDiv,
//     {toolbox: document.getElementById('toolbox')});
var workspace = Blockly.inject(blocklyDiv,
  {
    toolbox: document.getElementById('toolbox'),
    theme: theme,
    renderer: 'thrasos',

    scrollbars: true,
    grid: {
      spacing: 20,
      length: 1,
      colour: '#888',//888
      snap: true
    },
    zoom: { startScale: 1.0, controls: true },
    trashcan: true,
    media: './google-blockly/media/'
  });
var onresize = function (e) {
  // Compute the absolute coordinates and dimensions of blocklyArea.
  var element = blocklyArea;
  var x = 0;
  var y = 0;
  do {
    x += element.offsetLeft;
    y += element.offsetTop;
    element = element.offsetParent;
  } while (element);
  // Position blocklyDiv over blocklyArea.
  blocklyDiv.style.left = x + 'px';
  blocklyDiv.style.top = y + 'px';
  blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
  blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
  Blockly.svgResize(workspace);
};
window.addEventListener('resize', onresize, false);
onresize();
Blockly.svgResize(workspace);
//=====================================
//=====================================


// ワークスペースの未保存の変更のフラグ
const ugj_wsUpdateCB = event => {
  if (event.type != Blockly.Events.UI) {
    elec.setWsChanged(true);
  }
}

// ウィンドウロード・アンロード時
window.onload = () => {
  var menu = document.getElementById('conmenu');  //独自コンテキストメニュー
  var area = document.getElementById('dlgContent');     //対象エリア
  var body = document.body;                       //bodyエリア
  body.oncontextmenu = () => false;
  //右クリック時に独自コンテキストメニューを表示する
  area.addEventListener('contextmenu', function (e) {
    menu.style.left = e.pageX + 'px';
    menu.style.top = e.pageY + 'px';
    menu.classList.add('on');
  });
  //左クリック時に独自コンテキストメニューを非表示にする
  body.addEventListener('click', function () {
    if (menu.classList.contains('on')) {
      menu.classList.remove('on');
    }
  });

  // ワークスペースといくつかの環境のオートリストア
  ugj_loadWorkspace();
  elec.loadPrefsFromLS();
  setTimeout(() => { // 環境設定のロードが終わってからイベントリスナを作成
    workspace.addChangeListener(ugj_wsUpdateCB);
  }, 100);
  // 背景canvas
  ugj_canvasBgImg(elec.getMascotFilePath(), -1, -1);
}
window.onbeforeunload = () => {
  ugj_saveWorkspace();
  elec.savePrefsToLS();
}

// Electron動作とブラウザ動作を自動で仕分け
if (typeof require == 'function') {
  // requireが使える = Electron
  var elec = require('./scripts/eleclib');
  console.log('elec loaded.');
} else {
  //ブラウザ動作
  //requireのダミー
  var require = (e) => {
    alert(`この機能またはブロック [${e}] は web 版ではご利用になれません。\n詳しくはお問い合わせください。`);
    // if (e=='elec' || e=='ocoge' || e=='child_process' || e=='@google-cloud/speech' || e=='nodemailer' || e=='fs' )
    //   alert(`この機能またはブロックは web 版ではご利用になれません。\n詳しくはお問い合わせください。`);
    // else return;
  }
  //elecを名前空間で置き換え
  var elec = {};
  elec.saveFile = () => require('elec');
  elec.savePrefsToLS = () => { ; }
  elec.loadPrefsFromLS = () => { ; }
  elec.newFile = () => { ; }
  elec.setWsChanged = () => { ; }

  // マスコット
  elec.getMascotFilePath = () => './img/cogechee.png';

  //ワークスペースのダウンロード
  elec.saveWsFile = xml_text => {
    let blob = new Blob([xml_text], { "type": "text/xml" });
    const downLoadLink = document.createElement("a");
    document.body.appendChild(downLoadLink);
    downLoadLink.download = 'workspace.xml';
    downLoadLink.href = URL.createObjectURL(blob);
    downLoadLink.click();
    downLoadLink.parentElement.removeChild(downLoadLink);
    return true;
  }
  //ワークスペースのインポート
  elec.loadWsFile = () => {
    const fileInputEl = document.createElement('input');
    document.body.appendChild(fileInputEl);
    fileInputEl.type = 'file';
    fileInputEl.addEventListener('change', ev => {
      let reader = new FileReader();
      reader.readAsText(ev.target.files[0]);
      reader.addEventListener('load', () => {
        let xml = Blockly.Xml.textToDom(reader.result);
        Blockly.Xml.domToWorkspace(xml, workspace);
      });
    });
    fileInputEl.click();
    fileInputEl.parentElement.removeChild(fileInputEl);
    return '';
  }
}