License of this repository

[toyboot4e]

I’m interested in the license of this repository, particularly steno-viz.js by @IllustratedMan-code and the keyboard SVG images. They look extremely helpful! If permitted, I would love to use them in my devlog and would, of course, provide proper credit.

I also wanted to ask about the lesson data. Would it be alright if I copied them to use in my (WIP) repository for local running? Please let me know if there are any specific requirements or guidelines for usage.

[IllustratedMan-code]

Since there is no license file in this repo, I think I technically own the copyright for the code I wrote. In which case I am happy to share, though I will mention it is definitely imperfect and I would appreciate any improvements be contributed back here. I don't own the images, that would be up to @aerickt.

@aerickt It would probably be a good idea to add a LICENSE file, to avoid any confusion in the future. If you don't know much about licenses, I recommend the MIT license (anybody can use your code/lessons without asking, they just have to provide credit), or the GPL-3 license (Anybody can use your code/lessons without asking, but they must provide proper credit, and they cannot distribute your code/lessons [i.e. @toyboot4e can use the lessons locally but can't sell them]).

Adding a license is easy, see the github tutorial: https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository

[toyboot4e]

I'm glad to hear you're open to share your code @IllustratedMan-code!

While aerick is absent, I came up with an alternative solution that uses html grids:

<!-- "keyboard" in Lapwing -->
<steno-outline>KAOEBD</steno-outline>

Code 1 (license: CC0-1.0)

// 3x10 keyboard image
class StenoViz extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });

    const style = document.createElement('style');
    style.textContent = `
      :host {
        display: block;
        width: 100%;
        text-align: center;
      }
      .steno-viz-container {
        display: inline-grid;
        grid-template-rows: repeat(3, 32px);
        grid-template-columns: repeat(10, 32px);
        gap: 4px;
        position: relative;
      }
      .steno-viz-rect, .steno-viz-empty {
        width: 32px;
        height: 32px;
        box-sizing: border-box;
      }
      .steno-viz-rect {
        text-align: center;
        border: 1px solid white;
        border-radius: 3px;
      }
      .steno-viz-rect-pressed {
        background: #4a90e2;
      }
      .steno-viz-vert-merge {
        grid-row: 1 / span 2;
        grid-column: 5;
        height: 66px; /* 32 + 4 + 32 */
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        align-items: stretch;
      }
    `;

    shadow.appendChild(style);
  }

  static collectKeyPress(chars, stroke) {
    const ret = [
      Array(10).fill(false),
      Array(10).fill(false),
      Array(10).fill(false),
    ];

    if (stroke === undefined || stroke === null || stroke === '') {
      return ret;
    }

    // steno order: #STKPWHRAO*EUFRPBLGTSDZ
    const stenoOrder = [
      [0, 0], [1, 0], [0, 1], [1, 1], [0, 2], [1, 2], [0, 3], [1, 3],
      [0, 4],
      [2, 2], [2, 3], [2, 5], [2, 6],
      [0, 5], [1, 5], [0, 6],[1, 6], [0, 7], [1, 7], [0, 8], [1, 8], [0, 9], [1, 9]
    ];

    let iOrder = 0
    for (let c of stroke) {
      if (iOrder >= stenoOrder.length) break;
      while (iOrder < stenoOrder.length) {
        const [row, col] = stenoOrder[iOrder++];
        console.log(c, row, col, chars[row][col]);
        if (c == chars[row][col]) {
          ret[row][col] = true;
          break;
        }
      }
    }

    return ret;
  }

  connectedCallback() {
    const container = document.createElement('div');
    container.className = 'steno-viz-container';

    const leftCol = 4;
    const chars = [
      ['#', 'T', 'R', 'H', '*', 'F', 'P', 'L', 'T', 'D'],
      ['S', 'K', 'W', 'R', '', 'R', 'B', 'G', 'S', 'Z'],
      ['', '', 'A', 'O', '', 'E', 'U', '', '', ''],
    ];
    const isPressed = StenoViz.collectKeyPress(chars, this.textContent.toUpperCase());

    // render
    const columnDef = [2, 2, 3, 3, -1, 3, 3, 2, 2, 2]
    for (let row = 0; row < 3; row++) {
      for (let col = 0; col < columnDef.length; col++) {
        const def = columnDef[col];
        const isLeft = col <= 4;

        let ty = 'steno-viz-empty';
        if (def == -1 && row == 0) ty = 'steno-viz-rect steno-viz-vert-merge'
        if (row < def) ty = 'steno-viz-rect';
        if (isPressed[row][col]) {
          ty += ' steno-viz-rect-pressed';
        }

        const rect = document.createElement('div');
        rect.className = ty;
        rect.textContent = chars[row][col];
        rect.style.gridRow = row + 1;
        rect.style.gridColumn = col + 1;
        container.appendChild(rect);
      }
    }

    this.shadowRoot.appendChild(container);
  }
}

