Javascript ersetzen aller css background-images durch Retina-Bilder

Wenn man vor dem Problem steht, dass dynamisch generierte CSS background-images verwendet werden, um Bilder auf einer Webseite darzustellen und diese dann auch für Retina Displays gut aussehen sollen, kann man folgendes Skript verwenden. Es überprüft zusätzlich mittels eines Ajax Requests, ob die Bilder vorhanden sind/existieren.

Voraussetzung ist, dass eine Namenskonvention für nicht-Retina Bilder und Retina verwendet wird wie z.B.:

für nicht-Retina Bilder

und

für Retina Bilder

<!--Retina Fix for dynamic background images-->
        <script type="text/javascript">
            function isRetinaDisplay()
            {
                var dpr = 1;
                if(window.devicePixelRatio !== undefined) dpr = window.devicePixelRatio;
                return dpr >= 2;
            }

            var notRetinaString = "@1x";
            var retinaString = "@2x";

            $(document).ready(function() {
                //if we have a retina display
                if(isRetinaDisplay())
                {
                    //select all elements having background images
                    var $elementsWithBackground = $('*').filter(function() {
                        if (this.currentStyle)
                            return this.currentStyle['backgroundImage'] !== 'none';
                        else if (window.getComputedStyle)
                            return document.defaultView.getComputedStyle(this,null)
                                .getPropertyValue('background-image') !== 'none';
                    });
                    //replace their background-image with retina images
                    $elementsWithBackground.each(function( index ) {
                        $backGroundImage = $(this).css('backgroundImage');
                        /*console.log($backGroundImage);*/
                        //when it is no retina image
                        if($backGroundImage.indexOf(notRetinaString) !== -1)
                        {
                            //replace with retina image
                            $newBackgroundRetinaImage = $backGroundImage.replace(notRetinaString,retinaString);
                            $newBackgroundRetinaImageUrl = $newBackgroundRetinaImage.replace('url("','').replace('")','');
                            //check if retina file exists
                            var $myThis = this;
                            $.ajax({
                                url:$newBackgroundRetinaImageUrl,
                                type:'HEAD',
                                cache: true,
                                success:function() {
                                    console.log($newBackgroundRetinaImage);
                                    $($myThis).css('backgroundImage', $newBackgroundRetinaImage);
                                },
                                error:function() {
                                    console.log("no retina image found for: " + $backGroundImage);
                                }
                            });

                        }
                    });
                }
            });
        </script>

Vergleich von Augmented Reality Frameworks für Android

project nameMixareDroidARAndARvuforiawiktitudeandroid-augment-reality-framework
total ratingBCDA-B+F
project urlMixareDroidARAndARvuforiawiktitudeandroid-augment-reality-framework
licenceGNU GPL v3GNU GPL v3GNU GPL v3Anonymous Data collection by Qualcomm,
Attribution licence, the logo must be shown ether in loading, splash or credit screen license
not free, 599€ per App PricingApache License 2.0
version0.9.2??1.5.9.?initial version
latest build22.08.2012??22.02.2012?01.12.2011
documentationLinkBlog?Link?Link
tested Devices/Android Versionokno informationgoodvery good?
tested Devices URLLinkLinkAndroid 2.2 and newer, iOS 4 & 5.?
getting startedLinkLinkLinkLink?
Sample VideoLinkhttp://youtu.be/MHkobjWqLA8Link
sample appLinkLinkLinkLink and Link
special featuresespecially for 3D Objects (with commercial licence)for ios and androidruns in webview (like phonegap), easy implementation for android, ios etc but performance issues may occur, very good customizable
conclusionactive community and steady buildsfew documentation and no information about tested devicesprojects is not maintained any morevery good documentation and device support, critical licence and complex intital setupnot free and few informations on the website, might have performance issues but easy to implement with HTML5project is not maintained any more

Fazit:

Ich habe mich für Mixare entschieden, welches  sehr gut gecodet, aber weniger gut dokumentiert ist. Ist ist sehr einfach möglich seine eigenen Daten oder Wikipedia Daten über die Kamera zu legen und gleichzeitig dieselben Daten auf Google Maps als Marker anzuzeigen.

Vuforia erscheint für die Entwicklung von Android/iPhone Lösungen der geeignete Kanditat zu sein, jedoch wird in der Lizenz verlangt, dass Benutzerdaten an den Qualcomm Server gesendet werden und der User darüber informiert werden muss:

Auszug aus der Lizenz von Vuforia

“You must inform end-users of your application that certain types of anonymous usage data is collected by the Vuforia SDK and sent back to Qualcomm servers.”

“(i) the collection by QUALCOMM and/or its affiliates of Statistics from the Software (including but not limited to: (a) information about the end users’ devices such as device unique identifier, make, model, operating system name and version and kernel version, (b) information about our Software used to create your software or augmented reality end user application such as the SDK version and device profile, and (c) information about your software or augmented reality application and its use such as settings (e.g., camera resolution settings, configuration settings), start and stop dates and times, camera on/off events, target image obtained/lost events, and other general usage information (collectively “Statistics”)).”

Phonegap natives Android Plugin erstellen Tutorial

Mit Phonegap lässt sich nativer Code triggern aus Javascript heraus mit folgendem Code:

//onDeviceReady          

cordova.exec( success, fail, "UploadImage", "nativeAction", ["success"]);    

            function success (result) {    
                alert("SUCCESS: \r\n"+result );
                }
            function fail (error) {    
                alert("ERROR: \r\n"+error );
                }

Dieser Code ruft die Klasse UploadImage die Funktion execute mit Parameter action=’nativeAction’ und einem JsonString(!) data = “['success']” auf. Data kann dafür verwendet werden Daten nach Java zu übergeben:

