[Tool/Web/Other] BSN Image2Textdraw Converter Online

[Tool/Web/Other] BSN Image2Textdraw Converter Online - Printable Version

+- SA-MP Forums Archive (https://sampforum.blast.hk)
+-- Forum: SA-MP Scripting and Plugins (https://sampforum.blast.hk/forumdisplay.php?fid=8)
+--- Forum: Filterscripts (https://sampforum.blast.hk/forumdisplay.php?fid=17)
+---- Forum: Tools and Files (https://sampforum.blast.hk/forumdisplay.php?fid=82)
+---- Thread: [Tool/Web/Other] BSN Image2Textdraw Converter Online (/showthread.php?tid=277136)

Pages: 1 2

BSN Image2Textdraw Converter Online - Superfast Conversion! - bhaveshnande - 16.08.2011

BSN Image2Textdraw Converter Online v0.2 -Stable release

Introduction
BSN Image2Textdraw Converter Online is a Online application built with JavaScript and HTML5 which allows you to easily convert Images into SA:MP textdraws. Inspired from the Gamer931215's image2textdraw converter I thought I should make a online version of the software. You can upload images more than 45x45 pixels now, the number of non-transparent pixels is counted and final code is generated if the non-transparent pixels are less than 2048 which is the textdraw limit by SA:MP

Video
[ame]http://www.youtube.com/watch?v=JrYFndc5BKM[/ame]

Features

Superfast
This app works superfast, however the speed is dependent on the machine you are using, on a normal PC you should get the output in 2-3 seconds.

Drag and drop
You can drag and drop images into the box and your image gets selected! But you can also select your file by browsing your hard drive (the ancient way!)

Transparency Detection
It detects the pixels in your image which are transparent and skips them

No more 45x45
The 45x45 pixel limit is removed in this version which means you can upload larger images, the tool calculates the transparent and non-transparent pixels, if the number of non-transparent pixels is less than 2048 output is generated or else you get a message saying you should upload images with less number of non-transparent pixels.

Position Selector
You can select the position for your image just by clicking on the position selector, your selected image appears where you click.

Custom Background Image - new in 0.2

Screen shots of converted Images

Features to be added

Multiple Image support
Background detection
Improvement in speed
and a lot more....

How to Use

Select the image from your drive either by dragging or browsing
Click on the Position Selector Image below to select the position of your image
Click Convert to conver the image into textdraws
Click Highlight Text to highlight all the text in output box
Copy the text and paste it into PAWNO
Compile and add the name to your server.cfg filterscript list

As in the Gamer931215's converter this app generates the exact same code, the appearance of textdraws is set to OnPlayerConnect() however you can change it.

Note: This online application generates the same PAWNO code produced my Gamer931215's converter so I would like to thank him for "enum" and for loop idea in PAWNO script which made the script half in size.

Credits

Myself for programming and designing
Gamer931215 for PAWNO logic
Norbert_G for testing
TimothyInTheHouse for testing
And anyone else whose name I forgot...

ChangeLog

Код:

v0.2 Stable Release - 28/8/2011 No bugs fixed from BETA version
v0.2 BETA - 28/8/2011 No bugs found
v0.2 ALPHA - 27/8/2011 Custom Image feature with some minor UI updates
v0.1 Stable Release - 19/8/2011 Stable version released, 1 bug fixed from 0.1 BETA
v0.1 BETA  - 19/8/2011  - Added image support for sizes larger than 45x45, Image preview on Position selector
v0.1 ALPHA - 17/8/2011 - basic release version

Known Bugs
Below is the list of non-fixed bugs for current app version, if you find any bugs please report them in comments. Also it would be appreciated if you try suggesting a solution to these bugs from source code available

Код:

    Summary                                                                 Status                    Importance           Last Updated
#1 None of the upload method works if the page is "still loading"          Confirmed                      High                 17/09/2011 
#2 Some .PNG images do not convert - instead return "undefiled"            Confirmed                    Critical               30/09/2011

Website URL: http://bsndesign.webs.com/image2textdraw.htm (version 0.2 Stable Release)

Built With

HTML5 Image API Supported On

Source Code:
This is a quick look into JavaScript code used for converting, entire code can be obtained by selecting "View Source" in right click menu.

Код:


<script type="text/javascript">
    window.onerror = function(msg, err_url, line) 
    {
            alert('an error occured on line: ' + line);
    };

window.addEvent('load', function() {
    var canvas = document.getElementById("canvas");
    var file = document.getElementById("file");
    file.onchange = function() {
        var reader = new FileReader();
        reader.onload = function(e) {
            img = new Image();

            img.onload = function() 
            {
                if (image_uploaded_drag === false)
                {
                    image_uploaded = true;
                    image_uploade_browse = true;
                    canvas.width = img.width;
                    canvas.height = img.height;
                    context = canvas.getContext("2d");
                    context.drawImage(img, 0, 0);
                    context1.drawImage(img, pos_x, pos_y);                 
                }
                else
                {
                    alert("You already uploaded a image with \"Drag and drop method\", please refresh the page if you want to use \"Browse file method\"");
                }

            };
            img.src = e.target.result;

        };
        reader.readAsDataURL(file.files[0]);
    };
});

window.onload = function() {
    image_uploaded = false;
    image_uploaded_browse = false;
    image_uploaded_drag = false;
    pos_x = 0;
    pos_y = 0;
    
    canvas1 = document.getElementById("canvas1");
    context1 = canvas1.getContext("2d");
    document.getElementById("refresh_image").style.visibility = "hidden";
}

function Create2DArray(rows) {
    var arr = [];

    for (var i = 0; i < rows; i++) {
        arr[i] = [];
    }

    return arr;
}

function change_pic()
{
	custom_url = prompt("Enter URL of your custom Image","http://");
	document.getElementById("canvas1").style.backgroundImage="url(" + custom_url + ")";
	document.getElementById("refresh_image").style.visibility = "visible";
}
	
function refresh_click()
{
	document.getElementById("canvas1").style.backgroundImage="url(screen.png)";
	document.getElementById("refresh_image").style.visibility = "hidden";
}

function point_it(event) {
    if (image_uploaded === true) {
        pos_x = event.offsetX ? (event.offsetX) : event.pageX - document.getElementById("canvas1").offsetLeft;
        pos_y = event.offsetY ? (event.offsetY) : event.pageY - document.getElementById("canvas1").offsetTop;
    
    context1.clearRect(0, 0, canvas1.width, canvas1.height);
    context1.drawImage(img, pos_x, pos_y);
    
        document.getElementById("form_x").value = pos_x;
        document.getElementById("form_y").value = pos_y;
    }
    else {
        alert("Upload a image first");
    }
}

function convert() {
    if (image_uploaded === true) {
        richtextbox3 = document.getElementById("samp_main");
        //get image properties | Image size limit : 45x45 pixels
        height = img.height;
        width = img.width;
        var imgDat;
        textdraw_name = "null";
        final_color = new Array(height * width);
        x_axis_final = new Array(height * width);
        y_axis_final = new Array(height * width);
        status_used = new Array(height * width);
        img_width = width + 1;
        pre_text = "\n//Converted using BSN Image2Textdraw Converter Online \n#include<a_samp>\n#define USED_DRAWS " + height * width + "\nenum textdraw\n{\n\tText:id,\n\tused\n}\nnew TextDrawInfo[USED_DRAWS][textdraw];\npublic OnFilterScriptInit()\n{\n";
    pixels = 0;
    
    
        for (i = 0; i <= height; i++) //i = constant for first loop j is changing therefore j = horizontal scanning i = vertical scanning
        {
            for (j = 0; j <= width; j++) {
                imgDat = context.getImageData(j, i, 1, 1); // now j=x axis i=y axis
                final_color[j * img_width + i] = "0x" + dec2hex(imgDat.data[0]) + dec2hex(imgDat.data[1]) + dec2hex(imgDat.data[2]) + "ff";
                if (imgDat.data[3] === 0) {
                    status_used[j * img_width + i] = "0";
                }
                else {
                    status_used[j * img_width + i] = "1";
                    pixels = pixels + 1;
                }
                x_axis_final[j * img_width + i] = pos_x + j;
                y_axis_final[j * img_width + i] = pos_y + i;
            }
        }
        if (pixels <= 2048)
        {
        string = new Array(width * height);
        for (k = 0; k < height * width; k++) {
            string[k] = "\tTextDrawInfo[" + k + "][id] = TextDrawCreate(" + x_axis_final[k] + "," + y_axis_final[k] + ",\".\");TextDrawTextSize(TextDrawInfo[" + k + "][id],1,1);TextDrawSetShadow(TextDrawInfo[" + k + "][id],0);TextDrawFont(TextDrawInfo[" + k + "][id],2);TextDrawColor(TextDrawInfo[" + k + "][id]," + final_color[k] + ");TextDrawInfo[" + k + "][used] = " + status_used[k] + ";";
        }
        post_text = "\n\n\treturn 1;\n}\npublic OnPlayerConnect(playerid)\n{\n\tfor(new i = 0;i<USED_DRAWS;i++)\n\t{\n\t\tif(TextDrawInfo[i][used] == 1){TextDrawShowForPlayer(playerid,TextDrawInfo[i][id]);}\n\t}\n\treturn 1;\n}\n\npublic OnFilterScriptExit()\n{\n\tfor(new i = 0;i<USED_DRAWS;i++)\n\t{\n\t\tif(TextDrawInfo[i][used] == 1){TextDrawDestroy(TextDrawInfo[i][id]);}\n\t}\n\treturn 1;\n}";
        richtextbox3.innerHTML = pre_text + string.join("\n") + post_text;
    }
    else
    {
        alert("Your selected image had " + pixels + " non-transparent pixels, but SA:MP allows 2048 pixels. Try uploading a image with less number of non-transparent pixels");
       }
    }
    else {
        alert("Upload a image first");
    }

}

  dec2hex = function(d) {
    var s = "00" + Number(d).toString(16);
    return s.substring(s.length - 2);
};



</script>

Re: BSN Image2Textdraw Converter Online - rbN. - 16.08.2011

How come its so stretched out at SAMP

Re : Re: BSN Image2Textdraw Converter Online - Naruto_Emilio - 16.08.2011

Quote:

Originally Posted by RobinOwnz

How come its so stretched out at SAMP

Humans brain.

Re: BSN Image2Textdraw Converter Online - [P4] - 16.08.2011

Keep getting errors @ lines 119 and 262...Lol... I tried like 10 icons that are smaller than 45x45 o_O

Re: BSN Image2Textdraw Converter Online - [M.A]Angel[M.A] - 16.08.2011

Nice, but i got error's can't upload pic ??
__________________
MY SERVER:

Re: BSN Image2Textdraw Converter Online - bhaveshnande - 16.08.2011

Quote:

Originally Posted by RobinOwnz

How come its so stretched out at SAMP

Icon appears stretched because I didn't set my screen resolution well, my whole SA:MP screen is stretched up.

Re: BSN Image2Textdraw Converter Online - bhaveshnande - 16.08.2011

Quote:

Originally Posted by [P4]

Keep getting errors @ lines 119 and 262...Lol... I tried like 10 icons that are smaller than 45x45 o_O

Quote:

Originally Posted by [M.A]Angel[M.A]

Nice, but i got error's can't upload pic ??

Yup, you would get those errors if u upload a image with drag and drop method first and then use normal browse to image method or vice versa. You can change your current image but if you want to change the method of image upload, please refresh the page

__________________

Re: BSN Image2Textdraw Converter Online - Alex_Jefferson - 16.08.2011

This is Best, Thanks!

Re: BSN Image2Textdraw Converter Online - gamer931215 - 16.08.2011

Quote:

Originally Posted by RobinOwnz

How come its so stretched out at SAMP

Its because the SA-MP textdraws are scaled on 640x480 resolution, bigger resolutions will "stretch" the textdraws. It looks so stretched because he's probally using a widescreen and the 640x480 scale is a "squar".

-------------
"Inspired from the gamerX's image2textdraw converter"

Uchum...

1. My name is Gamer931215, not GamerX...
2. Next time please ask for permision to use my idea/script
3. "but it has nothing to do with the code which gamerX used nor the logic" - It still uses the same enum/textdraw names and method and idea...
3. Please add a link to the original

Its a pretty nice script though and faster as c#'s bitmaps

Good job on that! Btw since its posted on the "release" section of sa-mp i think you must include the source as well according to the rules...

Tip/Question: Does it remove transparency as well? Also if it does don't limit the image size to 45x45! Because some larger images COULD contain a lot transparency.

But still... if you want to reduce the ammount of textdraws, want to adjust the transparency or want to select the location more accurate i still recommend using my standalone app

Re: BSN Image2Textdraw Converter Online - bhaveshnande - 17.08.2011

Quote:

Originally Posted by gamer931215

Yea that's right

-------------

Quote:

Originally Posted by gamer931215

"Inspired from the gamerX's image2textdraw converter"

Uchum...

1. My name is Gamer931215, not GamerX...
2. Next time please ask for permision to use my idea/script
3. "but it has nothing to do with the code which gamerX used nor the logic" - It still uses the same enum/textdraw names and method and idea...
3. Please add a link to the original

1. Ok, sorry for that, your name is Gamer931215, I was tired and half asleep at the time of release (I didn't even add credits....)
2,3,4. In my older version, it produced the script which was huge and took longer time, so I saw the output from your converter and thought it would be a great idea as using "enum" method and a for loop reduces the script to half. So i edited my converter to produce same output as yours

that was your idea and I will add a link in credits.

Quote:

Originally Posted by gamer931215

Its a pretty nice script though and faster as c#'s bitmaps

Good job on that! Btw since its posted on the "release" section of sa-mp i think you must include the source as well according to the rules...

Thank you

Source Code? Its a online JavaScript application, you just have to right click on my webpage and click "View source" that would show u everything I did..

Quote:

Originally Posted by gamer931215

Tip/Question: Does it remove transparency as well? Also if it does don't limit the image size to 45x45! Because some larger images COULD contain a lot transparency.

Well thank you for the tip, i had mentioned in my post that I would remove the 45x45 size limit in 0.1 BETA version.

Quote:

Originally Posted by gamer931215

But still... if you want to reduce the ammount of textdraws, want to adjust the transparency or want to select the location more accurate i still recommend using my standalone app

Right, you shouldn't have advertised... what do u mean by select the location more accurate?

Re: BSN Image2Textdraw Converter Online - Zh3r0 - 17.08.2011

Everyone has it's own ways gamer, stop pushing people to your application, even if it's better, let em choose.

Re: BSN Image2Textdraw Converter Online - gamer931215 - 17.08.2011

Quote:

Originally Posted by Zh3r0

Everyone has it's own ways gamer, stop pushing people to your application, even if it's better, let em choose.

I'm not pushing them to use my app

i was just eehm... promoting myself a bit :$ sorry

Anyway im wondering how you got the colors/stuff in javascript

il inspect the source a bit

Re: BSN Image2Textdraw Converter Online - bhaveshnande - 17.08.2011

Quote:

Originally Posted by gamer931215

Anyway im wondering how you got the colors/stuff in javascript

il inspect the source a bit

I get those hex colors by using HTML5 Image API <canvas> method.. scanning each pixel and assigning its value to an array.

Re: BSN Image2Textdraw Converter Online - bhaveshnande - 19.08.2011

0.1 Stable version released, added new features like image preview on position selector and removal of 45x45 size limit.

Re: BSN Image2Textdraw Converter Online - gamer931215 - 19.08.2011

Quote:

Originally Posted by bhaveshnande

0.1 Stable version released, added new features like image preview on position selector and removal of 45x45 size limit.

Nice updates, i like the image preview on position

I might see more in an online version then my c# app since javascript seems to be A LOT faster.

Feel free to "spy" and copy my source to see how i combined the textdraws in order to reduce the ammount of textdraws

Edit: the link in the menu on your website fails, it goes to "http://bsndesign.wesb.com/image2textdraw.htm" instead of "http://bsndesign.webs.com/image2textdraw.htm".

Re: BSN Image2Textdraw Converter Online - Davz*|*Criss - 20.08.2011

Good

Re: BSN Image2Textdraw Converter Online - bhaveshnande - 21.08.2011

Quote:

Originally Posted by gamer931215

Nice updates, i like the image preview on position

I might see more in an online version then my c# app since javascript seems to be A LOT faster.

Quote:

Originally Posted by Davz*|*Criss

Good

Thx

Quote:

Originally Posted by gamer931215

Edit: the link in the menu on your website fails, it goes to "http://bsndesign.wesb.com/image2textdraw.htm" instead of "http://bsndesign.webs.com/image2textdraw.htm".

Fixed.

Well, I don't understand why im getting so less comments

Re: BSN Image2Textdraw Converter Online - juraska - 21.08.2011

I can say just wow

looks crazy nice, i'm going test

Re: BSN Image2Textdraw Converter Online - bhaveshnande - 28.08.2011

Version 0.2 released - Custom Image option for Position Selector added with minor changes in the UI.

Re: BSN Image2Textdraw Converter Online - =WoR=Bruno - 29.08.2011

Good work man