Hello everyone,
I need to develop an app that allows me to do the following: take a series of photos (20-30), add them into a Microsoft Word document in .docx format, and download it locally on the device. Is it possible to do this without relying on external servers (to avoid large data traffic), but only through an extension (if one exists)?
This extension can be created, please DM me your budget.
Can you explain why it should be a docx?
Maybe this could help
I think @TIMAI2 's solution is the right one
"A simple html file for displaying images, using the webviewstring.
image.html.txt (611 Bytes)
(remove the ".txt" from the filename)
Place this html file in the same folder as the image files, then set image files to the webviewstring.
Credits @SHUBHAMR69 for the original file"
However, I’ve never worked with HTML files before and I don’t even know where to start. So far, I’ve downloaded the KIO4 extension to convert images into strings, and I’ve uploaded the HTML file provided by TIMAI2 into App Inventor. Now I have absolutely no idea how to proceed XD I tried relying on ChatGPT for some steps, but the results were disappointing — I still don’t understand how to integrate the Base64 string into the loaded HTML file.
This is my disappointing attempt.
Should we explore what you are attempting to achieve?
In your first post you indicate that you want to download a single file locally that contains all the images. What will the end user then be doing with this file?
File size will become of interest as well, if taking camera images, the container file could get up to 120mb or more. Should you consider resize of the images to suit viewing medium?
Provide links to topics where you get your html ideas from ("I think @TIMAI2 's solution is the right one")
It should be possible to manipulate a docx file (which is really just a zip file with lots of xml documents inside), but it would take some study to understand how to insert an image, handle pagination etc.
saving several images in a PDF file is also a good choice.
Apologies, I'll answer all the questions: the link to the topic where I mention your solution is the same one Peter pointed out above — I'm sharing it again.
I'll explain more clearly what the app needs to do: the user creates a project with a name X, takes a series of photos, and optionally adds lines of text as captions for each photo. Then everything is saved into a document, which can be in .docx, .pptx, or .html format — I don't care about the exact format, the IMPORTANT thing is that it must be EDITABLE later (so not a PDF).
At this point, the document is saved in the internal storage in a specific folder. Later on, the user can connect the device to a computer and download the folder, which will contain all the original photos and also the document. The document will include: TITLE, photo1 (caption), photo2 (caption), photoN (caption)...
If the document is already perfect as it is, the user can export/print it as a PDF; otherwise, they can still make changes (delete a photo or modify a caption).
I know that this type of file can end up being as large as 120 MB, but it doesn't matter, because the user will remove the entire folder from the device.
The folder that will be moved from the device to the computer should look approximately like this:
And the file (.docx, or ,pptx or .html) like this:
You might say: wouldn't it be easier to create the document with all the images and captions once you're already at the computer?
Actually, yes — but my job involves performing structural analyses on bridges and buildings. In a single workday, I visit more than 15 structures, and for each one I have to take many photos and create a photographic report with a short description for each image.
So, if when I return at the end of the day I already have 15 folders on my smartphone — one for each structure — with all the photos and a "rough" but pre-formatted photographic document, it makes my work a whole lot easier.
This app is almost complete — I’ve managed to include nearly everything I described above (taking photos, naming them as I want, saving them in a specific directory based on the project name, writing a line of text ABOVE the image).
The only thing I’m still missing is inserting the photos into a document that can be edited later and saving it locally.
You might consider this, or something similar:
I spent about an hour recreating the project, only to realize it’s not what I need.
What I need is something much simpler: I already have the photos in a specific folder, and with a button, I want to make sure all those photos end up inside an editable file.
I don’t need web viewers, list view, or anything like that.
1 Like
editable by what ?
Simplest is to build an html file with the image filenames and captions for viewing.
For transporting just create a zip file with all the images and html inside.
As I explained in the previous message, I want the photo and the document to end up in a folder that will later be moved to a computer. At that point, editing a .docx file only requires Microsoft Word. I've described the purpose of my app quite clearly above.
If, as you say, an HTML file is enough, could you tell me where I went wrong when creating the app? In the previous messages, I posted a screenshot with some blocks to create an HTML file, but it doesn't work.
1 Like
Could you explain, what exactly does not work?
It might be you need File scope Legacy...
Taifun
Herewith a simple html example:
Folder with html and image files
html
For "editable" you would manually edit (or automate a new entry to ) the array containing the description and the filename.
You could build your html file from a list of lists and the two parts of the html template:
Format/style your html as required
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet">
<head>
<title>ImageData</title>
<style>
</style>
</head>
<body>
<div id="divImages"></div>
<script>
var imageDataArray = [
["Orange Square","orangeSquare.png"],
["Purple Square","purpleSquare.png"],
["Green Square","greenSquare.png"],
["Red Square","redSquare.png"],
["Blue Square","blueSquare.png"]
];
for (var i=0;i<imageDataArray.length;i++) {
var newImg = '<img src="./' + imageDataArray[i][1] + '" style="width:100px;height:100px"><figcaption>' + imageDataArray[i][0] + '</figcaption><br><br>';
var tempContainer = document.createElement('div');
tempContainer.innerHTML = newImg;
document.getElementById("divImages").appendChild(tempContainer);
}
</script>
</body>
</html>
Webview
What volume of text would be associated with each photo?
Would it be short enough to serve as a file name, or would it be a full paragraph?