FTUI in eigene Wordpress Instanz einbinden

stefan.apetz · 18 Januar 2019, 18:35:38

Hallo zusammen,

ich hatte mit ftui direkt auf meinem raspi rumprobiert und auch ein paar nette Seiten gebaut.

Da ich aber von Natur aus faul bin und um meine Diagramme / Zahlenwerte von der fhem Installation gerne einfach und schnell auch Bilder und Texte tauschen möchte, kam mir die Idee Wordpress und ftui zu verheiraten.

Dazu habe ich in meinen Wordpress-Template im Header integriert:

Code Auswählen

<script src="http://fhem.fritz.box:8083/fhem/ftui/js/fhem-tablet-ui.js" defer></script>
<meta name="debug" content="0">
<meta name="fhemweb_url" content="http://fhem.fritz.box:8083/fhem" />

und dann in den Seiten einfach (zum Testen) ein entsprechendes DIV zum Auslesen meiner Werte eingefügt:

Code Auswählen

<h4 class="card-title text-xs-center">Wetterstation</h4>
<div data-type="switch" 
        data-device="HM_5A4F87_Sw_02" 
        data-get="state" 
        class="big" style="padding:20px 0px 0px 0px;" data-icon="mi-power_settings_new">
</div>

Zum Testen hatte ich das vorher genauso auf einer statischen Seite auf meinem Webserver (auf dem jetzt auch Wordpress installiert ist) eingebaut und da kamen die Werte korrekt auf den Schirm.

Mein fhem Server läuft unter http://fhem.fritz.box:8083/fhem mein "eigentlicher" Webserver unter http://kant.fritz.box

Lege ich auf kant.fritz.box eine index.html mit obigem Code an, wird alles dargestellt, innerhalb von Wordpress nicht.

Ich vermute, weil Wordpress selber auch mit Javascript arbeitet und auch eine jQuery eingebunden hat.

Ich erhalte beim Laden meiner Wordpress Seite mit dem integrierten ftui Code folgenden Fehler:

Code Auswählen

TypeError: $ is not a function. (In '$(document)', '$' is undefined)
Globaler Code - hem-tablet-ui.js:2550

Hat schon mal jemand ähnliches versucht oder eine Idee, wie ich die beiden Dinger verheiraten kann?

Danke für jeden Hinweis

setstate · 31 Januar 2019, 10:49:34

Der Fehler deutet auf ein fehlendes jQuery hin.

Das muss auch als <script> eingebunden werden.

Code Auswählen


<script src="http://fhem.fritz.box:8083/fhem/ftui/lib/jquery.min.js" defer></script>

stefan.apetz · 31 Januar 2019, 13:06:10

Leider nein: wenn ich das in einer "losen" html Seite ohne Wordpress einsetze (auch ohne dem expliziten include des jQuery) geht das.

Binde ich das jetzt zusätzlich in der Wordpress Seite ein, dann kommt zwar kein JS Fehler mehr, aber: die ganze Seite bleibt / wird weiß, da WP selber (bereits vorher) ein jQuery einbaut:

Code Auswählen

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="http://kant.fritz.box/wp/xmlrpc.php">

<title>SmartHome Apetz – Alles zentral im Griff</title>
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="SmartHome Apetz &raquo; Feed" href="http://kant.fritz.box/wp/?feed=rss2" />
<link rel="alternate" type="application/rss+xml" title="SmartHome Apetz &raquo; Kommentar-Feed" href="http://kant.fritz.box/wp/?feed=comments-rss2" />
		<script type="text/javascript">
			window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/kant.fritz.box\/wp\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.0.3"}};
			!function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55358,56760,9792,65039],[55358,56760,8203,9792,65039]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings);
		</script>
		<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>
