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
|
define.class('$server/composition', function(
require,
$server$, fileio,
$ui$, noisegrid, numberbox, button, menubar, label, screen, view, foldcontainer, speakergrid, checkbox, icon){
define.class(this, "calculator", "$ui/view", function(){
this.attributes = {
results: [],
expression:""
}
this.bgcolor = 'gray'
this.borderradius = 4
this.dropshadowopacity = 0.2
this.dropshadowhardness = 0
this.dropshadowoffset = vec2(10)
this.dropshadowradius = 30
this.alignself = "center"
this.flex = undefined
this.flexdirection = "column"
this.width = 600
this.add = function(item, brackets){
this.expression += item
}
this.evaluate = function(){
try{
var res = eval(this.expression)
this.results.push( this.expression + "=" + res)
this.results = this.results
this.expression = ""
}catch(e){
}
}
this.style = {
button:{
padding:10,
margin:6,
flex:1
}
}
this.clear = function(){
this.results = []
this.expression = ""
}
this.render = function(){
var resultbox = []
for (var i = 0; i < this.results.length;i++){
resultbox.push(label({fgcolor:"white", text:i + ": " + this.results[i]}))
}
var calc = this
return [
view({padding:10, flexdirection:"column" },resultbox),
view({flex:1, borderradius:4, bgcolor: "#80f0d0", flex:1, padding:5, margin:10, name:"labelcontainer"},
label({name:"theexpression", text:this.expression,fgcolor:"black" , alignment:"right"}),
label({name:"cursor", text:"|",fgcolor:"black" , alignment:"right"})
),
view({flexdirection:"row"},
view({flexdirection:"column", flex:1},
view({},
button({text:"+", click:function(){calc.add("+")}}),
button({text:"-", click:function(){calc.add("-")}}),
button({text:"/", click:function(){calc.add("/")}})
),
view({},
button({text:"*", click:function(){calc.add("*")}}),
button({text:"^2", click:function(){calc.add("^2")}}),
button({text:"^y", click:function(){calc.add("^")}})
),
view({},
button({text:"log", click:function(){calc.add("log(",1)}}),
button({text:"ln", click:function(){calc.add("ln(",1)}}),
button({text:"exp", click:function(){calc.add("exp(",1)}})
),
view({},
button({text:"(", click:function(){calc.add("(")}}),
button({text:")", click:function(){calc.add(")")}}),
button({text:"C", click:function(){calc.clear()}})
)
),
view({flexdirection:"column", flex:1},
view({},
button({text:"1", click:function(){calc.add("1")}}),
button({text:"2", click:function(){calc.add("2")}}),
button({text:"3", click:function(){calc.add("3")}})
),
view({},
button({text:"4", click:function(){calc.add("4")}}),
button({text:"5", click:function(){calc.add("5")}}),
button({text:"6", click:function(){calc.add("6")}})
),
view({},
button({text:"7", click:function(){calc.add("7")}}),
button({text:"8", click:function(){calc.add("8")}}),
button({text:"9", click:function(){calc.add("9")}})
),
view({flex:1},
button({text:"0", click:function(){calc.add("0")}}),
button({
buttoncolor1:"green",
buttoncolor2:"lime",
textcolor:"black",
text:"=",
hover:Config({motion:'inoutexpo',duration:0.5}),
click:function(){calc.evaluate()},
bgcolorfn:function(pos){
var height = sin(8.*length(vec2(2.,1.)*(pos-.5))-time)*.5+.5
var nr = vec2(dFdx(height), dFdy(height))
var lt = dot(nr, vec2(0,12))
return mix('gray','white',lt)
}
})
)
)
)
]
}
})
this.render = function(){
return [
screen({title:"Calculator"},
speakergrid({justifycontent:"center",alignitems:"center" },
this.calculator()
)
)
]
}
})
|