Skip to content

Commit

Permalink
Merge branch 'dev' into 125-Prepare_library_for_Cognex
Browse files Browse the repository at this point in the history
  • Loading branch information
Tomas Kovac committed Jul 27, 2023
2 parents 25edacf + c475844 commit 59ed35f
Show file tree
Hide file tree
Showing 141 changed files with 5,739 additions and 1,309 deletions.
55 changes: 0 additions & 55 deletions docfx/articles/core/ALERTDIALOG.md

This file was deleted.

101 changes: 101 additions & 0 deletions docfx/articles/core/AXOALERTDIALOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
# AlertDialog

The AlertDialog class provides a notification mechanism in application in form of toasts.

![Alert Dialog](~/images/AlertDialog.png)

## In-app usage

Alerts dialogs can be simply called anywhere from application by injecting `IAlertDialogService` and calling `AddAlertDialog(type, title, message, time)` method.

> [!NOTE]
> `IAlertDialogService` is a scoped service, therefore alerts are unique to each client and are not synchronized.
1. Make sure your Blazor application references `axopen_core_blazor` project and AxoCore services are added to builder in `Program.cs` file.
```C#
builder.Services.AddAxoCoreServices();
```

2. Add `AxoAlertToast` instance to `MainLayout.razor` file.
```HTML
@using AXOpen.Core.Blazor.AxoAlertDialog

<div class="page">
<main>
<TopRow />
<article class="content px-4">
@Body
</article>
</main>
<NavMenu />

<AxoAlertToast/>

</div>
```
2. Inject `IAlertDialogService` into you Blazor component

```C#
@inject IAlertDialogService _alerts
```

3. Invoke notification toast from your Blazor view

``` C#
_alertDialogService.AddAlertDialog(type, title, message, time);
```

Where:

- **type**: `eAlertDialogType` enum representing visualization type:
- Undefined
- Info
- Success
- Danger
- Warning
- **title**: Refers to the header of alert
- **message**: Corresponds to the message
- **time**: Specifies the duration in *seconds* for which the alert will be displayed



## Invoking alerts from PLC

Alerts can be invoked from PLC similarly like [AxoDialog](./AXODIALOG.md), however there is no need for user interaction.

```
VAR PUBLIC
_alertDialog : AXOpen.Core.AxoAlertDialog;
END_VAR
//...
IF(_alertDialog.Show(THIS)
.WithTitle('Plc alert')
.WithType(eDialogType#Success)
.WithMessage('This is alert invoked from plc!')
.WithTimeToBurn(UINT#5).IsShown() = true) THEN
//when task is done, move next
THIS.MoveNext();
END_IF;
```

> [!NOTE]
> `Alerts` invoked from PLC are synchronized across clients.
1. Make sure your Blazor application references `axopen_core_blazor` project and AxoCore services are added to builder in `Program.cs` file.

2. Make sure your `MainLayout.razor` file contains instance of `<AxoAlertToast/>` component.

3. Add `AxoAlertDialogLocator` with provided list of observed objects to your view. You can add it either to:

- `MainLayout.razor` file, where in consequence alerts will be displayed and synchronized across whole application.
- Your own razor file, where alerts will be synchronized across multiple clients but only displayed within that specific razor page.

> [!NOTE]
> Make sure, that exist only one instance of `AxoAlertDialogLocator` either in `MainLayout.razor` or in your own page.
```HTML
<AxoAlertDialogLocator ObservedObjects="new[] {Entry.Plc.Context.PneumaticManipulator}"/>
```



138 changes: 138 additions & 0 deletions docfx/articles/core/AXODIALOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
# AxoDialogs

AxoDialogs provide capability to interact with the user by rising dialogs directly from the PLC program.

## Example


