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
|
define.class('$ui/screen', function(require, $ui$, screen, cadgrid, view){
this.attributes = {
selection: Config({type:String, flow:"in"}),
selecteditem: Config({type:Object, value:null, persist:true, flow:"out"}),
items: Config({type:Array, flow:"in", persist:true}),
selected: Config({type:int, value:0, persist:true}),
lastknob: Config({type:float, value:0.5, persist:true})
};
this.onselected = function(event) {
this.selecteditem = this.items[this.selected]
};
this.onselection = function(event) {
if (!this.items || !this.items.length) {
return;
}
var dir = event.value;
if (dir === 'left') {
this.selected = Math.max(0, this.selected - 1)
} else if (dir === 'right') {
this.selected = Math.min(this.items.length - 1, this.selected + 1)
} else if (dir === 'up') {
this.selected = Math.max(0, this.selected - 6)
} else if (dir === 'down') {
this.selected = Math.min(this.items.length - 1, this.selected + 6)
} else {
var knobval = parseFloat(dir);
if (knobval) {
this.selected = this.items.length * knobval;
}
}
};
this.render = function() {
var views = [];
if (this.items) {
var j = 0;
for (var i = 0; i < this.items.length; i++) {
var item = this.items[i];
var img;
if (typeof(item.Poster) === 'string' && item.Poster.startsWith('http')) {
img = item.Poster
} else if (typeof(item.image) === 'string' && item.image.startsWith('http')) {
img = item.image
} else if (typeof(item) === 'string' && item.startsWith('http')) {
img = item
}
if (img) {
var v = view({width:100, height:150, margin:5, flex:0, bgimage:img});
if (j++ == this.selected) {
v.bordercolor = 'yellow'
v.borderwidth = 5
v.borderradius = 5
}
views.push(v)
}
}
}
return cadgrid({bgcolor:"#000030", majorline: "#003040", minorline: "#002030" },
view({bg:false, flexdirection:"column", flex:1, justifycontent:"center" },
view({bg:false, flexdirection:"row", flex:1, justifycontent:"center" },
view({width:800, bgcolor:vec4(1,1,1,0.15),padding:40,borderradius:50, flexdirection:"row"},
views)
)
)
);
}
});
|