import org.apache.cordova.api.Plugin;
import org.apache.cordova.api.PluginResult;

public class UploadImage extends Plugin {
    public static final String NATIVE_ACTION_STRING="nativeAction";       
    public static final String SUCCESS_PARAMETER="success";
    @Override
    public PluginResult execute(String action, JSONArray data, String callbackId) {
        Log.d("HelloPlugin", "Hello, this is a native function called from PhoneGap/Cordova!");             
        //only perform the action if it is the one that should be invoked              
        if (NATIVE_ACTION_STRING.equals(action)) {                    
            String resultType = null;                    
        try {                          
            resultType = data.getString(0);                    }                    
        catch (Exception ex) {                          
            Log.d("HelloPlugin", ex.toString());                    }                    
        if (resultType.equals(SUCCESS_PARAMETER)) {                          
            return new PluginResult(PluginResult.Status.OK, "Yay, Success!!!");                    
            }                    
        else {                          
            return new PluginResult(PluginResult.Status.ERROR, "Oops, Error :( ");                    
            }              
        }                
        return null;
    }
}

Außerdem muss das Plugin in die res/xml/config.xml eingetragen werden:

<plugin name="UploadImage" value="de.sv.foo.plugin.UploadImage"/>

 

Die Ausgabe sollte sein:

"SUCCESS: Yay, Success!!!"

 

Huawei Ideos X3 USB Debugging Tutorial


Das Huawei Ideos X3 (U8510 Blaze) ist das sehr günstige Einsteiger Handy für Android Programmierer und Studenten (< 100€).

Zu Beginn müssen die USB-Treiber installiert werden werden. Diese sind auf dem Handy gespeichert. Eine sehr gute Anleitung findet man hier. Alternativ kann man die Treiber auch sehr einfach downloaden und installieren: Download.

Um das USB Debugging beim Huwaei Ideos X3 zu aktivieren, muss folgende Nummer gewählt werden um in das versteckte Menü zu kommen:

*#*#2846579#*#*

20120430-220205.jpgDanach ins ProjectMenu->3. Background setting->2. Log setting

->Log level setting, verbose auswählen.

->Log switch, Log on auswählen

Danach ins ProjectMenu->3. Background setting->6. Dump & Log auswählen

  • Open Dump & Log
  • Changing log switch
  • Open Sleep Log

Ihr Huawei Ideos X3 ist jetzt bereit Debug-Informationen und detailierte Fehlermeldungen an ihre IDE (Eclipse) zu senden.

Zum Testen auf High-End Android Geräten: Lesen Sie: Samsung Galayx S2 Debugging.

Entwickler Handy Empfehlung: Samsung Galaxy Nexus mit Android 4.0

Entwickler Tablet Empfehlung: Samsung Galaxy Tab 2 mit Android 4.0

Phonegap Teil3: Basics und das erste Programm

Die Programmierung mit Phonegap erfolgt zum größten Teilin HTML(5) Javascript und CSS(3). Es wrd kein nativer Code benötigt, es kann aber per Plugin nativer Code benutzt werden.

Testen von mobilen Anwendungen

iOS: Safari, Develop->User Agent->Mobile Safari (iPhone, iPad)

Android: Firefox Addon: User Agent Switcher und fertige Listen mit User Agents.

Es wird empfohlen einen Webkit Browser (Safari oder Chrome) zum normalen Entwickeln zu benutzen, aufgrund der häufigen Verwendung auf den Zielsystemen.

weiterlesen…

Phonegap Teil2: Installation für Android unter Eclipse Windows 7

Die Installation unter Eclipse für Android ist sehr einfach, es kann das Testprojekt verwendet werden aus dem Phonegap-Package oder selber ein Projekt angelegt werden.

Wichtig ist, dass das Tutorial zum jetztigen Zeitpunkt noch nicht auf den neuen Namen von Phonegap umgeschrieben war – Cordova – als die Dateien von bspw. phonegap-1.50.js in cordova-1.50.js umbenannt worden sind. Ich empfehle das Test-Projekt zu nehmen.

Das Test-Projekt für Android befindet sich unter lib\android und kann über Eclipse: new Project, with existing sources importiert werden. Die cordova-1.50.jar muss noch zum Build Path hinzugefügt werden (Project Properties/Java Build Path/Libraries/Add JARs) und das Test Projekt kann gestartet werden.

In der Demo kann man alle Phonegap Funktionen wie GPS, Accelerometer, Nummern wählen, vibrieren, Bildergalerie, Kontakte, Netzwerkstatus und Kompass ausprobieren auf dem Testhandy/Simulator.

20120322-113921.jpg

zurück zu Phonegap Teil1: Features und Möglichkeiten

Nach dem Buch:

Phonegap Teil1: Features und Möglichkeiten

Mit Phonegap kann man Webanwendungen mit HTML5, CSS und Javascript bauen als mobile Webanwendung und gleichzeitig eine native App für den App-Store und den Androide Market. Phonegap ist Open Source und wird von der Apache Cooperation und Adobe unterstützt. Auch eine Mischung aus mobiler Anwendung als Webseite und nativer App im Store ist möglich. Die große Frage ist, wo sind die Grenzen von Phonegap, was ist nicht möglich? Welche Features und Möglichkeiten bietet Phonegap im Vergleich zu einer nativen App.

Systemvorraussetzung nach Zielplattform

iOS: MAC ab OS X 10.6

Android und HP WebOS: alle 3 (=Windows, Mac, Linux)

Symbian: alle 3, aber der Simulator läuft nur unter Windows

Blackberry: Windows, Mac, aber der Simulator läuft nur unter Windows

Windows 7 Phone: Mac ab OS X 10.5 :)

weiterlesen…