How to include images in Apps?

[Dirk Geppert]

Hello, everybody,

how can I integrate images into an app to be created? Or is it only possible to download images from the web?

Ciao Dirk

[Peter]

Hello Dirk,

you could convert your images to Base64 and then integrate them into the source (time consuming, but feasible).

For decoding you would have to write a wrapper (JavaScript can do that by default), because SpiderBasic doesn't have this functionality.

Greetings ... Peter

[Dirk Geppert]

Thx Peter, good hint! I'll convert all images to Base64 and then load the strings with LoadImage()..

@Fred: would be nice if we could use:

Code: Select all

DataSection
  IncludeBinary "image.png"
EndDataSection

Greetz Dirk

[Dirk Geppert]

A literal string can't be bigger than 8192 characters.

Ok, I've build quick and dirty a converter. Maybe somebody else could need it.

Code: Select all

Procedure Convert ()
  dummy.s = GetGadgetText(0)
  
  dummy = ReplaceString(dummy, #CRLF$, "")
  dummy = ReplaceString(dummy, #LF$, "")
  
  n = 1
  l = Len(dummy)
  txt.s = ~"txt.s = \"\"" + #CRLF$
  
  Repeat
    
    txt + ~"txt + \"" + Mid (dummy, n, 75) + ~"\"" + #CRLF$
    n + 75
  Until n > l

  SetGadgetText(1, txt)
  SetGadgetText(6, "Text Len: " + Str(l) + " | Converted:  " + Str(Len(txt)))
EndProcedure

Procedure LoadFile ()
  Protected file.s, FileID, *mem, dummy.s
  
  file = OpenFileRequester( "Load File", "", "Images (*.jpg)|*.jpg;*.jpeg;*.png;*.ico;*.svg|All Files (*.*)|*.*", 0)
  
  If file = ""
    SetGadgetText(0, "") : SetGadgetText(1, "")
    ProcedureReturn 
  EndIf
  
  
  Select LCase(GetExtensionPart(file))
    Case "jpg", "jpeg" : dummy = "data:image/jpeg;base64,"
    Case "png"         : dummy = "data:image/png;base64,"
    Case "svg"         : dummy = "data:image/svg+xml;base64,"
  EndSelect
  
  FileID = ReadFile(#PB_Any, file)
  
  If FileID
    *mem = AllocateMemory(Lof(FileID))
    If *mem
      ReadData(FileID, *mem, Lof(FileID))
      
      dummy + Base64Encoder(*mem, MemorySize(*mem))
      
      FreeMemory(*mem)
    EndIf
    
    CloseFile(FileID)
  EndIf
  
  SetGadgetText(0, dummy)
  
  Convert()
  
  
EndProcedure

Procedure Main()
  
  OpenWindow(0, 0, 0, 900, 740, "Format Text", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
  
  EditorGadget(0, 10, 10, 880, 300, #PB_Editor_WordWrap)
  EditorGadget(1, 10, 310, 880, 300, #PB_Editor_WordWrap)
  
  ButtonGadget(2, 10, 660, 200, 40, "Paste from Clipbord")
  ButtonGadget(3, 220, 660, 200, 40, "Copy to Clipbord")
  ButtonGadget(4, 430, 660, 100, 40, "Clear")
  ButtonGadget(7, 540, 660, 100, 40, "Load File")
  ButtonGadget(5, 690, 660, 200, 40, "Quit")
  
  TextGadget(6, 10, 620, 880, 30, "" )
  
  SetGadgetText(0, GetClipboardText()) 
  Convert()
  
EndProcedure

Main()


Repeat
  
  Event = WaitWindowEvent()
  
  If Event = #PB_Event_Gadget
    
    Select EventGadget()
      Case 2 : SetGadgetText(0, GetClipboardText()) : Convert()
      Case 3 : SetClipboardText( GetGadgetText(1))
      Case 4 : SetGadgetText(0, "") : SetGadgetText(1, "")
      Case 5 : Event = #PB_Event_CloseWindow  
      Case 7 : LoadFile()  
    
    EndSelect
    
  EndIf
  

Until Event = #PB_Event_CloseWindow

[MarkOtt]

And here is a short working example showing the current time and a small image:

Code: Select all

Enumeration
  #mf
  #mfFont
  #mfTime
  #image1
  #image2
EndEnumeration

Declare Start()
Declare ShowTime()

;No debug window
CloseDebugOutput()


; Include Images as URL

; logo.png  48x48  1.34 KB
Image1url.s = ""
Image1url + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR"
Image1url + "0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAT6SURBVGhD7Zpf"
Image1url + "ax1VFMVDoQE/gI/6XNAS8QP44kewotiQm1hjEk0wJqkxARGklVaQ9lUQQQRfxJegqC3VEA2ScDG"
Image1url + "EhlIbYyKJaWK8pa3FmKfjXqdnT/acu8+Zf1e8ggOLOUnuDL+1Z+07Z+ak4/+tzbYjpKOkzjYXGM"
Image1url + "Ga2o5MXWwY6PULe1avvbtjdfqdbauJc5tm8vyGmXh704yd3Yhq4uzqfZ1ZNeNv/Wg19ua1RKNvr"
Image1url + "JhXppfN8PSK1cjUkhk6vWSGJ+tWL48vmKFXv080OPqd1cDInCHWB0kPgBngvB0F/MGBaVtd/cWw"
Image1url + "geMkmMCVSLZONjDzkzFf/Uz7NWM+o/0XtMfPl9eN+XrDmFk60Sztv900Zn7LmMVfjalvG/PDjtP"
Image1url + "N+1qm8fKu23u6+tuhrmXo+p4b03HOwBOkh8AMcN46ERs2wPB9AysW/DKNJfw8wS8SNJTAZ4AXgQ"
Image1url + "7JGXiS9DCYAc7boQHAu6tgDQj4pOoOvqnqAPfgi0Cj2kH9nmEADQsDqDxHBgaa4EVkHju+ZB7vq"
Image1url + "lcWzqNCS+U1wPCoPAxo4qprMGV1gwCzlMuAzDxg1WZ1kdFAyuoGVTml0gYcPGIDAwwv827zrWQ9"
Image1url + "T65TUPjZ/W6tka2oAdysYEBmHgay4GNNqoLnhcbfPeUyIBsWBmRsfPhHji2occgrHJ+CFQbWbzU"
Image1url + "ragBTBWuArgDHBgY0ceU1qKIKwa7j956iBjDPgQG+SaHygOXKMzjDIyJdj1a7AjjeB966HVb8Ct"
Image1url + "AkDQbkTSoxQLGRlc+bdRkJjohWZQ1WU9QAZpFsgJvWQrvMY6w1bBO826fgnSS4Bght3wkrlwHZt"
Image1url + "DI2bCAPfCuaextmPOUyIL9xfANZ4kprUEW1e9c0qf+lbyI9QA8g1gDBa7nHOFZ5GZVWNHclA37u"
Image1url + "Aa0Z0OChUNZtll0cdmls5UHuRRQ3QI9/MGAjEzHgw2NfCp6AVOg/DtXwFDWA51ZrwMGzAa46xil"
Image1url + "4Jw2+ahOzcJ7iBhy8n3uMs8SV12DKqnGP4J1eGLwSNoC3BTEDfnSSyrurIGNTtYlZOM9tAmflNl"
Image1url + "Aq9w4+lnfOuIyFrLCEtfozrZYZiMFLA3nhNei7ik69eClsAC+bYIDh2UCw+m5fpWFxrATXoKX6B"
Image1url + "yIG8KZMMxASV18DKyIVfF/Xqf4vwwbwii90BbTq2+iQqjQsjtXA7znt/5VWb9/n2QYYXjNg4Z1C"
Image1url + "jcu55xtTMO8BcB9aqvf5mbABvGCNGhDVZwOpxhXwatOWhAcTq9YXMYC3w9IAwGEgq/qtuuuycD4"
Image1url + "JLdXT82kkQpN1+yHfQEhsQIOoKh+cVStqgOODqlto17gyPq2667JwPh+c1X3yk7ABLCrgQ9JAkn"
Image1url + "tpgMZq82rZp7wn2fdyLzPvg4ZU644YwEoIPqRVP2oA8F7zao1bFR6qPfdxdQMMnqq+/Ook8FY1t"
Image1url + "t/QlQ1kiQ1oMGVV2ADew0sDiQnac4SargCByyvQqsb2G7rn2Y9yGHDwZQ005d9rXs5+0fxDtWc+"
Image1url + "LGAAUSL9UwZ8uDyqPf1B2ADWYVc2qQfomdjCCyP2TvwvG9inY2sn3g8bGBiZs2++iggP2b7w1MT"
Image1url + "CAwjm8JgGYyaJyRjmM5gS4K6KGxO+29GcLOQcUUG15Rjw3U+9BwPqMisWjbF4jEVkfAAu21FgUx"
Image1url + "e6sWyP5Xv8Ae5widpRYFP/1QDbf+yfPTo6/gbDgLzTZZ6zEAAAAABJRU5ErkJggg=="


Procedure Start()
 
  LoadFont(#mfFont, "", 50)
 
  OpenWindow(#mf, 0, 0, 0, 0, "", #PB_Window_Background)
  TextGadget(#mfTime, 10, 100, 300, 50, "00:00:00")
  SetGadgetFont(#mfTime, FontID(#mfFont))
  
  ImageGadget(#image1, 10, 200, 48, 48, ImageID(1))
  ;ImageGadget(#image2, 10, 300, 662, 675, ImageID(2))
 
  AddWindowTimer(#mf, 0, 1000)
  BindEvent(#PB_Event_Timer, @ShowTime())
EndProcedure

Procedure ShowTime()
  Protected Time.s = FormatDate("%hh:%ii:%ss", Date())
  SetGadgetText(#mfTime, Time)
EndProcedure


;Load all external objects then show MainWindow
Global NumberExternalObjects.l

Procedure LoadingError(Type, Filename$, ObjectId)
  Debug "Loading error: " + Filename$
EndProcedure

Procedure LoadingObjects(Type, Filename$, ObjectId)
  Static CountLoadedObjects
  CountLoadedObjects + 1
  ;Start if all external objects loaded
  If CountLoadedObjects = NumberExternalObjects
    UnbindEvent(#PB_Event_Loading, @LoadingObjects())
    UnbindEvent(#PB_Event_LoadingError, @LoadingError())
    Start()
  EndIf
EndProcedure
  
BindEvent(#PB_Event_Loading, @LoadingObjects())
BindEvent(#PB_Event_LoadingError, @LoadingError())

; External objects
NumberExternalObjects.l = 1    ; <<<<<<<<< ADJUST
LoadImage(1, Image1url)     ; Load embedded image
;LoadImage(2, "http://www.server.com/image.jpg")