8000 Serial view plugged · arduino/lab-micropython-editor@63cc099 · GitHub
[go: up one dir, main page]
Skip to content

Commit 63cc099

Browse files
murilopolesemurilopolese
committed
Serial view plugged
1 parent 88b35a4 commit 63cc099

File tree

8 files changed

+85
-45
lines changed

8 files changed

+85
-45
lines changed

‎index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ function createWindow () {
107107
}
108108
})
109109
// and load the index.html of the app.
110+
// win.loadFile('ui/editor/index.html')
110111
win.loadFile('ui/ftp/dist/index.html')
111112
}
112113

‎package-lock.json

Lines changed: 4 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,8 @@
3838
"license": "MIT",
3939
"dependencies": {
4040
"about-window": "^1.15.2",
41-
"micropython.js": "github:murilopolese/micropython.js#v1.2.2",
42-
"mkdirp": "^1.0.3",
43-
"serialport": "^10.4.0"
41+
"micropython.js": "github:arduino/micropython.js#1.3.0",
42+
"mkdirp": "^1.0.3"
4443
},
4544
"engines": {
4645
"node": "18"

‎preload.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,9 @@ const Serial = {
5050
listFiles: async (folder) => {
5151
return await board.fs_ls(folder)
5252
},
53+
ilistFiles: async (folder) => {
54+
return await board.fs_ils(folder)
55+
},
5356
loadFile: async (file) => {
5457
const output = await board.fs_cat(file)
5558
return output || ''

‎ui/ftp/components/serialView.tsx

Lines changed: 32 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { React } from 'react'
22

33
import {
44
File,
5+
DeviceType,
56
AvailableDevice
67
} from '../main.type.ts'
78

@@ -22,9 +23,12 @@ const SerialView: React.FC = ({ logic }) => {
2223
const {
2324
availableDevices = [],
2425
serialFiles = [],
26+
selectedFiles = [],
2527
serialPath = '',
2628
connect,
27-
disconnect
29+
disconnect,
30+
navigate,
31+
selectFile
2832
} : SerialParams = logic()
< 9E88 /code>
2933

3034
const onSelectDevice = (e) => {
@@ -36,16 +40,34 @@ const SerialView: React.FC = ({ logic }) => {
3640
}
3741
}
3842

39-
const ListItem = (file: File, i: number) => (
40-
<div className="list-item" key={i}>
41-
<input className="checkbox" type="checkbox" />
42-
<span>{file}</span>
43-
</div>
44-
)
43+
const ListItem = (file: File, i: number) => {
44+
const onClick = () => {
45+
if (file.type === 'file') {
46+
selectFile(file)
47+
} else {
48+
navigate(serialPath + '/' + file.path)
49+
}
50+
}
51+
const checked = selectedFiles
52+
.filter(f => f.device === DeviceType.serial)
53+
.find(f => f.path === file.path)
54+
const icon = file.type === 'file'
55+
? <div className="checkbox">📄</div>
56+
: <div className="checkbox">📁</div>
57+
return (
58+
<div className={`list-item ${checked?'checked':''}`} key={i} onClick={onClick}>
59+
{icon}<span>{file.path}</span>
60+
</div>
61+
)
62+
}
4563

46-
const NavigationItem = (name: string, i:number) => (
47-
<button key={i}>{name}</button>
48-
)
64+
const NavigationItem = (name: string, i:number) => {
65+
const crumbs = serialPath.split('/').filter(c => c !== '')
66+
const path = '/' + crumbs.slice(0, i).join('/')
67+
return (
68+
<button key={i} onClick={() => navigate(path)}>{name}</button>
69+
)
70+
}
4971
let serialPathArray = []
5072
if (serialPath) {
5173
serialPathArray = ['/'].concat(

‎ui/ftp/main.logic.ts

Lines changed: 35 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState } from 'react';
22

3-
import { Device, File, AvailableDevices } from './main.type'
3+
import { DeviceType, File, FileType, AvailableDevices } from './main.type'
44

55
export const useMainLogic = function() {
66
const { BridgeSerial, BridgeDisk } = window
@@ -28,11 +28,31 @@ export const useMainLogic = function() {
2828
}
2929

3030
const navigateSerial = async (newPath) => {
31-
const files = await BridgeSerial.listFiles(newPath)
31+
setWaiting(true)
3232
setSerialPath(newPath)
33-
setSerialFiles(files)
33+
await refreshSerialFiles(newPath)
3434
const newSelection = selectedFiles.filter(f => f.device !== DeviceType.serial)
3535
setSelectedFiles(newSelection)
36+
setWaiting(false)
37+
}
38+
39+
const refreshSerialFiles = async (path) => {
40+
const detailedFiles = await BridgeSerial.ilistFiles(path)
41+
const folders = detailedFiles.filter(f => f[1] === FileType.folder) || []
42+
const files = detailedFiles.filter(f => f[1] === FileType.file) || []
43+
const sortedFiles = folders.concat(files)
44+
.map(f => ({
45+
path: f[0],
46+
type: (f[1] === FileType.folder) ? 'folder' : 'file',
47+
size: f[3],
48+
device: DeviceType.serial
49+
})) || []
50+
setSerialFiles(sortedFiles)
51+
}
52+
53+
const refreshDiskFiles = async () => {
54+
const files = await BridgeDisk.listFiles(diskPath)
55+
setDiskFiles(files)
3656
}
3757

3858
const refresh = async () => {
@@ -41,19 +61,12 @@ export const useMainLogic = function() {
4161
const devices = await BridgeSerial.loadPorts()
4262
setAvailableDevices(devices)
4363
// list serial files
44-
if (connectedDevice) {
45-
const files = await BridgeSerial.listFiles(serialPath)
46-
setSerialFiles(files)
47-
} else {
48-
setSerialFiles([])
49-
}
64+
if (connectedDevice) await refreshSerialFiles(serialPath)
65+
else setSerialFiles([])
5066
// list disk files
51-
if (diskPath) {
52-
const files = await BridgeDisk.listFiles(diskPath)
53-
setDiskFiles(files)
54-
} else {
55-
setDiskFiles([])
56-
}
67+
if (diskPath) await refreshDiskFiles()
68+
else setDiskFiles([])
69+
5770
setWaiting(false)
5871
}
5972

@@ -63,13 +76,12 @@ export const useMainLogic = function() {
6376
serialPath: serialPath,
6477
serialFiles: serialFiles,
6578
selectedFiles: selectedFiles,
66-
connect: async (devicePath: String) => {
79+
connect: async (port: String) => {
6780
setWaiting(true)
68-
await BridgeSerial.connect(devicePath)
69-
setConnectedDevice(devicePath)
81+
await BridgeSerial.connect(port)
82+
setConnectedDevice(port)
7083
setSerialPath('/')
71-
const files = await BridgeSerial.listFiles('/')
72-
setSerialFiles(files)
84+
refreshSerialFiles(serialPath)
7385
setWaiting(false)
7486
},
7587
disconnect: async () => {
@@ -80,17 +92,13 @@ export const useMainLogic = function() {
8092
setSerialFiles([])
8193
setWaiting(false)
8294
},
83-
selectFile: (path) => {
95+
selectFile: (file: File) => {
8496
const serialFilesOnly = selectedFiles.filter(f => f.device === DeviceType.serial)
85-
const selected = serialFilesOnly.find(f => f.path === path)
97+
const selected = serialFilesOnly.find(f => f.path === file.path)
8698
if (selected) {
87-
let newSelection = serialFilesOnly.filter(f => f.path !== path)
99+
let newSelection = serialFilesOnly.filter(f => f.path !== file.path)
88100
setSelectedFiles(newSelection)
89101
} else {
90-
let file = {
91-
path: path,
92-
device: DeviceType.serial
93-
}
94102
serialFilesOnly.push(file)
95103
setSelectedFiles(serialFilesOnly.slice())
96104
}

‎ui/ftp/main.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,11 @@ main {
9191
&:hover {
9292
background: var(--dark-tone);
9393
}
94+
&.checked {
95+
background: var(--highlight-color);
96+
color: var(--light-color);
97+
font-weight: bold;
98+
}
9499
}
95100

96101
.navigation {

‎ui/ftp/main.type.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
export enum DeviceType { serial, disk }
2+
export enum FileType { file = 0x8000, folder = 0x4000 }
23

34
export type File = {
45
path: String
6+
type: FileType
57
device: Device
8+
size: Number
69
}
710

811
export type AvailableDevice = {

0 commit comments

Comments
 (0)
0