iobroker.wiim 0.0.2 → 0.2.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 KaiIOB <Kaibrendel@kabelmail.de>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 KaiIOB <Kaibrendel@kabelmail.de>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,130 +1,173 @@
-![Logo](admin/wiim.png)
-# ioBroker.wiim
-
-[![NPM version](https://img.shields.io/npm/v/iobroker.wiim.svg)](https://www.npmjs.com/package/iobroker.wiim)
-[![Downloads](https://img.shields.io/npm/dm/iobroker.wiim.svg)](https://www.npmjs.com/package/iobroker.wiim)
-![Number of Installations](https://iobroker.live/badges/wiim-installed.svg)
-![Current version in stable repository](https://iobroker.live/badges/wiim-stable.svg)
-
-[![NPM](https://nodei.co/npm/iobroker.wiim.png?downloads=true)](https://nodei.co/npm/iobroker.wiim/)
-
-**Tests:** ![Test and Release](https://github.com/KaiIOB/ioBroker.wiim/workflows/Test%20and%20Release/badge.svg)
-
-## wiim adapter for ioBroker
-
-adapter to access Wiim/Arylic devices
-
-## Developer manual
-This section is intended for the developer. It can be deleted later.
-
-### DISCLAIMER
-
-Please make sure that you consider copyrights and trademarks when you use names or logos of a company and add a disclaimer to your README.
-You can check other adapters for examples or ask in the developer community. Using a name or logo of a company without permission may cause legal problems for you.
-
-### Getting started
-
-You are almost done, only a few steps left:
-1. Create a new repository on GitHub with the name `ioBroker.wiim`
-1. Initialize the current folder as a new git repository:  
-	```bash
-	git init -b main
-	git add .
-	git commit -m "Initial commit"
-	```
-1. Link your local repository with the one on GitHub:  
-	```bash
-	git remote add origin https://github.com/KaiIOB/ioBroker.wiim
-	```
-
-1. Push all files to the GitHub repo:  
-	```bash
-	git push origin main
-	```
-1. Add a new secret under https://github.com/KaiIOB/ioBroker.wiim/settings/secrets. It must be named `AUTO_MERGE_TOKEN` and contain a personal access token with push access to the repository, e.g. yours. You can create a new token under https://github.com/settings/tokens.
-
-1. Head over to [main.js](main.js) and start programming!
-
-### Best Practices
-We've collected some [best practices](https://github.com/ioBroker/ioBroker.repositories#development-and-coding-best-practices) regarding ioBroker development and coding in general. If you're new to ioBroker or Node.js, you should
-check them out. If you're already experienced, you should also take a look at them - you might learn something new :)
-
-### Scripts in `package.json`
-Several npm scripts are predefined for your convenience. You can run them using `npm run <scriptname>`
-| Script name | Description |
-|-------------|-------------|
-| `test:js` | Executes the tests you defined in `*.test.js` files. |
-| `test:package` | Ensures your `package.json` and `io-package.json` are valid. |
-| `test:integration` | Tests the adapter startup with an actual instance of ioBroker. |
-| `test` | Performs a minimal test run on package files and your tests. |
-| `check` | Performs a type-check on your code (without compiling anything). |
-| `coverage` | Generates code coverage using your test files. |
-| `lint` | Runs `ESLint` to check your code for formatting errors and potential bugs. |
-| `translate` | Translates texts in your adapter to all required languages, see [`@iobroker/adapter-dev`](https://github.com/ioBroker/adapter-dev#manage-translations) for more details. |
-
-### Writing tests
-When done right, testing code is invaluable, because it gives you the 
-confidence to change your code while knowing exactly if and when 
-something breaks. A good read on the topic of test-driven development 
-is https://hackernoon.com/introduction-to-test-driven-development-tdd-61a13bc92d92. 
-Although writing tests before the code might seem strange at first, but it has very 
-clear upsides.
-
-The template provides you with basic tests for the adapter startup and package files.
-It is recommended that you add your own tests into the mix.
-
-### Publishing the adapter
-Using GitHub Actions, you can enable automatic releases on npm whenever you push a new git tag that matches the form 
-`v<major>.<minor>.<patch>`. We **strongly recommend** that you do. The necessary steps are described in `.github/workflows/test-and-release.yml`.
-
-To get your adapter released in ioBroker, please refer to the documentation 
-of [ioBroker.repositories](https://github.com/ioBroker/ioBroker.repositories#requirements-for-adapter-to-get-added-to-the-latest-repository).
-
-### Test the adapter manually on a local ioBroker installation
-In order to install the adapter locally without publishing, the following steps are recommended:
-1. Create a tarball from your dev directory:  
-	```bash
-	npm pack
-	```
-1. Upload the resulting file to your ioBroker host
-1. Install it locally (The paths are different on Windows):
-	```bash
-	cd /opt/iobroker
-	npm i /path/to/tarball.tgz
-	```
-
-For later updates, the above procedure is not necessary. Just do the following:
-1. Overwrite the changed files in the adapter directory (`/opt/iobroker/node_modules/iobroker.wiim`)
-1. Execute `iobroker upload wiim` on the ioBroker host
-
-## Changelog
-
-<### 0.0.2
-* (KaiIOB) Arylic devices added and corrections>
-
-
-<### 0.0.1
-* (KaiIOB) initial release>
-<>
-## License
-MIT License
-
-Copyright (c) 2025 KaiIOB <Kaibrendel@kabelmail.de>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+![Logo](admin/wiim.png)
+# ioBroker.wiim
+
+[![NPM version](https://img.shields.io/npm/v/iobroker.wiim.svg)](https://www.npmjs.com/package/iobroker.wiim)
+[![Downloads](https://img.shields.io/npm/dm/iobroker.wiim.svg)](https://www.npmjs.com/package/iobroker.wiim)
+![Number of Installations](https://iobroker.live/badges/wiim-installed.svg)
+![Current version in stable repository](https://iobroker.live/badges/wiim-stable.svg)
+
+[![NPM](https://nodei.co/npm/iobroker.wiim.png?downloads=true)](https://nodei.co/npm/iobroker.wiim/)
+
+**Tests:** ![Test and Release](https://github.com/KaiIOB/ioBroker.wiim/workflows/Test%20and%20Release/badge.svg)
+
+## wiim adapter for ioBroker
+
+adapter to access Wiim/Arylic devices
+
+## supported devices
+The adapter has been tested with:
+
+	Wiim Amp
+ 	Wiim Mini
+  	Arylic up2stream v3
+   	Arylic S10+
+	Audiocast M5
+	August WR320B (after firmware upgrade to 4.6.415156.0)
+
+Wiim devices use https communication, Arylic devices use http communication.
+At least one feature (playPromptUrl) works only with Arylic devices with firmware >=4.6.415145 
+Currently only the most important features of the API are implemented. Please let me know if other features are useful to you.
+
+You can find information on the devices here:
+
+WiiM: 		https://www.wiimhome.com/wiimvibelink/overview
+Arylic:		https://www.arylic.com/
+Audiocast:	https://audiocast.io/
+			remark: Audicast M5 is sold under many different generic brands, I assume they all work with the adapter
+August:		https://augustint.com/
+			remark: the WR320B seems to be discontinued
+
+
+## Adapter Configuration
+
+	interval for refresh of player data in seconds: time between two requests for updated data
+
+
+## Available States
+
+		album: name of album played, string, read-only
+				string that can be used to display the name of the current album, e.g.:
+					"Electric"
+
+		title: name if title played, string, read-only
+				string that can be used to display the name of the current title, e.g.:
+					"Wild Flower"
+
+		artist: name of artist of title played, string, read-only
+				string that can be used to display the name of the artist of the current title, e.g.:
+					"The Cult"
+
+		albumArtURI: URL of the cover art of the album played, string, read-only
+				string that can be used to display the cover art of the current title, e.g.:
+					"https://i.scdn.co/image/ab67616d0000b273ca8a324a5d0fce617bb2613d"
+					Unfortunately, the generic Linkplay devices do not provide this information via http API....
+
+		sampleRate: sample rate of file played, number, read-only
+				number which can be used to display the current sample rate, e.g.;
+					"44100"
+
+
+		bitDepth: bit depth of file played, number, read-only
+				number holdin the value of the current bit depth, e.g.:
+					"16"
+
+		Play_Pause: button to play/pause, button, read/write
+				write "true" ti this datapoint to pause/play
+
+		next: button to skip to the next title in playlist, button, read/write
+				write "true" to this data point if you want to jump to the next title in the playlist
+
+		previous: button to go to the previous title in playlist, button read/write
+				write "true" to this data point if you want to jump to the previous title in the playlist
+
+		lastRefresh: time stamp of last data poll from device, string, read-only, e.g.:
+				"17:43:37"
+
+		volume: playback volume, number, read/write
+				use this datapoint to set the desired volume (0-100)
+
+		play_preset: start playback of specific preset, number, write-only
+				write the number of the preset you want to play to this datapoint
+
+		play_URL: URL of file to be played, string, read/write
+				the device will start to play the audio file/playlist located at the URL written to this datapoint
+
+		loop_mode: current loop mode, number, read-only
+				number between 1 and 4 indicating the current loop mode:
+					0 - loop all
+					1 - single loop
+					2 - shuffle loop
+					3 - shuffle, no loop
+					4 - no shuffle, no loop
+
+		toggle_loop_mode: skip to next loop mode, button, read-only
+					not implemented yet
+
+		setMaster: IP address of device to which this device shall be a slave within the sync group, read/write
+					write the IP of the device controlling the sync group this device should join to this datapoint
+
+		leaveSyncGroup: button to make device leave the current sync group, button, write
+					write "true" to this datapoint in order to force the device leave the current snyc group
+		
+		jumptopos: position in ms to which the playback should jump, number, write-only
+					write the position (in ms) to which playback should jump to this datapoint
+
+		jumptopli: number of playlist item to which the playback should jump, number, write-only
+					the device will jump to the index of the playlist xou write to this datapoint
+
+		mode: current source, string, read-only, e.g.:
+					"Spotify Connect"
+
+		switchmode: source to which the device should switch, write-only
+					
+
+		playPromptUrl: URL of a file which should be played overlaying the current playback, string, write-only
+					the device will play the file locate in the URL you write to this datapoint. The device will play the file in addtion to the current title. This can be used to implement a doorbell. After the "doorbell" is played the playback of the current track will return to the additional volume
+
+		setShutdown: time in seconds until the device should shut down
+					the device will shutdown after the number of seconds you write to this datapoint 
+
+
+## Changelog
+
+<### 0.2.0
+* (KaiIOB) introduction of bonjour auto-detect of streamers>
+
+
+<### 0.1.0
+* (KaiIOB) main functions implemented and code clean-up>
+
+
+<### 0.0.3
+* (KaiIOB) migration to setTimeout from setInteral>
+
+
+<### 0.0.2
+* (KaiIOB) Arylic devices added and corrections>
+
+
+<### 0.0.1
+* (KaiIOB) initial release>
+<>
+## License
+MIT License
+
+Copyright (c) 2025 KaiIOB <Kaibrendel@kabelmail.de>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/admin/custom_m.html

@@ -0,0 +1,44 @@
+<script type="text/x-iobroker" data-template-name="wiim">
+	<div class="row">
+		<div class="col s2">
+			<input type="checkbox" data-field="enabled" data-default="false"/>
+			<!-- this field is mandatory, just to find out if to include this settings or not</span-->
+			<span class="translate">enabled</span>
+		</div>
+		<div class="col s4">
+			<input type="text" data-field="interval" size="30">
+			<span class="translate">period of time</span>
+		</div>
+		<div class="col s4">
+			<input type="text" data-field="state" size="30">
+			<span class="translate">new state</span>
+		</div>
+		<div class="col s2">
+			<input type="checkbox" data-field="setAck" data-default="false">
+			<span class="translate">ack</span>
+		</div>
+	</div>
+</script>
+
+<script type="text/javascript">
+	$.get("adapter/wiim/words.js", function(script) {
+		let translation = script.substring(script.indexOf('{'), script.length);
+		translation = translation.substring(0, translation.lastIndexOf(';'));
+		$.extend(systemDictionary, JSON.parse(translation));
+	});
+
+	// There are two ways how to predefine default settings:
+	// - with attribute "data-default" (content independent)
+	// - with function in global variable "defaults". Function name is equal with adapter name.
+	//   as input function receives object with all information concerning it
+	if (typeof defaults !== 'undefined') {
+		defaults["wiim"] = function (obj, instanceObj) {
+			return {
+				enabled:        false,
+				interval:       '5m',
+				state:          false,
+				setAck:         false
+			};
+		}
+	}
+</script>

package/admin/i18n/de/translations.json

@@ -1,6 +1,4 @@
 {
-    "IP_Address": "IP address of device",
     "Refresh_Interval": "interval for refresh of player data in seconds",
-    "Request_Type": "API request type: https for Wiim products, http for Arylic products",
     "wiim adapter settings": "Adaptereinstellungen für wiim"
 }

package/admin/i18n/en/translations.json

@@ -1,6 +1,4 @@
 {
-    "IP_Address": "IP address of device",
     "Refresh_Interval": "interval for refresh of player data in seconds",
-    "Request_Type": "API request type: https for Wiim products, http for Arylic products",
     "wiim adapter settings": "Adapter settings for wiim"
 }

package/admin/i18n/es/translations.json

@@ -1,6 +1,4 @@
 {
-    "IP_Address": "IP address of device",
     "Refresh_Interval": "interval for refresh of player data in seconds",
-    "Request_Type": "API request type: https for Wiim products, http for Arylic products",
     "wiim adapter settings": "Ajustes del adaptador para wiim"
 }

package/admin/i18n/fr/translations.json

@@ -1,6 +1,4 @@
 {
-    "IP_Address": "IP address of device",
     "Refresh_Interval": "interval for refresh of player data in seconds",
-    "Request_Type": "API request type: https for Wiim products, http for Arylic products",
     "wiim adapter settings": "Paramètres d'adaptateur pour wiim"
 }

package/admin/i18n/it/translations.json

@@ -1,6 +1,4 @@
 {
-    "IP_Address": "IP address of device",
     "Refresh_Interval": "interval for refresh of player data in seconds",
-    "Request_Type": "API request type: https for Wiim products, http for Arylic products",
     "wiim adapter settings": "Impostazioni dell'adattatore per wiim"
 }

package/admin/i18n/nl/translations.json

@@ -1,6 +1,5 @@
 {
     "IP_Address": "IP address of device",
     "Refresh_Interval": "interval for refresh of player data in seconds",
-    "Request_Type": "API request type: https for Wiim products, http for Arylic products",
     "wiim adapter settings": "Adapterinstellingen voor wiim"
 }

package/admin/i18n/pl/translations.json

@@ -1,6 +1,4 @@
 {
-    "IP_Address": "IP address of device",
     "Refresh_Interval": "interval for refresh of player data in seconds",
-    "Request_Type": "API request type: https for Wiim products, http for Arylic products",
     "wiim adapter settings": "Ustawienia adaptera dla wiim"
 }

package/admin/i18n/pt/translations.json

@@ -1,6 +1,4 @@
 {
-    "IP_Address": "IP address of device",
     "Refresh_Interval": "interval for refresh of player data in seconds",
-    "Request_Type": "API request type: https for Wiim products, http for Arylic products",
     "wiim adapter settings": "Configurações do adaptador para wiim"
 }

package/admin/i18n/ru/translations.json

@@ -1,6 +1,4 @@
 {
-    "IP_Address": "IP address of device",
     "Refresh_Interval": "interval for refresh of player data in seconds",
-    "Request_Type": "API request type: https for Wiim products, http for Arylic products",
     "wiim adapter settings": "Настройки адаптера для wiim"
 }

package/admin/i18n/uk/translations.json

@@ -1,6 +1,4 @@
 {
-    "IP_Address": "IP address of device",
     "Refresh_Interval": "interval for refresh of player data in seconds",
-    "Request_Type": "API request type: https for Wiim products, http for Arylic products",
     "wiim adapter settings": "Налаштування адаптера для wiim"
 }

package/admin/i18n/zh-cn/translations.json

@@ -1,6 +1,5 @@
 {
-    "IP_Address": "IP address of device",
+
     "Refresh_Interval": "interval for refresh of player data in seconds",
-    "Request_Type": "API request type: https for Wiim products, http for Arylic products",
     "wiim adapter settings": "wiim的适配器设置"
 }

package/admin/jsonConfig.json

@@ -1,36 +1,17 @@
-{
-	"i18n": true,
-	"type": "panel",
-	"items": {
-		"IP_Address": {
-			"type": "text",
-			"label": "IP address of device",
-			"newLine": true,
-			"xs": 12,
-            "sm": 12,
-            "md": 4,
-            "lg": 3,
-            "xl": 3
-		},
-		"Refresh_Interval": {
-			"type": "number",
-			"label": "interval for refresh of player data in seconds",
-			"newLine": true,
-			"xs": 12,
-            "sm": 12,
-            "md": 4,
-            "lg": 3,
-            "xl": 3
-		},
-		"Request_Type": {
-			"type": "text",
-			"label": "API request type: https for Wiim products, http for Arylic products",
-			"newLine": true,
-			"xs": 12,
-            "sm": 12,
-            "md": 4,
-            "lg": 3,
-            "xl": 3
-		}
-	}
-}
+{
+	"i18n": true,
+	"type": "panel",
+	"items": {
+		"Refresh_Interval": {
+			"type": "number",
+			"label": "interval for refresh of player data in seconds",
+			"newLine": true,
+			"xs": 12,
+            "sm": 12,
+            "md": 4,
+            "lg": 3,
+            "xl": 3
+		}
+
+	}
+}

package/admin/tab_m.html

@@ -0,0 +1,79 @@
+<html>
+
+<head>
+	<link rel="stylesheet" type="text/css" href="../../lib/css/materialize.css">
+	<link rel="stylesheet" type="text/css" href="../../css/adapter.css" />
+
+	<script type="text/javascript" src="../../lib/js/jquery-3.2.1.min.js"></script>
+	<script type="text/javascript" src="../../socket.io/socket.io.js"></script>
+	<script type="text/javascript" src="../../js/translate.js"></script>
+	<script type="text/javascript" src="../../lib/js/materialize.js"></script>
+
+	<script type="text/javascript" src="words.js"></script>
+	<style>
+		.m .col .select-wrapper + label {
+			top: -26px;
+		}
+		.m span{
+			font-size: 0.9em;
+		}
+	</style>
+</head>
+
+<body>
+
+	<div class="m adapter-container">
+		<div class="row">
+			<!-- Forms are the standard way to receive user inputted data.
+			 Learn more http://materializecss.com/forms.html-->
+			<div class="row">
+				<div class="input-field col s6">
+					<img src="wiim.png" class="logo">
+				</div>
+			</div>
+			<div class="row">
+				<div class="input-field col s3">
+					<input class="value" id="test1" type="checkbox" />
+					<label for="test1" class="translate">test1</label>
+				</div>
+			</div>
+			<div class="row">
+				<div class="input-field col s12 m6 l4">
+					<input class="value" id="myText" type="text">
+					<label for="myText">Text</label>
+					<span class="translate">Descriptions of the input field</span>
+				</div>
+				<div class="input-field col s12 m6 l4">
+					<input type="number" class="value" id="test2" />
+					<label for="test2" class="translate">Number</label>
+					<!-- Important: label must come directly after input. Label is important. -->
+					<span class="translate">test2</span>
+				</div>
+				<div class="input-field col s12 m6 l4">
+					<input id="email" type="email" class="value validate">
+					<label for="email" data-error="wrong" data-success="right">Email</label>
+					<!--  You can add custom validation messages by adding either data-error or data-success attributes to your input field labels.-->
+					<span class="translate">Verification input</span>
+				</div>
+			</div>
+			<div class="row">
+				<div class="input-field col s12 m4">
+					<select class="value" id="mySelect">
+						<option value="auto" class="translate">Auto</option>
+						<option value="manual" class="translate">Manual</option>
+					</select>
+					<label for="mySelect" class="translate">My select</label>
+					<!-- Important: label must come directly after select. Label is important. -->
+				</div>
+				<div class="input-field col s12 m8">
+					<i class="material-icons prefix">mode_edit</i>
+					<textarea id="Textarea" class="value materialize-textarea"></textarea>
+					<label for="Textarea">Message</label>
+				</div>
+			</div>
+		</div>
+	</div>
+
+</body>
+
+</html>