OpenHAB
/
openhab-webui
mirror of https://github.com/openhab/openhab-webui.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

New SIP client component & widget (#1453) 

Update components docs.

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
Also-by: Dan Cunningham <dan@digitaldan.com>
pull/1459/head
Florian Hotze 2022-07-29 22:23:45 +02:00 committed by GitHub
parent 420c3ed0dd
commit 1d5b1719a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 1910 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bundles/org.openhab.ui/doc/components/index.md
View File

@ -24,6 +24,7 @@ source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.u
| [`oh-player`](./oh-player.html) | [Media player](./oh-player.html) | Media player controls, with previous track/pause/play/next buttons |
| [`oh-repeater`](./oh-repeater.html) | [Repeater](./oh-repeater.html) | Iterate over an array and repeat the children components in the default slot |
| [`oh-rollershutter`](./oh-rollershutter.html) | [Rollershutter](./oh-rollershutter.html) | Rollershutter control, with up/down/stop buttons |
| [`oh-sipclient`](./oh-sipclient.html) | [SIP Client](./oh-sipclient.html) | SIP Client to call and answer SIP calls |
| [`oh-slider`](./oh-slider.html) | [Slider](./oh-slider.html) | Slider control, allows to pick a number value on a scale |
| [`oh-stepper`](./oh-stepper.html) | [Stepper](./oh-stepper.html) | Stepper control, allows to input a number or decrement/increment it using buttons |
| [`oh-swiper`](./oh-swiper.html) | [Swiper](./oh-swiper.html) | Swiper control, allows to display multiple swipeable slides |
@ -47,6 +48,7 @@ source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.u
| [`oh-list-card`](./oh-list-card.html) | [List Card](./oh-list-card.html) | Display a list in a card |
| [`oh-player-card`](./oh-player-card.html) | [Player Card](./oh-player-card.html) | Display player controls in a card |
| [`oh-rollershutter-card`](./oh-rollershutter-card.html) | [Rollershutter Card](./oh-rollershutter-card.html) | Display rollershutter controls in a card |
| [`oh-sipclient-card`](./oh-sipclient-card.html) | [SIP Client Card](./oh-sipclient-card.html) | Client to start and answer SIP calls |
| [`oh-slider-card`](./oh-slider-card.html) | [Slider Card](./oh-slider-card.html) | Display a slider in a card to control an item |
| [`oh-stepper-card`](./oh-stepper-card.html) | [Stepper Card](./oh-stepper-card.html) | Display a stepper in a card to control an item |
| [`oh-swiper-card`](./oh-swiper-card.html) | [Swiper Card](./oh-swiper-card.html) | Display a swiper allowing to browse slides, in a card |

149
bundles/org.openhab.ui/doc/components/oh-aggregate-series.md
View File

@ -137,6 +137,155 @@ prev: /docs/ui/components/
</PropGroup>
</div>
### Action
<div class="props">
<PropGroup name="actions" label="Action">
Action to perform when the element is clicked
<PropBlock type="TEXT" name="action" label="Action">
<PropDescription>
Type of action to perform
</PropDescription>
<PropOptions>
<PropOption value="navigate" label="Navigate to page" />
<PropOption value="command" label="Send command" />
<PropOption value="toggle" label="Toggle item" />
<PropOption value="options" label="Command options" />
<PropOption value="rule" label="Run rule" />
<PropOption value="popup" label="Open popup" />
<PropOption value="popover" label="Open popover" />
<PropOption value="sheet" label="Open sheet" />
<PropOption value="photos" label="Open photo browser" />
<PropOption value="group" label="Group details" />
<PropOption value="analyzer" label="Analyze item(s)" />
<PropOption value="url" label="External URL" />
<PropOption value="variable" label="Set Variable" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
<PropDescription>
URL to navigate to
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
<PropDescription>
Open the URL in the same tab/window instead of a new one. This will exit the app.
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
<PropDescription>
Item to perform the action on
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
<PropDescription>
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
<PropDescription>
Command to send to the item when "toggle item" is selected as the action, and the item's state is equal to the command above
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
<PropDescription>
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
<PropDescription>
Rule to run
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
<PropDescription>
Page to navigate to
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
<PropDescription>
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
</PropDescription>
<PropOptions>
<PropOption value="f7-circle" label="Circle" />
<PropOption value="f7-cover" label="Cover" />
<PropOption value="f7-cover-v" label="Cover from bottom" />
<PropOption value="f7-dive" label="Dive" />
<PropOption value="f7-fade" label="Fade" />
<PropOption value="f7-flip" label="Flip" />
<PropOption value="f7-parallax" label="Parallax" />
<PropOption value="f7-push" label="Push" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
<PropDescription>
Page or widget to display in the modal
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
<PropDescription>
Configuration (prop values) for the target modal page or widget
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
<PropDescription>
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
<PropDescription>
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
<PropDescription>
Group item whose members to show in a popup
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
<PropDescription>
Start analyzing with the specified (set of) item(s)
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
<PropDescription>
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
</PropDescription>
<PropOptions>
<PropOption value="(empty)" label="Dynamic" />
<PropOption value="day" label="Day" />
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
<PropOption value="month" label="Month" />
<PropOption value="year" label="Year" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
<PropDescription>
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
</PropDescription>
<PropOptions>
<PropOption value="time" label="Time" />
<PropOption value="aggregate" label="Aggregate" />
<PropOption value="calendar" label="Calendar" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
<PropDescription>
Shows a toast popup when the action has been executed. Can either be a text to show or a JSON object including some of the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionVariable" label="Variable">
<PropDescription>
The variable name to set
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
<PropDescription>
The value to set the variable to
</PropDescription>
</PropBlock>
</PropGroup>
</div>
<!-- GENERATED /props -->

149
bundles/org.openhab.ui/doc/components/oh-button.md
View File

@ -256,6 +256,155 @@ Button performing an action
</PropGroup>
</div>
### Tap Hold
<div class="props">
<PropGroup name="taphold_actions" label="Tap Hold">
Action performed when tapping and holding card (or calling contextual menu on desktop)
<PropBlock type="TEXT" name="taphold_action" label="Action">
<PropDescription>
Type of action to perform
</PropDescription>
<PropOptions>
<PropOption value="navigate" label="Navigate to page" />
<PropOption value="command" label="Send command" />
<PropOption value="toggle" label="Toggle item" />
<PropOption value="options" label="Command options" />
<PropOption value="rule" label="Run rule" />
<PropOption value="popup" label="Open popup" />
<PropOption value="popover" label="Open popover" />
<PropOption value="sheet" label="Open sheet" />
<PropOption value="photos" label="Open photo browser" />
<PropOption value="group" label="Group details" />
<PropOption value="analyzer" label="Analyze item(s)" />
<PropOption value="url" label="External URL" />
<PropOption value="variable" label="Set Variable" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionUrl" label="Action URL" context="url">
<PropDescription>
URL to navigate to
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="taphold_actionUrlSameWindow" label="Open in same tab/window">
<PropDescription>
Open the URL in the same tab/window instead of a new one. This will exit the app.
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionItem" label="Action Item" context="item">
<PropDescription>
Item to perform the action on
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionCommand" label="Action Command">
<PropDescription>
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionCommandAlt" label="Action Toggle Command">
<PropDescription>
Command to send to the item when "toggle item" is selected as the action, and the item's state is equal to the command above
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionOptions" label="Command Options">
<PropDescription>
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionRule" label="Rule" context="rule">
<PropDescription>
Rule to run
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionPage" label="Page" context="page">
<PropDescription>
Page to navigate to
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionPageTransition" label="Transition Effect">
<PropDescription>
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
</PropDescription>
<PropOptions>
<PropOption value="f7-circle" label="Circle" />
<PropOption value="f7-cover" label="Cover" />
<PropOption value="f7-cover-v" label="Cover from bottom" />
<PropOption value="f7-dive" label="Dive" />
<PropOption value="f7-fade" label="Fade" />
<PropOption value="f7-flip" label="Flip" />
<PropOption value="f7-parallax" label="Parallax" />
<PropOption value="f7-push" label="Push" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionModal" label="Modal Page or Widget" context="pagewidget">
<PropDescription>
Page or widget to display in the modal
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionModalConfig" label="Modal component configuration" context="props">
<PropDescription>
Configuration (prop values) for the target modal page or widget
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionPhotos" label="Images to show">
<PropDescription>
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionPhotoBrowserConfig" label="Photo browser configuration">
<PropDescription>
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionGroupPopupItem" label="Group Popup Item" context="item">
<PropDescription>
Group item whose members to show in a popup
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionAnalyzerItems" label="Item(s) to Analyze" context="item">
<PropDescription>
Start analyzing with the specified (set of) item(s)
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionAnalyzerChartType" label="Chart Type">
<PropDescription>
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
</PropDescription>
<PropOptions>
<PropOption value="(empty)" label="Dynamic" />
<PropOption value="day" label="Day" />
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
<PropOption value="month" label="Month" />
<PropOption value="year" label="Year" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionAnalyzerCoordSystem" label="Initial Coordinate System">
<PropDescription>
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
</PropDescription>
<PropOptions>
<PropOption value="time" label="Time" />
<PropOption value="aggregate" label="Aggregate" />
<PropOption value="calendar" label="Calendar" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionFeedback" label="Action feedback">
<PropDescription>
Shows a toast popup when the action has been executed. Can either be a text to show or a JSON object including some of the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionVariable" label="Variable">
<PropDescription>
The variable name to set
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionVariableValue" label="Variable Value">
<PropDescription>
The value to set the variable to
</PropDescription>
</PropBlock>
</PropGroup>
</div>
<!-- GENERATED /props -->

149
bundles/org.openhab.ui/doc/components/oh-calendar-axis.md
View File

@ -54,6 +54,155 @@ prev: /docs/ui/components/
</PropGroup>
</div>
### Action
<div class="props">
<PropGroup name="actions" label="Action">
Action to perform when the element is clicked
<PropBlock type="TEXT" name="action" label="Action">
<PropDescription>
Type of action to perform
</PropDescription>
<PropOptions>
<PropOption value="navigate" label="Navigate to page" />
<PropOption value="command" label="Send command" />
<PropOption value="toggle" label="Toggle item" />
<PropOption value="options" label="Command options" />
<PropOption value="rule" label="Run rule" />
<PropOption value="popup" label="Open popup" />
<PropOption value="popover" label="Open popover" />
<PropOption value="sheet" label="Open sheet" />
<PropOption value="photos" label="Open photo browser" />
<PropOption value="group" label="Group details" />
<PropOption value="analyzer" label="Analyze item(s)" />
<PropOption value="url" label="External URL" />
<PropOption value="variable" label="Set Variable" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
<PropDescription>
URL to navigate to
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
<PropDescription>
Open the URL in the same tab/window instead of a new one. This will exit the app.
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
<PropDescription>
Item to perform the action on
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
<PropDescription>
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
<PropDescription>
Command to send to the item when "toggle item" is selected as the action, and the item's state is equal to the command above
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
<PropDescription>
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
<PropDescription>
Rule to run
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
<PropDescription>
Page to navigate to
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
<PropDescription>
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
</PropDescription>
<PropOptions>
<PropOption value="f7-circle" label="Circle" />
<PropOption value="f7-cover" label="Cover" />
<PropOption value="f7-cover-v" label="Cover from bottom" />
<PropOption value="f7-dive" label="Dive" />
<PropOption value="f7-fade" label="Fade" />
<PropOption value="f7-flip" label="Flip" />
<PropOption value="f7-parallax" label="Parallax" />
<PropOption value="f7-push" label="Push" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
<PropDescription>
Page or widget to display in the modal
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
<PropDescription>
Configuration (prop values) for the target modal page or widget
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
<PropDescription>
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
<PropDescription>
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
<PropDescription>
Group item whose members to show in a popup
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
<PropDescription>
Start analyzing with the specified (set of) item(s)
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
<PropDescription>
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
</PropDescription>
<PropOptions>
<PropOption value="(empty)" label="Dynamic" />
<PropOption value="day" label="Day" />
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
<PropOption value="month" label="Month" />
<PropOption value="year" label="Year" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
<PropDescription>
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
</PropDescription>
<PropOptions>
<PropOption value="time" label="Time" />
<PropOption value="aggregate" label="Aggregate" />
<PropOption value="calendar" label="Calendar" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
<PropDescription>
Shows a toast popup when the action has been executed. Can either be a text to show or a JSON object including some of the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionVariable" label="Variable">
<PropDescription>
The variable name to set
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
<PropDescription>
The value to set the variable to
</PropDescription>
</PropBlock>
</PropGroup>
</div>
<!-- GENERATED /props -->

149
bundles/org.openhab.ui/doc/components/oh-calendar-series.md
View File

@ -99,6 +99,155 @@ prev: /docs/ui/components/
</PropGroup>
</div>
### Action
<div class="props">
<PropGroup name="actions" label="Action">
Action to perform when the element is clicked
<PropBlock type="TEXT" name="action" label="Action">
<PropDescription>
Type of action to perform
</PropDescription>
<PropOptions>
<PropOption value="navigate" label="Navigate to page" />
<PropOption value="command" label="Send command" />
<PropOption value="toggle" label="Toggle item" />
<PropOption value="options" label="Command options" />
<PropOption value="rule" label="Run rule" />
<PropOption value="popup" label="Open popup" />
<PropOption value="popover" label="Open popover" />
<PropOption value="sheet" label="Open sheet" />
<PropOption value="photos" label="Open photo browser" />
<PropOption value="group" label="Group details" />
<PropOption value="analyzer" label="Analyze item(s)" />
<PropOption value="url" label="External URL" />
<PropOption value="variable" label="Set Variable" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
<PropDescription>
URL to navigate to
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
<PropDescription>
Open the URL in the same tab/window instead of a new one. This will exit the app.
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
<PropDescription>
Item to perform the action on
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
<PropDescription>
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
<PropDescription>
Command to send to the item when "toggle item" is selected as the action, and the item's state is equal to the command above
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
<PropDescription>
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
<PropDescription>
Rule to run
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
<PropDescription>
Page to navigate to
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
<PropDescription>
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
</PropDescription>
<PropOptions>
<PropOption value="f7-circle" label="Circle" />
<PropOption value="f7-cover" label="Cover" />
<PropOption value="f7-cover-v" label="Cover from bottom" />
<PropOption value="f7-dive" label="Dive" />
<PropOption value="f7-fade" label="Fade" />
<PropOption value="f7-flip" label="Flip" />
<PropOption value="f7-parallax" label="Parallax" />
<PropOption value="f7-push" label="Push" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
<PropDescription>
Page or widget to display in the modal
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
<PropDescription>
Configuration (prop values) for the target modal page or widget
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
<PropDescription>
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
<PropDescription>
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
<PropDescription>
Group item whose members to show in a popup
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
<PropDescription>
Start analyzing with the specified (set of) item(s)
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
<PropDescription>
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
</PropDescription>
<PropOptions>
<PropOption value="(empty)" label="Dynamic" />
<PropOption value="day" label="Day" />
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
<PropOption value="month" label="Month" />
<PropOption value="year" label="Year" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
<PropDescription>
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
</PropDescription>
<PropOptions>
<PropOption value="time" label="Time" />
<PropOption value="aggregate" label="Aggregate" />
<PropOption value="calendar" label="Calendar" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
<PropDescription>
Shows a toast popup when the action has been executed. Can either be a text to show or a JSON object including some of the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionVariable" label="Variable">
<PropDescription>
The variable name to set
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
<PropDescription>
The value to set the variable to
</PropDescription>
</PropBlock>
</PropGroup>
</div>
<!-- GENERATED /props -->

149
bundles/org.openhab.ui/doc/components/oh-data-series.md
View File

@ -40,6 +40,155 @@ prev: /docs/ui/components/
</PropGroup>
</div>
### Action
<div class="props">
<PropGroup name="actions" label="Action">
Action to perform when the element is clicked
<PropBlock type="TEXT" name="action" label="Action">
<PropDescription>
Type of action to perform
</PropDescription>
<PropOptions>
<PropOption value="navigate" label="Navigate to page" />
<PropOption value="command" label="Send command" />
<PropOption value="toggle" label="Toggle item" />
<PropOption value="options" label="Command options" />
<PropOption value="rule" label="Run rule" />
<PropOption value="popup" label="Open popup" />
<PropOption value="popover" label="Open popover" />
<PropOption value="sheet" label="Open sheet" />
<PropOption value="photos" label="Open photo browser" />
<PropOption value="group" label="Group details" />
<PropOption value="analyzer" label="Analyze item(s)" />
<PropOption value="url" label="External URL" />
<PropOption value="variable" label="Set Variable" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
<PropDescription>
URL to navigate to
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
<PropDescription>
Open the URL in the same tab/window instead of a new one. This will exit the app.
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
<PropDescription>
Item to perform the action on
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
<PropDescription>
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
<PropDescription>
Command to send to the item when "toggle item" is selected as the action, and the item's state is equal to the command above
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
<PropDescription>
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
<PropDescription>
Rule to run
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
<PropDescription>
Page to navigate to
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
<PropDescription>
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
</PropDescription>
<PropOptions>
<PropOption value="f7-circle" label="Circle" />
<PropOption value="f7-cover" label="Cover" />
<PropOption value="f7-cover-v" label="Cover from bottom" />
<PropOption value="f7-dive" label="Dive" />
<PropOption value="f7-fade" label="Fade" />
<PropOption value="f7-flip" label="Flip" />
<PropOption value="f7-parallax" label="Parallax" />
<PropOption value="f7-push" label="Push" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
<PropDescription>
Page or widget to display in the modal
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
<PropDescription>
Configuration (prop values) for the target modal page or widget
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
<PropDescription>
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
<PropDescription>
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
<PropDescription>
Group item whose members to show in a popup
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
<PropDescription>
Start analyzing with the specified (set of) item(s)
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
<PropDescription>
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
</PropDescription>
<PropOptions>
<PropOption value="(empty)" label="Dynamic" />
<PropOption value="day" label="Day" />
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
<PropOption value="month" label="Month" />
<PropOption value="year" label="Year" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
<PropDescription>
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
</PropDescription>
<PropOptions>
<PropOption value="time" label="Time" />
<PropOption value="aggregate" label="Aggregate" />
<PropOption value="calendar" label="Calendar" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
<PropDescription>
Shows a toast popup when the action has been executed. Can either be a text to show or a JSON object including some of the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionVariable" label="Variable">
<PropDescription>
The variable name to set
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
<PropDescription>
The value to set the variable to
</PropDescription>
</PropBlock>
</PropGroup>
</div>
<!-- GENERATED /props -->

5
bundles/org.openhab.ui/doc/components/oh-input-card.md
View File

@ -115,6 +115,11 @@ Display an input in a card
Link the input value to the state of this item
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="useDisplayState" label="Use Display State">
<PropDescription>
Use the formatted state as the value for the input control
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="defaultValue" label="Default value">
<PropDescription>
Default value when not found in item state or variable

5
bundles/org.openhab.ui/doc/components/oh-input-item.md
View File

@ -120,6 +120,11 @@ Display an input field in a list
Link the input value to the state of this item
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="useDisplayState" label="Use Display State">
<PropDescription>
Use the formatted state as the value for the input control
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="defaultValue" label="Default value">
<PropDescription>
Default value when not found in item state or variable

5
bundles/org.openhab.ui/doc/components/oh-input.md
View File

@ -83,6 +83,11 @@ Displays an input field, used to set a variable
Link the input value to the state of this item
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="useDisplayState" label="Use Display State">
<PropDescription>
Use the formatted state as the value for the input control
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="defaultValue" label="Default value">
<PropDescription>
Default value when not found in item state or variable

149
bundles/org.openhab.ui/doc/components/oh-label-card.md
View File

@ -206,6 +206,155 @@ Display the state of an item in a card
</PropGroup>
</div>
### Tap Hold
<div class="props">
<PropGroup name="taphold_actions" label="Tap Hold">
Action performed when tapping and holding card (or calling contextual menu on desktop)
<PropBlock type="TEXT" name="taphold_action" label="Action">
<PropDescription>
Type of action to perform
</PropDescription>
<PropOptions>
<PropOption value="navigate" label="Navigate to page" />
<PropOption value="command" label="Send command" />
<PropOption value="toggle" label="Toggle item" />
<PropOption value="options" label="Command options" />
<PropOption value="rule" label="Run rule" />
<PropOption value="popup" label="Open popup" />
<PropOption value="popover" label="Open popover" />
<PropOption value="sheet" label="Open sheet" />
<PropOption value="photos" label="Open photo browser" />
<PropOption value="group" label="Group details" />
<PropOption value="analyzer" label="Analyze item(s)" />
<PropOption value="url" label="External URL" />
<PropOption value="variable" label="Set Variable" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionUrl" label="Action URL" context="url">
<PropDescription>
URL to navigate to
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="taphold_actionUrlSameWindow" label="Open in same tab/window">
<PropDescription>
Open the URL in the same tab/window instead of a new one. This will exit the app.
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionItem" label="Action Item" context="item">
<PropDescription>
Item to perform the action on
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionCommand" label="Action Command">
<PropDescription>
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionCommandAlt" label="Action Toggle Command">
<PropDescription>
Command to send to the item when "toggle item" is selected as the action, and the item's state is equal to the command above
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionOptions" label="Command Options">
<PropDescription>
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionRule" label="Rule" context="rule">
<PropDescription>
Rule to run
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionPage" label="Page" context="page">
<PropDescription>
Page to navigate to
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionPageTransition" label="Transition Effect">
<PropDescription>
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
</PropDescription>
<PropOptions>
<PropOption value="f7-circle" label="Circle" />
<PropOption value="f7-cover" label="Cover" />
<PropOption value="f7-cover-v" label="Cover from bottom" />
<PropOption value="f7-dive" label="Dive" />
<PropOption value="f7-fade" label="Fade" />
<PropOption value="f7-flip" label="Flip" />
<PropOption value="f7-parallax" label="Parallax" />
<PropOption value="f7-push" label="Push" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionModal" label="Modal Page or Widget" context="pagewidget">
<PropDescription>
Page or widget to display in the modal
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionModalConfig" label="Modal component configuration" context="props">
<PropDescription>
Configuration (prop values) for the target modal page or widget
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionPhotos" label="Images to show">
<PropDescription>
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionPhotoBrowserConfig" label="Photo browser configuration">
<PropDescription>
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionGroupPopupItem" label="Group Popup Item" context="item">
<PropDescription>
Group item whose members to show in a popup
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionAnalyzerItems" label="Item(s) to Analyze" context="item">
<PropDescription>
Start analyzing with the specified (set of) item(s)
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionAnalyzerChartType" label="Chart Type">
<PropDescription>
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
</PropDescription>
<PropOptions>
<PropOption value="(empty)" label="Dynamic" />
<PropOption value="day" label="Day" />
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
<PropOption value="month" label="Month" />
<PropOption value="year" label="Year" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionAnalyzerCoordSystem" label="Initial Coordinate System">
<PropDescription>
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
</PropDescription>
<PropOptions>
<PropOption value="time" label="Time" />
<PropOption value="aggregate" label="Aggregate" />
<PropOption value="calendar" label="Calendar" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionFeedback" label="Action feedback">
<PropDescription>
Shows a toast popup when the action has been executed. Can either be a text to show or a JSON object including some of the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionVariable" label="Variable">
<PropDescription>
The variable name to set
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="taphold_actionVariableValue" label="Variable Value">
<PropDescription>
The value to set the variable to
</PropDescription>
</PropBlock>
</PropGroup>
</div>
### Label
<div class="props">
<PropGroup name="label" label="Label">

34
bundles/org.openhab.ui/doc/components/oh-plan-marker.md
View File

@ -49,6 +49,7 @@ A marker on a floor plan
### Icon
<div class="props">
<PropGroup name="icon" label="Icon">
You can customize the styles further with CSS attributes in the <code>iconStyle</code> parameter (in YAML only)
<PropBlock type="TEXT" name="icon" label="Icon">
<PropDescription>
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>), <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>) or <code>iconify:iconSet:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://icon-sets.iconify.design">Iconify icon</a>, requires being online if not in cache)
@ -79,6 +80,11 @@ A marker on a floor plan
Color of the icon (for Framework7/Material/certain Iconify icons); use expression for dynamic colors
</PropDescription>
</PropBlock>
<PropBlock type="INTEGER" name="iconRotation" label="Icon Rotation">
<PropDescription>
Rotation of the icon in degrees
</PropDescription>
</PropBlock>
</PropGroup>
</div>
@ -108,6 +114,34 @@ A marker on a floor plan
Color of the tooltip
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="tooltipDirection" label="Tooltip Direction">
<PropDescription>
The direction of the tooltip
</PropDescription>
<PropOptions>
<PropOption value="top" label="Top" />
<PropOption value="bottom" label="Bottom" />
<PropOption value="left" label="Left" />
<PropOption value="right" label="Right" />
<PropOption value="center" label="Center" />
<PropOption value="auto" label="Auto" />
</PropOptions>
</PropBlock>
<PropBlock type="INTEGER" name="tooltipOffsetX" label="Tooltip Offset X">
<PropDescription>
The X offset of the tooltip from the marker in pixels
</PropDescription>
</PropBlock>
<PropBlock type="INTEGER" name="tooltipOffsetY" label="Tooltip Offset Y">
<PropDescription>
The Y offset of the tooltip from the marker in pixels
</PropDescription>
</PropBlock>
<PropBlock type="DECIMAL" name="tooltipOpacity" label="Tooltip Opacity">
<PropDescription>
The opacity of the tooltip (0-1)
</PropDescription>
</PropBlock>
</PropGroup>
</div>

