quarta-feira, 23 de julho de 2014

Creating HTML styles with cutting image files in C# ( css sprites to forms web )


This is the way that I costume to take when I make my HTML styles.
It is too easy to work.
After the job, we can cut all the image files.


/*
 * Created by Luiz Augusto S. Prado
 * www.codigorapido.com.br
 * consultancy: codigorapido2012@gmail.com
 * Date: 22/07/2014
 */

using System;
using System.IO;
using System.Drawing;
using System.Windows.Forms;
using System.Drawing.Imaging;

namespace cutting
{
    class Program
    {
        // function from microsoft site
        static public Bitmap Copy(Bitmap srcBitmap, Rectangle section)
        {
            // Create the new bitmap and associated graphics object
            Bitmap bmp = new Bitmap(section.Width, section.Height);
            Graphics g = Graphics.FromImage(bmp);
           
            // Draw the specified section of the source bitmap to the new one
            g.DrawImage(srcBitmap, 0, 0, section, GraphicsUnit.Pixel);
           
            // Clean up
            g.Dispose();
           
            // Return the bitmap
            return bmp;
        }
       
        static public string getTotalHtml(string style, string html)
        {
           
            return "<!DOCTYPE html>\n"+
                "<html>\n" +
                "    <head>\n" +
                "        <style>\n"+
                style+
                "        </style>\n" +
                "    </head>\n" +
                "    <body>\n"+
                html+
                "    </body>\n" +
                "<html>\n";
        }
       
        public static void execute( int[,] matrix, string imageName )
        {
            Rectangle myRect1 = new Rectangle();
           
            style += ".frame\n";
            style += "{"+"\n";
            style +=         "position: relative;\n";
            style += "}\n\n";
           
            string style = "";
            string html = "<div class='frame'>\n";
           
            int old_y = 0;
            for(int x=1; x<matrix.GetLength(0) ; x++)
            {
                int old_x = 0;
                for(int y=1; y<matrix.GetLength(1) ; y++)
                {
                   
                    html+="<div class='frame_"+x+"_"+y+"'></div>\n";
                   
                    //=============================================================
                    // Creating the style to the cell.
                    //=============================================================
                    style += ".frame_"+x+"_"+y+"\n";
                    style += "{"+"\n";
                    style +=         "background: url('Frame.png') -"+old_x+"px -"+old_y+"px;"+"\n";
                    style +=         "position: absolute;"+"\n";
                    //=============================================================
                    if( matrix[x,y]==0 )
                        style +=         "background-repeat: no-repeat;"+"\n";
                    else if( matrix[x,y]==8 )
                        style +=         "background-repeat: repeat-x;"+"\n";
                    else if( matrix[x,y]==1 )
                        style +=         "background-repeat: repeat-y;"+"\n";
                    else if( matrix[x,y]==9 )
                        style +=         "background-repeat: repeat;"+"\n";
                    //=============================================================
                    style +=         "width: "+myRect1.Width+"px;"+"\n";
                    style +=         "height: "+myRect1.Height+"px;"+"\n";
                    style +=         "top: "+old_y+"px;"+"\n";
                    style +=         "left: "+old_x+"px;"+"\n";
                    style += "}"+"\n"+"\n";
                    //=============================================================
                   
                   
                    //=============================================================
                    // if you wanna to cut all yours images, it will help us safeguard our job
                    //=============================================================
                    if(false)
                    {
                        Bitmap bitmap = new Bitmap(imageName);
                        myRect1.X = old_x;
                        myRect1.Y = old_y;
                        myRect1.Width  = matrix[0,y];
                        myRect1.Height = matrix[x,0];
                        Bitmap bmp = Copy(bitmap, myRect1 );
                        FileInfo fi = new FileInfo("Frame_"+x+"_"+y+".png");
                        FileStream fstr = fi.Create();
                        bmp.Save(fstr, ImageFormat.Png);
                        fstr.Close();
                    }
                    old_x += matrix[0,y];
                }
                old_y += matrix[x,0];
            }
            html += "</div>";
           
           
            MessageBox.Show( getTotalHtml(style, html) );
           
            Console.Write("Press any key to continue . . . ");
            Console.ReadKey(true);
        }
       
