Custom pwm output widgets #3668
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…types of functions
Reviewer's GuideRefactors the servo function editor to delegate to specialized widgets based on the selected function type (motor, generic servo range, GPIO, actuator), introducing new dedicated Vue components for PWM range and motor configuration while preserving and adapting the existing slider-based min/trim/max editor logic. Sequence diagram for motor PWM editing and persistencesequenceDiagram
actor User
participant ServoFunctionMotorEditor
participant AutopilotStore as AutopilotStore
participant Parameter
participant Mavlink2Rest as Mavlink2Rest
User->>ServoFunctionMotorEditor: Open servo function dialog
ServoFunctionMotorEditor->>AutopilotStore: parameter(MOT_PWM_TYPE)
AutopilotStore-->>ServoFunctionMotorEditor: mot_pwm_type_param
ServoFunctionMotorEditor->>AutopilotStore: parameter(MOT_PWM_MIN, MOT_PWM_MAX or *_MIN, *_MAX)
AutopilotStore-->>ServoFunctionMotorEditor: min_param, max_param, trim_param
ServoFunctionMotorEditor->>ServoFunctionMotorEditor: initializeSliderValues()
User->>ServoFunctionMotorEditor: Drag slider thumb
ServoFunctionMotorEditor->>ServoFunctionMotorEditor: onSliderMouseDown(event)
ServoFunctionMotorEditor->>ServoFunctionMotorEditor: calculateValueFromEvent()
ServoFunctionMotorEditor->>ServoFunctionMotorEditor: findClosestThumb()
loop While dragging
User->>ServoFunctionMotorEditor: Move pointer
ServoFunctionMotorEditor->>ServoFunctionMotorEditor: onSliderMouseMove(event)
ServoFunctionMotorEditor->>ServoFunctionMotorEditor: updateThumbValue(event)
ServoFunctionMotorEditor->>ServoFunctionMotorEditor: updateValueBasedOnThumb(value)
ServoFunctionMotorEditor->>ServoFunctionMotorEditor: updateMinTrimMax()
ServoFunctionMotorEditor->>Parameter: update local Parameter.value
end
User->>ServoFunctionMotorEditor: Release mouse button
ServoFunctionMotorEditor->>ServoFunctionMotorEditor: onSliderMouseUp()
ServoFunctionMotorEditor->>Parameter: resolve selected param
ServoFunctionMotorEditor->>Mavlink2Rest: setParam(param.name, value, AutopilotStore.system_id, param.paramType.type)
Mavlink2Rest-->>ServoFunctionMotorEditor: ack
ServoFunctionMotorEditor->>Parameter: param.value = value
Class diagram for new servo function editor componentsclassDiagram
class ServoFunctionEditorDialog {
+Parameter param
+boolean value
+function_type() VueConstructor
}
class ServoFunctionRangeEditor {
+Parameter param
-number minValue
-number trimValue
-number maxValue
-number activeThumb
-boolean isDragging
+trim_param() Parameter
+max_param() Parameter
+min_param() Parameter
+minPercent() number
+trimPercent() number
+maxPercent() number
+getParamByType(type string) Parameter
+calculatePercentage(value number) number
+updateParamValue(type ParamType, newValue number) void
+initializeSliderValues() void
+getThumbPosition(index number) number
+getThumbValue(index number) number
+startDragging(index number) void
+onSliderMouseDown(event MouseEvent) void
+calculateValueFromEvent(event MouseEvent, container HTMLElement) object
+findClosestThumb(value number) number
+onSliderMouseMove(event MouseEvent) void
+onSliderMouseUp() void
+updateThumbValue(event MouseEvent) void
+updateValueBasedOnThumb(value number) void
+updateMin(value string) void
+updateTrim(value string) void
+updateMax(value string) void
+updateParamWithConstraints(value string, param Parameter, min number, max number, property string) void
+onTouchStart(event TouchEvent) void
+onTouchMove(event TouchEvent) void
+onTouchEnd() void
}
class ServoFunctionMotorEditor {
+Parameter param
-number minValue
-number trimValue
-number maxValue
-number activeThumb
-boolean isDragging
+trim_param() Parameter
+max_param() Parameter
+min_param() Parameter
+mot_pwm_type_param() Parameter
+mot_pwm_type() PwmTypes
+mot_pwm_type_is_supported() boolean
+minPercent() number
+trimPercent() number
+maxPercent() number
+getParamByType(type string) Parameter
+calculatePercentage(value number) number
+updateParamValue(type ParamType, newValue number) void
+initializeSliderValues() void
+getThumbPosition(index number) number
+getThumbValue(index number) number
+startDragging(index number) void
+onSliderMouseDown(event MouseEvent) void
+calculateValueFromEvent(event MouseEvent, container HTMLElement) object
+findClosestThumb(value number) number
+onSliderMouseMove(event MouseEvent) void
+onSliderMouseUp() void
+updateThumbValue(event MouseEvent) void
+updateValueBasedOnThumb(value number) void
+updateMin(value string) void
+updateTrim(value string) void
+updateMax(value string) void
+updateParamWithConstraints(value string, param Parameter, min number, max number, property string) void
+onTouchStart(event TouchEvent) void
+onTouchMove(event TouchEvent) void
+onTouchEnd() void
}
class ServoFunctionGpioEditor {
+Parameter param
}
class ServoFunctionActuatorEditor {
+Parameter param
}
class InlineParameterEditor {
+boolean autoSet
+string label
+Parameter param
}
class Parameter {
+string name
+number value
+object paramType
}
class AutopilotStore {
+number system_id
+parameter(name string) Parameter
}
class Mavlink2Rest {
+setParam(name string, value number, systemId number, paramType any) void
}
ServoFunctionEditorDialog --> Parameter : uses
ServoFunctionEditorDialog ..> ServoFunctionRangeEditor : selects
ServoFunctionEditorDialog ..> ServoFunctionMotorEditor : selects
ServoFunctionEditorDialog ..> ServoFunctionGpioEditor : selects
ServoFunctionEditorDialog ..> ServoFunctionActuatorEditor : selects
ServoFunctionRangeEditor *-- InlineParameterEditor : embeds
ServoFunctionMotorEditor *-- InlineParameterEditor : embeds
ServoFunctionRangeEditor ..> Parameter : reads_writes
ServoFunctionMotorEditor ..> Parameter : reads_writes
ServoFunctionRangeEditor ..> AutopilotStore : getParamByType
ServoFunctionMotorEditor ..> AutopilotStore : getParamByType
ServoFunctionRangeEditor ..> Mavlink2Rest : setParam
ServoFunctionMotorEditor ..> Mavlink2Rest : setParam
AutopilotStore <.. ServoFunctionRangeEditor
AutopilotStore <.. ServoFunctionMotorEditor
Mavlink2Rest <.. ServoFunctionRangeEditor
Mavlink2Rest <.. ServoFunctionMotorEditor
Flow diagram for selecting specialized servo function widgetflowchart TD
A[Start with selected servo function param] --> B[Read param.value]
B --> C[Lookup selected option name in param.options]
C --> D{Lowercased name contains substring?}
D -->|contains 'motor'| E[Return ServoFunctionMotorEditor]
D -->|contains 'gpio'| F[Return ServoFunctionGpioEditor]
D -->|contains 'actuator'| G[Return ServoFunctionActuatorEditor]
D -->|contains 'disabled'| H[Return undefined and render no widget]
D -->|none of the above| I[Return ServoFunctionRangeEditor]
E --> J[Dynamic component renders motor editor]
F --> J
G --> J
H --> K[No specialized widget shown]
I --> J
J --> L[User edits PWM via selected widget]
K --> L
File-Level Changes
Assessment against linked issues
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
Williangalvani
force-pushed
the
custom_pwm_output_widgets
branch
5 times, most recently
from
df041a8 to
6cc37db
Compare
Williangalvani
force-pushed
the
custom_pwm_output_widgets
branch
3 times, most recently
from
9168d34 to
a21f838
Compare
Williangalvani
force-pushed
the
custom_pwm_output_widgets
branch
from
a21f838 to
2ef8f71
Compare
ES-Alexander
requested changes
Dec 19, 2025
Collaborator
ES-Alexander
left a comment
ES-Alexander
left a comment
There was a problem hiding this comment.
Niiice!! Will hopefully be some significant improvements for the UX :-)
Various interface suggestions, plus some code and functionality ones.
Some great steps towards being able to do something like this table idea in the longer term :-)
| }, | ||
| trim_param(): Parameter | undefined { | ||
| if (this.mot_pwm_type === PwmTypes.Normal) { | ||
| return autopilot.parameter(`MOT_${this.motor_number}_TRIM`) |
Collaborator
There was a problem hiding this comment.
This should be nothing, right? There's no trim control for Normal motors (IIRC that's why we needed a different motor type).
| const pretty_name = param_using_this_gpio.name.split('_')[0].toLowerCase().toTitle() | ||
| return `GPIO [${pretty_name}]` | ||
| } | ||
| return `Unknown GPIO ${gpio}` |
Collaborator
There was a problem hiding this comment.
Suggested change
| return `Unknown GPIO ${gpio}` | |
| return `GPIO ${gpio} [Unknown]` |
I think consistent formatting would be nicer. Starting with GPIO also makes it easier to find in the list.
Comment on lines
+67
to
+79
| this_servo_gpio(): number | undefined { | ||
| if (!this.servo_number) return undefined | ||
| if (this.board_name?.startsWith('Navigator')) { | ||
| return this.servo_number | ||
| } | ||
| // We are assuming most boards follow the same GPIO numbering scheme as the Pixhawk1 | ||
| // Aux channels start at 50, and Main channels start at 101 | ||
| if (this.servo_number <= 8) { | ||
| return this.servo_number + 100 | ||
| } | ||
| return this.servo_number - 9 + 50 | ||
| }, |
Collaborator
There was a problem hiding this comment.
Would it be possible to reuse the servo_to_gpio function from PwmSetup.vue?
| <relay-setup | ||
| v-if="function_type_using_this_gpio?.name?.includes('RELAY')" | ||
| :relay-parameter="function_type_using_this_gpio" | ||
| /> |
Collaborator
There was a problem hiding this comment.
I think there should be a leak-setup here, that allows setting the "logic level when dry" (LEAKn_LOGIC).
We could also add the FS_LEAK_ENABLE failsafe Action parameter, although I'm unsure whether it's better to just point the user to the failsafes page or something...
| <v-col cols="12"> | ||
| <v-alert | ||
| v-if="!has_joystick_function_configured" | ||
| type="error" |
Collaborator
There was a problem hiding this comment.
I'm unsure whether this should be an error or just a warning, since someone may just want to control an Actuator programatically (e.g. with a Cockpit slider, or some Actions).
That said, I suppose right now it's not possible to do that, so we could make it an error and update it once DO_SET_ACTUATOR support is added?
| <div> | ||
| <v-row class="mb-4"> | ||
| <v-col cols="6"> | ||
| <span class="text-h6">PWM Type</span> |
Collaborator
There was a problem hiding this comment.
Suggested change
| <span class="text-h6">PWM Type</span> | |
| <span class="text-h6">Motor Control Signal (shared)</span> |
Nice to make it clear that this can't be set per-motor, and I feel like the "PWM Type" part is redundant with the MOT_PWM_TYPE description over the dropdown.
Undecided whether "shared" or "all" is better.
Comment on lines
+34
to
+35
| title="Motor Configuration" | ||
| tooltip="Adjust the minimum, trim, and maximum PWM values for this motor" |
Collaborator
There was a problem hiding this comment.
Could we make these dynamic based on the selected type? So the title says "Motor Configuration (shared)" when Normal is selected, and just "Motor Configuration" when PWMAngle? And for the tooltip, end with "all motors" and skip the , trim, when Normal, or just end with "this motor" when PWMAngle?
Comment on lines
+57
to
+66
| Normal = 0, | ||
| OneShot = 1, | ||
| OneShot125 = 2, | ||
| Brushed = 3, | ||
| DShot150 = 4, | ||
| DShot300 = 5, | ||
| DShot600 = 6, | ||
| DShot1200 = 7, | ||
| PWMRange = 8, | ||
| PWMAngle = 9, |
Collaborator
There was a problem hiding this comment.
Do we expect users to be familiar with these options?
Just curious whether we want PWMAngle to be put second for Sub users, and possibly with some extra text to explain that it supports trim and independent PWM ranges...
| :param="steps_param" | ||
| /> | ||
| </v-col> | ||
| <servo-function-range-editor |
Collaborator
There was a problem hiding this comment.
This seems to be only partially implemented (there are no linked servo channel variables?), and weird because it's on one side:
Would also be nice if it showed ticks based on the joystick steps, and allowed testing with the normal trim tick (maybe even with percentage-based tick labels).
| </v-alert> | ||
| </v-col> | ||
| </v-row> | ||
| <servo-function-range-editor |
Collaborator
There was a problem hiding this comment.
This is off to the side:
Would be nice to be able to test it with a central thumb (although I suppose that's not possible for actuators at the moment, so just for the record). I'm unsure whether actuators support an adjustable "center" value, or if it's just (min+max)/2.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
adds custom widgets/optiosn for:
regular servo
motors
actuators
lights
gpio
relays
helps #3267
Summary by Sourcery
Introduce specialized editors for different servo function types in the parameter editor dialog to support motor- and GPIO-specific PWM configuration while keeping a generic range editor for other functions.
Enhancements: