Rellusion - Space Apps Challenge

Rellusion| Build a Planet

Fortaleza

Team Updates

Igor Melo Gonçalo

o gigante gasoso

Igor Melo Gonçalo

Tela

Igor Melo Gonçalo

MARTE

Igor Melo Gonçalo

URL API: https://rellusion-api.herokuapp.com

URL FRONT: https://rellusion.herokuapp.com

Renan Gustavo Carvalho Menezes

	<!DOCTYPE html>
	<htmllang="pt-br">
	<head>
	<metacharset="UTF-8">
	<metaname="viewport" content="width=device-width, initial-scale=1.0">
	<metahttp-equiv="X-UA-Compatible" content="ie=edge">
	<linkrel="stylesheet" href="./css/materialize.min.css">
	<linkhref="roboto.css" rel="stylesheet">
	<scriptsrc="./js/materialize.min.js"></script>
	<linkrel="stylesheet" href="./css/animate.min.css">
	<title>Rellusion</title>
	<style>
	body{
	background:linear-gradient(#142127,#99406e ) fixed no-repeat !important;
	background-size: cover !important;
	font-family:'Roboto Mono', monospace !important;
	}
	.logo{
	width:40%;
	margin-left:28%;
	margin-top:15%;
	}
	.entrar{
	margin-left:41.5%!important;
	}
	@mediaonly screen and (max-width:768px) {
	.logo{
	width:100%;
	margin-left:-3%!important;
	margin-top:60%;
	}
	}
	</style>
	</head>
	<body>
	<divid="app">
	<divid="home">
	<divclass="row" style="margin-left: 3% !important;">
	<divclass="col s12 animated infinite bounce delay-1s">
	<imgsrc="./icons/logo.png" class="logo ">
	<br><br>
	</div>
	</div>
	<divclass="container">
	<divclass="row">
	<divclass="col s3 xl5"></div>
	<aclass="waves-effect waves-light btn purple lighten-5 black-text" href="planets.html">Acesse agora!</a>
	</div>
	</div>
	<br><br><br><br><br><br><br><br><br><br><br>
	</div>
	</div>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

	<!DOCTYPE html>

	<head>
	<metaname="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<title>Rellusion</title>
	<!-- incluindo three.js -->
	<scriptsrc='js/three.js'></script>
	<!-- incluindo jsartookit -->
	<scriptsrc="jsartoolkit5/artoolkit.min.js"></script>
	<scriptsrc="jsartoolkit5/artoolkit.api.js"></script>
	<!-- incluindo threex.artoolkit -->
	<scriptsrc="threex/threex-artoolkitsource.js"></script>
	<scriptsrc="threex/threex-artoolkitcontext.js"></script>
	<scriptsrc="threex/threex-arbasecontrols.js"></script>
	<scriptsrc="threex/threex-armarkercontrols.js"></script>
	</head>

	<bodystyle='margin : 0px; overflow: hidden;'>
	<script>

	varcena,camera,renderizador,tempo,deltaTime,tempoTotal;
	vararToolkitSource,arToolkitContext;
	varcenario;
	varplaneta;

	inicializar();
	animacao();

	functioninicializar(){
	cena=newTHREE.Scene();

	letluzAmbiente=newTHREE.AmbientLight(0xcccccc,0.5);
	cena.add(luzAmbiente);

	camera=newTHREE.Camera();
	cena.add(camera);

	renderizador=newTHREE.WebGLRenderer({
	antialias: true,
	alpha: true
	});
	renderizador.setClearColor(newTHREE.Color('lightgrey'),0)
	renderizador.setSize(640,480);
	renderizador.domElement.style.position='absolute'
	renderizador.domElement.style.top='0px'
	renderizador.domElement.style.left='0px'
	document.body.appendChild(renderizador.domElement);

	//VARIAVEIS DE ANIMAÇÃO
	tempo=newTHREE.Clock();
	deltaTime=0;
	tempoTotal=0;

	//TIPO DE ENTRADA
	arToolkitSource=newTHREEx.ArToolkitSource({
	sourceType: 'webcam',
	});

	functiononResize(){
	arToolkitSource.onResize()
	arToolkitSource.copySizeTo(renderizador.domElement)
	if(arToolkitContext.arController!==null){
	arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)
	}
	}

	arToolkitSource.init(functiononReady(){
	onResize()
	});

	//Redefine tamanho
	window.addEventListener('resize',function(){
	onResize()
	});
	//CONFIGURANDO ARTOOLKITCONTEXT
	//criando atToolkitContext
	arToolkitContext=newTHREEx.ArToolkitContext({
	cameraParametersUrl: 'data/camera_para.dat',
	detectionMode: 'mono'
	});

	// copy projection matrix to camera when initialization complete
	arToolkitContext.init(functiononCompleted(){
	camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
	});

	cenario=newTHREE.Group();
	cena.add(cenario);
	letmarca=newTHREEx.ArMarkerControls(arToolkitContext,cenario,{
	type: 'pattern',patternUrl: "data/hiro.patt",
	})

	letgeoPlaneta=newTHREE.SphereGeometry(1,32,32);

	letloader=newTHREE.TextureLoader();
	lettexturaDiretorio=loader.load('imagens/jupiter.jpg',render);
	lettexturaPlaneta=newTHREE.MeshLambertMaterial({map: texturaDiretorio,opacity: 100});

	planeta=newTHREE.Mesh(geoPlaneta,texturaPlaneta);
	planeta.position.y=1;

	cenario.add(planeta);

	//Fobos
	letpontoLum=newTHREE.PointLight(0xffffff,1,100);
	pontoLum.position.set(3,1,0.5);


	cenario.add(pontoLum);

	//Deimos
	}


	functionupdate(){
	if(cenario.visible)
	planeta.rotation.y+=0.01;
	//Atualiza a cada frame e adiciona +1 em rotação
	if(arToolkitSource.ready!==false)
	arToolkitContext.update(arToolkitSource.domElement);
	}


	functionrender(){
	renderizador.render(cena,camera);
	}


	functionanimacao(){
	requestAnimationFrame(animacao);
	deltaTime=tempo.getDelta();
	tempoTotal+=deltaTime;
	update();
	render();
	}

	</script>
	</body>
	</html>

