Visualizzazione post con etichetta PhoneGap. Mostra tutti i post
Visualizzazione post con etichetta PhoneGap. Mostra tutti i post

martedì 7 luglio 2015

Missing Push Notification Entitlement e PhoneGap

Sto sviluppando una applicazione Android/IOS e per non perdere la testa su due versioni ho deciso di usare Phonegap per mantenerel lo sviluppo centralizzato anche se di fatto non uso le API di Phonegap

Al momento di effettuare il primo upload su Apple Store (dopo che tutte le verifiche di XCode erano state superate) ho ricevuto nel giro di un secondo la seguente mail

----------------------------------------
Dear developer,
We have discovered one or more issues with your recent delivery for "Abetone Trail Park". Your delivery was successful, but you may wish to correct the following issues in your next delivery:
Missing Push Notification Entitlement - Your app appears to include API used to register with the Apple Push Notification service, but the app signature's entitlements do not include the "aps-environment" entitlement. If your app uses the Apple Push Notification service, make sure your App ID is enabled for Push Notification in the Provisioning Portal, and resubmit after signing your app with a Distribution provisioning profile that includes the "aps-environment" entitlement. See "Provisioning and Development" in the Local and Push Notification Programming Guide for more information. If your app does not use the Apple Push Notification service, no action is required. You may remove the API from future submissions to stop this warning. If you use a third-party framework, you may need to contact the developer for information on removing the API.
After you’ve corrected the issues, you can use Xcode or Application Loader to upload a new binary to iTunes Connect.
Regards,
The App Store team
----------------------------------------

Di fatto non uso le notifiche sulla mia applicazione e quindi non riuscivo a capire il motivo dell'errore.
Guardando il codice sorgente di PhoneGap, piu' precisamente in AppDelegate.m, sono presenti due funzioni

----------------------------------------
- (void)      application:(UIApplication*)application
    didRegisterForRemoteNotificationsWithDeviceToken:(NSData*)deviceToken
{
    // re-post ( broadcast )
    NSString* token = [[[[deviceToken description]
        stringByReplacingOccurrencesOfString:@"<" withString:@""]
        stringByReplacingOccurrencesOfString:@">" withString:@""]
        stringByReplacingOccurrencesOfString:@" " withString:@""];

    [[NSNotificationCenter defaultCenter] postNotificationName:CDVRemoteNotification object:token];
}

- (void)                                 application:(UIApplication*)application
    didFailToRegisterForRemoteNotificationsWithError:(NSError*)error
{
    // re-post ( broadcast )
    [[NSNotificationCenter defaultCenter] postNotificationName:CDVRemoteNotificationError object:error];

}
----------------------------------------

E' stato sufficiente commentare le due funzioni, ricompilare e rimandare a Apple Store per vedere scomparire il messaggio di errore

mercoledì 29 aprile 2015

Mappe offline con Phonegap e Leaflet.js

