Hallöchen,

nachdem hier immer wieder Fragen bezüglich VPN etc. kommen, habe ich mich entschlossen eine kleine Anleitung zum Thema WireGuard zu erstellen. Ich habe versucht die Anleitung so einfach und kurz wie möglich zu halten.

Voraussetzungen:

• Proxmox als Grundgerüst mit Kernel Version min.: 5.11 Ältere Version?
• Einen Dual-Stack Internetanschluss (also kein DS-Lite, hierzu kommt bei Bedarf eine gesonderte Anleitung)
• Portfreigabe im Router (Protokoll: UDP, Port: 51820 , auf die IP Adresse des neuen Linux Containers)
  !!! Keine Portfreigabe auf den im späteren Verlauf erstellten Port 5000 setzen !!!
• Falls keine feste IP vorhanden ist benötigt ihr einen Hostnamen. Das kann z.b. MyFritz sein oder DynDns, Hauptsache ein Dienst mit dem ihr auf eure aktuelle IP verweisen könnt.

Anleitung:

Linux Container/CT Anlegen

Zunächst müssen wir das LXC Template für Ubuntu 21.04 oder 21.10 installieren.


Anschließend basierend auf diesem Image einen neuen Container anlegen

einen Hostnamen vergeben sowie ein Passwort

Danach das Image auswählen

Und mit den Standardwerten bis zur Netzwerkkonfiguration weitermachen.



Nun noch eine IP vergeben und der erste Teil wäre geschafft.

nano /etc/pve/lxc/100.conf

lxc.cgroup2.devices.allow: c 10:200 rwm
lxc.mount.entry: /dev/net dev/net none bind,create=dir

lxc.cgroup.devices.allow: c 10:200 rwm
lxc.mount.entry: /dev/net dev/net none bind,create=dir

chown 100000:100000 /dev/net/tun

wget https://raw.githubusercontent.com/KleSecGmbH/ioBroker/main/wireguard/installer-pve.sh -O installer-pve.sh && bash installer-pve.sh

iptables -A FORWARD -i %i -j ACCEPT; iptables -A FORWARD -o %i -j ACCEPT; iptables -t nat -A POSTROUTING -o eth0 -j MASQUERADE

iptables -D FORWARD -i %i -j ACCEPT; iptables -D FORWARD -o %i -j ACCEPT; iptables -t nat -D POSTROUTING -o eth0 -j MASQUERADE

Sollten sich doch Fehler eingeschlichen haben, bitte melden. Getestet wurde auf Proxmox V7.0-11.
Bei Bedarf kann ich diese Anleitung gerne für RasPi und Konsorten ebenfalls erstellen.

LG
CrunkFX

Nachdem es im anderen Thread unübersichtlich wurde geht´s jetzt hier weiter.

Ursprünglich wollte ich nur nen Schalter nachbauen, aber irgendwie ist das eskaliert

Die hier erstellten Widgets sind den Widgets aus Allterco´s Shelly App nachempfunden. Diese bestehen aus Gruppierten VIS Widgets und benötigen sofern nicht anders angegeben nur die in VIS standardmäßig vorhandenen Widgets.

In dieser Test Vis kann ausprobiert werden: Klick mich!

Installation:

Spoiler

Temperatur und Feuchtigkeit mit Batterie

Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Hum-Temp-Bat

Temperatur und Feuchtigkeit

Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Hum-Temp

Energy

Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Power

Sensor

Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Controls/Sensor

Spoiler

Thermostat

Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Thermostat

Spoiler

Dimmer

Beim Dimmer gibt´s leider durch einen vermeindlichen Bug im HTML Widget eine Besonderheit. Neben den Einstellungen in der GroupControl muss hier auch im HTML vom Slider der Datenpunkt gesetzt werden:

Sollte machbar sein.

Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Controls/Dimmer

Spoiler

Shutter

Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Controls/Shutter

/* ---- Shelly Styled Widgets CSS ---- */
/*           @2021 CrunkFX             */

/* ######     Slider Start      ###### */
.shstyledwidgets-bar .metro .slider .complete {
	-webkit-appearance: none;
	background-color: #37d0fa;
	-moz-border-radius: 2px 0 0 2px;
	border-radius: 3px 0 0 3px;
	-webkit-transition: .2s;
	transition: opacity .2s;
	-moz-box-shadow: inset 0 0 5px #000000;
	-webkit-box-shadow: inset 0 0 5px #000000;
	box-shadow: inset 0 0 5px #000000;
}

