Intégration widget dans un design

Oliv24 · Juin 12, 2023, 11:32

Bonjour à tous,
j’ai utilisé ce code pour créer un widget en V4 https://community.jeedom.com/t/partage-solid-gauge-en-4-1/43922
mais j’ai un petit soucis quand je l’intègre dans un design : impossible de rendre le fond transparent.
jauge
Avez-vous une idée pour pouvoir gérer le fond du widget ?
Merci

Yves19 · Juin 12, 2023, 2:42

Et en réglant la couleur de fond à transparent dans les paramètre d’affichage en mode édition lorsque tu sélectionnes ton objet par clic droit sur ton design ?

Oliv24 · Juin 12, 2023, 2:59

Merci de ta réponse…malheureusement j’ai déjà essayé et ça ne change rien

Spine · Juin 12, 2023, 5:22

Bonjour,

Vous pouvez rajouter cela dans le <style> du widget :

.gaugearnog23 .highcharts-background { 
  	fill: transparent !important;
}

Oliv24 · Juin 13, 2023, 7:05

Merci @Spine …ça marche impeccable sur les design !
Bonne journée

Oliv24 · Juin 13, 2023, 7:53

@Spine, Je t’embete encore avec la jauge. Comment fait-on pour changer la couleur du fond de la jauge ? (sur ton image la couleur #111314)
Est-ce que cela existe dans les paramètres perso de la tuile ?

Spine · Juin 13, 2023, 6:02

Bonjour,

J’ai mis à jour le code (passage en pur JS) et rajouter des options pour la couleur de fond de la jauge et la couleur des ticks (backgroundColor et tickColor) :

github.com

Spine34/jeedom-widgets/blob/master/dashboard/cmd.info.numeric.solidGauge.html

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="default" data-cmd_id="#id#"
	data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
	<div class="title #hide_name#">
		<div class="cmdName">#name_display#</div>
	</div>
	<div class="content-sm">
		<div id="solidGauge#uid#"></div>
	</div>
	<div class="timeCmd label label-default #history#" data-type="info"></div>
	<div class="cmdStats #hide_history#">
		<span title="{{Minimum}}" class="tooltips">#minHistoryValue#</span>|<span title="{{Moyenne}}"
			class="tooltips">#averageHistoryValue#</span>|<span title="{{Maximum}}"
			class="tooltips">#maxHistoryValue#</span> <i class="#tendance#"></i>
	</div>
	<template>
		<div>time : duration|date ({{Affiche durée ou date de la valeur}})</div>
	</template>
	<script>
		var backgroundColor = ('#backgroundColor#' != '#' + 'backgroundColor#') ? '#backgroundColor#' : 'var(--el-defaultColor)';
		var color1 = ('#color1#' != '#' + 'color1#') ? '#color1#' : 'rgb(0, 255, 0)';

This file has been truncated. show original

system · Juin 14, 2023, 6:03

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.