nep-cli 0.1.6 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/image.html +29 -8
- package/bin/image4.html +57 -0
- package/bin/index.js +677 -317
- package/bin/json.html +172 -0
- package/package.json +1 -1
package/bin/image.html
CHANGED
|
@@ -13,12 +13,11 @@
|
|
|
13
13
|
|
|
14
14
|
<body>
|
|
15
15
|
<div id="app">
|
|
16
|
-
<v-app>
|
|
16
|
+
<v-app style="background-color: #121212;">
|
|
17
17
|
<v-container>
|
|
18
|
-
<v-toolbar dense color="transparent">
|
|
19
|
-
<v-toolbar-title>
|
|
18
|
+
<v-toolbar flat dense dark color="transparent">
|
|
19
|
+
<v-toolbar-title> Topic: {{ topic }}</v-toolbar-title>
|
|
20
20
|
<v-spacer></v-spacer>
|
|
21
|
-
|
|
22
21
|
</v-toolbar>
|
|
23
22
|
<v-row>
|
|
24
23
|
<v-col>
|
|
@@ -32,6 +31,21 @@
|
|
|
32
31
|
</div>
|
|
33
32
|
<script src="/socket.io/socket.io.js"></script> <!-- Include the Socket.IO client library -->
|
|
34
33
|
<script>
|
|
34
|
+
|
|
35
|
+
// Function to get the value of a URL parameter by name
|
|
36
|
+
function getParameterByName(name, url) {
|
|
37
|
+
if (!url) url = window.location.href;
|
|
38
|
+
name = name.replace(/[\[\]]/g, "\\$&");
|
|
39
|
+
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
|
|
40
|
+
results = regex.exec(url);
|
|
41
|
+
if (!results) return null;
|
|
42
|
+
if (!results[2]) return '';
|
|
43
|
+
return decodeURIComponent(results[2].replace(/\+/g, " "));
|
|
44
|
+
}
|
|
45
|
+
const port = getParameterByName('port');
|
|
46
|
+
const topic = getParameterByName('topic');
|
|
47
|
+
// Get the value of the "port" parameter from the URL
|
|
48
|
+
|
|
35
49
|
// Initialize Vue and Vuetify
|
|
36
50
|
new Vue({
|
|
37
51
|
el: '#app',
|
|
@@ -39,19 +53,26 @@
|
|
|
39
53
|
data() {
|
|
40
54
|
return {
|
|
41
55
|
imageSrc: '', // Initialize the image source as empty
|
|
56
|
+
topic: "",
|
|
42
57
|
};
|
|
43
58
|
},
|
|
44
59
|
mounted() {
|
|
60
|
+
this.topic = getParameterByName('topic');
|
|
45
61
|
const image = document.getElementById('image');
|
|
46
|
-
const socket = io.connect(
|
|
62
|
+
const socket = io.connect(`http://localhost:${port}`);
|
|
47
63
|
|
|
48
64
|
socket.on('image', (data) => {
|
|
49
|
-
|
|
50
|
-
|
|
65
|
+
try {
|
|
66
|
+
// Set the received image data as the image source
|
|
67
|
+
this.imageSrc = `data:image/jpeg;base64,${data.image}`;
|
|
68
|
+
} catch (error) {
|
|
69
|
+
|
|
70
|
+
}
|
|
71
|
+
|
|
51
72
|
});
|
|
52
73
|
},
|
|
53
74
|
});
|
|
54
75
|
</script>
|
|
55
76
|
</body>
|
|
56
77
|
|
|
57
|
-
</html>
|
|
78
|
+
</html>
|
package/bin/image4.html
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>NEP+ Image</title>
|
|
8
|
+
<!-- Include Vue 2 and Vuetify 2 from CDN -->
|
|
9
|
+
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.6.3/dist/vuetify.min.css" rel="stylesheet">
|
|
10
|
+
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
|
11
|
+
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.6.3/dist/vuetify.js"></script>
|
|
12
|
+
</head>
|
|
13
|
+
|
|
14
|
+
<body>
|
|
15
|
+
<div id="app">
|
|
16
|
+
<v-app>
|
|
17
|
+
<v-container>
|
|
18
|
+
<v-toolbar dense color="transparent">
|
|
19
|
+
<v-toolbar-title>Camera USB</v-toolbar-title>
|
|
20
|
+
<v-spacer></v-spacer>
|
|
21
|
+
|
|
22
|
+
</v-toolbar>
|
|
23
|
+
<v-row>
|
|
24
|
+
<v-col>
|
|
25
|
+
<v-card color="#1A1A1A">
|
|
26
|
+
<v-img :src="imageSrc" alt="Streamed Image" contain></v-img>
|
|
27
|
+
</v-card>
|
|
28
|
+
</v-col>
|
|
29
|
+
</v-row>
|
|
30
|
+
</v-container>
|
|
31
|
+
</v-app>
|
|
32
|
+
</div>
|
|
33
|
+
<script src="/socket.io/socket.io.js"></script> <!-- Include the Socket.IO client library -->
|
|
34
|
+
<script>
|
|
35
|
+
// Initialize Vue and Vuetify
|
|
36
|
+
new Vue({
|
|
37
|
+
el: '#app',
|
|
38
|
+
vuetify: new Vuetify(),
|
|
39
|
+
data() {
|
|
40
|
+
return {
|
|
41
|
+
imageSrc: '', // Initialize the image source as empty
|
|
42
|
+
};
|
|
43
|
+
},
|
|
44
|
+
mounted() {
|
|
45
|
+
const image = document.getElementById('image');
|
|
46
|
+
const socket = io.connect('http://localhost:3000'); // Connect to your server
|
|
47
|
+
|
|
48
|
+
socket.on('image', (data) => {
|
|
49
|
+
// Set the received image data as the image source
|
|
50
|
+
this.imageSrc = `data:image/jpeg;base64,${data.image}`;
|
|
51
|
+
});
|
|
52
|
+
},
|
|
53
|
+
});
|
|
54
|
+
</script>
|
|
55
|
+
</body>
|
|
56
|
+
|
|
57
|
+
</html>
|