DEV Community

artydev
artydev

Posted on

7 segments LED with Mithril and Bss

Mithril have a nice companion Bss which is a CssInJS library.
Look at what can be achieved with those guys (thanks to Osban and Porsager)

b.css("body", b `bc black`)
b.helper({
  rel: b `position relative`,
  pos: (l, t) => b.l(l).t(t || t === 0 ? t : l),
  size: (w, h) => b.w(w).h(h || h === 0 ? h : w)
})

const Digit = () => {
  let index = 0
  const lightOn = 'rgba(0, 255, 0, 1)'
  const lightOff = 'rgba(0, 255, 0, 0.30)'
  const code = [0x3F, 0x06, 0x5B, 0x4F, 0x66, 0x6D, 0x7D, 0x07, 0x7F, 0x6F]
  const size = ['100 10', '10 100', '10 100', '100 10', '10 100', '10 100', '100 10']
  const pos = ['0 10', '100 10', '100 20', '0 20', '-10 -90', '-10 -300', '0 -300']
  const style = x => b `size ${size[x]}; rel; pos ${pos[x]}; br 50`
  const light = x => code[index] >> x & 1

  setInterval(() => {
    index++;
    index %= 10;
    m.redraw()
  }, 1000)

  return {
    view: () =>
      m("" + b `h 100; transform scale(0.5); h 250; w 120`,
        [...new Array(7).keys()].map(x =>
          m("" + style(x) + b.bc(light(x) ? lightOn : lightOff))
        )
      )
  }
}

m.mount(root, Digit)

You can play with it here : 7LED

Top comments (0)