Updated minifier/converter

This commit is contained in:
Stefan Kremser
2017-05-26 21:04:39 +02:00
parent 91bee7f90e
commit 630d7fc220
6 changed files with 96 additions and 65 deletions

View File

@@ -7,6 +7,18 @@
border-radius:4px;
margin-top: 0;
}
input,
.button,
button,
textarea{
border-radius: 4px;
border: 1px solid #bbb;
padding: 0 6px;
}
textarea{
width: 96%;
height: 350px;
}
nav,
nav a{
background: #222;
@@ -73,6 +85,9 @@ td{
.padding{
padding: 0 1rem;
}
.fullWidth{
width: 100%
}
#error{
text-align: center;
color: #fff;
@@ -91,8 +106,6 @@ a{
cursor: pointer;
}
input{
border-radius: 4px;
border: 1px solid #bbb;
padding: 3px;
}
.button,
@@ -100,7 +113,6 @@ button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
padding: 0 6px;
display: inline-block;
height: 31px;
color: #555;
@@ -113,8 +125,6 @@ input[type="button"] {
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box; }
.button:hover,

71
web_server/index.html Normal file
View File

@@ -0,0 +1,71 @@
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Byte Converter</title>
<meta name="description" content="OConvert Text into Hex-Bytes">
<meta name="author" content="Spacehuhn - Stefan Kremser">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="html/style.css">
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<nav>
<a href="index.html">Converter</a>
<a href="https://github.com/spacehuhn" class="right">GitHub</a>
</nav>
<div class="container">
<div class="row">
<div class="col-12">
<h1 class="header">Text to Byte Array Converter</h1>
<p>
Please use <a href="https://htmlcompressor.com/compressor/">HTMLCompressor</a> first to get your HTML, CSS and JS minified.<br />
Every saved byte can improve the stability of the ESP8266's webserver!<br />
</p>
</div>
</div>
<div class="row">
<div class="col-6">
<textarea id="input"></textarea>
</div>
<div class="col-6">
<textarea id="output" onclick="this.focus();this.select()" readonly="readonly"></textarea>
</div>
</div>
<div class="row">
<div class="col-12">
<button onclick="convert()" class="fullWidth button-primary">convert</button>
</div>
</div>
<div class="row">
<div class="col-12">
<p>Length: <span id="info_len">0</span> Bytes</p>
</div>
</div>
<div id="copyright">
version 1.5<br />
Copyright (c) 2017 Stefan Kremser<br />
<a href="https://github.com/spacehuhn" target="_blank">github.com/spacehuhn</a><br />
</div>
</div>
<script>
String.prototype.convertToHex = function (delim) {
return this.split("").map(function(c) {
return ("0" + c.charCodeAt(0).toString(16)).slice(-2);
}).join(delim || "");
};
function convert(){
var input = $('#input').val().convertToHex(",0x");
$('#output').val("0x"+input);
$('#info_len').html((input.match(new RegExp(",", "g")) || []).length + 1);
}
</script>
</body>
</html>

4
web_server/jquery-3.2.1.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -1,51 +0,0 @@
<html>
<head>
<script src="jquery.js"></script>
<script>
function miniEsc(){
var input = $('#input').val().replace(/\/\*(\*(?!\/)|[^*])*\*\//g, '').replace(/\r\n|\r|\n/g," ").replace( /\s\s+/g, ' ' ).replace(/"/g, '\\"' );
$('#output').val(input);
$('#info1').html($('#input').val().length);
$('#info2').html(input.length);
}
function mini(){
var input = $('#input').val().replace(/\/\*(\*(?!\/)|[^*])*\*\//g, '').replace(/\r\n|\r|\n/g," ").replace( /\s\s+/g, ' ' );
$('#output').val(input);
$('#info1').html($('#input').val().length);
$('#info2').html(input.length);
}
String.prototype.convertToHex = function (delim) {
return this.split("").map(function(c) {
return ("0" + c.charCodeAt(0).toString(16)).slice(-2);
}).join(delim || "");
};
function byte(){
var input = $('#input').val().convertToHex(",0x");
$('#output').val("0x"+input);
$('#info1').html($('#input').val().length);
$('#info2').html(input.length);
}
function byteAndmini(){
var input = "0x"+$('#input').val().replace(/\/\*(\*(?!\/)|[^*])*\*\//g, '').replace(/\r\n|\r|\n/g," ").replace( /\s\s+/g, ' ' ).convertToHex(",0x");
$('#output').val(input);
$('#info1').html($('#input').val().length);
$('#info2').html(input.length);
}
</script>
</head>
<body>
<textarea id="input" rows="50" cols="100"></textarea><br />
<p id="info1"></p>
<button onclick="mini()">minify</button>
<button onclick="miniEsc()">minify + escape</button>
<button onclick="byte()">byte-ify</button>
<button onclick="byteAndmini()">minify + byte-ify</button><br />
<textarea id="output" rows="50" cols="100"></textarea><br />
<p id="info2"></p>
</body>
</html>

View File

@@ -1,7 +1,8 @@
**1** open minifier.html
**2** paste the html code in the upper textfield
**3** click on `minifiy + byte-ify`
**4** copy the results
**5** go to data.h and replace the array (of the changed html file) with the copied bytes
**1** Use a minifier (e.g. htmlcompressor.com) to get your files as small as possible
**2** Open converter.html
**3** Paste the code in the left textfield
**4** Press Convert
**5** Copy the results from the right textfield
**6** Go to data.h and replace the array of the changed file with the copied bytes
**now compile and upload your new sketch :)**