darkmode compatibility, easier token insert

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v0.0.3
+* Added: Dark Mode compatibility
+* Changed: Made token insertion easier
+
 ## v0.0.2
 * Changed: Fixed authtoken loss after Venus OS update
 

FileSets/MbEditBoxAuthToken.qml

@@ -6,11 +6,15 @@ MbItem {
 	id: root
 	cornerMark: !readonly && !editMode
 	height: expanded.y + expanded.height + 1
-	//height: expanded.y + expanded.height + 37
+
+////// GuiMods — DarkMode
+	property VBusItem darkModeItem: VBusItem { bind: "com.victronenergy.settings/Settings/GuiMods/DarkMode" }
+	property bool darkMode: darkModeItem.valid && darkModeItem.value == 1
 
 	property alias maximumLength: ti.maximumLength
 	property variant tmpValue
-	property string matchString: "0123456789 abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ~!@#$%^&*()-_=+[]{}\;:|/.,<>?"
+////// AuthToken
+	property string matchString: "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ~!@#$%^&*()-_=+[]{}\;:|/.,<>?"
 	property string ignoreChars
 	property bool readonly: !userHasWriteAccess
 	property bool overwriteMode: false
@@ -25,8 +29,10 @@ MbItem {
 	property alias upDownText: buttonExplanation.upDownText
 	property alias centerText: buttonExplanation.centerText
 	property alias unit: _unitText.text
-	property alias wrapMode: ti.wrapMode
+////// AuthToken
 	property string backgroundColor: greytag.color
+////// AuthToken
+	property int customFontPixelSize: 15
 
 	// internal
 	property string _editText
@@ -235,19 +241,22 @@ MbItem {
 		id: inputItem
 
 		property real cursorWidth: 8.0
-		height: defaultHeight + 11
+		height: defaultHeight
 		anchors {
 			right: parent.right
 			top: parent.top
-			topMargin: 9
+////// AuthToken
+			topMargin: 26
 		}
 
 		MbBackgroundRect {
 			id: greytag
-			color: editMode ? "#fff": backgroundColor
+////// GuiMods — DarkMode
+			color: editMode ? ( !darkMode ? "#fff": "#747474" ) : backgroundColor
 			width: ti.width + 2 * style.marginDefault
 			height: ti.height + 6
-			border.color: "#ddd"
+////// GuiMods — DarkMode
+			border.color: !darkMode ? "#ddd" : "#4b4b4b"
 			border.width: editMode ? 1 : 0
 			anchors.centerIn: ti
 		}
@@ -262,7 +271,8 @@ MbItem {
 
 			Text {
 				id: _unitText
-				font.pixelSize: root.style.fontPixelSize
+////// AuthToken
+				font.pixelSize: customFontPixelSize
 				anchors.verticalCenter: parent.verticalCenter
 			}
 		}
@@ -276,19 +286,22 @@ MbItem {
 				top: parent.top
 				topMargin: (defaultHeight - height) / 2
 			}
-			width: 320
-			height: 38
+////// AuthToken
+			width: 450
 
+////// GuiMods — DarkMode
+			color: !darkMode ? "#000000" : "#fdfdfd"
 
 			text: editMode ? _editText : item.text
 			// When editing the it is nice to have a fix with font, so when changing
 			// digits the text does change in length all the time. However this fonts
 			// has an zero with a dot in it, with looks inconsitent with the regular
 			// font. So only use the fixed with font when editing.
-			font.family: editMode ? "DejaVu Sans Mono" : root.style.fontFamily
-			font.pixelSize: root.style.fontPixelSize
-
-			property int maximumLength: 20
+////// AuthToken
+			font.family: "DejaVu Sans Mono"
+			font.pixelSize: customFontPixelSize
+////// AuthToken
+			property int maximumLength: root.maximumLength
 			property int cursorPosition
 
 			Item {

FileSets/PageSettingsServicesNgrok.qml

@@ -6,6 +6,10 @@ MbPage {
 	id: root
 	title: qsTr("Ngrok")
 
+////// GuiMods — DarkMode
+	property VBusItem darkModeItem: VBusItem { bind: "com.victronenergy.settings/Settings/GuiMods/DarkMode" }
+	property bool darkMode: darkModeItem.valid && darkModeItem.value == 1
+
 	property VBusItem authtoken: VBusItem { bind: "com.victronenergy.settings/Settings/Services/Ngrok/AuthToken" }
 
 	model: VisibleItemModel {
@@ -21,10 +25,10 @@ MbPage {
 			description: qsTr("Your Authtoken")
 			readonly: ngrok.checked
 			item.bind: "com.victronenergy.settings/Settings/Services/Ngrok/AuthToken"
-			maximumLength: 64
+			maximumLength: 50
 			enableSpaceBar: false
-			backgroundColor: authtoken.value == "" ? "#ff0000" : "#ddd"
-			wrapMode: Text.Wrap
+			backgroundColor: authtoken.value == "" ? "#ff0000" : (!darkMode ? "#ddd" : "#4b4b4b")
+			//wrapMode: Text.Wrap
 		}
 
 		MbItemText {

README.md

@@ -15,15 +15,11 @@ The driver is using ngrok as application to achieve that. Ngrok is like a router
 
 In order to use ngrok you have to [create a free account](https://dashboard.ngrok.com/signup) first.
 
-![venus-os](./screenshots/venus-os-services.png)
-
-![venus-os](./screenshots/venus-os-ngrok.png)
-
 ### Installation
 
 ⚠️ The [Setup Helper/Packet Manager](https://github.com/kwindrem/SetupHelper) is required for all installation methods.
 
-The driver can be installed via the [Setup Helper/Packet Manager](https://github.com/kwindrem/SetupHelper), by uploading it via SFTP to the directory `/data/venus-os_ngrok` and then running the `setup` file or by running this commands:
+The driver can directly be installed via remote console/GIU with the [Setup Helper/Packet Manager](https://github.com/kwindrem/SetupHelper) or by uploading it via SFTP to the directory `/data/venus-os_ngrok` and then running the `setup` file or by running this commands:
 
 ```bash
 wget -O /tmp/venus-os_ngrok.zip https://github.com/mr-manuel/venus-os_ngrok/archive/refs/tags/latest.zip
@@ -37,6 +33,15 @@ bash /data/venus-os_ngrok/setup
 
 The configuration is done via remote console/GUI.
 
+<details><summary>Show screenshots</summary>
+
+![Ngrok - Services](/screenshots/venus-os-services.png)
+![Ngrok - Page](/screenshots/venus-os-ngrok-1.png)
+![Ngrok - Page](/screenshots/venus-os-ngrok-2.png)
+
+</details>
+
+
 ### Config
 
 Access to the remote console/GUI &rarr; Settings &rarr; Services &rarr; Ngrok

version

@@ -1 +1 @@
-v0.0.2
+v0.0.3