10
bundles/org.openhab.ui/doc/components/oh-plan-page.md
View File

@ -71,6 +71,16 @@ Displays markers on an image overlay
Apply an invert filter to the image in dark mode - use with images in black & white or grayscale for best results
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="tooltipColor" label="Tooltip Color">
<PropDescription>
Color of the tooltip. "Black or White" means it will be black in dark mode and white in light mode
</PropDescription>
<PropOptions>
<PropOption value="white" label="White" />
<PropOption value="black" label="Black" />
<PropOption value="blackwhite" label="Black or White" />
</PropOptions>
</PropBlock>
</PropGroup>
</div>

180
bundles/org.openhab.ui/doc/components/oh-sipclient-card.md Normal file
View File

@ -0,0 +1,180 @@
---
title: oh-sipclient-card - SIP Client Card
component: oh-sipclient-card
label: SIP Client Card
description: SIP Client
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-sipclient-card.md
prev: /docs/ui/components/
---
# oh-sipclient-card - SIP Client Card
<!-- Put a screenshot here if relevant:
![](./images/oh-sipclient-card/header.jpg)
-->
[[toc]]
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
<!-- GENERATED componentDescription -->
Client to start and answer SIP calls
<!-- GENERATED /componentDescription -->
## Configuration
<!-- DO NOT REMOVE the following comments -->
<!-- GENERATED props -->
### Card
<div class="props">
<PropGroup name="card" label="Card">
Parameters of the card
<PropBlock type="TEXT" name="title" label="Title">
<PropDescription>
Title of the card
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="footer" label="Footer text">
<PropDescription>
Footer of the card
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
<PropDescription>
Do not render the card border
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
<PropDescription>
Do not render a shadow effect to the card
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="outline" label="Outline">
<PropDescription>
Show the card outline
</PropDescription>
</PropBlock>
</PropGroup>
</div>
### SIP Settings
<div class="props">
<PropGroup name="sip" label="SIP Settings">
<PropBlock type="INTEGER" name="iconSize" label="Icon Size">
<PropDescription>
Size of the icon(s) in px
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="websocketUrl" label="Websocket URL" required="true">
<PropDescription>
Full URL of the WebRTC SIP websocket, e.g. 'wss://siphost:8089/ws' or relative path, e.g. '/ws', for Android & iOS, you need wss (WebSocket secured)
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="domain" label="Domain" required="true">
<PropDescription>
SIP Domain
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="username" label="Username" required="true">
<PropDescription>
SIP Username
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="password" label="Password" required="true">
<PropDescription>
SIP Password
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="enableTones" label="Enable tones">
<PropDescription>
Enable ringback and ring tone, might cause issues with your browser, so that your call fails
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="hideCallerId" label="Hide caller id">
<PropDescription>
Hides the username of the remote party on incoming call
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="phonebook" label="Phonebook" required="true">
<PropDescription>
Single SIP Address (phone number) for a single call target or a comma-separated list of 'phoneNumber=name' for multiple call targets
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="enableVideo" label="Enable Video">
<PropDescription>
Enable video calling
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="enableLocalVideo" label="Enable Local Video View">
<PropDescription>
Display the local camera on video calls
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="defaultVideoAspectRatio" label="Default Aspect Ratio">
<PropDescription>
Default video aspect ratio used to size the widget before video is loaded. Defaults to 4/3, 16/9 and 1 are common alternatives.
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="dtmfString" label="DTMF String">
<PropDescription>
Display a button to send a preset DTMF string while in calls for remote doors, gates, etc...
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="enableSIPDebug" label="Enable SIP debugging to the console">
</PropBlock>
</PropGroup>
</div>
<!-- GENERATED /props -->
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
### Inherited Properties
-->
<!-- If applicable describe the slots recognized by the component and what they represent:
### Slots
#### `default`
The contents of the oh-sipclient-card.
-->
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
## Examples
### Example 1
![](./images/oh-sipclient-card/example1.jpg)
```yaml
component: oh-sipclient-card
config:
prop1: value1
prop2: value2
```
### Example 2
![](./images/oh-sipclient-card/example2.jpg)
::: details YAML
```yaml
component: oh-sipclient-card
config:
prop1: value1
prop2: value2
slots
```
:::
-->
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
## Community Resources
- [Community Post 1](https://community.openhab.org/t/12345)
- [Community Post 2](https://community.openhab.org/t/23456)
-->

148
bundles/org.openhab.ui/doc/components/oh-sipclient.md Normal file
View File

@ -0,0 +1,148 @@
---
title: oh-sipclient - SIP Client
component: oh-sipclient
label: SIP Client
description: Use SIP over WebSocket to perform calls
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-sipclient.md
prev: /docs/ui/components/
---
# oh-sipclient - SIP Client
<!-- Put a screenshot here if relevant:
![](./images/oh-sipclient/header.jpg)
-->
[[toc]]
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
<!-- GENERATED componentDescription -->
SIP Client to call and answer SIP calls
<!-- GENERATED /componentDescription -->
## Configuration
<!-- DO NOT REMOVE the following comments -->
<!-- GENERATED props -->
### General
<div class="props">
<PropGroup label="General">
<PropBlock type="INTEGER" name="iconSize" label="Icon Size">
<PropDescription>
Size of the icon(s) in px
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="websocketUrl" label="Websocket URL" required="true">
<PropDescription>
Full URL of the WebRTC SIP websocket, e.g. 'wss://siphost:8089/ws' or relative path, e.g. '/ws', for Android & iOS, you need wss (WebSocket secured)
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="domain" label="Domain" required="true">
<PropDescription>
SIP Domain
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="username" label="Username" required="true">
<PropDescription>
SIP Username
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="password" label="Password" required="true">
<PropDescription>
SIP Password
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="enableTones" label="Enable tones">
<PropDescription>
Enable ringback and ring tone, might cause issues with your browser, so that your call fails
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="hideCallerId" label="Hide caller id">
<PropDescription>
Hides the username of the remote party on incoming call
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="phonebook" label="Phonebook" required="true">
<PropDescription>
Single SIP Address (phone number) for a single call target or a comma-separated list of 'phoneNumber=name' for multiple call targets
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="enableVideo" label="Enable Video">
<PropDescription>
Enable video calling
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="enableLocalVideo" label="Enable Local Video View">
<PropDescription>
Display the local camera on video calls
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="defaultVideoAspectRatio" label="Default Aspect Ratio">
<PropDescription>
Default video aspect ratio used to size the widget before video is loaded. Defaults to 4/3, 16/9 and 1 are common alternatives.
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="dtmfString" label="DTMF String">
<PropDescription>
Display a button to send a preset DTMF string while in calls for remote doors, gates, etc...
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="enableSIPDebug" label="Enable SIP debugging to the console">
</PropBlock>
</PropGroup>
</div>
<!-- GENERATED /props -->
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
### Inherited Properties
-->
<!-- If applicable describe the slots recognized by the component and what they represent:
### Slots
#### `default`
The contents of the oh-sipclient.
-->
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
## Examples
### Example 1
![](./images/oh-sipclient/example1.jpg)
```yaml
component: oh-sipclient
config:
prop1: value1
prop2: value2
```
### Example 2
![](./images/oh-sipclient/example2.jpg)
::: details YAML
```yaml
component: oh-sipclient
config:
prop1: value1
prop2: value2
slots
```
:::
-->
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
## Community Resources
- [Community Post 1](https://community.openhab.org/t/12345)
- [Community Post 2](https://community.openhab.org/t/23456)
-->

149
bundles/org.openhab.ui/doc/components/oh-time-series.md
View File

@ -91,6 +91,155 @@ prev: /docs/ui/components/
</PropGroup>
</div>
### Action
<div class="props">
<PropGroup name="actions" label="Action">
Action to perform when the element is clicked
<PropBlock type="TEXT" name="action" label="Action">
<PropDescription>
Type of action to perform
</PropDescription>
<PropOptions>
<PropOption value="navigate" label="Navigate to page" />
<PropOption value="command" label="Send command" />
<PropOption value="toggle" label="Toggle item" />
<PropOption value="options" label="Command options" />
<PropOption value="rule" label="Run rule" />
<PropOption value="popup" label="Open popup" />
<PropOption value="popover" label="Open popover" />
<PropOption value="sheet" label="Open sheet" />
<PropOption value="photos" label="Open photo browser" />
<PropOption value="group" label="Group details" />
<PropOption value="analyzer" label="Analyze item(s)" />
<PropOption value="url" label="External URL" />
<PropOption value="variable" label="Set Variable" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
<PropDescription>
URL to navigate to
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
<PropDescription>
Open the URL in the same tab/window instead of a new one. This will exit the app.
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
<PropDescription>
Item to perform the action on
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
<PropDescription>
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
<PropDescription>
Command to send to the item when "toggle item" is selected as the action, and the item's state is equal to the command above
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
<PropDescription>
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
<PropDescription>
Rule to run
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
<PropDescription>
Page to navigate to
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
<PropDescription>
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
</PropDescription>
<PropOptions>
<PropOption value="f7-circle" label="Circle" />
<PropOption value="f7-cover" label="Cover" />
<PropOption value="f7-cover-v" label="Cover from bottom" />
<PropOption value="f7-dive" label="Dive" />
<PropOption value="f7-fade" label="Fade" />
<PropOption value="f7-flip" label="Flip" />
<PropOption value="f7-parallax" label="Parallax" />
<PropOption value="f7-push" label="Push" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
<PropDescription>
Page or widget to display in the modal
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
<PropDescription>
Configuration (prop values) for the target modal page or widget
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
<PropDescription>
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
<PropDescription>
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
<PropDescription>
Group item whose members to show in a popup
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
<PropDescription>
Start analyzing with the specified (set of) item(s)
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
<PropDescription>
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
</PropDescription>
<PropOptions>
<PropOption value="(empty)" label="Dynamic" />
<PropOption value="day" label="Day" />
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
<PropOption value="month" label="Month" />
<PropOption value="year" label="Year" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
<PropDescription>
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
</PropDescription>
<PropOptions>
<PropOption value="time" label="Time" />
<PropOption value="aggregate" label="Aggregate" />
<PropOption value="calendar" label="Calendar" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
<PropDescription>
Shows a toast popup when the action has been executed. Can either be a text to show or a JSON object including some of the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionVariable" label="Variable">
<PropDescription>
The variable name to set
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
<PropDescription>
The value to set the variable to
</PropDescription>
</PropBlock>
</PropGroup>
</div>
<!-- GENERATED /props -->

21
bundles/org.openhab.ui/doc/components/oh-video-card.md
View File

@ -80,11 +80,30 @@ Display a video (URL or URL from String item) in a card
Hide the control buttons of the video
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="startManually" label="Start manually">
<PropBlock type="BOOLEAN" name="startManually" label="Start Manually">
<PropDescription>
Does not start playing the video automatically
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="playerType" label="Player Type">
<PropDescription>
Select the player type (optional), defualts to Video.js
</PropDescription>
<PropOptions>
<PropOption value="videojs" label="Video.js (Dash, HLS, Others)" />
<PropOption value="webrtc" label="WebRTC" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="stunServer" label="Stun Server">
<PropDescription>
WebRTC stun server (optional), defaults to 'stun:stun.l.google.com:19302'
</PropDescription>
</PropBlock>
<PropBlock type="DECIMAL" name="candidatesTimeout" label="ICE candidates timeout">
<PropDescription>
WebRTC ICE candidates discovery timeout length in milliseconds (optional), defaults to '2000', '0' to disable
</PropDescription>
</PropBlock>
</PropGroup>
</div>

21
bundles/org.openhab.ui/doc/components/oh-video.md
View File

@ -48,11 +48,30 @@ Displays a video player from a URL or an item
Hide the control buttons of the video
</PropDescription>
</PropBlock>
<PropBlock type="BOOLEAN" name="startManually" label="Start manually">
<PropBlock type="BOOLEAN" name="startManually" label="Start Manually">
<PropDescription>
Does not start playing the video automatically
</PropDescription>
</PropBlock>
<PropBlock type="TEXT" name="playerType" label="Player Type">
<PropDescription>
Select the player type (optional), defualts to Video.js
</PropDescription>
<PropOptions>
<PropOption value="videojs" label="Video.js (Dash, HLS, Others)" />
<PropOption value="webrtc" label="WebRTC" />
</PropOptions>
</PropBlock>
<PropBlock type="TEXT" name="stunServer" label="Stun Server">
<PropDescription>
WebRTC stun server (optional), defaults to 'stun:stun.l.google.com:19302'
</PropDescription>
</PropBlock>
<PropBlock type="DECIMAL" name="candidatesTimeout" label="ICE candidates timeout">
<PropDescription>
WebRTC ICE candidates discovery timeout length in milliseconds (optional), defaults to '2000', '0' to disable
</PropDescription>
</PropBlock>
</PropGroup>
</div>

130
bundles/org.openhab.ui/web/package-lock.json generated
View File

@ -22,6 +22,7 @@
"framework7": "^5.7.12",
"framework7-icons": "^3.0.1",
"framework7-vue": "^5.7.12",
"jssip": "^3.9.1",
"leaflet": "^1.7.1",
"leaflet-providers": "^1.11.0",
"lodash": "^4.17.20",
@ -3696,6 +3697,14 @@
"@babel/types": "^7.3.0"
}
},
"node_modules/@types/debug": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.7.tgz",
"integrity": "sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==",
"dependencies": {
"@types/ms": "*"
}
},
"node_modules/@types/eslint": {
"version": "7.2.6",
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.6.tgz",
@ -3774,11 +3783,15 @@
"integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==",
"dev": true
},
"node_modules/@types/ms": {
"version": "0.7.31",
"resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.31.tgz",
"integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA=="
},
"node_modules/@types/node": {
"version": "14.6.4",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.6.4.tgz",
"integrity": "sha512-Wk7nG1JSaMfMpoMJDKUsWYugliB2Vy55pdjLpmLixeyMi7HizW2I/9QoxsPCkXl3dO+ZOVqPumKaDUv5zJu2uQ==",
"dev": true
"version": "14.18.12",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.12.tgz",
"integrity": "sha512-q4jlIR71hUpWTnGhXWcakgkZeHa3CCjcQcnuzU8M891BAWA2jHiziiWEPEkdS5pFsz7H9HJiy8BrK7tBRNrY7A=="
},
"node_modules/@types/parse-json": {
"version": "4.0.0",
@ -7493,12 +7506,19 @@
"dev": true
},
"node_modules/debug": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
"dev": true,
"version": "4.3.3",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
"integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
"dependencies": {
"ms": "^2.1.1"
"ms": "2.1.2"
},
"engines": {
"node": ">=6.0"
},
"peerDependenciesMeta": {
"supports-color": {
"optional": true
}
}
},
"node_modules/debug-log": {
@ -7510,6 +7530,11 @@
"node": ">=0.10.0"
}
},
"node_modules/debug/node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
},
"node_modules/decamelize": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
@ -9692,10 +9717,9 @@
"dev": true
},
"node_modules/events": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/events/-/events-3.2.0.tgz",
"integrity": "sha512-/46HWwbfCX2xTawVfkKLGxMifJYQBWMwY1mjywRtb4c9x8l5NP3KoJtnIOiL1hfdRkIuYhETxQlo62IF8tcnlg==",
"dev": true,
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
"integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
"engines": {
"node": ">=0.8.x"
}
@ -13036,6 +13060,18 @@
"verror": "1.10.0"
}
},
"node_modules/jssip": {
"version": "3.9.1",
"resolved": "https://registry.npmjs.org/jssip/-/jssip-3.9.1.tgz",
"integrity": "sha512-hl8jxkte4p0zHl9Nen03rdwP8lbBwMy3SnrmzVf7f+Jhvnz7gF/WXdFi35zpEpxAmxFLczxD4U8ATK/CHEwhqw==",
"dependencies": {
"@types/debug": "^4.1.5",
"@types/node": "^14.14.34",
"debug": "^4.3.1",
"events": "^3.3.0",
"sdp-transform": "^2.14.1"
}
},
"node_modules/jsx-ast-utils": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz",
@ -17970,6 +18006,14 @@
"strip-css-comments": "^3.0.0"
}
},
"node_modules/sdp-transform": {
"version": "2.14.1",
"resolved": "https://registry.npmjs.org/sdp-transform/-/sdp-transform-2.14.1.tgz",
"integrity": "sha512-RjZyX3nVwJyCuTo5tGPx+PZWkDMCg7oOLpSlhjDdZfwUoNqG1mM8nyj31IGHyaPWXhjbP7cdK3qZ2bmkJ1GzRw==",
"bin": {
"sdp-verify": "checker.js"
}
},
"node_modules/select-hose": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@ -26097,6 +26141,14 @@
"@babel/types": "^7.3.0"
}
},
"@types/debug": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.7.tgz",
"integrity": "sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==",
"requires": {
"@types/ms": "*"
}
},
"@types/eslint": {
"version": "7.2.6",
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.6.tgz",
@ -26175,11 +26227,15 @@
"integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==",
"dev": true
},
"@types/ms": {
"version": "0.7.31",
"resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.31.tgz",
"integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA=="
},
"@types/node": {
"version": "14.6.4",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.6.4.tgz",
"integrity": "sha512-Wk7nG1JSaMfMpoMJDKUsWYugliB2Vy55pdjLpmLixeyMi7HizW2I/9QoxsPCkXl3dO+ZOVqPumKaDUv5zJu2uQ==",
"dev": true
"version": "14.18.12",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.12.tgz",
"integrity": "sha512-q4jlIR71hUpWTnGhXWcakgkZeHa3CCjcQcnuzU8M891BAWA2jHiziiWEPEkdS5pFsz7H9HJiy8BrK7tBRNrY7A=="
},
"@types/parse-json": {
"version": "4.0.0",
@ -29371,12 +29427,18 @@
"dev": true
},
"debug": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
"dev": true,
"version": "4.3.3",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
"integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
"requires": {
"ms": "^2.1.1"
"ms": "2.1.2"
},
"dependencies": {
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
}
}
},
"debug-log": {
@ -31180,10 +31242,9 @@
"dev": true
},
"events": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/events/-/events-3.2.0.tgz",
"integrity": "sha512-/46HWwbfCX2xTawVfkKLGxMifJYQBWMwY1mjywRtb4c9x8l5NP3KoJtnIOiL1hfdRkIuYhETxQlo62IF8tcnlg==",
"dev": true
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
"integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
},
"eventsource": {
"version": "1.1.2",
@ -33928,6 +33989,18 @@
"verror": "1.10.0"
}
},
"jssip": {
"version": "3.9.1",
"resolved": "https://registry.npmjs.org/jssip/-/jssip-3.9.1.tgz",
"integrity": "sha512-hl8jxkte4p0zHl9Nen03rdwP8lbBwMy3SnrmzVf7f+Jhvnz7gF/WXdFi35zpEpxAmxFLczxD4U8ATK/CHEwhqw==",
"requires": {
"@types/debug": "^4.1.5",
"@types/node": "^14.14.34",
"debug": "^4.3.1",
"events": "^3.3.0",
"sdp-transform": "^2.14.1"
}
},
"jsx-ast-utils": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz",
@ -37999,6 +38072,11 @@
"strip-css-comments": "^3.0.0"
}
},
"sdp-transform": {
"version": "2.14.1",
"resolved": "https://registry.npmjs.org/sdp-transform/-/sdp-transform-2.14.1.tgz",
"integrity": "sha512-RjZyX3nVwJyCuTo5tGPx+PZWkDMCg7oOLpSlhjDdZfwUoNqG1mM8nyj31IGHyaPWXhjbP7cdK3qZ2bmkJ1GzRw=="
},
"select-hose": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",