view raw jupiter.html hosted with ❤ by GitHub

	<!DOCTYPE html>
	<htmllang="pt-br">
	<head>
	<metacharset="UTF-8">
	<metaname="viewport" content="width=device-width, initial-scale=1.0">
	<metahttp-equiv="X-UA-Compatible" content="ie=edge">
	<linkrel="stylesheet" href="./css/materialize.min.css">
	<linkhref="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">
	<scriptsrc="./js/materialize.min.js"></script>
	<linkrel="stylesheet" href="./css/animate.min.css">
	<linkhref="https://fonts.googleapis.com/icon?family=Material+Icons"
	rel="stylesheet">
	<title>Rellusion</title>
	<style>
	.body{
	background:linear-gradient(#142127,#99406e) fixed no-repeat !important;
	background-size: cover !important;
	font-family:'Roboto Slab', serif !important;
	}
	.logo{
	width:20%;
	margin-left:36%;
	margin-top:3%;
	}
	.card{
	background-color: white !important;
	}
	@mediaonly screen and (max-width:768px) {
	.logo{
	width:100%;
	margin-left:-3%!important;
	margin-top:5%;
	margin-bottom:-15%;
	}
	}

	</style>
	</head>
	<body>
	<divid="app" class="body">
	<divid="home">
	<divclass="row" style="margin-left: 3% !important;">
	<divclass="col s12">
	<ahref="index.html"><imgsrc="./icons/logo.png" class="logo "></a>
	<br><br>
	</div>
	</div>
	<divclass="row cards">
	<divclass="col s12 xl3 sm4">
	<divclass="card">
	<divclass="card-image waves-effect waves-block waves-light">
	<br>
	<divclass="container">
	<imgsrc="./icons/jupiter.png">
	</div>
	</div>
	<divclass="card-content">
	<divclass="row">
	<divclass="col s5 xl4"></div>
	<spanclass="card-title activator grey-text text-darken-4">{{planets.planetas[0].name}}<iclass="material-icons right">more_vert</i></span>
	<divclass="col s4 xl3"></div>
	<p><ahref="jupiter.html" class="waves-effect waves-light btn white-text pink lighten-2">acessar AR</a></p>
	</div>
	</div>
	<divclass="card-reveal">
	<spanclass="card-title grey-text text-darken-4">Informações<iclass="material-icons right">close</i></span>
	<p>Distância do sol: {{planets.planetas[0].dfs}} Km</p>
	<p>Tempo de luz unidirecional para o sol: {{planets.planetas[0].lSun}}</p>
	<p>Duração do ano: {{planets.planetas[0].loy}}</p>
	<p>Tipo de planeta: {{planets.planetas[0].planetT}}</p>
	<p>Data do dia: {{planets.planetas[0].date}}</p>
	</div>
	</div>
	</div>
	<divclass="col s12 xl3 sm4">
	<divclass="card">
	<divclass="card-image waves-effect waves-block waves-light">
	<br>
	<divclass="container">
	<imgsrc="./icons/terra.png">
	</div>
	</div>
	<divclass="card-content">
	<divclass="row">
	<divclass="col s5 xl4"></div>
	<spanclass="card-title activator grey-text text-darken-4">{{planets.planetas[1].name}}<iclass="material-icons right">more_vert</i></span>
	<divclass="col s4 xl3"></div>
	<p><ahref="#" class="waves-effect waves-light btn white-text pink lighten-2">acessar AR</a></p>
	</div>
	</div>
	<divclass="card-reveal">
	<spanclass="card-title grey-text text-darken-4">Informações<iclass="material-icons right">close</i></span>
	<p>Distância do sol: {{planets.planetas[1].dfs}} Km</p>
	<p>Tempo de luz unidirecional para o sol: {{planets.planetas[1].lSun}}</p>
	<p>Duração do ano: {{planets.planetas[1].loy}}</p>
	<p>Tipo de planeta: {{planets.planetas[1].planetT}}</p>
	<p>Data do dia: {{planets.planetas[1].date}}</p>
	</div>
	</div>
	</div>
	<divclass="col s12 xl3 sm4">
	<divclass="card">
	<divclass="card-image waves-effect waves-block waves-light">
	<br>
	<divclass="container">
	<imgsrc="./icons/marte.png">
	</div>
	</div>
	<divclass="card-content">
	<divclass="row">
	<divclass="col s5 xl4"></div>
	<spanclass="card-title activator grey-text text-darken-4">{{planets.planetas[2].name}}<iclass="material-icons right">more_vert</i></span>
	<divclass="col s4 xl3"></div>
	<p><ahref="marte.html" class="waves-effect waves-light btn white-text pink lighten-2">acessar AR</a></p>
	</div>
	</div>
	<divclass="card-reveal">
	<spanclass="card-title grey-text text-darken-4">Informações<iclass="material-icons right">close</i></span>
	<p>Distância do sol: {{planets.planetas[2].dfs}} Km</p>
	<p>Tempo de luz unidirecional para o sol: {{planets.planetas[2].lSun}}</p>
	<p>Duração do ano: {{planets.planetas[2].loy}}</p>
	<p>Tipo de planeta: {{planets.planetas[2].planetT}}</p>
	<p>Data do dia: {{planets.planetas[2].date}}</p>
	</div>
	</div>
	</div>
	<divclass="col s12 xl3 sm4">
	<divclass="card">
	<divclass="card-image waves-effect waves-block waves-light">
	<br>
	<divclass="container">
	<imgsrc="./icons/venus.png">
	</div>
	</div>
	<divclass="card-content">
	<divclass="row">
	<divclass="col s5 xl4"></div>
	<spanclass="card-title activator grey-text text-darken-4">{{planets.planetas[3].name}}<iclass="material-icons right">more_vert</i></span>
	<divclass="col s4 xl3"></div>
	<p><ahref="venus.html" class="waves-effect waves-light btn white-text pink lighten-2">acessar AR</a></p>
	</div>
	</div>
	<divclass="card-reveal">
	<spanclass="card-title grey-text text-darken-4">Informações<iclass="material-icons right">close</i></span>
	<p>Distância do sol: {{planets.planetas[3].dfs}} Km</p>
	<p>Tempo de luz unidirecional para o sol: {{planets.planetas[3].lSun}}</p>
	<p>Duração do ano: {{planets.planetas[3].loy}}</p>
	<p>Tipo de planeta: {{planets.planetas[3].planetT}}</p>
	<p>Data do dia: {{planets.planetas[3].date}}</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	<br><br><br><br>
	</div>

	<scriptsrc="./js/vue.js"></script>
	<scriptsrc="./js/axios.min.js"></script>
	<script>
	varvm=newVue({
	el:'#app',
	data(){
	return{
	planets:'',
	}
	},
	mounted(){
	axios
	.get('http://rellusion-api.herokuapp.com')
	.then(response=>this.planets=response.data)
	.catch(error=>console.log(error))
	}
	})
	</script>
	</body>
	</html>

view raw planets.html hosted with ❤ by GitHub

Renan Gustavo Carvalho Menezes

	fromflaskimportFlask, request
	fromflask_restfulimportResource, Api
	frompymongoimportMongoClient
	fromflask_corsimportCORS

	app=Flask(__name__)
	api=Api(app)
	CORS(app)

	client=MongoClient("DataBase URL")
	db=client.get_database('nasa')
	records=db.planets

	classDataPlanets(Resource):
	defget(self):
	planets=list(records.find())
	print(planets)
	forplanetinplanets:
	delplanet["_id"]
	return {"planetas":planets}

	classDataPlanet(Resource):
	defget(self, planet_name):
	planet=records.find_one({"name":planet_name})
	delplanet["_id"]
	return {"planeta":planet}

	api.add_resource(DataPlanets, "/")
	api.add_resource(DataPlanet, "/<string:planet_name>")

	if__name__=='__main__':
	app.run(debug=True)

view raw api.py hosted with ❤ by GitHub

Renan Gustavo Carvalho Menezes