[HowTo] oldster's Live Wallpaper

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • [HowTo] oldster's Live Wallpaper

      Am 4.Advent stelle ich hier mein Basic Live Wallpaper Theme vor.


      Vorab schon mal einige Besonderheiten des Themes:

      UniAW 6.4 im fullscreen Modus - ( extra für Uwe ;) )

      yahoo Wetter Api

      Volle Live Wallpaper Settings Unterstützung

      und noch vieles mehr.

      Eine Bitte habe ich, "Haltet das Thema bitte sauber". Fragen und Kommentare bitte in einem gesondertem Forumsbeitrag stellen.

      Gruß Wilfried
    • Erst einmal ein ganz großes Dankeschön an Uwe, der mich zum Einen auf die App Live Wallpaper und zum Anderen wieder ans Coden gebracht hat. :thumbsup:

      Angefangen hat es wie bei vielen von Euch auch, mal eben ein altes iPhone Theme auf den MAC bringen. Leider wurde man die Settings von Live Wallpaper nur teilweise los
      und der Pfad zur setup.js des Themes war auch nicht einfach zu finden. :(

      Mit dem Ergebnis war ich nun überhaupt nicht zufrieden. Also erstmal das Example von SquidMelon geschnappt, und zerlegt. :evil:

      Die verwendete Wetter API von yr.no ist zwar sehr mächtig, kam aber trotzdem für mich aus folgendem Grund nicht in Frage:

      Die Wettervorhersagen stimmten nicht mit denen von yahoo überein. Was bei den Temperaturen vielleicht noch ginge (da lag der Fehler bei 1-2°C),
      aber die Vorhersage passte öfters nicht.

      Nun ging es darum, die beiden Wetter API's miteinander zu verbinden. Schließlich wollte ich ja die Live Wallpaper Settings nutzen.
      Die Lösung sieht so aus:

      Die yr.no Wetter API liefert mir die Geo-Coordinaten und yahoo die Wettervorhersage.

      Das war dann die Grundlage der Beta Version. Die ich dann Uwe zum "Spielen" geschickt habe.
      Aber Ihr kennt ja Uwe, der ist auch mit nichts zufrieden. :D :whistling: :saint:

      Mein lieb gewonnenes UniAW hat nicht gereicht. Nein es muss das neue von modmyi sein und dann noch über den ganzen Bildschirm gehen.
      Ihr glaubt nicht wie oft Uwe meine Tränen ;( trocknen musste, bis mich mein Ehrgeiz gepackt hat. Aber lassen wir das.

      So jetzt genug der Vorgeschichte. Jetzt kommt eine Auflistung von dem, was das Theme alles kann:

      1. yahoo Wetter

      2. UniAW OSX in der oldster Version (mit Anzeige der aktuellen Mondphase) credit to Ian Nicol, Dacal

      3. Volle Live Wallpaper Settings Unterstützung in der oldster Version. (später mehr dazu)

      4. Unterstützung des Live Wallpaper Edit Modus

      5. automatische Positionierung der "Windmühle", unabhängig von der Bildschirmauflösung.

      Wie das Theme installiert und ausgewählt wird, lasse ich an dieser Stelle weg.
      Da gibt es ja schon einen tollen Thread zu.

      Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von oldster ()

    • Live Wallpaper Settings



      1. Wallpaper - Standardfunktion

      2. Time - hat 2 Funktionen. Wechselt das Uhrzeitformat zwischen 24h/12hAM PM und ändert die Sprache von deutsch (24h) auf englisch (12hAM PM).

      3. Custom Text - ein mächtiges Feld. 8) Ich habe in dem Theme Schlüsselwörter eingebaut, die einige Funktionen des Themes steuern.

      a) forecast - durch Eingabe von forecast +Return kann man die forecast Anzeige Ein/Aus-schalten.

      b) frost - im UniAW gibt es die Funktion, das bei einer Temperatur <5°C Eisblumen über den ganzen Bildschirm angezeigt werden.
      Durch Eingabe von frost +Return kann man diese Funktion Ein/Aus-schalten.

      c) leaves, dandelion, windrad, windmill oder none - gehören auch zu UniAW. Diese Schlüsselwörter schalten u.a. die animierte Windmühle in der linken unteren
      Bildschirmecke ein. Möchte man von einer zur anderen Animation wechseln, muss man über none gehen.

      4. Show - ist dieses Feld aktiviert, wird der Ort mit dem Custom Text überschrieben. Der Hintergrund ist folgender.
      Die Rückgabewerte der yahoo API sind alle in englisch. Werden die Wetterdaten von Köln angezeigt, so erscheint als Ortsname Cologne.
      Mit dem Eintrag Köln als Custom Text wird Cologne überschrieben.

      5. Choose - Standardfunktion

      6. Show - schaltet die komplette Wetteranzeige Ein/Aus.

      7. Weather Source - Standardfunktion

      8. Show weather time - Standardfunktion

      9. °F - ändert neben der Temperatureinheit auch die Einheiten der anderen Wetterdaten.

      10. °C - ändert neben der Temperatureinheit auch die Einheiten der anderen Wetterdaten.

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von oldster ()

    • Jetzt ist der richtige Zeitpunkt sich das Theme zu laden und mal auszuprobieren, ob das auch alles stimmt, was ich bis hierhin geschrieben habe.

      dl.dropboxusercontent.com/u/28859017/oldstersHowTo.lwpp.zip

      Vielen Dank an Christian.P für den "oldster's Live Wallpaper Diskussions -Thread". :thumbup:

      Fragen, Kommentare und Diskussionen, bitte dort hinein.

      Fragen die das coden betreffen werden hier in diesem HowTo aufgenommen und beantwortet.
      Was natürlich nicht nur von mir geschehen soll. (Wieso denke ich jetzt nur wieder an Uwe)

      Und zum Schluss noch ein Video und einen besinnlichen 4. Advent.

      dl.dropboxusercontent.com/u/28859017/LiveWallpaper.mov

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von oldster ()

    • Bevor es mit dem HowTo losgeht noch eine Anmerkung zu meine Person. Ich bin über das iPhone zu html, css3 und javascript gekommen. Habe mir alles selber über die Versuch und
      Fehler Metode - mit über 50 jahre - beigebracht (google ist mein Freund und Bücher lese ich auch). Es kann also sein, dass meine Wortwahl und Erklärungen nicht mit denen
      des World Wide Web Consortium (W3C) übereinstimmen. Ich bitte dieses zu Entschuldigen und ggf. zu korrigieren. :D

      Und nun zur Live Wallpaper Theme Erstellung.

      Um ein eigenes Theme zu Erstellen, wird die geladene Datei oldsterHowTo.lwpp in z.B. meinTheme umbenannt. Danach rechte Maustaste und Paketinhalt zeigen.
      Es werden nun folgende Ordner und Dateien angezeigt:

      editable
      flipclock
      icon
      UniAW
      bg.jpg
      frost.png
      Info.plist
      screenshot.jpg
      theme.css
      theme.html
      theme.js

      Damit "meinTheme" installiert und bearbeitet werden kann, wird zuerst die Info.plist angepasst.


      Ein wichtiger Eintrag fehlt noch. Es ist der

      <key>CFBundleIdentifier</key>
      <string>oldstersHowTo</string>

      oldstersHowTo muss durch den neuen Namen (meinTheme) der lwpp Datei ersetzt werden.

      Die info.plist speichern und das Theme durch einen Doppelklick auf die Datei meinTheme.lwpp installieren.

      Der Pfad zum Theme lautet Library/Containers/com.Squid.Melon.Live-Wallpaper/Data/Library/Application Support/Live Wallpaper/Themes/meinTheme

    • Live Wallpaper Edit Mode

      Im Edit Mode können im Theme definierte Boxen verschoben werden. So sieht es für die FlipClock aus.

      Als erstes wird in der theme.css eine Box (#clockBox) mit der Grundposition definiert.

      #clockBox{
      position:absolute;
      top:80px;
      left:10px;
      width:275px;
      height:160px;
      z-index:100;}

      Danach in der theme.html eingetragen.

      <!-- flipclock -->
      <div id="clockBox">
      <div id="calendar">calendar</div>
      <div id="clock">
      <div class="hours"></div>
      <div class="minutes"></div>
      <div class="seconds"></div>
      </div>
      </div>

      Alles was in diesem Bereich steht, wird mit verschoben.
      Zum Schluss wird noch der editable.js mitgeteilt, dass die clockBox verschoben werden kann.

      var dragList = ["clockBox","weatherBox","forecastBox"];

      Wird der Edit Mode aktiviert sieht die clockBox dann so aus.



      Man sieht deutlich die Größe der Box und kann diese mit der Maus verschieben.
    • Systeminformationen mit Live Wallpaper anzeigen



      Mit html und javascript ist es nicht möglich an Systeminformationen heran zu kommen. Darum habe ich den Umweg über applescript genommen.

      In diesem HowTo wird nur ein Teil der ausgelesenen Werte angezeigt (os_version, cpu_type, cpu_speed und memory).

      Als erstes muss die App SystemInfo geladen und einmalig ausgeführt werden. https://dl.dropboxusercontent.com/u/28859017/SystemInfo.zip

      Diese App erzeugt auf dem Schreibtisch die HardwareData.xml Datei. Diese Datei wird dann ins Hauptverzeichnis des Live Wallpaper Themes verschoben.

      Folgende code kommt in die 3 theme Dateien.

      theme.css

      /***** system info *****/
      #systemInfoBox {
      position:absolute;
      top:30px;
      left:2000px;
      width:200px;
      height:90px;
      text-shadow: 1px 1px 1px black;
      z-index:100;}

      #cpu_type {}

      #cpu_speed {}

      #memory {}

      #os_version {}

      theme.html

      <div id="windspeed" >windspeed</div>
      <div id="sunrise">sunrise</div>
      </div>
      <!-- systemInfo -->
      <div id="systemInfoBox">
      <div id="os_version">os_version</div>
      <div id="cpu_type">cpu_type</div>
      <div id="cpu_speed">cpu_speed</div>
      <div id="memory">memory</div>
      </div>

      <!-- UniAW6.4 -->

      theme.js

      Die Funktion showData() erweitern.

      document.getElementById("Day4LoHi").innerHTML = obj.Day4Lo + "°" + obj.Day4Hi + "°";
      document.getElementById("Day4Code").src="icon/"+obj.Day4Code+".png";
      // systemInfo
      document.getElementById("cpu_type").innerHTML = obj.cpu_type;
      document.getElementById("cpu_speed").innerHTML = obj.cpu_speed;
      document.getElementById("memory").innerHTML = obj.memory;
      document.getElementById("os_version").innerHTML = obj.os_version;


      Die Funktion updateWeather(wString) erweitern.

      doTimeOnce();
      getLatLong();
      systemInfo();

      Und zum Schluss noch die Funktion systemInfo() hinzufügen.

      function timeKorr(time){
      var help = time.split(" ");
      if (help[1] == "pm") {
      h3 = help[0].split(":")[0]*1+12;
      h4 = help[0].split(":")[1];
      return h3 + ":" + h4;
      }
      else { return help[0];}
      }

      function systemInfo() {
      var xmlhttp;
      if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
      else {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState==4 ) {
      xmlDoc2=xmlhttp.responseXML;
      obj.cpu_type=xmlDoc2.getElementsByTagName("string")[11].childNodes[0].nodeValue;
      obj.cpu_speed=xmlDoc2.getElementsByTagName("string")[12].childNodes[0].nodeValue;
      obj.memory=xmlDoc2.getElementsByTagName("string")[17].childNodes[0].nodeValue;
      obj.os_version=xmlDoc2.getElementsByTagName("string")[79].childNodes[0].nodeValue;
      }
      }
      xmlhttp.open("GET","HardwareData.xml",true);
      xmlhttp.send(null);
      }
    • Anmerkung:
      Uwe hat mich auf 2 "Probleme" aufmerksam gemacht:

      1. die Position der #systemInfoBox ist zu weit rechts für Bildschirme unter 27". Sorry. Also bitte den Wert für left:2000px; eurer Auflösung anpassen.

      2. Die erzeugte HardwareData.xml ist je nach OSX anders aufgebaut. Dadurch ändern sich leider die Positionen der Rückgabewerte.

      Aber die richtige Position zu finden ist nicht schwer :D

      Beispiel: cpu_type
      obj.cpu_type=xmlDoc2.getElementsByTagName("string")[11].childNodes[0].nodeValue;

      Unter Mavericks steht dieser Wert an 11.Stelle (Achtung: Die Zählung beginnt mit 0).

      Sollte der angezeigte Wert nicht stimmen, die HardwareData.xml mit einem Editor öffnen und den <key>cpu_type</key> suchen. Darauf folgt direkt der passende <string> Eintrag.
      Jetzt die <string> Einträge abzählen (mit 0 beginnen) und in die [ ] Klammer eintragen.
    • astro, zeigt neben den Auf/Untergangszeiten für Sonne/Mond auch den nächsten Zeitpunk für Voll/Neumond an.


      Der Mond über der Auf/Untergangszeit zeigt die aktuelle Mondphase.

      HowTo

      Den Ordner astro laden und in Theme Stammverzeichnis kopieren.
      https://dl.dropboxusercontent.com/u/28859017/astro.zip

      Die theme.html erweitern:
      <!-- Theme files -->
      <link href="theme.css" rel="stylesheet" type="text/css" />
      <link rel="stylesheet" href="UniAW/UniAW.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="astro/astro.min.css" type="text/css" media="screen" />
      <script language="javascript" type="text/javascript" src="UniAW/UniAW.js"></script>
      <script language="javascript" type="text/javascript" src="astro/astro.min.js"></script>
      <script src="theme.js" type="text/javascript"></script>

      <!-- weather forecast-->
      <div id="forecastBox">
      <div id="Today" class="forecast">Today</div>
      <div id="TodayLoHi" class="forecast">TodayLoHi</div>
      <img id="TodayCode" src="icon/0.png" width="100" />
      <div id="Day1" class="forecast">Day1</div>
      <div id="Day1LoHi" class="forecast">Day1LoHi</div>
      <img id="Day1Code" src="icon/0.png" width="100" />
      <div id="Day2" class="forecast">Day2</div>
      <div id="Day2LoHi" class="forecast">Day2LoHi</div>
      <img id="Day2Code" src="icon/0.png" width="100" />
      <div id="Day3" class="forecast">Day3</div>
      <div id="Day3LoHi" class="forecast">Day3LoHi</div>
      <img id="Day3Code" src="icon/0.png" width="100" />
      <div id="Day4" class="forecast">Day4</div>
      <div id="Day4LoHi" class="forecast">Day4LoHi</div>
      <img id="Day4Code" src="icon/0.png" width="100" />
      <div id="humidity">humidity</div>
      <div id="visibility">visibility</div>
      <div id="pressure">pressure</div>
      <div id="windspeed" >windspeed</div>
      <div id="sunrise">sunrise</div>

      </div>
      <!-- astro -->
      <div id="astroBox">
      <img src="astro/sun.png" width="150"/ style="position:absolute; top:0px; left:0px;">
      <img id="phase2" src="UniAW/phasenbilder/50.png" width="51"/ style="position:absolute; top:13px; left:95px;">
      <img src="astro/fullmoon.png" width="150"/ style="position:absolute; top:0px; left:160px;">
      <img src="astro/newmoon.png" width="150"/ style="position:absolute; top:0px; left:240px;">
      <img id="starsignIcon" src="astro/steinbock.png" width="60"/ style="position:absolute; top:10px; left:330px;">
      <div id="sunrise2">Sonne</div>
      <div id="moonrise">Mond</div>
      <div id="starsign">sternzeichen</div>
      <div id="fullmoon">vollmond</div>
      <div id="newmoon">neumond</div>
      </div>


      Um die Box frei zu positionieren die astroBox der editable.js hinzufügen
      var themeID = getMonitorID()+'iTheming'; // insert your theme id here
      var dragList = ["clockBox","weatherBox","forecastBox","systemInfoBox","astroBox"]; // This array is listed for every part that can be moved by user
      var runWithEditModeKey = 'runWithEditMode';
      var MIN_DISTANCE = 10; // minimum distance to "snap" to a guide
      var guides = [];
    • Auch wenn es um Live Wallpaper sehr ruhig geworden ist, hier ein neues HowTo von mir.

      ipCam livestream einbinden


      Und dafür benötigt man nur eine Zeile in der theme.html

      <div id="wrapper">
      <div id="main">
      <!-- ip cam -->
      <img src="http://XXXX.dyndns.org/videostream.cgi?user=gast&pwd=gast" alt="ipcam offline" width="320" style="position:absolute; top:20px; left:2000px;"/>
      <!-- flipclock -->
      <div id="clockBox">
      <div id="calendar">calendar</div>
      <div id="clock">
      <div class="hours"></div>
      <div class="minutes"></div>
      <div class="seconds"></div>
      </div>
      </div>

      Wer Fragen dazu hat, wie man seine heimische ipCam ins www bekommt, dem versuche ich per email zu helfen.