Skip to content

Commit 747a352

Browse files
zzyandzzyzzyandzzy
committed
Modify replace data fun.
1 parent 7b2f17e commit 747a352

File tree

7 files changed

+68
-86
lines changed

7 files changed

+68
-86
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
/target
22
/.idea
3-
.DS_Store
3+
.DS_Store
4+
*.mp4

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414

1515
This code `set_option.js`：
1616
```javascript
17-
powerColor = ${power} > (maxPower * 0.8) ? 'rgb(255, 70, 131)' : '#58D9F9';
18-
speedColor = ${speed} > (maxSpeed * 0.8) ? 'rgb(255, 70, 131)' : '#58D9F9';
17+
powerColor = {power} > (maxPower * 0.8) ? 'rgb(255, 70, 131)' : '#58D9F9';
18+
speedColor = {speed} > (maxSpeed * 0.8) ? 'rgb(255, 70, 131)' : '#58D9F9';
1919
```
2020
- Use [FFmpeg](https://github.com/FFmpeg/FFmpeg)，support hardware accelerated export，use command `./fit-overlay-cli ffmpeg --args -encoders`see more.
2121

‎README_zh.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414

1515
对应`set_option.js`为：
1616
```javascript
17-
powerColor = ${power} > (maxPower * 0.8) ? 'rgb(255, 70, 131)' : '#58D9F9';
18-
speedColor = ${speed} > (maxSpeed * 0.8) ? 'rgb(255, 70, 131)' : '#58D9F9';
17+
powerColor = {power} > (maxPower * 0.8) ? 'rgb(255, 70, 131)' : '#58D9F9';
18+
speedColor = {speed} > (maxSpeed * 0.8) ? 'rgb(255, 70, 131)' : '#58D9F9';
1919
```
2020

2121
- 使用 [FFmpeg](https://github.com/FFmpeg/FFmpeg)，支持硬件加速导出，使用命令`./fit-overlay-cli ffmpeg --args -encoders`查看

‎js/chart.js

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
const chartWidth = ${width};
2-
const chartHeight = ${height};
1+
const chartWidth = {width};
2+
const chartHeight = {height};
33

44
var chart = echarts.init(null, null, {
55
renderer: 'svg',
@@ -12,15 +12,15 @@ function autoFontSize(scale) {
1212
return Math.round(chartWidth / scale);
1313
}
1414

15-
const data = ${all_record};
16-
const pathData = data.map(item => [item.lo, item.la]);
17-
const altData = data.map(item => [item.t, item.a]);
15+
const allRecordData = {all_record};
16+
const allPathData = allRecordData.map(item => [item.lo, item.la]);
17+
const allAltData = allRecordData.map(item => [item.t, item.a]);
1818
let maxSpeed = 0;
1919
let maxPower = 0;
2020
let maxAlt = 0;
2121
let minAlt = 8848.43;
22-
for (let i = 0; i < data.length; i++) {
23-
const item = data[i];
22+
for (let i = 0; i < allRecordData.length; i++) {
23+
const item = allRecordData[i];
2424
if (item.p > maxPower) {
2525
maxPower = item.p;
2626
}
@@ -92,7 +92,7 @@ chart.setOption(
9292
{
9393
name: 'Path',
9494
type: 'line',
95-
data: pathData,
95+
data: allPathData,
9696
showSymbol: false,
9797
animation: false,
9898
lineStyle: {
@@ -105,8 +105,8 @@ chart.setOption(
105105
type: 'effectScatter',
106106
coordinateSystem: 'cartesian2d',
107107
z: 100,
108-
data: [pathData[0]],
109-
symbolSize: autoFontSize(150),
108+
data: [allPathData[0]],
109+
symbolSize: autoFontSize(100),
110110
showEffectOn: 'render',
111111
rippleEffect: {
112112
brushType: 'stroke'
@@ -116,7 +116,7 @@ chart.setOption(
116116
}
117117
},
118118
{
119-
data: altData,
119+
data: allAltData,
120120
type: 'line',
121121
itemStyle: {
122122
color: 'white'
@@ -136,8 +136,8 @@ chart.setOption(
136136
type: 'effectScatter',
137137
coordinateSystem: 'cartesian2d',
138138
z: 100,
139-
data: [altData[0]],
140-
symbolSize: autoFontSize(150),
139+
data: [allAltData[0]],
140+
symbolSize: autoFontSize(100),
141141
showEffectOn: 'render',
142142
rippleEffect: {
143143
brushType: 'stroke'

‎js/set_option.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
1-
powerColor = ${power} > (maxPower * 0.8) ? 'rgb(255, 70, 131)' : '#58D9F9';
2-
speedColor = ${speed} > (maxSpeed * 0.8) ? 'rgb(255, 70, 131)' : '#58D9F9';
1+
powerColor = {power} > (maxPower * 0.8) ? 'rgb(255, 70, 131)' : '#58D9F9';
2+
speedColor = {speed} > (maxSpeed * 0.8) ? 'rgb(255, 70, 131)' : '#58D9F9';
33
chart.setOption({
44
graphic: [
55
{},
66
{
77
style: {
8-
text: ${heart}
8+
text: {heart}
99
}
1010
},
1111
{},
1212
{
1313
style: {
14-
text: ${cadence},
14+
text: {cadence},
1515
}
1616
},
1717
{
1818
style: {
19-
text: (${grade}).toFixed(2) + '%',
19+
text: ({grade}).toFixed(2) + '%',
2020
}
2121
},
2222
],
2323
series: [
2424
{},
2525
{
26-
data: [[${long},${lat}]]
26+
data: [[{long}, {lat}]]
2727
},
2828
{},
2929
{
30-
data: [[${timestamp},${alt}]]
30+
data: [[{timestamp}, {alt}]]
3131
},
3232
{
3333
axisTick: {
@@ -54,7 +54,7 @@ chart.setOption({
5454
},
5555
data: [
5656
{
57-
value: ${speed},
57+
value: {speed},
5858
name: 'km/h'
5959
}
6060
]
@@ -81,7 +81,7 @@ chart.setOption({
8181
},
8282
data: [
8383
{
84-
value: ${power}
84+
value: {power}
8585
}
8686
]
8787
}

‎src/echarts.rs

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
use crate::fit_utils::FitRecord;
22
use charming::ImageRenderer;
33
use image::{ImageFormat, RgbaImage};
4+
use std::collections::HashMap;
45

56
pub struct Echarts {
67
render: ImageRenderer,
@@ -20,19 +21,25 @@ impl Echarts {
2021
}
2122

2223
pub fn render_format(&mut self, record: FitRecord) -> RgbaImage {
23-
let set_option_js = self
24-
.set_option_js
25-
.replace("${long}", &format!("{}", record.lo))
26-
.replace("${lat}", &format!("{}", record.la))
27-
.replace("${alt}", &format!("{}", record.a))
28-
.replace("${heart}", &format!("{}", record.h))
29-
.replace("${cadence}", &format!("{}", record.c))
30-
.replace("${speed}", &format!("{}", record.s))
31-
.replace("${power}", &format!("{}", record.p))
32-
.replace("${grade}", &format!("{}", record.g))
33-
.replace("${temperature}", &format!("{}", record.te))
34-
.replace("${right_balance}", &format!("{}", record.rb))
35-
.replace("${timestamp}", &format!("{}", record.t));
24+
let replacements = HashMap::from([
25+
("{long}", record.lo.to_string()),
26+
("{lat}", record.la.to_string()),
27+
("{alt}", record.a.to_string()),
28+
("{heart}", record.h.to_string()),
29+
("{cadence}", record.c.to_string()),
30+
("{speed}", record.s.to_string()),
31+
("{power}", record.p.to_string()),
32+
("{grade}", record.g.to_string()),
33+
("{temperature}", record.te.to_string()),
34+
("{right_balance}", record.rb.to_string()),
35+
("{timestamp}", record.t.to_string()),
36+
]);
37+
38+
let set_option_js = replacements
39+
.iter()
40+
.fold(self.set_option_js.clone(), |acc, (key, value)| {
41+
acc.replace(key, value)
42+
});
3643

3744
match self
3845
.render
@@ -54,9 +61,9 @@ pub fn replace_chart_js(
5461
) -> String {
5562
chart_js
5663
.replace(
57-
"${all_record}",
64+
"{all_record}",
5865
&serde_json::to_string(fit_record_slice).unwrap(),
5966
)
60-
.replace("${width}", &width.to_string())
61-
.replace("${height}", &height.to_string())
67+
.replace("{width}", &width.to_string())
68+
.replace("{height}", &height.to_string())
6269
}

‎tests/echats_path_demo.html

Lines changed: 17 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -4,44 +4,26 @@
44
<meta charset="UTF-8">
55
<title>Title</title>
66
<style>
7-
.video-container {
8-
position: relative;
9-
width: 1920px;
10-
height: 1080px;
11-
background-color: black;
12-
}
13-
14-
video {
15-
position: relative;
16-
z-index: 1;
17-
}
18-
19-
#echart1 {
7+
#my-chart {
208
position: absolute;
219
top: 0;
2210
left: 0;
2311
width: 1920px;
2412
height: 1080px;
2513
z-index: 2;
14+
background-color: black;
2615
}
2716
</style>
2817

2918
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
3019
</head>
3120
<body>
32-
<div class="video-container">
33-
<!-- <video autoplay loop>-->
34-
<!-- <source src="../video/h264.mp4" type="video/mp4">-->
35-
<!-- Your browser does not support the video tag.-->
36-
<!-- </video>-->
37-
<div id="echart1"></div>
38-
</div>
21+
<div id="my-chart"></div>
3922

4023
<script>
4124
fetch('../record_data.json')
4225
.then(response => response.json())
4326
.then(data => {
44-
// 使用数据创建 ECharts 图表
4527
createChart(data);
4628
});
4729

@@ -67,17 +49,15 @@
6749
}
6850
}
6951

70-
const pathData = data.map(item => [item.lo, item.la]);
71-
const altData = data.map(item => [item.t, item.a]);
52+
const allPathData = data.map(item => [item.lo, item.la]);
53+
const allAltData = data.map(item => [item.t, item.a]);
7254

73-
// 创建 ECharts 实例并设置选项...
74-
var echartContainer = document.getElementById('echart1');
75-
var myChart = echarts.init(echartContainer, null, {renderer: 'svg'});
55+
const echartContainer = document.getElementById('my-chart');
56+
const myChart = echarts.init(echartContainer, null, {renderer: 'svg'});
7657

7758
function autoFontSize(scale) {
7859
let width = echartContainer.offsetWidth;
7960
let newFontSize = Math.round(width / scale);
80-
// console.log(`Current width : ${width}, Updating Fontsize to ${newFontSize}`);
8161
return newFontSize;
8262
}
8363

@@ -140,7 +120,7 @@
140120
{
141121
name: 'Path',
142122
type: 'line',
143-
data: pathData,
123+
data: allPathData,
144124
lineStyle: {
145125
width: autoFontSize(300),
146126
color: "white",
@@ -155,8 +135,8 @@
155135
type: 'effectScatter',
156136
coordinateSystem: 'cartesian2d',
157137
z: 100,
158-
data: [pathData[0]],
159-
symbolSize: autoFontSize(150),
138+
data: [allPathData[0]],
139+
symbolSize: autoFontSize(100),
160140
showEffectOn: 'render',
161141
rippleEffect: {
162142
brushType: 'stroke'
@@ -166,7 +146,7 @@
166146
},
167147
},
168148
{
169-
data: altData,
149+
data: allAltData,
170150
type: 'line',
171151
itemStyle: {
172152
color: 'white'
@@ -186,8 +166,8 @@
186166
type: 'effectScatter',
187167
coordinateSystem: 'cartesian2d',
188168
z: 100,
189-
data: [altData[0]],
190-
symbolSize: autoFontSize(150),
169+
data: [allAltData[0]],
170+
symbolSize: autoFontSize(100),
191171
showEffectOn: 'render',
192172
rippleEffect: {
193173
brushType: 'stroke'
@@ -442,10 +422,8 @@
442422
]
443423
});
444424

445-
446-
// 动态更新小球位置
447425
setInterval(function () {
448-
if (currentIndex < pathData.length) {
426+
if (currentIndex < allPathData.length) {
449427
let item = data[currentIndex];
450428
let powerColor = item.p > (maxPower * 0.8) ? 'rgb(255, 70, 131)' : '#58D9F9';
451429
let speedColor = item.s > (maxSpeed * 0.8) ? 'rgb(255, 70, 131)' : '#58D9F9';
@@ -463,20 +441,16 @@
463441
text: item.c,
464442
}
465443
},
466-
{
467-
// style: {
468-
// text: (-item.c).toFixed(2) + '%',
469-
// }
470-
},
444+
{},
471445
],
472446
series: [
473447
{},
474448
{
475-
data: [pathData[currentIndex]]
449+
data: [allPathData[currentIndex]]
476450
},
477451
{},
478452
{
479-
data: [altData[currentIndex]]
453+
data: [allAltData[currentIndex]]
480454
},
481455
{
482456
axisTick: {

0 commit comments

Comments
 (0)