Hack together a "Hello, world" in Scala with Laminar
This commit is contained in:
Aaron Fenyes
parent
244f222eb0
commit
c376fcdad8
2
lang-trials/scala/.gitignore
vendored
Normal file
2
lang-trials/scala/.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
target
|
||||||
|
sbt.json
|
||||||
12
lang-trials/scala/build.sbt
Normal file
12
lang-trials/scala/build.sbt
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
enablePlugins(ScalaJSPlugin)
|
||||||
|
|
||||||
|
name := "Lattice Circle"
|
||||||
|
scalaVersion := "3.4.2"
|
||||||
|
|
||||||
|
// This is an application with a main method
|
||||||
|
scalaJSUseMainModuleInitializer := true
|
||||||
|
|
||||||
|
libraryDependencies += "com.raquo" %%% "laminar" % "17.0.0"
|
||||||
|
/*libraryDependencies += "org.scalanlp" %% "breeze" % "2.1.0"*/
|
||||||
|
libraryDependencies += "ai.dragonfly" %%% "slash" % "0.3.1"
|
||||||
|
libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "2.8.0"
|
||||||
10
lang-trials/scala/index.html
Normal file
10
lang-trials/scala/index.html
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Lattice circle</title>
|
||||||
|
<script type="text/javascript" src="./target/scala-3.4.2/lattice-circle-fastopt/main.js"></script>
|
||||||
|
<link rel="stylesheet" href="main.css"/>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
</html>
|
||||||
50
lang-trials/scala/main.css
Normal file
50
lang-trials/scala/main.css
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
body {
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
color: #fcfcfc;
|
||||||
|
background-color: #202020;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
color: inherit;
|
||||||
|
background-color: #020202;
|
||||||
|
border: 1px solid #606060;
|
||||||
|
min-width: 40px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.point-1 {
|
||||||
|
border-color: #ba5d09;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.point-2 {
|
||||||
|
border-color: #0e8a06;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.point-3 {
|
||||||
|
border-color: #8951fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
#data-panel {
|
||||||
|
float: left;
|
||||||
|
margin-left: 20px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto auto;
|
||||||
|
gap: 10px 10px;
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#data-panel > div {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#result-display {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
float: left;
|
||||||
|
background-color: #020202;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
1
lang-trials/scala/project/build.properties
Normal file
1
lang-trials/scala/project/build.properties
Normal file
@ -0,0 +1 @@
|
|||||||
|
sbt.version=1.10.1
|
||||||
1
lang-trials/scala/project/plugins.sbt
Normal file
1
lang-trials/scala/project/plugins.sbt
Normal file
@ -0,0 +1 @@
|
|||||||
|
addSbtPlugin("org.scala-js" % "sbt-scalajs" % "1.16.0")
|
||||||
253
lang-trials/scala/src/main/scala/LatticeCircleApp.scala
Normal file
253
lang-trials/scala/src/main/scala/LatticeCircleApp.scala
Normal file
@ -0,0 +1,253 @@
|
|||||||
|
// based on the Laminar example app
|
||||||
|
//
|
||||||
|
// https://github.com/raquo/laminar-examples/blob/master/src/main/scala/App.scala
|
||||||
|
//
|
||||||
|
// and Li Haoyi's example canvas app
|
||||||
|
//
|
||||||
|
// http://www.lihaoyi.com/hands-on-scala-js/#MakingaCanvasApp
|
||||||
|
//
|
||||||
|
|
||||||
|
import com.raquo.laminar.api.L.{*, given}
|
||||||
|
/*import breeze.linalg._*/
|
||||||
|
import narr.*
|
||||||
|
import org.scalajs.dom
|
||||||
|
import org.scalajs.dom.document
|
||||||
|
import scala.math
|
||||||
|
import slash.matrix.*
|
||||||
|
|
||||||
|
class Circle(var centerX: Double, var centerY: Double, var radius: Double)
|
||||||
|
|
||||||
|
object LatticeCircleApp:
|
||||||
|
val canvas = canvasTag(widthAttr := 600, heightAttr := 600)
|
||||||
|
val ctx = canvas.ref.getContext("2d").asInstanceOf[dom.CanvasRenderingContext2D]
|
||||||
|
val dataBusList = List.tabulate(6)(_ => new EventBus[Double])
|
||||||
|
val dataStream = dataBusList(0).events
|
||||||
|
.combineWith(dataBusList(1).events)
|
||||||
|
.combineWith(dataBusList(2).events)
|
||||||
|
.combineWith(dataBusList(3).events)
|
||||||
|
.combineWith(dataBusList(4).events)
|
||||||
|
.combineWith(dataBusList(5).events)
|
||||||
|
.map(dataTuple => NArray(dataTuple(0), dataTuple(1), dataTuple(2), dataTuple(3), dataTuple(4), dataTuple(5)))
|
||||||
|
.filter(data => data.forall(!_.isNaN()))
|
||||||
|
/*
|
||||||
|
val dataList = List(-1.0, 0.0, 0.0, -1.0, 1.0, 0.0).map(Var(_))
|
||||||
|
val dataStream = dataList(0).signal
|
||||||
|
.combineWith(dataList(1).signal)
|
||||||
|
.combineWith(dataList(2).signal)
|
||||||
|
.combineWith(dataList(3).signal)
|
||||||
|
.combineWith(dataList(4).signal)
|
||||||
|
.combineWith(dataList(5).signal)
|
||||||
|
.map(dataTuple => NArray(dataTuple(0), dataTuple(1), dataTuple(2), dataTuple(3), dataTuple(4), dataTuple(5)))
|
||||||
|
*/
|
||||||
|
val pointStream = dataStream.map(data => Matrix[3, 2](data))
|
||||||
|
/* Breeze version */
|
||||||
|
/*
|
||||||
|
val pointStream = dataStream.map(data => new DenseMatrix(2, 3, Array(data(0), data(1), data(2), data(3), data(4), data(5))))
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Breeze version */
|
||||||
|
/*
|
||||||
|
def circThru(points: DenseMatrix[Double]): Circle =
|
||||||
|
// build the matrix that maps the circle's coefficient vector to the
|
||||||
|
// negative of the linear part of the circle's equation, evaluated at the
|
||||||
|
// given points
|
||||||
|
val negLinPart = DenseMatrix.horzcat(
|
||||||
|
2.0*points.t,
|
||||||
|
DenseMatrix.ones[Double](3, 1)
|
||||||
|
)
|
||||||
|
|
||||||
|
// find the quadrdatic part of the circle's equation, evaluated at the given
|
||||||
|
// points
|
||||||
|
val quadPart = points(::, *).map(v => v dot v)
|
||||||
|
|
||||||
|
// find the circle's coefficient vector, and from there its center and
|
||||||
|
// radius
|
||||||
|
val coeffs = negLinPart \ quadPart
|
||||||
|
val centerX = coeffs(0, 0)
|
||||||
|
val centerY = coeffs(1, 0)
|
||||||
|
Circle(
|
||||||
|
centerX,
|
||||||
|
centerY,
|
||||||
|
math.sqrt(coeffs(2, 0) + centerX*centerX + centerY*centerY)
|
||||||
|
)
|
||||||
|
*/
|
||||||
|
|
||||||
|
def circThru(points: Matrix[3, 2]): Option[Circle] =
|
||||||
|
// build the matrix that maps the circle's coefficient vector to the
|
||||||
|
// negative of the linear part of the circle's equation, evaluated at the
|
||||||
|
// given points
|
||||||
|
val negLinPart = Matrix.ones[3, 3]
|
||||||
|
negLinPart.setMatrix(0, 0, points * 2.0)
|
||||||
|
println("built neg lin part")
|
||||||
|
println(negLinPart)
|
||||||
|
|
||||||
|
// find the quadrdatic part of the circle's equation, evaluated at the given
|
||||||
|
// points
|
||||||
|
val quadPart = Matrix[3, 1](
|
||||||
|
NArray.tabulate[Double](3)(
|
||||||
|
k => points(k, 0)*points(k, 0) + points(k, 1)*points(k, 1)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
println("build quad part")
|
||||||
|
println(quadPart)
|
||||||
|
|
||||||
|
// find the circle's coefficient vector, and from there its center and
|
||||||
|
// radius
|
||||||
|
try
|
||||||
|
val coeffs = negLinPart.solve(quadPart)
|
||||||
|
val centerX = coeffs(0, 0)
|
||||||
|
val centerY = coeffs(1, 0)
|
||||||
|
Some(Circle(
|
||||||
|
centerX,
|
||||||
|
centerY,
|
||||||
|
math.sqrt(coeffs(2, 0) + centerX*centerX + centerY*centerY)
|
||||||
|
))
|
||||||
|
catch
|
||||||
|
_ => return None
|
||||||
|
|
||||||
|
def draw(points: Matrix[3, 2]): Unit =
|
||||||
|
// center and normalize the coordinate system
|
||||||
|
val width = canvas.ref.width
|
||||||
|
val height = canvas.ref.height
|
||||||
|
ctx.setTransform(1.0, 0.0, 0.0, -1.0, 0.5*width, 0.5*height)
|
||||||
|
|
||||||
|
// clear the previous frame
|
||||||
|
ctx.clearRect(-0.5*width, -0.5*width, width, height)
|
||||||
|
|
||||||
|
// find the resolution
|
||||||
|
val rDisp = 5.0
|
||||||
|
val res = width / (2.0*rDisp)
|
||||||
|
|
||||||
|
// set colors
|
||||||
|
val highlightStyle = "white"
|
||||||
|
val gridStyle = "#404040"
|
||||||
|
val pointFillStyles = List("#ba5d09", "#0e8a06", "#8951fb")
|
||||||
|
val pointStrokeStyles = List("#f89142", "#58c145", "#c396fc")
|
||||||
|
|
||||||
|
// draw the grid
|
||||||
|
val rGrid = (rDisp - 0.01).floor.toInt
|
||||||
|
val edgeScr = res * rDisp
|
||||||
|
ctx.strokeStyle = gridStyle
|
||||||
|
for t <- -rGrid to rGrid do
|
||||||
|
val tScr = res * t
|
||||||
|
|
||||||
|
// draw horizontal grid line
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(-edgeScr, tScr)
|
||||||
|
ctx.lineTo(edgeScr, tScr)
|
||||||
|
ctx.stroke()
|
||||||
|
|
||||||
|
// draw vertical grid line
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(tScr, -edgeScr)
|
||||||
|
ctx.lineTo(tScr, edgeScr)
|
||||||
|
ctx.stroke()
|
||||||
|
|
||||||
|
// find and draw the circle through the given points
|
||||||
|
circThru(points) match
|
||||||
|
case Some(circ) =>
|
||||||
|
ctx.beginPath()
|
||||||
|
ctx.strokeStyle = highlightStyle
|
||||||
|
ctx.arc(
|
||||||
|
res * circ.centerX,
|
||||||
|
res * circ.centerY,
|
||||||
|
res * circ.radius,
|
||||||
|
0.0, 2.0*math.Pi
|
||||||
|
)
|
||||||
|
ctx.stroke()
|
||||||
|
case None =>
|
||||||
|
|
||||||
|
// draw the data points
|
||||||
|
for n <- 0 to 2 do
|
||||||
|
ctx.beginPath()
|
||||||
|
ctx.fillStyle = pointFillStyles(n)
|
||||||
|
ctx.strokeStyle = pointStrokeStyles(n)
|
||||||
|
ctx.arc(
|
||||||
|
res * points(n, 0),
|
||||||
|
res * points(n, 1),
|
||||||
|
3.0,
|
||||||
|
0.0, 2.0*math.Pi
|
||||||
|
)
|
||||||
|
ctx.fill()
|
||||||
|
ctx.stroke()
|
||||||
|
|
||||||
|
def main(args: Array[String]): Unit =
|
||||||
|
lazy val app = div(
|
||||||
|
canvas,
|
||||||
|
div(
|
||||||
|
pointStream --> draw,
|
||||||
|
idAttr := "data-panel",
|
||||||
|
div("x"),
|
||||||
|
div("y"),
|
||||||
|
input(typ := "number", cls := "point-1", inContext(thisNode => onInput.mapTo(thisNode.ref.valueAsNumber) --> dataBusList(0))),
|
||||||
|
input(typ := "number", cls := "point-1", inContext(thisNode => onInput.mapTo(thisNode.ref.valueAsNumber) --> dataBusList(1))),
|
||||||
|
input(typ := "number", cls := "point-2", inContext(thisNode => onInput.mapTo(thisNode.ref.valueAsNumber) --> dataBusList(2))),
|
||||||
|
input(typ := "number", cls := "point-2", inContext(thisNode => onInput.mapTo(thisNode.ref.valueAsNumber) --> dataBusList(3))),
|
||||||
|
input(typ := "number", cls := "point-3", inContext(thisNode => onInput.mapTo(thisNode.ref.valueAsNumber) --> dataBusList(4))),
|
||||||
|
input(typ := "number", cls := "point-3", inContext(thisNode => onInput.mapTo(thisNode.ref.valueAsNumber) --> dataBusList(5)))
|
||||||
|
/* attempt to use controlled inputs */
|
||||||
|
/*
|
||||||
|
input(
|
||||||
|
typ := "number",
|
||||||
|
cls := "point-1",
|
||||||
|
controlled(
|
||||||
|
value <-- dataList(0).signal,
|
||||||
|
inContext(
|
||||||
|
thisNode => onInput.mapTo(thisNode.ref.valueAsNumber) --> dataList(0).writer
|
||||||
|
)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
input(
|
||||||
|
typ := "number",
|
||||||
|
cls := "point-1",
|
||||||
|
controlled(
|
||||||
|
value <-- dataList(1).signal,
|
||||||
|
inContext(
|
||||||
|
thisNode => onInput.mapTo(thisNode.ref.valueAsNumber) --> dataList(1).writer
|
||||||
|
)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
input(
|
||||||
|
typ := "number",
|
||||||
|
cls := "point-2",
|
||||||
|
controlled(
|
||||||
|
value <-- dataList(2).signal,
|
||||||
|
inContext(
|
||||||
|
thisNode => onInput.mapTo(thisNode.ref.valueAsNumber) --> dataList(2).writer
|
||||||
|
)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
input(
|
||||||
|
typ := "number",
|
||||||
|
cls := "point-2",
|
||||||
|
controlled(
|
||||||
|
value <-- dataList(3).signal,
|
||||||
|
inContext(
|
||||||
|
thisNode => onInput.mapTo(thisNode.ref.valueAsNumber) --> dataList(3).writer
|
||||||
|
)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
input(
|
||||||
|
typ := "number",
|
||||||
|
cls := "point-3",
|
||||||
|
controlled(
|
||||||
|
value <-- dataList(4).signal,
|
||||||
|
inContext(
|
||||||
|
thisNode => onInput.mapTo(thisNode.ref.valueAsNumber) --> dataList(4).writer
|
||||||
|
)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
input(
|
||||||
|
typ := "number",
|
||||||
|
cls := "point-3",
|
||||||
|
controlled(
|
||||||
|
value <-- dataList(5).signal,
|
||||||
|
inContext(
|
||||||
|
thisNode => onInput.mapTo(thisNode.ref.valueAsNumber) --> dataList(5).writer
|
||||||
|
)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
*/
|
||||||
|
)
|
||||||
|
)
|
||||||
|
renderOnDomContentLoaded(document.body, app)
|
||||||
Loading…
Reference in New Issue
Block a user