.shstyledwidgets-bar .metro .slider .marker:active {
	outline: none;
}

.shstyledwidgets-bar .metro .slider .marker {
	-webkit-appearance: none;
	border-width: 0px;
	top: -1px;
	z-index: 2;
	appearance: none;
	height: 14px;
	width: 22px;
	background: #27506c;
	cursor: pointer;
	border-radius: 1px;
	-moz-box-shadow: inset 0 0 0px #000000;
	-webkit-box-shadow: inset 0 0 4px #000000;
	box-shadow: inset 0 0 4px #000000;
}

.shstyledwidgets-bar .metro .slider {
	background-color: transparent;
}

.shstyledwidgets-bar2 .metro .slider .complete {
    height: 10px;
	-webkit-appearance: none;
	background-color: #37d0fa;
	-moz-border-radius: 2px;
	border-radius: 2px 2px 2px 2px;
	-webkit-transition: .2s;
	transition: opacity .2s;
	-moz-box-shadow: inset 0 0 5px #000000;
	-webkit-box-shadow: inset 0 0 5px #000000;
	box-shadow: inset 0 0 5px #000000;
}

.shstyledwidgets-bar2 .metro .slider .marker:active {
	outline: none;
}
.shstyledwidgets-bar2 .metro .slider .marker {
opacity:0;
}
.shstyledwidgets-bar2 .metro .slider {
	background-color: transparent;
}
/* ######       Slider End      ###### */

Alle verwendeten Assets stehen hier zur Verfügung: https://github.com/CrunkFX/IOBrokerCustomFiles/tree/master/Images
Falls das jemand nachbauen will, hat der liebe @da_Woody meine Anleitung glattgefeilt und als PDF erstellt. Anleitung Ansehen

Viel Spaß damit. Für Vorschläge bin ich offen.

@arteck

Das ist mein Versuch an einem Nachbau der Quadclient Visualisierung von Gira

@martink @da_Woody Ich habe nun angefangen ein paar Shelly Controls zu bauen. Die ersten sind fertig.

Test-Link: https://iobroker.astoria-systems.de/vis/index.html?ShellyButons#Buttons

Dimmer

Beim Dimmer gibt´s leider durch einen vermeindlichen Bug im HTML Widget eine Besonderheit. Neben den Einstellungen in der GroupControl muss hier auch im HTML vom Slider der Datenpunkt gesetzt werden:

Sollte machbar sein.

Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Controls/Dimmer

Shutter

Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Controls/Shutter

Sensor

Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Controls/Sensor

@Curtis777 Probiers mal damit, ist zwar ein Workaround sollte aber gehen:

<div id="contentframe" style="position:relative; top: -198px; left: -260px;">
   <iframe width="1024" height="768" scrolling="no" frameBorder="0"  src="http://192.168.0.199/video/livemb.asp " style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>
</div>

width="1024" height="768" <!--  Diese Auflösung wird oben um 0.5 im IFrame reduziert  -->

top: -198px; left: -260px <!--  Leider verschiebt sich das Bild je nach Auflösung. Das kannst du hiermit anpassen  -->

Benutzung:

1. basic-html Widget anlegen
2. html Copy und Paste
3. Für den ersten Test die Größe des Widgets auf "width: 508px" und "height: 286" setzen.

Schau mal ob das bei dir Klappt.

MFG
CrunkFX

@liv-in-sky
Ich hab dir da mal was gebaut, ich verwende ein kleines Javascript in dem HTML Code welches den Text nach jedem Buchstaben mit einem Zeilenumbruch ausstattet. Um dir das besser zu veranschaulichen, hab ich mal eine kleine Tabelle vorbereitet.

Die eigentliche Funktion besteht aus:

CSS Teil:

yourtext span {
            display: block;
            }

Skript

var text = document.getElementsByTagName('yourtext')[0];
text.innerHTML = '<span>' + text.innerHTML.split('').join('</span><span>') + '</span>';

Verwendung

<yourtext>Oktober</yourtext>

Beispiel:

<head>
    <style>
        yourtext span {
            display: block;
        }

        #table1 td,
        th {
            border: 1px solid #999;
            padding: 0.5rem;
        }
    </style>
</head>