```
VAR PUBLIC
_dialog : AXOpen.Core.AxoDialog;
END_VAR
//----------------------------------------------
IF(_dialog.Show(THIS)
.WithOk()
.WithType(eDialogType#Success)
.WithCaption('What`s next?')
.WithText('To continue click OK?').Answer() = eDialogAnswer#OK) THEN
//if answer is ok, move next in sequence
THIS.MoveNext();
END_IF;
```

![Modal ok Dialog](~/images/ok-dialog.png)

## Getting started

1. Make sure your Blazor application references `axopen_core_blazor` project and AxoCore services are added to builder in `Program.cs` file. Also, map `dialoghub` which is needed for dialog synchronization using SignalR technology.
```C#
builder.Services.AddAxoCoreServices();
//...
app.MapHub<DialogHub>("/dialoghub");
```



2. Go to your page, where you wish to have dialogs and include `AxoDialogLocator` component at the end of that page.

Provide list of `ObservedObjects`, on which you want to observe dialogs. You can also provide `DialogId`, which serves for synchronization of dialogs between multiple clients. If `DialogId` is not provided, the current *URI* is used as an id.

> [!IMPORTANT]
> Make sure, that each page has only one instance of `AxoDialogLocator` and that provided `DialogId` is unique across the application! If you wish to observe multiple objects, add them into `ObservedObjects` list.
```HTML
<AxoDialogLocator DialogId="custation001" ObservedObjects="new[] {Entry.Plc.Context.PneumaticManipulator}"/>
```

Now, when dialog is invoked in PLC, it will show on all clients and pages, where `AxoDialogLocator` is present with corresponding observed objects. The answers are synchronized across multiple clients.

## AxoDialog types

AxoDialogs contains currently 3 types of predefined dialogs:

1. Okay dialog
2. YesNo dialog
3. YesNoCancel dialog


![Dialog types](~/images/dialog-types.gif)

Also, the visual type of corresponding dialog can be adjusted with `eDialogType` enum, which is defined as follows:
```
eDialogType : INT (
Undefined := 0,
Info := 10,
Success := 20,
Danger := 30,
Warning := 40
);
```

## Answer synchronization on multiple clients

Answers of dialogs are synchronized across multiple clients with the SignalR technology.

![Dialog sync](~/images/dialog-sync.gif)


## Closing a dialog with external signal

External signals can be provided to dialog instance within a `ShowWithExternalClose` method, which can be then used to close dialog externally (for example from other page of application, or by pressing a hardware button...).

4 different signals can be monitored in `ShowWithExternalClose` method:
- inOkAnswerSignal
- inYesAnswerSignal
- inNoAnswerSignal
- inCancelAnswerSignal


Below is an example of closing dialog with `_externalCloseOkSignal` bool variable, which is set in other part of application:

```
VAR PUBLIC
_dialog : AXOpen.Core.AxoDialog;
_externalCloseOkSignal : BOOL;
_dialogAnswer : eDialogAnswer;
END_VAR
//----------------------------------------------
_dialogAnswer := _dialog.ShowWithExternalClose(THIS, _externalCloseOkSignal)
.WithOK()
.WithType(eDialogType#Info)
.WithCaption('Hello world!')
.WithText('You can also close me externally!').Answer();
IF(_dialog3Answer = eDialogAnswer#Ok) THEN
// if answer is provided, move next
THIS.MoveNext();
END_IF;
```

![Dialog sync](~/images/dialog-external-close.gif)

## Creation of own modal dialog


### PLC side
- Create own PLC instance of dialog, which extends `AxoDialogBase`.

- Define dialog structure and corresponding show method, which will initialize and invoke remote task needed for dialog creation.

### Blazor side
- Define Blazor view of modal dialog, which is then generated by `RenderableContentControl` according to presentation pipeline.
For example, when Dialog plc type is `MyCustomModal`, the view must by named `MyCustomModalDialogView`, because implementation is using `Dialog` presentation type.

The Blazor view must inherits from `@AxoDialogBaseView<MyCustomModal>`, where correct generic type of dialog from PLC must be passed. The opening/closing of dialog is managed in base class by virtual methods, which can be overridden if needed.

It is recommended to use provided `ModalDialog` Blazor component, which can be customized by user needs and is fully compatible with closing/opening synchronization approach provided in base class. Otherwise, the open/close virtual methods from base class must be overridden and accordingly adapted.

Example implementation of basic dialog can be found in [AxoDialogDialogView.razor](../../../src/core/src/AXOpen.Core.Blazor/AxoDialogs/AxoDialogDialogView/AxoDialogDialogView.razor).




6 changes: 6 additions & 0 deletions docfx/articles/data/AxoDataExchange.md
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,12 @@ With this option, buttons for export and import data will appear. After clicking

![Export](~/images/Export.png)

#### Custom export

You have the option to customize the exported files according to your preferences. This includes selecting specific columns and rows, choosing the desired file type, and specifying the separator. It's important to note that if you don't select all columns for export, importing the files may not be done correctly.

During the importing process, it is crucial to enter the same separator that was used during the export. If the default separator was used during the export, there is no need to make any changes.

For a better user experience, it is strongly recommended to clean the `Temp` directory when starting the application. The best way to do this is to add the following lines to the "Program.cs" file:

~~~ C#
Expand Down
Loading

0 comments on commit 59ed35f

Please sign in to comment.