feat(nano): WIP. Done except for reset button (#8)

[sutaburosu]

Regarding the reset button, am I supposed to just duplicate what I need from pushbutton-element.ts into the Nano element ? Is there a better, DRYer way?

The x,y locations in pinInfo[] have not been verified to be correct, Getting avr8js running so I can check them is my next task.

[urish]

Oh wow, first of all - thanks a million :-)

I hope to get a look at the files soon. Regarding the reset button - that's a good question. The easiest solution would probably to add a click listener on the group that contains the button. If we want to support keyboard interaction, a believe a good place to look for inspiration would be the implementation of the keypad element, where we use tabindex to make it focusable, and then listen for mouse/touch/keyboard event.

However, I think that in case of the reset button, we don't actually need all the complexity - it'd probably suffice just to emit a 'click' event, since we only care about the face it was clicked...

[urish]

p.s. it looks gorgeous, and the code also seems very tidy! great job :-)

[sutaburosu]

Thanks. I've surprised myself. This time yesterday I had never used Inkscape, and I hadn't even heard of React, etc.

I've enjoyed myself a great deal, but now the difficult bit starts: trying to learn more about how this works, rather than simply mimicking what I've seen you do.

[urish]

I'm here to help :-)

Regarding pinInfo, this is what I did with the MEGA (I should have documented it, but I was rushing to get it out...):

I wrapped the <svg> element with another <div>, and then created a second <svg> inside it to show me the pin positions. This is what it looked like:

before:

render() {
  return `<svg...>blabla</svg>`;
}

After:

render() {
  return `
    <div style="position: relative">
      <svg...>blabla</svg>

      <svg style="position: absolute; top: 0; left: 0" width="100%" height="100%" fill="red">
        ${this.pinInfo.map(
          (pin) => svg`<circle cx=${pin.x} cy=${pin.y} r=2><title>${pin.name}</title></circle>`
        )}
      </svg>
    </div>
  `;
}

and then remove the extra code once you are done.

Ideally, I'd love to have some Storybook addon/integration that will do it automatically (so we can click on a button and see all the pinInfos), but for now this is the method that I've been using as a workaround...

[sutaburosu]

Thanks for the tip. If I add the map() within the existing SVG, everything aligns. Then, after using a <div> with 2 <svg> like you said it shrunk to like 25% the size. Multiplying my mm coords by 1 / 0.254 made it fit, so I deduced that 2nd <svg> is using 0.1in units.

But then I looked at the Mega pins. They seem be in units of 1/100 inch. Then it occurred to me that monitors are frequently 96 DPI and that is very close to 0.01". Is pinMap actually in 1/96th inch pixels? Does that work OK on high-DPI screens?

I also have a problem where all but the last <tspan> in a <text> is misaligned by x-=0.1 inch. I'm starting to think I may have found a bug in something.

I'll spend some time on the reset button logic later today.

[urish]

Thanks!

Yes, indeed pinMap is in 1/96 inch units. CSS defines a pixel as 1/96 of an inch, regardless of the screen resolution.

This is nicely explained in the Understanding pixels and other CSS units tutorial.

[sutaburosu]

Thanks for the links. That aspect now makes a lot more sense, and I see that much of what I wrote is actually CSS styles rather than SVG. That's good to know.

I've learned what causes my centred text positioning problems. I can't see a way to use text-anchor="middle" at all with <tspan> without having the layout broken by the Prettier git commit hook. To work around this, I positioned one <text> per item, without the useful dx automatic relative positioning of <tspan>.

I've done what I can with the reset button by dispatching a CustomEvent. similar to what's in the membrane. I'm struggling to see where this event might be received so I can make the AVR reset.

[urish]

It makes more sense to change the color of the ellipse above the a darken shade when the button is pressed (we could also use a gradient to make the graphics a bit more realistic, similar to how the pushbutton works).

Right now it seems like the button is illuminated whenever you press it.

[sutaburosu]

I'm happy to make those changes, but perhaps I should first explain why I did it this way. At default zoom, the Nano is very small and the button is tiny. I figured just reversing a gradient wouldn't be visible. I have an MCU (a Teensy I think) with a red LED inside a similar tiny button, so it's not an invention of mine, just a little artistic license. :)

[urish]

Yes, a gradient may be to subtle in default zoom. The LED still seems a bit weird for me, how about just a darker shade for the round cap? e.g. #333

[urish]

how about adding a tabindex="0" attribute, so that the reset will be focusable by keyboard (using the tab key?)

[sutaburosu]

I've taken a shot at this in the latest commit. Much googling was required. I'm still not 100% happy. I would like the button to lose focus on mouseleave even after it's been clicked, but I'm struggling to make that happen. Now fixed too.

I've left the LED in pending your feedback re the LED/gradient.

[urish]

Shared my feedback. What was the rationale behind losing focus on mouseleave?

[sutaburosu]

Thanks. Losing focus on mouseleave is purely for appearance. It didn't feel right that the button looked different before/after clicking it, until it lost focus somehow.

[urish]

So there are some ways to work around prettier (such as wrapping the element that you don't want to be formatted with

   ${svg` <text>dont format me!  </text>  `}

and there's also prettier-ignore (but it doesn't play as nicely with lit-element code), but in general, I like to stick with prettier whenever possible.

I've left some comments on the PR, and I hope that you will be able to look into them.

Re: the reset - it's actually not implemented yet at the simulator level. Right now the best way to "reset" is to restart the simulation altogether. Once the new nano lands, I'll start looking into restarting just the simulated MCU. If I'm not wrong, most peripherals already implement a reset() method, so it could be as simple as calling that method on all the peripherals and the CPU instance.

[urish]

Cool! Some more small things, and we're good to go!

[sutaburosu]

I've done those two small changes. I initially used CSS active to restyle the circle when pressed, but of course that doesn't work with the keyboard so instead I manually restyle it in up() and down()

[urish]

🎉