customElements.define('steno-outline', StenoViz);

Code 2 (license: CC0-1.0)

// 3x11 keyboard image
class StenoViz extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });

    const style = document.createElement('style');
    style.textContent = `
      :host {
        display: block;
        width: 100%;
        text-align: center;
      }
      .steno-viz-container {
        display: inline-grid;
        grid-template-rows: repeat(3, 32px);
        grid-template-columns: repeat(10, 32px);
        gap: 4px;
        position: relative;
      }
      .steno-viz-rect, .steno-viz-empty {
        width: 32px;
        height: 32px;
        box-sizing: border-box;
      }
      .steno-viz-rect {
        text-align: center;
        border: 1px solid white;
        border-radius: 3px;
      }
      .steno-viz-rect-pressed {
        background: #4a90e2;
      }
      .steno-viz-fat {
        grid-row: 1 / span 2;
        grid-column: 5 / span 2;
        width: 66px; /* 32 + 4 + 32 */
        height: 66px; /* 32 + 4 + 32 */
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        align-items: stretch;
      }
    `;

    shadow.appendChild(style);
  }

  static collectKeyPress(chars, stroke) {
    const ret = [
      Array(11).fill(false),
      Array(11).fill(false),
      Array(11).fill(false),
    ];

    if (stroke === undefined || stroke === null || stroke === '') {
      return ret;
    }

    // steno order: #STKPWHRAO*EUFRPBLGTSDZ
    const stenoOrder = [
      [0, 0], [1, 0], [0, 1], [1, 1], [0, 2], [1, 2], [0, 3], [1, 3],
      [0, 4],
      [2, 3], [2, 4], [2, 5], [2, 6],
      [0, 6],[1, 6], [0, 7], [1, 7], [0, 8], [1, 8], [0, 9], [1, 9], [0, 10], [1, 10]
    ];

    let iOrder = 0
    for (let c of stroke) {
      if (iOrder >= stenoOrder.length) break;
      while (iOrder < stenoOrder.length) {
        const [row, col] = stenoOrder[iOrder++];
        console.log(c, row, col, chars[row][col]);
        if (c == chars[row][col]) {
          ret[row][col] = true;
          break;
        }
      }
    }

    return ret;
  }

  connectedCallback() {
    const container = document.createElement('div');
    container.className = 'steno-viz-container';

    const leftCol = 4;
    const chars = [
      ['#', 'T', 'R', 'H', '*', '', 'F', 'P', 'L', 'T', 'D'],
      ['S', 'K', 'W', 'R', '', '', 'R', 'B', 'G', 'S', 'Z'],
      ['', '',  '', 'A', 'O', 'E', 'U', '', '', '', ''],
    ];
    const isPressed = StenoViz.collectKeyPress(chars, this.textContent.toUpperCase());

    // render
    const columnDef = [2, 2, 2, 3, -1, -1, 3, 3, 2, 2, 2]
    for (let row = 0; row < 3; row++) {
      for (let col = 0; col < columnDef.length; col++) {
        const def = columnDef[col];
        const isLeft = col <= 4;
        const c = chars[row][col];

        let ty = 'steno-viz-empty';
        if (c == '*') ty = 'steno-viz-rect steno-viz-fat'
        if (c != '' && c != '*') ty = 'steno-viz-rect';
        if (isPressed[row][col]) ty += ' steno-viz-rect-pressed';

        const rect = document.createElement('div');
        rect.className = ty;
        rect.textContent = chars[row][col];
        rect.style.gridRow = row + 1;
        rect.style.gridColumn = col + 1;
        container.appendChild(rect);
      }
    }

    this.shadowRoot.appendChild(container);
  }
}

