Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Michael Ochmann
trakr.
Commits
13e517ed
Commit
13e517ed
authored
Jul 14, 2018
by
Michael Ochmann
Browse files
added new scaling to heightmap view
parent
65a6c886
Changes
9
Hide whitespace changes
Inline
Side-by-side
src/javascript/Std.js
View file @
13e517ed
...
...
@@ -10,7 +10,7 @@ class Std {
* @returns {number}
*/
static
Random
(
min
=
0
,
max
=
100
)
{
return
Math
.
floor
(
Math
.
random
()
*
max
)
+
min
;
return
Math
.
floor
(
Math
.
random
()
*
(
max
-
min
+
1
)
)
+
min
;
}
/**
...
...
src/javascript/controllers/HeightMapViewController.js
View file @
13e517ed
...
...
@@ -13,6 +13,8 @@ class HeightMapViewController extends UIViewController {
this
.
lastX
=
0
;
this
.
translated
=
0
;
this
.
isCapturing
=
false
;
}
addPoint
(
geoPoint
)
{
...
...
@@ -26,21 +28,27 @@ class HeightMapViewController extends UIViewController {
}
capture
()
{
navigator
.
geolocation
.
getCurrentPosition
(
position
=>
{
/*
navigator.geolocation.getCurrentPosition(position => {
this.addPoint(new GeoPoint(
position.coords.latitude,
position.coords.longitude,
position.coords.altitude
));
});
/* this.addPoint(new GeoPoint(
});*/
this
.
addPoint
(
new
GeoPoint
(
Std
.
Random
(
136
,
150
),
Std
.
Random
(
60
,
150
),
Std.Random(60, 150),
Std.Random(60, 150)
));*/
Std
.
Random
(
80
,
159
)
));
}
viewDidLoad
()
{
$
(
"
#startCapturing
"
).
click
(
element
=>
{
this
.
isCapturing
=
true
;
this
.
renderCall
();
});
if
(
!
this
.
isCapturing
)
return
;
this
.
canvas
=
$
(
"
#heightmap
"
).
get
();
this
.
canvas
.
width
=
(
this
.
canvas
.
parentNode
.
offsetWidth
-
16
);
...
...
@@ -57,7 +65,6 @@ class HeightMapViewController extends UIViewController {
this
.
canvas
.
style
.
width
=
oldWidth
+
'
px
'
;
this
.
canvas
.
style
.
height
=
oldHeight
+
'
px
'
;
console
.
log
(
this
.
canvas
.
parentNode
.
offsetHeight
);
let
ctx
=
this
.
canvas
.
getContext
(
"
2d
"
);
...
...
@@ -99,8 +106,10 @@ class HeightMapViewController extends UIViewController {
ctx
.
beginPath
();
ctx
.
moveTo
(
0
,
height
);
let
x
=
0
;
let
scalingFactor
=
50
;
let
min
=
(
this
.
model
.
max
-
this
.
model
.
min
)
<
scalingFactor
?
this
.
model
.
min
-
scalingFactor
:
this
.
model
.
min
;
for
(
let
point
of
this
.
model
.
points
)
{
let
ordinateVal
=
Std
.
Map
(
point
.
altitude
,
this
.
model
.
min
,
this
.
model
.
max
,
0
,
height
*
0.95
);
let
ordinateVal
=
Std
.
Map
(
point
.
altitude
,
min
,
this
.
model
.
max
,
0
,
height
*
0.95
);
ctx
.
lineTo
(
x
,
height
-
ordinateVal
);
x
+=
40
;
}
...
...
@@ -123,8 +132,8 @@ class HeightMapViewController extends UIViewController {
ctx
.
fillText
(
`Datapoints:
${
this
.
model
.
points
.
length
}
`
,
this
.
canvas
.
width
-
20
,
32
);
ctx
.
textAlign
=
"
left
"
;
ctx
.
font
=
"
18px Arial
"
;
ctx
.
fillText
(
`–
${
this
.
model
.
min
}
m`
,
10
,
height
-
22
);
ctx
.
fillText
(
`–
${
this
.
model
.
max
}
m`
,
10
,
32
);
ctx
.
fillText
(
`–
${
Math
.
round
(
this
.
model
.
min
)
}
m`
,
10
,
height
-
22
);
ctx
.
fillText
(
`–
${
Math
.
round
(
this
.
model
.
max
)
}
m`
,
10
,
32
);
ctx
.
restore
();
}
...
...
@@ -139,8 +148,19 @@ class HeightMapViewController extends UIViewController {
}
render
()
{
let
content
;
if
(
!
this
.
isCapturing
&&
this
.
model
.
points
.
length
===
0
)
content
=
`
<section class="view full">
<button class="big" id="startCapturing">Start</button>
</section>
`
;
else
content
=
`<canvas id="heightmap"></canvas>`
;
return
`
<canvas id="heightmap"></canvas>
${
content
}
`
;
}
}
...
...
src/javascript/controllers/SettingsViewController.js
View file @
13e517ed
import
UIViewController
from
"
./UIViewController.js
"
;
class
SettingsViewController
extends
UIViewController
{
constructor
(
view
,
model
)
{
super
(
view
,
model
);
this
.
heights
=
[
50
];
for
(
let
h
=
100
;
h
<
1000
;
h
+=
100
)
this
.
heights
.
push
(
h
);
for
(
let
h
=
1000
;
h
<=
10000
;
h
+=
1000
)
this
.
heights
.
push
(
h
);
}
render
()
{
let
heights
=
this
.
heights
.
map
(
height
=>
`<option value="
${
height
}
">
${
height
}
m</option>`
).
join
(
""
);
return
`
<ul class="UITableView">
<li>
New datapoint every
<span>
<span
class="right"
>
<select>
<option>dwsad</option>
${
heights
}
</select>
</span>
</li>
<li><a style="color: red;"><span class="fa fa-trash" style="margin-right: 10px;"></span> Delete all Data</a></li>
</ul>
`
;
}
...
...
src/javascript/controllers/ViewController.js
View file @
13e517ed
...
...
@@ -17,7 +17,7 @@ const States = {
class
ViewController
extends
UIViewController
{
constructor
()
{
super
(
"
body
"
);
this
.
state
=
States
.
TRACKLIST
;
this
.
state
=
States
.
HEIGHTMAP
;
this
.
track
=
null
;
this
.
renderCall
();
...
...
@@ -82,6 +82,7 @@ class ViewController extends UIViewController {
render
()
{
this
.
children
=
[];
let
leftButton
=
"
<a></a>
"
;
let
title
=
"
HeightTracker
"
;
switch
(
this
.
state
)
{
case
States
.
SETTINGS
:
...
...
@@ -94,13 +95,14 @@ class ViewController extends UIViewController {
case
States
.
HEIGHTMAP
:
this
.
addSubview
(
new
HeightMapViewController
(
"
main
"
,
new
HeightMap
(
this
.
track
)));
leftButton
=
"
<a id=backButton href=#><span class='fa fa-chevron-left'></span> <span>Zurück</span></a>
"
;
title
=
"
Capture Track
"
;
break
;
}
return
`
<header>
${
leftButton
}
<h2 class=title>
HeightTracker
</h2>
<h2 class=title>
${
title
}
</h2>
<a href=# id=about><span class="fa fa-info-circle"></span></a>
</header>
<main class=view>
...
...
src/javascript/models/HeightMap.js
View file @
13e517ed
import
$
from
"
../smallQ.js
"
;
import
Std
from
"
../Std.js
"
;
import
GeoPoint
from
"
../GeoPoint.js
"
;
class
HeightMap
{
...
...
@@ -8,22 +9,25 @@ class HeightMap {
this
.
points
=
[];
this
.
min
=
null
;
this
.
max
=
0
;
console
.
log
(
trackID
)
;
this
.
mid
=
0
;
this
.
sum
=
0
;
}
add
(
geoPoint
)
{
if
(
geoPoint
.
constructor
.
name
!==
"
GeoPoint
"
)
throw
new
TypeError
(
"
an object of type 'GeoPoint' must be p1assed.
"
);
this
.
min
=
this
.
min
===
null
?
geoPoint
.
altitude
:
this
.
min
;
let
min
=
this
.
min
;
let
max
=
this
.
max
;
this
.
min
=
this
.
min
===
null
?
geoPoint
.
altitude
:
this
.
min
;
this
.
min
=
geoPoint
.
altitude
<
this
.
min
?
geoPoint
.
altitude
:
this
.
min
;
this
.
max
=
geoPoint
.
altitude
>
this
.
max
?
geoPoint
.
altitude
:
this
.
max
;
this
.
sum
+=
geoPoint
.
altitude
;
this
.
mid
=
this
.
sum
/
this
.
points
.
length
;
this
.
points
.
push
(
geoPoint
);
}
...
...
src/scss/_UITableView.scss
View file @
13e517ed
...
...
@@ -8,7 +8,7 @@
padding
:
15px
12px
;
border-bottom
:
solid
1px
#eee
;
span
{
span
.right
{
float
:
right
;
}
}
...
...
src/scss/_header.scss
View file @
13e517ed
header
{
display
:
grid
;
grid-template-columns
:
repeat
(
3
,
1fr
)
;
grid-template-columns
:
1fr
2fr
1fr
;
grid-gap
:
9px
;
background
:
$header-background
;
color
:
$header-color
;
...
...
src/scss/_view.scss
View file @
13e517ed
...
...
@@ -4,4 +4,11 @@
box-sizing
:
border-box
;
padding
:
8px
;
background
:
white
;
&
.full
{
display
:
flex
;
height
:
100%
;
align-items
:
center
;
justify-content
:
center
;
}
}
\ No newline at end of file
src/scss/app.scss
View file @
13e517ed
...
...
@@ -36,4 +36,9 @@ body {
background
:
$header-background
;
font-family
:
sans-serif
;
box-sizing
:
border-box
;
}
button
.big
{
padding
:
20px
50px
;
font-size
:
large
;
}
\ No newline at end of file
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment