Gauge card elements scale fix

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

View File

@ -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)) {

View File

@ -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(
padding: EdgeInsets.fromLTRB(2.0, 6.0, 2.0, 2.0),
size: widthBase / (card.depth * 0.5),
buttonIcon = AspectRatio(
aspectRatio: 2,
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
);

View File

@ -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,60 +106,65 @@ class GaugeCard extends StatelessWidget {
onLongPress: () => entityWrapper.handleHold(),
onDoubleTap: () => entityWrapper.handleDoubleTap(),
child: AspectRatio(
aspectRatio: 2,
child: SfRadialGauge(
axes: <RadialAxis>[
RadialAxis(
maximum: card.max.toDouble(),
minimum: card.min.toDouble(),
showLabels: false,
useRangeColorForAxis: true,
showTicks: false,
canScaleToFit: true,
ranges: ranges,
axisLineStyle: AxisLineStyle(
thickness: 0.3,
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,
),
aspectRatio: 1.8,
child: Stack(
alignment: Alignment.topCenter,
children: <Widget>[
SfRadialGauge(
axes: <RadialAxis>[
RadialAxis(
maximum: card.max.toDouble(),
minimum: card.min.toDouble(),
showLabels: false,
useRangeColorForAxis: true,
showTicks: false,
canScaleToFit: true,
ranges: ranges,
axisLineStyle: AxisLineStyle(
thickness: 0.3,
thicknessUnit: GaugeSizeUnit.factor,
color: Colors.transparent
),
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,
pointers: <GaugePointer>[
RangePointer(
value: fixedValue,
sizeUnit: GaugeSizeUnit.factor,
width: 0.3,
color: currentColor,
enableAnimation: true,
animationType: AnimationType.bounceOut,
)
]
)
),
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
),
)
),
],
)
),

View File

@ -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
),
);
}

View File

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