Mit dem hier beschrieben jQuery/JavaScript-Projekt, kann man seine Posts, ohne Seitenreload und inklusive Posttitel, zweisprachig ausliefern.With this jQuery/JavaScript project, you can deliver your posts, without page reload and inclusive post title, bilingual.
Alle Teile des Posts bei denen die Sprache umgeschaltet werden soll, müssen in span-Tags mit dem entsprechendem lang-Attribut eingeschlossen sein. Der Titel des Posts muss in den ersten span-Tag der jeweiligen Sprache.All parts of the post where the language is to be toggled, must be in span tags with the matching lang attribute. The title of the post must be in the first span tag of the language.
<p>
<span lang="de" title="deutscher Posttitel">deutscher Posttext</span>
<span lang="en" title="english post title">english post text</span>
</p>
<p>
<span lang="de">mehr deutscher Posttext</span>
<span lang="en">more english post text</span>
</p>
Zum Umschalten bindet man erstens die multilang.js im header seines Blogs ein. Zweitens muss folgender Code nach dem Seitenload ausgeführt werden:To toggle binds first multilang.js in the head of your blog. Secondly, the following code must be executed after pageload:
// count h3 child objects with lang and title attribut
// Possible problem: no class .post-outer in blog template?
headerLength = $('[lang="' + language + '"][title]').parentsUntil('.post-outer:first').find('h3').length;
if(headerLength > 0)
{
// < must be
for(var i = 0; i < headerLength; i++)
{
getPostHeader(i).html(getPostTitle(i));
}
switchDisplay();
}
Wie man dass, mit Hilfe der jQuery ready()-Funktion, am besten macht ist hier beschrieben.
Die gewünschten Sprachen und die entspechenden Flaggen definiert man in multilang.js.As one that, with the help of the jQuery ready() function, makes it the most, is described here.
Define the languages you use and the appropriate flags in multilang.js.
// specify the languages to switch
var firstLang = "de";
var secondLang = "en";
var firstFlag = "de.jpg";
var secondFlag = "uk.jpg";
Aus Ladezeitgründen werden Skripte oftmals mit Komprimiertools verkürzt, um solche Skripte wieder zu "entpacken" gibt es verschiedene Möglichkeiten:Due to load-time scripts are often shortened by compression tools, to "unzip" such scripts there are different ways:
Mit dem jQuery/JavaScript-Projekt AppTiles können Live Tiles, wie man sie aus Windows Phone 7 kennt, auf Webseiten verwendet werden (Demoseite).With the AppTiles jQuery/JavaScript project you can use Live Tiles, known from Windows Phone 7, on Web pages (Demopage).
Mit dem hier verfügbarem jQuery/JavaScript-Projekt kann man Live Tiles, wie sie u.a. in Windows Phone 7 verwendet werden, auf seinen Webseiten einsetzen (Demo).With the here available jQuery/JavaScript project you can use Live Tiles, known from Windows Phone 7, on Web pages (Demo).
Installation
Als erstes bindet Ihr die benötigten JavaScript-Dateien (jquery.min.js & apptile.js) in den HEADER Eurer Seite ein. Die aktuelle Version der jQuery-Datei findet Ihr hier und das Tile-Skript befindet sich in der Beispiel-Implementierung.First, you includes the necessary JavaScript files (jquery.min.js & apptile.js) in the HEADER of your page. The current version of the jQuery file is here and the tile script is located in the example implementation.
<header>
...
...
</header>
Anschließend folgen einige globale Einstellungen ebenfalls im HEADER.Then follow some global settings in the HEADER.
<header>
...
<script type="text/javascript">
/* global tile setup */
var loopDuration = 5000; // Pause between the animation in milliseconds
// required pictures (not optional)
var picPath = "icons/";
var blankImg = picPath + "blank.png";
var standardImg = picPath + "standard.png";
var pointImg = picPath + "point.png";
</script>
...
</header>
Jetzt noch das benötigte CSS-Skript (apptile.css) in den HEADER. Die Datei befindet sich ebenfalls im downloadbaren Beispiel-Projekt.Now the required CSS script (apptile.css) in the HEADER. The file is also located in the downloadable example project.
<header>
...
...
</header>
Optional können mit den folgenden Anweisungen noch Größe und Farbe der Tiles beinflusst werden.Optionally, size and color of the tiles, can be configured with the following instructions.
<header>
...
...
</header>
Erstmal die kürzeste Variante implementierenFirst implement the shortest Variant
Hierfür erzeugt man einen DIV-Tag mit einer id und der CSS-Klasse tilewrapper. Nach dem dem Laden des DIV's, instanziert Ihr ein neues AppTile-Objekt. Das macht man am Besten in der ready()-Funktion, welche von jQuery zur Verfügung gestellt wird.For this adding a DIV tag with an id and CSS class tilewrapper. After the loading of the DIV's, instantiates your a new AppTile object. To do that the best in the ready() function, which is provided by jQuery.
<body>
<script type="text/javascript">
$(document).ready(function()
{
var sampleTile1 = new AppTile("sampletile1");
});
</script>
...
<div id="sampletile1" class="tilewrapper"></div>
...
</body>
Ausführlich konfiguriertConfigured in detail
Der Tile hat 3 Ansichten - Standard (stdTile), Custom (cstTile) und Background (bckTile) - welche sich unterschiedlich konfigurieren lassen:The tile has 3 views - standard (stdTile), custom (cstTile) and background (bckTile) - which can be configured differently.
var sampleTile2 = new AppTile("sampletile2");
sampleTile2.stdTile("IT4Zwigge", "it4zwigge.png");
sampleTile2.cstTile("Development", "homerobot.png", 99);
sampleTile2.bckTile("Training", "", "C# PHP SQL jQuery Javascript CSS...");
startRandomRun();
Animation startenStart animation
Um die Tile-Animation auszulösen ruft man die Funktion startTile(id)durch einen beliebigen Event auf. Also zum Beispiel beim Hover über dem Tile durch:To raise the tile animation, call the function startTile(id) by an arbitrary event.
Zum Testen einfach oben auf den IT4Zwigge-Tile zeigen.To test it simply hover the IT4 Zwigge tile above.
oderor
Um die Tiles zufällig zu starten, kann man die Funktion startRandomRun() benutzen. Dazu setzt man den optionalen Parameter bei der Objektinstanzierung auf true (siehe auch Beispiel-Implementierung).To start the tiles randomly, you can use the function startRandomRun(). To do this set the optional parameter when instantiating the object to true (see also example implementation).
var sampleTile2 = new AppTile("sampletile2", true);
Weitere MöglichkeitenMore possibilities
Man kann Tilefarbe & -größe abweichend von den globalen Einstellungen definieren.You can define tile color and tile size by way of derogation from the global settings.
if($("#elem").length == 0)
alert("Da ist kein Objekt mit der ID \"elem\"!");
So kann man z.B. Testen oben ein Element mit der entsprechenden ID existiert. Das funktioniert aber auch bei den anderen Selektoren die das jQuery-Objekt benutzen.
Konstruktor, Objektvariablen, private und öffentliche Methoden
Dieser erste Teil ist an das vor einiger Zeit veröffentlichte Slider-Skript angelehnt. Hier wird die Logik aus dem älterem Post in objektorientierter Form verwendet.
Im ersten Teil wird mit Javascript eine aus Java oder C# bekannte Objektstruktur verwendet, um Objekte mittels Konstruktor zu instanzieren, in den Objekten Objektvariablen zu verwenden und mit öffentlichen und privaten Methoden zu arbeiten.
Javascript im HEAD (u.a. Objektinstanzierung):
window.onload = Init;
function Init() {
// neues Objekt instanzieren
var dragObj = new DragObj;
// Events öffentlichen Methoden aus
// instanziertem Objekt zuweisen
document.onmousedown = dragObj.startDrag;
document.onmousemove = dragObj.Drag;
document.onmouseup = dragObj.endDrag;
}
Javascript im HEAD (das Objekt, seine Variablen und Methoden):
function DragObj() {
// Variable zur Rückgabe
// von öffentlichen Methoden (Pattern)
var that = {};
// Objektvariablen
this.movie = null;
this.startX = 0;
this.startY = 0;
this.start_drag = false;
// öffentliche Methoden
that.startDrag = function(e) {
// Browserweiche
if(!e) { // IE
e = window.event;
this.movie = e.srcElement;
}
else
this.movie = e.target;
var id = this.movie.id;
if(IsDragable(id)) {
this.startY =
e.screenY - parseInt(this.movie.style.top);
this.startX =
e.screenX - parseInt(this.movie.style.left);
this.start_drag = true;
}
}
that.Drag = function(e) {
if(this.start_drag) {
if(!e)
e = window.event;
var newX = e.screenX - this.startX;
var newY = e.screenY - this.startY;
this.movie.style.left = newX + "px";
this.movie.style.top = newY + "px";
}
}
that.endDrag = function() {
this.start_drag = false;
}
// private Methode
function IsDragable(id) {
// prüfen ob in der ID des angelickten Objektes
// das Wort "dragable" vorkommt (damit nicht
// alles verschoben werden kann)
if(id.split("_")[0] == "dragable")
return true;
return false;
}
return that;
}
Wenn Ihr das Facebook Social Plugin Comments verwenden wollt, habe ich die Vorgehensweise hier mal zusammengefasst. Grundsätzlich ist es möglich das Plugin in jede beliebige Webseite einzubinden, ich beschreibe hier das Prozedere speziell für den Blooger-Post, was sich aber nicht wesentlich von der Verwendung in anderen Seiten unterscheidet. Das Ergebniss seht Ihr hier in meinem Blog.
1. Schritt - Deaktivieren der Standard-Kommentare (nur Blogger)
Meldet Euch in Eurem Blog an, wechselt nach Design => Einstellungen => Kommentare => Ausblenden checken und die Einstellungen speichern.
2. Schritt - Facebook-Anwendung erstellen
Als nächstes erstellt Ihr hier eine Facebook-Anwendung. Das wichtigste hier ist die App-ID, die wird später gebraucht. Die App muss mit der Domäne (z.B. it4zwigge.blogspot.com) und Webseite (z.B. http://it4zwigge.blogspot.com/) verbunden werden.
3. Schritt - Code bereitstellen
Ich habe mich für die HTML5-Variante der Kommentare entschieden, vor allem weil XFBLM Probleme im IE9 gemacht hat. Am besten klickt Ihr hier auf Get Code:
Dann werden Euch unter dem Tab HTML5 zwei Codeschnipsel angeboten:
Im ersten Schnipsel ersetzt Ihr <APPID> mit Eurer App-ID (Zeile 6) und aufpassen das Kaufmannsund (&) vor appId muss so kodiert sein wie oben (&).
Im zweiten Schnipsel ändert Ihr dann das Attribut data-href auf Eure URL:
4. Schritt - HTML-Template modifizieren
Nun müssen die beiden Schnipsel noch an Ort und Stelle kopiert werden. Dazu wechselt Ihr nach Design => HTML bearbeiten => Widget-Vorlagen komplett anzeigen checken.
Um den ersten Schnipsel einzufügen sucht Ihr den Text <body, nach dem Body-Tag, muss dann das erste Schnipsel hin.
Für den zweiten Schnipsel sucht Ihr den Text data.post:body, nach diesem Tag wird unser Quelltext dann eingefügt. Nach dem Speichern der Vorlage sollten dann Kommentare wie unten zu sehen sein.
Wenn man z.B. den neuen Progressindikator (Mango) im Systray verwendet, wird der Inhalt der Phonepage nach unten geschoben wenn der Progressindikator eingeblendet wird. Das ist ein sehr unschöner Effekt.
...
_currentImage = new BitmapImage();
_webClient = new WebClient();
_webClient.OpenReadCompleted +=
new OpenReadCompletedEventHandler(_webClient_OpenReadCompleted);
...
Methode 1 - Image asynchron herunterladen und einem Image-Control zuweisen:
Die in den meisten Foren beschriebenen Methoden zum Speichern im Isolated Storage verwenden relative Uri. Möchte man ein aus dem Web heruntergeladenes Bild speichern hat man es aber mit einer absoluten Uri zu tun.
Um diesem Dilemma zu entkommen, kann man folgendes Pattern verwenden:
private void SaveImage(string fileToSave, string absoluteUri)
{
try
{
WebClient webClient = new WebClient();
webClient.OpenReadCompleted += (s, e) =>
{
if (e.Error != null)
{
return;
}
Stream stream = e.Result;
BitmapImage bitmap = new BitmapImage();
bitmap.SetSource(stream);
String tempImage = "TempImage";
var myStore = IsolatedStorageFile.GetUserStoreForApplication();
if (myStore.FileExists(tempImage))
{
myStore.DeleteFile(tempImage);
}
IsolatedStorageFileStream myFileStream = myStore.CreateFile(tempImage);
WriteableBitmap wb = new WriteableBitmap(bitmap);
wb.SaveJpeg(myFileStream, wb.PixelWidth, wb.PixelHeight, 0, 85);
myFileStream.Close();
myFileStream = myStore.OpenFile(tempImage, FileMode.Open, FileAccess.Read);
MediaLibrary mediaLibrary = new MediaLibrary();
mediaLibrary.SavePicture(fileToSave, myFileStream);
myFileStream.Close();
MessageBox.Show("Ihr Bild liegt jetzt im Album \"Gespeicherte Bilder\".");
};
webClient.OpenReadAsync(new Uri(absoluteUri));
}
catch (Exception ex)
{
MessageBox.Show("Fehler beim Speichern! " + ex.Message);
}
}
Wenn man diese Methode anwendet, schlägt zwei Fliegen mit einer Klappe. Das Bild wird asynchron heruntergeladen und anschließend gespeichert. Wie man das ganze aufteilt, also erst herunterladen und anzeigen und dann bei Bedarf speichern, schreibe ich im nächsten Beitrag.
Da der Wiki-Eintrag zum Thema ein bisschen knapp ist, hier noch ein paar Ergänzungen:
Alle Dateien die man veröffentlichen will, gehören in das Verzeichnis FHEM (usr/share/fhem/FHEM).
Man kann hier keine Unterverzeichnisse verwenden.
Wie im Wiki beschrieben kann man die Files dann z.B. mit http://fritz.box:8083/fhem/mysite.html erreichen. Das gilt auch für PNG-Grafiken.
Will man andere Grafiken (GIF, JPEG) verwenden, gehören die in den selben Ordner! Referenziert wird aber z.B. mit http://fritz.box:8083/fhem/icons/myimg.jpg
... schlägt fehl, weil als Source kein String sondern ein ImageSource-Objekt (Bitmap) verlangt wird.
Eine kleine Funktion schafft hier Abhilfe:
private BitmapImage String2Bmp(String source)
{
Uri uri = new Uri(source, UriKind.RelativeOrAbsolute);
BitmapImage bmp = new BitmapImage(uri);
return bmp;
}
Konkret muss ich Home of FHEM eine veränderliche URI eines Channels für eine Windows Phone Push Notification mitteilen und in einem Perl-Skript verwenden, welches die Notification per POST absetzt.
Hierzu bin ich wie folgt vorgegangen:
1. Um den Wert in FHEM zu halten habe in ein Dummy-Device in der fhem.cfg mit define channeluri dummy definiert.
2. Den Wert des Dummys setze ich per HTTP, z.B. mit http://fritz.box:8083/fhem?cmd=set channeluri+CHANNELURI
3. Auf den gesetzten Wert kann ich dann in meinen Skript mit $value{channeluri} zugreifen.
Ausgangspunkt für diese Beschreibung ist die Laborsoftware für die FRITZ!Box 7390 (84.05.07-20690) und das FHEM-Image (84.05.05-20538), was man beides über FRITZ!Labor bekommt.
Wenn man mittels FHEM auf Grund einen Events eine Webseite per GET aufrufen möchte, muss man wie folgt vorgehen:
1. 99_updatefhem.pm updaten
in der momentanen Version ist ein Fehler in der Funktion GetHttpFile den man auf jedenfall beheben muss. Dazu in der FHEM-Kommandozeile "fhemupdate 99_updatefhem.pm" bestätigen.
Anschließend in der FHEM-Kommandozeile "reload 99_updatefhem.pm" bestätigen, um die Änderungen wirksam werden zu lassen.
2. Eventhandler definieren
Dazu ruft man über das FHEM-Frontend Edit files -> fhem.cfg auf, und fügt folgende Zeile ein:
nweb - beliebiger Gerätename (sollte nach F5 im Frontend auch angezeigt werden) kse1 - Gerät welches den Event auslöst on - der Event, also hier wenn der Satus auf on gesetzt wird
Beim Server das Protokoll weglassen aber den Port nicht vergessen! Beim zweiten Parameter ist der Slash ebenfalls Pflicht.
Nachfolgend der etwas hakelige Weg zu einer funktionierenden Installation.
Ausgangspunkt ist die Laborsoftware für die 7390 (84.05.07-20690) und das FHEM-Image (84.05.05-20538), was man beides über FRITZ!Labor bekommt. Zuerst natürlich die Laborsoftware und dann das FHEM installieren, man sieht anschließend in der Fritz!-Oberfläche nichts Neues aber unter fritz.nas sollte es einen Ordner FHEM geben und natürlich sollte sich FHEM über http://fritz.box:8083/fhem starten lassen.
Mein CUL war neu, dass heißt keine Firmware drauf, also musste ich ihn flashen. Die meist beschriebene Methode mit dem (angeblich) im FHEM-Image enthaltenen dfu-programmer klappte nicht, weil er oder irgend etwas anderes nicht gefunden wurde.
CULflash CUL CUL_V3
führte zum Ergebnis:
sh: dfu-programmer: not found
Also Plan B mit FLIP, hier habe ich mir die Version 3.4.3 heruntergeladen und unter Windows 7 installiert.
Achtung: Die DLL (bei mir AtLibUsbDfu.dll) die nicht gefunden wird, muss man im Gerätemanager über Treiber aktualisieren... manuell nachinstallieren. Vorher sieht man bei eingesteckten CUL ein Ausrufezeichen am Gerät.
Jetzt noch die Firmware beschaffen, da bin ich hier fündig geworden. Ich habe die neueste Version (1.12) verwendet und dann den CUL geflasht.
Zum Funktionstest stand mir ein FS20 KSE (Klingelsignalerkennung) zur Verfügung, also CUL an die FB angesteckt, die LED blinkt nach erfolgreichen Flashen und Spannung an die KSE angelegt. Siehe da, der Status des automatisch erkannten Gerätes ändert sich beim Anlegen der Spannung.
Wenn man im Blogdesign, unter "HTML bearbeiten" das Häkchen bei "Widget-Vorlagen komplett anzeigen" gesetzt hat, findet man im Quelltext den Abschnitt <data:post.body/>.
Hier kann man dann unterhalb einen der beiden gezeigten Codeschnipsel einsetzen.
Wichtig hierbei ist das Referenzieren des jeweiligen Eintrags, dass wird mit expr:href="data:post.url" gemacht.
Beispiel mit Javascript SDK - XFBML (empfohlen):
Um dieses Codeschnipsel zu verwenden muss man das Javascript SDK von Facebook im Blog-HTML referenzieren.
Wenn man alles richtig gemacht hat, sieht es dann so aus wie hier, also ein Like Button für jeden Blogeintrag. Dass heisst unter anderem, ein Besucher des Blogs kann mit einem Klick, den Eintrag in sein Facebook-Profil posten.
Bei dem Problem den Wahrwert von Bedingungen verschiedener Bereich zu zählen, bin ich mit ZÄHLENWENN an Grenzen gestossen. Lösen konnte ich das nur mit SUMMENPRODUKT.
Beispiel 1 (nur Zählen): =SUMMENPRODUKT((A1:A3<=5)*(B1:B3=5))
Beispiel 2 (Bereich summieren): =SUMMENPRODUKT((A1:A3<=5)*(B1:B3=5)*C1:C3)
Download
