I'm developing a web app for my social service, my problem is that i need to read a text file that is actually an html file that is in my local folder.
In that file i need to find some values and change them to the ones i have selected in my app.
The main objective for my app is to change the images that one project uses to the ones selected on my app and i want to just read the html file and update the "src" values of the html to the ones the user have selected on my app.
I havent found something similar to what i want to and the ones that i tried im having trouble understanding it or it wont work.
This is the html that i want to read and change some values
<!DOCTYPE html>
<html>
<head>
<title>Escenario Virtual de Imagenes</title>
<script src="js/aframe.min.js"></script>
<script>
var json_str = getCookie('mycookie');
var arr = JSON.parse(json_str);
//variables de estimulos dentro del arreglo de secuencias//
var neutro='img/negro.png';
var instruccionesImagenes='img/Imagenes_instrucciones.png';
var imagen1='img/1.jpg'; <--- i want to change this number of the path of all.
var imagen2='img/2.jpg';
var imagen3='img/3.jpg';
var imagen4='img/4.jpg';
var imagen5='img/5.jpg';
var imagen6='img/6.jpg';
var imagen7='img/7.jpg';
var imagen8='img/8.jpg';
var imagen9='img/9.jpg';
var imagen10='img/10.jpg';
var imagen11='img/11.jpg';
var imagen12='img/12.jpg';
var imagen13='img/13.jpg';
var imagen14='img/14.jpg';
var imagen15='img/15.jpg';
var imagen16='img/16.jpg';
var imagen17='img/17.jpg';
var imagen18='img/18.jpg';
var imagen19='img/19.jpg';
var imagen20='img/20.jpg';
var evaluacion='img/sam.png';
var bienvenida='img/inicio.png';
var imagenes=new Array([bienvenida],['img/OC.png'],['img/instruccion2.png'],['img/OA.png'],[neutro],[instruccionesImagenes],[imagen1],[imagen2],[imagen3],[imagen4],[imagen5],[evaluacion],[neutro],[imagen6],[imagen7],[imagen8],[imagen9],[imagen10],[evaluacion],[neutro],[imagen11],[imagen12],[imagen13],[imagen14],[imagen15],[evaluacion],[neutro],[imagen16],[imagen17],[imagen18],[imagen19],[imagen20],[evaluacion],['img/finalizar.png']);
////////////////////////////////////////////////////////////////////////////////////////////
// * Funcion para cambiar la imagen
var imagen = 0;//contador de cambio de posicion
function cambiar()
{
if(imagen < imagenes.length)
{
document.querySelector('a-image').setAttribute('src', imagenes[imagen]);
if (imagenes[imagen]==neutro)
{
setTimeout("cambiar()", 30000);//si la imagen del array es neutro entonces que solo pase 15 segundos
document.getElementById('sonido').setAttribute('sound', 'src', 'narrativas/relax.mp3' );
}else if (imagenes[imagen]==bienvenida)
{
setTimeout("cambiar()", 13000);
//document.getElementById('sonido').setAttribute('sound', 'src', 'narrativas/1.mp3' );
} else if (imagenes[imagen]==instruccionesImagenes)
{
setTimeout("cambiar()", 15000);//si la imagen del array es evaluacion entonces que solo pase 10 segundos
//document.getElementById('sonido').setAttribute('sound', 'src', 'narrativas/5.mp3' );
// TODO colocar imagene de instruccuiones
}
else if (imagenes[imagen]==evaluacion)
{
setTimeout("cambiar()", 15000);//si la imagen del array es evaluacion entonces que solo pase 10 segundos
document.getElementById('sonido').setAttribute('sound', 'src', 'narrativas/evaluacion.mp3' );
} else if (imagenes[imagen]=='img/OC.png') //si la imagen del array es ojos cerrados entonces que recorra el time a 2 minutos
{
document.getElementById('sonido').setAttribute('sound', 'src', 'narrativas/2.mp3' );
setTimeout("cambiar()", 70000);
}
else if (imagenes[imagen]=='img/instruccion2.png')//si la imagen del array es la instruccion ojos abiertos entonces que recorra el time a 7 segundos
{
document.getElementById('sonido').setAttribute('sound', 'src', 'narrativas/3.mp3' );
setTimeout("cambiar()", 15000)
}
else if (imagenes[imagen]=='img/OA.png') //si la imagen del array es ojos abiertos entonces que recorra el time a 2 minutos
{
document.getElementById('sonido').setAttribute('sound', 'src', 'narrativas/4.mp3' );
setTimeout("cambiar()", 60000);
}else if (imagenes[imagen]=='img/finalizar.png')
{
document.getElementById('sonido').setAttribute('sound', 'src', 'narrativas/8.mp3' );
}
else//si la imagen del array es la foto 1.2.3.4.5 entonces que recorra el time a 30 segundos
{
//document.getElementById('sonido').setAttribute('sound', 'src', 'sound/music.webm' );
setTimeout("cambiar()", 15000);//15 segundos iaps
}
imagen=imagen+1;
}
}
/**
* Función que se ejecuta una vez cargada la página
*/
onload=function()
{
//setTimeout("", 30000);
cambiar();
}
</script>
</head>
<body>
<a-scene >
<!--controles leapmotion-->
<a-entity camera="near: 0.01" look-controls >
<a-entity leap-hand="hand: left;"></a-entity>
<a-entity leap-hand="hand: right;"></a-entity>
</a-entity>
<!--cursor-->
<a-sky src="img/cielo.png" ></a-sky>
<!--<a-light type="ambient" color="#222"></a-light>
piso del entorno virtual-->
<a-circle color="black" material="opacity:0.2" radius="60" position="0 -10 0" rotation="-90 0 0" ></a-circle>
<!--Voz de Recomendador-->
<!--
<a-entity id="play" geometry="primitive: circle" material="color: yellow" position="-10 3 0" sound="src: sound/music.webm; volume:0.89 ; on: click" ></a-entity>
<a-entity cursor-listener geometry="primitive: circle" material="color: black" position="10 3 0" ></a-entity>
-->
<!--musica de inicio-->
<a-entity id="sonido" geometry="primitive: circle" material="color: yellow " position="-3 30 0" sound="src: 'sound'; volume:5;autoplay:true " >
</a-entity>
<!--pantalla donde se muestran las imagenes-->
<a-image src=" " height="8" width="15" position="0 2 -8" rotation="0 0 0" ></a-image>
</a-scene>
</body>
</html>
So the result that i need is to change the values of the src for it to change to the images that the user wants. Thank you in advance ive been stuck on this for 1 month and im really stressed about it because im not so good at coding.
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire