DEV Community

Discussion on: Introduction to the Document Makeup Library (DML)

View post

Replies for: TinyCounter : import {button, idiv} from "./dml"; function Counter () { let count = 0; let value = idiv("0"); let binc = button("i...

Collapse
 
efpage profile image
Eckehard •

Hy artydev,

very nice you put the examples online, thank you much for that!!!

As mentioned, the DML-class was not intended to be used as a webcomponent, so I did not check out how to pass parameters to WC. There are also some strange effects which may require some investigation. As you may see, the clocks are not inside the div.

clocks
Here is the index.html:

!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <title>title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://efpage.de/DML/DML_homepage/lib/DML-min.js"></script>
  <script src="myclock.js"></script>
</head>

<body>
 <h2>Clock around the clock tonight...</h2>

  <div style="border: 2px solid black; padding: 10px; display: box;">
    test
    <my-clock></my-clock>
    <my-clock></my-clock>
    <my-clock></my-clock>
  </div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

and myclock.js:

// Class wrapper function - not necesary for WebComponents
function myClock(size = 300, attrib) { return new _myClock(size, attrib) }

// The clock class
class _myClock extends HTMLElement {
  constructor(size=100, attrib) {
    super()
    this.size = size
    const cx = size/2, cy = size/2;  // Radius
    const _clockstyle = "width: " + (size) + "px;  height: " + (size) + "px;"
      + "border: 7px solid #282828; background: #585858;"
      + "border-radius: 50%; margin: 10px;"
      + "box-shadow: -4px -4px 10px rgba(67,67,67,0.5), inset 4px 4px 10px rgba(0,0,0,0.5),"
      + "inset -4px -4px 10px rgba(67,67,67,0.5), 4px 4px 10px rgba(0,0,0,0.3);"

    this.base = sidiv("", _clockstyle+attrib)
    let c = this.canvas = canvas2D({ width: px(2 * cx), height: px(2 * cy) })

    c.ctx.lineCap = "round"
    unselectBase()

    // Paint anything radial
    function tick(color, width, angle, length, innerlength = 0) {
      function ls(length) { return length * Math.sin(angle / 180.0 * Math.PI) }
      function lc(length) { return -length * Math.cos(angle / 180.0 * Math.PI) }
      c.setLineType(width, color)
      c.line(cx + ls(innerlength), cy + lc(innerlength), cx + ls(length), cy + lc(length))
    }

    // Draw clock
    function drawClock() {
      c.clear()
      // Draw ticks
      for (let i = 0; i < 360; i += 30)
        if ((i % 90) == 0) tick("#1df52f", 5, i, size*0.45, size*0.40)
        else tick("#bdbdcb", 3, i,  size*0.45, size*0.43)

      // draw hands
      let t = new Date();  // get time
      tick("#61afff", 5, t.getHours() * 30, size*0.25)  // hour
      tick("#71afff", 2, t.getMinutes() * 6, size*0.35)  // min
      tick("#ee791a", 2, t.getSeconds() * 6, size*0.42)  // s

      // drwa center
      c.setFillStyle("#4d4b63")
      c.circle(cx, cy, 10, { fill: true })
    }
    drawClock()
    setInterval(drawClock, 1000)
  }
}

window.customElements.define('my-clock', _myClock);
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
artydev profile image
artydev •

Thank you Eckehard

Here is the live version ClockWC