From 28cba47f3669e06892de8e441b79c5ed9d74c91f Mon Sep 17 00:00:00 2001 From: Siroco Date: Sun, 16 Sep 2018 23:18:31 +0200 Subject: [PATCH] =?UTF-8?q?Pagina=20de=20inicio=20y=20interacci=C3=B3n=20p?= =?UTF-8?q?ara=20acceder=20al=20mapa=20y=20al=20streaming?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.component.css | 38 +++++++++++- src/app/app.component.html | 22 ++++++- src/app/app.component.ts | 14 +++++ src/app/app.module.ts | 6 +- src/app/app.service.spec.ts | 15 +++++ src/app/app.service.ts | 23 ++++++++ src/app/fade.animation.ts | 36 ++++++++++++ src/app/map-box/map-box.component.ts | 58 +++++++++---------- src/app/messages/messages.component.css | 18 ++++++ src/app/messages/messages.component.html | 6 ++ src/app/messages/messages.component.spec.ts | 25 ++++++++ src/app/messages/messages.component.ts | 17 ++++++ .../soinu-progress.component.css | 2 +- .../soinu-progress.component.html | 2 +- 14 files changed, 247 insertions(+), 35 deletions(-) create mode 100644 src/app/app.service.spec.ts create mode 100644 src/app/app.service.ts create mode 100644 src/app/fade.animation.ts create mode 100644 src/app/messages/messages.component.css create mode 100644 src/app/messages/messages.component.html create mode 100644 src/app/messages/messages.component.spec.ts create mode 100644 src/app/messages/messages.component.ts diff --git a/src/app/app.component.css b/src/app/app.component.css index b62277e..9b28799 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -1,3 +1,7 @@ + + +header { max-height:500px; overflow:hidden;} + soinu-progress { margin: auto; float: left; @@ -6,5 +10,37 @@ soinu-progress { margin-top: 5%; } -map-box { +section { max-width:500px; margin:auto; margin-top:50px;} +section p { font-family: 'Raleway', sans-serif; color:#000;text-align:left; font-size:0.9em; line-height:1.5em; color:#000;} +section h1, h2 { font-size:2em; font-weight:200; font-family: 'Oswald', serif; color:#877474; text-align:right;} + +section a { color:#efa775; font-weight:bold; cursor:pointer; text-decoration:none;} +nav button { + border: solid #666 2px; + padding: 10px; + width: 30%; + background: transparent; + color: #333; + font-family: Raleway; + font-size: 1em; + font-weight: bold; + cursor:pointer; + transition-duration:1s; } + +nav button:hover { + border: solid #efa775 2px; + color:#fff; + background:#efa775; +} + +footer { margin-top:50px; text-align:center; } +footer ul { list-style:none; padding:0; margin:auto; width:90%;} +footer ul li { float:left; padding:10px;} +footer ul li img { transition-duration:1s; max-height:25px; filter:grayscale(1); } +footer ul li img:hover { filter:grayscale(0);} + + +map-box {} + +app-messages { position:fixed; z-index:100; left:0; top:0; } diff --git a/src/app/app.component.html b/src/app/app.component.html index 3170eae..0c8e996 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,3 +1,21 @@ + +
+ +
+
+

Construir a través del oído

+

El objetivo de Landarte 2018, el programa de arte y ruralidad de la Dirección General-Institución Príncipe de Viana,, es desarrollar un mapa sonoro de Sartaguda que pueda proyectarse tanto en el parque de la memoria como en otros espacios de localidad. Los encargados de guiar al vecindario en la realización de esta peculiar obra de arte es el artista sonoro Xabier Erkizia y Luca Rullo, de la asociación AUDIOLAB.

+ +
+
    +
  • Gobierno de Navarra
    • +
  • Ayuntamiento de Sartaguda
    • +
  • Audiolab
    • +
  • Red Tramontana
    • +
+
+
- - diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 65c5977..19f1615 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { AppService } from './app.service'; @Component({ selector: 'app-root', @@ -8,4 +9,17 @@ import { Component } from '@angular/core'; export class AppComponent { title = 'Sartaguda suena'; isMap = false; + + constructor(public appService: AppService) { } + + showMap() { + this.isMap = true; + this.appService.add('Bienvenido al mapa de sonidos de Sartaguda.',true); + } + + listenStream() { + let streamMessage = "

Escucha en directo lo que suena en Sartaguda

" + this.appService.add(streamMessage) + } + } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 08753fa..f8e7631 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -2,23 +2,27 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { MapService } from './map.service'; +import { AppService } from './app.service'; import { AppComponent } from './app.component'; import { MapBoxComponent } from './map-box/map-box.component'; import { SoinuProgressComponent } from './soinu-progress/soinu-progress.component'; +import { MessagesComponent } from './messages/messages.component'; @NgModule({ declarations: [ AppComponent, MapBoxComponent, - SoinuProgressComponent + SoinuProgressComponent, + MessagesComponent ], imports: [ BrowserModule ], providers: [ MapService, + AppService ], bootstrap: [AppComponent] }) diff --git a/src/app/app.service.spec.ts b/src/app/app.service.spec.ts new file mode 100644 index 0000000..741d9d2 --- /dev/null +++ b/src/app/app.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { AppService } from './app.service'; + +describe('AppService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [AppService] + }); + }); + + it('should be created', inject([AppService], (service: AppService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/src/app/app.service.ts b/src/app/app.service.ts new file mode 100644 index 0000000..2a77841 --- /dev/null +++ b/src/app/app.service.ts @@ -0,0 +1,23 @@ +import { Injectable } from '@angular/core'; + +@Injectable() +export class AppService { + + messages: string[] = []; + acceptCookies: boolean = false; + audioStreamingUrl = "http://irratia.zintzilik.net"; + button: boolean = false; + + constructor() {} + + add(message: string, button:boolean = false) { + this.messages.push(message); + this.button=button; + } + + clear() { + this.messages = []; + this.acceptCookies = true; + } + +} diff --git a/src/app/fade.animation.ts b/src/app/fade.animation.ts new file mode 100644 index 0000000..1893bc7 --- /dev/null +++ b/src/app/fade.animation.ts @@ -0,0 +1,36 @@ +// fade.animation.ts + +import { trigger, animate, transition, style, query } from '@angular/animations'; + +export const fadeAnimation = + + trigger('fadeAnimation', [ + + transition( '* => *', [ + + query(':enter', + [ + style({ opacity: 0 }) + ], + { optional: true } + ), + + query(':leave', + [ + style({ opacity: 1 }), + animate('0.2s', style({ opacity: 0 })) + ], + { optional: true } + ), + + query(':enter', + [ + style({ opacity: 0 }), + animate('0.2s', style({ opacity: 1 })) + ], + { optional: true } + ) + + ]) + + ]); diff --git a/src/app/map-box/map-box.component.ts b/src/app/map-box/map-box.component.ts index 59689df..2395aba 100644 --- a/src/app/map-box/map-box.component.ts +++ b/src/app/map-box/map-box.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import * as mapboxgl from 'mapbox-gl'; import { MapService } from '../map.service'; +import { AppService } from '../app.service'; import { GeoJson, FeatureCollection} from '../map'; @Component({ @@ -22,7 +23,10 @@ export class MapBoxComponent implements OnInit { markers: any; hoverid: null; - constructor( private mapService: MapService) { } + constructor( + private mapService: MapService, + public appService: AppService + ) { } ngOnInit() { this.initializeMap() @@ -52,7 +56,6 @@ export class MapBoxComponent implements OnInit { let clusterId = features[0].properties.cluster_id; this.map.getSource('soinumapa').getClusterExpansionZoom(clusterId, (err,zoom) => { if (err) return - console.log(zoom) this.map.easeTo({ center: features[0].geometry.coordinates, zoom: zoom @@ -63,8 +66,12 @@ export class MapBoxComponent implements OnInit { this.map.on('click','soinumapa', (event) => { const coordinates = [event.lngLat.lng, event.lngLat.lat] const newMarker = new GeoJson(coordinates, { message : 'new marker' }) - //console.log(newMarker) - alert(event.features[0].properties.message) + let content = event.features[0].properties.content + let title = event.features[0].properties.title + let url = event.features[0].properties.url + let info = "

"+title+"

"+content + this.appService.clear() + this.appService.add(info) }) this.map.on('mouseenter',"clusters", (event) => { @@ -89,35 +96,28 @@ export class MapBoxComponent implements OnInit { }); this.map.on('load',(event) => { - + + let feed = "http://www.soinumapa.net/geojson/" + this.map.addSource('soinumapa', { type: 'geojson', + //data: feed, data: '/assets/soinumapa.geojson', cluster:true, clusterMaxZoom: 30, clusterRadius: 50 }) - - /* - this.map.addSource('soinumapa', { - type: 'geojson', - data: { - type: 'FeatureCollection', - features: [] - } - }); - */ - - this.source = this.map.getSource('soinumapa') - - /* - this.markers.subscribe(markers => { - let data = new FeatureCollection(markers) - this.source.setData(data) - }) - */ - + + /*mapboxgl.util.getJSON(feed, (err,data) => { + this.map.addSource('soinumapa', { + type:'geojson', + data: data, + cluster:true, + clusterMaxZoom:30, + clusterRadius: 50 + })*/ + this.map.addLayer({ id: "clusters", type: "circle", @@ -132,9 +132,9 @@ export class MapBoxComponent implements OnInit { "circle-color": [ "step", ["get", "point_count"], - "#51bbd6", + "#ff6968", 100, - "#f1f075", + "#efeec2", 750, "#f28cb1" ], @@ -184,8 +184,8 @@ export class MapBoxComponent implements OnInit { } }) - }) - + }) //load image + //}) // load feed }) } diff --git a/src/app/messages/messages.component.css b/src/app/messages/messages.component.css new file mode 100644 index 0000000..7b51123 --- /dev/null +++ b/src/app/messages/messages.component.css @@ -0,0 +1,18 @@ +div.messages-container { + width:100px; + min-width:200px; + min-height:50px; + background:rgba(0,0,0,0.8); + border:#fff solid 0px; + margin:20px; + color:#fff; + padding:30px 10px; + font-size:0.8em; +} + +h1 { font-size:1em; } + +button { font-family:'Raleway',sans-serif; background:transparent; padding:5px; width:100%; color:#fff; border:#fff solid 2px;} +button:hover {background:#fff;color:#000;cursor:pointer;} +audio { max-width:90%; margin:auto;} +.simple-audioplayer { width:100% !important;max-width:90%;} diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html new file mode 100644 index 0000000..be66584 --- /dev/null +++ b/src/app/messages/messages.component.html @@ -0,0 +1,6 @@ +
+
+

+ +
+
diff --git a/src/app/messages/messages.component.spec.ts b/src/app/messages/messages.component.spec.ts new file mode 100644 index 0000000..66109cc --- /dev/null +++ b/src/app/messages/messages.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MessagesComponent } from './messages.component'; + +describe('MessagesComponent', () => { + let component: MessagesComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MessagesComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MessagesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts new file mode 100644 index 0000000..426741d --- /dev/null +++ b/src/app/messages/messages.component.ts @@ -0,0 +1,17 @@ +import { Component, OnInit } from '@angular/core'; +import { AppService } from '../app.service'; + +@Component({ + selector: 'app-messages', + templateUrl: './messages.component.html', + styleUrls: ['./messages.component.css'] +}) +export class MessagesComponent implements OnInit { + + constructor(public appService: AppService) { } + + ngOnInit() { + this.appService.add('Esta página contiene cookies para la mejora de la interactividad con el usuario. Contacto con nosotros para cualquier duda. Buena escucha',true); + } + +} diff --git a/src/app/soinu-progress/soinu-progress.component.css b/src/app/soinu-progress/soinu-progress.component.css index cb0aa09..aae75c6 100644 --- a/src/app/soinu-progress/soinu-progress.component.css +++ b/src/app/soinu-progress/soinu-progress.component.css @@ -12,7 +12,7 @@ animation: hideshow 10s 1.5s ease infinite; animation: hideshow 10s 3s ease infinite; } -.soinuwave { animation: moveX 100s ease infinite; } +.soinuwave { } @keyframes hideshow { 0% { opacity:0; } diff --git a/src/app/soinu-progress/soinu-progress.component.html b/src/app/soinu-progress/soinu-progress.component.html index ace9f25..7272722 100644 --- a/src/app/soinu-progress/soinu-progress.component.html +++ b/src/app/soinu-progress/soinu-progress.component.html @@ -196,6 +196,6 @@ style="fill:#ffffff;stroke-width:0.35700428" /> -
+