` where you want to create the Graph.
20 | rangeFrom: Int = -20, // the range of the x-axe - minimum
21 | rangeTo: Int = 20 // the range of the x-axe - maximum
22 | ) = {
23 | val expr = Mathjs.compile(exprStr)
24 | val xValues = js.Array((rangeFrom to rangeTo): _*)
25 | val yValues = xValues.map { x =>
26 | expr.eval(
27 | dynLit(
28 | x = x
29 | )
30 | )
31 | }
32 | val data: js.Array[Data] = js.Array(
33 | dynLit(
34 | x = xValues,
35 | y = yValues
36 | ).asInstanceOf[Partial[Data]]
37 | )
38 | val layout: Partial[Layout] =
39 | dynLit(showlegend = false)
40 | .asInstanceOf[Partial[Layout]]
41 | plot(
42 | plotDiv,
43 | data,
44 | layout
45 | )
46 | }
47 |
48 | def plot(plotDiv: String, data: js.Array[Data], layout: Partial[Layout]) =
49 | setTimeout(200) {
50 | Plotly.newPlot(plotDiv, data, layout)
51 | if (!js.isUndefined(MathJax)) {
52 | MathJax.Hub.Queue(js.Array("Typeset", MathJax.Hub))
53 | }
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/src/main/scala/pages/demo/GraphApp.scala:
--------------------------------------------------------------------------------
1 | package pages.demo
2 |
3 | import com.thoughtworks.binding.Binding.Var
4 | import com.thoughtworks.binding.{Binding, dom}
5 | import org.scalajs.dom.document
6 | import org.scalajs.dom.raw.{Event, HTMLElement}
7 | import typings.mathjaxLib.MathJaxNs.{^ => MathJax}
8 |
9 | import scala.scalajs.js
10 | import scala.scalajs.js.annotation.JSExportTopLevel
11 | import scala.scalajs.js.timers.setTimeout
12 |
13 | object GraphApp extends IntellijImplicits {
14 |
15 | val expressionVar: Var[String] = Var("x^2")
16 |
17 | @JSExportTopLevel("runJSGraph")
18 | def runJSGraph(): Unit = {
19 | dom.render(document.getElementById("graphDiv"), plotly)
20 | }
21 |
22 | @dom
23 | private lazy val plotly: Binding[HTMLElement] = {
24 | val expression = expressionVar.bind
25 | println(s"expression: $expression")
26 |
27 | Graph.plotGraph(expression, "plotGraph")
28 |
44 | }
45 |
46 | }
47 |
--------------------------------------------------------------------------------
/src/main/scala/pages/demo/GraphExample.scala:
--------------------------------------------------------------------------------
1 | package pages.demo
2 |
3 | import com.thoughtworks.binding.Binding.Var
4 | import com.thoughtworks.binding.{Binding, dom}
5 | import org.scalajs.dom.document
6 | import org.scalajs.dom.raw.{Event, HTMLElement}
7 | import typings.plotlyDotJsLib.plotlyDotJsMod.{Data, Layout}
8 | import typings.stdLib.Partial
9 |
10 | import scala.scalajs.js
11 | import scala.scalajs.js.Dynamic.{literal => dynLit}
12 | import scala.scalajs.js.annotation.JSExportTopLevel
13 |
14 | object GraphExample {
15 |
16 | val radiusVar: Var[Double] = Var(3.0)
17 |
18 | @JSExportTopLevel("exampleGraphOnly")
19 | def exampleGraph(plotDiv: String, radius: Double): Unit = {
20 | plotGraph(plotDiv, radius)
21 | }
22 |
23 | @JSExportTopLevel("exampleGraph")
24 | def exampleGraph(plotDiv: String, formDiv: String): Unit = {
25 | dom.render(document.getElementById(formDiv), printForm(plotDiv))
26 | }
27 |
28 | @dom
29 | private def printForm(plotDiv: String): Binding[HTMLElement] = {
30 | val r = radiusVar.bind // bind radius
31 | // this code below here is executed whenever the radius changes
32 | plotGraph(plotDiv, r)
33 |
34 | val area = r * r * Math.PI
35 |
74 | }
75 |
76 | private def plotGraph(plotDiv: String, radius: Double) = {
77 | println("plotGraph")
78 | val data: js.Array[Data] = js.Array() // we don't have data
79 | val layout: Partial[Layout] =
80 | dynLit(
81 | xaxis = dynLit(
82 | zeroline = true,
83 | range = js.Array(-radius - 0.5, radius + 0.5)
84 | ),
85 | yaxis = dynLit(
86 | zeroline = true,
87 | range = js.Array(-radius - 0.5, radius + 0.5)
88 | ),
89 | width = 500,
90 | height = 500,
91 | shapes = js.Array( // the only shape is our circle
92 | dynLit(
93 | `type` = "circle",
94 | x0 = -radius,
95 | y0 = -radius,
96 | x1 = radius,
97 | y1 = radius
98 | )
99 | )
100 | ).asInstanceOf[Partial[Layout]] // Partial is not very nice done in the Facade
101 |
102 | Graph.plot(plotDiv, data, layout) // use the little helper to draw the Graph
103 | }
104 | }
105 |
--------------------------------------------------------------------------------
/src/main/scala/pages/demo/IntellijImplicits.scala:
--------------------------------------------------------------------------------
1 | package pages.demo
2 |
3 | import com.thoughtworks.binding.Binding
4 | import org.scalajs.dom.raw.HTMLElement
5 |
6 | import scala.language.implicitConversions
7 |
8 | trait IntellijImplicits {
9 | //noinspection NotImplementedCode
10 | implicit def makeIntellijHappy(x: scala.xml.Elem): Binding[HTMLElement] = ???
11 | implicit def makeIntellijHappy2(x: HTMLElement): Binding[HTMLElement] = ???
12 | }
13 |
--------------------------------------------------------------------------------
/src/main/scala/pages/demo/MapExample.scala:
--------------------------------------------------------------------------------
1 | package pages.demo
2 |
3 | import com.thoughtworks.binding.Binding.Var
4 | import com.thoughtworks.binding.{Binding, dom}
5 | import org.scalajs.dom.document
6 | import org.scalajs.dom.raw.{Event, HTMLElement}
7 | import typings.openlayersLib
8 | import typings.openlayersLib.openlayersMod.layerNs.{Base, Tile}
9 | import typings.openlayersLib.openlayersMod.{
10 | EventsListenerFunctionType,
11 | View,
12 | eventsNs,
13 | formatNs,
14 | layerNs,
15 | projNs,
16 | sourceNs,
17 | styleNs,
18 | Map => OLMap
19 | }
20 | import scala.scalajs.js.timers.{SetTimeoutHandle, clearTimeout, setTimeout}
21 |
22 | import typings.openlayersLib.openlayersMod.olxNs.{MapOptions, ViewOptions}
23 | import typings.openlayersLib.openlayersMod.olxNs.layerNs.{
24 | TileOptions,
25 | VectorOptions
26 | }
27 | import typings.openlayersLib.openlayersMod.olxNs.sourceNs.{
28 | VectorOptions => SourceVectorOptions
29 | }
30 | import typings.openlayersLib.openlayersMod.olxNs.sourceNs.OSMOptions
31 |
32 | import scala.scalajs.js
33 | import scala.scalajs.js.annotation.JSExportTopLevel
34 | import typings.openlayersLib.openlayersMod.olxNs.styleNs.{
35 | StrokeOptions,
36 | StyleOptions
37 | }
38 | import typings.openlayersLib.openlayersMod.MapEvent
39 |
40 | object MapExample {
41 |
42 | val centerLatVar: Var[Double] = Var(47.06472)
43 | val centerLonVar: Var[Double] = Var(8.524444)
44 |
45 | @JSExportTopLevel("mapExample")
46 | def mapExample(formDiv: String): Unit = {
47 | dom.render(document.getElementById(formDiv), printForm)
48 | plotGraph.watch
49 | }
50 |
51 | @dom
52 | private lazy val printForm: Binding[HTMLElement] = {
53 |
73 | }
74 |
75 | @dom
76 | private lazy val latInput = {
77 | val lat = centerLatVar.bind
78 |
centerLatVar.value = latIn.value.toDouble}/>
81 | }
82 |
83 | @dom
84 | private lazy val lonInput = {
85 | val lon = centerLonVar.bind
86 |
centerLonVar.value = lonIn.value.toDouble}/>
89 | }
90 |
91 | private lazy val plotGraph = Binding {
92 | val lat = centerLatVar.bind
93 | val lon = centerLonVar.bind
94 | map
95 | .getView()
96 | .setCenter(
97 | projNs.transform(js.Tuple2(lon, lat), "EPSG:4326", "EPSG:3857")
98 | )
99 | }
100 |
101 | lazy val map = {
102 | // Layer with the Map
103 | val lmap = new Tile(
104 | TileOptions(
105 | source = new sourceNs.OSM()
106 | )
107 | )
108 | // Layer with the GPX Track
109 | val lgpx = new layerNs.Vector(
110 | VectorOptions(
111 | source = new sourceNs.Vector(
112 | SourceVectorOptions(
113 | url = "/assets/gps/rigi_kulm.gpx",
114 | format = new formatNs.GPX()
115 | )
116 | ),
117 | style = new styleNs.Style(
118 | StyleOptions(
119 | stroke = new styleNs.Stroke(
120 | StrokeOptions(
121 | color = "#f00",
122 | width = 3
123 | )
124 | )
125 | )
126 | )
127 | )
128 | )
129 |
130 | val olMap = new OLMap(
131 | MapOptions(
132 | target = "mapExample",
133 | // projection= new OpenLayers.Projection("EPSG:900913"),
134 | // displayProjection= new OpenLayers.Projection("EPSG:4326"),
135 | layers = js.Array[Base](
136 | lmap,
137 | lgpx
138 | ),
139 | view = new View(
140 | ViewOptions(
141 | center = projNs.fromLonLat(
142 | js.Tuple2(centerLonVar.value, centerLatVar.value)
143 | ),
144 | zoom = 10
145 | )
146 | )
147 | )
148 | )
149 | setTimeout(500) {
150 | val event: (js.Function1[eventsNs.Event, scala.Unit]) = {
151 | (e: eventsNs.Event) =>
152 | val view = olMap.getView()
153 | if (view != null){
154 | val center = view.getCenter()
155 | if (center != null && center._1 > Double.MinValue && center._1 < Double.MaxValue) {
156 | val center2 = projNs.transform(center, "EPSG:3857", "EPSG:4326")
157 | centerLatVar.value = center2._2
158 | centerLonVar.value = center2._1
159 | }
160 | }
161 |
162 | }
163 | olMap.on("moveend", event)
164 | }
165 |
166 | olMap
167 | }
168 | }
169 |
--------------------------------------------------------------------------------
/src/main/scala/pages/demo/MathApp.scala:
--------------------------------------------------------------------------------
1 | package pages.demo
2 |
3 | import com.thoughtworks.binding.Binding.Var
4 | import com.thoughtworks.binding.{Binding, dom}
5 | import org.scalajs.dom.raw.{Event, HTMLElement}
6 | import org.scalajs.jquery.jQuery
7 |
8 | trait MathApp extends MathJaxUtils with IntellijImplicits {
9 |
10 | val diagramWidth = 500
11 | val unit: String = mjInline("m")
12 | val unit2: String = mjInline("m^2")
13 | val unit3: String = mjInline("m^3")
14 |
15 | @dom
16 | protected def printRow(
17 | label: String,
18 | abbreviation: String,
19 | formula: Option[String] = None,
20 | unit: String,
21 | inputElement: Binding[HTMLElement],
22 | radiusFormula: Option[String] = None
23 | ): Binding[HTMLElement] = {
24 |
25 | |
26 | {label}
27 | |
28 | {abbreviation}
29 | |
30 | {mjInline(formula.getOrElse(""))}
31 | |
32 | {inputElement.bind}
33 | |
34 | {unit}
35 | |
36 | {mjInline(radiusFormula.getOrElse(""))}
37 | |
38 |
39 | }
40 |
41 | }
42 |
--------------------------------------------------------------------------------
/src/main/scala/pages/demo/MathJaxUtils.scala:
--------------------------------------------------------------------------------
1 | package pages.demo
2 |
3 | trait MathJaxUtils {
4 |
5 | def mjInline(expression: String) = s"\\($expression\\)"
6 |
7 | def mjBlock(expression: String) = s"\\[$expression\\]"
8 |
9 | }
10 |
--------------------------------------------------------------------------------