Autor Tema: [ayuda]: Funcion para descifrar una cadena de texto y obtener valores  (Leído 1718 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado 0rion

  • Trade Count: (0)
  • MiembrosReales
  • *
  • Thank You
  • -Given: 7
  • -Receive: 0
  • Mensajes: 46
Buenas communiters, el dia de hoy necesito que alguien me ayuden con dos problemitas que tengo con una funcion que estoy construyendo, la funcion en si, requiere recibir como parametro una cadena de texto que representa una funcion -webkit-gradient() que es utilizada por los naveradores webkit como google crhome para crear imagenes de degradados que se ponen en el atributo background-image del style de un objeto HTML. La cadena a procesar es mas o menos asi:
Código: [Seleccionar]
-webkit-gradient(radial, 50% 33%, 1, 50% 33%, 180, from(rgb(255, 187, 51)), color-stop(0.49, rgb(255, 46, 0)), color-stop(0.51, rgb(255, 106, 0)), to(rgba(255, 255, 255, 0)))Lo que necesito obtener de la cadena es:
- el tipo, que para este caso es radial (si el tipo es lineal, no hay un valor radio despues de cada par de coordenadas)
- los valores x0 y y0 (coordenadas) que son los porcentajes que estan despues del tipo y su radio (si esta presente), que es un numero que los precede
- los valores x1 y y1 (coordenadas) que son los porcentajes que estan despues de x0 y y0  y su radio (si esta presente), que es un numero que los precede
- el color que esta dentro de la funcion from
- el color que esta dentro de la funcion to
- el valor y el color que esta dentro de cada funcion color-stop

Ahora que mis dos problemas son, que los colores estan expresados en rgb o rgba, ya que es asi como los computa el navegador, y yo los necesito en hsla, el otro problema es que la cantidad de funciones color-stop es variable, pueden ser 0 o mas. de no ser por estos dos problemas la funcion estaria a mi alcance en conocimientos, pero no tengo ni idea de como convertir rgb o rgba a hsla y tampoco se por donde empezar con lo de los color-stop, si alguien tiene alguna idea se lo agradeceria, si necesitan ver la herramienta para hacer degradados que estoy creando, se las posteo aqui, no es muy largo el codigo y es un html que deben abrir con google crhome o safari, pero en safari no lo he probado y no se si funcione bien.
Código: [Seleccionar]
<!doctype html>
<html>
    <head>
        <title>Degradado</title>
        <meta charset=UTF-8 />
        <style>
            form{width:1000px;display:table;margin:1em auto;}
            img{
              border:1px solid black;
              border-radius:5px;width: 25px;height: 25px;
              cursor:pointer;
            }
            img[id=stopMas]{background-image: -webkit-gradient(radial, 50% 50%, 1, 50% 50%, 16, from(hsla(0,100%,0%,1)), to(hsla(180, 50%, 0%, 1)), color-stop(50%, hsla(180, 0%, 0%, 0)));}
            img[id=stopMenos]{background-image: -webkit-gradient(radial, 50% 50%, 1, 50% 50%, 8, from(hsla(0,100%,0%,1)), to(hsla(180, 50%, 0%, 1)), color-stop(50%, hsla(180, 0%, 0%, 0)));}
            .left{width:550px;float:left;display:inline;margin-right:5px;}
            .right{width:410px;display:inline;}
            .control{display:table-row}
            .lorem{
                position:fixed;display:inline;width:390px;margin: 0px auto auto 5px;
                font:normal normal normal 15px/normal 'arial';
            }
            .left label{
                display:table-cell;width:75px;position:relative;
                font:normal normal normal 15px/normal 'arial';
            }
            .dosPorFila label{padding-left:15px;width:auto;}
            input[type=radio]{display:table-cell;}
            input[type=range]{
                display:table-cell;width:420px;position:relative;margin:auto 0px auto 30px;
            }
            input[type=text]{
                display:table;width:400px;
            }
            label.muestras{border:1px solid black;}
            p[id=degradado]{
                display: table;margin:auto;
                border: 1px solid black;
                font: normal normal normal 15px/normal 'arial';
            }
            div[id=preview]{
                border:1px solid black;position:relative;display:table;width:405px;height:405px;margin:0px auto auto 0px;z-index:1;
                background-image:-webkit-gradient(linear, 0% 100%, 0% 0%, from(hsla(0, 100%, 0%, 1)), to(hsla(180, 50%, 100%, 0)));
            }
        </style>
        <script>
            window.onload = function(){
                document.getElementById("t1").onclick = cambiarPuntos;
                document.getElementById("t2").onclick = cambiarPuntos;
                document.getElementById("salida1").onclick = cambiarSalida;
                document.getElementById("salida2").onclick = cambiarSalida;
                document.getElementById("texto1").onclick = texto;
                document.getElementById("texto2").onclick = texto;
                document.getElementById("c1").onclick = tomarColor;
                document.getElementById("c2").onclick = tomarColor;
                document.getElementById("h").onchange = controlHSLA;
                document.getElementById("s").onchange = controlHSLA;
                document.getElementById("l").onchange = controlHSLA;
                document.getElementById("a").onchange = controlHSLA;
                document.getElementById("x0").onchange = controlPuntos;
                document.getElementById("y0").onchange = controlPuntos;
                document.getElementById("x1").onchange = controlPuntos;
                document.getElementById("y1").onchange = controlPuntos;
                document.getElementById("radio1").onchange = controlPuntos;
                document.getElementById("radio2").onchange = controlPuntos;
                document.getElementById("radio1").onclick = controlPuntos;
                document.getElementById("radio2").onclick = controlPuntos;
                document.getElementById("stopMas").onclick = mas;
                document.getElementById("stopMenos").onclick = menos;
            }
            function texto(){
              var texto = document.getElementsByName("texto");
              for(var i in texto){
                if(texto[i].checked){document.getElementById("lorem").style.visibility = texto[i].value}
              }
            }
            function mas(){
              //Creando el control de color
              var num =    document.getElementsByClassName("chkStop").length;
             
              var label = document.createElement("label");
              label.setAttribute("for", "s"   num);
              label.appendChild(document.createTextNode("Stop "   num));
             
              var radioInput = document.createElement("input");
              radioInput.setAttribute("type", "radio");
              radioInput.setAttribute("name", "color");
              radioInput.setAttribute("id", "s"   num);
              radioInput.setAttribute("value", (num   2));
              radioInput.setAttribute("checked", "true");
              radioInput.addEventListener("click", tomarColor, false);
             
              var chkInput = document.createElement("input");
              chkInput.setAttribute("type", "checkbox");
              chkInput.setAttribute("class", "chkStop");
              chkInput.setAttribute("name", "chkStop"   num);
              chkInput.setAttribute("id", "chkStop"   num);
              chkInput.setAttribute("value", "1");
              chkInput.setAttribute("checked", "true");
              chkInput.addEventListener("change", controlPuntos, false);
             
              var controlDiv = document.createElement("div");
              controlDiv.setAttribute("class", "control");
              controlDiv.appendChild(label);
              controlDiv.appendChild(radioInput);
              controlDiv.appendChild(chkInput);
             
              document.getElementById("stopColors").appendChild(controlDiv);
             
              //Creando el control de posicion
             
              var label2 = document.createElement("label");
              label2.setAttribute("for", "stop"   num);
              label2.appendChild(document.createTextNode("Stop "   num));
             
              var rangeInput = document.createElement("input");
              rangeInput.setAttribute("type", "range");
              rangeInput.setAttribute("min", "0");
              rangeInput.setAttribute("max", "100");
              rangeInput.setAttribute("step", "1");
              rangeInput.setAttribute("value", "50");
              rangeInput.setAttribute("name", "stop");
              rangeInput.setAttribute("id", "stop"   num);
              rangeInput.addEventListener("change", controlPuntos, false);
             
              var controlDiv2 = document.createElement("div");
              controlDiv2.setAttribute("class", "control");
              controlDiv2.appendChild(label2);
              controlDiv2.appendChild(rangeInput);
             
              document.getElementById("stopControls").appendChild(controlDiv2);
             
              //Creando el control de previsualizacion
             
              var label3 = document.createElement("label");
              label3.setAttribute("for", "color"   (num   2));
              label3.appendChild(document.createTextNode("Stop "   num));
             
              var label4 = document.createElement("label");
              label4.setAttribute("id", "muestra"   (num   2));
              label4.setAttribute("class", "muestras");
              label4.appendChild(document.createTextNode("____"));
             
              var textInput = document.createElement("input");
              textInput.setAttribute("type", "text");
              textInput.setAttribute("class", "color");
              textInput.setAttribute("value", "hsla(180,50%,100%,1)");
              textInput.setAttribute("name", "colores");
              textInput.setAttribute("id", "color"   (num   2));
             
              var controlDiv3 = document.createElement("div");
              controlDiv3.appendChild(label3);
              controlDiv3.appendChild(label4);
              controlDiv3.appendChild(textInput);
             
              document.getElementById("stopPreview").appendChild(controlDiv3);
             
              tomarColor();
              armarDegradado();
              colorear();
            }
            function menos(){
              document.getElementById("stopColors").removeChild(document.getElementById("stopColors").lastChild);
              document.getElementById("stopControls").removeChild(document.getElementById("stopControls").lastChild);
              document.getElementById("stopPreview").removeChild(document.getElementById("stopPreview").lastChild);
              radioInput = document.getElementsByName("color");
              radioInput[radioInput.length-1].checked = true;
              tomarColor();
              armarDegradado();
              colorear();
            }
            function actualizarMuestras(){
              muestra = document.getElementsByClassName("muestras");
              color = document.getElementsByName("colores");
              for(var i = 0; i < muestra.length; i  ){
                muestra[i].style.backgroundColor = color[i].value;
              }
            }
            function cambiarPuntos(){
                var x0 = document.getElementById("x0");
                var y0 = document.getElementById("y0");
                var x1 = document.getElementById("x1");
                var y1 = document.getElementById("y1");
                var r1 = document.getElementById("radio1");
                var r2 = document.getElementById("radio2");
                if(this.value == "linear"){
                    x0.value = "0";
                    y0.value = "0";
                    x1.value = "0";
                    y1.value = "100";
                    r1.value = "1";
                    r2.value = "5";
                }else if(this.value == "radial"){
                    x0.value = "50";
                    y0.value = "50";
                    x1.value = "60";
                    y1.value = "60";
                    r1.value = "10";
                    r2.value = "100";
                }
                armarDegradado();
                colorear();
            }
            function obtenerValoresHSLA(){
                h = document.getElementById("h").value;
                s = document.getElementById("s").value;
                l = document.getElementById("l").value;
                a = document.getElementById("a").value;
            }
            function coloresYPuntos(){
                x0 = document.getElementById("x0").value;
                y0 = document.getElementById("y0").value;
                x1 = document.getElementById("x1").value;
                y1 = document.getElementById("y1").value;
                t1 = document.getElementById("t1");
                t2 = document.getElementById("t2");
                color1 = document.getElementById("color1").value;
                color2 = document.getElementById("color2").value;
                stops=document.getElementsByName("stop");
                chkStops=document.getElementsByClassName("chkStop");
                stopColors=document.getElementsByClassName("color");
            }
            function tomarColor(){
              var num = 0;
              var radio = document.getElementsByName("color");
              for(var i in radio){
                if(radio[i].checked){num = radio[i].value;}
              }
              var hsla = document.getElementById("color" num).value
              var letras = hsla.split("");
              var valores = "";
              for(var i in letras){
                  if(/^(:?\d)$/.test(letras[i]) || letras[i] == "," || letras[i] == "."){
                      valores  = letras[i];
                  }
              }
              valores = valores.split(",");
              document.getElementById("h").value = valores[0];
              document.getElementById("s").value = valores[1];
              document.getElementById("l").value = valores[2];
              document.getElementById("a").value = valores[3];
              if(valores[3] != "0"){
                  document.getElementById("a").value = valores[3]*100;
              }
            }
            function armarColor(){
                obtenerValoresHSLA();
                var colorRadios = document.getElementsByName("color");
                for(var i in colorRadios){
                  if(colorRadios[i].checked){
                    var num = colorRadios[i].value;
                  }
                }
                document.getElementById("color" num).value = "hsla("   h   ", "   s   "%, "   l   "%, "   (a/100)   ")";
                actualizarMuestras();
            }
            function armarDegradado(){
              coloresYPuntos();
              if(t1.checked){
                var tipo = t1.value;
                var radio1 = "";
                var radio2 = "";
              }
              else if(t2.checked){
                var tipo = t2.value;
                var radio1 = document.getElementById("radio1").value ", ";
                var radio2 = document.getElementById("radio2").value ", ";
              }
              var degradado = "-webkit-gradient(" tipo ", " x0 "% " y0 "%, " radio1 x1 "% " y1 "%, " radio2 "from(" color1 ")" ", to(" color2 ")";
              for(var i in chkStops){
                if(chkStops[i].checked){
                  degradado  = ", color-stop(" stops[i].value "%, " stopColors[i].value ")";
                }
              }
              degradado  = ")";
              document.getElementById("degradado").innerHTML = degradado;
            }
            function colorear(){
              var salida = document.getElementsByName("salida");
              var preview = "";
              for(var i in salida){
                if(salida[i].checked){preview = salida[i].value;}
              }
              document.getElementById(preview).style.backgroundImage = document.getElementById("degradado").innerHTML;
              document.getElementById("computado").value = getComputedStyle(document.getElementById(preview), null).backgroundImage;
            }
            function cambiarSalida(){
              var salidas = document.getElementsByName("salida");
              var salida = "";
              for(var i in salidas){
                if(salidas[i].checked){salida = salidas[i].value;}
              }
              document.getElementById("degradado").innerHTML = document.getElementById(salida).style.backgroundImage;
              colorear();
            }
            function controlHSLA(){
              armarColor();
              armarDegradado();
              colorear();
            }
            function controlPuntos(){
              armarDegradado();
              colorear();
            }
        </script>
    </head>
    <body id="body">
        <form id="formulario" onsubmit="return masOMenos()">
            <div class="left">
                <h2>Degradado Webkit</h2>
                <fieldset class="dosPorFila"><legend>Tipo</legend>
                    <div class="control">
                      <label for="t1">Lineal</label>
                      <input type="radio" name="tipo" id="t1" value="linear" checked />
                      <label for="t2">Radial</label>
                      <input type="radio" name="tipo" id="t2" value="radial" />
                    </div>
                </fieldset>
                <fieldset class="dosPorFila"><legend>Salida</legend>
                    <div class="control">
                      <label for="salida1">Cuadro</label>
                      <input type="radio" name="salida" id="salida1" value="preview" checked />
                      <label for="salida2">Body</label>
                      <input type="radio" name="salida" id="salida2" value="body" />
                    </div>
                </fieldset>
                <fieldset class="dosPorFila"><legend>Texto</legend>
                    <div class="control">
                      <label for="texto1">Visible</label>
                      <input type="radio" name="texto" id="texto1" value="visible" checked />
                      <label for="texto2">Invisible</label>
                      <input type="radio" name="texto" id="texto2" value="hidden" />
                    </div>
                </fieldset>
                <fieldset><legend>Colores</legend>
                    <div class="control">
                        <label for="h">Hue</label>
                        <input type="range" min="0" max="360" value="0" name="h" id="h" />
                    </div>
                    <div class="control">
                        <label for="s">Saturation</label>
                        <input type="range" min="0" max="100" value="100" name="s" id="s" />
                    </div>
                    <div class="control">
                        <label for="l">Luminance</label>
                        <input type="range" min="0" max="100" value="0" name="l" id="l" />
                    </div>
                    <div class="control">
                        <label for="a">Alfa</label>
                        <input type="range" min="0" max="100" value="100" name="a" id="a" />
                    </div>
                    <div class="control">
                        <label for="c1">De</label>
                        <input type="radio" name="color" id="c1" value="1" checked />
                    </div>
                    <div class="control">
                        <label for="c2">A</label>
                        <input type="radio" name="color" id="c2" value="2" />
                    </div>
                    <div id="stopColors">
                        <div class="control">
                          <label>Stops</label>
                          <img id="stopMas" src="" />
                          <img id="stopMenos" src="" />
                        </div>
                    </div>
                </fieldset>
                <fieldset><legend>Puntos</legend>
                    <div class="control">
                        <label for="x0">X0</label>
                        <input type="range" min="-50" max="150" step="1" value="0" name="x0" id="x0" />
                    </div>
                    <div class="control">
                        <label for="y0">Y0</label>
                        <input type="range" min="-50" max="150" step="1" value="100" name="y0" id="y0" />
                    </div>
                    <div class="control">
                        <label for="radio1">Radio 1</label>
                        <input type="number" min="1" step="1" value="1" name="radio1" id="radio1" />
                    </div>
                    <div class="control">
                        <label for="x1">X1</label>
                        <input type="range" min="-50" max="150" step="1" value="0" name="x1" id="x1" />
                    </div>
                    <div class="control">
                        <label for="y1">Y1</label>
                        <input type="range" min="-50" max="150" step="1" value="0" name="y1" id="y1" />
                    </div>
                    <div class="control">
                        <label for="radio2">Radio 2</label>
                        <input type="number" min="5" step="1" value="5" name="radio2" id="radio2" />
                    </div>
                    <div id="stopControls"></div>
                </fieldset>
            </div>
            <div class="right">
                <label>background-image aplicado:</label>
                <p id="degradado">-webkit-gradient(linear, 0% 100%, 0% 0%, from(hsla(0, 100%, 0%, 1)), to(hsla(180, 50%, 100%, 0)))</p>
                <label for="computado">Computado:</label>
                <input type="text" value="0" name="computado" id="computado" />       
                <p class="lorem" id="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                <div id="preview"></div>
                <fieldset><legend>Valores</legend>
                  <label for="color1" >De:</label><label id="muestra1" class="muestras">____</label>
                  <input type="text" value="hsla(0,100%,0%,1)" name="colores" id="color1" />
                  <label for="color2" >A:</label><label id="muestra2" class="muestras">____</label>
                  <input type="text" value="hsla(180,50%,100%,0)" name="colores" id="color2" />
                  <div id="stopPreview"></div>
                </fieldset>
            </div>
        </form>
    </body>
</html>
Para lo que necesito sacar esos valores es que cuando cambio la salida (ya sea al body o al cuadro) necesito sacar el background-image que tienen computado y cargar los valores en los controles para poder modificar el valor que ya tienen y que no se pierda del todo. Cualquier ayuda sera agradecida, y si les sirve de algo mi script quedenselo y usenlo como quieran que es software libre XD


Desconectado Non Servium

  • Trade Count: (0)
  • Sv Member
  • ***
  • Thank You
  • -Given: 6
  • -Receive: 39
  • Mensajes: 426
  • Ilix Punx :)
