Skip to content

Commit

Permalink
Migrate docs from the UI section
Browse files Browse the repository at this point in the history
Signed-off-by: Florian Hotze <[email protected]>
  • Loading branch information
florian-h05 committed Jan 26, 2024
1 parent f97fd9a commit 69e4330
Show file tree
Hide file tree
Showing 21 changed files with 381 additions and 371 deletions.
181 changes: 181 additions & 0 deletions mainui/about.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
---
layout: documentation
title: Help & About Page
---

# Help & About Page

<!-- START MAINUI SIDEBAR DOC - DO NOT REMOVE -->
This page shows general information of your openHAB configuration and allows to configure some client related configuration, including:

- UI appearance (theming, color scheme etc.)
- **Web Audio Sink** support
- Setting up the **UI Command Item**

<!-- END MAINUI SIDEBAR DOC - DO NOT REMOVE -->

[[toc]]

## Top Section

![img.png](../images/about-top-section.png)

- Version: shows the currently installed version of openHAB
- Links to the official openHAB Website, the openHAB Documentation and the Community Forum

## Technical Information

This section is collapsed by default and can be opened by clicking on it which then reveals the

- Configuration folder on the server
- User data folder on the server
- Logs folder on the server
- Operating System openHAB is running on
- Java Runtime openHAB is running on
- number of processors and memory

Clicking on View Details opens up a popup window that contains very detailed information like

- Runtime information
- Locale (language)
- System information including memory information
- A list of all installed bindings
- Client information including device information, client settings (see also the below section), screen information, theme, user agent information.

The content can be easily copied with the copy button on the top to provide it as additional information when asking questions in the community.

## Appearance (for this device only)

This section allows to have different appearance settings _per_ device.

- **Theme**: Selects the theme for that device
- Auto: tries to detect the client type
- Android
- iOS
- Desktop

![theme-selection.png](../images/theme-selection.png)

- **Dark mode** setting
- Auto: uses the default mode
- Light-Mode
- Dark-Mode

![dark-mode.png](../images/dark-mode.png)

- **Navigation bars style**: inverts the colors in the navigation bar

![navbar-style.png](../images/navbar-style.png)

## Miscellaneous settings

- **Simple navigation bar on home page**: When switching it on, it means the navigation bar will look the same even whether you're at the top of the page or not - you won't have the alternate look with the date.
The first image depicts the normal setting (off), the second image shows it switched off

![simple-nav-off.png](../images/simple-nav-off.png) ![simple-nav-on.png](images/simple-nav-on.png)

- **Standard home page background color**: This only relates to the light color scheme.
The background color will be the same as the regular pages you can show from e.g. the sidebar, which is a kind of gray instead of white.
The first image depicts the normal white setting (off), the second image shows it switched off with the gray setting.

![bg-white-setting.png](../images/bg-white-setting.png) ![bg-gray-setting.png](images/bg-gray-setting.png)

- **Disable card expansion animations**: Disables the animations when expanding a widget card.
- **Disable page transition animations**: Disables the transitions when switching from one page to the other.

## Web Audio Sink

Main UI implements a web audio sink which allows the openHAB server to play audio through the web browser.

To enable web audio sink support for a client, turn on the **Enable Web Audio sink support** option on the **Help & About** page.
As it is setting specific to your browser environment, web audio support has to be enabled for every client where it should be used.

Please note that due to limitations in Safari (and possibly Chrome as well), a user interaction is required after the first audio stream has been sent to actually play it.
This means, that after opening Main UI, the first audio that should be played on the web audio sink is only player after the user interacts with Main UI in any way (i.e. touching the screen is enough).
For subsequent audio playback, that is not required anymore and the audio is played immediately.

Please also note that you cannot address a particular web audio-enabled device.
When you play a sound on web audio, it will be played on all devices where web audio is enabled.

