Skip to content

Commit

Permalink
replace old image path with new one
Browse files Browse the repository at this point in the history
  • Loading branch information
iaktern committed Feb 4, 2025
1 parent bd0bb6d commit e313c9b
Show file tree
Hide file tree
Showing 6 changed files with 37 additions and 57 deletions.
38 changes: 9 additions & 29 deletions pages/adv-capability-description.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Capability-based Execution: Overview

![Capability Process Overview](/docs/images/capability-process/PROCEED-Capability_Process_Overview.png)
![Capability Process Overview](/images/capability-process/PROCEED-Capability_Process_Overview.png)

**Four important roles/stakeholders:**

Expand Down Expand Up @@ -244,18 +244,12 @@ The following JSON-LD file describes the capability of a PhotographAction and ho
},
{
"@type": "fnom:PropertyParameterMapping",
"fnom:functionParameter": [
"_:optionsParameter",
"_:blackWhiteParameter"
],
"fnom:functionParameter": ["_:optionsParameter", "_:blackWhiteParameter"],
"fnom:implementationProperty": "options/blackWhite"
},
{
"@type": "fnom:PropertyParameterMapping",
"fnom:functionParameter": [
"_:optionsParameter",
"_:rotationParameter"
],
"fnom:functionParameter": ["_:optionsParameter", "_:rotationParameter"],
"fnom:implementationProperty": "options/rotation"
}
],
Expand All @@ -267,36 +261,22 @@ The following JSON-LD file describes the capability of a PhotographAction and ho
},
{
"@type": "fnom:DefaultReturnMapping",
"fnom:functionParameter": [
"_:imageParameter",
"_:geoCoordinatesParameter"
],
"fnom:functionParameter": ["_:imageParameter", "_:geoCoordinatesParameter"],
"fnom:implementationProperty": "img/gps"
},
{
"@type": "fnom:DefaultReturnMapping",
"fnom:functionParameter": [
"_:imageParameter",
"_:geoCoordinatesParameter",
"_:latiduteParameter"
],
"fnom:functionParameter": ["_:imageParameter", "_:geoCoordinatesParameter", "_:latiduteParameter"],
"fnom:implementationProperty": "img/gps/lat"
},
{
"@type": "fnom:DefaultReturnMapping",
"fnom:functionParameter": [
"_:imageParameter",
"_:geoCoordinatesParameter",
"_:longitudeParameter"
],
"fnom:functionParameter": ["_:imageParameter", "_:geoCoordinatesParameter", "_:longitudeParameter"],
"fnom:implementationProperty": "img/gps/long"
},
{
"@type": "fnom:DefaultReturnMapping",
"fnom:functionParameter": [
"_:imageParameter",
"_:photographParameter"
],
"fnom:functionParameter": ["_:imageParameter", "_:photographParameter"],
"fnom:implementationProperty": "img/photo"
}
]
Expand Down Expand Up @@ -548,7 +528,7 @@ Therefore using [Saref](http://ontology.tno.nl/saref/) is a better alternative a

## Step 3: Sending the Capabilities (Optional Step)

![Capability Process Overview](/docs/images/capability-process/PROCEED-Capability-2-Sending.png)
![Capability Process Overview](/images/capability-process/PROCEED-Capability-2-Sending.png)

- a _compacted_ semantic description is sent. That means the description does not contain any local implementation details (which is only needed by an Engine to know how to execute the capability, see Table 1)
- since a Machine can have multiple Capabilities installed, a consollidated list with all Capabilities is sent from the Machine
Expand All @@ -575,6 +555,6 @@ Within this comparison step

## Step 6: Calling the Capability on an Engine

![Capability Process Overview](/docs/images/capability-process/PROCEED-Capability-5-Execution.png)
![Capability Process Overview](/images/capability-process/PROCEED-Capability-5-Execution.png)

- the Capability Executor translates the call of the Capability in the Script Task to the local installed Capability function
2 changes: 1 addition & 1 deletion pages/adv-process-deployment/dynamic_deployment.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,6 @@ to add manually more capabilities.
of the next task to start

![PROCEED Engine Architecture
Overview](/docs/images/architecture/PROCEED-Engine_process_separation.png)
Overview](/images/architecture/PROCEED-Engine_process_separation.png)

