Android Question Insert Properly a IMAGE into a HTML table

FabianGS · Oct 23, 2023

Basically, what I'm trying to do is add an image into a HTML table, this HTML table was exported from a b4xTable format so i can print it or see as a PDF file.
But looks like my image doesn't exist, also i add this IMG to the project and set it directly like a normal HTML line of code but this doesn't work.
What am i doing wrong?

Print Table to HTML:

Public Sub PrintTable(Table As B4XTable, FileName As String)

    Dim printer As Printer
    printer.Initialize("printer")
    
    Dim PrintString As String = $"
    <!DOCTYPE html>
    <html>
    <head>
    <style>
        Table
        {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
            }
    
    td, th
         {
            border: 1px solid #dddddd;
            ''text-align: right;
            padding: 25px;
        }
    
    tr:nth-child(even)
        {
        background-color: #dddddd;
        }
        
    </style>
    </head>
    <body>
    <img src="file:///android_asset/logo.png" alt="IMG" height ="1000" width ="1000"> ''//////////HERE
    <h2 align = "left">Proyecto: ${FileName}</h2>
    <h4 align = "right">Fecha: ${DateUtils.TicksToString(DateTime.Now)}</h4>
    <h4 align = "right">Empresa: ${Crear.Empresa} Encargado DCA: ${Crear.EncargadoDCA} Folio: ${Folio.Text}</h4>
    <h4 align = "right">Fecha Inicio: ${Crear.DATEIn} Fecha Fin: ${Crear.DATEFin}</h4>
    <h4 align = "right">Deposito Final: ${TotalDepositos} Gasto Final: ${TotalGastos} Total: ${TotalSum}</h4>
    <Table><tr>
    "$
    
    '"file:///android_asset/buttonpopup.png"
    'File:///android_asset/ldlogo.jpg"
        
    For Each Column As B4XTableColumn In Table.Columns
        PrintString = PrintString & $"<th>${Column.Title}</th>${CRLF}"$
    Next
    PrintString = PrintString & "</tr>"
    
    For i = 1 To Table.Size
        PrintString = PrintString & "<tr>"
        For Each Column As B4XTableColumn In Table.Columns
            Dim Row As Object = Table.GetRow(i).Get(Column.Title)
            PrintString = PrintString & $"<td>${Row}</td>${CRLF}"$
        Next
        PrintString = PrintString & "</tr>"
    Next
    PrintString = PrintString & "</table>"
    
    printer.PrintHtml("job", $"${PrintString}"$)
End Sub

Erel · Oct 24, 2023

Check this: https://www.b4x.com/android/forum/threads/b4x-use-webview-to-show-large-images.102910/#content

FabianGS · Oct 24, 2023

Erel said:
Check this: https://www.b4x.com/android/forum/threads/b4x-use-webview-to-show-large-images.102910/#content

Didnt work, this is just like a 512x512 pixels. I just need to add it into my HTML table and then show it in the PDF file that i just created when i use the "Print" library. I tried to replicate this project from here: https://www.b4x.com/android/forum/threads/printing-and-pdf-creation.76712/ but didnt work.
I insert again the images that i want to show but nothing happens

Print PDF with Image:

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.
    Private xui As XUI
End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    Private printer As Printer
    Dim pdf As PdfDocument
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Layout")
    
    printer.Initialize("printer")
    pdf.Initialize
    pdf.StartPage(595, 842) 'A4 size
    pdf.Canvas.DrawLine(2, 2, 593 , 840, Colors.Blue, 4)
    pdf.Canvas.DrawText("Hello", 100, 100, Typeface.DEFAULT_BOLD, 30 / GetDeviceLayoutValues.Scale , Colors.Yellow, "CENTER")
    pdf.FinishPage
    Dim out As OutputStream = File.OpenOutput(File.DirInternal, "1.pdf", False)
    pdf.WriteToStream(out)
    out.Close
    pdf.Close
    
    
    Print
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub Button1_Click
    xui.MsgboxAsync("Hello world!", "B4X")
End Sub

Sub Print
    'printer.PrintHtml("job", $"<img src=${WebViewAssetFile("logo.png")}/>"$)
    printer.PrintHtml("job", $"<b>Hello world!!!</b><br/>
    <h1>second line</h1>
    <img src="file://${File.Combine(File.DirRootExternal, "logo.png")}"/>"$)
End Sub

Sub WebViewAssetFile (FileName As String) As String
    Dim jo As JavaObject
    jo.InitializeStatic("anywheresoftware.b4a.objects.streams.File")
    If jo.GetField("virtualAssetsFolder") = Null Then
        Return "file:///android_asset/" & FileName.ToLowerCase
    Else
        Return "file://" & File.Combine(jo.GetField("virtualAssetsFolder"), _
  jo.RunMethod("getUnpackedVirtualAssetFile", Array As Object(FileName)))
    End If
End Sub

Erel · Oct 25, 2023

1. Switch to B4XPages.
2. Code with File.DirRootExternal will never work.
3. The code here replaces WebViewAssetFile: https://www.b4x.com/android/forum/threads/b4x-use-webview-to-show-large-images.102910/#content

Android Question Insert Properly a IMAGE into a HTML table

FabianGS

Member

Erel

Erel

B4X founder

FabianGS

Member

Erel

B4X founder

Similar Threads