ERLANG wx widget load png - erlang

Question

I tried to build a GUI that includes a PNG photo.
The code of the PNG loading works fine when loads on to an empty frame,
but on this code i cannot see the photo.
I tried to change options of the wxBoxSizers and the location {0,0} on the panel, but i still cannot see the photo.
Any help?
First, i set up all of the frames and components
-module(neuron_wx).
-author("adisolo").
%% API
-export([start/0, handleButtonStart/2]).
-include_lib("wx/include/wx.hrl").
-record(data, {env, file}).
%% Will get the pid of server
%% will send the information on button pressing
start() ->
%%Frame and components build
WX = wx:new(),
Frame = wxFrame:new(wx:null(), 1, "Top Frame"),
TopTxt = wxStaticText:new(Frame, ?wxID_ANY, "Analog Neuron final Project"), %%?wxID_ANY
%L Components
TextConfiguration = wxStaticText:new(Frame, ?wxID_ANY, "Program Configuration"), %%?wxID_ANY
TextSetNumNeurons = wxStaticText:new(Frame, ?wxID_ANY, "Enter number of Neurons per Layer"), %%?wxID_ANY
TextCtrlNeurons = wxTextCtrl:new(Frame, ?wxID_ANY, [{value, "example:4 3 6 7"}]),
ButtonBuild = wxButton:new(Frame, ?wxID_ANY, [{label, "Build"}]), %{style, ?wxBU_LEFT}
FilePickerInput = wxFilePickerCtrl:new(Frame, ?wxID_ANY),
ButtonStart = wxButton:new(Frame, ?wxID_ANY, [{label, "Start"}]),
%Buttons
wxButton:connect(ButtonStart, command_button_clicked, [{callback, fun handleButtonStart/2}, {userData, #data{env = wx:get_env(), file=FilePickerInput}}]),
This is where i put in the panel and used the picture
%R Components
TextNet = wxStaticText:new(Frame, ?wxID_ANY, "Net Description"), %%?wxID_ANY
%% panel for picture
Panel = wxPanel:new(Frame),
%% bitmap
PictureDraw = wxImage:new("Erlang_logo.png"),
Picture = wxBitmap:new(PictureDraw),
wxPanel:connect(Panel, paint, [{callback,fun(WxData, _)->panelPictureUpdate(Picture, WxData)end}]),
%3 Components
TextOutput = wxStaticText:new(Frame, ?wxID_ANY, "Program Output"), %%?wxID_ANY
%%Font set
Font = wxFont:new(20, ?wxFONTFAMILY_ROMAN, ?wxFONTSTYLE_NORMAL, ?wxFONTWEIGHT_NORMAL),
wxTextCtrl:setFont(TopTxt, Font),
Font2 = wxFont:new(18, ?wxFONTFAMILY_ROMAN, ?wxFONTSTYLE_NORMAL, ?wxFONTWEIGHT_NORMAL),
wxTextCtrl:setFont(TextConfiguration, Font2),
wxTextCtrl:setFont(TextOutput, Font2),
wxTextCtrl:setFont(TextNet, Font2),
Font3 = wxFont:new(12, ?wxFONTFAMILY_ROMAN, ?wxFONTSTYLE_NORMAL, ?wxFONTWEIGHT_NORMAL),
wxTextCtrl:setFont(TextSetNumNeurons, Font3),
%%Sizer Attachment
MainSizer = wxBoxSizer:new(?wxVERTICAL),
MainSizer2 = wxBoxSizer:new(?wxHORIZONTAL),
MainSizerL = wxBoxSizer:new(?wxVERTICAL),
MainSizerR = wxBoxSizer:new(?wxVERTICAL),
MainSizer3 = wxBoxSizer:new(?wxVERTICAL),
wxSizer:add(MainSizer, TopTxt, [{flag, ?wxALIGN_TOP bor ?wxALIGN_CENTER}, {border, 5}]),
wxSizer:add(MainSizer, MainSizer2), %,[{flag, ?wxALIGN_CENTER}]),
wxSizer:add(MainSizer, MainSizer3),
wxSizer:add(MainSizer2, MainSizerL, [{border, 5}]),%{flag, ?wxALIGN_LEFT},
wxSizer:add(MainSizer2, MainSizerR, [{border, 5}]),%{flag, ?wxALIGN_RIGHT},
%% Assign to L
lists:foreach(fun(X)-> wxSizer:add(MainSizerL, X, [{flag, ?wxALL bor ?wxEXPAND}, {border, 8}]) end,
[TextConfiguration, TextSetNumNeurons, TextCtrlNeurons, ButtonBuild, FilePickerInput, ButtonStart]),
%wxSizer:add(MainSizerL, TextConfiguration, [{flag, ?wxALL bor ?wxEXPAND}, {border, 5}]),
%wxSizer:add(MainSizerL, TextSetNumNeurons, [{flag, ?wxALL bor ?wxEXPAND}, {border, 5}]),
%wxSizer:add(MainSizerL, TextCtrlL, [{flag, ?wxALL bor ?wxEXPAND}, {border, 5}]),
%% Assign to R
wxSizer:add(MainSizerR, TextNet, [{flag, ?wxALL bor ?wxALIGN_CENTRE }, {border, 8}]),
wxSizer:add(MainSizerR, Panel, [{flag, ?wxEXPAND}]),%, {proportion, 1}, {border, 8}]),
%% Assign to 3
wxSizer:add(MainSizer3, TextOutput, [{flag, ?wxALL bor ?wxALIGN_CENTRE }, {border, 8}]),
wxWindow:setSizer(Frame, MainSizer),
%%Show Frame
wxFrame:show(Frame).
handleButtonStart(WxData,_)->
%Get the userdata
Data=WxData#wx.userData,
wx:set_env(Data#data.env),
FilePicker = Data#data.file,
%Use the info
Frame = wxFrame:new(wx:null(), ?wxID_ANY, "Print"),
Text=io_lib:format("The file is: ~p~n", [wxFilePickerCtrl:getPath(FilePicker)]),
wxStaticText:new(Frame, ?wxID_ANY, Text),
wxFrame:show(Frame).
This is the draw of the picture to the panel (a callback of the panel 'paint')
I assume this isn't the problem in my code because it did work on the empty frame i tried.
% upload the picture to the panel
panelPictureUpdate(Picture, #wx{obj =Panel} ) ->
%% display picture
DC = wxPaintDC:new(Panel),
wxDC:drawBitmap(DC, Picture, {0,0}),
wxPaintDC:destroy(DC),
ok.

Answer 1

The problem was that the picture was not scaled correctly.
I used the paint handle of the panel:
wxPanel:connect(Panel, paint, [{callback,fun(WxData, _)->panelPictureUpdate({Frame,PictureDraw}, WxData)end}])
to redraw the picture each resize of the window.
{Width, Height} = wxPanel:getSize(Panel),
PictureDrawScaled = wxImage:scale(PictureDraw, Width, Height),
%% display picture
Picture = wxBitmap:new(PictureDrawScaled),
DC = wxPaintDC:new(Panel),
wxDC:drawBitmap(DC, Picture, {0,0}),
wxPaintDC:destroy(DC)
This way the picture is scaled to the size of the panel.

Answer 2

There is too much code here to read it comfortably, especially for someone who doesn't really know Erlang, but the problem is either that the picture is not being loaded correctly or that the panel is not sized correctly.
To check for the former, you should verify if the image/bitmap is valid (using its IsOk()). To check for the latter, you need to check that the panel is given enough space to expand to not only in its immediate parent sizer, but that this sizer itself is also positioned and sized correctly.
Finally, notice that you don't really need to draw the picture yourself anyhow, you could just use wxStaticBitmap instead.