GUI programming with events

[jj2007]

Source (purest assembly, 67 lines of code) and data are attached; building requires MasmBasic version 2 April 2019 or later

[HSE]

Interesting JJ!

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

Temperature and CO₂ source?

[jj2007]

@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 is what the New Scientist writes about it:

The 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.

Source (69 lines of code) and data are attached; building requires MasmBasic version 10 April 2019 or later. 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 and ArrayRead.

[jj2007]

Version 27 April 2019 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
  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

[jj2007]

Attached an example on how to use maps in a MasmBasic GUI program. Building requires MasmBasic of 2 May 2019 or later.

If you own a shapefile that you would like to convert (or you want to use one obtained here), PM me.



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

[jj2007]

New MasmBasic version uploaded, 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 thread

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, 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:

[daydreamer]

looks great
what is your way of drawing a polar rose?

[jj2007]

What is a polar rose?

[LiaoMi]

What is a polar rose?

Hi jj2007,

[jj2007]

I see - thanks, LiaoMi

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?

[LiaoMi]

I see - thanks, LiaoMi

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

Code Select Expand

[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

Code Select Expand

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}]



Left graph: For equally spaced (in angle) measurements it is easier to use Mesh for ParametricPlot:

Code Select Expand

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]



Right graph:

data2 = 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}]

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

Code Select Expand

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://reference.wolfram.com/language/ref/ListPolarPlot.html


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 

[daydreamer]

I see - thanks, LiaoMi

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

[daydreamer]

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

[jj2007]

Interesting, daydreamer, why don't you post your code so that we can compare?