1
bundles/org.openhab.ui/web/package.json
View File

@ -74,6 +74,7 @@
"framework7": "^5.7.12",
"framework7-icons": "^3.0.1",
"framework7-vue": "^5.7.12",
"jssip": "^3.9.1",
"leaflet": "^1.7.1",
"leaflet-providers": "^1.11.0",
"lodash": "^4.17.20",

2
bundles/org.openhab.ui/web/src/assets/definitions/widgets/chart/index.js
View File

@ -1,7 +1,7 @@
// definitions for the chart widgets
// TODO: migrate to WidgetDefinition & use helpers
import { actionGroup, actionParams } from '../actions'
import { actionGroup, actionParams } from '../actions.js'
const positionGroup = {
name: 'position',

6
bundles/org.openhab.ui/web/src/assets/definitions/widgets/standard/cards.js
View File

@ -164,3 +164,9 @@ export const OhClockCardDefinition = () => new WidgetDefinition('oh-clock-card',
})
])
.paramGroup(actionGroup(null, 'Action to perform when the clock is clicked'), actionParams())
// OhSIPClientCard
import SIPClientParameters from '../system/sipclient.js'
export const OhSIPClientCardDefinition = () => new WidgetDefinition('oh-sipclient-card', 'SIP Client Card', 'Client to start and answer SIP calls')
.paramGroup(CardParameterGroup(), CardParameters())
.paramGroup(pg('sip', 'SIP Settings'), SIPClientParameters())

