The MASM Forum

Projects => MasmBasic & the RichMasm IDE => Topic started by: jj2007 on February 25, 2019, 11:07:31 AM

Title: GUI programming with events
Post by: jj2007 on February 25, 2019, 11:07:31 AM
Example #1: Loading and displaying images

GuiParas equ "GuiImage demo", w555, h500, bLiteYellow, m9
include \masm32\MasmBasic\Res\MbGui.asm
Event Paint
  GuiImage 123, fit             ; image from resources, ID 123; fit to window size
  GuiImage "\Masm32\examples\exampl04\car\car.jpg", 220, 280, 300, 80  ; image from disk, pos x, y, w, h
  GuiImage "http://www.animatedgif.net/cartoons/apinksax_e0.gif", 20, 220      ; image from the web, pos x, y
  GuiTextBox 99.9-100, 99.9-55, 80, 32, "Try sizing the window", bcol LiteGreen
GuiEnd


The resource file:
#include "resource.h"
IDI_APPLICATION ICON "\\Masm32\\MasmBasic\\icons\\Globe.ico"
01 RT_MANIFEST "\\Masm32\\MasmBasic\\Res\\XpManifest.xml"
123 RCDATA "\Masm32\\MasmBasic\\BugTests\\pics\\beach.jpg"


Project attached, greatful for feedback if it works on all Windows versions. Building requires MasmBasic version 25 Feb 19 (http://masm32.com/board/index.php?topic=94.0)
Title: Re: GUI programming with events
Post by: Siekmanski on February 25, 2019, 08:34:29 PM
Works on Windows 8.1
The background stretches and the foreground anim and bitmap image are not.
Title: Re: GUI programming with events
Post by: jj2007 on February 25, 2019, 09:22:33 PM
Thanks, Marinus. The stretching behaviour is by design, only the "fit" forces adjusting the size.
Title: Re: GUI programming with events
Post by: guga on February 26, 2019, 01:23:51 AM
Hi JJ

not working here on Windows10

(http://i68.tinypic.com/2wfjzaf.png)


And, if i put the file on another directory, the gui opened, but without the image. This error came up "Could not open \Masm32\examples\exampl04\car\car.jpg for FileRead$ etc" (yes, car.jpg is inside the masm directory on my PC at: "C:\masm32\examples\exampl04\car\car.jpg"
Title: Re: GUI programming with events
Post by: HSE on February 26, 2019, 02:39:22 AM
Hi JJ. Perfect in 7-32
Title: Re: GUI programming with events
Post by: jj2007 on February 26, 2019, 03:38:19 AM
Quote from: guga on February 26, 2019, 01:23:51 AMAnd, if i put the file on another directory, the gui opened, but without the image. This error came up "Could not open \Masm32\examples\exampl04\car\car.jpg for FileRead$ etc" (yes, car.jpg is inside the masm directory on my PC at: "C:\masm32\examples\exampl04\car\car.jpg"

Hi Guga,

Apparently something blocks the download of the http: gif. It works on wifee's Win10 machine, but security settings are not that strict 8)
Re car: Did you try from drive C: or from another drive? The program tries to load ?:\Masm32\examples\exampl04\car\car.jpg, i.e. from the current drive.

@HSE, thanks, good to know.
Title: Re: GUI programming with events
Post by: guga on February 26, 2019, 04:30:14 AM
HI JJ

I tried both ways. car.jpg is in drive "c" (on the directory where masm ins installed)

I tested it putting GuiImageDemo.exe in masmbasic directory "ascuser" and the error showed up. Then i tried in the main masm directory "c:\masm32', and the main "c:\" and the error happened again, then i tried on other drives "D", "E", "H" and the error in the image showed up too.

Windows10 is a true hell. I had some problems of that with RosAsm too, when trying to close some apps after debugging it.
Title: Re: GUI programming with events
Post by: jj2007 on February 26, 2019, 05:18:56 AM
Thanks, Guga. I have no idea what's happening. Can you please test the attached debug version?
Title: Re: GUI programming with events
Post by: LordAdef on February 27, 2019, 04:53:40 AM
NICE JJ!
I used to first version, without any issue
Title: Re: GUI programming with events
Post by: guga on February 27, 2019, 05:34:02 AM
Don´t know why windows10 is doing this with the app when i put it in the masm32 directory or in masmbasic one. You other files works ok.

To make it work, i did 2 tests:

1st) Extracted the file to drive "D:" and opened from there:

The gui showed up, but an error came out:

Quote"0       01.01.1601  00:00:00
test    $f$:20          0       <not a pointer>
## line 11: image could not be loaded, Ok
Could not open

for FileRead$ etc.
## line 15: image could not be loaded, Ok"

After i  clicked on "Ok" (After the error message), the gui appeared, but the image of the pink panther just was displayed after i  resize the window.


2nd test) -

Strangely, the file loaded Ok, when i opened directly through the zip file. Windows saved it on the temp directory.


The error above was still there, but this time, the pink panther image showed up right in time. I mean, when the gui was displayed without i having to resize the window

Btw, the same error msg came up, but no messagebox.

"22115   16.03.2002  03:41:38    \Masm32\examples\exampl04\car\car.jpg
test    $f$:20          ÿØÿà
## line 11: image could not be loaded, Ok
## line 15: image could not be loaded, Ok"


Title: Re: GUI programming with events
Post by: jj2007 on February 27, 2019, 07:11:05 AM
01.01.1601 and not a pointer mean the car.jpg simply wasn't there - which is normal if the current drive does not have a Masm32 installation.

The "image could not be loaded" is GdiPlus stuff, probably because the download of one of the GIFs was not finished. Will investigate, thanxalot for the feedback :icon14:
Title: Re: GUI programming with events
Post by: jj2007 on March 13, 2019, 01:10:00 AM
Latest version - extract the exe to a folder that contains images. This one does not attempt to download images.

GuiParas equ "GuiImage demo", w555, h500, bLiteYellow, m5      ; width, height, background colour, margins
include \masm32\MasmBasic\Res\MbGui.asm

GuiControl MyCanvas, "canvas", w800, WS_THICKFRAME
GuiControl MyList, "listbox", x800, w200
GetFiles *.gif|*.jpg|*.png|*.jpeg
SetListbox Files$()

Event CanvasPaint
  MemState("leaked kBytes: %i\n")              ; check if there are leaks
  GuiImage 123, fit                            ; image from resources, ID 123; fit to canvas control size
  GuiImage Files$(LbSel), 50, 180, 360, 240    ; image from disk, pos x, y, w, h
  GuiTextBox 78.0-100, 99.9-55, 80, 32, "Try sizing the window", bcol LiteGreen
GuiEnd
Title: Re: GUI programming with events
Post by: hutch-- on March 19, 2019, 12:38:01 PM
JJ,

Worked OK on my win10 64 pro but it showed a message box with an error about fileread$. The resizing works fine, no flicker and seemed to be fast enough without any lag.
Title: Re: GUI programming with events
Post by: jj2007 on March 19, 2019, 06:42:19 PM
> extract the exe to a folder that contains images

Hutch,
Does the folder contain any images?
Title: Re: GUI programming with events
Post by: hutch-- on March 21, 2019, 03:38:38 AM
No, I did not realise at the time that I should have got the images from the earlier post. The resizing and stretching worked well on my box, very smooth and no flicker.
Title: Global Warming
Post by: jj2007 on April 02, 2019, 01:32:49 PM
(https://www.santamarinellaoggi.it/images/GlobalWarming.png)

Source (purest assembly, 67 lines of code) and data are attached; building requires MasmBasic version 2 April 2019 or later (http://masm32.com/board/index.php?topic=94.0)
Title: Re: GUI programming with events
Post by: HSE on April 02, 2019, 10:29:45 PM
Interesting JJ!

CO2 concentration follow temperature better than emission. Except before 1900, but perhaps there is estimation problems.

Temperature and CO2 source?
Title: Re: GUI programming with events
Post by: jj2007 on April 10, 2019, 12:09:07 PM
@HSE: I must try to reconstruct where my data come from, e.g. https://datahub.io/core/global-temp

Don't jump to conclusions about the hen & eggs problem - the overlay plot just normalises the three datasets. It is pretty evident, though. There is a known irregularity for global temp in the 1940s and 50s, I wonder whether they eventually agreed on the cause (volcanic activity?). Here  (https://www.newscientist.com/article/dn11639-climate-myths-the-cooling-after-1940-shows-co2-does-not-cause-warming/)is what the New Scientist writes about it:
QuoteThe sudden drop in temperatures in 1945 now appears to be an artefact of a switch from using mainly US ships to collect sea surface temperature data to using mainly UK ships. The two fleets used a different method.

(https://www.santamarinellaoggi.it/images/GlobalWarming2.png)

Source (69 lines of code) and data are attached; building requires MasmBasic version 10 April 2019 or later (http://masm32.com/board/index.php?topic=94.0). Grateful for feedback if it looks good on other Windows versions, too (screenshot is Win7-64; WinXP works, too).

If I find the time, I will post a step-by-step example soon. The attached GlobalWarming.asc uses three different methods to load the data into numeric arrays, here are two:

  StringToArray 100, gem() As REAL4, staHasText  ; ** emissions ** (ID100 is global_emissions.tab in resources)

  UnzipInit 103                                  ; resource ID for annual_CO2_concentrations.zip
  StringToArray UnzipFile(0), x$(), csv          ; ** CO2 concentration ** (resource zipped for smaller exe)
  UnzipExit


Depending on the format of the data (strings, well or badly organised, REALx binary data), there are several options, in particular StringToArray (http://www.webalice.it/jj2006/MasmBasicQuickReference.htm#Mb1130) and ArrayRead (http://www.webalice.it/jj2006/MasmBasicQuickReference.htm#Mb1179).
Title: Re: GUI programming with events
Post by: jj2007 on April 27, 2019, 11:27:30 AM
Version 27 April 2019 (http://masm32.com/board/index.php?topic=94.0) features some simplification of the MakePath command. For details, click (in RichMasm) File/New Masm source and open the Gdi+ example.

include \masm32\MasmBasic\Res\MbGui.asm         ; download (http://masm32.com/board/index.php?topic=94.0)
  MakePath MyCircle, Circle(200)        ; available shapes: Arc, Bezier, Circle, ClosedCurve, Ellipse, Pie, Polygon, PolyLine, Rect
  MakePen hPen, RgbCol(255, 0, 0, 0), width 5
  MakePen hPenRed, RgbCol(200, 255, 0, 0), width 5
  MakeBrush hBrush, RgbCol(200, 255, 255, 0)
  GuiControl MyBigEdit, "richedit", wCL$(), w700        ; load what the commandline says, use 70% of the client area width
Event Paint
  GuiDraw MyCircle, hPenRed, 75.0, 5.0         ; draw the circle at x=75%, y=5%
  GuiDraw MyCircle, hPen/hBrush, 75.0, 15.0    ; draw it again, use a brush, y=15%
  GuiDraw MyCircle, hPen, 75.0, 25.0
  GuiDraw MyCircle, hPenRed, 80.0, 5.0, 500, 2000      ; draw at x=80%, y=5%, half as wide, twice as high
  GuiTextBox 100.0-208, 100.0-48, 200, 40, ComCtl32$("This program uses common controls version %3f")
GuiEnd XP      ; OPT_Arg1 ?:\Masm32\MasmBasic\MbGuide.rtf      ; for testing, ask RichMasm to add a commandline
Title: ESRI shapefile maps in MasmBasic
Post by: jj2007 on May 02, 2019, 11:05:35 AM
Attached an example on how to use maps in a MasmBasic GUI program. Building requires MasmBasic of 2 May 2019 or later (http://masm32.com/board/index.php?topic=94.0).

If you own a shapefile that you would like to convert (or you want to use one obtained here (https://wiki.openstreetmap.org/wiki/Shapefiles#Download_shapefiles)), PM me.

(http://www.webalice.it/jj2006/pics/MapsInMasmBasic.jpg)

The bare minimum source for displaying the map looks as shown below. The attached source is slightly more complex (25 lines), since it contains code to react on user clicks into one of the countries.

include \masm32\MasmBasic\Res\MbGui.asm
  ArrayLoadMap 0, "Europe"              ; Europe.dmi and Europe.map in \Masm32\MasmBasic\Res
Event Paint
  ArrayPlot RgbCol(0, 240, 255)                 ; init and set background colour
  PaintMap RgbCol(127, 127, 127), lines=2       ; map with grey borders 2px thick
  ArrayPlot exit, "Europe"
GuiEnd
Title: Re: GUI programming with events
Post by: jj2007 on June 11, 2019, 11:23:37 AM
New MasmBasic version uploaded (http://masm32.com/board/index.php?topic=94.0), with some improvements under the hood. Data plotting uses now GdiPlus and anti-aliasing. Thanks in particular to LiaoMi, BiteRider, fearless, Timo and Tedd for their help in the Chasing a paint bug (http://masm32.com/board/index.php?topic=7888.0) thread :thup:

This example displays three controls side by side:

GuiParas equ "Three controls", w829, h400, m0          ; main window dimensions, no margins
include \masm32\MasmBasic\Res\MbGui.asm                ; #### this demo plots data on two controls, plus a map ####
GuiControl VoltsOverAmpere, "canvas", w333, WS_THICKFRAME      ; *** create controls ***
GuiControl Emissions, "canvas", x333, w333, WS_THICKFRAME
GuiControl TheMap, "canvas", x666, w333, WS_THICKFRAME
GuiControl SBar, "statusbar", text wCat$(wDate$+", "+wTime$)
MakeFont hHorzFont, Height:-20, Italic:TRUE, Weight:FW_SEMIBOLD, "Times New Roman"     ; *** fonts & pens ***
MakeFont hVertFont, Height:18, Escapement:900, Italic:FALSE
MakePen hPenAxis, RgbCol(0, 0, 64), width 1
MakePen hPenGrid, RgbCol(0, 0, 255)
ArraySet current() As DWORD=121, 102, 123, 114, 134, 138, 141, 159, 162, 178  ; *** create data ***
ArraySet voltage() As DWORD=251, 212, 183, 154, 140, 125, 110, 100, 90, 80 
ArrayLoadMap 0, 100                            ; Europe from resources #100 and #101
StringToArray 110, gem() As REAL4, staHasText                  ; *** resource ID 110 is global_emissions.tab ***

Event Message
  If_ uMsg_==WM_MAPCLICKED && MapRegion>=0 Then SetWin$ hSBar="You clicked on "+MapRegion$

Event CanvasPaint
  Switch_ ecx                                   ; CanvasPaint returns the ID in ecx
  Case_ VoltsOverAmpere
        ArrayPlot RgbCol(255, 255, 255)                 ; init & set background to white
        SetAxisX "Абсцисса", s 0.0, d 10/5, grid 1, font hHorzFont, format "%i A"       ; s=start value, d=difference between gridlines
        SetAxisY "The ordinate - Y", d 10/5, s 0, grid 2/2, peng hPenGrid, font hVertFont, penx hPenAxis, format "%i V", RgbCol(0, 0, 0)
        GuiImage 123, fit                       ; ID 123=Clouds.jpg
        ArrayPlot current():voltage(), RgbCol(99, 255, 100, 100), lines=6
        ArrayPlotValues "%i V", 1, 12                   ; define how and where values are displayed
        ArrayPlot current():voltage(), RgbCol(255, 0, 0, 255), 5        ; dots 5px
        ArrayPlot exit, 0005000022#T "绘制数据很简单!!"  ; finish with a title, xxxxyyyyfs
  Case_ Emissions
        ArrayPlot RgbCol(200, 255, 200)                 ; init & set background
        SetAxisX "Year", s 1880, d 5/10, grid 1, format "%i"    ; s=start value, d=difference betw. gridlines, grid pen
        SetAxisY "CO2 emissions", s 0.0, d 1000/2, grid 1, format "%i", peng hPenGrid
        ArrayPlot gem(XY), RgbCol(255, 0, 0), lines=2, 00050401h        ; plot the data, set line colour & size, margins xtrb
        ArrayPlot exit, "CO2 emissions"                         ; finish with a title
  Case_ TheMap
        ArrayPlot RgbCol(204, 222, 255)                 ; init and set background colour
        GuiImage 122, fit               ; 122=waves
        PaintMap RgbCol(127, 127, 127), lines=2         ; map with grey borders 2px thick
        ArrayPlot exit, -128000040#T "Europe"   ; -128 pixels from the center
  Endsw_

EndOfCode


To assemble this source, update MasmBasic (http://masm32.com/board/index.php?topic=94.0), then extract the attached files to a temp folder on the drive where your Masm32 is installed, open the *.asc file in \Masm32\MasmBasic\RichMasm.exe and hit F6 to build and run it. The result:

(http://www.jj2007.eu/images/PlotThreeControls.png)
Title: Re: GUI programming with events
Post by: daydreamer on June 23, 2019, 10:19:45 PM
looks great :thumbsup:
what is your way of drawing a polar rose?
Title: Re: GUI programming with events
Post by: jj2007 on June 24, 2019, 07:26:23 AM
What is a polar rose?
Title: Re: GUI programming with events
Post by: LiaoMi on June 24, 2019, 08:23:46 AM
Quote from: jj2007 on June 24, 2019, 07:26:23 AM
What is a polar rose?

Hi jj2007,

(https://upload.wikimedia.org/wikipedia/commons/7/70/Wind_rose_plot.jpg)

(http://www.xn--llusfb-5va.cat/python/PyNCplot/plotting/figs/WindRose_linepoint-multicoltime.png)
Title: Re: GUI programming with events
Post by: jj2007 on June 24, 2019, 09:55:17 AM
I see - thanks, LiaoMi :thumbsup:

Quote from: daydreamer on June 23, 2019, 10:19:45 PM
what is your way of drawing a polar rose?

I've not yet drawn one. Do you have a working example that you could share with us?
Title: Re: GUI programming with events
Post by: LiaoMi on June 24, 2019, 08:29:28 PM
Quote from: jj2007 on June 24, 2019, 09:55:17 AM
I see - thanks, LiaoMi :thumbsup:

Quote from: daydreamer on June 23, 2019, 10:19:45 PM
what is your way of drawing a polar rose?

I've not yet drawn one. Do you have a working example that you could share with us?

Hi jj2007,

there is no direct example, but there is pseudocode from matlab and wolfram mathematics ..

Wind rose plot of data? WindData.xlsx - https://www.mathworks.com/matlabcentral/answers/222700-wind-rose-plot-of-data (https://www.mathworks.com/matlabcentral/answers/222700-wind-rose-plot-of-data)
[d,s,r] = xlsread('Kyle Milke WindData.xlsx');
Q1 = d(1:5,:);                                      % Data Excerpt (Line May Be Deleted)
figure(1)
rose(d(:,6)*180/pi, [0.5:10:355])
title('Wind Direction (Degrees)')
for k1 = 1:36                                       % Velocity Histogram Loop
    Q2 = [d(:,6)>=(k1-1)*10 & d(:,6)<(k1)*10];
    velhist(k1,:) = [(k1)*10  sum(Q2)  sum(d(Q2,3))  sum(d(Q2,3))/sum(Q2)];
end
xr = [repmat(velhist(:,4)', 10, 1); zeros(1,36)];
xr = [0 reshape(xr, 1, [])];
th = linspace(0, 359, length(xr));
figure(2)
polar(th*pi/180, xr)
title('Mean Wind Velocity')


How to create a wind rose with Mathematica? https://mathematica.stackexchange.com/questions/31257/how-to-create-a-wind-rose-with-mathematica/31265 (https://mathematica.stackexchange.com/questions/31257/how-to-create-a-wind-rose-with-mathematica/31265)

r = Table[{2 t Pi/16, RandomReal[{1, 6}]}, {t, 0, 15}];
ListPolarPlot[Append[r, r[[1]]],
  PlotLabel -> "风向图", BaseStyle -> 14,
  PolarTicks -> {"Direction", Automatic},
  Joined -> True, PlotMarkers -> Automatic,
  PlotStyle -> {PointSize[Large]}, PolarAxes -> True,
  PolarGridLines -> {Table[2 k Pi/16, {k, 0, 15}], Automatic},
  PolarAxesOrigin -> {Pi/2, 6}]


(https://i.stack.imgur.com/cUVeQ.png)

Left graph: For equally spaced (in angle) measurements it is easier to use Mesh for ParametricPlot:
data2 = ({Cos@#, Sin@#} & /@ Range[0, 15 Pi/8, Pi/8]) data; AppendTo[data2, data2[[1]]];
f = BSplineFunction[data2, SplineDegree -> 1];

g2 = ParametricPlot[(r f[t]), {t, 0, 1}, {r, 0, 1}, BoundaryStyle -> {Thick, Black},
                                  Frame -> False, PlotRangePadding -> .2, PlotRange -> 6
                                  MeshFunctions -> (#3 &), Mesh -> (Length[data2] - 2),
                                  MeshShading -> {White, Black},  Axes -> True,
                                  Ticks -> None, AxesStyle -> Arrowheads@.07]


(https://i.stack.imgur.com/JTRz9.png)

Right graph:
Quotedata2 = Transpose[{ConstantArray[1, 16], data}];

g1 = SectorChart[data2, PolarTicks -> {"Direction", Automatic}, PlotLabel -> "风向图",
           BaseStyle -> {15, Bold},  SectorOrigin -> -Pi/16, PolarAxes -> True,
           PolarGridLines -> {Range[Pi/16, 2 Pi, Pi/8], Range[0, Ceiling@Max[data]]},
           PolarAxesOrigin -> {(Pi/8 (Position[#, Min@#] &@data-1)])[[1, 1]],
                               Ceiling@Max[data]},
           ColorFunction -> (Blend["Rainbow", #2] &)]

Row[{g2, g1}]

(https://i.stack.imgur.com/JTRz9.png)

Old one: works also for not equally spaced points (in angle).

Graphics[{EdgeForm@Thick,
          Polygon[Riffle[data2, f[0, 0], {2, -1, 3}] /. f -> List],
          White,
          Polygon[Riffle[data2, f[0, 0], {3, -1, 3}] /. f -> List]
         },
         Axes -> True, PlotRangePadding -> .2, AxesStyle -> Arrowheads@.07,
         Ticks -> None, PlotRange -> 5]


(https://i.stack.imgur.com/XWVnO.png)

https://reference.wolfram.com/language/ref/ListPolarPlot.html (https://reference.wolfram.com/language/ref/ListPolarPlot.html)
(https://reference.wolfram.com/language/ref/Files/ListPolarPlot.en/O_3.png)

The grid itself can be drawn if you have the exact dimensions of the window, If you take a GDI+ clock from another topic as an example, you can draw a certain number of spheres with different sizes, and then calculate the connection lines. I think it will work  :azn:
Title: Re: GUI programming with events
Post by: daydreamer on June 24, 2019, 11:51:19 PM
Quote from: jj2007 on June 24, 2019, 09:55:17 AM
I see - thanks, LiaoMi :thumbsup:

Quote from: daydreamer on June 23, 2019, 10:19:45 PM
what is your way of drawing a polar rose?

I've not yet drawn one. Do you have a working example that you could share with us?
not yet,I have made a flowerquiz and was thinking add some graphics to it and suddenly I found an example of polar rose in TI84 manual.pdf when I was looking for something else

my unfinished vision of a polar rose could be
Title: Re: GUI programming with events
Post by: daydreamer on July 03, 2019, 01:20:58 AM
I have tried to draw different things with gdi
Seems everything but setpixel appears fast despite loops calling many rects ,I suspect its drawn with or without hardware acceleration on a backbuffer so it appears to be drawn instantly
Title: Re: GUI programming with events
Post by: jj2007 on July 03, 2019, 02:54:22 AM
Interesting, daydreamer, why don't you post your code so that we can compare?