yehor/ha_client
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Gauge card elements scale fix

Browse Source
This commit is contained in:
Yegor Vialov
2020-04-27 20:56:33 +00:00
parent 0dc12963f0
commit d715aaf5e5
5 changed files with 137 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
lib/cards/card.class.dart
View File

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

35
lib/cards/entity_button_card.dart
View File

@ -20,15 +20,37 @@ class EntityButtonCard extends StatelessWidget {
} else if (entityWrapper.entity.statelessType != StatelessEntityType.ghost && entityWrapper.entity.statelessType != StatelessEntityType.none) { } else if (entityWrapper.entity.statelessType != StatelessEntityType.ghost && entityWrapper.entity.statelessType != StatelessEntityType.none) {
return Container(width: 0.0, height: 0.0,); 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; Widget buttonIcon;
if (!card.showIcon) { if (!card.showIcon) {
buttonIcon = Container(height: Sizes.rowPadding, width: 10); 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 { } 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, crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[ children: <Widget>[
buttonIcon, buttonIcon,
_buildName() _buildName(context)
], ],
) )
), ),
@ -55,12 +77,13 @@ class EntityButtonCard extends StatelessWidget {
); );
} }
Widget _buildName() { Widget _buildName(BuildContext context) {
if (card.showName) { if (card.showName) {
return EntityName( return EntityName(
padding: EdgeInsets.fromLTRB(Sizes.buttonPadding, 0.0, Sizes.buttonPadding, Sizes.rowPadding), padding: EdgeInsets.fromLTRB(Sizes.buttonPadding, 0.0, Sizes.buttonPadding, Sizes.rowPadding),
textOverflow: TextOverflow.ellipsis, textOverflow: TextOverflow.ellipsis,
maxLines: 3, maxLines: 3,
textStyle: Theme.of(context).textTheme.subhead,
wordsWrap: true, wordsWrap: true,
textAlign: TextAlign.center textAlign: TextAlign.center
); );

110
lib/cards/gauge_card.dart
View File

@ -97,9 +97,8 @@ class GaugeCard extends StatelessWidget {
]; ];
} }
double fontSize = 30 / card.depth;
return CardWrapper( return CardWrapper(
padding: EdgeInsets.all(4),
child: EntityModel( child: EntityModel(
entityWrapper: entityWrapper, entityWrapper: entityWrapper,
child: InkWell( child: InkWell(
@ -107,60 +106,65 @@ class GaugeCard extends StatelessWidget {
onLongPress: () => entityWrapper.handleHold(), onLongPress: () => entityWrapper.handleHold(),
onDoubleTap: () => entityWrapper.handleDoubleTap(), onDoubleTap: () => entityWrapper.handleDoubleTap(),
child: AspectRatio( child: AspectRatio(
aspectRatio: 2, aspectRatio: 1.8,
child: SfRadialGauge( child: Stack(
axes: <RadialAxis>[ alignment: Alignment.topCenter,
RadialAxis( children: <Widget>[
maximum: card.max.toDouble(), SfRadialGauge(
minimum: card.min.toDouble(), axes: <RadialAxis>[
showLabels: false, RadialAxis(
useRangeColorForAxis: true, maximum: card.max.toDouble(),
showTicks: false, minimum: card.min.toDouble(),
canScaleToFit: true, showLabels: false,
ranges: ranges, useRangeColorForAxis: true,
axisLineStyle: AxisLineStyle( showTicks: false,
thickness: 0.3, canScaleToFit: true,
thicknessUnit: GaugeSizeUnit.factor, ranges: ranges,
color: Colors.transparent axisLineStyle: AxisLineStyle(
), thickness: 0.3,
annotations: <GaugeAnnotation>[ thicknessUnit: GaugeSizeUnit.factor,
GaugeAnnotation( color: Colors.transparent
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>[
RangePointer(
value: fixedValue,
sizeUnit: GaugeSizeUnit.factor,
width: 0.3,
color: currentColor,
enableAnimation: true,
animationType: AnimationType.bounceOut,
)
]
) )
], ],
startAngle: 180, ),
endAngle: 0, FractionallySizedBox(
pointers: <GaugePointer>[ heightFactor: 0.2,
RangePointer( widthFactor: 1,
value: fixedValue, child: FittedBox(
sizeUnit: GaugeSizeUnit.factor, fit: BoxFit.fitHeight,
width: 0.3, child: EntityName(
color: currentColor, textStyle: Theme.of(context).textTheme.subhead
enableAnimation: true, ),
animationType: AnimationType.bounceOut, )
) ),
] 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
),
)
),
], ],
) )
), ),

8
lib/cards/widgets/card_wrapper.widget.dart
View File

@ -3,13 +3,17 @@ part of '../../main.dart';
class CardWrapper extends StatelessWidget { class CardWrapper extends StatelessWidget {
final Widget child; 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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Card( return Card(
child: child, child: Padding(
padding: padding,
child: child
),
); );
} }

15
lib/entities/entity_icon.widget.dart
View File

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