#### Step 5: Repeat Step 4 until the end of the Process is reached
10 changes: 5 additions & 5 deletions pages/developer/bpmn/bpmn-general-serialization.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,9 @@ https://www.omg.org/spec/BPMN/20100501/BPMN20.xsd"` for schema validation
- `exporterVersion` contains the version number of the Management System

{/* PROCEED specific attributes */}
{/* - `proceed:version` contains the version of the process as a date in milliseconds. It changes if something changes in the process. [See here](versioning)
{/\* - `proceed:version` contains the version of the process as a date in milliseconds. It changes if something changes in the process. [See here](versioning)

- `proceed:versionBasedOn` if the process was created from another one, it references the version of the original process */}
- `proceed:versionBasedOn` if the process was created from another one, it references the version of the original process \*/}

- `proceed:originalId`: (optional) if the process was imported into PROCEED's
Management System, this contains the original definition _id_
Expand Down Expand Up @@ -172,13 +172,13 @@ data : - `name` attribute is required and a string : - can be used on every
level, i.e. on `<process>` or every flow node : - the value is specified inside
the content of the element

{/* ## Versioning
{/\* ## Versioning

Process artifacts (User Task, Scripts, etc.) will be versioned with the attribute `proceed:version`.

## Monitoring

*/}
\*/}

### Example

Expand Down Expand Up @@ -254,7 +254,7 @@ Process artifacts (User Task, Scripts, etc.) will be versioned with the attribut
<proceed:timePlannedEnd>2020-07-01T00:00:00+01:00</proceed:timePlannedEnd>
<proceed:timePlannedDuration>P2M10D</proceed:timePlannedDuration>
<proceed:costsPlanned unit="Euro">3000.50</proceed:costsPlanned>
<proceed:overviewImage>https://docs.proceed-labs.org/docs/images/favicon.png</proceed:overviewImage>
<proceed:overviewImage>https://docs.proceed-labs.org/images/favicon.png</proceed:overviewImage>
<proceed:property name="editor">VSCode</proceed:property>
</proceed:meta>

Expand Down
2 changes: 1 addition & 1 deletion pages/user-guide/automation/arch-overview.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
The following picture presents the architectural overview of PROCEED. It actually has only two different software components: the _Management System_ (MS) and the _Distributed Process Engine_ (DPE, or only _Engine_).

![PROCEEDs architecture](/docs/images/architecture/Decentralized_BPMS_extended_with_Machines.png?width=1000px)
![PROCEEDs architecture](/images/architecture/Decentralized_BPMS_extended_with_Machines.png?width=1000px)

## The Management System (MS)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,4 +29,4 @@ The Properties Panel can be accessed in the Process Editor and shows many proper
In order to edit the properties of a certain element within a process, the element needs to be selected by clicking on it.
The Properties Panel will then update its overview and show all properties which can be edited.