Re:[ayuda]: Funcion para descifrar una cadena de texto y obtener valores
« Respuesta #1 : mayo 23, 2012, 09:30:40 pm »
Primero podes validar el contenido (Es lo que te entiendo poniendo "si esta presente")
Funcionamiento

Ejemplo

después sacar una cadena de valores separadas por coma (,) supongo q usando un split(',') para color-stop y usar siempre ReGex determinando el contenido... (rgb(255, 106, 0) o 0.51 o cualquier otro criterio).

Se ve dificil ^^ lo de rgb o rgba a hsla no tengo la mínima idea  :-/ pero el paso 1 supongo q es una solución
♫ Condenados a perder la libertad! Por no acatar las leyes que les asignaron. ♪ ♫
Decididos, decididos a emprender! Un camino largo y duro por no ser esclavos ♫


Watch

Desconectado 0rion

  • Trade Count: (0)
  • MiembrosReales
  • *
  • Thank You
  • -Given: 7
  • -Receive: 0
  • Mensajes: 46
Re:[ayuda]: Funcion para descifrar una cadena de texto y obtener valores
« Respuesta #2 : mayo 24, 2012, 07:17:34 am »
Gracias por tu sugerencia bereco190xP, pero creo que quiza no sera necesario validar puesto que ya se que el valor que recibo esta correcto, pues es el que el navegador ha computado, el lo generar en base al estilo que le paso, pero la idea de las comas esta buena, solo debo pensar mejor en como reconocer cada funcion de las de adentro y sus respectivos parametros, porque solo por comas me saca funciones y parametros todo por igual, y necesito ver cada funcion como un parametro que a la vez tiene sus parametros.