Made a tiny tool using to convert your code into embedded type :-)

Help & Support
1

So as the title I have made a tiny tool using to convert your code into embedded type, just like this:

void mainImage( out vec4 f, in vec2 g )
{
    f = pow(texture(iChannel0, g / iResolution.xy),vec4(1.0/2.2));
}

to

"void mainImage( out vec4 f, in vec2 g )\n" + 
"{\n" + 
"    f = pow(texture(iChannel0, g / iResolution.xy),vec4(1.0/2.2));\n" + 
"}"

or

"void mainImage( out vec4 f, in vec2 g )",
"{",
"    f = pow(texture(iChannel0, g / iResolution.xy),vec4(1.0/2.2));",
"}"

So you don’t need to type the prefix and subfix manually anymore :blush:

Here is the HTML code of this tiny tool:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Embedded Code Generator</title>
<script>

    function generateA(){
	    var arr = document.getElementsByClassName("inputBox")[0].value;
        var str = arr.replace(/\n/g, '\\n" + \n"');
        str = '"' + str + '"';
        document.getElementsByClassName("outputBox")[0].value = str;
    }

    function generateB(){
	    var arr = document.getElementsByClassName("inputBox")[0].value;
        var str = arr.replace(/\n/g, '",\n"');
        str = '"' + str + '"';
        document.getElementsByClassName("outputBox")[0].value = str;
    }

</script>
<style type="text/css">
.container {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    
    background-color: #222;
    color: #fff;
    font-weight: 100;
    padding: 8px;
    
    box-shadow: 0 0 16px rgba(0, 0, 0, .3);
}

.container > .buttonA {
    margin-top: 4px;
    margin-bottom: 8px;
    max-width: 200px;
    position: relative; 
    float: right;
    right: 50%; 
    margin-right: 50px;
    text-align: center;
    background-color: #07f;
    padding: 0 16px;
    font-size: 18px;
    line-height: 48px;
    border-radius: 4px;
    cursor: pointer;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.container > .buttonB {
    margin-top: 4px;
    margin-bottom: 8px;
    max-width: 200px;
    position: relative; 
    float: left;
    left: 50%; 
    margin-left: 50px;
    text-align: center;
    background-color: #07f;
    padding: 0 16px;
    font-size: 18px;
    line-height: 48px;
    border-radius: 4px;
    cursor: pointer;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.container .inputBox {
    color: #000;
    font-size: 14px;
    float: top;
    resize: none;
    width: 100%;
    height: 47%;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #bbb;
}

.container .outputBox {
    color: #000;
    font-size: 14px;
    float: top;
    resize: none;
    width: 100%;
    height: 47%;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #bbb;
}
</style>
</head>
<body>
<div class='container'>
<textarea class='inputBox' placeholder='put your code here.'></textarea>
<div class='buttonA' onclick="generateA()" >Generate (Type A)</div>
<div class='buttonB' onclick="generateB()" >Generate (Type B)</div>
<textarea class='outputBox' placeholder='code generated here.'></textarea>
</div>
</body>
</html>

Free for all. Try to modify my code and make another tool to remove all the prefix and subfix whenever you want.

5 Likes
2

Thanks for sharing @kprimo!

1 Like
3

Thank you for sharing :heart:

1 Like
4

Here is the code of the restorer:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Embedded Code Restorer</title>
<script>

    function restore(){
	    var input = document.getElementsByClassName("inputBox")[0].value;
        var output = '';
        var arr = input.split(/\n/g);
        for (i=0;i<arr.length;i++){
            var start = arr[i].indexOf('"');
            var end = arr[i].lastIndexOf('"');
            // Determine whether it is a comment
            if (start == -1){
                // Delete the blank before the comment line
                var str = arr[i].replace(/^\s*/g,'');
            } else {
                // Take the content between the two double quotes as the body
                var str = arr[i].substring(start+1,end);
                if (str.indexOf("\\n")!=-1){
                    str = str.replace("\\n","");
                }
            }
            output = output + str + "\n";
        }
        document.getElementsByClassName("outputBox")[0].value = output;
    }

</script>
<style type="text/css">
.container {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    
    background-color: #222;
    color: #fff;
    font-weight: 100;
    padding: 8px;
    
    box-shadow: 0 0 16px rgba(0, 0, 0, .3);
}

.container > .button {
    margin-top: 4px;
    margin-bottom: 8px;
    max-width: 200px;
    position: relative; 
    left: 50%;
    margin-left: -100px;
    text-align: center;
    background-color: #f30;
    padding: 0 16px;
    font-size: 18px;
    line-height: 48px;
    border-radius: 4px;
    cursor: pointer;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.container .inputBox {
    color: #000;
    font-size: 14px;
    float: top;
    resize: none;
    width: 100%;
    height: 47%;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #bbb;
}

.container .outputBox {
    color: #000;
    font-size: 14px;
    float: top;
    resize: none;
    width: 100%;
    height: 47%;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #bbb;
}
</style>
</head>
<body>
<div class='container'>
<textarea class='inputBox' placeholder='put your code here.'></textarea>
<div class='button' onclick="restore()" >Restore</div>
<textarea class='outputBox' placeholder='code restored here.'></textarea>
</div>
</body>
</html>

Thank you for paying attention to this.

2 Likes
5

Thanks so much for sharing :smile: