Refactor using better Godot and JavaScript API and add an example

This commit is contained in:
yiyuezhuo 2022-05-08 01:11:47 +08:00 committed by Miks Ramāns
parent a5ca12fd6d
commit 4af1125541
8 changed files with 166 additions and 80 deletions

View File

@ -1 +1,8 @@
# HTML5 File Exchange for Godot 3.2 # HTML5 File Exchange for Godot 3.2
## Usage
* Copy addons to your project.
* Enable the plugin. (A `HTML5File` singleton should be added into autoload list).
* Add a HTML5 export item to enable HTML5 debugging option.
* Check sample.tscn for usage.

View File

@ -1,24 +1,21 @@
extends Node extends Node
signal InFocus signal read_completed
signal load_completed(image)
var js_callback = JavaScript.create_callback(self, "load_handler");
var js_interface;
func _ready(): func _ready():
if OS.get_name() == "HTML5" and OS.has_feature('JavaScript'): if OS.get_name() == "HTML5" and OS.has_feature('JavaScript'):
_define_js() _define_js()
js_interface = JavaScript.get_interface("_HTML5FileExchange");
func _notification(notification:int) -> void:
if notification == MainLoop.NOTIFICATION_WM_FOCUS_IN:
emit_signal("InFocus")
func _define_js()->void: func _define_js()->void:
#Define JS script #Define JS script
JavaScript.eval(""" JavaScript.eval("""
var fileData; var _HTML5FileExchange = {};
var fileType; _HTML5FileExchange.upload = function(gd_callback) {
var fileName;
var canceled;
function upload() {
canceled = true; canceled = true;
var input = document.createElement('INPUT'); var input = document.createElement('INPUT');
input.setAttribute("type", "file"); input.setAttribute("type", "file");
@ -29,56 +26,32 @@ func _define_js()->void:
canceled = false;} canceled = false;}
var file = event.target.files[0]; var file = event.target.files[0];
var reader = new FileReader(); var reader = new FileReader();
fileType = file.type; this.fileType = file.type;
fileName = file.name; // var fileName = file.name;
reader.readAsArrayBuffer(file); reader.readAsArrayBuffer(file);
reader.onloadend = function (evt) { reader.onloadend = (evt) => { // Since here's it's arrow function, "this" still refers to _HTML5FileExchange
if (evt.target.readyState == FileReader.DONE) { if (evt.target.readyState == FileReader.DONE) {
fileData = evt.target.result; this.result = evt.target.result;
gd_callback(); // It's hard to retrieve value from callback argument, so it's just for notification
} }
} }
}); });
} }
function download(fileName, byte) {
var buffer = Uint8Array.from(byte);
var blob = new Blob([buffer], { type: 'image/png'});
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
};
""", true) """, true)
func load_handler(_args):
emit_signal("read_completed")
func load_image():
func load_image()->Image:
if OS.get_name() != "HTML5" or !OS.has_feature('JavaScript'): if OS.get_name() != "HTML5" or !OS.has_feature('JavaScript'):
return return
#Execute js function js_interface.upload(js_callback);
JavaScript.eval("upload();", true) #opens promt for choosing file
yield(self, "read_completed")
#label.text = "Wait for focus" var imageType = js_interface.fileType;
yield(self, "InFocus") #wait until js promt is closed var imageData = JavaScript.eval("_HTML5FileExchange.result", true) # interface doesn't work as expected for some reason
#label.text = "Timer on for loading"
yield(get_tree().create_timer(0.1), "timeout") #give some time for async js data load
if JavaScript.eval("canceled;", true): # if File Dialog closed w/o file
#label.text = "Canceled prompt"
return
# use data from png data
#label.text = "Load image"
var imageData
while true:
imageData = JavaScript.eval("fileData;", true)
if imageData != null:
break
#label.text = "No image yet"
yield(get_tree().create_timer(1.0), "timeout") #need more time to load data
var imageType = JavaScript.eval("fileType;", true)
var imageName = JavaScript.eval("fileName;", true)
var image = Image.new() var image = Image.new()
var image_error var image_error
@ -90,39 +63,18 @@ func load_image()->Image:
"image/webp": "image/webp":
image_error = image.load_webp_from_buffer(imageData) image_error = image.load_webp_from_buffer(imageData)
var invalidType: var invalidType:
#label.text = "Unsupported file format - %s." % invalidType print("Unsupported file format - %s." % invalidType)
return return
if image_error: if image_error:
#label.text = "An error occurred while trying to display the image." print("An error occurred while trying to display the image.")
return
else: emit_signal("load_completed", image)
return image
# Display texture
var tex = ImageTexture.new()
tex.create_from_image(image, 0) # Flag = 0 or else export is fucked!
Sprite.texture = tex
#loadedImage = image # Keep Image for later, just in case...
#loadedImageName = imageName
#label.text = "Image %s loaded as %s." % [imageName, imageType]
return
#label.text = "Something went wrong"
func save_image(image:Image, fileName:String = "export.png")->void:
func save_image(image:Image, fileName:String = "export")->void:
if OS.get_name() != "HTML5" or !OS.has_feature('JavaScript'): if OS.get_name() != "HTML5" or !OS.has_feature('JavaScript'):
return return
image.clear_mipmaps() image.clear_mipmaps()
if image.save_png("user://export_temp.png"): var buffer = image.save_png_to_buffer()
#label.text = "Error saving temp file" JavaScript.download_buffer(buffer, fileName)
return
var file:File = File.new()
if file.open("user://export_temp.png", File.READ):
#label.text = "Error opening file"
return
var pngData = Array(file.get_buffer(file.get_len())) #read data as PoolByteArray and convert it to Array for JS
file.close()
var dir = Directory.new()
dir.remove("user://export_temp.png")
JavaScript.eval("download('%s', %s);" % [fileName, str(pngData)], true)
#label.text = "Saving DONE"

