Skip to content

Commit

Permalink
Changing the images names and the docs with that images
Browse files Browse the repository at this point in the history
  • Loading branch information
aitormurgu committed Mar 6, 2024
1 parent 19d711e commit fad239a
Show file tree
Hide file tree
Showing 59 changed files with 50 additions and 50 deletions.
6 changes: 3 additions & 3 deletions docs/How-to guides/How to create a dashboard.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ In order to create a dashboard having a device-type with at least one message ty
Dashboards are created from the “Dashboards” list. Just a name and an optional description are requested.

<div class="tutorial-image-container">
![Dashboards](/img/Dashboards.png)
![Dashboards](/img/dashboards.png)
</div>

When clicking on “create” an empty dashboard is created.
<div class="tutorial-image-container">
![Empty dashboard](/img/EmptyDashboard.png)
![Empty dashboard](/img/empty-dashboard.png)
</div>

## Creating panels
Expand All @@ -30,7 +30,7 @@ A dashboard is composed of one or more panels. To create a new one use the “Ne
At the moment the available panel types are the following: time-series, pie chart and gauge.

<div class="tutorial-image-container">
![creating panels](/img/creating-panels.png)
![Creating panels](/img/creating-panels.png)
</div>

### General information
Expand Down
8 changes: 4 additions & 4 deletions docs/How-to guides/How to create a schema.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ In order to create a schema having a deceive-type with at least one message type
Schemas are created from the Setup > Data ingestion flow > Device-type > Message-type “New schema”

<div class="tutorial-image-container">
![Creating a schema](/img/CreatingSchema.png)
![Creating a schema](/img/creating-schema.png)
</div>
When clicking on “New schema” an empty schema is created.

<div class="tutorial-image-container">
![New schema](/img/NewSchema.png)
![New schema](/img/new-schema.png)
</div>
First thing will be giving a name to the schema, the purpose of this is just to identify it, it is not further used in the communication or data sending.

Expand All @@ -27,7 +27,7 @@ First thing will be giving a name to the schema, the purpose of this is just to
After naming the schema the proper and important specification happens under the ‘Schema definition’ section. It is time to let Biotz know how the sending data is structured. Once ‘Add new item’ is selected, a set of different item types are offered to cover almost all the data sending options:

<div class="tutorial-image-container">
![item types](/img/itemTypes.png)
![Item types](/img/item-types.png)
</div>

Detailed specification of the item types is shared in <a href="./Message-type Schema specification
Expand Down Expand Up @@ -64,7 +64,7 @@ Timestamp ones, the same as the rest with an extra one:
- Payload timestamp?: to be marked if this is the timestamp Biotz should use for the time series date mark.

<div class="tutorial-image-container">
![Payload Timestamp](/img/payloadTimestamp.png)
![Payload Timestamp](/img/payload-timestamp.png)
</div>

Once the schema is totally represented the ‘save’ button will register the schema. This will create the necessary machinery for the data validation and ingestion, it will also create the needed database structure for the data to be stored.
Expand Down
12 changes: 6 additions & 6 deletions docs/How-to guides/How to create developer API credentials.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,27 +10,27 @@ To create applications that consume our data we have a Developer API, following
In order to connect with the API, you need to create some **credentials** in the credentials view, under the **Developer API** section

<div class="tutorial-image-container">
![credentials creation](/img/credentials-creation.png)
![Credentials creation](/img/credentials-creation.png)
</div>


Once here, clicking in the **New credentials** button will redirect you to the form. In this view we have to set the credentials name, a description can also be set to differentiate better between one another.
<div class="tutorial-image-container">
![new credentials](/img/new-credentials.png)
![New credentials](/img/new-credentials.png)
</div>
<br></br>

When finished, click **Save** and it will show the user information:
<div class="tutorial-image-container">
![credentials created succesfully](/img/credentials-created-succesfully.png)
![Credentials created succesfully](/img/credentials-created-succesfully.png)
</div>
As shown in the pop-up, this information will only appear once. So download the credentials file and save somewhere safe.

## API consumption

Now that we have our credentials created. We need to configure the authentication. For this example we will use the API documentation mentioned before.
<div class="tutorial-image-container">
![developer](/img/biotz-developer-api.png)
![Developer](/img/biotz-developer-api.png)
</div>
Clicking the **Authorize** button a pop-up will show, in which we need to add this information, also found on the
<a href="./" target="_self">Developer API</a>.
Expand All @@ -43,12 +43,12 @@ Clicking the **Authorize** button a pop-up will show, in which we need to add th
- **Scopes:** You need to check the openid box.

<div class="tutorial-image-container">
![authorize1](/img/authorize1.png)
![Authorize1](/img/authorize-1.png)
</div>
When the authorization is done correctly, you should see a pop-up saying that your **Authorized**.

