From 0b5de50bd5f4111225611ca346a16ded9ae90c9a Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Fri, 26 Jan 2024 09:39:09 +0100
Subject: [PATCH 01/21] feat: add devices dialog in editor WIP

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/TheEditor.vue                  | 13 ++-
 src/components/dialogs/DevicesDialog.vue      | 97 +++++++++++++++++++
 .../dialogs/DevicesDialogSerial.vue           | 59 +++++++++++
 .../dialogs/DevicesDialogSerialDevice.vue     | 40 ++++++++
 src/components/dialogs/DevicesDialogUsb.vue   | 70 +++++++++++++
 .../dialogs/DevicesDialogUsbDevice.vue        | 55 +++++++++++
 src/locales/en.json                           |  6 ++
 7 files changed, 338 insertions(+), 2 deletions(-)
 create mode 100644 src/components/dialogs/DevicesDialog.vue
 create mode 100644 src/components/dialogs/DevicesDialogSerial.vue
 create mode 100644 src/components/dialogs/DevicesDialogSerialDevice.vue
 create mode 100644 src/components/dialogs/DevicesDialogUsb.vue
 create mode 100644 src/components/dialogs/DevicesDialogUsbDevice.vue

diff --git a/src/components/TheEditor.vue b/src/components/TheEditor.vue
index 4d0974c67..df97f93ce 100644
--- a/src/components/TheEditor.vue
+++ b/src/components/TheEditor.vue
@@ -13,6 +13,10 @@
                 :icon="isWriteable ? mdiFileDocumentEditOutline : mdiFileDocumentOutline"
                 :title="title">
                 <template #buttons>
+                    <v-btn text tile class="d-none d-md-flex" @click="dialogDevices = true">
+                        <v-icon small class="mr-1">{{ mdiUsb }}</v-icon>
+                        {{ $t('Editor.DeviceDialog') }}
+                    </v-btn>
                     <v-btn
                         v-if="restartServiceName === 'klipper'"
                         text
@@ -116,6 +120,7 @@
                 </v-card-actions>
             </panel>
         </v-dialog>
+        <devices-dialog :show-dialog="dialogDevices" @close="dialogDevices = false" />
     </div>
 </template>
 
@@ -135,14 +140,17 @@ import {
     mdiHelp,
     mdiHelpCircle,
     mdiRestart,
+    mdiUsb,
 } from '@mdi/js'
 import type Codemirror from '@/components/inputs/Codemirror.vue'
