Passa ai contenuti principali

come importare il JSON file in appybuilder per fare le app

Sito per costruire app: http://gold.appybuilder.com

Chiamata GET come riferimento per osservare il file JSON da processare:
https://www.overpass-api.de/api/interpreter?data=[out:json];node[natural=tree](45.36386820715566,9.692811369895935,45.36502340932776,9.69470500946045);out%20meta;

Per "visualizzarlo", andare qui e copiarlo dentro: https://vanya.jp.net/vtree/

Preparare un Bottone (Button1) e un Web (Web1) nell'interfaccia utente.
Nei blocchi costruire il GET del JSON file così (l'URL è quello indicato prima)
Poi inserire il blocco che gestisce il file che arriva dalla Rete. Per ora predisporre delle Label per capire come funziona la logica:


Lat e Lon verranno poi usate per definire (e piazzare) i marker sulla Map1 (da inserire nella interfaccia Utente).



Occorre apprendere il concetto di lista e lista di liste.

Infatti il blocco fondamentale prende un JSON e lo trasforma in una lista di liste  (vedere cosa arriva nella Label3 per capirci, i delimitatori sono le parentesi tonde):






Questo unico elemento è a sua volta una lista , fatta di quattro items:
 elements , generator, osm3s e version .

Si estrarrà il primo, quello con indice 1, perché lì ci sono i dati che interessano.

Prendiamo il secondo elemento (quindi indice 2) , cioè il resto.

Il resto è una lista di 13 elementi, gli alberi.
Ogni elemento è una lista (da 10 elementi in particolare) a sua volta : estraiamo nell'esempio il secondo elemento, quello che inizia con (changeset 76247509) per intenderci.

Infine, per cambiare un po', sfruttiamo la possibilità di estrarre info con il blocco "look up in pairs", così è più leggibile.

Una volta capita la struttura delle liste di liste si può procedere al ciclo for che crea i marker sulla Map1 (figura precedente), uno per ognuno dei 13 alberi:


PS: altro modo di accedere usando il numero solo per distinguere gli items, per il resto solo usando lookupinpairs:



file sorgente (.aia) sperimentale:
https://drive.google.com/file/d/1YVfxU5bzDuy-BiJZaV7JfcT_CsXU53mf/view?usp=sharing

nel prossimo post del blog : uso di una estensione di appinventor.

appendice
Notare lo scambio elementi lista principale fra JSON e app:
{
  "version": 0.6,
  "generator": "Overpass API 0.7.55.1009 5e627b63",
  "osm3s": {
    "timestamp_osm_base": "2019-11-12T20:49:02Z",
    "copyright": "The data included in this document is from www.openstreetmap.org. The data is made available under ODbL."
  },
  "elements": [

{
  "type": "node",
  "id": 6875887073,
  "lat": 45.3646829,
  "lon": 9.6932692,
  "timestamp": "2019-10-26T16:34:06Z",
  "version": 2,
  "changeset": 76247509,
  "user": "luca scandelli",
  "uid": 1786966,
  "tags": {
    "diameter": "60cm",
    "leaf_cycle": "evergreen",
    "leaf_type": "needleleaved",
    "natural": "tree",
    "species:wikidata": "Q623489",
    "species:wikipedia": "it:Cedrus atlantica"
  }
},
..........
{
  "type": "node",
  "id": 6960043944,
  "lat": 45.3640026,
  "lon": 9.6947031,
  "timestamp": "2019-11-09T14:07:25Z",
  "version": 1,
  "changeset": 76845103,
  "user": "luca scandelli",
  "uid": 1786966,
  "tags": {
    "denotation": "urban",
    "leaf_cycle": "deciduous",
    "leaf_type": "broadleaved",
    "natural": "tree",
    "species:wikidata": "Q43284",
    "species:wikipedia": "it:Ginkgo biloba"
  }
}

  ]
}

lista di liste:
(
(elements
(
(
(changeset 76247509)
(id 6875887073)
(lat 45.36468)
(lon 9.69327)
(tags
(
(diameter 60cm)
(leaf_cycle evergreen)
(leaf_type needleleaved)
(natural tree)
(species:wikidata Q623489)
(species:wikipedia it:Cedrus atlantica)
)
)
(timestamp 2019-10-26T16:34:06Z)
(type node)
(uid 1786966)
(user luca scandelli)
(version 2)
)

......
(
(changeset 76845103)
(id 6960043944)
(lat 45.364)
(lon 9.6947)
(tags
(
(denotation urban)
(leaf_cycle deciduous)
(leaf_type broadleaved)
(natural tree)
(species:wikidata Q43284)
(species:wikipedia it:Ginkgo biloba)
)
)
(timestamp 2019-11-09T14:07:25Z)
(type node)
(uid 1786966)
(user luca scandelli)
(version 1)
)
)
)
(generator Overpass API 0.7.55.7 8b86ff77)
(osm3s
(
(copyright The data included in this document is from www.openstreetmap.org. The data is made available under ODbL.)
(timestamp_osm_base 2019-11-13T19:41:02Z)
)
)
(version 0.6)
)



Commenti

Post popolari in questo blog

Consegne a domicilio per persone in difficoltà durante l’emergenza COVID-19: creare una mappa con Umap e dati OpenStreetMap

(by Sale , Wordpress) Durante queste settimane di emergenza COVID-19, molti comuni si sono attivati per fornire informazioni e servizi aggiuntivi a supporto dei cittadini. In particolare, alcuni servizi di consegna a domicilio sono stati attivati appositamente per questa emergenza e in special modo per chi è più in difficoltà e per i generi alimentari e di prima necessità. Non sono dunque servizi di consegne a domicilio pensati per tutti indistintamente, ma espressamente per anziani e per le persone che hanno difficoltà a spostarsi. Spesso le informazioni sono presenti solamente in forma di elenco testuale, con nome dell’esercizio, indirizzo e numero di telefono. Questa breve guida vuole illustrare il procedimento ed eventualmente permettere ad altri di ricreare una mappa simile per il proprio comune.
EDIT 19 aprile 2020: openstreetmap ha creato un form per facilitare l'inserimento di attività commerciali  inclusivo dell'informazione consegne domicilio per covid19
ESTRATTO dal…

UMAP: mappare con fotografie nel popup

Premessa: come esempio non userò alberi perché non ho il tempo di uscire , ma foto di Crema del passato prese da Gruppi facebook.

I dati saranno messi in un Google Sheet:
ogni riga un segnaposto sulla mappa
ogni colonna una proprietà del segnaposto della mappa

per il tutorial di un prof per alunni delle medie, vedere qui:  https://sites.google.com/view/lucascalzullo/tutorial/umap 

Cosa serve modificare nel LAYER della mappa?

1. La cosa che si vuol far apparire quando il mouse passa sopra il segnaposto (in questo caso l'autore )


2. l'elenco delle colonne da importare nel popup , okkio al numero di parentesi graffe: 3 per le foto

le possibilità sono:
*asterisco per l'italico*
**due asterischi per il testo marcato**
# un cancelletto per l'intestazione principale
## due cancelletti per le intestazioni di secondo livello
### tre cancelletti per intestazione di terzo livello
Link semplice: [[http://example.com]]
Link con testo: [[http://example.com|testo del link]]
Immagini: {{{http:…

Vista su mappa livelli ossigeno ESP8266+MAX30102

Appunti sparsi per non dimenticare. (da completare)
EDIT: qui link a progetto completo  https://medicitriuggio.altervista.org/come-costruire-in-casa-un-saturimetro/

Medici e infermieri scarseggiano durante le epidemie e riducono la frequenza di visita perché i malati sono troppi e loro stessi si ammalano. Inoltre molti restano senza dispositivi di protezione individuale, così  si ammalano e sono sempre di meno.

Idealmente se avessero una mappa in cui i loro pazienti fossero evidenziati con i valori di saturazione ossigeno, potrebbero fare il giro-visite in modo mirato.

risolutore algo commesso viaggiatore : https://www.graphhopper.com

wiki esp8266
esp8266 datasheet


principio di funzionamento



datasheet max30102

low cost shields:


SpO2 can be calculated
R = (AC RMS of Red / DC of Red)/ (AC RMS of IR / DC of IR)
SpO2 is a percentage value. Using the R value you can calculate the %SpO2
% SpO2= 110 – 25 × R
AC RMS is the RMS value of voltage difference between peak and trough of the RED/IR waveform…