<div class="tutorial-image-container">
![authorize2](/img/authorize2.png)
![authorize2](/img/authorize-2.png)
</div>
With this your capable of consuming the API and get the needed data.

Expand Down
16 changes: 8 additions & 8 deletions docs/How-to guides/How to invite users.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ Only organization administrators can invite new users.

New users are created from the user list view. The list can be accessed from 'Users' in the 'Organization management' section in the sidebar menu.
<div class="tutorial-image-container">
![Invite New User](/img/InviteNewUser.png)
![Invite New User](/img/invite-new-user.png)
</div>
There, new users can be created using the “Add new user” button.

<div class="tutorial-image-container">
![Add new user](/img/AddUser.png)
![Add new user](/img/add-user.png)
</div>
For creating the new user only an email address is required. Upon pressing save, the web application will notify the user if the process was successful or not.

Expand All @@ -27,32 +27,32 @@ For creating the new user only an email address is required. Upon pressing save,
When a new user is created, a welcome email is sent.

<div class="tutorial-image-container">
![Accept Invitation](/img/AcceptInvitation.png)
![Accept Invitation](/img/accept-invitation.png)
</div>

The email contains a URL that the new user has to open when it’s ready to set up its login credentials.

<div class="tutorial-image-container">
![Login Credentials](/img/LoginCredentials.png)
![Login Credentials](/img/login-credentials.png)
</div>

Opening the URL will trigger another email to be sent.

<div class="tutorial-image-container">
![Actualizar Cuenta](/img/ActualizarCuenta.png)
![Actualizar Cuenta](/img/actualizar-cuenta.png)
</div>

Clicking on the second email will redirect the user to the authentication provider. There the user will have to type the password that wants to use to login into Biotz.

<div class="tutorial-image-container">
![Update Password](/img/UpdatePassword.png)
![Update Password](/img/update-password.png)
</div>

<div class="tutorial-image-container">
![Update Password2](/img/UpdatePassword2.png)
![Update Password2](/img/update-password-2.png)
</div>
And finally the user will be redirected to the login page, where it can start using Biotz.
<div class="tutorial-image-container">
![Login Page](/img/LoginPage.png)
![Login Page](/img/login-page.png)
</div>

4 changes: 2 additions & 2 deletions docs/How-to guides/How to register devices.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ Follow the steps:
- That will present the form for the device registration.

<div class="tutorial-image-container">
![Using the UI](/img/UsingUI.png)
![Using the UI](/img/using-ui.png)
</div>

Parameters description:
Expand All @@ -45,7 +45,7 @@ Follow the steps:
- That will present the form for the device registration.
-
<div class="tutorial-image-container">
![Using the CSV way](/img/UsingCSVway.png)
![Using the CSV way](/img/using-csv-way.png)
</div>
Parameters description:

Expand Down
6 changes: 3 additions & 3 deletions docs/How-to guides/How to use dashboard variables.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ The dashboard has to be pre-created, and at least one device is needed.
The variables are created from the dashboard edition view. For that click on the “pencil” icon in the dashboard toolbar.

<div class="tutorial-image-container">
![Dashboard Toolbars](/img/dashboardToolbar.png)
![Dashboard Toolbars](/img/dashboard-toolbar.png)
</div>

Creating a variable only requires specifying a name and selecting a device-type.
Expand All @@ -25,7 +25,7 @@ Creating a variable only requires specifying a name and selecting a device-type.
The dashboard variables are always device-type specific to ensure that all the selectable devices are compatible with the dashboard panel queries in which the variable is used.

<div class="tutorial-image-container">
![Documentation Dasboard](/img/documentationDashboard.png)
![Documentation Dasboard](/img/documentation-dashboard.png)
</div>

Up to 4 variables can be defined.
Expand All @@ -38,7 +38,7 @@ Once a dashboard variable is defined it can be used when defining dashboard pane
For that, click on the “Variable, select a variable defined in the dashboard” in the query builder. Then select a specific variable from the list. Continue with the rest of the form as when selecting a specific device.

<div class="tutorial-image-container">
![Specific Device](/img/SpecificDevice.png)
![Specific Device](/img/specific-device.png)
</div>

The dashboard variable is now ready to use. Changing the device in the dashboard view will update the corresponding panels.
2 changes: 1 addition & 1 deletion docs/Reference guides/Message-type Schema specification.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Supported data types:
- <a href="https://msgpack.org/#core-types/" target="_self">MessagePack</a>
- DB column type
<div class="tutorial-image-container">
![message-type-schema](/img/message-type-schema.png)
![Message type schema](/img/message-type-schema.png)
</div>