![Properties Panel](/docs/images/user-guide/process-data/properties-panel.png?width=1000px&classes=border)
![Properties Panel](/images/user-guide/process-data/properties-panel.png?width=1000px&classes=border)
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
User tasks are semi-manual activities in which an IT system works together with a human actor.
I.e., a human actor gets and picks a task from his [_task list_](http://localhost:33029/):

![Picture of a tasklist](/docs/images/user-guide/user-tasks/tasklist_with_two_tasks.png?width=800px&classes=border)
![Picture of a tasklist](/images/user-guide/user-tasks/tasklist_with_two_tasks.png?width=800px&classes=border)

The tasklist can currently be opened on the port 33029 on the Machine (IP) that runs the PROCEED Engine, e.g. http://localhost:33029/

## Create a new User Task

In the process editor, a user task can be created via the wrench symbol and by selecting the correct task type.

![From an activity to a user task](/docs/images/user-guide/user-tasks/activity_to_user_task.png?width=400px&classes=border)
![From an activity to a user task](/images/user-guide/user-tasks/activity_to_user_task.png?width=400px&classes=border)

After clicking on the new User Task, in the upper center of the process editor a blue button _EDIT USER TASK FORM_ is appearing which needs to be clicked to get to the HTML editor.

![The edit user task form button appears](/docs/images/user-guide/user-tasks/edit_user_task_button.png?width=400px&classes=border)
![The edit user task form button appears](/images/user-guide/user-tasks/edit_user_task_button.png?width=400px&classes=border)

## The HTML editor

Within the simple HTML editor you can create the content and design of the User Task.
To showcase a very simple example, a default page is assigned to every new User Task which will be shown if you open the editor the first time.

![HTML editor landing page](/docs/images/user-guide/user-tasks/html_editor_landing_page.png?width=800px&classes=border)
![HTML editor landing page](/images/user-guide/user-tasks/html_editor_landing_page.png?width=800px&classes=border)

The main area in the middle show the content.
On top there is a Menubar and on the right side is the editing panel.
Expand All @@ -29,7 +29,7 @@ There is no _Cancel_ button since every change is saved immediately.

### The Menubar

![HTML editor Menubar](/docs/images/user-guide/user-tasks/html_editor_menubar.png?width=800px&classes=border)
![HTML editor Menubar](/images/user-guide/user-tasks/html_editor_menubar.png?width=800px&classes=border)

The Menubar has on the left side three symbols to change the viewport size. This is useful to develop responsive layouts and check if everything is positioned correctly for different screen sizes.

Expand All @@ -38,26 +38,26 @@ The first icon, the empty square icon, highlights all components inside the main

Most useful is probably the _source code_ symbol which shows the HTML and CSS source code. You can use the popup editor to directly edit the code of the HTML page. As you can notice here, the complete HTML page is put into a HTML `<form> ... </form>` element.

![Html editor source code editor](/docs/images/user-guide/user-tasks/html_editor_source_code_editor.png?width=600px&classes=border)
![Html editor source code editor](/images/user-guide/user-tasks/html_editor_source_code_editor.png?width=600px&classes=border)

### The Editing Panel

The Editing Panel on the right has multiple _tabs_.
The right one with the four-filled-square icon shows multiple components that can be dragged and dropped into the main area. It is subdivided into three areas _Basic, Extra_ and _Forms_. For a better overview, they can be collapsed and expanded.

![The components tab of the editing panel](/docs/images/user-guide/user-tasks/html_editor_editing_panel_components_tab.png?width=200px&classes=border)
![The components tab of the editing panel](/images/user-guide/user-tasks/html_editor_editing_panel_components_tab.png?width=200px&classes=border)

The hamburger icon tab displays the structure of the HTML page in a tree structure. You can use it to move components to another position or to make them invisible.

![The structure tab of the editing panel](/docs/images/user-guide/user-tasks/html_editor_editing_panel_structure_tab.png?width=200px&classes=border)
![The structure tab of the editing panel](/images/user-guide/user-tasks/html_editor_editing_panel_structure_tab.png?width=200px&classes=border)

If you select a component in the main area, this component gets a thick blue border and displays some useful icons on its top right corner to move, copy or delete it. Also, the left paintbrush icon in the editor panel is selected. In multiple areas (_General, Layout, Typography, Decorations, Extra_) it allows you to change the layout, design and style of the element.

![The layout tab of the editing panel](/docs/images/user-guide/user-tasks/html_editor_select_element.png?width=800px&classes=border)
![The layout tab of the editing panel](/images/user-guide/user-tasks/html_editor_select_element.png?width=800px&classes=border)

Furthermore, after selecting a component you can click the gear icon to open the configuration page of the component. There, you can configure every HTML attribute of the element. For example, in case of the button you can change the text here.

![The HTML attribute tab of the editing panel](/docs/images/user-guide/user-tasks/html_editor_select_element_gear_icon.png?width=800px&classes=border)
![The HTML attribute tab of the editing panel](/images/user-guide/user-tasks/html_editor_select_element_gear_icon.png?width=800px&classes=border)

## Use Process Variables

Expand All @@ -70,7 +70,7 @@ There are some more interesting things you can do within curly brackets:
- Looping over arrays with the _for_ operator: `{for variable in array} <p>{variable}</p> {/for}`
- Conditional displaying of information with _if_: `{if variable}<p>Text</p>{else}<p>No variable!</p>{/if}` and `{if not variable}<p>No variable!</p>{/if}`

![Templates can be inserted with braces inside the HTML](/docs/images/user-guide/user-tasks/html_editor_template_engine.png?width=800px&classes=border)
![Templates can be inserted with braces inside the HTML](/images/user-guide/user-tasks/html_editor_template_engine.png?width=800px&classes=border)

The above picture shows the different possibilities used inside the HTML. Let's assume, the following process variables are given:

Expand All @@ -91,14 +91,14 @@ errorInMachineA = false

Then the task renders at runtime to the following HTML representation:

![The rendered variables inside the HTML](/docs/images/user-guide/user-tasks/tasklist_rendered_variables.png?width=1000px&classes=border)
![The rendered variables inside the HTML](/images/user-guide/user-tasks/tasklist_rendered_variables.png?width=1000px&classes=border)

## Set Process Variables

You have also the possibility to let the process participant set new process variables from within a task.
This is done by using `input` or `textarea` fields inside the HTML:

![Form fields inside the HTML editor](/docs/images/user-guide/user-tasks/html_editor_form_fields.png?width=1000px&classes=border)
![Form fields inside the HTML editor](/images/user-guide/user-tasks/html_editor_form_fields.png?width=1000px&classes=border)

It is important to set the `name` attribute to the name of the process variable in which the value should be stored.
This can be done via the HTML editor by clicking on the gear icon.
Expand All @@ -122,22 +122,22 @@ Afterwards the HTML code should somehow look like this:
In its tasklist, the user fills the form fields with content.
By clicking on a _submit_ button the values get transferred to the process engine and are stored in the process variables.

![Filled form fields inside a task](/docs/images/user-guide/user-tasks/tasklist_with_input_filled_fields.png)
![Filled form fields inside a task](/images/user-guide/user-tasks/tasklist_with_input_filled_fields.png)

## Milestones

Milestones indicate the progress to reach a certain goal.
You can define Milestones in the Environment View and then assign the Milestones to User Tasks via the BPMN Property Panel:

![Selection of Milestones for a User Task](/docs/images/user-guide/user-tasks/milestone_selection.png?width=500px&classes=border)
![Selection of Milestones for a User Task](/images/user-guide/user-tasks/milestone_selection.png?width=500px&classes=border)

This will automatically generate a Milestone Box in the HTML. You can adapt the generated code or delete it.

![The generated Milestone Block in the User HTML](/docs/images/user-guide/user-tasks/milestone_generated_html.png?width=600px&classes=border)
![The generated Milestone Block in the User HTML](/images/user-guide/user-tasks/milestone_generated_html.png?width=600px&classes=border)

If the generated code should be restored after some changes, the easiest way is to use the Milestone component of the right Editing panel.

![The Milestone component in the HTML editor](/docs/images/user-guide/user-tasks/milestone_html_component.png?width=150px&classes=border)
![The Milestone component in the HTML editor](/images/user-guide/user-tasks/milestone_html_component.png?width=150px&classes=border)

## Task Constraints

Expand All @@ -149,11 +149,11 @@ In this case the constraint can easily be removed via the graphical interface.
If the HTML page references an online resource, e.g. a picture hosted on the internet, a second constraint needs to be added to ensure that the executing Machine has Internet access.
This is sometimes automatically recognized and added (`machine.online == true`).

![Two constraints for a user task to have a display and an internet connection](/docs/images/user-guide/user-tasks/user_task_constraints.png)
![Two constraints for a user task to have a display and an internet connection](/images/user-guide/user-tasks/user_task_constraints.png)

{/*
{/\*

## Assign User and Roles

LATER
*/}
\*/}

0 comments on commit e313c9b

Please sign in to comment.