mech-html 0.1.0

HTML library for the Mech language
Documentation 
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

Canvas Shapes
==============

1. Basic shapes
----------------

Define the shapes
  #circle = [
    shape: "circle" 
    parameters: [
      center-x: 250.0   
      center-y: 250.0   
      radius: 35.0      
      fill: 0xFF0000    
      line-width: 5.0
    ]
  ]
  #ellipse = [
    shape: "ellipse" 
    parameters: [
      center-x: 250.0   
      center-y: 250.0   
      major-axis: 30.0
      minor-axis: 50.0
      radius: 35.0      
      fill: 0xFF0000    
      line-width: 5.0
    ]
  ]
  #arc = [
    shape: "arc" 
    parameters: [
      center-x: 250.0   
      center-y: 250.0   
      starting-angle: 30.0
      ending-angle: 250.0
      radius: 35.0      
      fill: 0xFF0000    
      line-width: 5.0
    ]
  ]
  #rectangle = [
    shape: "rectangle" 
    parameters: [
      x: 250.0   
      y: 250.0   
      width: 200.0
      height: 150.0
      fill: 0xFF0000    
      line-width: 5.0
    ]
  ]
  #text = [
    shape: "text" 
    parameters: [
      x: 150.0   
      y: 250.0   
      text: "Hello World!"
      fill: 0xFF0000    
      font: [size: 50.0 face: "Arial"]
    ]
  ]
  #image = [
    shape: "image" 
    parameters: [
      x: 200.0
      y: 100.0
      source: "https://mech-lang.org/img/logo.png"
      scale: [x: 0.10 y: 0.10]
      rotate: 15
    ]
  ]

2. Path Elements
-----------------

Line
  x = 250.0
  y = 250.0
  path = [100.0 100.0
          20.0 20.0]
  shapes = [|shape   parameters|
            "line"  [|x y| path]]
  #line = [
    shape: "path" 
    parameters: [
      start-point: [x: 0.0 y: 0.0] 
      contains: [|shape parameters| shapes] 
      stroke: 0xFF0000 
      line-width: 3.0
      translate: [x: x y: y]
      rotate: 0.0
    ]
  ]

Quadratic
  control-point = [x: 20.0 y: 100.0]
  end-point = [x: 200.0 y:  20.0]                    
  shapes = [|shape      parameters|
            "quadratic" [|control-point end-point| [|x y| control-point] [|x y| end-point]]]
  #quadratic = [
    shape: "path" 
    parameters: [
      start-point: [x: 0.0 y: 0.0] 
      contains: [|shape parameters| shapes] 
      stroke: 0xFF0000 
      line-width: 3.0
      translate: [x: x y: y]
      rotate: 0.0
    ]
  ]

Bezier
  control-points = [|x y| 20.0 100.0; 200.0 100.0]
  shapes = [|shape    parameters|
             "bezier" [|control-points end-point| [|x y| control-points] [|x y| end-point]]]
  #bezier = [
    shape: "path" 
    parameters: [
      start-point: [x: 0.0 y: 0.0] 
      contains: [|shape parameters| shapes] 
      stroke: 0xFF0000 
      line-width: 3.0
      translate: [x: x y: y]
      rotate: 0.0
    ]
  ]

Arc
  shapes = [|shape   parameters|
             "arc"   [center-x: 0.0 center-y: 0.0 starting-angle: 30.0 ending-angle: -30.0 radius: 35.0]
             "line"  [x: 0.0 y: 0.0]]
  #arc = [
    shape: "path" 
    parameters: [
      start-point: [x: 0.0 y: 0.0] 
      contains: [|shape parameters| shapes] 
      stroke: 0x000000 
      fill: 0xFFFF00
      line-width: 3
      translate: [x: x y: y]
      rotate: 0.0
    ]
  ]

Draw a shape to the canvas
  shape = #circle
  canvas = [
    kind: "canvas" 
    contains: [|shape parameters| shape] 
    parameters: [width: 500.0 height: 500.0]
  ]
  #html/app = [
    root: "mech-root" 
    contains: [|kind contains parameters| canvas]
  ]