Skip to content

Latest commit

 

History

History
425 lines (391 loc) · 16.5 KB

oh-plan-marker.md

File metadata and controls

425 lines (391 loc) · 16.5 KB
Raw
title component label description source prev
oh-plan-marker - Floor Plan Marker
oh-plan-marker
Floor Plan Marker
A marker on a floor plan
/docs/ui/components/

oh-plan-marker - Floor Plan Marker

[[toc]]

A marker on a floor plan

Configuration

Marker Settings

The name of the marker (for identification) The coordinates of this marker in the floor plan Coordinate Reference System; usually set by dragging the marker at design time The item whose state to display on this marker Enter an expression to dynamically show the marker, see Building Pages: visible

Icon

You can customize the styles further with CSS attributes in the iconStyle parameter (in YAML only) Use oh:iconName (openHAB icon), f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName (Iconify icon, requires being online if not in cache) Use the state of the Item to get a dynamic icon (enabled by default for Contact, Dimmer, Rollershutter & Switch Item types) (for openHAB icons only) Size of the icon in pixels (40 by default) Width of the icon in pixels (for openHAB icons only, 40 by default) Height of the icon in pixels (for openHAB icons only, 40 by default) Color of the icon (for Framework7/Material/certain Iconify icons); use expression for dynamic colors Rotation of the icon in degrees

Tooltip

You can customize the styles further with CSS attributes in the tooltipStyle parameter (in YAML only) The tooltip text - leave blank to display the state of the item Put the tooltip text directly over the plan instead of displaying an icon Font size of the tooltip text Color of the tooltip The direction of the tooltip The X offset of the tooltip from the marker in pixels The Y offset of the tooltip from the marker in pixels The opacity of the tooltip (0-1)

Zoom Visibility

Hide this marker outside certain zoom labels Visible only when zoomed to above this level (no limit if empty) Visible only when zoomed to below this level (no limit if empty)

Action

Action to perform when the marker is clicked Type of action to perform URL to navigate to or to send HTTP request to Open the URL in the same tab/window instead of a new one. This will exit the app. HTTP method to use for the request Body to send with the request Item to perform the action on Command to send to the Item. If "Toogle Item" is selected as the action, only send the command when the state is different 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 Comma-separated list of options; if omitted, retrieve the command options from the Item dynamically. Use value=label format to provide a label different than the option. Scene, Script or Rule to run Object representing the optional context to pass. Edit in YAML or provide a JSON object, e.g. { "param1": "value1", "param2": { "subkey1": "testing", "subkey2": 123 } }. Page to navigate to Use a specific page transition animation Page or widget to display in the modal Configuration (prop values) for the target modal page or widget Array of URLs or objects representing the images. Auto-refresh is not supported.
Edit in YAML, e.g.
- item: ImageItem1
  caption: Camera
or provide a JSON array, e.g.
[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]
Objects are in the photos array format with an additional item property to specify an item to view. Configuration for the photo browser.
Edit in YAML or provide a JSON object, e.g.
{ "exposition": false, "type": "popup", "theme": "dark" }
See photo browser parameters (not all are supported). Group Item whose members to show in a popup Start analyzing with the specified (set of) Item(s) The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods) Shows a dialog or sheet to ask for confirmation before the action is executed. Can either be a text to show in the dialog or a JSON object { type: "dialog", title: "Confirm", text: "Are you sure?" } or { type: "sheet", text: "Confirm", color: "green" } 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 supported parameters The variable name to set The value to set the variable to Consider the variable value is an object and set the corresponding deep property within that object using a key syntax. Examples: user.name, user[0].address[1].street, [0], [0].label. The inner property and its parent hierarchy will be created if missing.

Examples

note that you must not have semicolons at the end of the css style

iconStyle:

iconStyle:
  padding: 10px
  border-radius: 4px
  border: 5px solid #f00

tooltipStyle:

tooltipStyle:
  textShadow: 0 0 15px red
  fontSize: 40px
  color: yellow