Additional information about some of the data types above:
Expand Down
10 changes: 5 additions & 5 deletions docs/Tutorials/Creating a Biotz account.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,19 @@ Please not that In order to complete this tutorial you will need a valid email a
First navigate to the [Biotz Cloud](https://auth.biotz.io/realms/biotz-platform/protocol/openid-connect/auth?client_id=biotz-platform-spa&redirect_uri=https%3A%2F%2Fapp.biotz.io%2Foverview&state=9821fae0-b8ea-4b9f-b7f2-ebe9ad3c482c&response_mode=fragment&response_type=code&scope=openid&nonce=2063c301-fb70-4d7e-81f0-5790cefcf23f&ui_locales=en&code_challenge=bj-DokiKe4Pu4Xfta9-fhtiK1qjA8--GqPnUwWXfv1Y&code_challenge_method=S256). Once here you will be presented with the login page:

<div class="tutorial-image-container">
![sign-in](/img/SignIn.png)
![Sign in](/img/sign-in.png)
</div>

Since you do not have an account yet, hit the **Register** link at the bottom, below the **Sign In** button. This will lead you to the registration page.

<div class="tutorial-image-container">
![New Device2](/img/Register.png)
![Register](/img/register.png)
</div>

As can be seen in the image above, the registration form asks for just your **Email** address and a **Password**. Once you have entered that information, hit **Register** and you will be prompted to accept the **Terms and Conditions** of Biotz. By accepting them, an email will be sent to you to verify your email address and activate your account.

<div class="tutorial-image-container">
![Verifying](/img/Verifying.png)
![Verifying](/img/verifying.png)
</div>

In case you didn’t receive an email, you can try sending it again by clicking on the **Click here to resend the email** link.
Expand All @@ -36,13 +36,13 @@ The email you received will have a verification link that you have to use before
By navigating to the verification link you will see the following page:

<div class="tutorial-image-container">
![Confirm](/img/Confirm.png)
![Confirm](/img/confirm.png)
</div>

Just click on the link below **Click here to proceed** and you will have verified your email account.

<div class="tutorial-image-container">
![Click here](/img/ClickHere.png)
![Click here](/img/click-here.png)
</div>

# Creating your organisation
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,20 @@
Before we start sending and ingesting data you have to configure your Biotz account to be able to know **who** is sending data and **how** to process it. The first step is to create a Device Type, which will allow you to categorise your devices. Assuming you have signed in into the application, from the sidebar, in the **Setup** section, click on **Device Type**.

<div class="tutorial-image-container">
![Confirm](/img/DeviceType.png)
![Device type](/img/device-type.png)
</div>

You will be presented with the following page:

<div class="tutorial-image-container">
![Confirm](/img/NewDeviceType.png)
![New Device Type](/img/new-device-type.png)
</div>


If you haven’t created any Device Type yet this table should be empty. Now, on the top right corner of the table click on New Device Type. Once you have done, you will have to fill a few details about the device type such as name and optionally description as can been seen in the image below:

<div class="tutorial-image-container">
![Confirm](/img/createNew.png)
![Create New](/img/create-new.png)
</div>


Expand All @@ -34,7 +34,7 @@ The **Internal name** is auto-generated based on the **Name** you write. However
Leave the **Internal name** unchanged and click on **Save**. If there is nothing wrong, the device type should be created and you will be notified that is succeeded:

<div class="tutorial-image-container">
![Confirm](/img/Created.png)
![Confirm](/img/created.png)
</div>

Now that you have created a Device Type, the next step is to <a href="./Step 2 - Creating a Message Type" target="_self">create a Message Type </a>.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
As the name implies this is a type of message your device can send. If your device outputs different information structures, each of them would be a different Message Type. In this tutorial, you will create a single Message Type for the sake of simplicity. To do so, from the sidebar, in the **Setup** section, click on **Data Ingestion Flow**. You will be presented with the following page:

<div class="tutorial-image-container">
![Confirm](/img/dataIngestionFlow.png)
![Data ingestion flow](/img/data-ingestion-flow.png)
</div>

This is a table listing the different Device Types you have. As per this tutorial instructions, and assuming you did not create any resources yet, you should see only one Device Type which is the one you created in the previous step, **My test device type**.
Expand All @@ -17,7 +17,7 @@ Fill the form with the following information:
- **Message encoding: JSON**

<div class="tutorial-image-container">
![Confirm](/img/NewMessageType.png)
![New message type](/img/new-message-type.png)
</div>


Expand Down
12 changes: 6 additions & 6 deletions docs/Tutorials/Getting started/Step 3 - Creating a Schema.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,20 @@ Now that you have created a Message Type, you have to define the shape of the da
Schemas have a set of data types you can choose in order to define the shape of the data you are sending. It ranges from simple types such as **Integers**, **Decimals** and **Boolean** to more complex types like **Objects/Dictionaries** and **Collection/Arrays**. Each with their own properties and restrictions. This tutorial will not dive into the intricacies of each data type but if you wish to get a more detailed explanation about them, please refer to its reference guide \<add link to message type schema reference here>\. With that said, assuming you are still in the **My test message type** page (the one you created in the previous step), click on **New schema**. Once you have done that you will see the following page:

<div class="tutorial-image-container">
![Confirm](/img/dataIngestionForm.png)
![Data ingestion form](/img/data-ingestion-form.png)
</div>

Schemas are defined with items. They can be a single item or multiple items depending on **Item type** you select. To create your first item click on **Add new item**. This will open up a dropdown with the different item data types you can choose from. For the purpose of this tutorial select the **Object** item type.

<div class="tutorial-image-container">
![Confirm](/img/AllSchemas.png)
![All schemas](/img/all-schemas.png)
</div>


After doing so, you will see that a new button appears below the new selected item type. That is because the **Object** item type is a complex type and can have child items. Now, click on **Add new item**.

<div class="tutorial-image-container">
![Confirm](/img/AddNewItem.png)
![Add new item](/img/add-new-item.png)
</div>

There is a new element on the screen now named Key name. It is a special property of Objects since they are composed of key value pairs. However, bear in mind that you are just defining the structure, not the actual values in this section. Now, select the Decimal item. This will show up yet another element on the screen named Item name. This is the name or rather the internal name that Biotz will use to store and reference your ingested data. So, keep in mind that what you can type in this input element is very restricted \<link to schema restrictions>\. With that out of the way, input the following information for each field:
Expand All @@ -46,7 +46,7 @@ You might have noticed that to your right there are two checkboxes:
Biotz will use this information to validate the data it receives from your device. In case the shape of the data does not fulfil the defined schema constraints, it will be rejected and discarded. For this tutorial check **Mandatory?** and leave **Can be null?** unchecked.

<div class="tutorial-image-container">
![Confirm](/img/SchemaDefinition.png)
![Schema definition](/img/schema-definition.png)
</div>
Now, add another item and fill in the following details:

Expand All @@ -58,7 +58,7 @@ Now, add another item and fill in the following details:
- **Can be null?: unchecked.**

<div class="tutorial-image-container">
![Confirm](/img/SchemaDefinition2.png)
![Schema definition 2](/img/schema-definition-2.png)
</div>

Last but not least, we have a special item that serves to create a reliable timeline of the data we receive from your devices. For each object created, we can add more than one timestamp, but only one with the Payload timestamp? option checked. This will mark the item as responsible for telling the time of collection by your device. In case this item is not provided, Biotz will add one, but note that this is from when we received the data and may not be as accurate as the one from the device.
Expand All @@ -67,7 +67,7 @@ For this tutorial we are not going to add this item, but in case you want to add


<div class="tutorial-image-container">
![Confirm](/img/SpecialItem.png)
![Special item](/img/special-item.png)
</div>


Expand Down
4 changes: 2 additions & 2 deletions docs/Tutorials/Getting started/Step 4 - Creating a device.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
Before sending any data you need to register a device. To do so, from the sidebar, in the **Device Management** section, click on **Devices**. This will show up a list of devices. In the top right corner you click on **New device**. You will see the following form:

<div class="tutorial-image-container">
![New Device](/img/NewDevice.png)
![New Device](/img/new-device.png)
</div>

From the **Device type** dropdown list select **My test device type**. Remember that this device type contains all the configuration you have done before. For the name input **My test device** and the same for **Description**. For the **Timezone** select your time zone. Finally, you can optionally add **Tags** to your new device. **Tags** are just key value pairs that serve as metadata about your device. Add one by clicking on **Add new tag**. You can add as many tags as you desire. Tags are useful to filter your devices for example or to add additional information to them.

<div class="tutorial-image-container">
![New Device2](/img/NewDevice2.png)
![New Device 2](/img/new-device-2.png)
</div>

Now, click on **Save**. By doing so, Biotz will register the new device in the platform and perform certain actions to create the credentials for your device. Once it is done, you will automatically download the device credentials file. In the credentials file you will have important and sensitive information about your device. Among other things it contains the username and password of your device that is required to interact with Biotz services. Even though this is a tutorial, bear in mind that the credentials file should be stored in a safe place and avoid sharing it over the network. With this information before sending data to Biotz we need to <a href="./Step 5 - Authenticating a device" target="_self">authenticate and get our token</a>.
Expand Down
Loading

0 comments on commit fad239a

Please sign in to comment.