<link rel='stylesheet' id='dashicons-css'  href='http://kant.fritz.box/wp/wp-includes/css/dashicons.min.css?ver=5.0.3' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css'  href='http://kant.fritz.box/wp/wp-includes/css/admin-bar.min.css?ver=5.0.3' type='text/css' media='all' />
<link rel='stylesheet' id='wp-block-library-css'  href='http://kant.fritz.box/wp/wp-includes/css/dist/block-library/style.min.css?ver=5.0.3' type='text/css' media='all' />
<link rel='stylesheet' id='canape-fonts-css'  href='https://fonts.googleapis.com/css?family=Playfair+Display%3A400%2C400italic%2C700%2C700italic%7CNoticia+Text%3A400%2C400italic%2C700%2C700italic%7CMontserrat%3A400%2C700&subset=latin%2Clatin-ext' type='text/css' media='all' />
<link rel='stylesheet' id='genericons-css'  href='http://kant.fritz.box/wp/wp-content/plugins/jetpack/_inc/genericons/genericons/genericons.css?ver=3.1' type='text/css' media='all' />
<link rel='stylesheet' id='canape-style-css'  href='http://kant.fritz.box/wp/wp-content/themes/canape/style.css?ver=5.0.3' type='text/css' media='all' />
<script type='text/javascript' src='http://kant.fritz.box/wp/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://kant.fritz.box/wp/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<link rel='https://api.w.org/' href='http://kant.fritz.box/wp/index.php?rest_route=/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://kant.fritz.box/wp/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://kant.fritz.box/wp/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 5.0.3" />
<link rel="canonical" href="http://kant.fritz.box/wp/" />
<link rel='shortlink' href='http://kant.fritz.box/wp/' />
<link rel="alternate" type="application/json+oembed" href="http://kant.fritz.box/wp/index.php?rest_route=%2Foembed%2F1.0%2Fembed&url=http%3A%2F%2Fkant.fritz.box%2Fwp%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://kant.fritz.box/wp/index.php?rest_route=%2Foembed%2F1.0%2Fembed&url=http%3A%2F%2Fkant.fritz.box%2Fwp%2F&format=xml" />
<!-- HFCM by 99 Robots - Snippet # 1: Javascript für fhem ftui -->

<script src="http://fhem.fritz.box:8083/fhem/ftui/lib/jquery.min.js" defer></script>
<script src="http://fhem.fritz.box:8083/fhem/ftui/js/fhem-tablet-ui.js" defer></script>
<meta name="debug" content="0">
<meta name="fhemweb_url" content="http://fhem.fritz.box:8083/fhem" />

<!-- /end HFCM by 99 Robots -->
		<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
		<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
	html { margin-top: 32px !important; }
	* html body { margin-top: 32px !important; }
	@media screen and ( max-width: 782px ) {
		html { margin-top: 46px !important; }
		* html body { margin-top: 46px !important; }
	}
</style>
</head>

Was ich gefunden habe ist noch folgendes (ganz oft im Zusammenhang mit der Fehlermeldung, die ich erhalte):

jQuery konfliktfrei verwenden

jQuery ist nun verfügbar und kann verwendet werden. Da WordPress jQuery im sog. »No Conflict Mode« verwendet, müssen alle jQuery-Passagen im Theme mit folgendem Wrapper umschlossen werden.

Code Auswählen

jQuery(document).ready(function($) {
    ...
});

Da ich aber kein Programmierer bin kann ich damit nichts anfangen. Hieße das, dass in der ftui in allen JS diese Anpassung vorgenommen werden müsste oder wo / wie genau gehe ich mit dieser Info um?

DasQ · 31 Januar 2019, 19:01:57

Da muss ich jetzt tief im Hinterkopf Gruschteln und es ist jetzt sicherlich nicht zu 100% richtig, aber ich Versuchs dennoch.
Und Ich hab kein plan was du da genau machen willst, aber mal grundsätzlich, JavaScript/(jquery) setzt ja beim client an, also am Browser/DOM. Will man jetzt externe Daten in Form von z.b. Json laden dann get das per get oder Post.
Jquery ist elementarer Bestandteil von WordPress also das hat der Client bereits geladen, nur kommt der nicht an die Instanz davor.

