ERLANG wx widget load png

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.