Automatically generate WebStaticData.h from source files

[Wandmalfarbe]

It would be beneficial to store the static assets in their original file format (e.g. favicon.ico or github-icon.svg) and use a script to convert them to C code needed for WebStaticData.h. This way the assets can be maintained without poking around in C code or forgetting a null terminator after editing the CSS.

The added bonus would be that one can optimize the files with external plugins like svgo or jsmin before writing them to the file. One can take a look at WI-PWN for inspiration although I would use a simple (bash/python/...) script to generate the file.

[Grovkillen]

This is a good suggestion and we'll need to do something like this for the future. Thanks for making an issue. 👍

[TD-er]

That's one thing that will be added in the future.
It will also allow users to add new icons themselves.

Only reason it hasn't yet is because I wasn't sure yet about the format and I was also thinking about loading those assets as files to the SPIFF.

Thanks for the links though!

[Wandmalfarbe]

Just for completeness: I created a script for this task a while ago. It is basically a copy of a script by Erick B. Tedeschi and spacehuhn. The repo for the esp8266_deauther also contains another (python) script for this task.

#!/bin/bash

#
# This script walks through the assets folder and minifys all JS, HTML, CSS and SVG files. It also generates
# the corresponding constants that are added to the data.h file on esp8266_deauther folder.
#
# @Author Erick B. Tedeschi < erickbt86 [at] gmail [dot] com >
# @Author Wandmalfarbe https://github.com/Wandmalfarbe
#

outputfile="$(pwd)/data_h_temp"

rm $outputfile

function minify_html_css {
	file=$1
	curl -X POST -s --data-urlencode "input@$file" http://html-minifier.com/raw > /tmp/converter.temp
}

function minify_js {
	file=$1
	curl -X POST -s --data-urlencode "input@$file" https://javascript-minifier.com/raw > /tmp/converter.temp
}

function minify_svg {
	file=$1
	svgo -i /Users/User/Desktop/icons/tools.svg -o - > /tmp/converter.temp
}

function ascii2hexCstyle {
	file_name=$(constFileName $1)
	result=$(cat /tmp/converter.temp | hexdump -ve '1/1 "0x%.2x,"')
	result=$(echo $result | sed 's/,$//')
	echo "const char DATA_${file_name}[] PROGMEM = {$result};"
}

function constFileName {
	extension=$(echo $1 | egrep -io "(json|svg|css|js|html)$" | tr "[:lower:]" "[:upper:]")
	file=$(echo $1 | sed 's/\.json//' | sed 's/\.svg//' | sed 's/\.css//' | sed 's/\.html//' | sed 's/\.js//' | sed 's/\.\///' | tr '/' '_' | tr '.' '_' | tr '-' '_' | tr "[:lower:]" "[:upper:]")
	underscore="_"
	echo $file$underscore$extension
}


cd assets
file_list=$(find . -type f)

for file in $file_list; do
	echo "Processing: $file"
	file_name=$(constFileName $file)
	echo "  Array Name: $file_name"

	if [[ "$file" == *.min.js ]]; then
		echo "  JS already minified"
		cat $file > /tmp/converter.temp
		ascii2hexCstyle $file >> $outputfile
	elif [[ "$file" == *.js ]]; then
		echo "  JS minify"
		minify_js $file
		ascii2hexCstyle $file >> $outputfile
	elif [[ "$file" == *.min.css ]]; then
		echo "  CSS already minified"
		cat $file > /tmp/converter.temp
		ascii2hexCstyle $file >> $outputfile
	elif [[ "$file" == *.html ]] || [[ "$file" == *.css ]]; then
		echo "  HTML and CSS minify"
		minify_html_css $file
		ascii2hexCstyle $file >> $outputfile
	elif [[ "$file" == *.svg ]]; then
		echo "  SVG minify"
		minify_svg $file
		ascii2hexCstyle $file >> $outputfile
	else
		echo "  without minifier"
		cat $file > /tmp/converter.temp
		ascii2hexCstyle $file >> $outputfile
	fi
	echo ""
	sleep 1
done

[TD-er]

I will try to do this, so we can minify all embedded JavaScript.
Maybe it is also a good idea to leave the code readable for builds which have 4 MB flash.

[Grovkillen]

Ooooh, sweet music to my ears @TD-er :)

[tonhuisman]

This seems to be solved, so can be closed.