+
+
Server Settings
+
+
+
+
Server URL
+
+
Without SSL ws://localhost:8123/api/websocket
+
+
With SSL wss://ha.mydomain.net:8123/api/websocket (requires a trusted
+ certificate)
+
-
-
- Long-lived access tokens can be created using the "Long-Lived Access Tokens" section at the
- bottom of a user's Home Assistant profile page. Source: Home Assistant
- documentation .
-
-
+
+
Access-Token
+
+
Long-lived access tokens can be created using the "Long-Lived Access Tokens"
+ section at the
+ bottom of a user's Home Assistant profile page.
+
Home
+ Assistant
+ documentation
-
{{ haError }}
-
-
Save and
- (re)connect
-
+
+ {{ haError }}
+
+
+
+ {{ haConnectionState === 'connected' ? "Reconnect" : "Connect" }}
+
+
+
+
+
Button appearance
+
+
+ Domain
+
+ {{
+ availableDomain
+ }}
+
+
+
+
+
+ Entity
+
+ {{
+ domainEntity.title
+ }}
+
+
+
+
+
+ Use custom title
-
-
-
- Display Settings
- These settings define what is displayed on your stream deck button.
-
-
-
-
-
-
-
-
-
- Custom title
-
-
You have to clear the main title in the main stream deck window to make this title
- template work.
-
- Available attributes:
- {{attr}}
-
-
+
+
+
+
You have to clear the main title in the main stream deck window to make this
+ title
+ template work.
+
+ Available variables
+ {{ attr }}
+
+
Custom labels
-
+
+ Custom labels
+
-
-
-
- Available attributes:
- {{attr}}
-
-
+
+
+
+ Available variables
+ {{ attr }}
+
+
+
+ Show visual service indicators
- Show visual service indicator
-
+
+ Hide icon
+
- Hide icon
-
+ Button actions
- Button Settings
Short Press
- Long Press
- Save entity config
-
+
+ Save configuration
+
-
+
-
diff --git a/src/components/PluginComponent.vue b/src/components/PluginComponent.vue
index 07c2753..c596db2 100644
--- a/src/components/PluginComponent.vue
+++ b/src/components/PluginComponent.vue
@@ -2,233 +2,228 @@
Nothing to see here!
-
diff --git a/src/components/ServiceCallConfiguration.vue b/src/components/ServiceCallConfiguration.vue
index d939a65..a280be4 100644
--- a/src/components/ServiceCallConfiguration.vue
+++ b/src/components/ServiceCallConfiguration.vue
@@ -1,175 +1,184 @@
-
-
-
- Clear
-
-
-
-
-
-
-
-
- Clear
-
-
-
-
-
-
-
- Clear
-
-
-
-
-
-
+ Domain
+
+
+
+ {{ availableDomain }}
+
+
+ Clear
+
+
+
+
Service
+
+
+
+ {{ domainService.title }}
+
+
+ Clear
+
+
+
+
Entity (Optional)
+
+
+
+ {{ domainEntity.title }}
+
+
+ Clear
+
+
+
+
Service Data JSON (Optional)
+
+
+ {{ serviceDataInvalidFeedback }}
-
+
+
+
+ Available options
+
+ {{ item.name }} {{ item.info.description }}
+
+ Example: {{ item.info.example }}
+
+
+
+
-
diff --git a/src/modules/common/streamdeck.js b/src/modules/common/streamdeck.js
index f4876d0..861dd15 100644
--- a/src/modules/common/streamdeck.js
+++ b/src/modules/common/streamdeck.js
@@ -1,4 +1,4 @@
-export default class StreamDeck {
+export class StreamDeck {
constructor(inPort, inPropertyInspectorUUID, inRegisterEvent, inInfo, inActionInfo) {
let actionInfo = JSON.parse(inActionInfo);
@@ -119,10 +119,7 @@ export default class StreamDeck {
this.streamDeckWebsocket.send(JSON.stringify(message))
}
-
- /**
- * @param number 0-based index of state to set.
- */
+
setState(context, number) {
let message = {
"event": "setState",
diff --git a/src/modules/pi/entity.js b/src/modules/pi/entity.js
index 8a24067..18cca77 100644
--- a/src/modules/pi/entity.js
+++ b/src/modules/pi/entity.js
@@ -1,29 +1,17 @@
export class Entity {
- #domain
- #name
- #title
+ domain
+ name
+ title
+ entityId
constructor(domain, name, title) {
- this.#domain = domain
- this.#name = name
- this.#title = title
+ this.domain = domain
+ this.name = name
+ this.title = title
+ this.entityId = `${domain}.${name}`
}
- get entityId() {
- return `${this.#domain}.${this.#name}`;
- }
-
- get domain() {
- return this.#domain
- }
- get name() {
- return this.#name
- }
-
- get title() {
- return this.#title
- }
}
diff --git a/src/modules/pi/service.js b/src/modules/pi/service.js
index bf516f7..94354d7 100644
--- a/src/modules/pi/service.js
+++ b/src/modules/pi/service.js
@@ -1,47 +1,21 @@
export class Service {
- #domain
- #name
- #title
- #description
- #dataFields
- #target
+ domain
+ name
+ title
+ description
+ dataFields
+ target
+ serviceId
constructor(domain, name, title, description, dataFields, target) {
- this.#domain = domain;
- this.#name = name;
- this.#title = title;
- this.#description = description;
- this.#dataFields = dataFields;
- this.#target = target;
- }
-
- get serviceId() {
- return `${this.#domain}.${this.#name}`;
- }
-
- get domain() {
- return this.#domain;
- }
-
- get name() {
- return this.#name;
- }
-
- get title() {
- return this.#title;
- }
-
- get description() {
- return this.#description;
- }
-
- get dataFields() {
- return this.#dataFields;
- }
-
- get target() {
- return this.#target;
+ this.domain = domain;
+ this.name = name;
+ this.title = title;
+ this.description = description;
+ this.dataFields = dataFields;
+ this.target = target;
+ this.serviceId = `${domain}.${name}`;
}
}
diff --git a/src/modules/plugin/entityButtonImageFactory.js b/src/modules/plugin/entityButtonImageFactory.js
index ab3ac7b..34a5758 100644
--- a/src/modules/plugin/entityButtonImageFactory.js
+++ b/src/modules/plugin/entityButtonImageFactory.js
@@ -1,7 +1,7 @@
'use strict';
import * as Mdi from "@mdi/js";
import nunjucks from "nunjucks"
-import {SvgUtils} from "@/modules/plugin/svgUtils";
+import {SvgUtils} from "./svgUtils";
export class EntityConfigFactory {
diff --git a/src/modules/plugin/svgUtils.js b/src/modules/plugin/svgUtils.js
index b624864..7745389 100644
--- a/src/modules/plugin/svgUtils.js
+++ b/src/modules/plugin/svgUtils.js
@@ -1,4 +1,4 @@
-import Snap from "snapsvg"
+import Snap from "snapsvg-cjs"
import {urlencode} from "nunjucks/src/filters";
export class SvgUtils {
diff --git a/src/pi.js b/src/pi.js
deleted file mode 100644
index 95e5714..0000000
--- a/src/pi.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Vue from 'vue'
-import PiComponent from "@/components/PiComponent.vue";
-import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
-
-import 'bootstrap/dist/css/bootstrap.css'
-import 'bootstrap-vue/dist/bootstrap-vue.css'
-import "bootswatch/dist/superhero/bootstrap.min.css";
-
-// Make BootstrapVue available throughout your project
-Vue.use(BootstrapVue)
-// Optionally install the BootstrapVue icon components plugin
-Vue.use(IconsPlugin)
-
-Vue.config.productionTip = false
-Vue.config.devtools = true;
-
-new Vue({
- render: h => h(PiComponent),
-}).$mount("app")
diff --git a/src/pi/main.js b/src/pi/main.js
new file mode 100644
index 0000000..2390110
--- /dev/null
+++ b/src/pi/main.js
@@ -0,0 +1,7 @@
+import {createApp} from "vue";
+import PiComponent from "@/components/PiComponent.vue";
+import '../scss/styles.scss'
+// eslint-disable-next-line no-unused-vars
+import * as bootstrap from 'bootstrap'
+
+createApp(PiComponent).mount("#app");
diff --git a/src/plugin.js b/src/plugin.js
deleted file mode 100644
index 386df05..0000000
--- a/src/plugin.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Vue from 'vue'
-import PluginComponent from './components/PluginComponent.vue'
-
-Vue.config.productionTip = false
-Vue.config.devtools = true;
-
-new Vue({
- render: h => h(PluginComponent),
-}).$mount('app')
diff --git a/src/plugin/main.js b/src/plugin/main.js
new file mode 100644
index 0000000..1ea53d8
--- /dev/null
+++ b/src/plugin/main.js
@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import PluginComponent from "@/components/PluginComponent.vue";
+
+createApp(PluginComponent).mount("#app");
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
new file mode 100644
index 0000000..77aa69b
--- /dev/null
+++ b/src/scss/styles.scss
@@ -0,0 +1,3 @@
+$body-bg-dark: #2d2d2d;
+
+@import "bootstrap/scss/bootstrap";
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..7963b4e
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,30 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [
+ vue(),
+ ],
+ resolve: {
+ alias: {
+ '@': fileURLToPath(new URL('./src', import.meta.url)),
+ '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')
+ }
+ },
+ build: {
+ rollupOptions: {
+ input: {
+ pi: 'pi.html',
+ plugin: 'plugin.html'
+ }
+ }
+ },
+ base: "./"
+})
diff --git a/vue.config.js b/vue.config.js
deleted file mode 100644
index 105cc64..0000000
--- a/vue.config.js
+++ /dev/null
@@ -1,23 +0,0 @@
-module.exports = {
- chainWebpack: config => {
- config.module
- .rule("Snap")
- .test(require.resolve("snapsvg/dist/snap.svg.js"))
- .use("imports-loader")
- .loader("imports-loader?wrapper=window&additionalCode=module.exports=0;")
- .end();
-
- config.resolve.alias.set("snapsvg", "snapsvg/dist/snap.svg.js");
- },
- pages: {
- plugin: {
- entry: 'src/plugin.js',
- template: 'public/plugin.html'
- },
- pi: {
- entry: 'src/pi.js',
- template: 'public/pi.html'
- }
- },
- publicPath: './'
-}