git @ Cat's Eye Technologies Dipple / master javascript / concrete-mixer.html
master

Tree @master (Download .tar.gz)

concrete-mixer.html @master — raw · history · blame 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<!--
SPDX-FileCopyrightText: Chris Pressey, the original author of this work, has dedicated it to the public domain.
For more information, please refer to <https://unlicense.org/>
SPDX-License-Identifier: Unlicense
-->
<head>
  <meta charset="utf-8">
  <title>Concrete Mixer</title>
  <style>
body { text-align: center }
  </style>
</head>
<body>

<h1>Concrete Mixer</h1>

<div id="container">
</div>

</body>
<script>
if (window.yoob === undefined) yoob = {};

yoob.makeTextInput = function(container, size, value) {
    var input = document.createElement('input');
    input.size = "" + (size || 12);
    input.value = value || "";
    container.appendChild(input);
    return input;
};

yoob.makeLineBreak = function(container) {
    var br = document.createElement('br');
    container.appendChild(br);
    return br;
};

yoob.makeSVG = function(container) {
    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    container.appendChild(svg);
    return svg;
};

yoob.makeSVGElem = function(svg, tag, cfg) {
    var elem = document.createElementNS(svg.namespaceURI, tag);
    for (var key in cfg) {
        if (cfg.hasOwnProperty(key)) {
            elem.setAttribute(key, cfg[key]);
        }
    }
    svg.appendChild(elem);
    return elem;
};

/** MAIN **/

var container = document.getElementById("container");

var input = yoob.makeTextInput(container, 72, "");
yoob.makeLineBreak(container);

var width = 500;
var height = 300;

var svg = yoob.makeSVG(container);
svg.style.width = "" + width + "px";
svg.style.height = "" + height + "px";
svg.style.border = "1px solid blue";

input.onchange = function() {
    var x = Math.floor(Math.random() * ((width / 2) - 20)) + 10;
    var y = Math.floor(Math.random() * (height - 20)) + 10;
    var size = 10 + Math.floor(Math.random() * 10);
    var e = yoob.makeSVGElem(svg, "text", {
        x: x,
        y: y,
        fill: "black",
        "font-size": size
    });
    e.innerHTML = input.value;
    input.value = "";

    /* You can also do this by changing the SVG element's innerHTML, like so: */

    /*
    svg.innerHTML += '<text x="' + x + '" y="' + y + '" fill="black" font-size="' + size + '">' + text + '</text>';
    */
};

input.focus();
</script>