Feature request: clear profile from controller memory

Author: steffalon

src/App.vue

@@ -11,6 +11,7 @@ const db = new LocalIndexDB('ds-edge-profiles');
 provide('db', db);
 
 let edgeHIDController: Ref<HIDDevice | undefined> = ref();
+provide('HIDController', edgeHIDController);
 
 let profiles = ref();
 let selectedProfile = ref();
@@ -34,13 +35,14 @@ const getProfiles = async () => {
       cIndex++;
     }
     let foundProfiles: Array<Profile> = [];
-    // console.log(profileCollector[2][2].slice(60), arrayCRC32LeBLE(new Uint8Array([0xA3, ...profileCollector[2][2].slice(0, 60)])));
     profileCollector.forEach((profile: number[][]) => {
       foundProfiles.push(bytesArrayToProfile(profile));
     });
     profiles.value = foundProfiles;
   }
 }
+// Used for refreshing profiles called by child component(s)
+provide('getProfiles', getProfiles);
 
 const getDevice = () => {
   navigator.hid.requestDevice({filters: [FILTERS]}).then(devices => {
@@ -89,7 +91,6 @@ const setSelectedProfile = (setSelectedProfile: Profile, isSavedProfile: boolean
 }
 
 const saveProfile = (newProfile: Profile) => {
-  console.log(edgeHIDController.value);
   if (edgeHIDController.value) {
     let bytesArray = profileToBytes(newProfile);
 

src/assets/buttons/circle.svg

@@ -14,8 +14,10 @@ defineEmits([
 </script>
 <template>
   <section class="item" @click="$emit('selected-profile', profile)">
-    <p>{{ profile.getLabel() }}</p>
-    <slot/>
+    <p class="label">{{ profile.getLabel() }}</p>
+    <div>
+      <slot/>
+    </div>
   </section>
 </template>
 
@@ -25,6 +27,7 @@ defineEmits([
   justify-content: space-between;
   padding: 0 12px;
   cursor: pointer;
+  align-items: center;
 }
 
 .item:hover {
@@ -35,6 +38,10 @@ p {
   padding: 0;
 }
 
+.label {
+  font-weight: 600;
+}
+
 @media (prefers-color-scheme: dark) {
   .item {
     color: #fffffe;

src/assets/buttons/cross.svg

@@ -4,7 +4,8 @@ import Profile from "./Profile.vue";
 import ProfileModel from "../../model/Profile";
 import LocalIndexDB from "../../model/LocalIndexDB";
 import {assembleBlankProfile, getProfileButtonSelector} from "../../helper/profileTools";
-import {inject, Ref, ref} from "vue";
+import {inject, ref} from "vue";
+import type {Ref} from "vue";
 import Joystick from "../../model/Joystick";
 import Trigger from "../../model/Trigger";
 import ButtonMapping from "../../model/ButtonMapping";
@@ -19,6 +20,8 @@ const savedProfiles: Ref<Array<ProfileModel>> = ref([]);
 const emit = defineEmits(['selected-profile', 'delete-profile']);
 
 const db: LocalIndexDB = inject('db') as LocalIndexDB;
+const hidController = inject('HIDController') as Ref<HIDDevice>;
+const getProfiles = inject('getProfiles') as Function;
 
 db.getAll().then((profiles: Array<ProfileModel>) => savedProfiles.value = profiles.map((profileEntry: any) => {
 
@@ -47,6 +50,17 @@ const deleteProfileConfirm = (profile: ProfileModel) => {
   }
 }
 
+const clearProfileFromControllerMemory = async (profile: ProfileModel, position: number) => {
+
+  if (confirm(`Are you sure you want to clear ${profile.getLabel()} from the controller memory?`) &&
+      hidController.value) {
+    const bytes = new Uint8Array(64);
+    bytes[1] = 1 + position;
+    await hidController.value?.sendFeatureReport(0x68, bytes.slice(1, bytes.length));
+    getProfiles();
+  }
+}
+
 const createNewProfile = () => {
   let name = prompt("New profile name");
   if (name) {
@@ -64,9 +78,17 @@ const createNewProfile = () => {
     <section>
       <section class="profiles" v-if="profiles">
         <Profile @selected-profile="(selectedProfile) => $emit('selected-profile', selectedProfile)"
-                 v-for="profile in profiles"
+                 v-for="(profile, i) in profiles"
                  :profile="profile">
-          <p>{{ getProfileButtonSelector(profile.getProfileButtonSelector()) }}</p>
+          <div class="profile-right">
+            <span class="button-combination">
+              <span class="fn-button">FN</span>
+              <img class="action-button" :src="getProfileButtonSelector((profile as ProfileModel).getProfileButtonSelector())" alt="button">
+            </span>
+            <button class="clear-button" @click="$event.stopPropagation(); clearProfileFromControllerMemory(profile, i)">
+              Clear
+            </button>
+          </div>
         </Profile>
       </section>
       <section class="profiles saved">
@@ -113,10 +135,45 @@ const createNewProfile = () => {
   font-weight: bold;
 }
 
+.button-combination {
+  display: flex;
+  gap: 12px;
+  padding: 8px 0;
+}
+
+.fn-button {
+  width: 30px;
+  text-align: center;
+  height: 20px;
+  background-color: #0f0f10;
+  color: #a4aaad;
+  padding: 2px;
+  border-radius: 4px;
+}
+
+.action-button {
+  width: 24px;
+  height: 24px;
+}
+
+.clear-button {
+  all: unset;
+  cursor: pointer;
+  font-weight: bold;
+  border: 1px solid #ffffff;
+  margin-bottom: 10px;
+  padding: 5px 12px;
+}
+
+.clear-button:hover {
+  background-color: #0f0f10;
+}
+
 @media (prefers-color-scheme: dark) {
   .overview {
     background-color: #f25f4c;
   }
+
   .create-new-profile button {
     background-color: #ff8906;
     font-weight: bold;

src/assets/buttons/square.svg

@@ -32,15 +32,13 @@ export function assembleBlankProfile(label: string = "Unnamed"): Profile {
 export function getProfileButtonSelector(profileButtonSelector: ProfileButtonSelector): string {
     switch (profileButtonSelector) {
         case ProfileButtonSelector.FN_CIRCLE:
-            return "FN + CIRCLE";
+            return new URL('../assets/buttons/circle.svg', import.meta.url).href
         case ProfileButtonSelector.FN_CROSS:
-            return "FN + CROSS";
+            return new URL('../assets/buttons/cross.svg', import.meta.url).href
         case ProfileButtonSelector.FN_SQUARE:
-            return "FN + SQUARE";
+            return new URL('../assets/buttons/square.svg', import.meta.url).href
         case ProfileButtonSelector.FN_TRIANGLE:
-            return "FN + TRIANGLE";
-        case ProfileButtonSelector.UNASSIGNED:
-            return "UNASSIGNED";
+            return new URL('../assets/buttons/triangle.svg', import.meta.url).href
         default:
             return "UNKNOWN";
     }