Version change: 0.0.12-alpha

android/app/build.gradle

@@ -39,8 +39,8 @@ android {
         applicationId "com.keyboardcrumbs.haclient"
         minSdkVersion 21
         targetSdkVersion 27
-        versionCode 16
+        versionCode 17
-        versionName "0.0.11-alpha"
+        versionName "0.0.12-alpha"
         testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
     }
 

lib/data_model.dart

@@ -257,12 +257,6 @@ class HassioDataModel {
         if ((entityDomain == "group")&&(composedEntity["attributes"]["view"] == true)) {
           uiGroups.add(entityId);
         }
-        String iconName = composedEntity["attributes"]["icon"];
-        if (iconName != null) {
-          composedEntity["iconCode"] = MaterialDesignIcons.getCustomIconByName(iconName);
-        } else {
-          composedEntity["iconCode"] = MaterialDesignIcons.getDefaultIconByEntityId(entityId); //
-        }
       }
 
 
@@ -286,28 +280,31 @@ class HassioDataModel {
       if (viewGroup != null) {
         viewGroupStructure["standalone"] = {};
         viewGroupStructure["groups"] = {};
-        viewGroupStructure["groups"]["haclientui.badges"] = {"children": [], "friendly_name": "Badges"};
+        viewGroupStructure["state"] = "on";
-        viewGroupStructure["iconCode"] = viewGroup["iconCode"];
+        viewGroupStructure["entity_id"] = viewGroup["entity_id"];
+        viewGroupStructure["badges"] = {"children": []};
+        viewGroupStructure["attributes"] = viewGroup["attributes"] != null ? {"icon": viewGroup["attributes"]["icon"]} : {"icon": "none"};
 
 
         viewGroup["attributes"]["entity_id"].forEach((entityId) { //Each entity or group in view
           Map newGroup = {};
           String domain = _entitiesData[entityId]["domain"];
           if (domain != "group") {
-            String autoGroupID;
             if (_topBadgeDomains.contains(domain)) {
-              autoGroupID = "haclientui.badges";
+              viewGroupStructure["badges"]["children"].add(entityId);
             } else {
-              autoGroupID = "$domain.$domain$viewCounter";
+              String autoGroupID = "$domain.$domain$viewCounter";
-            }
+              if (viewGroupStructure["groups"]["$autoGroupID"] == null) {
-            if (viewGroupStructure["groups"]["$autoGroupID"] == null) {
+                newGroup["entity_id"] = "$domain.$domain$viewCounter";
-              newGroup["entity_id"] = "$domain.$domain$viewCounter";
+                newGroup["friendly_name"] = "$domain";
-              newGroup["friendly_name"] = "$domain";
+                newGroup["children"] = [];
-              newGroup["children"] = [];
+                newGroup["children"].add(entityId);
-              newGroup["children"].add(entityId);
+                viewGroupStructure["groups"]["$autoGroupID"] =
-              viewGroupStructure["groups"]["$autoGroupID"] = Map.from(newGroup);
+                    Map.from(newGroup);
-            } else {
+              } else {
-              viewGroupStructure["groups"]["$autoGroupID"]["children"].add(entityId);
+                viewGroupStructure["groups"]["$autoGroupID"]["children"].add(
+                    entityId);
+              }
             }
           } else {
             newGroup["entity_id"] = entityId;
@@ -362,7 +359,59 @@ class MaterialDesignIcons {
     "input_number": "mdi:ray-vertex",
     "input_select": "mdi:format-list-bulleted",
     "input_text": "mdi:textbox",
-    "sun": "mdi:white-balance-sunny",
+    "sun": "mdi:white-balance-sunny"
+  };
+
+  static Map _defaultIconsByDeviceClass = {
+    //"binary_sensor.battery": "mdi:", //TODO
+    "binary_sensor.cold.on": "mdi:snowflake",
+    "binary_sensor.cold.off": "mdi:thermometer",
+    "binary_sensor.connectivity.on": "mdi:server-network",
+    "binary_sensor.connectivity.off": "mdi:server-network-off",
+    "binary_sensor.door.on": "mdi:door-open",
+    "binary_sensor.door.off": "mdi:door-closed",
+    //"binary_sensor.garage_door": "mdi:",
+    //"binary_sensor.gas": "mdi:",
+    "binary_sensor.heat.on": "mdi:fire",
+    "binary_sensor.heat.off": "mdi:thermometer",
+    "binary_sensor.light.on": "mdi:brightness-7",
+    "binary_sensor.light.off": "mdi:brightness-5",
+    //"binary_sensor.lock.on": "mdi:",
+    //"binary_sensor.lock.off": "mdi:",
+    "binary_sensor.moisture.on": "mdi:water",
+    "binary_sensor.moisture.off": "mdi:water-off",
+    "binary_sensor.motion.on": "mdi:run",
+    "binary_sensor.motion.off": "mdi:walk",
+    "binary_sensor.moving.on": "mdi:checkbox-marked-circle",
+    "binary_sensor.moving.off": "mdi:checkbox-blank-circle-outline",
+    "binary_sensor.occupancy.on": "mdi:home",
+    "binary_sensor.occupancy.off": "mdi:home-outline",
+    "binary_sensor.opening.on": "mdi:square-outline",
+    "binary_sensor.opening.off": "mdi:square",
+    //"binary_sensor.plug.on": "mdi:",
+    //"binary_sensor.plug.off": "mdi:",
+    "binary_sensor.power.on": "mdi:alert",
+    "binary_sensor.power.off": "mdi:verified",
+    //"binary_sensor.presence.on": "mdi:",
+    //"binary_sensor.presence.off": "mdi:",
+    //"binary_sensor.problem.on": "mdi:",
+    //"binary_sensor.problem.off": "mdi:",
+    "binary_sensor.safety.on": "mdi:alert",
+    "binary_sensor.safety.off": "mdi:verified",
+    "binary_sensor.smoke.on": "mdi:alert",
+    "binary_sensor.smoke.off": "mdi:verified",
+    "binary_sensor.sound.on": "mdi:music-note",
+    "binary_sensor.sound.off": "mdi:music-note-off",
+    "binary_sensor.vibration.on": "mdi:vibrate",
+    "binary_sensor.vibration.off": "mdi:mdi-crop-portrait",
+    //"binary_sensor.window.on": "mdi:",
+    //"binary_sensor.window.off": "mdi:",
+    "sensor.battery": "mdi:battery-80",
+    "sensor.humidity": "mdi:water-percent",
+    //"sensor.illuminance": "mdi:",
+    "sensor.temperature": "mdi:thermometer",
+    //"cover.window": "mdi:",
+    //"cover.garage": "mdi:",
   };
   static Map _iconsDataMap = {
     "mdi:access-point": 0xf002,
@@ -3162,13 +3211,59 @@ class MaterialDesignIcons {
     "mdi:blank": 0xf68c
   };
 
-  static int getCustomIconByName(String name) {
+  static Widget createIconFromEntityData(Map data, double size, Color color) {
+    if ((data["attributes"] != null) && (data["attributes"]["entity_picture"] != null)) {
+      if (homeAssistantWebHost != null) {
+        return CircleAvatar(
+          backgroundColor: Colors.white,
+          backgroundImage: CachedNetworkImageProvider(
+            "$homeAssistantWebHost${data["attributes"]["entity_picture"]}",
+          ),
+        );
+      } else {
+        return Container(width: 0.0, height: 0.0);
+      }
+    } else {
+      String iconName = data["attributes"] != null
+          ? data["attributes"]["icon"]
+          : null;
+      int iconCode = 0;
+      if (iconName != null) {
+        iconCode = getIconCodeByIconName(iconName);
+      } else {
+        iconCode = getDefaultIconByEntityId(data["entity_id"],
+            data["attributes"] != null
+                ? data["attributes"]["device_class"]
+                : null, data["state"]); //
+      }
+      return Icon(
+          IconData(iconCode, fontFamily: 'Material Design Icons'),
+          size: size,
+          color: color,
+      );
+    }
+  }
+
+  static IconData createIconDataFromIconCode(int code) {
+    return IconData(code, fontFamily: 'Material Design Icons');
+  }
+
+  static IconData createIconDataFromIconName(String name) {
+    return IconData(getIconCodeByIconName(name), fontFamily: 'Material Design Icons');
+  }
+
+  static int getIconCodeByIconName(String name) {
     return _iconsDataMap[name] ?? 0;
   }
 
-  static int getDefaultIconByEntityId(String entityId) {
+  static int getDefaultIconByEntityId(String entityId, String deviceClass, String state) {
     String domain = entityId.split(".")[0];
-    String iconName = _defaultIconsByDomains[domain];
+    String iconNameByDomain = _defaultIconsByDomains[domain];
+    String iconNameByDeviceClass;
+    if (deviceClass != null) {
+      iconNameByDeviceClass = _defaultIconsByDeviceClass["$domain.$deviceClass.$state"] ?? _defaultIconsByDeviceClass["$domain.$deviceClass"];
+    }
+    String iconName = iconNameByDeviceClass ?? iconNameByDomain;
     if (iconName != null) {
       return _iconsDataMap[iconName] ?? 0;
     } else {

lib/main.dart

@@ -7,13 +7,16 @@ import 'package:web_socket_channel/io.dart';
 import 'package:progress_indicators/progress_indicators.dart';
 import 'package:event_bus/event_bus.dart';
 import 'package:flutter/widgets.dart';
+import 'package:cached_network_image/cached_network_image.dart';
 
 part 'settings.dart';
 part 'data_model.dart';
 
 EventBus eventBus = new EventBus();
 const String appName = "HA Client";
-const appVersion = "0.0.11-alpha";
+const appVersion = "0.0.12-alpha";
+
+String homeAssistantWebHost;
 
 void main() => runApp(new HassClientApp());
 
@@ -92,6 +95,7 @@ class _MainPageState extends State<MainPage> with WidgetsBindingObserver {
     String port = prefs.getString('hassio-port');
     _instanceHost = "$domain:$port";
     String apiEndpoint = "${prefs.getString('hassio-protocol')}://$domain:$port/api/websocket";
+    homeAssistantWebHost = "${prefs.getString('hassio-res-protocol')}://$domain:$port";
     String apiPassword = prefs.getString('hassio-password');
     String authType = prefs.getString('hassio-auth-type');
     if ((domain == null) || (port == null) || (apiPassword == null) ||
@@ -177,9 +181,19 @@ class _MainPageState extends State<MainPage> with WidgetsBindingObserver {
 
   List<Widget> _buildSingleView(structure) {
     List<Widget> result = [];
-    /*structure["standalone"].forEach((entityId) {
+    if (structure["badges"]["children"].length > 0) {
-        result.add(_buildCard([entityId], ""));
+      result.add(
-      });*/
+            Wrap(
+              alignment: WrapAlignment.center,
+              spacing: 10.0,
+              runSpacing: 4.0,
+              //padding: new EdgeInsets.all(8.0),
+              //itemExtent: 40.0,
+              children: _buildBadges(structure["badges"]["children"]),
+            )
+      );
+
+    }
     structure["groups"].forEach((id, group) {
       if (group["children"].length > 0) {
         result.add(_buildCard(
@@ -190,6 +204,120 @@ class _MainPageState extends State<MainPage> with WidgetsBindingObserver {
     return result;
   }
 
+  List<Widget> _buildBadges(List ids) {
+    List<Widget> result = [];
+    ids.forEach((entityId) {
+      var data = _entitiesData[entityId];
+      if (data == null) {
+        debugPrint("Hiding unknown entity from badges: $entityId");
+      } else {
+        result.add(
+        _buildSingleBadge(data)
+        );
+      }
+    });
+    return result;
+  }
+
+  Widget _buildSingleBadge(data) {
+    Widget badgeIcon;
+    String badgeTextValue;
+    switch (data["domain"]) {
+      case "sun": {
+        badgeIcon = data["state"] == "below_horizon" ? Icon(MaterialDesignIcons.createIconDataFromIconCode(0xf0dc)) : Icon(MaterialDesignIcons.createIconDataFromIconCode(0xf5a8));
+        break;
+      }
+      case "sensor": {
+        badgeTextValue = data["attributes"]["unit_of_measurement"];
+        badgeIcon = Center(
+          child: Text(
+            "${data['state']}",
+            overflow: TextOverflow.fade,
+            softWrap: false,
+            textAlign: TextAlign.center,
+            style: TextStyle(fontSize: 18.0),
+          ),
+        );
+        break;
+      }
+      case "device_tracker": {
+        badgeIcon = MaterialDesignIcons.createIconFromEntityData(data, 50.0,Colors.black);
+        badgeTextValue = data["state"];
+        break;
+      }
+      default: {
+       badgeIcon = MaterialDesignIcons.createIconFromEntityData(data, 50.0,Colors.black);
+      }
+    }
+    Widget badgeText;
+    if (badgeTextValue == null) {
+      badgeText = Container(width: 0.0, height: 0.0);
+    } else {
+      badgeText = Container(
+          padding: EdgeInsets.fromLTRB(6.0, 2.0, 6.0, 2.0),
+          child: Text("$badgeTextValue",
+              style: TextStyle(fontSize: 13.0, color: Colors.white),
+              textAlign: TextAlign.center, softWrap: false, overflow: TextOverflow.fade),
+          decoration: new BoxDecoration(
+            // Circle shape
+            //shape: BoxShape.circle,
+            color: Colors.redAccent,
+            borderRadius: BorderRadius.circular(9.0),
+          )
+      );
+    }
+    return Column(
+      children: <Widget>[
+        Container(
+          margin: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
+          width: 50.0,
+          height: 50.0,
+          decoration: new BoxDecoration(
+            // Circle shape
+            shape: BoxShape.circle,
+            color: Colors.white,
+            // The border you want
+            border: new Border.all(
+              width: 2.0,
+              color: Colors.redAccent,
+            ),
+          ),
+          child: Stack(
+            overflow: Overflow.visible,
+            children: <Widget>[
+              Positioned(
+                width: 46.0,
+                height: 46.0,
+                top: 0.0,
+                left: 0.0,
+                child: badgeIcon,
+              ),
+              Positioned(
+                //width: 50.0,
+                bottom: -9.0,
+                left: -15.0,
+                right: -15.0,
+                child: Center(
+                  child: badgeText,
+                )
+              )
+            ],
+          ),
+        ),
+        Container(
+          width: 60.0,
+          child: Text(
+            "${data['display_name']}",
+            textAlign: TextAlign.center,
+            softWrap: true,
+            maxLines: 2,
+            overflow: TextOverflow.ellipsis,
+          ),
+        ),
+      ],
+    );
+  }
+
   Card _buildCard(List ids, String name) {
     List<Widget> body = [];
     body.add(_buildCardHeader(name));
@@ -225,15 +353,13 @@ class _MainPageState extends State<MainPage> with WidgetsBindingObserver {
         debugPrint("Hiding unknown entity from card: $id");
       } else {
         entities.add(new ListTile(
-          leading: Icon(
+          leading: MaterialDesignIcons.createIconFromEntityData(data, 28.0, _stateIconColors[data["state"]] ?? Colors.blueGrey),
-            _createMDIfromCode(data["iconCode"]),
-            color: _stateIconColors[data["state"]] ?? Colors.blueGrey,
-          ),
           //subtitle: Text("${data['entity_id']}"),
-          trailing: _buildEntityAction(id),
+          trailing: _buildEntityStateWidget(data),
           title: Text(
             "${data["display_name"]}",
-            overflow: TextOverflow.ellipsis,
+            overflow: TextOverflow.fade,
+            softWrap: false,
           ),
         ));
       }
@@ -241,26 +367,26 @@ class _MainPageState extends State<MainPage> with WidgetsBindingObserver {
     return entities;
   }
 
-  Widget _buildEntityAction(String entityId) {
+  Widget _buildEntityStateWidget(data) {
-    var entity = _entitiesData[entityId];
+    String entityId = data["entity_id"];
     Widget result;
-    if (entity["actionType"] == "switch") {
+    if (data["actionType"] == "switch") {
       result = Switch(
-        value: (entity["state"] == "on"),
+        value: (data["state"] == "on"),
         onChanged: ((state) {
           _callService(
-              entity["domain"], state ? "turn_on" : "turn_off", entityId);
+              data["domain"], state ? "turn_on" : "turn_off", entityId);
           setState(() {
             _entitiesData[entityId]["state"] = state ? "on" : "off";
           });
         }),
       );
-    } else if (entity["actionType"] == "statelessIcon") {
+    } else if (data["actionType"] == "statelessIcon") {
       result = SizedBox(
           width: 60.0,
           child: FlatButton(
             onPressed: (() {
-              _callService(entity["domain"], "turn_on", entityId);
+              _callService(data["domain"], "turn_on", entityId);
             }),
             child: Text(
               "Run",
@@ -272,7 +398,7 @@ class _MainPageState extends State<MainPage> with WidgetsBindingObserver {
       result = Padding(
           padding: EdgeInsets.fromLTRB(0.0, 0.0, 16.0, 0.0),
           child: Text(
-              "${entity["state"]}${(entity["attributes"] != null && entity["attributes"]["unit_of_measurement"] != null) ? entity["attributes"]["unit_of_measurement"] : ''}",
+              "${data["state"]}${(data["attributes"] != null && data["attributes"]["unit_of_measurement"] != null) ? data["attributes"]["unit_of_measurement"] : ''}",
               textAlign: TextAlign.right,
               style: new TextStyle(
                 fontSize: 16.0,
@@ -286,17 +412,13 @@ class _MainPageState extends State<MainPage> with WidgetsBindingObserver {
     return result;
   }
 
-  IconData _createMDIfromCode(int code) {
-    return IconData(code, fontFamily: 'Material Design Icons');
-  }
-
   List<Tab> buildUIViewTabs() {
     List<Tab> result = [];
     if ((_entitiesData != null) && (_uiStructure != null)) {
       _uiStructure.forEach((viewId, structure) {
         result.add(
             Tab(
-                icon: Icon(_createMDIfromCode(structure["iconCode"]))
+                icon: MaterialDesignIcons.createIconFromEntityData(structure, 24.0, null)
             )
         );
       });
@@ -449,7 +571,7 @@ class _MainPageState extends State<MainPage> with WidgetsBindingObserver {
                 ),
               ),*/
               Icon(
-                _createMDIfromCode(MaterialDesignIcons.getCustomIconByName("mdi:home-assistant")),
+                MaterialDesignIcons.createIconDataFromIconName("mdi:home-assistant"),
                 size: 100.0,
                 color: _errorCodeToBeShown == 0 ? Colors.blue : Colors.redAccent,
               ),

lib/settings.dart

@@ -40,6 +40,7 @@ class _ConnectionSettingsPageState extends State<ConnectionSettingsPage> {
     prefs.setString("hassio-port", _hassioPort);
     prefs.setString("hassio-password", _hassioPassword);
     prefs.setString("hassio-protocol", _socketProtocol);
+    prefs.setString("hassio-res-protocol", _socketProtocol == "wss" ? "https" : "http");
     prefs.setString("hassio-auth-type", _authType);
   }
 

pubspec.lock

@@ -36,6 +36,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.4"
+  cached_network_image:
+    dependency: "direct main"
+    description:
+      name: cached_network_image
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.4.2"
   charcode:
     dependency: transitive
     description:
@@ -92,6 +99,13 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_cache_manager:
+    dependency: transitive
+    description:
+      name: flutter_cache_manager
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.2"
   flutter_launcher_icons:
     dependency: "direct main"
     description:
@@ -251,6 +265,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.6.2"
+  path_provider:
+    dependency: transitive
+    description:
+      name: path_provider
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.4.1"
   petitparser:
     dependency: transitive
     description:
@@ -375,6 +396,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.4"
+  synchronized:
+    dependency: transitive
+    description:
+      name: synchronized
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.5.3"
   term_glyph:
     dependency: transitive
     description:
@@ -403,6 +431,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.9.0+5"
+  uuid:
+    dependency: transitive
+    description:
+      name: uuid
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.3"
   vector_math:
     dependency: transitive
     description:

pubspec.yaml

@@ -1,7 +1,7 @@
 name: hass_client
 description: Home Assistant Android Client
 
-version: 0.0.11-alpha
+version: 0.0.12-alpha
 
 environment:
   sdk: ">=2.0.0-dev.68.0 <3.0.0"
@@ -14,6 +14,7 @@ dependencies:
   event_bus: ^1.0.1
   package_info: ^0.3.2
   flutter_launcher_icons: ^0.6.1
+  cached_network_image: ^0.4.1
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.