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
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
4 times, most recently
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 :-)
core/frontend/src/components/parameter-editor/ServoFunctionMotorEditor.vue
Outdated
Show resolved
Hide resolved
Comment on lines
+67
to
+90
| 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?
core/frontend/src/components/parameter-editor/ServoFunctionGpioEditor.vue
Show resolved
Hide resolved
core/frontend/src/components/parameter-editor/ServoFunctionActuatorEditor.vue
Outdated
Show resolved
Hide resolved
core/frontend/src/components/parameter-editor/ServoFunctionMotorEditor.vue
Show resolved
Hide resolved
core/frontend/src/components/parameter-editor/ServoFunctionMotorEditor.vue
Outdated
Show resolved
Hide resolved
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...
Member
Author
There was a problem hiding this comment.
yeah I`m not sure of what to do here... I kinda want to hide the others.
| :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).
Member
Author
There was a problem hiding this comment.
fixed the unlink params. I think the ticks and testing will need to wait
| </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.
…types of functions
Williangalvani
force-pushed
the
custom_pwm_output_widgets
branch
2 times, most recently
from
720a153 to
feb950a
Compare
Williangalvani
force-pushed
the
custom_pwm_output_widgets
branch
from
feb950a to
1e27b22
Compare
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: