Page 1 of 1

How to include images in Apps?

Posted: Tue Sep 10, 2019 12:58 pm
by 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

Re: How to include images in Apps?

Posted: Tue Sep 10, 2019 1:13 pm
by 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

Re: How to include images in Apps?

Posted: Wed Sep 11, 2019 6:20 am
by 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

Re: How to include images in Apps?

Posted: Wed Sep 11, 2019 7:04 am
by Dirk Geppert
:o 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

Re: How to include images in Apps?

Posted: Thu Sep 12, 2019 10:25 am
by 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")