View File

@ -0,0 +1,19 @@
extends TextureRect
# Called when the node enters the scene tree for the first time.
func _ready():
pass # Replace with function body.
func _on_UploadButton_pressed():
HTML5File.load_image()
var image = yield(HTML5File, "load_completed")
var tex = ImageTexture.new()
tex.create_from_image(image, 0)
texture = tex;
func _on_DownloadButton_pressed():
var image = texture.get_data()
HTML5File.save_image(image, "image.png")

View File

@ -0,0 +1,35 @@
[gd_scene load_steps=2 format=2]
[ext_resource path="res://addons/HTML5FileExchange/Sample.gd" type="Script" id=1]
[node name="Control" type="Control"]
anchor_right = 1.0
anchor_bottom = 1.0
[node name="VBoxContainer" type="VBoxContainer" parent="."]
margin_right = 40.0
margin_bottom = 40.0
[node name="HBoxContainer" type="HBoxContainer" parent="VBoxContainer"]
margin_right = 136.0
margin_bottom = 20.0
[node name="UploadButton" type="Button" parent="VBoxContainer/HBoxContainer"]
margin_right = 57.0
margin_bottom = 20.0
text = "Upload"
[node name="DownloadButton" type="Button" parent="VBoxContainer/HBoxContainer"]
margin_left = 61.0
margin_right = 136.0
margin_bottom = 20.0
text = "Download"
[node name="TextureRect" type="TextureRect" parent="VBoxContainer"]
margin_top = 24.0
margin_right = 136.0
margin_bottom = 24.0
script = ExtResource( 1 )
[connection signal="pressed" from="VBoxContainer/HBoxContainer/UploadButton" to="VBoxContainer/TextureRect" method="_on_UploadButton_pressed"]
[connection signal="pressed" from="VBoxContainer/HBoxContainer/DownloadButton" to="VBoxContainer/TextureRect" method="_on_DownloadButton_pressed"]

7
default_env.tres Normal file
View File

@ -0,0 +1,7 @@
[gd_resource type="Environment" load_steps=2 format=2]
[sub_resource type="ProceduralSky" id=1]
[resource]
background_mode = 2
background_sky = SubResource( 1 )

BIN
icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

35
icon.png.import Normal file
View File

@ -0,0 +1,35 @@
[remap]
importer="texture"
type="StreamTexture"
path="res://.import/icon.png-487276ed1e3a0c39cad0279d744ee560.stex"
metadata={
"vram_texture": false
}
[deps]
source_file="res://icon.png"
dest_files=[ "res://.import/icon.png-487276ed1e3a0c39cad0279d744ee560.stex" ]
[params]
compress/mode=0
compress/lossy_quality=0.7
compress/hdr_mode=0
compress/bptc_ldr=0
compress/normal_map=0
flags/repeat=0
flags/filter=true
flags/mipmaps=false
flags/anisotropic=false
flags/srgb=2
process/fix_alpha_border=true
process/premult_alpha=false
process/HDR_as_SRGB=false
process/invert_color=false
process/normal_map_invert_y=false
stream=false
size_limit=0
detect_3d=true
svg/scale=1.0

31
project.godot Normal file
View File

@ -0,0 +1,31 @@
; Engine configuration file.
; It's best edited using the editor UI and not directly,
; since the parameters that go here are not all obvious.
;
; Format:
; [section] ; section goes between []
; param=value ; assign values to parameters
config_version=4
[application]
config/name="HTML5-File-Exchange-for-Godot"
run/main_scene="res://addons/HTML5FileExchange/sample.tscn"
config/icon="res://icon.png"
[autoload]
HTML5File="*res://addons/HTML5FileExchange/HTML5FileExchange.gd"
[editor_plugins]
enabled=PoolStringArray( "res://addons/HTML5FileExchange/plugin.cfg" )
[physics]
common/enable_pause_aware_picking=true
[rendering]
environment/default_environment="res://default_env.tres"