4
bundles/org.openhab.ui/web/src/assets/definitions/widgets/system/index.js
View File

@ -93,3 +93,7 @@ export const OhRepeaterDefinition = () => new WidgetDefinition('oh-repeater', 'R
import ClockParameters from './clock.js'
export const OhClockDefinition = () => new WidgetDefinition('oh-clock', 'Digital Clock', 'Display a digital clock')
.params(ClockParameters())
import SIPClientParameters from './sipclient.js'
export const OhSIPClientDefinition = () => new WidgetDefinition('oh-sipclient', 'SIP Client', 'SIP Client to call and answer SIP calls')
.params(SIPClientParameters())

17
bundles/org.openhab.ui/web/src/assets/definitions/widgets/system/sipclient.js Normal file
View File

@ -0,0 +1,17 @@
import { pt, pn, pb } from '../helpers.js'
export default () => [
pn('iconSize', 'Icon Size', 'Size of the icon(s) in px'),
pt('websocketUrl', 'Websocket URL', 'Full URL of the WebRTC SIP websocket, e.g. \'wss://siphost:8089/ws\' or relative path, e.g. \'/ws\', for Android & iOS, you need wss (WebSocket secured)').r(),
pt('domain', 'Domain', 'SIP Domain').r(),
pt('username', 'Username', 'SIP Username').r(),
pt('password', 'Password', 'SIP Password').r(),
pb('enableTones', 'Enable tones', 'Enable ringback and ring tone, might cause issues with your browser, so that your call fails'),
pb('hideCallerId', 'Hide caller id', 'Hides the username of the remote party on incoming call'),
pt('phonebook', 'Phonebook', 'Single SIP Address (phone number) for a single call target or a comma-separated list of \'phoneNumber=name\' for multiple call targets').r(),
pb('enableVideo', 'Enable Video', 'Enable video calling'),
pb('enableLocalVideo', 'Enable Local Video View', 'Display the local camera on video calls'),
pt('defaultVideoAspectRatio', 'Default Aspect Ratio', 'Default video aspect ratio used to size the widget before video is loaded. Defaults to 4/3, 16/9 and 1 are common alternatives.').a(),
pt('dtmfString', 'DTMF String', 'Display a button to send a preset DTMF string while in calls for remote doors, gates, etc...').a(),
pb('enableSIPDebug', 'Enable SIP debugging to the console').a()
]

1
bundles/org.openhab.ui/web/src/components/widgets/standard/index.js
View File

@ -16,3 +16,4 @@ export { default as OhSwiperCard } from './oh-swiper-card.vue'
export { default as OhListCard } from './oh-list-card.vue'
export { default as OhWebframeCard } from './oh-webframe-card.vue'
export { default as OhClockCard } from './oh-clock-card.vue'
export { default as OhSipclientCard } from './oh-sipclient-card.vue'

27
bundles/org.openhab.ui/web/src/components/widgets/standard/oh-sipclient-card.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<f7-card :no-border="config.noBorder" :no-shadow="config.noShadow" :outline="config.outline">
<f7-card-header v-if="config.title">
<div>{{ config.title }}</div>
</f7-card-header>
<f7-card-content class="display-flex justify-content-center">
<oh-sipclient v-bind="config" :context="context" />
</f7-card-content>
<f7-card-footer v-if="config.footer">
{{ config.footer }}
</f7-card-footer>
</f7-card>
</template>
<script>
import mixin from '../widget-mixin'
import OhSipclient from '../system/oh-sipclient.vue'
import { OhSIPClientCardDefinition } from '@/assets/definitions/widgets/standard/cards'
export default {
mixins: [mixin],
components: {
OhSipclient
},
widget: OhSIPClientCardDefinition
}
</script>

1
bundles/org.openhab.ui/web/src/components/widgets/system/index.js
View File

@ -21,3 +21,4 @@ export { default as OhWebframe } from './oh-webframe.vue'
export { default as OhRepeater } from './oh-repeater.vue'
export { default as OhChart } from './oh-chart.vue'
export { default as OhClock } from './oh-clock.vue'
export { default as OhSipclient } from './oh-sipclient.vue'

BIN
bundles/org.openhab.ui/web/src/components/widgets/system/oh-sipclient-ringback.mp3 Normal file
View File

Binary file not shown.

BIN
bundles/org.openhab.ui/web/src/components/widgets/system/oh-sipclient-ringtone.mp3 Normal file
View File

Binary file not shown.

276
bundles/org.openhab.ui/web/src/components/widgets/system/oh-sipclient.vue Normal file
View File

@ -0,0 +1,276 @@
<template>
<div class="main-container">
<!-- Show settings gear for local settings if intercom is enabled and in edit mode -->
<f7-button v-if="context.editmode" icon-f7="gear_fill" @click.stop="localSettingsPopup()" class="text-align-right">
Local settings
</f7-button>
<div v-if="config.enableVideo" class="video-container" :style="{ 'aspect-ratio': config.defaultVideoAspectRatio || '4/3' }">
<video ref="remoteVideo" autoplay playsinline class="remote-video" poster="@/images/openhab-logo.svg" />
<!-- Conditionally show local video when ready to prevent ugly video placeholder on Android -->
<video v-show="showLocalVideo" ref="localVideo" autoplay playsinline muted="muted" class="local-video" />
</div>
<!-- Show yellow dial button if connection is not established -->
<f7-button v-if="!connected" :style="{ height: config.iconSize + 'px' }" icon-f7="phone_fill_arrow_up_right" icon-color="yellow" :icon-size="config.iconSize" />
<!-- Show dial menu when there`s no call -->
<f7-button v-else-if="(!session || session.isEnded())" :style="{ height: config.iconSize + 'px' }" icon-f7="phone_fill_arrow_up_right" icon-color="green" :icon-size="config.iconSize" @click.stop="dial()" />
<!-- Show answer button on incoming call -->
<f7-segmented v-else-if="session && session.direction === 'incoming' && session.isInProgress()">
<f7-button :style="{ height: config.iconSize + 'px' }" icon-f7="phone_fill_arrow_down_left" icon-color="green" :icon-size="config.iconSize" @click.stop="answer()">
{{ (!config.hideCallerId) ? this.remoteParty : '' }}
</f7-button>
<f7-button :style="{ height: config.iconSize + 'px' }" icon-f7="phone_down_fill" icon-color="red" :icon-size="config.iconSize" @click.stop="session.terminate()" />
</f7-segmented>
<f7-segmented v-else>
<!-- Show hangup button for outgoing call -->
<f7-button v-if="session && session.isInProgress()" :style="{ height: config.iconSize + 'px' }" icon-f7="phone_down_fill" icon-color="yellow" :icon-size="config.iconSize" @click.stop="session.terminate()" />
<!-- Show hangup button for ongoing call -->
<f7-button v-else-if="session && !session.isEnded()" :style="{ height: config.iconSize + 'px' }" icon-f7="phone_down_fill" icon-color="red" :icon-size="config.iconSize" @click.stop="session.terminate()" />
<!-- Show send dtmf button if in a call and feature is enabled-->
<f7-button v-if="session && !session.isInProgress() && !session.isEnded() && config.dtmfString && config.dtmfString.length > 0" :style="{ height: config.iconSize + 'px' }" icon-f7="number_square" icon-color="orange" :icon-size="config.iconSize" @click.stop="sendDTMF()" />
</f7-segmented>
</div>
</template>
<style lang="stylus">
.main-container
width: 100%
.video-container
position relative
.remote-video
width: 100%
height: 100%
.local-video
position absolute
width 30%
bottom 0px
right 0px
</style>
<script>
import mixin from '../widget-mixin'
import { OhSIPClientDefinition } from '@/assets/definitions/widgets/system'
import foregroundService from '../widget-foreground-service'
import { actionsMixin } from '../widget-actions'
import WidgetConfigPopup from '@/components/pagedesigner/widget-config-popup.vue'
import { WidgetDefinition, pg, pt } from '@/assets/definitions/widgets/helpers.js'
// Thanks to Joseph Sardin, https://bigsoundbank.com
import ringFile from './oh-sipclient-ringtone.mp3'
import ringBackFile from './oh-sipclient-ringback.mp3'
export default {
data () {
return {
connected: false,
session: false,
remoteParty: '',
phonebook: new Map(),
loggerPrefix: 'oh-sipclient',
showLocalVideo: false
}
},
mixins: [mixin, foregroundService, actionsMixin],
widget: OhSIPClientDefinition,
methods: {
startForegroundActivity () {
// Load device specific configuration
this.localConfig = JSON.parse(localStorage.getItem('openhab.ui:sipConfig'))
// Init phonebook Map
if (this.config.phonebook) {
if (this.config.phonebook.includes('=')) {
this.config.phonebook.split(',').map((e) => {
return this.phonebook.set(e.split('=')[0], e.split('=')[1])
})
}
}
if (this.context.editmode) return // do not connect SIP while editing
// Make sure we have Mic/Camera permissions
if (!navigator.mediaDevices) {
this.$f7.dialog.alert('Please ensure that HTTPS is in use and WebRTC is supported in this browser.')
} else {
navigator.mediaDevices.getUserMedia({ audio: true, video: this.config.enableVideo })
.then((stream) => {
// Start SIP connection
this.sipStart()
})
.catch((err) => {
console.log('could not access microphone/camera', err)
this.$f7.dialog.alert('To use the SIP widget you must allow microphone/camera access in your browser and reload this page.')
})
}
},
stopForegroundActivity () {
if (this.phone) this.phone.stop()
},
sipStart () {
if (this.phone) this.phone.stop() // reconnect to reload config
this.context.component.config = { ...this.config, ...this.localConfig } // merge local device configuration
import(/* webpackChunkName: "jssip" */ 'jssip').then((JsSIP) => { // lazy load jssip
this.config.enableSIPDebug ? JsSIP.debug.enable('JsSIP:*') : JsSIP.debug.disable()
// SIP user agent setup
this.remoteAudio = new window.Audio()
const url = new URL(this.config.websocketUrl, window.location.origin)
if (url.protocol.indexOf('http') === 0) {
url.protocol = url.protocol.replace('http', 'ws')
}
const socket = new JsSIP.WebSocketInterface(url.toString())
const configuration = {
sockets: [socket],
uri: 'sip:' + this.config.username + '@' + this.config.domain,
password: this.config.password,
session_timers: false
}
this.phone = new JsSIP.UA(configuration)
// Update connected status on connection changes
this.phone.on('connected', () => {
this.connected = true
console.info(this.loggerPrefix + ': Connected to SIP server')
})
this.phone.on('disconnected', () => {
this.connected = false
console.info(this.loggerPrefix + ': Disconnected from SIP server')
})
// Register event for new incoming or outgoing call event
this.phone.on('newRTCSession', (data) => {
this.session = data.session
this.remoteParty = (this.phonebook.size > 0) ? this.phonebook.get(this.session.remote_identity.uri.user) : this.session.remote_identity.uri.user
// Handle outgoing call,
if (this.session.direction === 'outgoing') {
if (this.config.enableTones === true) {
// Set ringback tone
this.audio = new Audio(ringBackFile)
}
console.info(this.loggerPrefix + ': Calling ' + this.remoteParty + ' ...')
} else if (this.session.direction === 'incoming') {
// Set ring tone
if (this.config.enableTones === true) this.audio = new Audio(ringFile)
console.info(this.loggerPrefix + ': Incoming call from ' + this.remoteParty)
}
if (this.config.enableTones === true) {
// Play ringback or ring tone
this.audio.loop = true
this.audio.play()
}
// Handle accepted call
this.session.on('accepted', () => {
// Stop playing ringback or ring tone
if (this.config.enableTones === true) this.audio.pause()
console.info(this.loggerPrefix + ': Call in progress')
})
// Handle ended call
this.session.on('ended', () => {
this.stopMedia()
console.info(this.loggerPrefix + ': Call ended')
})
// Handle failed call
this.session.on('failed', (event) => {
this.stopMedia()
console.info(this.loggerPrefix + ': Call failed. Reason: ' + event.cause)
})
})
this.phone.start()
})
},
attachMedia () {
this.session.connection.addEventListener('track', (track) => {
if (this.config.enableVideo) {
this.$refs.remoteVideo.srcObject = track.streams[0]
if (this.config.enableLocalVideo) {
this.showLocalVideo = true
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then((stream) => {
this.$refs.localVideo.srcObject = stream
})
}
} else {
this.remoteAudio.srcObject = track.streams[0]
this.remoteAudio.play()
}
})
},
stopMedia () {
// Stop playing ringback or ring tone
if (this.config.enableTones === true) this.audio.pause()
if (this.config.enableVideo) this.$refs.remoteVideo.srcObject = null
if (this.config.enableLocalVideo) {
this.$refs.localVideo.srcObject = null
this.showLocalVideo = false
}
},
call (target) {
this.phone.call(target, { mediaConstraints: { audio: true, video: this.config.enableVideo } })
this.attachMedia()
},
answer () {
this.session.answer({ mediaConstraints: { audio: true, video: this.config.enableVideo } })
this.attachMedia()
},
sendDTMF () {
const options = {
'duration': 160,
'interToneGap': 640
}
this.session.sendDTMF(this.config.dtmfString, options)
},
localSettingsPopup () {
console.info(this.loggerPrefix + ': Opening local settings popup.')
const popup = { component: WidgetConfigPopup }
this.$f7router.navigate({ url: 'local-sip-settings', route: { path: 'local-sip-settings', popup } }, {
props: {
component: {
config: this.localConfig || {}
},
widget: new WidgetDefinition('localSipSettings', 'local SIP client settings', '')
.paramGroup(pg('sipCredentials', 'SIP Credentials'), [
pt('username', 'Username', 'SIP Username'),
pt('password', 'Password', 'SIP Password'),
pt('ownSipAddress', 'Own SIP Address', 'SIP Address (phone number) of this client. Used by the client to remove itself from the dial popup.')
])
}
})
this.$f7.once('widgetConfigUpdate', this.storeLocalConfig)
},
storeLocalConfig (config) {
this.localConfig = config
localStorage.setItem('openhab.ui:sipConfig', JSON.stringify(this.localConfig))
this.sipStart() // reload config
},
dial () {
if (this.config.phonebook !== undefined && this.phonebook.size <= 1) {
this.call(this.config.phonebook.split('=')[0])
} else if (this.phonebook.size > 1) {
const actionsPromise = new Promise((resolve, reject) => {
if (this.phonebook.size > 0) {
resolve(Array.from(this.phonebook.keys()).filter((key) => this.config.ownSipAddress ? this.config.ownSipAddress !== key : true).map((key) => {
return {
text: this.phonebook.get(key) || key,
color: 'blue',
onClick: () => {
this.call(key)
}
}
}))
}
})
actionsPromise.then((actions) => {
this.$f7.actions.create({
buttons: [
actions,
[{ text: 'Cancel', color: 'red' }]
]
}).open()
})
} else {
this.$f7.dialog.alert('Please configure phonebook entries')
}
}
}
}
</script>