Variablen in html box anzeigen

Hallo zusammen,

Es steht bestimmt irgendwo- aber ich finde es nicht…

Wie kann ich in einer string Variablen mit html box Profil den Wert von z.B. einem Temperatursensor anzeigen?

Geht das so überhaupt?

Grüsse
Dominic

Musst Du mal beschreiben was Du eigentlich genauer machen willst.


$temperature = GetValueFormatted(12345); // value temperature
$html = '<div>'.$temperature.'</div>';
SetValue(23456; $html); // HTMLBox

und dann bei Bedarf halt noch formatieren mit passender Farbe, Schriftart und so weiter.

Hallo,

vielen Dank für die schnelle Rückmeldung.

Ich möchte mir mein eigenes HTML-Widget bauen, dass ich dann z.B. in IPSStudio einfügen kann.

Ich habe es gerade mal mit deinem Vorschlag ausprobiert, leider ist die Anzeige noch nicht ganz so, wie ich mir das vorgestellt habe:

Der Code wird also nicht als HTML interpretiert. Habe ich etwas übersehen

Im Ergebnis stelle ich mir ganz am Ende dann soetwas vor:

Ohne Titel.png

Ich hoffe, ich habe es so beschrieben, dass Du es auch verstehst :slight_smile:

Ja, das ist ein Skript und nicht als Wert einzutragen. Du legst Dir also ein Skript an, das deinen HTML Code zusammensetzt, auf dieses Skript legst Du ein Ereignis bei Variablenaktualisierung der Temperatur Variable, dadurch wird das Skript dann jedes mal ausgeführt, wenn sich der Wert ändert und schreibt Dir den aktuellen Wert in die HTMLBox.

Dann must Du Dir das so als HTML setzten mit Schriftgröße, Farbe usw. und den HTML Code dann bei Änderung der Temperatur erneut in die Variable schreiben über ein Ereigniss (siehe oben). Am besten erst mal nur die Werte in einer Tabelle oder div setzten und dann anschließend per CSS die Formatierung und exakte Position zuweisen.

Hallo Fonzo,

ich habe mir den html code jetzt zusammengebaut.

Leider scheitere ich dabei einen Javascript Teil einzubauen.

wenn ich die script tags weglasse wird mein widget einwanfrei dargestellt, sobald ich die script-tags einfüge, wird nur noch der script teil angezeigt, nicht aber das widget.

Hast Du eine Idee für mich, woran das liege könnte?

<?php

$temperature = GetValueFormatted(24760); // value temperature 
$html = '<style>
 body {
	font-family: \'Open Sans\', sans-serif;
	padding: 2% 5%;
  background: #323232;
}

h2 {
  margin-top: 0px;
  margin-bottom: 20px;
	padding: 0 0 10px;
  color: #f0f0f0;
  font-weight: 300;
  text-align: center;
}

.btn { margin-left: 4px; }


}
</style>


<link type="text/css" rel="stylesheet" src="/user/html/animate.css">
<link type="text/css" rel="stylesheet" src="/user/html/bootstrap-theme.min.css">
<link type="text/css" rel="stylesheet" src="/user/html/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="/user/html/widgets.css">
<link type="text/css" rel="stylesheet" href="/user/html/fontawesome.css">
<!--   Shuffle your scripts HERE  -->
<script src="/user/html/jquery-3.3.1.min.js"></script>
<script src="/user/html/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/user/html/widgets.js"></script>


<!--   End  -->



<link rel="stylesheet" href="/user/html/widgets.css">




<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="row">
	<div class="col-md-6">
		<div class="panel panel-primary" style="border-color:transparent;">
			<div class="panel-heading-custom">
				<h4 class="panel-title" style="color:#E78023;
				font-size:150%;
				align-self: center;
				background-color: #212124;
				padding:1%;
				border-color:yellow;
				border-radius: 10px 10px 0px 0px;">
					Aussentemperatur
					<div class="pull-right">
						<a href="#" data-perform="panel-dismiss" class="btn btn-primary btn-xs pull-right"><i class="fa fa-times"></i></a>
						<a href="#" data-perform="panel-collapse" class="btn btn-primary btn-xs pull-right"><i class="fa fa-minus"></i></a>
					</div>
				</h4>
			</div>

			<div class="panel-wrapper collapse in">
				<div class="panel-body" style="padding:0;">


<!-- widget code-->


  <div class="container_grid">

    <div class="icon1" >
<svg viewBox="0 0 48 48" width="100%" height="100%">
  <use xlink:href="/user/html/svg/squidink.svg#thermometer-3"></use>
</svg>

  </div>

    <div class="degree-0">


			<script type="text/javascript"> document.write("24");</script>



		</div>
    <div class="grad">°C</div>
    <div class="tendenz">
      <svg class="color_green" viewBox="0 0 48 48" width="50%" height="50%">
        <use xlink:href="/user/html/svg/squidink.svg#top-arrow-2"></use>
      </svg>


    </div>
    <div class="leer"></div>
    <div class="nachkomma">,1</div>
    <div class="icon_temp" style="padding-bottom:10%;">
      <svg class="color_grey" viewBox="0 0 48 48" width="50%" height="50%">
  <use xlink:href="/user/html/svg/squidink.svg#thermometer-3"></use>
      </svg>

    </div>



    <div class="temp">temp</div>
    <div class="icon_feucht" style="padding-top:10%;">
      <svg class="color_grey" viewBox="0 0 48 48" width="50%" height="50%">
        <use xlink:href="/user/html/svg/squidink.svg#drop"></use>
      </svg>
    </div>
    <div class="feucht">feucht</div>

  </div>



