You may customise the location of the homebridge-ui by setting the customUiPath property in the config.schema.json. For example: "customUiPath": "./dist/homebridge-ui".
User Interface API
A plugin's custom user interface is displayed inside an iframe in the settings modal, in place of the schema-generated form.
The user interface API is provided to the plugin's custom UI via the window.homebridge object. This is injected into the plugin's custom UI during render.
Note:
Developers are free to use front end frameworks such as Angular, Vue, or React to create the plugin's custom user interface.
Developers should make use Bootstrap 4 CSS classes, as these will automatically be styled and themed correctly. There is no need to include the boostrap css yourself, this will be injected by the Homebridge UI during render.
As the user interface is displayed in an isolated iframe, you can safely use any custom JavaScript and CSS.
The index.html file should not include <html>, <head>, or <body> tags, as these are added by the Homebridge UI during the render process.
You may include external assets in your HTML.
Example index.html:
<linkrel="stylesheet" href="your-plugin.css"><divclass="card"><divclass="form-group"><labelfor="exampleInputEmail1">Email address</label><inputtype="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"><smallid="emailHelp" class="form-text text-muted">Help text...</small></div></div><script>(async()=>{// get the current homebridge configconstpluginConfig=awaithomebridge.getPluginConfig();// make requests to your server.js scriptconstresult=awaithomebridge.request('/hello',{name: 'world'});})();</script>
Make a request to the plugin's server side script.
path: the path handler on the server that the request should be sent to
body: an optional payload
Returns a promise with the response from the server.
User Interface Example:
constresponse=awaithomebridge.request('/hello',{who: 'world'});console.log(response);// the response from the server
The corresponding code in the server.js file would look like this:
// server side request handlerthis.onRequest('/hello',async(payload)=>{console.log(payload)// the payload sent from the UIreturn{hello: 'user'};});
Toast Notifications
Toast notifications are the pop-up notifications displayed in the bottom right corner. A plugin's custom UI can generate custom notifications with custom content.
Displays a spinner / loading overlay, preventing user input until cleared with homebridge.hideSpinner.
// show the spinner overlayhomebridge.showSpinner();// wait for the request to processawaithomebridge.request('/hello');// hide the spinner overlayhomebridge.hideSpinner();
homebridge.hideSpinner
homebridge.hideSpinner(): void
Hide the spinner / loading overlay.
homebridge.hideSpinner();
Forms
The custom user interface allows you to create two types of forms:
A form based on your plugin's config.schema.json file
User input is automatically mapped to the plugin config object
You can listen for change events from your custom user interface
The schema must contain all config options
A standalone form
Not linked to your config.schema.json form in any way
You must listen for change events, process the event, and update the plugin config
The form does not need to include all config options
Developers are also able to create their own forms using HTML.
homebridge.showSchemaForm
homebridge.showSchemaForm(): void
Show the schema-generated form below the custom user interface.
This feature only works for platform plugins that have set singular = true in their config.schema.json file.
homebridge.showSchemaForm();
When enabling the schema form, you should listen for the configChanged event to keep your config in sync. This event is triggered whenever the user makes a change in the schema-generated form (250ms debounce).
To provide server API endpoints that can be called from the custom UI, a plugin must place a server.js file in the homebridge-ui directory.
You will need to include the @homebridge/plugin-ui-utils library as a prod dependency:
npm install --save @homebridge/plugin-ui-utils
Note:
This server.js script will be spawned as a child process when the plugin's settings modal is opened, and is terminated when the settings modal is closed.
The server.js script must create a new instance of a class that extends HomebridgePluginUiServer from the @homebridge/plugin-ui-utils library.
This file will be spawned as a child process when the plugin's settings modal is opened, and is terminated when the settings modal is closed.
The server side script must extend the class provided by the @homebridge/plugin-ui-utils library.
Example server.js:
const{ HomebridgePluginUiServer }=require('@homebridge/plugin-ui-utils');// your class MUST extend the HomebridgePluginUiServerclassUiServerextendsHomebridgePluginUiServer{constructor(){// super must be called firstsuper();// Example: create api endpoint request handlers (example only)this.onRequest('/hello',this.handleHelloRequest.bind(this));// this.ready() must be called to let the UI know you are ready to accept api callsthis.ready();}/** * Example only. * Handle requests made from the UI to the `/hello` endpoint. */asynchandleHelloRequest(payload){return{hello: 'world';}}}// start the instance of the class(()=>{returnnewUiServer;})();
客服电话
APP下载
官方微信
请发表评论