        public static void Main(string[] args)
        {
            // this is our matrix
            // column  0 is the width  of the cell
            // line    0 is the height of the cell
            int[,] matrix = new int[,]
            {
                {0,  5,2,19,2,5},
                {5,  0,0, 1,0,0},
                {26, 0,0, 1,0,0},
                {2,  0,0, 1,0,0},
                {33, 8,8, 9,8,8},
                {2,  0,0, 1,0,0},
                {5,  0,0, 1,0,0}
            };
            execute(matrix, "Frame.png");
        }
    }


//This is the image that I'm using in this source:


domingo, 20 de julho de 2014

Uma forma de aplicar Libs Javascript e Styles desacoplada do codigo (Com Bootstrap)

Esta semana penei, mas consegui aplicar o Bootstrap em meus fontes de forma desacoplada. Observem como meu body é limpo. Não precisamos adicionar detalhes de controle de nosso layout. Deixamos isso para o javascript que aplica as classes. styles.html
<html>
    <head>

        <script src="../jquery-2.1.1.min.js"></script>

        <link rel="stylesheet" href="../bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="../bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <script src="../ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="../bootstrap/3.2.0/js/bootstrap.min.js"></script>

        <style>
            .red
            {
                color: red;
            }
            .green
            {
                color: green;
            }
            .blue
            {
                color: blue;
            }
        </style>

        <script type="text/javascript">

                myFunction = function(e)
                {
                    alert($(e).html())
                }
                
                botao=function(element)
                { 
                    element.attr('class',"btn")      
                }
                
                dmy_reserved_style_name=function(element)
                {
                    element.attr('class',"container")
                }
                
                bmy_reserved_style_name=function(element)
                {
                    element.attr('class',"red")
                }
                
                amy_reserved_style_name=function(element)
                {
                    element.attr('class',"green")
                } 
                
                cmy_reserved_style_name=function(element)
                {
                    element.attr('class',"blue")
                }

                String.prototype.replaceAll=function(find,replace)
                {
                    return this.split(find).
                    join(replace);
                }

                ButtonOpenModal=function(element)
                {
                    var idName=element.attr('id');
                    element.attr('id',element.attr('id')+"__");
                    var str='<button class="btn btn-primary btn-lg" id="'+idName+'" data-toggle="modal" data-target="#'+element.attr("target")+'">';
                    str+=element.html();
                    str+='</button>';
                    element.replaceWith(str);
                }

                GridView=function(element)
                {
                    var idName=element.attr('id');
                    element.attr('id',element.attr('id')+"__");

                    //var rrrr = $(this).attr("metadata")
                    var rrrr=element.attr("metadata").
                    replaceAll("'","\"")
                    var columns=$.parseJSON(rrrr);
                    var thead="";

                    $.each(columns,function(indix,column)
                    {
                        thead+="<th width="+column.width+">"+column.columnName+'</th>';
                    });
                    var tbody=element.children('TBODY').html()
                    var str="<div class='panel panel-default'>"
                    str+='<div class="panel-heading">'+element.attr("title")+'</div>'
                    str+='<table class="table" id="'+idName+'" >'; // id name must be here
                    str+="<thead><tr>"+thead+"</tr></thead>"
                    str+="<tbody>"+tbody+"</tbody>"
                    str+="</table></div>";
                    element.replaceWith(str);
                }
                