Mi e' stato chiesto di sviluppare una applicazione per Android/IOS/W8 che permetta di visualizzare mappe di escursionismo in modalita' completamente offline (non e' prevista la copertura internet via cellulare nel mezzo del bosco) e con un minimo di utilizzo del posizionamento GPS



Una delle richieste e che l'utente doveva avere subito disponibile tutta la cartografia dell'area di interesse (24Km x13Km) senza la necessita' di scaricare dati

Viste le limitazioni imposte e i sistemi da supportare mi sono orientato su una applicazione HTML5 su Phonegap ed usando la libreria Leaflet.JS .
Con Leaflet e' possibile mostrare mappe dinamiche (pan/zoom) derivanti dai progetti di cartografici open e vista la tematica ho scelto come sorgente dati 4UMaps, un servizio dedicato all'escursionismo e alla mountain bike con indicazione delle isoipse e di alcuni tracciati di sentieri

Le varie mattonelle della cartografia ai vari livelli di dettaglio (su 4UMaps il livello di maggiore dettaglio e' il 15) possono essere scaricati medianti il softare MOBAC (Mobile Atlas Creator), un software Java che date le coordinate dei vertici si occupa di scaricare tutti i dati legati all'area selezionata


Il primo problema che si e' posto e' che le mappe dell'area di interesse agli zoom 13-14-15 ha una dimensione di circa 90 Mb, decisamente troppi per gli utenti che si devono scaricare tutto il pacchetto (il limite proposto per l'applicazione completa e' massima di 50 Mb).

Mediante il software Pngyu e' pero' possibile effettuare una compressione dei PNG delle mappe di un fattore del 40-50% senza perdere sensibilmente in qualita'

Per ottenere il segnale del punto GPS e' possibile utilizzare un plugin per Leaflet (Leaflet.Control.GPS)

Per sovrapporre una traccia GPS alla mappa esistono vari plugin di leaflet ma sono nati per l'uso online ed usandoli all'interno di Phonegap viene generato un errore di javascript che per problemi di sicurezza non puo' accedere ai dati sul filesystem; per ovviare a questa limitazione ho trasformato il file GPX in un file testo creando poi un polilinea con l'array dei punti ...tracce con 5000 punti sono gestite senza troppi problemi o rallentamenti)

Al termine il file html di un progetto di sentiero e' cosi' composto (nella sottocartella Maps sono contenute le immagini della cartografia divise per livello di zoom)

--------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Sentiero 2</title>
<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="leaflet.css" />
<link rel="stylesheet" href="leaflet-compass.css" />
<link rel="stylesheet" href="leaflet-gps.css" />
</head>
<body>
<div id="map" style="width: 500px; height: 500px"></div>

<script src="leaflet.js"></script>
<script src="leaflet-compass.js"></script>
<script src="leaflet-gps.js"></script>

<script>

var map = L.map('map').setView([44.1496, 10.7321], 12);

L.tileLayer('Maps/{z}/{x}/{y}.png', {
maxZoom: 15,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://4umaps.eu">4UMaps</a>',
id: 'examples.map-i875mjb7'
}).addTo(map);



var polygon = L.polyline([
   [44.136394501,10.721472740],
[44.136398315,10.721463203],
[44.136402130,10.721356392],
[44.136432648,10.721227646],
[44.136440277,10.721220016],
[44.136497498,10.721108437],
[44.136562347,10.721001625],
..................................................................................
..................................................................................
[44.136318207,10.721796036],
[44.136318207,10.721800804],
[44.136306763,10.721786499],
[44.136322021,10.721772194],
[44.136325836,10.721771240],

]).addTo(map);

//map.addControl( new L.Control.Compass() );
map.addControl( new L.Control.Gps({autoActive:false}) );



</script>
</body>

</html>
--------------------------------------------------------

lunedì 7 aprile 2014

Soil Color Chart per IOS

Vista la semplicita' ho effettuato il porting di Soil Color Chart anche per IOS mediante Phonegap
In questo caso la compilazione e' stata estremamente lineare
Il codice sorgente puo' essere scaricata da questo link







Soil Color Chart 2 in Android con Phonegap

Basandosi sul codice HTML5 usato per FirefoxOS ed usando Phonegap ho effettuato il porting di Soil Color Chart per Android (l'applicazione e' disponibile sul PlayStore a questo indirizzo mentre il codice sorgente puo' essere scaricato qui)



I passi sono piuttosto semplico
prima di crea il progetto Phonegap

phonegap create soilcolor  com.soil.color.chart.two SoilColorChart

cd soilcolor/www

si copiano i file dell'applicazione HTML5 in www
poi

cd ..
phonegap build android

aprendo il progetto mi e' comparso il seguente errore

conversion to dalvik format failed with error 1
che pero' e' stato risolto effettuando un semplice Project/Clean (dai menu' di Eclipse)






Per terminare e' sufficiente personalizzare le icone del progetto Android nella directory /res

lunedì 31 marzo 2014

Geocompass per FirefoxOS


Questa applicazione e' un porting della precedente Geocompass per Android per FirefoxOS
A parte il linguaggio differente, il codice condivide larghe parte di righe che sono state semplicemente copiate complice una sintassi uguale tra Java e Javascript
Il programma e' stato scritto con l'aiuto di Cordova/Phonegap.
Per istruzioni si puo' consultare Wikipedia o questa pagina




L'applicazione puo' essere scaricata a questo link


index.html
----------------------------------------------------
<!DOCTYPE html>
<html>
  <head>
    <title>Geocompass</title>
<style>
    #content {
       width: 100px;
       height:100px;
       margin: 0px auto;
}
</style>

    <script type="text/javascript" charset="utf-8" src="./js/cordova.js"></script>
    <script type="text/javascript" charset="utf-8" src="./js/misura.js"></script>
  </head>

  <body onload="drawCanvas();">
  <div id="content">
    <canvas id="myCanvas"  width="256" height="256">Your browser doesn't support canvas tag</canvas>
</div>
 <p id="ang" style="text-align:center;font-family:arial;color:red;font-size:30px;"></p>
 <p  style="text-align:center;font-family:arial;color:red;font-size:30px;">Strike/Dip</p><center>
 <p><a style='text-align:center;font-family:arial;color:red;font-size:20px;' href='http://en.wikipedia.org/wiki/Strike_and_dip'>Help</a></p></center>
 <p style="text-align:center;font-family:arial;color:red;font-size:15px;">Contact : lucainnoc@gmail.com</p></center>
  </body>
</html>
----------------------------------------------------

misura.js
----------------------------------------------------
var surface;
     var misura; 
     var angle = 0;
var ang_maxpendenza = 0;
function drawCanvas() {
screen.mozLockOrientation("portrait-primary");
    surface = document.getElementById("myCanvas");
if (surface.getContext) {
misura = new Image();
misura.onload = loadingComplete;
misura.src = "./img/misura.png";
if (ang_maxpendenza < 10) 
{
misura.src = "./img/orizzontale.png";
}
if (ang_maxpendenza > 80) 
{
misura.src = "./img/verticale.png";
}
}
}

 function loadingComplete(e) {
     var surfaceContext = surface.getContext('2d');
     surfaceContext.fillStyle = "rgb(255,255,255)";
     surfaceContext.fillRect(0, 0, surface.width, surface.height);
     surfaceContext.save();
surfaceContext.translate(misura.width * 0.5, misura.height * 0.5);
if ((ang_maxpendenza > 10) && (ang_maxpendenza < 80))
{
surfaceContext.rotate(angle* 0.0174532925199432957);
}
surfaceContext.translate(-misura.width * 0.5, -misura.height * 0.5);
surfaceContext.drawImage(misura, 0, 0);
     surfaceContext.restore();
}

function converti2deg(angolo) {
return angolo*(180/Math.PI);
}
function converti2rad(angolo) {
return angolo*(Math.PI/180);
}

    
    window.addEventListener('deviceorientation', function(event) {
var azimuth = event.alpha;
    var pitch = event.beta;
    var roll = event.gamma;
pitch = converti2rad(pitch);
    roll = converti2rad(roll);
var cosalfa = Math.cos(roll-(Math.PI/2));
    var cosbeta = Math.cos(pitch-(Math.PI/2));
var dir_maxpendenza = -converti2deg(Math.atan(cosalfa/cosbeta));  
if ((pitch < 0) && (roll<=0)) dir_maxpendenza =  dir_maxpendenza + 180;
if ((pitch <= 0) && (roll>0)) dir_maxpendenza =  dir_maxpendenza + 180;

    if ((pitch > 0) && (roll>0)) dir_maxpendenza =  dir_maxpendenza + 360;
    if ((pitch == 0) && (roll>0)) dir_maxpendenza =  270;
    if ((pitch > 0) && (roll==0)) dir_maxpendenza =  0;

    ang_maxpendenza = 90-converti2deg(Math.acos(Math.sqrt((cosalfa*cosalfa)+(cosbeta*cosbeta))));
var dir_maxpendenza_reale = (azimuth+dir_maxpendenza)%360;

document.getElementById("ang").innerHTML = dir_maxpendenza_reale.toFixed(0)+"/"+ang_maxpendenza.toFixed(0);
if (ang_maxpendenza < 10) document.getElementById("ang").innerHTML = "Horizontal";
if (ang_maxpendenza > 80) document.getElementById("ang").innerHTML = "Vertical " + azimuth.toFixed(0) + "-" + (azimuth.toFixed(0)+180)%360;


angle = dir_maxpendenza;
drawCanvas()
}, false);
----------------------------------------------------

manifest.webapp
----------------------------------------------------
{
"name": "Geocompass",
  "description": "Compass for Geologists",
"launch_path":"/index.html",
"installs_allowed_from":["*"],
"version":"0.9.0","name":"Geocompass",
"orientation": "portrait-primary",
 "icons": {
    "256": "/img/icon-256.png",
    "128": "/img/icon-128.png",
"120": "/img/icon-120.png",
"90": "/img/icon-90.png",
"60": "/img/icon-60.png",
"32": "/img/icon-32.png"
  },
  "developer": {
    "name": "Luca Innocenti",
    "url": "http://debiaonoldcomputers.blogspot.com/"
  },
  "default_locale": "en"

}
----------------------------------------------------


venerdì 31 gennaio 2014

Phonegap-Cordoba 3.0 con Android/Ios/FirefoxOS

Visto che oramai ho terminali Android, Ios e FirefoxOs ho voluto riprovare ad usare Phonega e nel frattempo le procedure di installazione sono decisamente cambiate


Phonegap/Cordoba si installa mediante Node.js per cui si deve prima installare il pacchetto Node.Js
Su Windows e MacOs c'e' un semplice installare mentre su Linux Node.js si installa scaricando direttamente i sorgenti e con la classica procedura
./configure
make
make install
(la procedura non e' rapidissima)

successivamente si inizia ad installare Phonegap con il comando
npm install -g phonegap
(forse e' inutile ma ho installato anche Cordova)
npm install -g cordova


si crea quindi il progetto
phonegap create hello com.example.hello HelloWorld
cd hello

e qui iniziano le differenze che ho trovato con le istruzioni ufficiali del sito

per creare il progetto Phonegap Android si deve dare direttamente il comando
phonegap build android
(devono essere setttata la Path per trovare la directory tools e platform-tools dell'SDK di Android altrimenti il comando fallisce con il comando
)
oppure
phonegap build ios

per lanciare l'esecuzione sul telefono
phonegap run android

oppure
phonegap run ios
(se non viene trovato il telefono fisico viene lanciato in automatico l'emulatore.

Nel caso di IOS deve essere prima installato il pacchetto ios-sim con i comandi
sudo su
xcodebuild -license
npm install -g ios-sim
)
Lanciato il comando l'emulatore parte ma si arriva a questo errore

Di fatto la directory www del progetto creato su Ios risulta vuota (c'e' solo un file .xml). Per risolvere il problema l'unica soluzione che ho trovato e' stata quella di copiare la directory www da un progetto Phonegap creato su Linux. Fatto cio' tutto inizia a funzionare perfettamente

A questo per aggiungere funzionalita' legate all'hardware dei telefoni si devono installare i plugin per le varie funzionalita'. Per test e' stato scaricato ed attivato il 

cordova plugin add org.apache.cordova.device

Ed ecco lo stesso programma di esempio che funziona, senza modifiche, sulle due piattaforme Android ed Ios

Phonegap su Ios

Phonegap su emulatore Android in Ios

si puo' aggiungere al progetto anche FirefoxOs mediante
cordova platform add firefox

il problema e' che l'emulatore di Firefox Os non funziona sotto Mac Os X (almeno al momento in cui scrivo questa riga). Parte e si chiude dopo qualche secondo. Per ovviare al problema ho spostato tutta la cartella della piattaforma Firefox sull'emulatore di Windows e selezionato il file manifest.
Si osserva che il supporto di Phonegap a Firefox e' ancora poco maturo in quanto le API ancora non funzionano (almeno quelle dell'esempio)









martedì 19 febbraio 2013

Angoli di inclinazione in PhoneGap/HTML5

Sempre utilizzando PhoneGap e' possibile in modo molto semplice ottenere gli angoli di rotazione del dispositivo mobile nello spazio mediante la notazione di Eulero
Angoli di Eulero (Wikipedia)
Gli angoli sono anche definiti come
alfa = yaw (imbardata) in giallo
beta = roll (rollio) in rosso
gamma =  pitch (beccheggio) in viola

Fonte Wikipedia

il codice e' semplicemente autoesplicativo
----------------------------------------------------

<!DOCTYPE html>
<html>
  <head>
    <title>Angoli</title>

    <script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    
    window.addEventListener('deviceorientation', function(event) {

    var alpha = 360 - event.alpha;
    var beta = event.beta;
    var gamma = event.gamma;

    // Display Euler angles
    document.getElementById("alpha").innerHTML = "Alpha : " + alpha;
    document.getElementById("beta").innerHTML = "Beta  : " + beta;
    document.getElementById("gamma").innerHTML = "Gamma : " + gamma;

}, false);
    </script>
  </head>

  <body>
<p id="alpha">Alpha : </p><br>
<p id="beta" >Beta  : </p><br>
<p id="gamma">Gamma : </p><br>
    
  </body>
</html>


----------------------------------------------------

giovedì 14 febbraio 2013

Accelerazioni in HTML5/PhoneGap

Un esempio di come registrare le accelerazioni su un dispositivo mobile senza utilizzare le API native

In questo caso e' stata usata la libreria PhoneGap ... la stessa cosa sarebbe stata possibile anche con il solo HTML5 con il problema di dover gestire le differenti implementazioni sui differenti browsers

-----------------------------------------
<!DOCTYPE html>
<html>
  <head>
    <title>Accelerazione</title>

    <script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    document.addEventListener("deviceready", onDeviceReady, false);

    function onDeviceReady() {
    var options = { frequency: 100 };
        navigator.accelerometer.watchAcceleration(onSuccess, onError);
    }

    // onSuccess: Get a snapshot of the current acceleration
    //
    function onSuccess(acceleration) {
    
    var accx = document.getElementById('accx');
    var accy = document.getElementById('accy');
    var accz = document.getElementById('accz');
   
    accx.innerHTML = 'Accelerazione X :  '     +acceleration.x;
    accy.innerHTML = 'Accelerazione Y :  '     +acceleration.y;
    accz.innerHTML = 'Accelerazione Z :  '     +acceleration.z;
   
  
    }

    // onError: Failed to get the acceleration
    //
    function onError() {
        alert('onError!');
    }

    </script>
  </head>
  <body>
    <p id="accx">Accelerazione X : </p><br>
    <p id="accy">Accelerazione Y : </p><br>
    <p id="accz">Accelerazione Z : </p><br>

    
  </body>
</html>


-----------------------------------------

mercoledì 13 febbraio 2013

Bussola in HTML5/PhoneGap

Usando il codice del post precedente e PhoneGap e' possibile realizzare una semplice applicazione in HTML5 per visualizzare una bussola su un dispositivo mobile

Il codice per generare l'esempio e' il seguente
------------------------------------------------------------

<!DOCTYPE html>
<html>
  <head>
    <title>Bussola</title>

    <script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
    <script type="text/javascript" charset="utf-8">

var surface;
var android;
var angle = 0;

function drawCanvas() {
    surface = document.getElementById("myCanvas");

    if (surface.getContext) {
        android = new Image();
        android.onload = loadingComplete;
        android.src = "./img/compass.jpg";
    }
}

function loadingComplete(e) {
    var surfaceContext = surface.getContext('2d');
    surfaceContext.fillStyle = "rgb(255,255,255)";
    surfaceContext.fillRect(0, 0, surface.width, surface.height);
    surfaceContext.save();
    surfaceContext.translate(android.width * 0.5, android.height * 0.5);
    surfaceContext.rotate(angle* 0.0174532925199432957);
    surfaceContext.translate(-android.width * 0.5, -android.height * 0.5);
    surfaceContext.drawImage(android, 0, 0);
    surfaceContext.restore();
}


    var watchID = null;
    document.addEventListener("deviceready", onDeviceReady, false);

    function onDeviceReady() {
        bussola();
    }

    function bussola() {
        var options = { frequency: 300 };
        watchID = navigator.compass.watchHeading(onSuccess, onError, options);
    }

    function onSuccess(heading) {
        var element = document.getElementById('heading');
        element.innerHTML = 'Heading: ' + heading.magneticHeading;
angle = heading.magneticHeading;
drawCanvas();

    }

    function onError(compassError) {
        alert('Compass error: ' + compassError.code);
    }
</script>
</head>

<body onload="drawCanvas();">
<div align=center>
        <canvas id="myCanvas" width="256" height="256">
            <p>Your browser doesn't support canvas.</p>
        </canvas>
</div>
    
    <div align=center id="heading">Waiting for heading...</div>
   
  </body>
</html>

------------------------------------------------------------

Per visualizzare il comportamento dell'applicazione e' stato utilizzato Ripple


La cosa positiva e' che, essendo stata sviluppata con PhoneGap ,questa applicazione puo' essere utilizzata su Android, Iphone e molti altri dispositivi

giovedì 7 febbraio 2013

Testare PhoneGap con Ripple

Uno dei problemi maggiori di PhoneGap e' quello di non poter usare il debugger integrato nell'Android SDK in quanto tutto il codice e' Javascript

Per questo motivo puo' essere utile testare il solo codice HTML5 e PhoneGap in un ambiente esterno e la soluzione puo' essere utilizzare Ripple, una estensione per Chrome che permette questo tipo di operazione

Per prova e' stato utilizzato il codice del post precedente ed e' stato configurato un web server locale nel quale sono stati inseriti i file della cartella assets del progetto



Come si puo' vedere e' possibile simulare le accelerazioni e si osserva il programma in esecuzione come se fosse su un telefono reale

PhoneGap



PhoneGap e' un insieme di API che permette di interagire con l'hardware dei dispositivi mobile (Android, IPhone, WebOs ed altri) direttamente da HTML5 ed e' quindi sostanzialmente indipendente dal linguaggio nativo del sistema operativo di ogni telefono


Windows
installare Java JDK (non JRE)
installare Eclipse
installare Android SDK ed ADT
installare Ant
aggiungere alla path le directory platform-tools e tool dell'Android SDK
aggiungere alla path la directory bin del pacchetto ant
eseguire i comandi sottostanti
--------------------------------
C:\>set JAVA_HOME="C:\Programmi\Java\jdk1.7.0_09\bin"
C:\>set PATH=%JAVA_HOME%\bin;%PATH%
--------------------------------


Linux
in Linux (Debian Testing) l'unico problema e' relativo al fatto che stranamento ant non e' incluso in openjdk-7 ma nella versione 6 per cui deve essere scaricato il pacchetto precedente


Una volta configurato il sistema si procede andando nella directory
/phonegap/lib/android/bin
e si lancia il comando
create /directory_lavoro  com.prova.test phonegap

che creera' un nuovo progetto nella directory di lavoro.
A questo punto si apre Eclipse e si crea un nuovo progetto da Android Project From Existing code e si punta alla directory create

Il risultato sara' qualcosa di questo tipo




si vede subito che la funzione main e' piuttosto stupida in quanto crea un WebView che punta al contenuto di assets

phonegap.java
-------------------------------------------------------

public class phonegap extends DroidGap
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
    }
}
----------------------------------------------------------
quindi il codice da mofidicare e' index.html.


Nel seguente esempio ho provato a vedere il risultato dell' accelerometro
Index.html
-------------------------------------------------------

<!DOCTYPE html>
<html>
  <head>
    <title>Accelerazione</title>

    <script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    document.addEventListener("deviceready", onDeviceReady, false);

    function onDeviceReady() {
    var options = { frequency: 3000 };
        navigator.accelerometer.watchAcceleration(onSuccess, onError);
    }

    // onSuccess: Get a snapshot of the current acceleration
    //
    function onSuccess(acceleration) {
    
    var accx = document.getElementById('accx');
    var accy = document.getElementById('accy');
    var accz = document.getElementById('accz');
    
    accx.innerHTML = 'Accelerazione X :  '     +acceleration.x;
    accy.innerHTML = 'Accelerazione Y :  '     +acceleration.y;
    accz.innerHTML = 'Accelerazione Z :  '     +acceleration.z;
    
  
    }

    // onError: Failed to get the acceleration
    //
    function onError() {
        alert('onError!');
    }

    </script>
  </head>
  <body>
    <p id="accx">Accelerazione X : </p><br>
    <p id="accy">Accelerazione Y : </p><br>
    <p id="accz">Accelerazione > : </p><br>
    
  </body>
</html>
-------------------------------------------------------

Qui il risultato di 5 minuti di lavoro. I dati vengono riaggiornati ogni 3 secondi


Considerando che ci ho messo meno di 5 minuti a capire come funziona il gioco direi che e' decisamente interessante

Debugger integrato ESP32S3

Aggiornamento In realta' il Jtag USB funziona anche sui moduli cinesi Il problema risiede  nell'ID USB della porta Jtag. Nel modulo...