TheArchive/mayhem-firmware
1
0
Fork 0
mirror of https://github.com/portapack-mayhem/mayhem-firmware.git synced 2024-11-27 12:05:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Reformatting and some rephrasing for better readability.

Benjamin Møller 2024-10-11 10:25:43 +02:00
parent 2808555338
commit 97642ca45e
1 changed files with 138 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
Widgets.md

@ -1,13 +1,16 @@
## About ## About Widgets
Widgets are the elements that compose the UI of your custom app. Widgets are defined inside [`firmware\common\ui_widget.hpp`](https://github.com/portapack-mayhem/mayhem-firmware/blob/next/firmware/common/ui_widget.hpp) and widget functions can be found inside [`firmware\common\ui_widget.cpp`](https://github.com/portapack-mayhem/mayhem-firmware/blob/next/firmware/common/ui_widget.cpp). In order to be able to use them, you must `#include "ui_widget.hpp"` into your app .hpp file. Widgets are elements to compose the UI of your custom app. Widgets are defined in [`firmware\common\ui_widget.hpp`](https://github.com/portapack-mayhem/mayhem-firmware/blob/next/firmware/common/ui_widget.hpp) and widget functions can be found in [`firmware\common\ui_widget.cpp`](https://github.com/portapack-mayhem/mayhem-firmware/blob/next/firmware/common/ui_widget.cpp). To use them, you must add the line `#include "ui_widget.hpp"` into your app .hpp file.
There are different type of widget. here you will find a list of available widget, with their respecting constructor. For all the methods available, you should go and see the [ui_widget.hpp](https://github.com/portapack-mayhem/mayhem-firmware/blob/next/firmware/common/ui_widget.hpp) file. There are different types of widgets. Here you will find a list of available widgets, with their constructor. For all methods available, you should check the [ui_widget.hpp](https://github.com/portapack-mayhem/mayhem-firmware/blob/next/firmware/common/ui_widget.hpp) file.
## Attach a Generic Widget to Your Application
In order to display a widget into your app, you can either use the function `add_child()` or `add_children()`. ## Attach a generic Widget to your Application
Both those functions shall be called within the code of your `NewAppGameView(NavigationView &nav){}` constructor. The difference between the two function is simple: the first one allows you to add a single widget, while the second one allows you to add an undefined number of widgets.
Widgets must be passed as pointers to the functions. A correct way of calling the two functions would then be: To display a widget in your app, you can use the functions `add_child()` for a single widget or `add_children()` to add an undefined number of widgets.
Both functions shall be called within the code of the `NewAppGameView(NavigationView &nav){}` constructor.
Widgets must be passed as pointers to the functions.
**Declaration and prototype**
``` ```
add_child(&my_widget); add_child(&my_widget);
``` ```
@ -20,10 +23,17 @@ add_children({
``` ```
## Available widgets ## Available widgets
There are several different widgets, and more might be added, so you should always go and check whether new widgets have been added or not. Here you will find a list of most basic widgets.
There are several widgets available and more might be added. You should always check [ui_widget.hpp](https://github.com/portapack-mayhem/mayhem-firmware/blob/next/firmware/common/ui_widget.hpp) if new widgets have been added.
In this document you will find a list of most basic widgets.
***
### Text ### Text
The text widgets add a simple text area to your app. Here you can find it's declaration and prototype:
The text widget add a simple text area widget in the app.
**Declaration and prototype**
``` ```
Text my_text_widget{ Text my_text_widget{
Rect parent_rect, Rect parent_rect,
@ -31,25 +41,33 @@ Text my_text_widget{
}; };
``` ```
To be noted that `Rect parent_rect` has it's own definition inside another file, but let's say that you would like to add a text widget with the text "Hello World", positioned at the top left corner (spaced 10 from both top margin and left margin), with width 100 and height 24, you cold do it in this way: **Note:** `Rect parent_rect` has it's own definition inside another file.
**Example**
Add a text widget with the content "Hello World" positioned at 10x10 px from the top left corner with width 100 and height 24.
``` ```
Text hello_world_text_widget( Text hello_world_text_widget(
{10, 10, 100, 24}, // Coordinates are: int:x (px), int:y (px), int:width (px), int:height (px) {10, 10, 100, 24}, // Coordinates are: int:x (px), int:y (px), int:width (px), int:height (px)
"Hello world!" "Hello world!"
); );
``` ```
***
### Button ### Button
Buttons allows you to do something when you press them. Here you can find it's declaration and prototype: Buttons allows to do something when you press it.
**Declaration and prototype**
``` ```
Button my_button_widget{ Button my_button_widget{
Rect parent_rect, Rect parent_rect,
std::string text std::string text
}; };
``` ```
Be aware that every time you create a button, you then have to implement this method: `my_button_widget.on_select = [&nav](Button &){}`. You can leave it empty (even though it should not, as here you define what action the button should perform), but it must be present in your code. **Note:** Every time you create a button, you have to implement the method `my_button_widget.on_select = [&nav](Button &){}`. It could be empty (even though it shouldn't, as here you define the action for a button), but it must be present in the code.
For example, let's say you want a button called `my_button`, with the same dimensions as the previous widget. You will then do: **Example**
A button called `my_button`, with the same dimensions as the previous widget.
``` ```
Button my_button( Button my_button(
{10, 10, 100, 24}, // Coordinates are: int:x (px), int:y (px), int:width (px), int:height (px) {10, 10, 100, 24}, // Coordinates are: int:x (px), int:y (px), int:width (px), int:height (px)
@ -57,16 +75,21 @@ Button my_button(
); );
``` ```
***
### Labels ### Labels
Labels are a text element that can be used to describe other widgets. Here you can find it's declaration and prototype: Labels are a text element that can be used to describe other widgets.
**Declaration and prototype**
``` ```
Labels my_label_widget{ Labels my_label_widget{
std::initializer_list<Label> labels std::initializer_list<Label> labels
}; };
``` ```
For example, let's say you want a label called `my_label`. Because the constructor is looking for list you'll need to add a set of brackets `{}` around each label. You will need to add this to `apps/ui_newapp.hpp`: **Example**
A label called `my_label`. Because the constructor is looking for a list you'll need to add brackets `{}` around each label.
Add this to `apps/ui_newapp.hpp`:
``` ```
Labels my_label{ Labels my_label{
{{10, 10}, // Coordinates are: int:x (px), int:y (px) {{10, 10}, // Coordinates are: int:x (px), int:y (px)
@ -74,10 +97,9 @@ Labels my_label{
Color::light_grey()}, // Label color Color::light_grey()}, // Label color
}; };
``` ```
**Note:** Colors are defined in [`firmware/common/ui.hpp`](https://github.com/portapack-mayhem/mayhem-firmware/blob/next/firmware/common/ui.hpp). **Note:** Colors are defined in [`firmware/common/ui.hpp`](https://github.com/portapack-mayhem/mayhem-firmware/blob/next/firmware/common/ui.hpp).
In `apps/ui_newapp.cpp` you'll need to add the `my_label` pointer to add_child() or add_children(): In `apps/ui_newapp.cpp` add the `my_label` pointer to `add_child()` or `add_children()`:
``` ```
NewAppView::NewAppView(NavigationView &nav) { NewAppView::NewAppView(NavigationView &nav) {
@ -89,23 +111,27 @@ NewAppView::NewAppView(NavigationView &nav) {
} }
``` ```
***
### LiveDateTime ### LiveDateTime
LiveDateTime gives you the dynamic date and time. Here you can find it's declaration and prototype: LiveDateTime gives the dynamic date and time.
**Declaration and prototype**
``` ```
LiveDateTime my_liveDateTime_widget{ LiveDateTime my_liveDateTime_widget{
Rect parent_rect Rect parent_rect
}; };
``` ```
For example, let's say you want a label called `my_liveDateTime`. You will need to add this to `apps/ui_newapp.hpp`: **Example**
For a label called `my_liveDateTime` add the folowing code to `apps/ui_newapp.hpp`:
``` ```
LiveDateTime my_liveDateTime { LiveDateTime my_liveDateTime {
{ 2, 10, 19*8, 16 }, // Coordinates are: int:x (px), int:y (px), int:width (px), int:height (px) { 2, 10, 19*8, 16 }, // Coordinates are: int:x (px), int:y (px), int:width (px), int:height (px)
}; };
``` ```
In `apps/ui_newapp.cpp` you'll need to add the `my_liveDateTime` pointer to add_child() or add_children(): In `apps/ui_newapp.cpp` add the `my_liveDateTime` pointer to `add_child()` or `add_children()`:
``` ```
NewAppView::NewAppView(NavigationView &nav) { NewAppView::NewAppView(NavigationView &nav) {
@ -117,13 +143,17 @@ NewAppView::NewAppView(NavigationView &nav) {
} }
``` ```
If you want to enable seconds you'll need use the `set_seconds_enabled(bool new_value)` function: To enable seconds use the function `set_seconds_enabled(bool new_value)`:
``` ```
my_liveDateTime.set_seconds_enabled(true); my_liveDateTime.set_seconds_enabled(true);
``` ```
***
### BigFrequency ### BigFrequency
BigFrequency is used for displaying a radio frequency. Here you can find it's declaration and prototype: BigFrequency is used for displaying a radio frequency.
**Declaration and prototype**
``` ```
BigFrequency my_bigFrequency_widget{ BigFrequency my_bigFrequency_widget{
Rect parent_rect, Rect parent_rect,
@ -131,7 +161,8 @@ BigFrequency my_bigFrequency_widget{
}; };
``` ```
For example, let's say you want a label called `my_bigFrequency`. You will need to add this to `apps/ui_newapp.hpp`: **Example**
For a big frequency widget called `my_bigFrequency` add the following code to `apps/ui_newapp.hpp`:
``` ```
BigFrequency my_bigFrequency( BigFrequency my_bigFrequency(
{10, 10, 28*8, 52}, // Coordinates are: int:x (px), int:y (px), int:width (px), int:height (px) {10, 10, 28*8, 52}, // Coordinates are: int:x (px), int:y (px), int:width (px), int:height (px)
@ -139,7 +170,7 @@ BigFrequency my_bigFrequency(
); );
``` ```
In `apps/ui_newapp.cpp` you'll need to add the `my_bigFrequency` pointer to add_child() or add_children(): In `apps/ui_newapp.cpp` add the `my_bigFrequency` pointer to `add_child()` or `add_children()`:
``` ```
NewAppView::NewAppView(NavigationView &nav) { NewAppView::NewAppView(NavigationView &nav) {
@ -151,28 +182,32 @@ NewAppView::NewAppView(NavigationView &nav) {
} }
``` ```
To set a frequency you can use the function `set(const rf::Frequency frequency)`: To set a frequency use the function `set(const rf::Frequency frequency)`:
``` ```
my_bigFrequency.set(433000000); // 433MHz my_bigFrequency.set(433000000); // 433MHz
``` ```
***
### ProgressBar ### ProgressBar
Progress bars are a visual representation of progress that let us know how far a long a task is. Here you can find it's declaration and prototype: Progress bars are a visual representation of the progress of a task.
**Declaration and prototype**
``` ```
Labels my_progressBar_widget{ Labels my_progressBar_widget{
Rect parent_rect Rect parent_recthttps://github.com/portapack-mayhem/mayhem-firmware.wiki.git
}; };
``` ```
For example, let's say you want a label called `my_progressBar`. You will need to add this to `apps/ui_newapp.hpp`: **Example**
For a label called `my_progressBar` add the following code to `apps/ui_newapp.hpp`:
``` ```
ProgressBar my_progressBar { ProgressBar my_progressBar {
{ 2, 10, 208, 16 }, // Coordinates are: int:x (px), int:y (px), int:width (px), int:height (px) { 2, 10, 208, 16 }, // Coordinates are: int:x (px), int:y (px), int:width (px), int:height (px)
}; };
``` ```
In `apps/ui_newapp.cpp` you'll need to add the `my_progressBar` pointer to add_child() or add_children(): In `apps/ui_newapp.cpp` add the `my_progressBar` pointer to `add_child()` or `add_children()`:
``` ```
NewAppView::NewAppView(NavigationView &nav) { NewAppView::NewAppView(NavigationView &nav) {
@ -184,33 +219,37 @@ NewAppView::NewAppView(NavigationView &nav) {
} }
``` ```
To set the maximum value for the progress bar use the `set_max(const uint32_t max)` function: Set the maximum value for the progress bar with the function `set_max(const uint32_t max)`:
``` ```
my_progressBar.set_max(10); // 10 is 100% my_progressBar.set_max(10); // 10 is 100%
``` ```
To change the value of progress for the progress bar use the `set_value(const uint32_t value)` function: Change the value of progress for the progress bar with the function `set_value(const uint32_t value)`:
``` ```
my_progressBar.set_value(5); // 50% Complete my_progressBar.set_value(5); // 50% Complete
``` ```
***
### Console ### Console
Console can be used as large text field where you can output mutable lines of text. Here you can find it's declaration and prototype: Console can be used as large text field where you can output mutable lines of text.
**Declaration and prototype**
``` ```
Console my_console_widget{ Console my_console_widget{
Rect parent_rect Rect parent_rect
}; };
``` ```
For example, let's say you want a label called `my_console`. You will need to add this to `apps/ui_newapp.hpp`: **Example**
For a label called `my_console` add the following code to `apps/ui_newapp.hpp`:
``` ```
Console my_console { Console my_console {
{ 2*8, 10, 208, 200 }, // Coordinates are: int:x (px), int:y (px), int:width (px), int:height (px) { 2*8, 10, 208, 200 }, // Coordinates are: int:x (px), int:y (px), int:width (px), int:height (px)
}; };
``` ```
In `apps/ui_newapp.cpp` you'll need to add the `my_console` pointer to add_child() or add_children(): In `apps/ui_newapp.cpp` add the `my_console` pointer to `add_child()` or `add_children()`:
``` ```
NewAppView::NewAppView(NavigationView &nav) { NewAppView::NewAppView(NavigationView &nav) {
@ -222,26 +261,29 @@ NewAppView::NewAppView(NavigationView &nav) {
} }
``` ```
To write to 'my_console' you'll need to use the `write(std::string message)` function: To write to 'my_console' use the function `write(std::string message)`:
``` ```
my_console.write("Hello World"); my_console.write("Hello World");
``` ```
For automatic new line, you can also use the `writeln(std::string message)` function if you don't want to add a `\n' at the end of every string: For automatic new line use the function `writeln(std::string message)`. It will add `\n` at the end of every string:
``` ```
my_console.writeln("Hello World but on a new line!"); my_console.writeln("Hello World but on a new line!");
``` ```
To enable scrolling you can use the `enable_scrolling(bool enable)` function:: To enable scrolling use the function `enable_scrolling(bool enable)`:
``` ```
my_console.enable_scrolling(true); my_console.enable_scrolling(true);
``` ```
* Note: Buffer size is limited to 256 char **Note:** The buffer size is limited to 256 char
***
### Checkbox ### Checkbox
Checkboxs are a boolean (True/False) widget that allows you chose between one of two options . Here you can find it's declaration and prototype: Checkbox is a boolean (true/false) widget, that allows you to chose between two options. The Checkbox is displayed as a rectangle with a green check mark (true) or a red cross (false).
**Declaration and prototype**
``` ```
Checkbox my_checkbox_widget{ Checkbox my_checkbox_widget{
Point parent_pos, Point parent_pos,
@ -251,7 +293,8 @@ Checkbox my_checkbox_widget{
}; };
``` ```
For example, let's say you want a checkbox called `my_checkbox`. You will need to add this to `apps/ui_newapp.hpp`: **Example**
For a checkbox called `my_checkbox` add the following code to `apps/ui_newapp.hpp`:
``` ```
Checkbox my_checkbox( Checkbox my_checkbox(
{10, 20}, // Coordinates are: int:x (px), int:y (px) {10, 20}, // Coordinates are: int:x (px), int:y (px)
@ -261,7 +304,7 @@ Checkbox my_checkbox(
); );
``` ```
In `apps/ui_newapp.cpp` you'll need to add the `my_checkbox` pointer to add_child() or add_children(): In `apps/ui_newapp.cpp` add the `my_checkbox` pointer to `add_child()` or `add_children()`:
``` ```
NewAppView::NewAppView(NavigationView &nav) { NewAppView::NewAppView(NavigationView &nav) {
@ -273,7 +316,7 @@ NewAppView::NewAppView(NavigationView &nav) {
} }
``` ```
Functions within `apps/ui_newapp.cpp` are able to lookup the value of `my_checkbox` with Checkbox's `value()` function: Functions within `apps/ui_newapp.cpp` can lookup the value of `my_checkbox` with Checkbox's `value()` function:
``` ```
if(my_checkbox.value()) { if(my_checkbox.value()) {
do_a(); // If checkbox is selected (green check mark) do_a(); // If checkbox is selected (green check mark)
@ -282,13 +325,13 @@ if(my_checkbox.value()) {
} }
``` ```
You can also set the value for `my_checkbox` with the `set_value(const bool value)` function: Set the value for `my_checkbox` with the function `set_value(const bool value)`:
``` ```
my_checkbox.set_value(true); // Checkbox selected (green check mark) my_checkbox.set_value(true); // Checkbox selected (green check mark)
my_checkbox.set_value(false); // Checkbox deselected (red X) my_checkbox.set_value(false); // Checkbox deselected (red X)
``` ```
If you want your checkbox to automatically perform an action when toggled you can add this [Lambda](https://www.geeksforgeeks.org/lambda-expression-in-c/) to `apps/ui_newapp.cpp`: To automatically perform an action when the checkbox is toggled, add [Lambda](https://www.geeksforgeeks.org/lambda-expression-in-c/) to `apps/ui_newapp.cpp`:
``` ```
NewAppView::NewAppView(NavigationView &nav) { NewAppView::NewAppView(NavigationView &nav) {
@ -309,9 +352,12 @@ NewAppView::NewAppView(NavigationView &nav) {
} }
``` ```
***
### Image ### Image
Images can be displayed within your app. Here you can find it's declaration and prototype: Images can be displayed within your app.
**Declaration and prototype**
``` ```
Image my_Image_widget{ Image my_Image_widget{
Rect parent_rect, Rect parent_rect,
@ -321,7 +367,7 @@ Image my_Image_widget{
}; };
``` ```
Images need to be a Bitmap object before they can be displayed. Bellow is an example of the code needed to create a Bitmap from [`firmware/application/bitmap.hpp`](https://github.com/portapack-mayhem/mayhem-firmware/blob/next/firmware/application/bitmap.hpp). Images need to be a Bitmap object before they can be displayed. Below is an example of the code needed to create a Bitmap from [`firmware/application/bitmap.hpp`](https://github.com/portapack-mayhem/mayhem-firmware/blob/next/firmware/application/bitmap.hpp).
``` ```
static constexpr uint8_t bitmap_stripes_data[] = { static constexpr uint8_t bitmap_stripes_data[] = {
0xFF, 0x03, 0xC0, 0xFF, 0x03, 0xC0,
@ -338,7 +384,8 @@ static constexpr Bitmap bitmap_stripes {
}; };
``` ```
With the Bitmap object created we can now define the image `my_image`. You will need to add this to `apps/ui_newapp.hpp`: **Example**
With the Bitmap object created we can define the image `my_image`. Add the following code to `apps/ui_newapp.hpp`:
``` ```
Image my_image( Image my_image(
{10, 10, 24, 8}, // Coordinates are: int:x (px), int:y (px), int:width (px), int:height (px) {10, 10, 24, 8}, // Coordinates are: int:x (px), int:y (px), int:width (px), int:height (px)
@ -350,7 +397,7 @@ Image my_image(
**Note:** Colors are defined in [`firmware/common/ui.hpp`](https://github.com/portapack-mayhem/mayhem-firmware/blob/next/firmware/common/ui.hpp) **Note:** Colors are defined in [`firmware/common/ui.hpp`](https://github.com/portapack-mayhem/mayhem-firmware/blob/next/firmware/common/ui.hpp)
In `apps/ui_newapp.cpp` you'll need to add the `my_image` pointer to add_child() or add_children(): In `apps/ui_newapp.cpp` add the `my_image` pointer to `add_child()` or `add_children()`:
``` ```
NewAppView::NewAppView(NavigationView &nav) { NewAppView::NewAppView(NavigationView &nav) {
@ -362,9 +409,12 @@ NewAppView::NewAppView(NavigationView &nav) {
} }
``` ```
***
### OptionsField ### OptionsField
OptionsField is a widget that allows you to create a field, in which you can change its value with the wheel on your portapack. Here you can find it's declaration and prototype: OptionsField is a widget to create a field, in which you can change its value with the wheel on your PortaPack.
**Declaration and prototype**
``` ```
OptionsField my_OptionsField_widget{ OptionsField my_OptionsField_widget{
Point parent_pos, Point parent_pos,
@ -372,8 +422,10 @@ OptionsField is a widget that allows you to create a field, in which you can cha
options_t options options_t options
}; };
``` ```
parent_pos is an array of two integer which tells where the top left corner of the widget should be positioned. The length is an integer which tells how many options you have into your options parameter. The options_t field is an array of options in which your portapack can choose to display. `parent_pos` is an array of two integer, represents where the top left corner of the widget should be positioned. The length is an integer which tells how many options you have into your options parameter. The options_t field is an array of options in which your portapack can choose to display.
For example, let's say you want an optionsFild called `my_optionsField`, with 3 options, positioned at 10 from top and 10 from left:
**Example**
An OptionsField called `my_optionsField`, with 3 options positioned at 10 from top and 10 from left:
``` ```
OptionsField my_optionsField{ OptionsField my_optionsField{
{10,10}, // Coordinates are: int:x (px), int:y (px) {10,10}, // Coordinates are: int:x (px), int:y (px)
@ -385,11 +437,14 @@ OptionsField my_optionsField{
} }
}; };
``` ```
Note that the number following the "option_x" string value, should be the value that you could retrieve from the optionField with the function `my_optionsField.selected_index_value();` **Note:** The number following the `option_n` string value, should be the value that could be retrieved from the OptionsField with the function `my_optionsField.selected_index_value();`
***
### NumberField ### NumberField
NumberField is similar to the OptionsField widget except that it only deals with numbers. You can change its value with the wheel on your portapack. Here you can find it's declaration and prototype: NumberField is similar to the OptionsField widget except that it only deals with numbers. You can change its value with the wheel on your portapack.
**Declaration and prototype**
``` ```
NumberField my_NumberField_widget{ NumberField my_NumberField_widget{
Point parent_pos, Point parent_pos,
@ -401,7 +456,8 @@ NumberField my_NumberField_widget{
}; };
``` ```
For example, let's say you want a NumberField called `my_numberField`. You will need to add this to `apps/ui_newapp.hpp`: **Example**
For a NumberField called `my_numberField` add the following code to `apps/ui_newapp.hpp`:
``` ```
// Example 3 digit number starting at "000", ends at "255" // Example 3 digit number starting at "000", ends at "255"
NumberField my_numberField( NumberField my_numberField(
@ -414,7 +470,7 @@ NumberField my_numberField(
); );
``` ```
In `apps/ui_newapp.cpp` you'll need to add the `my_numberField` pointer to add_child() or add_children(): In `apps/ui_newapp.cpp` add the `my_numberField` pointer to `add_child()` or `add_children()`:
``` ```
NewAppView::NewAppView(NavigationView &nav) { NewAppView::NewAppView(NavigationView &nav) {
@ -431,12 +487,12 @@ Functions within `apps/ui_newapp.cpp` are able to lookup the value of `my_number
int number = my_numberField.value(); int number = my_numberField.value();
``` ```
You can also set the value for `my_numberField` with the `set_value(int32_t new_value, bool trigger_change)` function: Set the value for `my_numberField` with the function `set_value(int32_t new_value, bool trigger_change)`:
``` ```
my_numberField.set_value(123); my_numberField.set_value(123);
``` ```
If you want your NumberField to change a value (int number for example) you'll need to add this [Lambda](https://www.geeksforgeeks.org/lambda-expression-in-c/) to `apps/ui_newapp.cpp`: If you want your NumberField to change a value (int number for example) you'll need to add [Lambda](https://www.geeksforgeeks.org/lambda-expression-in-c/) to `apps/ui_newapp.cpp`:
``` ```
NewAppView::NewAppView(NavigationView &nav) { NewAppView::NewAppView(NavigationView &nav) {
@ -453,9 +509,13 @@ NewAppView::NewAppView(NavigationView &nav) {
} }
``` ```
***
### Waveform ### Waveform
Waveforms are used to display a sign wave from a signal source. **Note:** The X axes represents time while the Y axes represents amplitude. Here you can find it's declaration and prototype: Waveforms are used to display a sign wave from a signal source.
**Note:** The X axis represents time while the Y axis represents amplitude.
**Declaration and prototype**
``` ```
Labels my_waveform_widget{ Labels my_waveform_widget{
Rect parent_rect, Rect parent_rect,
@ -467,7 +527,8 @@ Labels my_waveform_widget{
}; };
``` ```
For example, let's say you want a Waveform called `my_waveform`. You will need to add this to `apps/ui_newapp.hpp`: **Example**
For a waveform widget called `my_waveform` add the following code to `apps/ui_newapp.hpp`:
``` ```
Waveform my_waveform( Waveform my_waveform(
{0, 5*16, 240, 64}, // Coordinates are: int:x (px), int:y (px), int:width (px), int:height (px) {0, 5*16, 240, 64}, // Coordinates are: int:x (px), int:y (px), int:width (px), int:height (px)
@ -480,8 +541,7 @@ Waveform my_waveform(
``` ```
**Note:** Colors are defined in [`firmware/common/ui.hpp`](https://github.com/portapack-mayhem/mayhem-firmware/blob/next/firmware/common/ui.hpp). **Note:** Colors are defined in [`firmware/common/ui.hpp`](https://github.com/portapack-mayhem/mayhem-firmware/blob/next/firmware/common/ui.hpp).
The data being displayed by `my_waveform` needs to be a `int16_t` array. Declare this variable in `apps/ui_newapp.hpp`:
The data being displayed by `my_waveform` needs to be a `int16_t` array. You can declare this variable in `apps/ui_newapp.hpp`:
``` ```
class NewAppView : public View class NewAppView : public View
{ {
@ -497,8 +557,7 @@ class NewAppView : public View
}; };
``` ```
In `apps/ui_newapp.cpp` add the `my_waveform` pointer to `add_child()` or `add_children()`:
In `apps/ui_newapp.cpp` you'll need to add the `my_waveform` pointer to add_child() or add_children():
``` ```
NewAppView::NewAppView(NavigationView &nav) { NewAppView::NewAppView(NavigationView &nav) {
@ -510,14 +569,17 @@ NewAppView::NewAppView(NavigationView &nav) {
} }
``` ```
If your input data has a variable length you can use the `set_length(const uint32_t new_length)` function to update the Waveform: If the input data has a variable length, use the function `set_length(const uint32_t new_length)` to update the waveform:
``` ```
my_waveform.set_length(9001) // THAT'S OVER 18KB!! my_waveform.set_length(9001) // THAT'S OVER 18KB!!
``` ```
***
### VuMeter ### VuMeter
VuMeters are used to visually represent the sound intensity of an audio source. Here you can find it's declaration and prototype: VuMeter is used to visually represent the sound intensity of an audio source.
**Declaration and prototype**
``` ```
Labels my_vuMeter_widget{ Labels my_vuMeter_widget{
Rect parent_rect, Rect parent_rect,
@ -526,7 +588,8 @@ Labels my_vuMeter_widget{
}; };
``` ```
For example, let's say you want a VuMeter called `my_vuMeter`. You will need to add this to `apps/ui_newapp.hpp`: **Example**
For a VuMeter called `my_vuMeter` add the following code to `apps/ui_newapp.hpp`:
``` ```
VuMeter my_vuMeter( VuMeter my_vuMeter(
{ 0*8, 1*8, 2*8, 33*8}, // Coordinates are: int:x (px), int:y (px), int:width (px), int:height (px) { 0*8, 1*8, 2*8, 33*8}, // Coordinates are: int:x (px), int:y (px), int:width (px), int:height (px)
@ -535,7 +598,7 @@ VuMeter my_vuMeter(
); );
``` ```
In `apps/ui_newapp.cpp` you'll need to add the `my_vuMeter` pointer to add_child() or add_children(): In `apps/ui_newapp.cpp` add the `my_vuMeter` pointer to `add_child()` or `add_children()`:
``` ```
NewAppView::NewAppView(NavigationView &nav) { NewAppView::NewAppView(NavigationView &nav) {
@ -547,7 +610,7 @@ NewAppView::NewAppView(NavigationView &nav) {
} }
``` ```
To set the value for `my_vuMeter` use the `set_value(const uint32_t new_value)` function: Set the value for `my_vuMeter` with the function `set_value(const uint32_t new_value)`:
``` ```
my_vuMeter.set_value(123); // Max is 255 my_vuMeter.set_value(123); // Max is 255
``` ```