Gauge card elements scale fix

lib/cards/card.class.dart

@@ -3,7 +3,6 @@ part of '../main.dart';
 class CardData {
 
   String type;
-  final int depth;
   List<EntityWrapper> entities = [];
   List conditions;
   bool showEmpty;
@@ -11,22 +10,22 @@ class CardData {
 
   EntityWrapper get entity => entities.isNotEmpty ? entities[0] : null;
 
-  factory CardData.parse(Map<String, dynamic> rawData, {depth: 1}) {
+  factory CardData.parse(Map<String, dynamic> rawData) {
     switch (rawData['type']) {
       case CardType.ENTITIES:
-        return EntitiesCardData(rawData, depth: depth);
+        return EntitiesCardData(rawData);
         break;
       case CardType.ALARM_PANEL:
-        return AlarmPanelCardData(rawData, depth: depth);
+        return AlarmPanelCardData(rawData);
         break;
       case CardType.BUTTON:
-        return ButtonCardData(rawData, depth: depth);
+        return ButtonCardData(rawData);
         break;
       case CardType.ENTITY_BUTTON:
-        return ButtonCardData(rawData, depth: depth);
+        return ButtonCardData(rawData);
         break;
       case CardType.CONDITIONAL:
-        return CardData.parse(rawData['card'], depth: depth);
+        return CardData.parse(rawData['card']);
         break;
       case CardType.ENTITY_FILTER:
         Map<String, dynamic> cardData = Map.from(rawData);
@@ -35,38 +34,38 @@ class CardData {
           cardData.addAll(rawData['card']);
         }
         cardData['type'] ??= CardType.ENTITIES;
-        return CardData.parse(cardData, depth: depth);
+        return CardData.parse(cardData);
         break;
       case CardType.GAUGE:
-        return GaugeCardData(rawData, depth: depth);
+        return GaugeCardData(rawData);
         break;
       case CardType.GLANCE:
-        return GlanceCardData(rawData, depth: depth);
+        return GlanceCardData(rawData);
         break;
       case CardType.HORIZONTAL_STACK:
-        return HorizontalStackCardData(rawData, depth: depth);
+        return HorizontalStackCardData(rawData);
         break;
       case CardType.VERTICAL_STACK:
-        return VerticalStackCardData(rawData, depth: depth);
+        return VerticalStackCardData(rawData);
         break;
       case CardType.MARKDOWN:
-        return MarkdownCardData(rawData, depth: depth);
+        return MarkdownCardData(rawData);
         break;
       case CardType.MEDIA_CONTROL:
-        return MediaControlCardData(rawData, depth: depth);
+        return MediaControlCardData(rawData);
         break;
       default:
         if (rawData.containsKey('entities')) {
-          return EntitiesCardData(rawData, depth: depth);
+          return EntitiesCardData(rawData);
         } else if (rawData.containsKey('entity')) {
           rawData['entities'] = [rawData['entity']];
-          return EntitiesCardData(rawData, depth: depth);
+          return EntitiesCardData(rawData);
         }
-        return CardData(rawData, depth: depth);
+        return CardData(rawData);
     }
   }
 
-  CardData(Map<String, dynamic> rawData, {this.depth: 1}) {
+  CardData(Map<String, dynamic> rawData) {
     type = rawData['type'] ?? CardType.ENTITIES;
     conditions = rawData['conditions'] ?? [];
     showEmpty = rawData['show_empty'] ?? true;
@@ -160,7 +159,7 @@ class EntitiesCardData extends CardData {
     return EntitiesCard(card: this);
   }
   
-  EntitiesCardData(Map<String, dynamic> rawData, {int depth: 1}) : super(rawData, depth: depth) {
+  EntitiesCardData(Map<String, dynamic> rawData) : super(rawData) {
     //Parsing card data
     title = rawData["title"];
     icon = rawData['icon'];
@@ -247,7 +246,7 @@ class AlarmPanelCardData extends CardData {
     return AlarmPanelCard(card: this);
   }
   
-  AlarmPanelCardData(Map<String, dynamic> rawData, {int depth: 1}) : super(rawData, depth: depth) {
+  AlarmPanelCardData(Map<String, dynamic> rawData) : super(rawData) {
     //Parsing card data
     name = rawData['name'];
     states = rawData['states'];
@@ -274,18 +273,30 @@ class ButtonCardData extends CardData {
   String icon;
   bool showName;
   bool showIcon;
+  double iconHeightPx = 0;
+  double iconHeightRem = 0;
   
   @override
   Widget buildCardWidget() {
     return EntityButtonCard(card: this);
   }
   
-  ButtonCardData(Map<String, dynamic> rawData, {int depth: 1}) : super(rawData, depth: depth) {
+  ButtonCardData(Map<String, dynamic> rawData) : super(rawData) {
     //Parsing card data
     name = rawData['name'];
     icon = rawData['icon'];
     showName = rawData['show_name'] ?? true;
     showIcon = rawData['show_icon'] ?? true;
+    if (rawData.containsKey('icon_height')) {
+      String rawHeight = rawData['icon_height'];
+      if (rawHeight.contains('px')) {
+        iconHeightPx = double.tryParse(rawHeight.replaceFirst('px', '')) ?? 0;
+      } else if (rawHeight.contains('rem')) {
+        iconHeightRem = double.tryParse(rawHeight.replaceFirst('rem', '')) ?? 0; 
+      } else if (rawHeight.contains('em')) {
+        iconHeightRem = double.tryParse(rawHeight.replaceFirst('em', '')) ?? 0;
+      }
+    }
     //Parsing entity
     var entitiId = rawData["entity"];
     if (entitiId != null && entitiId is String) {
@@ -330,7 +341,7 @@ class GaugeCardData extends CardData {
     return GaugeCard(card: this);
   }
   
-  GaugeCardData(Map<String, dynamic> rawData, {int depth: 1}) : super(rawData, depth: depth) {
+  GaugeCardData(Map<String, dynamic> rawData) : super(rawData) {
     //Parsing card data
     name = rawData['name'];
     unit = rawData['unit'];
@@ -370,7 +381,7 @@ class GlanceCardData extends CardData {
     return GlanceCard(card: this);
   }
   
-  GlanceCardData(Map<String, dynamic> rawData, {int depth: 1}) : super(rawData, depth: depth) {
+  GlanceCardData(Map<String, dynamic> rawData) : super(rawData) {
     //Parsing card data
     title = rawData["title"];
     showName = rawData['show_name'] ?? true;
@@ -417,10 +428,10 @@ class HorizontalStackCardData extends CardData {
     return HorizontalStackCard(card: this);
   }
   
-  HorizontalStackCardData(Map<String, dynamic> rawData, {int depth: 1}) : super(rawData, depth: depth) {
+  HorizontalStackCardData(Map<String, dynamic> rawData) : super(rawData) {
     if (rawData.containsKey('cards')) {
       childCards = rawData['cards'].map<CardData>((childCard) {
-        return CardData.parse(childCard, depth: this.depth + 1);
+        return CardData.parse(childCard);
       }).toList();
     } else {
       childCards = [];
@@ -438,7 +449,7 @@ class VerticalStackCardData extends CardData {
     return VerticalStackCard(card: this);
   }
   
-  VerticalStackCardData(Map<String, dynamic> rawData, {int depth: 1}) : super(rawData, depth: depth) {
+  VerticalStackCardData(Map<String, dynamic> rawData) : super(rawData) {
     if (rawData.containsKey('cards')) {
       childCards = rawData['cards'].map<CardData>((childCard) {
         return CardData.parse(childCard);
@@ -460,7 +471,7 @@ class MarkdownCardData extends CardData {
     return MarkdownCard(card: this);
   }
   
-  MarkdownCardData(Map<String, dynamic> rawData, {int depth: 1}) : super(rawData, depth: depth) {
+  MarkdownCardData(Map<String, dynamic> rawData) : super(rawData) {
     //Parsing card data
     title = rawData['title'];
     content = rawData['content'];
@@ -475,7 +486,7 @@ class MediaControlCardData extends CardData {
     return MediaControlsCard(card: this);
   }
 
-  MediaControlCardData(Map<String, dynamic> rawData, {int depth: 1}) : super(rawData, depth: depth) {
+  MediaControlCardData(Map<String, dynamic> rawData) : super(rawData) {
     var entitiId = rawData["entity"];
     if (entitiId != null && entitiId is String) {
       if (HomeAssistant().entities.isExist(entitiId)) {

lib/cards/entity_button_card.dart

@@ -20,15 +20,37 @@ class EntityButtonCard extends StatelessWidget {
     } else if (entityWrapper.entity.statelessType != StatelessEntityType.ghost && entityWrapper.entity.statelessType != StatelessEntityType.none) {
       return Container(width: 0.0, height: 0.0,);
     }
-    double widthBase =  math.min(MediaQuery.of(context).size.width, MediaQuery.of(context).size.height) / 6;
+    
+    double iconSize = math.max(card.iconHeightPx, card.iconHeightRem * Theme.of(context).textTheme.body1.fontSize);
     
     Widget buttonIcon;
     if (!card.showIcon) {
       buttonIcon = Container(height: Sizes.rowPadding, width: 10);
+    } else if (iconSize > 0) {
+      buttonIcon = SizedBox(
+        height: iconSize,
+        child: FractionallySizedBox(
+          widthFactor: 0.5,
+          child: FittedBox(
+            fit: BoxFit.contain,
+            child: EntityIcon(
+              //padding: EdgeInsets.only(top: 6),
+            ),
+          )
+        ),
+      );
     } else {
-      buttonIcon = EntityIcon(
+      buttonIcon = AspectRatio(
-        padding: EdgeInsets.fromLTRB(2.0, 6.0, 2.0, 2.0),
+        aspectRatio: 2,
-        size: widthBase / (card.depth * 0.5),
+        child: FractionallySizedBox(
+          widthFactor: 0.5,
+          child: FittedBox(
+            fit: BoxFit.fitWidth,
+            child: EntityIcon(
+              //padding: EdgeInsets.only(top: 6),
+            ),
+          )
+        ),
       );
     }
 
@@ -45,7 +67,7 @@ class EntityButtonCard extends StatelessWidget {
               crossAxisAlignment: CrossAxisAlignment.stretch,
               children: <Widget>[
                 buttonIcon,
-                _buildName()
+                _buildName(context)
               ],
             )
           ),
@@ -55,12 +77,13 @@ class EntityButtonCard extends StatelessWidget {
     );
   }
 
-  Widget _buildName() {
+  Widget _buildName(BuildContext context) {
     if (card.showName) {
       return EntityName(
         padding: EdgeInsets.fromLTRB(Sizes.buttonPadding, 0.0, Sizes.buttonPadding, Sizes.rowPadding),
         textOverflow: TextOverflow.ellipsis,
         maxLines: 3,
+        textStyle: Theme.of(context).textTheme.subhead,
         wordsWrap: true,
         textAlign: TextAlign.center
       );

lib/cards/gauge_card.dart

@@ -97,9 +97,8 @@ class GaugeCard extends StatelessWidget {
       ];
     }
 
-    double fontSize = 30 / card.depth;
-
     return CardWrapper(
+      padding: EdgeInsets.all(4),
       child: EntityModel(
         entityWrapper: entityWrapper,
         child: InkWell(
@@ -107,8 +106,11 @@ class GaugeCard extends StatelessWidget {
           onLongPress: () => entityWrapper.handleHold(),
           onDoubleTap: () => entityWrapper.handleDoubleTap(),
           child: AspectRatio(
-            aspectRatio: 2,
+            aspectRatio: 1.8,
-            child: SfRadialGauge(
+            child: Stack(
+              alignment: Alignment.topCenter,
+              children: <Widget>[
+                SfRadialGauge(
                   axes: <RadialAxis>[
                     RadialAxis(
                       maximum: card.max.toDouble(),
@@ -123,31 +125,6 @@ class GaugeCard extends StatelessWidget {
                         thicknessUnit: GaugeSizeUnit.factor,
                         color: Colors.transparent
                       ),
-                  annotations: <GaugeAnnotation>[
-                    GaugeAnnotation(
-                      angle: -90,
-                      positionFactor: 1.3,
-                      //verticalAlignment: GaugeAlignment.far,
-                      widget: EntityName(
-                        textStyle: Theme.of(context).textTheme.body1.copyWith(
-                          fontSize: fontSize
-                        ),
-                      ),
-                    ),
-                    GaugeAnnotation(
-                      angle: 180,
-                      positionFactor: 0,
-                      verticalAlignment: GaugeAlignment.center,
-                      widget: SimpleEntityState(
-                        expanded: false,
-                        maxLines: 1,
-                        textAlign: TextAlign.center,
-                        textStyle: Theme.of(context).textTheme.title.copyWith(
-                          fontSize: fontSize,
-                        ),
-                      ),
-                    )
-                  ],
                       startAngle: 180,
                       endAngle: 0,
                       pointers: <GaugePointer>[
@@ -162,6 +139,33 @@ class GaugeCard extends StatelessWidget {
                       ]
                     )
                   ],
+                ),
+                FractionallySizedBox(
+                  heightFactor: 0.2,
+                  widthFactor: 1,
+                  child: FittedBox(
+                    fit: BoxFit.fitHeight,
+                    child: EntityName(
+                      textStyle: Theme.of(context).textTheme.subhead
+                    ),
+                  )
+                ),
+                FractionallySizedBox(
+                  widthFactor: 0.4,
+                  heightFactor: 0.95,
+                  alignment: Alignment.bottomCenter,
+                  child: FittedBox(
+                    fit: BoxFit.fitWidth,
+                    alignment: Alignment.bottomCenter,
+                    child: SimpleEntityState(
+                      padding: EdgeInsets.all(0),
+                      expanded: false,
+                      maxLines: 1,
+                      textAlign: TextAlign.center
+                    ),
+                  )
+                ),
+              ],
             )
           ),
         ),

lib/cards/widgets/card_wrapper.widget.dart

@@ -3,13 +3,17 @@ part of '../../main.dart';
 class CardWrapper extends StatelessWidget {
   
   final Widget child;
+  final EdgeInsets padding;
 
-  const CardWrapper({Key key, this.child}) : super(key: key);
+  const CardWrapper({Key key, this.child, this.padding: const EdgeInsets.all(0)}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return Card(
-      child: child,
+      child: Padding(
+        padding: padding,
+        child: child
+      ),
     );
   }
 

lib/entities/entity_icon.widget.dart

@@ -50,13 +50,10 @@ class EntityIcon extends StatelessWidget {
       iconCode = getDefaultIconByEntityId(data.entity.entityId,
           data.entity.deviceClass, data.entity.state); //
     }
-    return Padding(
+    return Icon(
-        padding: EdgeInsets.fromLTRB(6.0, 6.0, 6.0, 6.0),
-        child: Icon(
       IconData(iconCode, fontFamily: 'Material Design Icons'),
       size: size,
       color: color,
-        )
     );
   }