Option to label rows and colums?

[DKMiller71]

Does Exolve let me specify that rows and columns should be labeled? For example, if I want the columns labelled A..x and rows labeled 1..n? (and preferably, I'd want to number from top-down rather than chessboard style.

[viresh-ratnakar]

You can hide the display of normally inferred labels using the option "hide-inferred-numbers"

You can then associate individual across/down lights with arbitrary labels, like this,

But I think you want something slightly different from that as you want to label entire rows and columns, not lights. Maybe just display the row/column labels using the addCellText() API:

Exolve.prototype.addCellText = function(row, col, text,
                                        h=16, w=10,
                                        atTop=true, toRight=false) {
  ...
}

[DKMiller71]

Yes, I'm not thinking of arbitrary labels for a given light. I'm thinking of grid labels for rows and columns. I've seen some puzzles where you know an across clue is in row 3, for example, but not where in that row. (The example I have in mind is different but the column labels will be significant).
I'll try your sample code... maybe I can make a dead-space row 0 for the column header and column 0 for the row header.

[DKMiller71]

Unfortunately, this doesn't seem to work, because the dead-space row is not a light cell, and the addCellText function ignores adding text to a non-light cell.

I also tried making the 0 row a series of skip-number, prefilled cells with bars underneath, which seemed to work... but the cells ended up being selectable.

[DKMiller71]

So, the approach I ended up using:

1. Used offset-X to make room at the top and left:

  exolve-option: offset-top:30
  exolve-option: offset-left:30

2. Included the following in customeExolve(p) to add the labels:

function labelHeaders(puz) {
  
  const thisW = puz.cellW + 2*puz.GRIDLINE;
  const thisH = puz.cellH + 2*puz.GRIDLINE;

  const headGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
  puz.svg.appendChild(headGroup); 
  
  const cellY = puz.cellTopPos(0, -4*puz.GRIDLINE);
  for (var col=0; col<puz.gridWidth; col++) {
    const cellX = puz.cellLeftPos(col+.5, 0); // center text middle of the column
    const cellText = makeHeaderText(puz, String.fromCharCode(col+65), 
                      cellX, cellY, 'middle');
    headGroup.appendChild(cellText);
  }

  const cellX = puz.cellLeftPos(0, -4*puz.GRIDLINE);
  const dspV = (puz.cellH + puz.letterSize) /2; // set v offset for baseline
  for (var row=0; row<puz.gridHeight; row++) {
    const cellY = puz.cellTopPos(row, dspV);
    const cellText = makeHeaderText(puz, row+1, 
                      cellX, cellY, 'end');
    headGroup.appendChild(cellText);
  }
}

function makeHeaderText(puz, txt, cellX, cellY, align) {
    const cellText =
        document.createElementNS('http://www.w3.org/2000/svg', 'text');
    cellText.setAttributeNS(null, 'x', cellX);
    cellText.setAttributeNS(null, 'y', cellY);
    cellText.setAttributeNS(null, 'text-anchor', align);
    cellText.textLength = puz.cellW + 'px'
    cellText.style.fill = puz.colorScheme['light-label']
    cellText.style.fontSize = puz.letterSize + 'px';
    cellText.innerHTML = txt
    return cellText;
}

[viresh-ratnakar]

Nice! Yesterday, I kept thinking on and off of coding something exactly like this (using the offset to create the dead space and then just placing the right text labels) to send you :-). Happy to see that you got to the right place! :-) Viresh

…

On Tue, Feb 7, 2023 at 6:00 AM Darren Miller ***@***.***> wrote: So, the approach I ended up using: 1. Used offset-X to make room at the top and left: exolve-option: offset-top:30 exolve-option: offset-left:30 1. Included the following in customeExolve(p) to add the labels: function labelHeaders(puz) { const thisW = puz.cellW + 2*puz.GRIDLINE; const thisH = puz.cellH + 2*puz.GRIDLINE; const headGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); puz.svg.appendChild(headGroup); const cellY = puz.cellTopPos(0, -4*puz.GRIDLINE); for (var col=0; col<puz.gridWidth; col++) { const cellX = puz.cellLeftPos(col+.5, 0); // center text middle of the column const cellText = makeHeaderText(puz, String.fromCharCode(col+65), cellX, cellY, 'middle'); headGroup.appendChild(cellText); } const cellX = puz.cellLeftPos(0, -4*puz.GRIDLINE); const dspV = (puz.cellH + puz.letterSize) /2; // set v offset for baseline for (var row=0; row<puz.gridHeight; row++) { const cellY = puz.cellTopPos(row, dspV); const cellText = makeHeaderText(puz, row+1, cellX, cellY, 'end'); headGroup.appendChild(cellText); } } function makeHeaderText(puz, txt, cellX, cellY, align) { const cellText = document.createElementNS('http://www.w3.org/2000/svg', 'text'); cellText.setAttributeNS(null, 'x', cellX); cellText.setAttributeNS(null, 'y', cellY); cellText.setAttributeNS(null, 'text-anchor', align); cellText.textLength = puz.cellW + 'px' cellText.style.fill = puz.colorScheme['light-label'] cellText.style.fontSize = puz.letterSize + 'px'; cellText.innerHTML = txt return cellText; } — Reply to this email directly, view it on GitHub <#84 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJQ562DOO6SQMLCUDNLRMX3WWJIPXANCNFSM6AAAAAAUPKN4NE> . You are receiving this because you commented.Message ID: ***@***.***>