-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathFBG.htm
executable file
·133 lines (122 loc) · 5.38 KB
/
FBG.htm
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
<!DOCTYPE html>
<html>
<head>
<title>FBG</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="./webixcode/webix.css" type="text/css" charset="utf-8">
<script src="./webixcode/webix.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
Deze pagina wil ik geleidelijk veranderen in een FBG-app-frontend:<br>
Een canvas, een aantal labels, knoppen en sliders. Zie de
<a href="https://webix.com/tutorials/" target="_blank">Webix tutorials</a>.<br>
De canvascode is voorlopig die van de canvas-app van Li Haoyi.<br>
Ik moet kunnen tekenen, slepen, de sliders uitlezen, schrijven naar een tekstvak, <br>
een kleur kiezen (dat kan al mooi met canvas) plus reageren op de knop acties.
<!--======= Canvas ==================================================================-->
<!-- Ik zie geen canvas-view dus dan maar zo: -->
<div id="FBG" style="width:750px; height:400px; margin:10px; border:1px solid #c0c0c0;">
<canvas id="canvas">
</canvas>
</div>
<!--======= Tekstvak (-ken) =============================================================-->
<div id="Tekstvakken" style="width:750px; height:43px; margin:10px; border:1px solid #c0c0c0;">
<TEXTAREA ID="tekstvak1" ROWS="2" COLS="105" style="resize:none"></TEXTAREA>
<!-- <TEXTAREA ID="tekstvak2" ROWS="4" COLS="25" READONLY>Niet veranderbaar</TEXTAREA>
<TEXTAREA ID="tekstvak3" ROWS="4" COLS="20" DISABLED>Disabled</TEXTAREA>-->
</div>
<div id="Controls" style="width:500px; height:200px; margin:10px;"></div>
<script type="text/javascript" charset="utf-8"> //De webix-code ==========
//place for your app
//webix.ui() can be optionally placed into the webix.ready() function
//to ensure that your code will be executed as soon as page loading is complete.
webix.ready(function(){
webix.ui({
width:750,
height:600,
type:"line",
container:"Controls",
rows: [
//======= De kolommen met sliders =========================================================
{ cols:[
{view:"form", id:"kolom1", width: 250, elements:[
{ view:"text", text:"Knopen (random poging)", width:200, align:"center"},
{ view:"slider", id:"slider1", value: 10, min: 2, max: 100, width: 200, align:"left",
title:function(obj){return obj.value;}, on:{
onChange:function(){
SCALA_nodes( this.getValue() );
}
// webix.message("<pre>"+ this.getValue() +"</pre>");
}}]},
{view:"form", id:"kolom2", width: 250, elements:[
{ view:"text", text:"Connecties (random poging)", width:200, align:"center"},
{ view:"slider", id:"slider2", value: 20, min: 1, max: 100, width: 200, align:"left",
title:function(obj){return obj.value;}, on:{
onChange:function(){
SCALA_edges( this.getValue() );
}
}}]},
//https://docs.webix.com/desktop__slider.html
{view:"form", id:"kolom3", width: 245, elements:[
{ view:"text", text:"Zoom (factor 1.5)", width:200, align:"center"},
{ view:"slider", id:"slider3", value: 1, value: 0, min: -5, max: 5, align:"left",
title:function(obj){return obj.value;}, on:{
onChange:function(){
SCALA_zoom( this.getValue() );
}
}}]}
]}//Einde klommen
,
//======= De toolbar ================================================================
{ view:"toolbar", id:"mybar", elements:[
{ view:"button", value:"Volgende", width: 70, click:"SCALA_volgende()"},
{ view:"label", label:"Knoopkleur:", width:105},
{ view:"colorpicker", id:"colorId", name:"color", value:"#ff0000", width:120, on:{
onChange:function(){
var json = JSON.stringify(this.getParentView().getValues(),0,1);
var kleur = JSON.parse(json)["color"];
SCALA_kiesKleur(kleur);
// webix.message("<pre>"+ kleur +"</pre>");
}
} },
{ view:"toggle", name:"toggle", id:"toggle", width: 85,offLabel:"Sleep", onLabel:"Wijzig", click:function(){
var json = JSON.stringify(this.getParentView().getValues(),0,1);
var tg = JSON.parse(json)["toggle"];
SCALA_onToggle(tg);
// webix.message("<pre>"+ tg +"</pre>");
}
},
/*
{view:"combo", label: 'App', name:"app", value:2, yCount:"3", width:250, options:[
{ id:1, value:"Sierpinski"},
{ id:2, value:"Scratchpad"},
{ id:3, value:"ForceBasedGraph"}
]
, afterChange: function(){
SCALA_app( this.getValue() );
}
},
*/
/* { view:"button", value:"Test waarden", width: 95, click:"ToonWaarden" }*/
]//einde toolbar-elementen array
}//Einde toolbarview
] //Einde rijen-array
});//Einde webix.ui
}); //Einde webix.ready
//======= De Hulpfuncties =======================================================
function ToonWaarden(){ //Bewaren
var json = JSON.stringify(this.getParentView().getValues(),0,1);
webix.message("<pre>"+ json +"</pre>");
};
</script>
<!-- ======== Tot hier de webix scripts. Nu de ScalaJS scripts ====== -->
<!--<script type="text/javascript" src="target/scala-2.12/graph-fastopt.js"></script>-->
<script type="text/javascript" src="target/scala-2.12/graph-opt.js"></script>
<script type="text/javascript" src="target/scala-2.12/classes/workbench.js"></script>
<script>
StartGraph.main(document.getElementById('canvas'),
document.getElementById('tekstvak1') );
</script>
<br><br><br>
</body>
</html>