tom_trgr/mqtt_creator
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 2 Wiki Activity

CHANGE: styling and readme

Browse Source
This commit is contained in:
Tom Tröger
2024-06-28 12:38:19 +01:00
parent 5ed32b8b82
commit af36d235a2
8 changed files with 106 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
README.md
View File

@@ -1,6 +1,34 @@
# MqttCreator # MqttCreator
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.4. This project is a simple and incomplete generator to create a Homeassinstant compatible MQTT Autodiscovery Entity
## Limited Coverage
By now only the these entities (binary_sensor, light, sensor, switch) are supported by the generator, because they are the most commmonly used entities for my own needs
## Usage
The UI is seperated into two parts, the global generator with settings and upper Topic and the entity itselt
### Generator:
Automated Topic Settings:
- all: the topics will be generated automatically from the other supplied inputs, all changes will be wiped
- only changes: user inputs will be synced accross all topics (only works if the general structure stays the same and changes are not to large at once)
- none: everything is done manually
### Entity:
After choosing an entity type, change and input the corresponding values as you like and if automated topics is actived the topics will be populated automatically
Once done, you can press the DiscoveryString button.
### Discovery String:
First you see the discovery string formatted, there you can check for any errors in the configuration
Below there will be a discovery string with escaped perentecies to input into print statements or similar
The last field Discovery Topic is the automatically generated Discovery Topic for default Homeassistant MQTT Autodiscovery
<!-- This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.4.
## Development server ## Development server
@@ -24,4 +52,4 @@ Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To u
## Further help ## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. -->

13
src/app/app.component.html
View File

@@ -1,3 +1,10 @@
<div> <!DOCTYPE html>
<router-outlet></router-outlet> <main class="p-4">
</div> <div class="flex flex-row justify-left gap-4 items-center h-12 mb-2 px-2">
<img src="mqtt_creator.ico" alt="app icon" class="h-full">
<h2 class="text-3xl font-bold text-myButton w-full" >MQTT Discovery Creator</h2>
<a class="w-auto text-nowrap hover:text-myButton" href="http://www.tomtroeger.de">My Homepage</a>
<a class="w-auto text-nowrap hover:text-myButton" href="https://git.letsstein.de/tom/mqtt_creator">Code</a>
</div>
<router-outlet></router-outlet>
</main>

22
src/app/entity/entity.component.css
View File

@@ -1,23 +1,3 @@
.property { pre{
background-color: #9D9D9D;
border-radius: .5rem;
padding: .5rem;
display: inline-flex;
flex-direction: column;
column-gap: 1rem;
}
.property p{
align-self: center;
}
.property > div {
width: 100%;
}
.property span {
background: #B3B3B3;
padding: .25rem .75rem;
border-radius: 1rem;
/* width: 100%; */
} }

6
src/app/entity/entity.component.html
View File

@@ -67,8 +67,10 @@
<ng-container *ngIf="showDiscovery"> <ng-container *ngIf="showDiscovery">
<div class="col-span-2 property" > <div class="col-span-2 property" >
<p>Discovery String</p> <p>Discovery String</p>
<pre>{{discoveryString | json}}</pre> <div class="flex flex-row gap-2">
<span contenteditable>{{JSONdiscoveryString}}</span> <pre>{{discoveryString | json}}</pre>
<span contenteditable>{{JSONdiscoveryString}}</span>
</div>
</div> </div>
<div class="col-span-2 property" > <div class="col-span-2 property" >
<p>Discovery Topic</p> <p>Discovery Topic</p>

23
src/app/entity/entity.component.ts
View File