                ModalMessage=function(element)
                {
                    var idName=element.attr('id');
                    element.attr('id',element.attr('id')+"__");
                    var str='<div class="modal fade" id="'+idName+'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">'
                    str+='<div class="modal-dialog">'
                    str+='<div class="modal-content">'
                    str+='<div class="modal-header">'
                    str+='<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>'
                    str+='<h4 class="modal-title" id="myModalLabel">'+element.attr('Modal_title')+'</h4>'
                    str+='</div>'
                    str+='<div class="modal-body">'
                    str+=element.html();
                    str+='</div>'
                    str+='<div class="modal-footer">'
                    str+='<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'
                    str+='</div>'
                    str+='</div>'
                    str+='</div>'
                    str+='</div>'
                    element.replaceWith(str);
                }
                
                $(document).ready(function()
                {
                    $("*").each(function(index,element)
                    {
                        if($(this).attr("data-type")!=null)
                        {
                            var tempFunction=new Function("Arg1","window."+$(this).attr("data-type")+"(Arg1)");
                            tempFunction($(this));
                        }
                    }); 
                });
        </script>
    </head>
    <body> 
        
        <button data-type="ButtonOpenModal" target="Modal_1">
            Launch demo modal
        </button>

        <div id="Modal_1" data-type="ModalMessage" Modal_Title="Message" > 
            Hello! My name is Luiz. www.codigorapido.com.br (2014)
        </div>

        <div data-type="cmy_reserved_style_name">
            The contents of the div
        </div>

        <div data-type="dmy_reserved_style_name">
            The contents of the div
        </div>

        <div data-type="bmy_reserved_style_name">
            The contents of the div
        </div>

        <div data-type="amy_reserved_style_name">
            The contents of the div
        </div>

        <div data-type="dmy_reserved_style_name">
            The contents of the div
        </div>

        <button data-type="botao" type="button" onclick="myFunction(Modal_1)" > clicar </button>

        <table data-type="GridView" id="tabelaNome" title="titulo" metadata="[{'columnName':'Coluna 1', 'width':300},{'columnName':'Coluna 2', 'width':300}]"  > 
            <TBODY><tr><td>oi</td><td>oi</td></tr><tr><td>oi</td><td>oi</td></tr></TBODY> 
        </table>        

    </body>
</html>


sábado, 5 de julho de 2014

Soluções para equações de 3º grau em JavaScript

Para quem tiver interesse em visualizar a dedução pode acessar este pdf: PDF
<html>
<script>
baskara = function(a, b, c)
{
        var r1 = (-b+Math.sqrt(b*b-4*a*c))/(2*a);
        var r2 = (-b-Math.sqrt(b*b-4*a*c))/(2*a);
        var array = [r1, r2];
        return  array;
}
raiz_eq_grau_3 = function(a, b, c, d)
{
        if(a==0)  return baskara(b, c, d)[0]
        var m = - b/3*a;
        var menosk1k2 = - Math.pow((b*b)/(9*a*a) - c/(3*a), 3); 
        var k1Maisk2 = -2*(b*b*b/27*a*a*a) + (b*c/3*a*a) - (d/a);
        var raizes = baskara(-1, k1Maisk2, menosk1k2 );
        var r_k1 = (raizes[0]>0? Math.pow(raizes[0], 1/3) : -Math.pow(-raizes[0], 1/3) );
        var r_k2 = (raizes[1]>0? Math.pow(raizes[1], 1/3) : -Math.pow(-raizes[1], 1/3) );
        return ( r_k1 + r_k2 + m);
}
calcular = function()
{
        var a = parseFloat(document.getElementById('a').value);
        var b = parseFloat(document.getElementById('b').value);
        var c = parseFloat(document.getElementById('c').value);
        var d = parseFloat(document.getElementById('d').value);
        document.getElementById('resultado').value = raiz_eq_grau_3(a, b, c, d) ;
}
</script>
<body> 
  Coeficiente a: <input type="text" id="a" value="1"/><br>
  Coeficiente b: <input type="text" id="b" value="0"/><br>
  Coeficiente c: <input type="text" id="c" value="-1"/><br>
  Coeficiente d: <input type="text" id="d" value="-1"/><br> 
  <button onclick="calcular();">Click me</button><br>
  resultado: <input type="text" id="resultado" /><br> 
</body>
</html>