<body>
    <table id="table1" class="blueTable">
        <thead>
            <tr>
                <th></th>
                <th>Wetterwerte</th>
                <th colspan="3">2020</th>
            </tr>
            <tr>
                <td rowspan="4" style="font-size:26px">
                    <yourtext>Oktober</yourtext>
                </td>
                <td>Durchschnitt</td>
                <td>23°C</td>
                <td>74°F</td>
                <td>10%</td>
            </tr>
            <tr>
                <td>Minimum</td>
                <td>18°C</td>
                <td>68°F</td>
                <td>2%</td>
            </tr>
            <tr>
                <td>Maximum</td>
                <td>31°C</td>
                <td>91°F</td>
                <td>30%</td>
            </tr>
            <tr>
                <td>Mirfällnixein :)</td>
                <td>200°C</td>
                <td>542°F</td>
                <td>1000%</td>
            </tr>
    </table>
    <script>
        var text = document.getElementsByTagName('yourtext')[0];
        text.innerHTML = '<span>' + text.innerHTML.split('').join('</span><span>') + '</span>';
    </script>
</body>

Ergebnis

Ich hoffe das hilft dir weiter

MFG
CrunkFX

Mediaplayer XL (TEST)

Test Link: Hier

Es ist ein sehr aufwendiges Widget geworden, daher hab ich mir was zur Einrichtung überlegt.
Dieser Weg funktioniert allerdings aktuell nur für die Alexa Fraktion. Falls mich einer mit den Spotify Datenpunkten füttern könnte wäre das Top.

Um nicht 17 Datenpunkte auswählen zu müssen, hab ich einen Konfigurator erstellt, der aus dem Ornderpfad des Alexa Adapters die einzelnen Datenpunkte pflückt und als fertig importierbares Widget exportiert. Dazu in der WebApp den Pfad zum Alexa Player Ordner angeben. Z.b. : alexa2.0.Echo-Devices.xxxxxxxxxxx.Player ohne Punkt am Ende !!!!
WebApp: Hier!
Bitte das Kopieren der Langen Widget Codes über STRG+A und STRG+C machen, da die Browserdialoge sonst die Seite zum Absturz bringen können.
Danach das Ergebnis kopieren und als Widget importieren

Das Widget kann Weiterhin manuell Eingerichtet werden.
Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Mediaplayer XL

!! Auch hier habe ich alle Funktionen vie Datenpunktliste erstellt, da ich keine Alexa zum Testen habe. Also bitte sämtliche Fehler bemängeln !!

@pi78 OK
Installation:

@liv-in-sky Hier der Link zur WireGuard Anleitung. https://forum.iobroker.net/topic/49177/anleitung-wireguard-mit-wireguard-ui-auf-proxmox

@Negalein
Zum Thema Zugriffsbeschränkung kannst du nach dem Anlegen der Clients bei allowed ip´s (grüner Pfeil)
für jeden Client einzeln bestimmen auf welche IP´s dieser zugriff hat.

LG CrunkFX

@w00dst0ck Falls es nur um tethercell Geräte geht kannst du diese mittels tethercell Plugin in Nodered steuern. Auch die sonstige Bluetooth Kommunikation mit anderen Geräten kannst du in Nodered verwalten. Alles was min IOBroker nicht direkt ansprechbar ist lässt sich dort Dank direkter Einbindung in IOBroker trotzdem steuern. Wirf da also Mal nen Blick drauf.

MFG
CrunkFX

@saeft_2003 Reine Neugier Falls da Probleme auftreten kannst du dich ja melden.

LG

@saeft_2003 Wann hast du denn vor dein Produktivsystem umzuziehen?

@saeft_2003 Jo

@saeft_2003 ja denn cgroup wird in Zukunft raus gepatcht

@saeft_2003 Ok welches V6 läuft denn da? Ich habe die Erfahrung gemacht, dass ein Update von 6 auf 7 nur erfolgen soll wenn mindestens 6.7 installiert ist. Wenn du also ne ältere Version hast, erst Kernel updaten, dann klappt das eigentlich auf Anhieb.

@saeft_2003 Hast du jetzt aktuell noch Probleme nach dem Update?

@flybywire Hast du denn den port angepasst auf dem neuen system? Es können nicht 2 wireguard Instanzen über den selben port Laufen.

@andy61 Moin, ich werde dir Idee Mal mit aufnehmen und schauen ob sich das Umsetzen lässt.

LG

@saeft_2003 Hast du Proxmox geupdated? Oder wann ist das passiert?

@saeft_2003 Kannst du das mal mit der Desktop App machen, die ist etwas aufschlussreicher