<!-- widget code-->';


SetValue(27357, $html); // HTMLBox 

?>


Kannst Du die lokal eingebundenen css und js mal posten? Sonst weis man auch nicht wo da der Fehler liegen könnte bzw. kann das nicht nachstellen.

klar.

kommen hier:

widgets.css:


.container_grid {
  display: grid;
  width: 100%;
  height: 50%;
  grid-template-areas: "header header header header header header"
  "icon1 degree-0 grad tendenz leer leer"
  "icon1 degree-0 nachkomma tendenz icon_temp temp"
  "icon1 degree-0 nachkomma tendenz icon_feucht feucht"
  "footer footer footer footer footer footer";
  grid-template-columns: 15% 18%  10% 14% 13% 13%;
  grid-template-rows: 8% 20% 20% 20% 20% 0%;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
  background-color: #212124;
  font-family: "Arial";

}
.container_grid > div {
border: 1px dashed #888;
}

.header {
  grid-area: header;
  color:#E78023;
  font-size:150%;
  align-self: center;
  margin-left: 3%
}
.icon1 {
  grid-area: icon1;


}
.degree-0 {
  grid-area: degree-0;
  font-size: 500%;
  text-align: left;
  color: white;
  align-self: end;


}
.grad {
  grid-area: grad;
  font-size: 200%;
  align-self: end;
  vertical-align:sub;
  color: #667068;


}
.tendenz {
  grid-area: tendenz;
  text-align: center;
  align-self: end;


}
.leer {
  grid-area: leer;
}
.nachkomma {
  grid-area: nachkomma;
  font-size: 120%;
  align-self: end;
  vertical-align:sub;
  color: #667068;
  margin-bottom:0.5em;


}
.icon_temp {
  grid-area: icon_temp;
  align-self: end;

}
.temp {
  grid-area: temp;
  color: white;

}
.icon_feucht {
  grid-area: icon_feucht;
  align-self: end;
}
.feucht {
  grid-area: feucht;
  color: white;

}
.footer {
  grid-area: footer;

}

svg {


  stroke: #E78023;
  fill: #E78023;
  stroke-width: 1px;
}

.color_grey{


  stroke: #667068;
  fill: #667068;
  stroke-width: 1px;
}

.color_green{


  stroke: #51F338;
  fill: #51F338;
  stroke-width: 2px;
}

widgets.js:

<script>
 $(document).ready(function() {

	/** ******************************
	 * Collapse Panels
	 * [data-perform="panel-collapse"]
	 ****************************** **/
	(function($, window, document){
		var panelSelector = '[data-perform="panel-collapse"]';

		$(panelSelector).each(function() {
			var $this = $(this),
			parent = $this.closest('.panel'),
			wrapper = parent.find('.panel-wrapper'),
			collapseOpts = {toggle: false};

			if( ! wrapper.length) {
				wrapper =
				parent.children('.panel-heading').nextAll()
				.wrapAll('<div/>')
				.parent()
				.addClass('panel-wrapper');
				collapseOpts = {};
			}
			wrapper
			.collapse(collapseOpts)
			.on('hide.bs.collapse', function() {
				$this.children('i').removeClass('fa-minus').addClass('fa-plus');
			})
			.on('show.bs.collapse', function() {
				$this.children('i').removeClass('fa-plus').addClass('fa-minus');
			});
		});
		$(document).on('click', panelSelector, function (e) {
			e.preventDefault();
			var parent = $(this).closest('.panel');
			var wrapper = parent.find('.panel-wrapper');
			wrapper.collapse('toggle');
		});
	}(jQuery, window, document));

  /** ******************************
	 * Remove Panels
	 * [data-perform="panel-dismiss"]
	 ****************************** **/
	(function($, window, document){
		var panelSelector = '[data-perform="panel-dismiss"]';
		$(document).on('click', panelSelector, function (e) {
			e.preventDefault();
			var parent = $(this).closest('.panel');
			removeElement();

			function removeElement() {
				var col = parent.parent();
				parent.remove();
				col.filter(function() {
					var el = $(this);
					return (el.is('[class*="col-"]') && el.children('*').length === 0);
				}).remove();
			}
		});
	}(jQuery, window, document));

});
</script>

aber: das problem tritt bei dieser stelle auf:

<script type=„text/javascript“> document.write(„24“);</script>

Hallo Fonzo,

ich habe das Problem etwas eingrenzen können:

Folgender Code funktioniert:

<?php

$temperature = GetValueFormatted(24760); // value temperature 
$html = '<p>123456789</p>';
SetValue(27357, $html); // HTMLBox 

?>

Dieser Code funktioniert leider nicht:

<?php

$temperature = GetValueFormatted(24760); // value temperature 
$html = '<p>123456789</p>
<script type="text/javascript"> document.write("24");</script>';
SetValue(27357, $html); // HTMLBox 

?>

Beim ersten code wird alles korrekt dargestellt, beim zweiten wird nur noch ein weisser Bildschirm mit „24“ links oben angezeigt.

Kannst Du sehen, was ich falsch mache?

Moin,

ich habe den Fehler gefunden.

document.write

kann natürlich nicht innerhalb eines

<div>

funktionieren.

So klappt es jetzt

    <div id="degree" class="degree-0">

    <script type="text/javascript">
    var mytext = \'33\'; 
    document.getElementById(\'degree\').innerHTML =  mytext;
    </script>