@@ -79,13 +79,28 @@ export class EntityComponent {
this[model] = value as (typeof this)[keyof this]; this[model] = value as (typeof this)[keyof this];
return; return;
} }
let sync_topic = new_list.slice(0, -1).join('/'); let missing_index = new_list.indexOf(missing[0]);
this.stat_t = sync_topic + '/stat'; this.stat_t = this.replaceComponent(this.stat_t, missing[0], missing_index);
this.entity_cmd_t = sync_topic + '/cmd'; this.entity_cmd_t = this.replaceComponent(
this.entity_bri_cmd_t = sync_topic + '/bri_cmd'; this.entity_cmd_t,
missing[0],
missing_index
);
this.entity_bri_cmd_t = this.replaceComponent(
this.entity_bri_cmd_t,
missing[0],
missing_index
);
return; return;
} }
replaceComponent(object: string, value: string, index: number) {
let param_list = object.split('/');
param_list[index] = value;
return param_list.join('/');
}
updateTopic(topic: string) { updateTopic(topic: string) {
let topic_str = join( let topic_str = join(
'/', '/',

3
src/app/generator/generator.component.css
View File

@@ -2,6 +2,9 @@
background: #9D9D9D; background: #9D9D9D;
border-radius: 1rem; border-radius: 1rem;
padding: 1rem .8rem ; padding: 1rem .8rem ;
display: flex;
flex-direction: column;
gap: 1rem;
} }
.customCheckboxContainer{ .customCheckboxContainer{

37
src/app/generator/generator.component.html
View File

@@ -1,28 +1,15 @@
<main class="flex flex-col gap-2 p-4"> <!DOCTYPE html>
<div class="flex flex-row justify-left gap-4 items-center h-12"> <div class="flex flex-col gap-2">
<img src="mqtt_creator.ico" alt="app icon" class="h-full">
<h2 class="text-3xl font-bold text-myButton" >MQTT Discovery Creator</h2>
</div>
<!-- <div class="border border-slate-800 my-2">
<h2>Device: - not working</h2>
<p>Name</p><input type="text" placeholder="name here" [ngModel]="generatorService.device_name"
(ngModelChange)="generatorService.device_name = $event; generatorService.update()">
<p>Identifier</p>
<input type="text" placeholder="Identifier here" [ngModel]="generatorService.device_id"
(ngModelChange)="generatorService.device_id = $event">
<button (click)="generatorService.device_id = useRandomString(16)">Random</button>
<p>Standalone -> no device</p>
<input type="checkbox" [ngModel]="generatorService.device_standalone"
(ngModelChange)="generatorService.device_standalone = $event; generatorService.update()" />
</div> -->
<div class="genContainer"> <div class="genContainer">
<!-- Statetopic --> <!-- Statetopic -->
<h3>Data Channel</h3> <!-- <h3>Data Channel</h3> -->
<div>
<p>Bereich</p> <div class="property">
<input type="text" [ngModel]="generatorService.upperTopic" <p>Bereich</p>
<input type="text" [ngModel]="generatorService.upperTopic"
(ngModelChange)="generatorService.upperTopic = $event; generatorService.update()" /> (ngModelChange)="generatorService.upperTopic = $event; generatorService.update()" />
</div>
<div class="property">
<p>Automatische Topics</p> <p>Automatische Topics</p>
<div class="customCheckboxContainer"> <div class="customCheckboxContainer">
<input [ngModel]="auto_topic" (ngModelChange)="auto_topic=$event" id="auto_topic_0" type="radio" name="auto_topic" value="2"> <input [ngModel]="auto_topic" (ngModelChange)="auto_topic=$event" id="auto_topic_0" type="radio" name="auto_topic" value="2">
@@ -32,10 +19,10 @@
<input [ngModel]="auto_topic" (ngModelChange)="auto_topic=$event" id="auto_topic_2" type="radio" name="auto_topic" value="0"> <input [ngModel]="auto_topic" (ngModelChange)="auto_topic=$event" id="auto_topic_2" type="radio" name="auto_topic" value="0">
<label class="customCheckbox" for="auto_topic_2">Aus</label> <label class="customCheckbox" for="auto_topic_2">Aus</label>
</div> </div>
</div>
</div>
</div> </div>
<app-entity class="genContainer" ></app-entity> <app-entity class="genContainer" ></app-entity>
</div>
</main>

27
src/styles.css
View File

@@ -11,7 +11,7 @@
} }
input, select, label { input, select, label, pre {
background: var(--primary); background: var(--primary);
padding: .25rem .75rem; padding: .25rem .75rem;
border-radius: 1rem; border-radius: 1rem;
@@ -56,3 +56,28 @@ button{
button path { button path {
color: var(--secondary); color: var(--secondary);
} }
.property {
background-color: #9D9D9D;
border-radius: .5rem;
/* padding: .5rem; */
display: inline-flex;
flex-direction: column;
gap: .25rem;
}
.property p, .property h3{
align-self: left;
padding-left: .5rem;
}
.property > div {
width: 100%;
}
.property span {
background: #B3B3B3;
padding: .25rem .75rem;
border-radius: 1rem;
/* width: 100%; */
}