Skip to content

Commit

Permalink
File backup
Browse files Browse the repository at this point in the history
  • Loading branch information
@arboeh
arboeh committed Feb 2, 2024
1 parent a327411 commit 6ca33df
Showing 1 changed file with 76 additions and 72 deletions.
148 changes: 76 additions & 72 deletions hatc-gauge-card-ext.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,25 @@ var html = LitElement.prototype.html;
var css = LitElement.prototype.css;

function isObject(val) {
return val instanceof Object;
return val instanceof Object;
}

function calcPercent(sValue, sMin, sMax){
var result = sValue / (sMax - sMin) * 100;
function calcPercent(sValue, sMin, sMax) {
var result;
if (sValue >= 0) {
result = sValue / sMax * 100;
} else {
result = sValue / sMin * 100;
}
result = Math.trunc(result);
if(result >= 75) {
if (result >= 75) {
return result - 1;
}
return result;
}

function calcStatePercent(sValue, sMax){
if(isNaN(sValue)){
function calcStatePercent(sValue, sMax) {
if (isNaN(sValue)) {
return '';
}
var result = sValue / sMax * 100;
Expand All @@ -26,18 +31,18 @@ function calcStatePercent(sValue, sMax){
}

function makeid(length) {
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for ( var i = 0; i < length; i++ ) {
for (var i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}

function handleClick(node, hass, config, entityId){
function handleClick(node, hass, config, entityId) {
let e;
if (!config){
if (!config) {
return;
}

Expand Down Expand Up @@ -78,7 +83,7 @@ function handleClick(node, hass, config, entityId){
}
}

class HatcGaugeCard extends LitElement {
class HatcGaugeCardExt extends LitElement {
static get properties() {
return {
hass: {},
Expand All @@ -98,52 +103,52 @@ class HatcGaugeCard extends LitElement {
// update your content.
render() {
const hassEntity = this.hass.states[this.config.entity];
if(hassEntity){
if (hassEntity) {
var showTitleEntity = true;
var showStateEntity = true;
var showIconEntity = true;
var showStateEntity = true;
var showIconEntity = true;
var showUnitOfMeasurmentEntity = true;

var icon;
var textstateColor;

if(typeof hassEntity.attributes.icon !== 'undefined'){
if (typeof hassEntity.attributes.icon !== 'undefined') {
icon = hassEntity.attributes.icon;
}else{
} else {
// icon par défaut selon device_class si l'attribut icon est vide
if(typeof hassEntity.attributes.device_class !== 'undefined'){
switch(hassEntity.attributes.device_class){
if (typeof hassEntity.attributes.device_class !== 'undefined') {
switch (hassEntity.attributes.device_class) {
case 'power':
icon = 'mdi:flash';
break;
case 'temperature':
icon = 'mdi:thermometer';
break;
}
}else{
} else {
// icon par défaut selon le prefix si l'attribut et device_class est vide
if(hassEntity.entity_id.startsWith('light')){
if (hassEntity.entity_id.startsWith('light')) {
icon = 'mdi:lightbulb';
}
}
}
// Card config
var c = {}; var cCard = (typeof this.config.card !== 'undefined') ? this.config.card : '';
if(isObject(cCard)){
if (isObject(cCard)) {
c['height'] = (typeof cCard['height'] !== 'undefined') ? "height:" + cCard['height'] + "; " : '';
}

// Title config
var h = {}; var hTitle = (typeof this.config.title !== 'undefined') ? this.config.title : hassEntity.attributes.friendly_name;
if(isObject(hTitle)){
if (isObject(hTitle)) {
h['fontsize'] = (typeof hTitle['font-size'] !== 'undefined') ? "--mdc-icon-size:" + hTitle['font-size'] + "; font-size:" + hTitle['font-size'] + "; " : '';

if(typeof hTitle['text-align'] !== 'undefined'){
if(hTitle['text-align'] == 'left'){
if (typeof hTitle['text-align'] !== 'undefined') {
if (hTitle['text-align'] == 'left') {
h['textalign'] = "justify-content: flex-start";
}else if(hTitle['text-align'] == 'right'){
} else if (hTitle['text-align'] == 'right') {
h['textalign'] = "justify-content: flex-end";
}else{
} else {
h['textalign'] = "justify-content: center";
}
}
Expand All @@ -153,9 +158,9 @@ class HatcGaugeCard extends LitElement {

h['name'] = (typeof hTitle.name !== 'undefined') ? hTitle.name : hassEntity.attributes.friendly_name;
h['icon'] = (typeof hTitle.icon !== 'undefined') ? hTitle.icon : icon;
}else{
} else {
h['name'] = hTitle;
if(hTitle === '' || hTitle === false || hTitle === 'hide'){
if (hTitle === '' || hTitle === false || hTitle === 'hide') {
h['icon'] = hTitle;
}
}
Expand All @@ -167,52 +172,52 @@ class HatcGaugeCard extends LitElement {

// Gauge config
var g = {}; var hGauge = (typeof this.config.gauge !== 'undefined') ? this.config.gauge : '';
if(isObject(hGauge)){
if (isObject(hGauge)) {
g['textstatecolor'] = (typeof hGauge['text-color'] !== 'undefined') ? hGauge['text-color'] : '';
g['iconcolor'] = (typeof hGauge['icon-color'] !== 'undefined') ? hGauge['icon-color'] : g.textstateColor;
g['fontsize'] = (typeof hGauge['font-size'] !== 'undefined') ? hGauge['font-size'] : '22px';
g['iconsize'] = (typeof hGauge['icon-size'] !== 'undefined') ? hGauge['icon-size'] : g.fontsize;
g['friendlyname'] = (typeof hGauge['friendly_name'] !== 'undefined') ? hGauge['friendly_name'] : heTitle;
g['unitofmeasurement'] = (typeof hGauge['unit_of_measurement'] !== 'undefined') ? hGauge['unit_of_measurement'] : heUnitOfMeasurement;
g['maxvalue'] = (typeof hGauge['max_value'] !== 'undefined') ? hGauge['max_value'] : '100';
g['minvalue'] = (typeof hGauge['min_value'] !== 'undefined') ? hGauge['min_value'] : '0';
g['minvalue'] = (typeof hGauge['min_value'] !== 'undefined') ? hGauge['min_value'] : '-100';

g['state'] = (typeof hGauge['state'] !== 'undefined') ? hGauge['state'] : true;
console.log("heIcon", heIcon);
g['icon'] = (typeof hGauge['icon'] !== 'undefined') ? hGauge['icon'] : (heIcon !== '' && heIcon !== false && heIcon !== 'hide') ? heIcon : icon;

// Severity config
if(typeof this.config.gauge.severity !== 'undefined'){
if (typeof this.config.gauge.severity !== 'undefined') {
this.config.gauge.severity.map(s => {
if(typeof s.form === 'undefined' && typeof s.to === 'undefined' && typeof s.color !== 'undefined'){
if (typeof s.form === 'undefined' && typeof s.to === 'undefined' && typeof s.color !== 'undefined') {
textstateColor = s.color;
if(typeof s.icon !== 'undefined'){
if (typeof s.icon !== 'undefined') {
g.icon = s.icon;
}
}
if(parseFloat(heState) >= s.from && parseFloat(heState) <= s.to){
if (parseFloat(heState) >= s.from && parseFloat(heState) <= s.to) {
textstateColor = s.color;
if(typeof s.icon !== 'undefined'){
if (typeof s.icon !== 'undefined') {
g.icon = s.icon;
}
}
});
if(g['textstatecolor'] == "severity" || g['textstatecolor'] == ""){
if (g['textstatecolor'] == "severity" || g['textstatecolor'] == "") {
g['textstatecolor'] = textstateColor;
}
if(h.iconcolor == "severity"){
if (h.iconcolor == "severity") {
h.iconcolor = textstateColor;
}
if(h.color == "severity"){
if (h.color == "severity") {
h.color = textstateColor;
}
if(h.icon == "severity"){
if (h.icon == "severity") {
heIcon = g.icon;
}
}else{
textstateColor= 'white';
} else {
textstateColor = 'white';
}
}else{
} else {
g['textstatecolor'] = '';
g['iconcolor'] = '';
g['fontsize'] = '22px';
Expand All @@ -224,14 +229,14 @@ class HatcGaugeCard extends LitElement {
g['state'] = true;
g['icon'] = (heIcon !== '' && heIcon !== false && heIcon !== 'hide') ? heIcon : icon;

textstateColor= 'white';
textstateColor = 'white';
}

var heTextStateColor = g['textstatecolor'];
var hePathStrokeColor = textstateColor;

if(hassEntity.entity_id.startsWith('light')){
hePathStrokeColor = heTextStateColor = 'rgb('+hassEntity.attributes.rgb_color+')';
if (hassEntity.entity_id.startsWith('light')) {
hePathStrokeColor = heTextStateColor = 'rgb(' + hassEntity.attributes.rgb_color + ')';
}

var uID = makeid(2);
Expand All @@ -242,37 +247,37 @@ class HatcGaugeCard extends LitElement {
"heState": heState,
"heUnitOfMeasurement": (g.unitofmeasurement !== '' && g.unitofmeasurement !== false && g.unitofmeasurement !== 'hide') ? g.unitofmeasurement : '',
"heIcon": heIcon,
"hePathStrokeColor" : hePathStrokeColor,
"heTextStateColor" : heTextStateColor,
"hePathStrokeColor": hePathStrokeColor,
"heTextStateColor": heTextStateColor,
}



var hIconHTML = (hE.heIcon !== '' && hE.heIcon !== false && hE.heIcon !== 'hide') ? html`<ha-icon style="${h.fontsize} color:${h.iconcolor};" .icon="${hE.heIcon}"></ha-icon>` : '';
var hNameHTML = (h.name !== '' && h.name !== false && h.name !== 'hide') ? html`<div style="${h.fontsize} color:${h.color};" class="name">${h.name}</div>` : '';
var hEntitiesHeight = (h.name !== '' && h.name !== false && h.name !== 'hide') ? 'calc(100% - 40px)' : '100%';
var gStateHTML = (g.state !== '' && g.state !== false && g.state !== 'hide') ? html`${hE.heState}${hE.heUnitOfMeasurement}` : '';
var gStateHTML = (g.state !== '' && g.state !== false && g.state !== 'hide') ? html`${hE.heState} ${hE.heUnitOfMeasurement}` : '';
var gIconHTML = (g.icon !== '' && g.icon !== false && g.icon !== 'hide') ? html`<ha-icon style="--mdc-icon-size: ${g.iconsize}; color:${g.iconcolor};" .icon="${g.icon}"></ha-icon>` : '';

var percent = calcPercent(hE.heState, g.minvalue, g.maxvalue);
var transform = hE.heState < 0 ? "transform: rotateY(180deg);" : "";

var gaugeHTML = html`
<svg viewBox="0 0 36 36" style="max-width: 100%; max-height: 100%;">
<path style="fill: none; stroke: #343434; stroke-width: 2.0;"
<svg viewBox="0 0 36 36" style="max-width: 100%; max-height: 100%; ${transform}">
<path style="fill: none; stroke: var(--primary-background-color); stroke-width: 2.0;"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
<rect x="0" y="0" width="1" height="4" fill="var(--primary-background-color)" transform="rotate(180 9.25 1.5)" />
<path style="stroke: ${hE.hePathStrokeColor}; fill: none; stroke-width: 2.8; stroke-linecap: round; animation: progress 1s ease-out forwards;"
stroke-dasharray="${percent}, 100"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
</svg>
`;

if(percent > 100){
if (percent > 100) {
return html`
<div class="maxValueExceeded">Il semble il y avoir un problème, Veuillez ajouter un max_value !</div>
<div class="maxValueExceeded">There seems to be a problem, please add a min_value or max_value!</div>
`;
}else{
} else {
return html`
<ha-card class="HatcGaugeCard">
<ha-card class="HatcGaugeCardExt">
<div class="box" style="${c.height}" @click=${e => this._handlePopup(e)}>
<div class="header" style="${h.textalign}">
${hIconHTML}
Expand All @@ -294,9 +299,9 @@ class HatcGaugeCard extends LitElement {
</ha-card>
`;
}
}else{
} else {
return html`
<div class="not-found">l'entité "${this.config.entity}" n'à pas été trouvé.</div>
<div class="not-found">The entity "${this.config.entity}" was not found.</div>
`;
}
}
Expand All @@ -305,7 +310,7 @@ class HatcGaugeCard extends LitElement {
// will render an error card.
setConfig(config) {
if (!config.entity) {
throw new Error('Veuillez ajouter un "Entity" dans votre configuration');
throw new Error('Please add an "entity" in your configuration');
}
this.config = config;
}
Expand All @@ -327,10 +332,10 @@ class HatcGaugeCard extends LitElement {
if (this.config.entity) {
if (typeof this.config.tap_action === 'undefined') {
tap_action = {
action: "more-info"
action: "more-info"
}
}else{
if(typeof this.config.tap_action.service === 'undefined'){
} else {
if (typeof this.config.tap_action.service === 'undefined') {
tap_action = {
service: "homeassistant",
...tap_action
Expand Down Expand Up @@ -358,14 +363,14 @@ class HatcGaugeCard extends LitElement {

static get styles() {
return css`
:root, .HatcGaugeCard *{
:root, .HatcGaugeCardExt *{
--mdc-icon-size: 16px;
--card-padding: 8px;
}
.HatcGaugeCard .box{
.HatcGaugeCardExt .box{
padding: var(--card-padding);
}
.HatcGaugeCard .box div.name{
.HatcGaugeCardExt .box div.name{
color: var(--secondary-text-color);
line-height: 40px;
font-weight: 500;
Expand All @@ -374,19 +379,18 @@ class HatcGaugeCard extends LitElement {
white-space: nowrap;
text-overflow: ellipsis;
}
.HatcGaugeCard .box .header{
.HatcGaugeCardExt .box .header{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
}
.HatcGaugeCard .box .entities{
.HatcGaugeCardExt .box .entities{
position: relative;
}
.HatcGaugeCard .box .entities .outer .inner{
.HatcGaugeCardExt .box .entities .outer .inner{
display: flex;
align-items: center;
justify-content: center;
Expand All @@ -398,7 +402,7 @@ class HatcGaugeCard extends LitElement {
left: 0;
font-size: 22px;
}
.HatcGaugeCard .box .entities svg{
.HatcGaugeCardExt .box .entities svg{
display: block;
margin-left: auto;
margin-right: auto;
Expand All @@ -412,4 +416,4 @@ class HatcGaugeCard extends LitElement {
}
}

customElements.define('hatc-gauge-card', HatcGaugeCard);
customElements.define('hatc-gauge-card-ext', HatcGaugeCardExt);

0 comments on commit 6ca33df

Please sign in to comment.