Merge pull request #58 from inputlabs/better-actions-preview

Show empty action chips, Do not clear unused action sets, Improved messages

src/components/profile/action_preview.ts

@@ -6,8 +6,7 @@ import { CommonModule } from '@angular/common'
 import { ProfileService } from 'services/profiles'
 import { HID, isAxis } from 'lib/hid'
 import { ActionGroup } from 'lib/actions'
-import { ButtonMode, CtrlButton, CtrlGyroAxis, CtrlRotary, CtrlHome } from 'lib/ctrl'
-import { sectionIsRotary, sectionIsAnalog } from 'lib/ctrl'
+import { CtrlButton, CtrlGyroAxis, CtrlRotary, CtrlHome, sectionIsAnalog } from 'lib/ctrl'
 
 interface Chip {
   cls: string,
@@ -42,14 +41,16 @@ export class ButtonComponent {
     let actions = this.section.actions[index].copy()
     // Merge sticky mode actions.
     if (this.section instanceof CtrlButton) {
-      if (this.section.mode() == ButtonMode.STICKY) {
+      if (this.section.sticky) {
         if (index == 0) actions = this.section.actions[0].merge(this.section.actions[1])
         else actions = new ActionGroup([0])
       }
     }
     // For rotary only show first action group.
-    if (sectionIsRotary(this.section.sectionIndex) && index == 1) {
-      actions = new ActionGroup([0])
+    if (index == 1) {
+      if (this.section instanceof CtrlRotary) {
+        actions = new ActionGroup([0])
+      }
     }
     // Hide easter egg.
     actions.delete(HID.PROC_THANKS)
@@ -59,13 +60,22 @@ export class ButtonComponent {
   getLabel(index: number): string {
     // Do not show labels if there are 3 groups of actions.
     if (this.section instanceof CtrlButton) {
-      if (this.section.hold && this.section.double) return ''
+      const isHome = this.section instanceof CtrlHome
+      if (!isHome && this.section.hold && this.section.double) return ''
     }
     // Get label for actions.
     let label = this.section.labels[index] || ''
-    // For rotary only show first label.
-    if (sectionIsRotary(this.section.sectionIndex) && index >= 1) {
-      label = ''
+    if (index == 1) {
+      if (this.section instanceof CtrlButton) {
+        if (!this.section.hold && !this.section.sticky) label = ''
+      }
+      if (this.section instanceof CtrlRotary) label = ''
+    }
+    if (index == 2) {
+      if (this.section instanceof CtrlButton) {
+        if (!this.section.double) label = ''
+      }
+      if (this.section instanceof CtrlRotary) label = ''
     }
     return label
   }
@@ -213,10 +223,6 @@ export class ButtonComponent {
       if (index==1 && this.section.hold) cls += ' hold'
       if (index==2 && this.section.double) cls += ' double'
     }
-    if (this.section instanceof CtrlHome) {
-      if (index==0) cls += ' hold'
-      if (index==1) cls += ' double'
-    }
     if (sectionIsAnalog(this.section.sectionIndex) && isAxis(action)) {
       cls += ' analog'
     }
@@ -240,7 +246,11 @@ export class ButtonComponent {
     }
     if (index == 1) {
       if (this.section.actions[1] === undefined) return []
-      if (this.getActions(1).actions.size == 0 && this.section.labels[1] == '') return []
+      if (this.section instanceof CtrlButton) {
+        if (!this.section.hold && !this.section.sticky) return []
+        if (this.getActions(1).actions.size == 0) return [emptyHoldChip]
+      }
+      if (this.getActions(1).actions.size == 0) return []
       return this.getActions(1).asArray()
         .map((action: number) => {
           const text = this.getText(action)
@@ -251,8 +261,12 @@ export class ButtonComponent {
     }
     if (index == 2) {
       if (this.section.actions[2] === undefined) return []
-      if (this.getActions(2).actions.size == 0 && this.section.labels[2] == '') return []
-      if (sectionIsRotary(this.section.sectionIndex)) return []
+      if (this.section instanceof CtrlButton) {
+        if (!this.section.double) return []
+        if (this.getActions(2).actions.size == 0) return [emptyDoubleChip]
+      }
+      if (this.getActions(2).actions.size == 0) return []
+      if (this.section instanceof CtrlRotary) return []
       return this.getActions(2).asArray()
         .map((action: number) => {
           const text = this.getText(action)
@@ -264,3 +278,15 @@ export class ButtonComponent {
     return []
   }
 }
+
+const emptyHoldChip: Chip = {
+  text: '',
+  cls: 'square round fixed hold',
+  icon: {icon: '', showLabel: false},
+}
+
+const emptyDoubleChip: Chip = {
+  text: '',
+  cls: 'square round fixed double',
+  icon: {icon: '', showLabel: false},
+}

src/components/profile/action_selector.html

@@ -10,7 +10,7 @@
             class='action placeholder'
             (click)='showDialogKeypicker(groupIndex)'
             >
-            Actions
+            Add actions
         </div>
     </div>
 
@@ -35,7 +35,7 @@
     <div class='iconaction'>
         <input
             type='text'
-            placeholder='Label'
+            placeholder='Add label'
             maxlength='14'
             [(ngModel)]='labels[groupIndex]'
             (change)='save()'

src/components/profile/section.html

@@ -69,7 +69,7 @@ <h2>Home button</h2>
     <p>Home button mappings are not configurable yet.</p>
     <p>Holding (pink) the Home button, enables the shortcuts from the Home profile. These can be modified in the Home profile page.</p>
     <p>Double-clicking (purple) the Home button, emulates the native gamepad home/guide button.</p>
-    <p>Holding the Home button after double-clicking it allows for combinations such as "Guide+X" when pressing other buttons.</p>
+    <p>Double-clicking and holding the Home button allows for shortcuts such as "Guide+X" when pressing other buttons.</p>
 </div>
 
 <!-- BUTTONS -->

src/lib/ctrl.ts

@@ -464,12 +464,6 @@ export class CtrlButton extends CtrlSection {
   }
 
   override payload() {
-    // Delete secondary data if hold has been disabled.
-    if (this.hold == false) {
-      this.actions[1].clear()
-      this.labels[1] = ''
-    }
-    // Compose.
     return [
       this.profileIndex,
       this.sectionIndex,

src/services/profiles.ts

@@ -5,7 +5,7 @@
 
 import { Injectable } from '@angular/core'
 import { WebusbService } from 'services/webusb'
-import { Ctrl, CtrlSectionMeta, CtrlButton, CtrlRotary, CtrlThumbstick, CtrlSection } from 'lib/ctrl'
+import { Ctrl, CtrlSectionMeta, CtrlButton, CtrlRotary, CtrlThumbstick, CtrlSection, ButtonMode } from 'lib/ctrl'
 import { MessageType, SectionIndex, CtrlGyro, CtrlGyroAxis, CtrlHome } from 'lib/ctrl'
 import { ActionGroup } from 'lib/actions'
 import { HID } from 'lib/hid'
@@ -61,11 +61,18 @@ export class Profile {
   ) {
     // Fake home definitions.
     const actions = [
+      new ActionGroup([]),
       new ActionGroup([HID.PROC_PROFILE_0]),
       new ActionGroup([HID.PROC_HOME_GAMEPAD]),
     ]
-    const labels = ['', 'Gamepad home']
-    this.home = new CtrlHome(0, SectionIndex.HOME, 0, actions, labels)
+    const labels = ['', '', 'Native home']
+    this.home = new CtrlHome(
+      0,
+      SectionIndex.HOME,
+      ButtonMode.HOLD + ButtonMode.DOUBLE,
+      actions,
+      labels
+    )
   }
 
   getSections() {