Web audio sinks can be used for example on wall-mounted tablets to make announcements using a [text-to-speech (TTS) engine]({{base}}/configuration/multimedia.html#text-to-speech) and play notification or alarm sounds.

For more information about audio sinks as well as audio and voice actions, please refer to the [multimedia configuration docs]({{base}}/configuration/multimedia.html), where you will also find examples including UI-based rules and Blockly.

### Testing Web Audio

To test if it works play some static content that comes with openHAB in the /sounds dir using an openHAB console command.
Use [openHABs console]({{base}}/administration/console.html#using-the-console) or just run the following from the Linux shell:

> openhab-cli console
and then enter the following command:

```text
openhab> audio play webaudio barking.mp3
```

If you have a dog that gets triggered by barking you may opt for playing `doorbell.mp3` instead.
If you play `doorbell.mp3` your dog will then probably play its own barking audio sound. 😉

Here are some useful actions available to rules in which you can specify webaudio as sink, see:

- [playSound]({{base}}/configuration/multimedia.html#actions-2)

```text
playSound("webaudio", "barking.mp3")
```

- [say]({{base}}/configuration/multimedia.html#actions-3)

```text
say("Hello world!", "voicerss:enUS", "webaudio")
```

You can also configure webaudio as sink when creating rules in the UI:

![play-rule.png](../images/play-rule.png)

or using it in a blockly rule:

![webaudio-blockly.png](../images/webaudio-blockly.png)

## UI Command Item

Main UI can be controlled from the openHAB server by setting up a so-called UI command Item.

Similarly to web audio support, this is a setting specific to your local browser environment, so you have to define the UI command Item for each client, which also allows you to different UI command Items for different clients.
To set up an Item as the UI command Item on your device, first create a particular Item of type `String`, then open the **Help & About** page from the menu and select an Item for the **Listen for UI command to** option.

The command Item has to be a `String` Item.
The UI is listening for commands to that Item, and if an Item command is a valid command string, the UI executes the given command.

Currently, the supported commands are:

- `navigate:$path`:
Navigate to a given `$path`, e.g. `navigate:/locations` to navigate to the **Locations** tab of the home page or `navigate:/page/my_custom_page` to navigate to a page with the ID `my_custom_page`.
For example, you can use this to open a video camera page of the door automatically when the doorbell is rung.
- `popup:$target`, `popover:$target` and `sheet:$target`:
Open a `$target`, which can be a page (`$target` is `page:` + a page ID), a custom widget (`$target` is `widget:` + widget ID) or any [`oh-` component]({{base}}/ui/components/) (`$target` is the component name), in a popup, popover or sheet.

For example, to open `oh-clock-card` inside a popup, send `popup:oh-clock-card` to the UI command Item.
- `notification:$text:$title:$subtitle:$titleRight:$closeTimeout`:
Display a notification inside the UI:
The `$text` parameter is mandatory, all other parameters are optional.
`$closeTimeout` is in milliseconds and defaults 5000, which means by default a notification will be closed after 5 seconds.
To leave out a parameter, leave a colon space empty, e.g. `notification:$text:$title:::$closeTimeout`.

For example, send `notification:This is the text.:This is the title.:This is the subtitle.:This is the right title.` to the UI command Item to display the following notification:
<p align="center"><img style="max-width: 40%;" src="../images/notification.png"/></p>
- `close`:
Close all popups, popovers and sheets.
- `back`:
Navigate back.
- `reload`:
Reload the current page.

## Reload

Main UI is using caching and service workers to locally store ressources to reduce loading times.
A consequence of this is, that updates might not always be properly recognized.

The reload buttons make Main UI to properly reload.
102 changes: 98 additions & 4 deletions mainui/addons.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,110 @@ title: Add-on Store
# Add-on Store

<!-- START MAINUI SIDEBAR DOC - DO NOT REMOVE -->
**Add-ons** grow openHAB's functionality.
**Add-ons** extend openHAB's functionality.

The Add-on Store allows you to install and remove many different types of add-ons:

- **Bindings**<br>
Communication functions between openHAB and different services or devices.
Connect and control hardware and online services.<br>
Official bindings maintained by openHAB maintainers are available from the **openHAB Distribution**, and the **Community Marketplace** provides bindings independently released by the community.
- **Automation**<br>
Scripting languages, pre-made rule template, and new Blockly functions.
Scripting languages, pre-made rule template, and Blockly block libraries.
- **Scripting Languages** like JavaScript and JRuby.
- **Technologies** like PID Controller, PWM (pulse width modulation).
- **Rule Templates** shared by the community to bootstrap your automation.
- [**Blockly**]({{base}}/configuration/blockly/) libraries that contain custom blocks written by the community.
- **UI**<br>
Pre-made UI widgets and other available UIs that work with openHAB.
- **Other**<br>
Full IoT ecosystem integration, data persistence services, item state transformations, and voice and speech.
Full IoT ecosystem integration, data persistence services, transformations services, and voice and speech.
<!-- END MAINUI SIDEBAR DOC - DO NOT REMOVE -->

Clicking on the individual add-on title reveals more information about the add-on:

- A general overview what it is about
- By clicking "more" the whole documentation is provided for the add-on
- An information section that provides
- Source (openHAB or Community Marketplace)
- Provided by (the author of the add-on)
- Type of add-on (binding, automation...)
- Content type (Karaf, Template, UI Widget...)
- Created and Update date
- A link to the related community forum entry

Note that there is a tab bar at the bottom that allows you to switch between the different pages:

![addons-toolbar](../images/addons-toolbar.png)

[[toc]]

## Bindings

Bindings are used to connect and control hardware and online services. This section provides bindings from openHAB Distribution, which have been thoroughly reviewed by the maintainers of openHAB, as well as bindings from the Community Marketplace.
If you want to know more about the marketplace, please read the following [Marketplace announcement](https://community.openhab.org/t/announcing-the-community-marketplace/127188).

To learn more how to install add-ons read the [Add-ons tutorial]({{base}}/configuration/addons).

## Automation

Automation provides technologies that allow you to write rules and scripts.

- **Languages & Technologies**<br>
openHAB comes with two languages by default: Rules DSL and Blockly (which requires a JavaScript Scripting automation add-on to be installed) while this section allows to install more languages and technologies.
To know more about them click on the respective tile.

- **Rule templates** provide you with solutions already written for certain usecases.<br>
Rule templates can be used when you have a common use case for a rule and for instance need to bootstrap several of them, or share with others how to solve that use case in a configurable manner.
These will appear in Main UI when you create a new rule, and will present you with the configuration parameters - after the rule is created, the pre-configured rule modules (triggers, conditions, actions) will appear based on your choices.

- Block Libraries: Community extensions to the [Blockly]({{base}}/configuration/blockly/) toolbox.<br>
These libraries extend the core blockly library with many useful blocks that might else be a bit too specific for the core block library or just fills the gap where a core block is still missing.
When installed they appear in a separate section beneath the core blocks of the blockly editor.

## User Interfaces

Community widgets & alternative frontends

- **Widgets for Main UI**: Extend your pages with these community-designed widgets.<br>
After adding a widget it can be used when creating UI page.
You can the press the "+" on a cell and a popup appears with two section: _Standard Library_, which contains the standard openHAB widgets and Personal Widgets, which contain UI widgets installed from the marketplace.
They can also be found for further adapting (or analyzing) the widget under "Developer Tools -> Widgets".
- **Other UI Add-ons**: Alternative user interfaces and icon sets.

## Other Add-ons

- **System integrations**: Integrate openHAB with external systems:
- openHAB Cloud Connector
- Homekit Integration
- openHAB Metric Service, an additional REST endpoint to retrieve openHAB core metrics from,
- and others...

- **Persistence**: Backend connectors to store historical data like:
- RRD
- InfluxDB
- MongoDB
- MapDB
- Several JDBC Connectors and
- JPA Persistence

- **Transformation Add-ons**: Extensions for a particular transformation like:
- JSONPath
- RegEx
- Map
- Binary To JSON
- Exec (executes an external program and returns the output as a string)
- Jinja
- Scale (the Scale transformation service is an easy to handle tool that can help you with the discretization of number inputs)
- Xpath
- XSLT
- Multi / long press transformation profile for rocker switch

- **Voice & Speech**: Convert between text and speech, interpret human language queries:
- Google Cloud Text-to-Speech
- Amazon Polly
- VoiceRSS Text-to-Speech
- and many more

## Search

Search for any of the above add-ons and then directly install it from here.
33 changes: 33 additions & 0 deletions mainui/developer/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
layout: documentation
title: Developer Tools - Overview
---

# Developer Tools - Overview

<!-- START MAINUI SIDEBAR DOC - DO NOT REMOVE -->
The developer tools page is split into two tabs:

- Expert Features
- Debugging Features: Test the SSE connection and test different implementations of an icon for different states.

The expert features include:

## Advanced Object Managment

- [**Widgets**](widgets)<br>
Develop custom widgets, that can be then used on your pages. Community made widgets can be installed from the **UI** tab of the add-on store.
- **Block Libraries**<br>
Even though Blockly comes with a large [library of blocks]({{base}}/configuration/blockly/) out of the box, you can still extend it by developing your own Block libraries.
- **Add Items from textual definition**<br>
Create or update Items and links in bulk by using the [`.items`-file syntax]({{base}}/configuration/items).

## Maintenance Tools

- **Developer Sidebar**
The [developer sidebar]({{base}}/mainui/developer/sidebar) is accessible from anywhere in the UI and provides both an integrated help and developer tools, like the universal search or the widget expression tester.
In fact does the integrated help render selected parts of the [Main UI documentation]({{base}}/mainui).
So if you read this from the website: You can also read this from inside the UI.
- **API Explorer**
Interactively discover and access the [REST API]({{base}}/configuration/restdocs), which is also used by Main UI to interact with the openHAB server.
<!-- END MAINUI SIDEBAR DOC - DO NOT REMOVE -->
55 changes: 55 additions & 0 deletions mainui/developer/sidebar.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
---
layout: documentation
title: Developer Tools - Developer Sidebar
---

# Developer Tools - Developer Sidebar

<!-- START MAINUI SIDEBAR DOC - DO NOT REMOVE -->
Main UI provides a developer sidebar for administrator user(s), that is accessible from anywhere in the UI.
The developer sidebar is split into a "tools" section with several useful tools including a [universal search]({{base}}/mainui/developer/sidebar#developer-sidebar-search) across nearly all UI-configurable entities and a widget expression tester,
and a "help" section aiming at providing help and useful information regarding configuration and setup.

<!-- END MAINUI SIDEBAR DOC - DO NOT REMOVE -->

If your device's screen is wide enough (it has to be at least 1280 pixels wide), you can open the developer side-panel by:

- Opening the **Developer Tools** page from the menu and enabling the developer sidebar.
- Clicking on the help icon displayed in the upper right corner of most pages.
- Pressing the key combination <kbd>Alt</kbd><kbd>Shift</kbd><kbd>D</kbd> on your keyboard.

## Developer Sidebar Search

As already mentioned, the developer sidebar provides a universal search across nearly all UI-configurable entities.
This means, you can search through most configuration available in Main UI, including Things, Items, pages.

Imagine you need to find all usages of an Item.
You could start to open all rules, scenes and scripts, check persistence configuration and have a look at pages and sitemaps to find usages of that Item - Or you use the developer sidebar search.

The developer sidebar search ignores case (so it doesn't matter whether you search `LivingRoom_Light` or `livingroom_light`) and searches inside the following entities:

- Things
- UID
- label
- Items
- name
- label
- tags (requires exact match, i.e. if the Item has a tag `Lightbulb`, only the search query `Lightbulb` (case doesn't matter) will match)
- metadata
- Pages (including Sitemaps)
- uid
- label
- content (widgets, tabs, charts, etc. with their configuration)/slots
- Transformations
- uid
- label
- type
- Rules, Scenes & Scripts
- Item name & Thing UID of triggers, actions & conditions
- script code (e.g. Rules DSL, JavaScript, and even Blockly)
- script MIME types (requires exact match)
- Blockly scripts (using `block`, `blockly` or `blocksource` as search string, where case is ignored)
- tags (requires exact match)
- Persistence Configurations:
- label & service id of persistence service
- Items persisted by persistence service
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
Loading

0 comments on commit 69e4330

Please sign in to comment.