Schonmal über einen iFrame nachgedacht? Oder php?

stefan.apetz · 03 Februar 2019, 12:44:15

Mein Plan ist eigentlich ganz einfach:

Ich möchte die Vorteile eines Content Management Systems bei der Erstellung von Inhalten und Seiten nutzen und mit den Vorteilen der fertigen Widgets aus ftui verbinden.

Dabei möchte ich nicht mit iFrames arbeiten, da das erstens kaum bis gar nicht mehr gemacht wird und zweitens iFrames bei responsiven oder adaptiven Webseiten nicht funktionieren.

Beim Einsatz eines CMS kann ich einfach ein Modul "Bild" auf die Seite packen und hab ein tolles Bild, ohne Programmierung.

Ich kann aber auch ein Modul "Thermometer" auf die Seite bauen, was einfach den JS-Code bzw. den Code mit den CSS-Klassen aus der FTUI enthält und darin aus dem CMS einen Platzhalter einsetzen für "data-device" und da dann einfach auf der redaktionellen Oberfläche meinen Wert, bspw. HM_5A4F87_Sw_02 eintragen.

Wie bereits geschrieben, in einer Index.html mit der Art und Weise wie ich es beschrieben habe geht alles. Innerhalb von Wordpress nicht.

Ändere ich in der fhem.fritz.box:8083/fhem/ftui/js/fhem-tablet-ui.js den erst angemeckerten Fehler

Code Auswählen

TypeError: $ is not a function. (In '$(document)', '$' is undefined)
Globaler Code - hem-tablet-ui.js:2550

verursacht durch die Abfrage

Code Auswählen

$(document).ready(function ()

ab in

Code Auswählen

jquery(document).ready(function ()

geht das an dieser Stelle schon einmal weiter. Folglich müssten streng genommen alle $-Vorkommen in der ftui-js ersetzt werden oder halt jemand der sich besser auskennt als ich hat eine Idee, wie man ftui befähigen kann in eine externe Seite einzubinden.

Wäre prima, wenn es da eine Lösung geben würde.

DasQ · 03 Februar 2019, 14:36:13

ist mir schleierhaft wie du die beiden systeme ohne eine php bridge oder ähnliches verbinden willst und ohne eine datenbank.

aber ich muss das auch nicht verstehen.

aber vielleicht hilft dir ja das weiter

https://en.wikipedia.org/wiki/Cross-domain_solution

stefan.apetz · 03 Februar 2019, 15:10:59

Wenn ich Google Maps in eine Seite integriere ist das technisch genau das gleiche. Alles Clientsetige Abfragen ohne Bridge und ohne php. Nix Schleierhaftes dabei...

DasQ · 03 Februar 2019, 16:22:34

geht aus deim text nicht hervor. du schriebst

Zitat von: stefan.apetz am 03 Februar 2019, 12:44:15
Ich möchte die Vorteile eines Content Management Systems bei der Erstellung von Inhalten und Seiten nutzen und mit den Vorteilen der fertigen Widgets aus ftui verbinden.

ja und so ein cms wie jetzt z.b. wordpress, joomla, typo3 setzten eben auf PHP und ne datenbank und das sind dann auch gleich die "vorteile eines CMS" .... ansonsten hast du in mein augen absolut keine chance da irgenwas aus wordpress herraus an dein fhem zu ändern.

klar kann man technisch gesehn statisch die funktionen in wordpress hardcoden, um änderungen in fhem zu bewerkstelligen.
aber das hat mal so rein garnix mit dem zu tun was du im zitat vor hattest.

naja ich bin an der stelle raus ...

mikrowelle · 11 Juli 2019, 20:19:26

Hi Stefan,

bist Du in dem Thema weiter gekommen?

Danke Dir!

stefan.apetz · 23 September 2019, 13:40:54

Hallo,
ich war ewig lange nicht hier im Forum. Daher erst jetzt: leider nein. Ich bin da nicht weiter gekommen