customElements.define('steno-outline', StenoViz);

The latter keyboard layout is a bit Uni-friendly. I'd go with it for my devlog.

Edit: more Uni-like:

Code 3 (license: CC0-1.0)

// 3x11 keyboard image
class StenoViz extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });

    const style = document.createElement('style');
    style.textContent = `
      :host {
        display: block;
        width: 100%;
        text-align: center;
      }
      .steno-viz-container {
        display: inline-grid;
        grid-template-rows: repeat(3, 32px);
        grid-template-columns: repeat(10, 32px);
        gap: 4px;
        position: relative;
      }
      .steno-viz-rect, .steno-viz-empty {
        width: 32px;
        height: 32px;
        box-sizing: border-box;
      }
      .steno-viz-rect {
        text-align: center;
        border: 1px solid white;
        border-radius: 3px;
      }
      .steno-viz-rect-pressed {
        background: #4a90e2;
      }
      .steno-viz-fat {
        width: 32px;
        height: 66px; /* 32 + 4 + 32 */
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        align-items: stretch;
      }
    `;

    shadow.appendChild(style);
  }

  static collectKeyPress(chars, stroke) {
    const ret = [
      Array(chars[0].length).fill(false),
      Array(chars[0].length).fill(false),
      Array(chars[0].length).fill(false),
    ];

    if (stroke === undefined || stroke === null || stroke === '') {
      return ret;
    }

    // steno order: #STKPWHRAO*EUFRPBLGTSDZ
    const stenoOrder = [
      [0, 0], [1, 0], [0, 1], [1, 1], [0, 2], [1, 2], [0, 3], [1, 3],
      [0, 4],
      [2, 3], [2, 4], [2, 6], [2, 7],
      [0, 7], [1, 7], [0, 8], [1, 8], [0, 9], [1, 9], [0, 10], [1, 10], [0, 11], [1, 11],
    ];

    let iOrder = 0
    for (let c of stroke) {
      if (iOrder >= stenoOrder.length) break;
      while (iOrder < stenoOrder.length) {
        const [row, col] = stenoOrder[iOrder++];
        if (c == chars[row][col]) {
          ret[row][col] = true;
          break;
        }
      }
    }

    // '*'
    ret[0][6] = ret[0][4];
    return ret;
  }

  connectedCallback() {
    const container = document.createElement('div');
    container.className = 'steno-viz-container';

    const leftCol = 4;
    const chars = [
      ['#', 'T', 'R', 'H', '*', '', '*', 'F', 'P', 'L', 'T', 'D'],
      ['S', 'K', 'W', 'R', '', '', '', 'R', 'B', 'G', 'S', 'Z'],
      ['', '',  ' ', 'A', 'O', '', 'E', 'U', ' ', '', '', ''],
    ];
    const isPressed = StenoViz.collectKeyPress(chars, this.textContent.toUpperCase());

    // render
    const columnDef = [2, 2, 2, 3, -1, -1, 3, 3, 2, 2, 2, 2]
    for (let row = 0; row < 3; row++) {
      for (let col = 0; col < columnDef.length; col++) {
        const def = columnDef[col];
        const isLeft = col <= 4;
        const c = chars[row][col];

        let ty = 'steno-viz-empty';
        if (c == '*') ty = 'steno-viz-rect steno-viz-fat'
        if (c != '' && c != '*') ty = 'steno-viz-rect';
        if (isPressed[row][col]) ty += ' steno-viz-rect-pressed';

        const rect = document.createElement('div');
        rect.className = ty;
        rect.textContent = chars[row][col];
        rect.style.gridRow = row + 1;
        rect.style.gridColumn = col + 1;
        container.appendChild(rect);
      }
    }

    this.shadowRoot.appendChild(container);
  }
}

customElements.define('steno-outline', StenoViz);

[toyboot4e]

Ooh I did not notice the license file commit! (25e7fd8) Thank you @aerickt. Closing.