+import DevicesDialog from '@/components/dialogs/DevicesDialog.vue'
 
 @Component({
-    components: { Panel, CodemirrorAsync },
+    components: { DevicesDialog, Panel, CodemirrorAsync },
 })
 export default class TheEditor extends Mixins(BaseMixin) {
-    private dialogConfirmChange = false
+    dialogConfirmChange = false
+    dialogDevices = false
 
     formatFilesize = formatFilesize
 
@@ -157,6 +165,7 @@ export default class TheEditor extends Mixins(BaseMixin) {
     mdiHelpCircle = mdiHelpCircle
     mdiFileDocumentEditOutline = mdiFileDocumentEditOutline
     mdiFileDocumentOutline = mdiFileDocumentOutline
+    mdiUsb = mdiUsb
 
     private scrollbarOptions = { scrollbars: { autoHide: 'never' } }
 
diff --git a/src/components/dialogs/DevicesDialog.vue b/src/components/dialogs/DevicesDialog.vue
new file mode 100644
index 000000000..e93f563ea
--- /dev/null
+++ b/src/components/dialogs/DevicesDialog.vue
@@ -0,0 +1,97 @@
+<template>
+    <v-dialog :value="showDialog" width="500" persistent :fullscreen="isMobile">
+        <panel
+            id="devices-dialog"
+            :title="$t('DevicesDialog.Headline')"
+            :icon="mdiUsb"
+            card-class="devices-dialog"
+            :margin-bottom="false"
+            style="overflow: hidden"
+            :height="isMobile ? 0 : 548">
+            <template #buttons>
+                <v-menu :left="true" :offset-y="true" :close-on-content-click="false" attach="#devices-dialog">
+                    <template #activator="{ on, attrs }">
+                        <v-btn icon tile v-bind="attrs" v-on="on">
+                            <v-icon small>{{ mdiCog }}</v-icon>
+                        </v-btn>
+                    </template>
+                    <v-list>
+                        <v-list-item class="minHeight36">
+                            <v-checkbox
+                                v-model="hideSystemEntries"
+                                class="mt-0"
+                                hide-details
+                                :label="$t('DevicesDialog.HideSystemEntries')" />
+                        </v-list-item>
+                    </v-list>
+                </v-menu>
+                <v-btn icon tile @click="closePrompt">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-tabs v-model="tab" fixed-tabs>
+                <v-tab v-for="tab in tabs" :key="tab.name">{{ tab.content }}</v-tab>
+            </v-tabs>
+            <v-tabs-items v-model="tab">
+                <v-tab-item key="usb">
+                    <devices-dialog-usb :hide-system-entries="hideSystemEntries" />
+                </v-tab-item>
+                <v-tab-item key="serial">
+                    <devices-dialog-serial :hide-system-entries="hideSystemEntries" />
+                </v-tab-item>
+                <v-tab-item key="can">can</v-tab-item>
+                <v-tab-item key="video">video</v-tab-item>
+            </v-tabs-items>
+        </panel>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import Panel from '@/components/ui/Panel.vue'
+
+import { mdiCog, mdiCloseThick, mdiUsb } from '@mdi/js'
+
+@Component({
+    components: { Panel },
+})
+export default class DevicesDialog extends Mixins(BaseMixin) {
+    mdiCog = mdiCog
+    mdiUsb = mdiUsb
+    mdiCloseThick = mdiCloseThick
+
+    tab = 'usb'
+    hideSystemEntries = true
+
+    @Prop({ type: Boolean, default: false }) showDialog!: boolean
+
+    get tabs() {
+        return [
+            {
+                name: 'usb',
+                content: 'USB',
+            },
+            {
+                name: 'serial',
+                content: 'Serial',
+            },
+            // only show CAN, when a device exists
+            {
+                name: 'can',
+                content: 'CAN',
+            },
+            {
+                name: 'video',
+                content: 'Video',
+            },
+        ]
+    }
+
+    closePrompt() {
+        this.$emit('close')
+    }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/dialogs/DevicesDialogSerial.vue b/src/components/dialogs/DevicesDialogSerial.vue
new file mode 100644
index 000000000..a2d24939f
--- /dev/null
+++ b/src/components/dialogs/DevicesDialogSerial.vue
@@ -0,0 +1,59 @@
+<template>
+    <v-card-text>
+        <v-row>
+            <v-col>
+                <v-btn @click="refresh">Refresh</v-btn>
+            </v-col>
+        </v-row>
+        <v-row v-if="devices.length">
+            <v-col>
+                <v-expansion-panels accordion>
+                    <devices-dialog-serial-device
+                        v-for="device in filteredDevices"
+                        :key="device.path_by_hardware ?? device.device_path"
+                        :device="device" />
+                </v-expansion-panels>
+            </v-col>
+        </v-row>
+    </v-card-text>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+
+export interface SerialDevice {
+    device_type: 'hardware_uart' | 'usb'
+    device_path: string
+    device_name: string
+    driver_name: string
+    path_by_hardware?: string
+    path_by_id?: string
+    usb_location?: string
+}
+
+@Component
+export default class DevicesDialogSerial extends Mixins(BaseMixin) {
+    devices: SerialDevice[] = []
+
+    @Prop({ type: Boolean, default: false }) hideSystemEntries!: boolean
+
+    get filteredDevices() {
+        if (!this.hideSystemEntries) return this.devices
+
+        return this.devices.filter((device) => {
+            if (device.device_type === 'hardware_uart') return false
+
+            return true
+        })
+    }
+
+    async refresh() {
+        this.devices = await fetch(this.apiUrl + '/machine/peripherals/serial')
+            .then((res) => res.json())
+            .then((res) => res.result?.serial_devices ?? [])
+    }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/dialogs/DevicesDialogSerialDevice.vue b/src/components/dialogs/DevicesDialogSerialDevice.vue
new file mode 100644
index 000000000..b9ddeb4c4
--- /dev/null
+++ b/src/components/dialogs/DevicesDialogSerialDevice.vue
@@ -0,0 +1,40 @@
+<template>
+    <v-expansion-panel>
+        <v-expansion-panel-header>{{ name }}</v-expansion-panel-header>
+        <v-expansion-panel-content>
+            <v-row v-for="key in filteredKeys" :key="key">
+                <v-col cols="4" class="py-1">{{ key }}</v-col>
+                <v-col cols="8" class="py-1 text-right">{{ device[key] }}</v-col>
+            </v-row>
+        </v-expansion-panel-content>
+    </v-expansion-panel>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { SerialDevice } from '@/components/dialogs/DevicesDialogSerial.vue'
+
+@Component
+export default class DevicesDialogSerialDevice extends Mixins(BaseMixin) {
+    @Prop({ type: Object, required: true }) device!: SerialDevice
+
+    get name() {
+        return this.device.device_name
+    }
+
+    get filteredKeys() {
+        const hiddenKeys = ['device_name']
+        let keys = Object.keys(this.device)
+
+        // filter hidden keys
+        keys = keys.filter((key) => !hiddenKeys.includes(key))
+
+        // filter empty values
+        //@ts-ignore
+        keys = keys.filter((key) => this.device[key])
+
+        return keys
+    }
+}
+</script>
diff --git a/src/components/dialogs/DevicesDialogUsb.vue b/src/components/dialogs/DevicesDialogUsb.vue
new file mode 100644
index 000000000..3fb1318bd
--- /dev/null
+++ b/src/components/dialogs/DevicesDialogUsb.vue
@@ -0,0 +1,70 @@
+<template>
+    <overlay-scrollbars style="max-height: 400px; overflow-x: hidden">
+        <v-card-text>
+            <v-row>
+                <v-col class="text-center">
+                    <v-btn :loading="loading" color="primary" @click="refresh">{{ $t('DevicesDialog.Refresh') }}</v-btn>
+                </v-col>
+            </v-row>
+            <v-row v-if="devices.length" class="mt-0">
+                <v-col>
+                    <devices-dialog-usb-device
+                        v-for="device in filteredDevices"
+                        :key="device.usb_location"
+                        :device="device" />
+                </v-col>
+            </v-row>
+        </v-card-text>
+    </overlay-scrollbars>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+
+export interface UsbDevice {
+    bus_num: number
+    device_num: number
+    usb_location: string
+    vendor_id: string
+    product_id: string
+    manufacturer?: string
+    product?: string
+    class?: string
+    subclass?: string
+    protocol?: string
+    description?: string
+}
+
+@Component
+export default class DevicesDialogUsb extends Mixins(BaseMixin) {
+    devices: UsbDevice[] = []
+    loading = false
+
+    @Prop({ type: Boolean, default: false }) hideSystemEntries!: boolean
+
+    get filteredDevices() {
+        if (!this.hideSystemEntries) return this.devices
+
+        return this.devices.filter((device) => {
+            if (device.class === 'Hub') return false
+
+            return true
+        })
+    }
+
+    async refresh() {
+        this.loading = true
+
+        this.devices = await fetch(this.apiUrl + '/machine/peripherals/usb')
+            .then((res) => res.json())
+            .then((res) => res.result?.usb_devices ?? [])
+
+        window.console.log(this.devices)
+
+        this.loading = false
+    }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/dialogs/DevicesDialogUsbDevice.vue b/src/components/dialogs/DevicesDialogUsbDevice.vue
new file mode 100644
index 000000000..58458994c
--- /dev/null
+++ b/src/components/dialogs/DevicesDialogUsbDevice.vue
@@ -0,0 +1,55 @@
+<template>
+    <v-card outlined class="mt-3">
+        <v-list-item three-line>
+            <v-list-item-content>
+                <div class="text-overline mb-2 d-flex flex-row">
+                    <span>{{ device.manufacturer ?? 'Unknown' }}</span>
+                    <v-spacer />
+                    <span>{{ device.vendor_id }}:{{ device.product_id }}</span>
+                </div>
+                <v-list-item-title class="text-h5 mb-1">{{ device.product ?? 'Unknown' }}</v-list-item-title>
+                <v-list-item-subtitle v-if="device.description">{{ device.description }}</v-list-item-subtitle>
+            </v-list-item-content>
+        </v-list-item>
+        <v-card-text class="pt-0">
+            <v-row v-for="item in details" :key="item.key" class="mt-0">
+                <v-col class="py-2" cols="3">{{ item.key }}</v-col>
+                <v-col class="py-2">{{ item.value }}</v-col>
+            </v-row>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { UsbDevice } from '@/components/dialogs/DevicesDialogUsb.vue'
+
+@Component
+export default class DevicesDialogUsbDevice extends Mixins(BaseMixin) {
+    @Prop({ type: Object, required: true }) device!: UsbDevice
+
+    get details() {
+        const types = ['protocol', 'class', 'serial', 'usb_location']
+        const output: { key: string; value: string }[] = []
+
+        Object.keys(this.device).forEach((key) => {
+            // @ts-ignore
+            let value = this.device[key] ?? null
+
+            if (!types.includes(key) || value === null) return
+
+            if (key === 'class' && this.device['subclass']) {
+                value += `, ${this.device['subclass']}`
+            }
+
+            output.push({
+                key,
+                value,
+            })
+        })
+
+        return output
+    }
+}
+</script>
diff --git a/src/locales/en.json b/src/locales/en.json
index 8cb6bda38..5c5752dea 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -146,6 +146,11 @@
         "SendCode": "Send code...",
         "SetupConsole": "Setup Console"
     },
+    "DevicesDialog": {
+        "Headline": "Devices",
+        "HideSystemEntries": "Hide system entries",
+        "Refresh": "refresh"
+    },
     "Dialogs": {
         "StartPrint": {
             "Cancel": "Cancel",
@@ -158,6 +163,7 @@
     },
     "Editor": {
         "ConfigReference": "Config Reference",
+        "DeviceDialog": "Devices",
         "DontSave": "Don't save",
         "Downloading": "Downloading",
         "FailedSave": "{filename} could not be uploaded!",

From a09c8fc630c8039561a33db42d605da3026c9b49 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Fri, 26 Jan 2024 19:58:00 +0100
Subject: [PATCH 02/21] feat: add serial devices

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../dialogs/DevicesDialogSerial.vue           | 23 +++++-
 .../dialogs/DevicesDialogSerialDevice.vue     | 81 +++++++++++++------
 src/locales/en.json                           |  5 ++
 3 files changed, 82 insertions(+), 27 deletions(-)

diff --git a/src/components/dialogs/DevicesDialogSerial.vue b/src/components/dialogs/DevicesDialogSerial.vue
index a2d24939f..e18b043fc 100644
--- a/src/components/dialogs/DevicesDialogSerial.vue
+++ b/src/components/dialogs/DevicesDialogSerial.vue
@@ -1,11 +1,11 @@
 <template>
     <v-card-text>
         <v-row>
-            <v-col>
-                <v-btn @click="refresh">Refresh</v-btn>
+            <v-col class="text-center">
+                <v-btn :loading="loading" color="primary" @click="refresh">{{ $t('DevicesDialog.Refresh') }}</v-btn>
             </v-col>
         </v-row>
-        <v-row v-if="devices.length">
+        <v-row v-if="filteredDevices.length" class="mt-0">
             <v-col>
                 <v-expansion-panels accordion>
                     <devices-dialog-serial-device
@@ -15,6 +15,16 @@
                 </v-expansion-panels>
             </v-col>
         </v-row>
+        <v-row v-else-if="loaded" class="mt-0">
+            <v-col class="col-8 mx-auto">
+                <p class="text-center text--disabled mb-0">{{ $t('DevicesDialog.NoDeviceFound') }}</p>
+            </v-col>
+        </v-row>
+        <v-row v-else class="mt-0">
+            <v-col class="col-8 mx-auto">
+                <p class="text-center text--disabled mb-0">{{ $t('DevicesDialog.ClickRefresh') }}</p>
+            </v-col>
+        </v-row>
     </v-card-text>
 </template>
 
@@ -35,6 +45,8 @@ export interface SerialDevice {
 @Component
 export default class DevicesDialogSerial extends Mixins(BaseMixin) {
     devices: SerialDevice[] = []
+    loading = false
+    loaded = false
 
     @Prop({ type: Boolean, default: false }) hideSystemEntries!: boolean
 
@@ -49,9 +61,14 @@ export default class DevicesDialogSerial extends Mixins(BaseMixin) {
     }
 
     async refresh() {
+        this.loading = true
+
         this.devices = await fetch(this.apiUrl + '/machine/peripherals/serial')
             .then((res) => res.json())
             .then((res) => res.result?.serial_devices ?? [])
+
+        this.loading = false
+        this.loaded = true
     }
 }
 </script>
diff --git a/src/components/dialogs/DevicesDialogSerialDevice.vue b/src/components/dialogs/DevicesDialogSerialDevice.vue
index b9ddeb4c4..0001aaac2 100644
--- a/src/components/dialogs/DevicesDialogSerialDevice.vue
+++ b/src/components/dialogs/DevicesDialogSerialDevice.vue
@@ -1,40 +1,73 @@
 <template>
-    <v-expansion-panel>
-        <v-expansion-panel-header>{{ name }}</v-expansion-panel-header>
-        <v-expansion-panel-content>
-            <v-row v-for="key in filteredKeys" :key="key">
-                <v-col cols="4" class="py-1">{{ key }}</v-col>
-                <v-col cols="8" class="py-1 text-right">{{ device[key] }}</v-col>
+    <v-card outlined class="mt-3 w-100">
+        <v-list-item three-line>
+            <v-list-item-content>
+                <div class="text-overline mb-2 d-flex flex-row">
+                    <span>{{ device.device_type.toUpperCase().replaceAll('_', ' ') }}</span>
+                    <v-spacer />
+                    <span>{{ device.driver_name }}</span>
+                </div>
+                <v-list-item-title class="text-h5 mb-0">{{ device.device_name }}</v-list-item-title>
+            </v-list-item-content>
+        </v-list-item>
+        <v-card-text>
+            <v-row>
+                <v-col>
+                    <v-text-field
+                        readonly
+                        dense
+                        outlined
+                        hide-details
+                        :append-icon="mdiContentCopy"
+                        :label="$t('DevicesDialog.DevicePath')"
+                        :value="device.device_path"
+                        @click:append="copy(device.device_path)" />
+                </v-col>
             </v-row>
-        </v-expansion-panel-content>
-    </v-expansion-panel>
+            <v-row v-if="device.path_by_id ?? false">
+                <v-col>
+                    <v-text-field
+                        readonly
+                        dense
+                        outlined
+                        hide-details
+                        :append-icon="mdiContentCopy"
+                        :label="$t('DevicesDialog.PathById')"
+                        :value="device.path_by_id"
+                        @click:append="copy(device.path_by_id)" />
+                </v-col>
+            </v-row>
+            <v-row v-if="device.path_by_hardware ?? false">
+                <v-col>
+                    <v-text-field
+                        readonly
+                        dense
+                        outlined
+                        hide-details
+                        :append-icon="mdiContentCopy"
+                        :label="$t('DevicesDialog.PathByHardware')"
+                        :value="device.path_by_hardware"
+                        @click:append="copy(device.path_by_hardware)" />
+                </v-col>
+            </v-row>
+        </v-card-text>
+    </v-card>
 </template>
 
 <script lang="ts">
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { SerialDevice } from '@/components/dialogs/DevicesDialogSerial.vue'
+import { mdiContentCopy } from '@mdi/js'
 
 @Component
 export default class DevicesDialogSerialDevice extends Mixins(BaseMixin) {
-    @Prop({ type: Object, required: true }) device!: SerialDevice
-
-    get name() {
-        return this.device.device_name
-    }
-
-    get filteredKeys() {
-        const hiddenKeys = ['device_name']
-        let keys = Object.keys(this.device)
+    mdiContentCopy = mdiContentCopy
 
-        // filter hidden keys
-        keys = keys.filter((key) => !hiddenKeys.includes(key))
-
-        // filter empty values
-        //@ts-ignore
-        keys = keys.filter((key) => this.device[key])
+    @Prop({ type: Object, required: true }) device!: SerialDevice
 
-        return keys
+    copy(text: string) {
+        navigator.clipboard.writeText(text)
     }
 }
 </script>
diff --git a/src/locales/en.json b/src/locales/en.json
index 5c5752dea..a6973b514 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -147,8 +147,13 @@
         "SetupConsole": "Setup Console"
     },
     "DevicesDialog": {
+        "ClickRefresh": "Click on the refresh button to search for devices.",
+        "DevicePath": "Device path",
         "Headline": "Devices",
         "HideSystemEntries": "Hide system entries",
+        "NoDeviceFound": "No device found. Please check the connection and click on the refresh button.",
+        "PathByHardware": "Path by hardware",
+        "PathById": "Path by ID",
         "Refresh": "refresh"
     },
     "Dialogs": {

From 2f108a59c2df024ce3d9e4e8247d300faa0f9262 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Fri, 26 Jan 2024 19:58:18 +0100
Subject: [PATCH 03/21] refactor: refactor tabs and add can devices

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/DevicesDialog.vue    | 60 ++++++++++-------
 src/components/dialogs/DevicesDialogCan.vue | 71 +++++++++++++++++++++
 src/components/dialogs/DevicesDialogUsb.vue | 46 +++++++------
 3 files changed, 134 insertions(+), 43 deletions(-)
 create mode 100644 src/components/dialogs/DevicesDialogCan.vue

diff --git a/src/components/dialogs/DevicesDialog.vue b/src/components/dialogs/DevicesDialog.vue
index e93f563ea..191311961 100644
--- a/src/components/dialogs/DevicesDialog.vue
+++ b/src/components/dialogs/DevicesDialog.vue
@@ -30,18 +30,22 @@
                 </v-btn>
             </template>
             <v-tabs v-model="tab" fixed-tabs>
-                <v-tab v-for="tab in tabs" :key="tab.name">{{ tab.content }}</v-tab>
+                <v-tab v-for="tab in tabs" :key="tab.tab">{{ tab.title }}</v-tab>
             </v-tabs>
-            <v-tabs-items v-model="tab">
-                <v-tab-item key="usb">
-                    <devices-dialog-usb :hide-system-entries="hideSystemEntries" />
-                </v-tab-item>
-                <v-tab-item key="serial">
-                    <devices-dialog-serial :hide-system-entries="hideSystemEntries" />
-                </v-tab-item>
-                <v-tab-item key="can">can</v-tab-item>
-                <v-tab-item key="video">video</v-tab-item>
-            </v-tabs-items>
+            <overlay-scrollbars style="max-height: 400px; overflow-x: hidden">
+                <v-tabs-items v-model="tab">
+                    <v-tab-item v-for="canInterface in canInterfaces" :key="canInterface">
+                        <devices-dialog-can :hide-system-entries="hideSystemEntries" :name="canInterface" />
+                    </v-tab-item>
+                    <v-tab-item key="serial">
+                        <devices-dialog-serial :hide-system-entries="hideSystemEntries" />
+                    </v-tab-item>
+                    <v-tab-item key="usb">
+                        <devices-dialog-usb :hide-system-entries="hideSystemEntries" />
+                    </v-tab-item>
+                    <v-tab-item key="video">video</v-tab-item>
+                </v-tabs-items>
+            </overlay-scrollbars>
         </panel>
     </v-dialog>
 </template>
@@ -61,31 +65,39 @@ export default class DevicesDialog extends Mixins(BaseMixin) {
     mdiUsb = mdiUsb
     mdiCloseThick = mdiCloseThick
 
-    tab = 'usb'
+    tab = 'serial'
     hideSystemEntries = true
 
     @Prop({ type: Boolean, default: false }) showDialog!: boolean
 
     get tabs() {
-        return [
+        const output: { tab: string; title: string }[] = [
             {
-                name: 'usb',
-                content: 'USB',
+                tab: 'serial',
+                title: 'Serial',
             },
             {
-                name: 'serial',
-                content: 'Serial',
+                tab: 'usb',
+                title: 'USB',
             },
-            // only show CAN, when a device exists
             {
-                name: 'can',
-                content: 'CAN',
-            },
-            {
-                name: 'video',
-                content: 'Video',
+                tab: 'video',
+                title: 'Video',
             },
         ]
+
+        this.canInterfaces.forEach((name) => {
+            output.push({
+                tab: name,
+                title: name.toUpperCase(),
+            })
+        })
+
+        return output.sort((a, b) => a.title.localeCompare(b.title))
+    }
+
+    get canInterfaces() {
+        return Object.keys(this.$store.state.server.system_info?.canbus ?? {})
     }
 
     closePrompt() {
diff --git a/src/components/dialogs/DevicesDialogCan.vue b/src/components/dialogs/DevicesDialogCan.vue
new file mode 100644
index 000000000..144ae5d11
--- /dev/null
+++ b/src/components/dialogs/DevicesDialogCan.vue
@@ -0,0 +1,71 @@
+<template>
+    <overlay-scrollbars style="max-height: 400px; overflow-x: hidden">
+        <v-card-text>
+            <v-row>
+                <v-col class="text-center">
+                    <v-btn :loading="loading" color="primary" @click="refresh">{{ $t('DevicesDialog.Refresh') }}</v-btn>
+                </v-col>
+            </v-row>
+            <v-row v-if="devices.length" class="mt-0">
+                <v-col>
+                    <devices-dialog-usb-device
+                        v-for="device in filteredDevices"
+                        :key="device.usb_location"
+                        :device="device" />
+                </v-col>
+            </v-row>
+        </v-card-text>
+    </overlay-scrollbars>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+
+export interface CanDevice {
+    bus_num: number
+    device_num: number
+    usb_location: string
+    vendor_id: string
+    product_id: string
+    manufacturer?: string
+    product?: string
+    class?: string
+    subclass?: string
+    protocol?: string
+    description?: string
+}
+
+@Component
+export default class DevicesDialogCan extends Mixins(BaseMixin) {
+    devices: CanDevice[] = []
+    loading = false
+
+    @Prop({ type: String, required: true }) name!: string
+    @Prop({ type: Boolean, default: false }) hideSystemEntries!: boolean
+
+    get filteredDevices() {
+        if (!this.hideSystemEntries) return this.devices
+
+        return this.devices.filter((device) => {
+            if (device.class === 'Hub') return false
+
+            return true
+        })
+    }
+
+    async refresh() {
+        this.loading = true
+
+        this.devices = await fetch(`${this.apiUrl}/machine/peripherals/canbus?interface=${this.name}`)
+            .then((res) => res.json())
+            .then((res) => res.result ?? [])
+
+        window.console.log(this.devices)
+
+        this.loading = false
+    }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/dialogs/DevicesDialogUsb.vue b/src/components/dialogs/DevicesDialogUsb.vue
index 3fb1318bd..5c1b2b611 100644
--- a/src/components/dialogs/DevicesDialogUsb.vue
+++ b/src/components/dialogs/DevicesDialogUsb.vue
@@ -1,21 +1,29 @@
 <template>
-    <overlay-scrollbars style="max-height: 400px; overflow-x: hidden">
-        <v-card-text>
-            <v-row>
-                <v-col class="text-center">
-                    <v-btn :loading="loading" color="primary" @click="refresh">{{ $t('DevicesDialog.Refresh') }}</v-btn>
-                </v-col>
-            </v-row>
-            <v-row v-if="devices.length" class="mt-0">
-                <v-col>
-                    <devices-dialog-usb-device
-                        v-for="device in filteredDevices"
-                        :key="device.usb_location"
-                        :device="device" />
-                </v-col>
-            </v-row>
-        </v-card-text>
-    </overlay-scrollbars>
+    <v-card-text>
+        <v-row>
+            <v-col class="text-center">
+                <v-btn :loading="loading" color="primary" @click="refresh">{{ $t('DevicesDialog.Refresh') }}</v-btn>
+            </v-col>
+        </v-row>
+        <v-row v-if="filteredDevices.length" class="mt-0">
+            <v-col>
+                <devices-dialog-usb-device
+                    v-for="device in filteredDevices"
+                    :key="device.usb_location"
+                    :device="device" />
+            </v-col>
+        </v-row>
+        <v-row v-else-if="loaded" class="mt-0">
+            <v-col class="col-8 mx-auto">
+                <p class="text-center text--disabled mb-0">{{ $t('DevicesDialog.NoDeviceFound') }}</p>
+            </v-col>
+        </v-row>
+        <v-row v-else class="mt-0">
+            <v-col class="col-8 mx-auto">
+                <p class="text-center text--disabled mb-0">{{ $t('DevicesDialog.ClickRefresh') }}</p>
+            </v-col>
+        </v-row>
+    </v-card-text>
 </template>
 
 <script lang="ts">
@@ -40,6 +48,7 @@ export interface UsbDevice {
 export default class DevicesDialogUsb extends Mixins(BaseMixin) {
     devices: UsbDevice[] = []
     loading = false
+    loaded = false
 
     @Prop({ type: Boolean, default: false }) hideSystemEntries!: boolean
 
@@ -60,9 +69,8 @@ export default class DevicesDialogUsb extends Mixins(BaseMixin) {
             .then((res) => res.json())
             .then((res) => res.result?.usb_devices ?? [])
 
-        window.console.log(this.devices)
-
         this.loading = false
+        this.loaded = true
     }
 }
 </script>

From 9ffcf357643186d114eb5b6e9b5044f203a125ce Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Fri, 26 Jan 2024 22:49:24 +0100
Subject: [PATCH 04/21] feat: add video devices

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/DevicesDialog.vue      |  4 +-
 src/components/dialogs/DevicesDialogVideo.vue | 94 +++++++++++++++++++
 .../DevicesDialogVideoDeviceLibcamera.vue     | 47 ++++++++++
 .../dialogs/DevicesDialogVideoDeviceV4l2.vue  | 69 ++++++++++++++
 4 files changed, 213 insertions(+), 1 deletion(-)
 create mode 100644 src/components/dialogs/DevicesDialogVideo.vue
 create mode 100644 src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue
 create mode 100644 src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue

diff --git a/src/components/dialogs/DevicesDialog.vue b/src/components/dialogs/DevicesDialog.vue
index 191311961..10555aaeb 100644
--- a/src/components/dialogs/DevicesDialog.vue
+++ b/src/components/dialogs/DevicesDialog.vue
@@ -43,7 +43,9 @@
                     <v-tab-item key="usb">
                         <devices-dialog-usb :hide-system-entries="hideSystemEntries" />
                     </v-tab-item>
-                    <v-tab-item key="video">video</v-tab-item>
+                    <v-tab-item key="video">
+                        <devices-dialog-video :hide-system-entries="hideSystemEntries" />
+                    </v-tab-item>
                 </v-tabs-items>
             </overlay-scrollbars>
         </panel>
diff --git a/src/components/dialogs/DevicesDialogVideo.vue b/src/components/dialogs/DevicesDialogVideo.vue
new file mode 100644
index 000000000..29dbdd90d
--- /dev/null
+++ b/src/components/dialogs/DevicesDialogVideo.vue
@@ -0,0 +1,94 @@
+<template>
+    <v-card-text>
+        <v-row>
+            <v-col class="text-center">
+                <v-btn :loading="loading" color="primary" @click="refresh">{{ $t('DevicesDialog.Refresh') }}</v-btn>
+            </v-col>
+        </v-row>
+        <v-row v-if="libcameraDevices.length || filteredV4l2Devices.length" class="mt-0">
+            <v-col>
+                <devices-dialog-video-device-libcamera
+                    v-for="device in libcameraDevices"
+                    :key="device.libcamera_id"
+                    :device="device" />
+                <devices-dialog-video-device-v4l2
+                    v-for="device in filteredV4l2Devices"
+                    :key="device.hardware_bus"
+                    :device="device" />
+            </v-col>
+        </v-row>
+        <v-row v-else-if="loaded" class="mt-0">
+            <v-col class="col-8 mx-auto">
+                <p class="text-center text--disabled mb-0">{{ $t('DevicesDialog.NoDeviceFound') }}</p>
+            </v-col>
+        </v-row>
+        <v-row v-else class="mt-0">
+            <v-col class="col-8 mx-auto">
+                <p class="text-center text--disabled mb-0">{{ $t('DevicesDialog.ClickRefresh') }}</p>
+            </v-col>
+        </v-row>
+    </v-card-text>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+
+export interface V4l2Device {
+    device_name: string
+    device_path: string
+    camera_name: string
+    driver_name: string
+    alt_name: string | null
+    hardware_bus: string
+    capabilities: string
+    version: string
+    path_by_hardware: string | null
+    path_by_id: string | null
+    usb_location: string | null
+}
+
+export interface LibcameraDevice {
+    libcamera_id: string
+    model: string
+    modes: { format: string; resolutions: string[] }[]
+}
+
+@Component
+export default class DevicesDialogVideo extends Mixins(BaseMixin) {
+    v4l2Devices: V4l2Device[] = []
+    libcameraDevices: LibcameraDevice[] = []
+    loading = false
+    loaded = false
+
+    @Prop({ type: Boolean, default: false }) hideSystemEntries!: boolean
+
+    get filteredV4l2Devices() {
+        return this.v4l2Devices.filter((device) => {
+            if (this.hideSystemEntries) {
+                return !device.hardware_bus.startsWith('platform:')
+            }
+
+            return true
+        })
+    }
+
+    async refresh() {
+        this.loading = true
+
+        const result = await fetch(this.apiUrl + '/machine/peripherals/video')
+            .then((res) => res.json())
+            .then((res) => res.result ?? {})
+
+        this.v4l2Devices = result.v4l2_devices ?? []
+        this.libcameraDevices = result.libcamera_devices ?? []
+
+        window.console.log(result)
+
+        this.loading = false
+        this.loaded = true
+    }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue b/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue
new file mode 100644
index 000000000..98f1c3c31
--- /dev/null
+++ b/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue
@@ -0,0 +1,47 @@
+<template>
+    <v-card outlined class="mt-3 w-100">
+        <v-list-item three-line>
+            <v-list-item-content>
+                <div class="text-overline mb-2 d-flex flex-row">Libcamera</div>
+                <v-list-item-title class="text-h5 mb-0">{{ device.model }}</v-list-item-title>
+            </v-list-item-content>
+        </v-list-item>
+        <v-card-text>
+            <v-row class="mb-1">
+                <v-col>
+                    <v-text-field
+                        readonly
+                        dense
+                        outlined
+                        hide-details
+                        :append-icon="mdiContentCopy"
+                        :label="$t('DevicesDialog.LibcameraId')"
+                        :value="device.libcamera_id"
+                        @click:append="copy(device.libcamera_id)" />
+                </v-col>
+            </v-row>
+            <v-row v-for="mode in device.modes" :key="mode.format" class="mt-0">
+                <v-col class="py-2" cols="4">{{ mode.format }}</v-col>
+                <v-col class="py-2">{{ mode.resolutions.join(', ') }}</v-col>
+            </v-row>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiContentCopy } from '@mdi/js'
+import { LibcameraDevice } from '@/components/dialogs/DevicesDialogVideo.vue'
+
+@Component
+export default class DevicesDialogVideoDeviceLibcamera extends Mixins(BaseMixin) {
+    mdiContentCopy = mdiContentCopy
+
+    @Prop({ type: Object, required: true }) device!: LibcameraDevice
+
+    copy(text: string) {
+        navigator.clipboard.writeText(text)
+    }
+}
+</script>
diff --git a/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue b/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue
new file mode 100644
index 000000000..2a95b7d59
--- /dev/null
+++ b/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue
@@ -0,0 +1,69 @@
+<template>
+    <v-card outlined class="mt-3 w-100">
+        <v-list-item three-line>
+            <v-list-item-content>
+                <div class="text-overline mb-2 d-flex flex-row">V4L2</div>
+                <v-list-item-title class="text-h5 mb-0">{{ device.camera_name }}</v-list-item-title>
+            </v-list-item-content>
+        </v-list-item>
+        <v-card-text>
+            <v-row>
+                <v-col>
+                    <v-text-field
+                        readonly
+                        dense
+                        outlined
+                        hide-details
+                        :append-icon="mdiContentCopy"
+                        :label="$t('DevicesDialog.DevicePath')"
+                        :value="device.device_path"
+                        @click:append="copy(device.device_path)" />
+                </v-col>
+            </v-row>
+            <v-row v-if="device.path_by_id">
+                <v-col>
+                    <v-text-field
+                        readonly
+                        dense
+                        outlined
+                        hide-details
+                        :append-icon="mdiContentCopy"
+                        :label="$t('DevicesDialog.PathById')"
+                        :value="device.path_by_id"
+                        @click:append="copy(device.path_by_id)" />
+                </v-col>
+            </v-row>
+            <v-row v-if="device.path_by_hardware">
+                <v-col>
+                    <v-text-field
+                        readonly
+                        dense
+                        outlined
+                        hide-details
+                        :append-icon="mdiContentCopy"
+                        :label="$t('DevicesDialog.PathByHardware')"
+                        :value="device.path_by_hardware"
+                        @click:append="copy(device.path_by_hardware)" />
+                </v-col>
+            </v-row>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiContentCopy } from '@mdi/js'
+import { V4l2Device } from '@/components/dialogs/DevicesDialogVideo.vue'
+
+@Component
+export default class DevicesDialogVideoDeviceLibcamera extends Mixins(BaseMixin) {
+    mdiContentCopy = mdiContentCopy
+
+    @Prop({ type: Object, required: true }) device!: V4l2Device
+
+    copy(text: string) {
+        navigator.clipboard.writeText(text)
+    }
+}
+</script>

From 6493d13f916ca5dd1b425da2184cf94d3e7f4567 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Fri, 26 Jan 2024 23:21:48 +0100
Subject: [PATCH 05/21] feat: add filter to show csi cam, when libcamera array
 is empty

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/DevicesDialogVideo.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/dialogs/DevicesDialogVideo.vue b/src/components/dialogs/DevicesDialogVideo.vue
index 29dbdd90d..6c7f191fe 100644
--- a/src/components/dialogs/DevicesDialogVideo.vue
+++ b/src/components/dialogs/DevicesDialogVideo.vue
@@ -66,6 +66,8 @@ export default class DevicesDialogVideo extends Mixins(BaseMixin) {
     get filteredV4l2Devices() {
         return this.v4l2Devices.filter((device) => {
             if (this.hideSystemEntries) {
+                if (this.libcameraDevices.length === 0 && device.hardware_bus.endsWith('csi')) return true
+
                 return !device.hardware_bus.startsWith('platform:')
             }
 
@@ -83,8 +85,6 @@ export default class DevicesDialogVideo extends Mixins(BaseMixin) {
         this.v4l2Devices = result.v4l2_devices ?? []
         this.libcameraDevices = result.libcamera_devices ?? []
 
-        window.console.log(result)
-
         this.loading = false
         this.loaded = true
     }

From 1facbd4f66ea9b3908791f47a2950ac253cab01a Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 28 Jan 2024 21:07:41 +0100
Subject: [PATCH 06/21] fix: fix identical keys for webcams

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/DevicesDialogVideo.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/dialogs/DevicesDialogVideo.vue b/src/components/dialogs/DevicesDialogVideo.vue
index 6c7f191fe..b40d8ec92 100644
--- a/src/components/dialogs/DevicesDialogVideo.vue
+++ b/src/components/dialogs/DevicesDialogVideo.vue
@@ -8,12 +8,12 @@
         <v-row v-if="libcameraDevices.length || filteredV4l2Devices.length" class="mt-0">
             <v-col>
                 <devices-dialog-video-device-libcamera
-                    v-for="device in libcameraDevices"
-                    :key="device.libcamera_id"
+                    v-for="(device, index) in libcameraDevices"
+                    :key="`libcamera_${device.libcamera_id}_${index}`"
                     :device="device" />
                 <devices-dialog-video-device-v4l2
-                    v-for="device in filteredV4l2Devices"
-                    :key="device.hardware_bus"
+                    v-for="(device, index) in filteredV4l2Devices"
+                    :key="`v4l2_${device.hardware_bus}_${index}`"
                     :device="device" />
             </v-col>
         </v-row>

From af1edd8a11bcb30436c6622df144eb6343392329 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 28 Jan 2024 21:08:22 +0100
Subject: [PATCH 07/21] feat: display alt_name in v4l2 webcams when it is
 different to camera_name

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue b/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue
index 2a95b7d59..1ca543732 100644
--- a/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue
+++ b/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue
@@ -4,6 +4,7 @@
             <v-list-item-content>
                 <div class="text-overline mb-2 d-flex flex-row">V4L2</div>
                 <v-list-item-title class="text-h5 mb-0">{{ device.camera_name }}</v-list-item-title>
+                <v-list-item-subtitle v-if="show_alt_name">{{ device.alt_name }}</v-list-item-subtitle>
             </v-list-item-content>
         </v-list-item>
         <v-card-text>
@@ -62,6 +63,12 @@ export default class DevicesDialogVideoDeviceLibcamera extends Mixins(BaseMixin)
 
     @Prop({ type: Object, required: true }) device!: V4l2Device
 
+    get show_alt_name() {
+        if (this.device.alt_name === null) return false
+
+        return this.device.alt_name !== this.device.camera_name
+    }
+
     copy(text: string) {
         navigator.clipboard.writeText(text)
     }

From 3628baff0373d2c4449dd0ceda2117bb403e1b49 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 31 Jan 2024 21:05:20 +0100
Subject: [PATCH 08/21] refactor: refactor format and resolution output for
 libcameras

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../DevicesDialogVideoDeviceLibcamera.vue     | 33 ++++++++++++++++---
 src/locales/en.json                           |  4 ++-
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue b/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue
index 98f1c3c31..4066a65c8 100644
--- a/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue
+++ b/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue
@@ -20,10 +20,22 @@
                         @click:append="copy(device.libcamera_id)" />
                 </v-col>
             </v-row>
-            <v-row v-for="mode in device.modes" :key="mode.format" class="mt-0">
-                <v-col class="py-2" cols="4">{{ mode.format }}</v-col>
-                <v-col class="py-2">{{ mode.resolutions.join(', ') }}</v-col>
-            </v-row>
+            <template v-if="identicalResolutions">
+                <v-row>
+                    <v-col class="py-2" cols="4">{{ $t('DevicesDialog.Formats') }}</v-col>
+                    <v-col class="py-2">{{ formats }}</v-col>
+                </v-row>
+                <v-row>
+                    <v-col class="py-2" cols="4">{{ $t('DevicesDialog.Resolutions') }}</v-col>
+                    <v-col class="py-2">{{ resolutions }}</v-col>
+                </v-row>
+            </template>
+            <template v-else>
+                <v-row v-for="mode in device.modes" :key="mode.format" class="mt-0">
+                    <v-col class="py-2" cols="4">{{ mode.format }}</v-col>
+                    <v-col class="py-2">{{ mode.resolutions.join(', ') }}</v-col>
+                </v-row>
+            </template>
         </v-card-text>
     </v-card>
 </template>
@@ -40,6 +52,19 @@ export default class DevicesDialogVideoDeviceLibcamera extends Mixins(BaseMixin)
 
     @Prop({ type: Object, required: true }) device!: LibcameraDevice
 
+    get identicalResolutions() {
+        const resolutions = this.device.modes.map((mode) => mode.resolutions.join(','))
+        return resolutions.every((resolution) => resolution === resolutions[0])
+    }
+
+    get resolutions() {
+        return this.device.modes[0].resolutions.join(', ')
+    }
+
+    get formats() {
+        return this.device.modes.map((mode) => mode.format).join(', ')
+    }
+
     copy(text: string) {
         navigator.clipboard.writeText(text)
     }
diff --git a/src/locales/en.json b/src/locales/en.json
index 9216f95e2..c007557d0 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -149,12 +149,14 @@
     "DevicesDialog": {
         "ClickRefresh": "Click on the refresh button to search for devices.",
         "DevicePath": "Device path",
+        "Formats": "Formats",
         "Headline": "Devices",
         "HideSystemEntries": "Hide system entries",
         "NoDeviceFound": "No device found. Please check the connection and click on the refresh button.",
         "PathByHardware": "Path by hardware",
         "PathById": "Path by ID",
-        "Refresh": "refresh"
+        "Refresh": "refresh",
+        "Resolutions": "Resolutions"
     },
     "Dialogs": {
         "StartPrint": {

From d5a76b30656993543eef091b3e520a87563b0bc1 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 31 Jan 2024 21:06:55 +0100
Subject: [PATCH 09/21] locale: add LibcameraId to device path locale

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/locales/en.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/locales/en.json b/src/locales/en.json
index c007557d0..8128eb008 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -152,6 +152,7 @@
         "Formats": "Formats",
         "Headline": "Devices",
         "HideSystemEntries": "Hide system entries",
+        "LibcameraId": "Libcamera ID",
         "NoDeviceFound": "No device found. Please check the connection and click on the refresh button.",
         "PathByHardware": "Path by hardware",
         "PathById": "Path by ID",

From 72a97036b35d0137efdd8c063358413acce69b7a Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 31 Jan 2024 21:07:43 +0100
Subject: [PATCH 10/21] fix: fix margin between formats and resolutions

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue b/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue
index 4066a65c8..f6e0a5424 100644
--- a/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue
+++ b/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue
@@ -21,11 +21,11 @@
                 </v-col>
             </v-row>
             <template v-if="identicalResolutions">
-                <v-row>
+                <v-row class="mt-0">
                     <v-col class="py-2" cols="4">{{ $t('DevicesDialog.Formats') }}</v-col>
                     <v-col class="py-2">{{ formats }}</v-col>
                 </v-row>
-                <v-row>
+                <v-row class="mt-0">
                     <v-col class="py-2" cols="4">{{ $t('DevicesDialog.Resolutions') }}</v-col>
                     <v-col class="py-2">{{ resolutions }}</v-col>
                 </v-row>

From 3d9aeb45c274c0d1d18220142a633702030d8bb1 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 31 Jan 2024 23:10:10 +0100
Subject: [PATCH 11/21] fix: fix copy to clipboard function

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../dialogs/DevicesDialogSerialDevice.vue     |  3 ++-
 .../DevicesDialogVideoDeviceLibcamera.vue     |  3 ++-
 .../dialogs/DevicesDialogVideoDeviceV4l2.vue  |  3 ++-
 src/plugins/helpers.ts                        | 19 +++++++++++++++++++
 4 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/dialogs/DevicesDialogSerialDevice.vue b/src/components/dialogs/DevicesDialogSerialDevice.vue
index 0001aaac2..aab768347 100644
--- a/src/components/dialogs/DevicesDialogSerialDevice.vue
+++ b/src/components/dialogs/DevicesDialogSerialDevice.vue
@@ -59,6 +59,7 @@ import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { SerialDevice } from '@/components/dialogs/DevicesDialogSerial.vue'
 import { mdiContentCopy } from '@mdi/js'
+import { copyToClipboard } from '@/plugins/helpers'
 
 @Component
 export default class DevicesDialogSerialDevice extends Mixins(BaseMixin) {
@@ -67,7 +68,7 @@ export default class DevicesDialogSerialDevice extends Mixins(BaseMixin) {
     @Prop({ type: Object, required: true }) device!: SerialDevice
 
     copy(text: string) {
-        navigator.clipboard.writeText(text)
+        copyToClipboard(text)
     }
 }
 </script>
diff --git a/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue b/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue
index f6e0a5424..9042fd19e 100644
--- a/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue
+++ b/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue
@@ -45,6 +45,7 @@ import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { mdiContentCopy } from '@mdi/js'
 import { LibcameraDevice } from '@/components/dialogs/DevicesDialogVideo.vue'
+import { copyToClipboard } from '@/plugins/helpers'
 
 @Component
 export default class DevicesDialogVideoDeviceLibcamera extends Mixins(BaseMixin) {
@@ -66,7 +67,7 @@ export default class DevicesDialogVideoDeviceLibcamera extends Mixins(BaseMixin)
     }
 
     copy(text: string) {
-        navigator.clipboard.writeText(text)
+        copyToClipboard(text)
     }
 }
 </script>
diff --git a/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue b/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue
index 1ca543732..d2127c3ba 100644
--- a/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue
+++ b/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue
@@ -56,6 +56,7 @@ import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { mdiContentCopy } from '@mdi/js'
 import { V4l2Device } from '@/components/dialogs/DevicesDialogVideo.vue'
+import { copyToClipboard } from '@/plugins/helpers'
 
 @Component
 export default class DevicesDialogVideoDeviceLibcamera extends Mixins(BaseMixin) {
@@ -70,7 +71,7 @@ export default class DevicesDialogVideoDeviceLibcamera extends Mixins(BaseMixin)
     }
 
     copy(text: string) {
-        navigator.clipboard.writeText(text)
+        copyToClipboard(text)
     }
 }
 </script>
diff --git a/src/plugins/helpers.ts b/src/plugins/helpers.ts
index 0641ec209..117dc8511 100644
--- a/src/plugins/helpers.ts
+++ b/src/plugins/helpers.ts
@@ -248,3 +248,22 @@ export function windowBeforeUnloadFunction(e: BeforeUnloadEvent) {
     e.preventDefault()
     e.returnValue = ''
 }
+
+export function copyToClipboard(text: string) {
+    if (navigator.clipboard) {
+        navigator.clipboard.writeText(text)
+        return
+    }
+
+    const textArea = document.createElement('textarea')
+    textArea.value = text
+    document.body.appendChild(textArea)
+    textArea.focus()
+    textArea.select()
+    try {
+        document.execCommand('copy')
+    } catch (err) {
+        console.error('Unable to copy to clipboard', err)
+    }
+    document.body.removeChild(textArea)
+}

From a8c098a09a956236a60664433b46d6c41d649fd7 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 1 Feb 2024 19:53:39 +0100
Subject: [PATCH 12/21] chore: update moonraker min version to v0.8.0-306

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/store/variables.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/store/variables.ts b/src/store/variables.ts
index 8afa67f6f..f3676d781 100644
--- a/src/store/variables.ts
+++ b/src/store/variables.ts
@@ -4,7 +4,7 @@ export const defaultPrimaryColor = '#2196f3'
 export const defaultBigThumbnailBackground = '#1e1e1e'
 
 export const minKlipperVersion = 'v0.11.0-257'
-export const minMoonrakerVersion = 'v0.8.0-137'
+export const minMoonrakerVersion = 'v0.8.0-306'
 export const minBrowserVersions = [{ name: 'safari', version: '16.5.2' }]
 
 export const colorArray = ['#F44336', '#8e379d', '#03DAC5', '#3F51B5', '#ffde03', '#009688', '#E91E63']

From 17bb02d781a373e017fcacd278122050f5937e1b Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 1 Feb 2024 22:00:04 +0100
Subject: [PATCH 13/21] feat: add CAN support

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/DevicesDialogCan.vue   | 49 ++++++++-----------
 .../dialogs/DevicesDialogCanDevice.vue        | 45 +++++++++++++++++
 2 files changed, 65 insertions(+), 29 deletions(-)
 create mode 100644 src/components/dialogs/DevicesDialogCanDevice.vue

diff --git a/src/components/dialogs/DevicesDialogCan.vue b/src/components/dialogs/DevicesDialogCan.vue
index 144ae5d11..254dd4fe4 100644
--- a/src/components/dialogs/DevicesDialogCan.vue
+++ b/src/components/dialogs/DevicesDialogCan.vue
@@ -8,10 +8,17 @@
             </v-row>
             <v-row v-if="devices.length" class="mt-0">
                 <v-col>
-                    <devices-dialog-usb-device
-                        v-for="device in filteredDevices"
-                        :key="device.usb_location"
-                        :device="device" />
+                    <devices-dialog-can-device v-for="device in devices" :key="device.uuid" :device="device" />
+                </v-col>
+            </v-row>
+            <v-row v-else-if="loaded" class="mt-0">
+                <v-col class="col-8 mx-auto">
+                    <p class="text-center text--disabled mb-0">{{ $t('DevicesDialog.NoDeviceFound') }}</p>
+                </v-col>
+            </v-row>
+            <v-row v-else class="mt-0">
+                <v-col class="col-8 mx-auto">
+                    <p class="text-center text--disabled mb-0">{{ $t('DevicesDialog.ClickRefresh') }}</p>
                 </v-col>
             </v-row>
         </v-card-text>
@@ -21,49 +28,33 @@
 <script lang="ts">
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
+import DevicesDialogCanDevice from '@/components/dialogs/DevicesDialogCanDevice.vue'
 
 export interface CanDevice {
-    bus_num: number
-    device_num: number
-    usb_location: string
-    vendor_id: string
-    product_id: string
-    manufacturer?: string
-    product?: string
-    class?: string
-    subclass?: string
-    protocol?: string
-    description?: string
+    application: string
+    uuid: string
 }
 
-@Component
+@Component({
+    components: { DevicesDialogCanDevice },
+})
 export default class DevicesDialogCan extends Mixins(BaseMixin) {
     devices: CanDevice[] = []
     loading = false
+    loaded = false
 
     @Prop({ type: String, required: true }) name!: string
     @Prop({ type: Boolean, default: false }) hideSystemEntries!: boolean
 
-    get filteredDevices() {
-        if (!this.hideSystemEntries) return this.devices
-
-        return this.devices.filter((device) => {
-            if (device.class === 'Hub') return false
-
-            return true
-        })
-    }
-
     async refresh() {
         this.loading = true
 
         this.devices = await fetch(`${this.apiUrl}/machine/peripherals/canbus?interface=${this.name}`)
             .then((res) => res.json())
-            .then((res) => res.result ?? [])
-
-        window.console.log(this.devices)
+            .then((res) => res.result.can_uuids ?? [])
 
         this.loading = false
+        this.loaded = true
     }
 }
 </script>
diff --git a/src/components/dialogs/DevicesDialogCanDevice.vue b/src/components/dialogs/DevicesDialogCanDevice.vue
new file mode 100644
index 000000000..96a5e37cb
--- /dev/null
+++ b/src/components/dialogs/DevicesDialogCanDevice.vue
@@ -0,0 +1,45 @@
+<template>
+    <v-card outlined class="mt-3 w-100">
+        <v-card-text>
+            <v-row>
+                <v-col>
+                    <div class="text-overline mb-2 d-flex flex-row">
+                        <span>{{ device.application }}</span>
+                    </div>
+                </v-col>
+            </v-row>
+            <v-row class="mt-0">
+                <v-col>
+                    <v-text-field
+                        readonly
+                        dense
+                        outlined
+                        hide-details
+                        :append-icon="mdiContentCopy"
+                        label="UUID"
+                        :value="device.uuid"
+                        @click:append="copy(device.uuid)" />
+                </v-col>
+            </v-row>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiContentCopy } from '@mdi/js'
+import { copyToClipboard } from '@/plugins/helpers'
+import { CanDevice } from '@/components/dialogs/DevicesDialogCan.vue'
+
+@Component
+export default class DevicesDialogCanDevice extends Mixins(BaseMixin) {
+    mdiContentCopy = mdiContentCopy
+
+    @Prop({ type: Object, required: true }) device!: CanDevice
+
+    copy(text: string) {
+        copyToClipboard(text)
+    }
+}
+</script>

From e2632a411036def67a6b98fef3b2b4d23e3de52c Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 1 Feb 2024 22:54:35 +0100
Subject: [PATCH 14/21] fix: fix copy to clipboard function

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/plugins/helpers.ts | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/plugins/helpers.ts b/src/plugins/helpers.ts
index 117dc8511..cbd900d31 100644
--- a/src/plugins/helpers.ts
+++ b/src/plugins/helpers.ts
@@ -256,8 +256,16 @@ export function copyToClipboard(text: string) {
     }
 
     const textArea = document.createElement('textarea')
+    let element = document.getElementById('devices-dialog')
+    if (!element) element = document.body
+
     textArea.value = text
-    document.body.appendChild(textArea)
+    textArea.style.position = 'absolute'
+    textArea.style.top = '0'
+    textArea.style.left = '0'
+    textArea.style.zIndex = '100000'
+    textArea.style.opacity = '0'
+    element.appendChild(textArea)
     textArea.focus()
     textArea.select()
     try {
@@ -265,5 +273,5 @@ export function copyToClipboard(text: string) {
     } catch (err) {
         console.error('Unable to copy to clipboard', err)
     }
-    document.body.removeChild(textArea)
+    textArea.remove()
 }

From 9b5466c9d1de8738ec6f74dec5160fd1230efbd8 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Fri, 2 Feb 2024 19:46:28 +0100
Subject: [PATCH 15/21] feat: add warning to can tab

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/DevicesDialogCan.vue | 22 +++++++++++++++++++++
 src/locales/en.json                         |  1 +
 2 files changed, 23 insertions(+)

diff --git a/src/components/dialogs/DevicesDialogCan.vue b/src/components/dialogs/DevicesDialogCan.vue
index 254dd4fe4..39a6dc1c4 100644
--- a/src/components/dialogs/DevicesDialogCan.vue
+++ b/src/components/dialogs/DevicesDialogCan.vue
@@ -21,6 +21,25 @@
                     <p class="text-center text--disabled mb-0">{{ $t('DevicesDialog.ClickRefresh') }}</p>
                 </v-col>
             </v-row>
+            <v-row v-if="devices.length === 0">
+                <v-col>
+                    <v-alert dense outlined type="info" :icon="mdiInformationVariantCircle">
+                        {{ $t('DevicesDialog.CanBusInfo') }}
+                        <v-row class="my-0">
+                            <v-col class="text-center">
+                                <v-btn
+                                    href="https://docs.mainsail.xyz/overview/features/query-devices#can-devices"
+                                    color="info"
+                                    outlined
+                                    text
+                                    small>
+                                    open guide
+                                </v-btn>
+                            </v-col>
+                        </v-row>
+                    </v-alert>
+                </v-col>
+            </v-row>
         </v-card-text>
     </overlay-scrollbars>
 </template>
@@ -29,6 +48,7 @@
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import DevicesDialogCanDevice from '@/components/dialogs/DevicesDialogCanDevice.vue'
+import { mdiInformationVariantCircle } from '@mdi/js'
 
 export interface CanDevice {
     application: string
@@ -39,6 +59,8 @@ export interface CanDevice {
     components: { DevicesDialogCanDevice },
 })
 export default class DevicesDialogCan extends Mixins(BaseMixin) {
+    mdiInformationVariantCircle = mdiInformationVariantCircle
+
     devices: CanDevice[] = []
     loading = false
     loaded = false
diff --git a/src/locales/en.json b/src/locales/en.json
index 8128eb008..d39e80a86 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -147,6 +147,7 @@
         "SetupConsole": "Setup Console"
     },
     "DevicesDialog": {
+        "CanBusInfo": "Only unassigned nodes can be detected. It’s recommended to have only one unassigned device connected to the can bus to avoid communication issues. For more details, please click on the link:",
         "ClickRefresh": "Click on the refresh button to search for devices.",
         "DevicePath": "Device path",
         "Formats": "Formats",

From 5c35ecc59b7358a1219f1a740901c6ad34d6fe0b Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 4 Feb 2024 15:36:55 +0100
Subject: [PATCH 16/21] feat: add format & resolutions to V4L2 video devices

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/DevicesDialogVideo.vue |  1 +
 .../DevicesDialogVideoDeviceLibcamera.vue     |  4 +--
 .../dialogs/DevicesDialogVideoDeviceV4l2.vue  | 35 ++++++++++++++++++-
 src/plugins/helpers.ts                        |  7 ++++
 4 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/src/components/dialogs/DevicesDialogVideo.vue b/src/components/dialogs/DevicesDialogVideo.vue
index b40d8ec92..e52d30de7 100644
--- a/src/components/dialogs/DevicesDialogVideo.vue
+++ b/src/components/dialogs/DevicesDialogVideo.vue
@@ -46,6 +46,7 @@ export interface V4l2Device {
     path_by_hardware: string | null
     path_by_id: string | null
     usb_location: string | null
+    modes: { description: string; format: string; flags: string[]; resolutions: string[] }[]
 }
 
 export interface LibcameraDevice {
diff --git a/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue b/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue
index 9042fd19e..2cdc3470e 100644
--- a/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue
+++ b/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue
@@ -45,7 +45,7 @@ import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { mdiContentCopy } from '@mdi/js'
 import { LibcameraDevice } from '@/components/dialogs/DevicesDialogVideo.vue'
-import { copyToClipboard } from '@/plugins/helpers'
+import { copyToClipboard, sortResolutions } from '@/plugins/helpers'
 
 @Component
 export default class DevicesDialogVideoDeviceLibcamera extends Mixins(BaseMixin) {
@@ -54,7 +54,7 @@ export default class DevicesDialogVideoDeviceLibcamera extends Mixins(BaseMixin)
     @Prop({ type: Object, required: true }) device!: LibcameraDevice
 
     get identicalResolutions() {
-        const resolutions = this.device.modes.map((mode) => mode.resolutions.join(','))
+        const resolutions = this.device.modes.map((mode) => mode.resolutions.sort(sortResolutions).join(','))
         return resolutions.every((resolution) => resolution === resolutions[0])
     }
 
diff --git a/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue b/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue
index d2127c3ba..242bb5255 100644
--- a/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue
+++ b/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue
@@ -47,6 +47,26 @@
                         @click:append="copy(device.path_by_hardware)" />
                 </v-col>
             </v-row>
+            <template v-if="identicalResolutions">
+                <v-row class="mt-0">
+                    <v-col class="py-2" cols="4">{{ $t('DevicesDialog.Formats') }}</v-col>
+                    <v-col class="py-2">{{ formats }}</v-col>
+                </v-row>
+                <v-row class="mt-0">
+                    <v-col class="py-2" cols="4">{{ $t('DevicesDialog.Resolutions') }}</v-col>
+                    <v-col class="py-2">{{ resolutions }}</v-col>
+                </v-row>
+            </template>
+            <template v-else>
+                <v-row v-for="mode in device.modes" :key="mode.format" class="mt-0">
+                    <v-col class="py-2" cols="4">
+                        {{ mode.description }}
+                        <br />
+                        <small>{{ mode.format }}</small>
+                    </v-col>
+                    <v-col class="py-2">{{ mode.resolutions.join(', ') }}</v-col>
+                </v-row>
+            </template>
         </v-card-text>
     </v-card>
 </template>
@@ -56,7 +76,7 @@ import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { mdiContentCopy } from '@mdi/js'
 import { V4l2Device } from '@/components/dialogs/DevicesDialogVideo.vue'
-import { copyToClipboard } from '@/plugins/helpers'
+import { copyToClipboard, sortResolutions } from '@/plugins/helpers'
 
 @Component
 export default class DevicesDialogVideoDeviceLibcamera extends Mixins(BaseMixin) {
@@ -64,6 +84,19 @@ export default class DevicesDialogVideoDeviceLibcamera extends Mixins(BaseMixin)
 
     @Prop({ type: Object, required: true }) device!: V4l2Device
 
+    get identicalResolutions() {
+        const resolutions = this.device.modes.map((mode) => mode.resolutions.sort(sortResolutions).join(','))
+        return resolutions.every((resolution) => resolution === resolutions[0])
+    }
+
+    get resolutions() {
+        return this.device.modes[0].resolutions.join(', ')
+    }
+
+    get formats() {
+        return this.device.modes.map((mode) => `${mode.description} (${mode.format})`).join(', ')
+    }
+
     get show_alt_name() {
         if (this.device.alt_name === null) return false
 
diff --git a/src/plugins/helpers.ts b/src/plugins/helpers.ts
index cbd900d31..8cbd54a94 100644
--- a/src/plugins/helpers.ts
+++ b/src/plugins/helpers.ts
@@ -275,3 +275,10 @@ export function copyToClipboard(text: string) {
     }
     textArea.remove()
 }
+
+export function sortResolutions(a: string, b: string) {
+    const aSplit = parseInt(a.split('x')[0])
+    const bSplit = parseInt(b.split('x')[0])
+
+    return aSplit - bSplit
+}

From 7288dd934ac51ad70d8d7ea3e4d614254dfd0531 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 11 Feb 2024 14:29:18 +0100
Subject: [PATCH 17/21] feat: add tooltip after copy function

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../dialogs/DevicesDialogCanDevice.vue        | 23 ++------
 .../dialogs/DevicesDialogSerialDevice.vue     | 43 +++------------
 .../DevicesDialogVideoDeviceLibcamera.vue     | 24 +++------
 .../dialogs/DevicesDialogVideoDeviceV4l2.vue  | 44 +++-------------
 src/components/inputs/TextfieldWithCopy.vue   | 52 +++++++++++++++++++
 src/locales/en.json                           |  3 ++
 6 files changed, 81 insertions(+), 108 deletions(-)
 create mode 100644 src/components/inputs/TextfieldWithCopy.vue

diff --git a/src/components/dialogs/DevicesDialogCanDevice.vue b/src/components/dialogs/DevicesDialogCanDevice.vue
index 96a5e37cb..163362ce3 100644
--- a/src/components/dialogs/DevicesDialogCanDevice.vue
+++ b/src/components/dialogs/DevicesDialogCanDevice.vue
@@ -10,15 +10,7 @@
             </v-row>
             <v-row class="mt-0">
                 <v-col>
-                    <v-text-field
-                        readonly
-                        dense
-                        outlined
-                        hide-details
-                        :append-icon="mdiContentCopy"
-                        label="UUID"
-                        :value="device.uuid"
-                        @click:append="copy(device.uuid)" />
+                    <textfield-with-copy label="UUID" :value="device.uuid" />
                 </v-col>
             </v-row>
         </v-card-text>
@@ -28,18 +20,13 @@
 <script lang="ts">
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
-import { mdiContentCopy } from '@mdi/js'
-import { copyToClipboard } from '@/plugins/helpers'
 import { CanDevice } from '@/components/dialogs/DevicesDialogCan.vue'
+import TextfieldWithCopy from '@/components/inputs/TextfieldWithCopy.vue'
 
-@Component
+@Component({
+    components: { TextfieldWithCopy },
+})
 export default class DevicesDialogCanDevice extends Mixins(BaseMixin) {
-    mdiContentCopy = mdiContentCopy
-
     @Prop({ type: Object, required: true }) device!: CanDevice
-
-    copy(text: string) {
-        copyToClipboard(text)
-    }
 }
 </script>
diff --git a/src/components/dialogs/DevicesDialogSerialDevice.vue b/src/components/dialogs/DevicesDialogSerialDevice.vue
index aab768347..b3293ee33 100644
--- a/src/components/dialogs/DevicesDialogSerialDevice.vue
+++ b/src/components/dialogs/DevicesDialogSerialDevice.vue
@@ -13,41 +13,17 @@
         <v-card-text>
             <v-row>
                 <v-col>
-                    <v-text-field
-                        readonly
-                        dense
-                        outlined
-                        hide-details
-                        :append-icon="mdiContentCopy"
-                        :label="$t('DevicesDialog.DevicePath')"
-                        :value="device.device_path"
-                        @click:append="copy(device.device_path)" />
+                    <textfield-with-copy :label="$t('DevicesDialog.DevicePath')" :value="device.device_path" />
                 </v-col>
             </v-row>
             <v-row v-if="device.path_by_id ?? false">
                 <v-col>
-                    <v-text-field
-                        readonly
-                        dense
-                        outlined
-                        hide-details
-                        :append-icon="mdiContentCopy"
-                        :label="$t('DevicesDialog.PathById')"
-                        :value="device.path_by_id"
-                        @click:append="copy(device.path_by_id)" />
+                    <textfield-with-copy :label="$t('DevicesDialog.PathById')" :value="device.path_by_id" />
                 </v-col>
             </v-row>
             <v-row v-if="device.path_by_hardware ?? false">
                 <v-col>
-                    <v-text-field
-                        readonly
-                        dense
-                        outlined
-                        hide-details
-                        :append-icon="mdiContentCopy"
-                        :label="$t('DevicesDialog.PathByHardware')"
-                        :value="device.path_by_hardware"
-                        @click:append="copy(device.path_by_hardware)" />
+                    <textfield-with-copy :label="$t('DevicesDialog.PathByHardware')" :value="device.path_by_hardware" />
                 </v-col>
             </v-row>
         </v-card-text>
@@ -58,17 +34,12 @@
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { SerialDevice } from '@/components/dialogs/DevicesDialogSerial.vue'
-import { mdiContentCopy } from '@mdi/js'
-import { copyToClipboard } from '@/plugins/helpers'
+import TextfieldWithCopy from '@/components/inputs/TextfieldWithCopy.vue'
 
-@Component
+@Component({
+    components: { TextfieldWithCopy },
+})
 export default class DevicesDialogSerialDevice extends Mixins(BaseMixin) {
-    mdiContentCopy = mdiContentCopy
-
     @Prop({ type: Object, required: true }) device!: SerialDevice
-
-    copy(text: string) {
-        copyToClipboard(text)
-    }
 }
 </script>
diff --git a/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue b/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue
index 2cdc3470e..22091d0dc 100644
--- a/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue
+++ b/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue
@@ -9,15 +9,7 @@
         <v-card-text>
             <v-row class="mb-1">
                 <v-col>
-                    <v-text-field
-                        readonly
-                        dense
-                        outlined
-                        hide-details
-                        :append-icon="mdiContentCopy"
-                        :label="$t('DevicesDialog.LibcameraId')"
-                        :value="device.libcamera_id"
-                        @click:append="copy(device.libcamera_id)" />
+                    <textfield-with-copy :label="$t('DevicesDialog.LibcameraId')" :value="device.libcamera_id" />
                 </v-col>
             </v-row>
             <template v-if="identicalResolutions">
@@ -43,14 +35,14 @@
 <script lang="ts">
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
-import { mdiContentCopy } from '@mdi/js'
 import { LibcameraDevice } from '@/components/dialogs/DevicesDialogVideo.vue'
-import { copyToClipboard, sortResolutions } from '@/plugins/helpers'
+import { sortResolutions } from '@/plugins/helpers'
+import TextfieldWithCopy from '@/components/inputs/TextfieldWithCopy.vue'
 
-@Component
+@Component({
+    components: { TextfieldWithCopy },
+})
 export default class DevicesDialogVideoDeviceLibcamera extends Mixins(BaseMixin) {
-    mdiContentCopy = mdiContentCopy
-
     @Prop({ type: Object, required: true }) device!: LibcameraDevice
 
     get identicalResolutions() {
@@ -65,9 +57,5 @@ export default class DevicesDialogVideoDeviceLibcamera extends Mixins(BaseMixin)
     get formats() {
         return this.device.modes.map((mode) => mode.format).join(', ')
     }
-
-    copy(text: string) {
-        copyToClipboard(text)
-    }
 }
 </script>
diff --git a/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue b/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue
index 242bb5255..d3ea6bd5e 100644
--- a/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue
+++ b/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue
@@ -10,41 +10,17 @@
         <v-card-text>
             <v-row>
                 <v-col>
-                    <v-text-field
-                        readonly
-                        dense
-                        outlined
-                        hide-details
-                        :append-icon="mdiContentCopy"
-                        :label="$t('DevicesDialog.DevicePath')"
-                        :value="device.device_path"
-                        @click:append="copy(device.device_path)" />
+                    <textfield-with-copy :label="$t('DevicesDialog.DevicePath')" :value="device.device_path" />
                 </v-col>
             </v-row>
             <v-row v-if="device.path_by_id">
                 <v-col>
-                    <v-text-field
-                        readonly
-                        dense
-                        outlined
-                        hide-details
-                        :append-icon="mdiContentCopy"
-                        :label="$t('DevicesDialog.PathById')"
-                        :value="device.path_by_id"
-                        @click:append="copy(device.path_by_id)" />
+                    <textfield-with-copy :label="$t('DevicesDialog.PathById')" :value="device.path_by_id" />
                 </v-col>
             </v-row>
             <v-row v-if="device.path_by_hardware">
                 <v-col>
-                    <v-text-field
-                        readonly
-                        dense
-                        outlined
-                        hide-details
-                        :append-icon="mdiContentCopy"
-                        :label="$t('DevicesDialog.PathByHardware')"
-                        :value="device.path_by_hardware"
-                        @click:append="copy(device.path_by_hardware)" />
+                    <textfield-with-copy :label="$t('DevicesDialog.PathByHardware')" :value="device.path_by_hardware" />
                 </v-col>
             </v-row>
             <template v-if="identicalResolutions">
@@ -74,14 +50,14 @@
 <script lang="ts">
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
-import { mdiContentCopy } from '@mdi/js'
 import { V4l2Device } from '@/components/dialogs/DevicesDialogVideo.vue'
-import { copyToClipboard, sortResolutions } from '@/plugins/helpers'
+import { sortResolutions } from '@/plugins/helpers'
+import TextfieldWithCopy from '@/components/inputs/TextfieldWithCopy.vue'
 
-@Component
+@Component({
+    components: { TextfieldWithCopy },
+})
 export default class DevicesDialogVideoDeviceLibcamera extends Mixins(BaseMixin) {
-    mdiContentCopy = mdiContentCopy
-
     @Prop({ type: Object, required: true }) device!: V4l2Device
 
     get identicalResolutions() {
@@ -102,9 +78,5 @@ export default class DevicesDialogVideoDeviceLibcamera extends Mixins(BaseMixin)
 
         return this.device.alt_name !== this.device.camera_name
     }
-
-    copy(text: string) {
-        copyToClipboard(text)
-    }
 }
 </script>
diff --git a/src/components/inputs/TextfieldWithCopy.vue b/src/components/inputs/TextfieldWithCopy.vue
new file mode 100644
index 000000000..81b3fe969
--- /dev/null
+++ b/src/components/inputs/TextfieldWithCopy.vue
@@ -0,0 +1,52 @@
+<template>
+    <v-text-field :class="cssClassName" readonly dense outlined hide-details :label="label" :value="value">
+        <template #append>
+            <v-icon @click="copy">{{ mdiContentCopy }}</v-icon>
+            <v-tooltip
+                v-model="isShowTooltip"
+                open-on-click
+                :open-on-hover="false"
+                :attach="'.' + cssClassName"
+                :position-x="50"
+                :position-y="0">
+                <span>{{ $t('App.TextfieldWithCopy.Copied') }}</span>
+            </v-tooltip>
+        </template>
+    </v-text-field>
+</template>
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiContentCopy } from '@mdi/js'
+import { copyToClipboard } from '@/plugins/helpers'
+import { v4 as uuidv4 } from 'uuid'
+
+@Component
+export default class TextfieldWithCopy extends Mixins(BaseMixin) {
+    mdiContentCopy = mdiContentCopy
+
+    @Prop({ type: String, required: true }) label!: string
+    @Prop({ type: String, required: true }) value!: string
+
+    isShowTooltip = false
+    cssClassName = ''
+
+    mounted() {
+        this.cssClassName = `textfield-with-copy-${uuidv4()}`
+    }
+
+    copy() {
+        copyToClipboard(this.value)
+
+        this.isShowTooltip = true
+        setTimeout(() => (this.isShowTooltip = false), 2000)
+    }
+}
+</script>
+<style scoped>
+::v-deep .v-tooltip__content {
+    top: 4px !important;
+    left: auto !important;
+    right: 46px;
+}
+</style>
diff --git a/src/locales/en.json b/src/locales/en.json
index 182e983d4..01a3d3bdd 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -36,6 +36,9 @@
             "NoEmptyAllowedError": "Input must not be empty!"
         },
         "Printers": "Printers",
+        "TextfieldWithCopy": {
+            "Copied": "Copied"
+        },
         "TheServiceWorker": {
             "DescriptionNeedUpdate": "The local cache is outdated and needs to be updated. Please click on the button below to update the cache.",
             "TitleNeedUpdate": "PWA needs update",

From cb079f15bc9082f1845197309d3d3b406c8e7096 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 14 Feb 2024 21:48:25 +0100
Subject: [PATCH 18/21] feat: hide usb cams in libcamera list per default

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/DevicesDialogVideo.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/dialogs/DevicesDialogVideo.vue b/src/components/dialogs/DevicesDialogVideo.vue
index e52d30de7..f6ef97c9e 100644
--- a/src/components/dialogs/DevicesDialogVideo.vue
+++ b/src/components/dialogs/DevicesDialogVideo.vue
@@ -8,7 +8,7 @@
         <v-row v-if="libcameraDevices.length || filteredV4l2Devices.length" class="mt-0">
             <v-col>
                 <devices-dialog-video-device-libcamera
-                    v-for="(device, index) in libcameraDevices"
+                    v-for="(device, index) in filteredLibcameraDevices"
                     :key="`libcamera_${device.libcamera_id}_${index}`"
                     :device="device" />
                 <devices-dialog-video-device-v4l2
@@ -64,6 +64,14 @@ export default class DevicesDialogVideo extends Mixins(BaseMixin) {
 
     @Prop({ type: Boolean, default: false }) hideSystemEntries!: boolean
 
+    get filteredLibcameraDevices() {
+        if (this.hideSystemEntries) {
+            return this.libcameraDevices.filter((device) => !device.libcamera_id.includes('usb@'))
+        }
+
+        return this.libcameraDevices
+    }
+
     get filteredV4l2Devices() {
         return this.v4l2Devices.filter((device) => {
             if (this.hideSystemEntries) {

From 8e3d65fadb22ae7000efdc9c3fca53901031f17a Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 14 Feb 2024 21:56:22 +0100
Subject: [PATCH 19/21] fix: only display formats & resolutions, when a mode
 exists in the cam device

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../dialogs/DevicesDialogVideoDeviceV4l2.vue  | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue b/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue
index d3ea6bd5e..b32fae2d9 100644
--- a/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue
+++ b/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue
@@ -23,25 +23,27 @@
                     <textfield-with-copy :label="$t('DevicesDialog.PathByHardware')" :value="device.path_by_hardware" />
                 </v-col>
             </v-row>
-            <template v-if="identicalResolutions">
-                <v-row class="mt-0">
-                    <v-col class="py-2" cols="4">{{ $t('DevicesDialog.Formats') }}</v-col>
-                    <v-col class="py-2">{{ formats }}</v-col>
-                </v-row>
-                <v-row class="mt-0">
-                    <v-col class="py-2" cols="4">{{ $t('DevicesDialog.Resolutions') }}</v-col>
-                    <v-col class="py-2">{{ resolutions }}</v-col>
-                </v-row>
-            </template>
-            <template v-else>
-                <v-row v-for="mode in device.modes" :key="mode.format" class="mt-0">
-                    <v-col class="py-2" cols="4">
-                        {{ mode.description }}
-                        <br />
-                        <small>{{ mode.format }}</small>
-                    </v-col>
-                    <v-col class="py-2">{{ mode.resolutions.join(', ') }}</v-col>
-                </v-row>
+            <template v-if="device.modes.length">
+                <template v-if="identicalResolutions">
+                    <v-row class="mt-0">
+                        <v-col class="py-2" cols="4">{{ $t('DevicesDialog.Formats') }}</v-col>
+                        <v-col class="py-2">{{ formats }}</v-col>
+                    </v-row>
+                    <v-row class="mt-0">
+                        <v-col class="py-2" cols="4">{{ $t('DevicesDialog.Resolutions') }}</v-col>
+                        <v-col class="py-2">{{ resolutions }}</v-col>
+                    </v-row>
+                </template>
+                <template v-else>
+                    <v-row v-for="mode in device.modes" :key="mode.format" class="mt-0">
+                        <v-col class="py-2" cols="4">
+                            {{ mode.description }}
+                            <br />
+                            <small>{{ mode.format }}</small>
+                        </v-col>
+                        <v-col class="py-2">{{ mode.resolutions.join(', ') }}</v-col>
+                    </v-row>
+                </template>
             </template>
         </v-card-text>
     </v-card>
@@ -66,7 +68,7 @@ export default class DevicesDialogVideoDeviceLibcamera extends Mixins(BaseMixin)
     }
 
     get resolutions() {
-        return this.device.modes[0].resolutions.join(', ')
+        return this.device.modes[0]?.resolutions?.join(', ') ?? ''
     }
 
     get formats() {

From b7b08c1319c06984529a23bfffadd4b9e04314e4 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 14 Feb 2024 21:56:45 +0100
Subject: [PATCH 20/21] fix: fix class name in DevicesDialogVideoDeviceV4l2.vue

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue b/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue
index b32fae2d9..7909db8fa 100644
--- a/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue
+++ b/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue
@@ -59,7 +59,7 @@ import TextfieldWithCopy from '@/components/inputs/TextfieldWithCopy.vue'
 @Component({
     components: { TextfieldWithCopy },
 })
-export default class DevicesDialogVideoDeviceLibcamera extends Mixins(BaseMixin) {
+export default class DevicesDialogVideoDeviceV4l2 extends Mixins(BaseMixin) {
     @Prop({ type: Object, required: true }) device!: V4l2Device
 
     get identicalResolutions() {

From efe55d74b8b65a1b172f3e7dfad7c12c7799f5b8 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 14 Feb 2024 21:58:59 +0100
Subject: [PATCH 21/21] refactor: simplify filter rules

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/DevicesDialogSerial.vue | 6 +-----
 src/components/dialogs/DevicesDialogUsb.vue    | 6 +-----
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/components/dialogs/DevicesDialogSerial.vue b/src/components/dialogs/DevicesDialogSerial.vue
index e18b043fc..0a0104c86 100644
--- a/src/components/dialogs/DevicesDialogSerial.vue
+++ b/src/components/dialogs/DevicesDialogSerial.vue
@@ -53,11 +53,7 @@ export default class DevicesDialogSerial extends Mixins(BaseMixin) {
     get filteredDevices() {
         if (!this.hideSystemEntries) return this.devices
 
-        return this.devices.filter((device) => {
-            if (device.device_type === 'hardware_uart') return false
-
-            return true
-        })
+        return this.devices.filter((device) => device.device_type !== 'hardware_uart')
     }
 
     async refresh() {
diff --git a/src/components/dialogs/DevicesDialogUsb.vue b/src/components/dialogs/DevicesDialogUsb.vue
index 5c1b2b611..229b0e9ff 100644
--- a/src/components/dialogs/DevicesDialogUsb.vue
+++ b/src/components/dialogs/DevicesDialogUsb.vue
@@ -55,11 +55,7 @@ export default class DevicesDialogUsb extends Mixins(BaseMixin) {
     get filteredDevices() {
         if (!this.hideSystemEntries) return this.devices
 
-        return this.devices.filter((device) => {
-            if (device.class === 'Hub') return false
-
-            return true
-        })
+        return this.devices.filter((device) => device.class !== 'Hub')
     }
 
     async refresh() {