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.
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.
... 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.
Download