Added the Icon View.

CHANGELOG.md

@@ -2,6 +2,11 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [1.1.0] - 2018-06-05
+
+### Added
+- Icon View
+
 ## [1.0.0] - 2018-06-04
 
 Initial Release of the MMM-LocalTemperature module. 

MMM-LocalTemperature.js

@@ -24,6 +24,7 @@ Module.register("MMM-LocalTemperature", {
 		sendHumidity: true,
 		showTemperature: false,
 		showHumidity: false,
+		iconView: true,
 		temperatureText: null, // Set in self.start() becuase access to self.translate is needed
 		humidityText: null, // Set in self.start() becuase access to self.translate is needed
 		fontSize: "medium",
@@ -119,6 +120,7 @@ Module.register("MMM-LocalTemperature", {
 		if (!axis.isBoolean(self.config.sendHumidity)) { self.config.sendHumidity = self.defaults.sendHumidity; }
 		if (!axis.isBoolean(self.config.roundTemperature)) { self.config.roundTemperature = self.defaults.roundTemperature; }
 		if (!axis.isBoolean(self.config.roundHumidity)) { self.config.roundHumidity = self.defaults.roundHumidity; }
+		if (!axis.isBoolean(self.config.iconView)) { self.config.iconView = self.defaults.iconView; }
 		if (!axis.isString(self.config.decimalSymbol)) { self.config.decimalSymbol = self.defaults.decimalSymbol; }
 		if (!self.validFontSizes.includes(self.config.fontSize)) { self.config.fontSize = self.defaults.fontSize; }
 
@@ -314,22 +316,38 @@ Module.register("MMM-LocalTemperature", {
 			var humidityValue = self.roundNumber(self.sensorData.humidity, humidityDecimals).toFixed(humidityDecimals);
 			humidityValue = self.replaceAll(humidityValue.toString(), ".", self.config.decimalSymbol);
 
-			if (self.config.showTemperature) {
+			if (self.config.iconView) {
 				dataContainer = document.createElement("div");
-				dataContainer.classList.add("temperature-container");
-				dataContainer.innerHTML = self.config.temperatureText;
-				dataContainer.innerHTML = self.replaceAll(dataContainer.innerHTML, "{temperature}", temperatureValue);
-				dataContainer.innerHTML = self.replaceAll(dataContainer.innerHTML, "{humidity}", humidityValue);
-				wrapper.appendChild(dataContainer);
-			}
-
-			if (self.config.showHumidity) {
-				dataContainer = document.createElement("div");
-				dataContainer.classList.add("humidity-container");
-				dataContainer.innerHTML = self.config.humidityText;
-				dataContainer.innerHTML = self.replaceAll(dataContainer.innerHTML, "{temperature}", temperatureValue);
-				dataContainer.innerHTML = self.replaceAll(dataContainer.innerHTML, "{humidity}", humidityValue);
+				dataContainer.classList.add("icon-view-container");
+				if (self.config.showTemperature) {
+					var symbol = "°C";
+					if (self.tempUnit === "fahrenheit") { symbol = "°F"; }
+					else if (self.tempUnit === "kelvin") { symbol = " K"; }
+					dataContainer.innerHTML += "<span class=\"fa fa-thermometer-half\"></span> " + temperatureValue + symbol;
+					if (self.config.showHumidity) { dataContainer.innerHTML += " "; }
+				}
+				if (self.config.showHumidity) {
+					dataContainer.innerHTML += "<span class=\"fa fa-tint\"></span> " + humidityValue + "%";
+				}
 				wrapper.appendChild(dataContainer);
+			} else {
+				if (self.config.showTemperature) {
+					dataContainer = document.createElement("div");
+					dataContainer.classList.add("temperature-container");
+					dataContainer.innerHTML = self.config.temperatureText;
+					dataContainer.innerHTML = self.replaceAll(dataContainer.innerHTML, "{temperature}", temperatureValue);
+					dataContainer.innerHTML = self.replaceAll(dataContainer.innerHTML, "{humidity}", humidityValue);
+					wrapper.appendChild(dataContainer);
+				}
+
+				if (self.config.showHumidity) {
+					dataContainer = document.createElement("div");
+					dataContainer.classList.add("humidity-container");
+					dataContainer.innerHTML = self.config.humidityText;
+					dataContainer.innerHTML = self.replaceAll(dataContainer.innerHTML, "{temperature}", temperatureValue);
+					dataContainer.innerHTML = self.replaceAll(dataContainer.innerHTML, "{humidity}", humidityValue);
+					wrapper.appendChild(dataContainer);
+				}
 			}
 
 		} else {

README.md

@@ -6,7 +6,7 @@ This module reads and displays temperature and humidity information from a senso
 
 | Status  | Version | Date       | Maintained? | Minimum MagicMirror² Version |
 |:------- |:------- |:---------- |:----------- |:---------------------------- |
-| Working | `1.0.0` | 2018-06-04 | Yes         |`2.2.1`                       |
+| Working | `1.1.0` | 2018-06-05 | Yes         |`2.2.1`                       |
 
 ### Example
 ![Example of MMM-LocalTemperature](images/sample.png?raw=true "Example screenshot")
@@ -62,6 +62,7 @@ var config = {
 | `sendHumidity`          | *Optional* - When `true`, an "INDOOR_HUMIDITY" notification is sent to the other modules when the data is received from the sensor.  This can be used to display the indoor humidity within the built-in 'currentweather' module. The 'currentweather' module's `showIndoorHumidity` option must be set to `true` for it to display the data sent from this module.<br />**Type:** `boolean`<br />**Default:** `true`
 | `showTemperature`       | *Optional* - When `true`, the module will display the temperature on screen.<br />**Type:** `boolean`<br />**Default:** `false`
 | `showHumidity`          | *Optional* - When `true`, the module will display the humidity on screen.<br />**Type:** `boolean`<br />**Default:** `false`
+| `iconView`              | *Optional* - When `true`, a view which uses icons and the data will be shown instead of the standard temperature and humidity text. The data shown depends on the `showTemperature` and `showHumidity` options. <br />**Type:** `boolean`<br />**Default:** `true`
 | `temperatureText`       | *Optional* - The text template to be used when displaying the temperature data. The stings `"{temperature}"` and `"{humidity}"` will be replaced with the temperature and humidity values respectively. <br />**Type:** `string`<br />**Default:** `"Temperature: {temperature}°C/°F/K"`
 | `humidityText`          | *Optional* - The text template to be used when displaying the humidity data. The stings `"{temperature}"` and `"{humidity}"` will be replaced with the temperature and humidity values respectively. <br />**Type:** `string`<br />**Default:** `"Humidity: {humidity}%"`
 | `fontSize`              | *Optional* - The main font size to use for the module text. <br />**Type:** `string`<br />**Default:** `'medium'`<br />**Options:** `'x-small'`, `'small'`, `'medium'`, `'large'`, `'x-large'`