Feature

[rei1024]

• table hover grid highlight or click to on

DONE

• Period map
  • 解析時はbitOrしたものからスタートする。
  • 一番短い繰り返される周期を見つける。
  • bitAndは1で決定
  • これを使用してstrict volatility を決定できる。
  • period to cells count map
  • 色見本 legend feat: add period color legend #5
  • Valve automatic frequency feat: add period color legend #5
  • strict volatility
• animation (period map as background?)

Reference

• Comparison of oscillator analysis tools
• Map
• https://github.com/scorbiclife/oscillizer
• https://github.com/Parcly-Taxel/Nakano

[rei1024]

Hover

  $canvas.addEventListener("mousemove", (e) => {
    const position = getMousePositionInElement($canvas, e);
    app.renderPeriodTableHighlight(position);
  });

// App
  renderPeriodTableHighlight(pixelPosition: { x: number; y: number }) {
    if (!this.data?.periodMap) {
      return;
    }
    const dx = this.data.bitGridData.minX;
    const dy = this.data.bitGridData.minY;
    const x = dx + Math.floor(pixelPosition.x / cellSize);
    const y = dy + Math.floor(pixelPosition.y / cellSize);

    const period = this.data.periodMap.data[y][x];
    console.log(x, y, period, this.data.periodMap.periodList);
    const index = this.data.periodMap.periodList
      .filter((x) => x !== 0)
      .findIndex((x) => x === period);
    for (const row of this.periodRows) {
      row.style.backgroundColor = "";
    }
    if (index !== -1) {
      this.periodRows[index].style.backgroundColor = "red";
    }
  }

→ canvas.clientWidthを使う？

ee6e2c3 で実装

[rei1024]

button

.btn {
  background-color: #4caf50; /* 背景色 */
  border: none; /* ボーダーなし */
  color: white; /* テキストカラー */
  padding: 8px 32px; /* パディング */
  text-align: center; /* テキスト中央揃え */
  text-decoration: none; /* テキストの下線をなくす */
  display: inline-block; /* インラインブロックにする */
  font-size: 16px; /* フォントサイズ */
  margin: 4px 2px; /* マージン */
  cursor: pointer; /* マウスオーバー時にポインターを表示 */
  border-radius: 8px; /* 角を丸くする */
  transition: background-color 0.3s ease; /* 背景色を変化させるアニメーション */
}

.btn:hover {
  background-color: #51ba56; /* ホバー時の背景色 */
}

.btn:active {
  background-color: #469448; /* 背景色 */
}