Add FPS meter

[lc-soft]

Is your feature request related to a problem? Please describe.

We need a graphical user interface to display the current rendering state to debug performance issues.

Describe the solution you'd like

Refer the Chrome Browser:

This is the list of requirements:

• Mode
  • Normal: show all content
  • Minimized: only show fps and chart, refer: https://darsa.in/fpsmeter/
    
  • Note: The mode should be switched when clicking it.
• Charts
  • Chart widget: receive an array of integers and draw them into a bar chart, it should inherit from canvas widget
  • FPS chart: show the number of frames updated every second
  • Widget updates chart: show the number of components updated every second
  • Note 1: If nothing is rendered in the current frame then the fps chart should not be updated
  • Note 2: All statistics should ignore the effect of the fps meter
• Labels
  • Frame Rate
  • fps: ${fps} fps
  • fps range: 1-${settings.frame_rate_cap}
  • Parallel rendering threads: ${used}/${total}
  • Updates
  • Updated: ${updatedWidgets}
  • Total: ${totalWidgets}
  • Note: The semantics of these labels may not be clear, you can improve it.
• APIs
  • Add APIs to collect the above data
  • Update the existing APIs to collect the above data
  • Note: This work requires many reviews and changes to meet the author's expectations.
• Use fps meter instead of fps textview in test/test_render.c

Additional context

How to draw a chart?

You need these:

• i
• x, y
• fps_data
• LCUIWidget_NewPrototype("fps-meter-chart", "canvas")
• Canvas_GetContext()
• for (x = 0; i < fps_data_length; ++x)
• CanvasContext_FillRect()

I believe you have guessed the implementation method through these keywords.

What does it look like?

I have written css and html code, you can refer to it:

https://codepen.io/lc-soft/pen/NWxYpGv?editors=1100

The effect of the bar chart should be the following:

https://darsa.in/fpsmeter/

---

IssueHunt Summary

Backers (Total: $0.00)

Become a backer now!

Or submit a pull request to get the deposits!

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

[issuehunt-oss]

@lc-soft has funded $15.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[issuehunt-oss]

@lc-soft has funded $10.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[issuehunt-oss]

@lc-soft has funded $10.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[jduo]

@lc-soft , I can take a look at this. Would it make more sense to have this PR build upon the solution to #191, which I've already made a fair amount of progress on? That work cleans up the profiling code a bit as well as makes the thread count easy to access.

[lc-soft]

@lc-soft , I can take a look at this. Would it make more sense to have this PR build upon the solution to #191, which I've already made a fair amount of progress on? That work cleans up the profiling code a bit as well as makes the thread count easy to access.

Please wait a moment, just now I was thinking about finishing this work when I have time in the future.

[lc-soft]

@jduo

The description of this issue needs to be updated. I plan to redesign the requirements of this feature in the future, so please do not consider working on this issue for the time being. Moreover, $100 has exceeded my budget.

[lc-soft]

@jduo

I think issue #192 is much simpler than issue #210, because the workload of issue #210 is more than 10 times that of issue #192, but from your bounty request, the workload of issue #192 seems to be larger than I expected.

Does this mean Are you planning to make a lot of changes to related code for issue #192?
Or is issue #210 simpler than I thought?
Please briefly explain your work plan for issue #192。

[jduo]

It's mostly the comment "Note: This work requires many reviews and changes to meet the author's expectations." that made me decide to up the bounty on this one from the original $100 I had put up. It was a bit open-ended.

[issuehunt-oss]

@lc-soft has funded $6.10 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[issuehunt-oss]

@lc-soft has funded $144.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[lc-soft]

@jduo I have increased the bonus from $35 to $185.10, and you can start doing it.

[lc-soft]

There are three fees in payment, reward and withdrawal: stripe fee (3.74%), service fee (10%), transaction fee (3.6%), I think the fees charged are too much.

[jduo]

I've started work on this. A few questions:

1. Should the number of elements in the chart be fixed? Should it be configurable? Should it be dynamic based on the size of the window?
2. Can you point me to an existing widget that inherits from canvas? Do you mean the chart widget should be composed of a canvas widget, such that function calls such as init, onpaint, etc delegate to the canvas widget?
3. Should the chart update every second? The gif updates much more quickly than this. Is every point in the chart a capture of the frame count at a second? I guess the array the chart is built off of needs to be a circular array so that we can add new values without losing previous ones.

[jduo]

4. My thinking is that we have a Metrics widget, which holds an FPS meter widget + Widget update stats widget, and the FPS meter widget/widget update stats widget both maintain a chart widget. The application can just construct the Metrics widget. The Metrics widget is responsible for handling changing of the mode between normal/minimized.

[lc-soft]

1. Should the number of elements in the chart be fixed? Should it be configurable? Should it be dynamic based on the size of the window?

Do you mean the number of bars in the chart? I suggest that you calculate the appropriate number of bars based on the width of the chart, for example:

number_of_bars = bar_chart.width / bar_width;

2. Can you point me to an existing widget that inherits from canvas? Do you mean the chart widget should be composed of a canvas widget, such that function calls such as init, onpaint, etc delegate to the canvas widget?

I have written a spinner widget based on canvas widget before, you can refer to it:

https://github.com/lc-ui/lc-design/blob/f824ca5ad6766554312eca44b904ceb5f5cffab7/src/ui/components/spinner.c#L247-L256

The core code is as follows:

• LCUI_SetInterval(LCUI_MAX_FRAME_MSEC, (TimerCallback)Spinner_OnFrame, w);
• static void Spinner_OnFrame(LCUI_Widget w)
• static void Spinner_Render(LCUI_Widget w)
• LCUI_CanvasContext ctx = Canvas_GetContext(w);
• ctx->clearRect(ctx, 0, 0, ctx->width, ctx->height);
• FillPixel(&ctx->buffer, xi, yi, &c);
• Widget_InvalidateArea(w, NULL, SV_CONTENT_BOX);
• ctx->release(ctx);

Should the chart update every second? The gif updates much more quickly than this.

Yes, you only need to refer to the style of the bar in the gif, no need to pay attention to the update speed.

Is every point in the chart a capture of the frame count at a second?

Yes.

I guess the array the chart is built off of needs to be a circular array so that we can add new values without losing previous ones.

I suggest using a linked list to save the frame count, the pseudo code is as follows:

LinkedList frameCountList;

// insert new frame count into head
frameCountList.unsift(currentFrameCount);
if (frameCountList.length > maxLen) {
  // delete last frame count
  frameCountList.pop();
}

4. My thinking is that we have a Metrics widget, ...

I think it's okay, but I want the names of these three widgets to have the fps-meter- prefix.

[jduo]

1. Should the number of elements in the chart be fixed? Should it be configurable? Should it be dynamic based on the size of the window?

Do you mean the number of bars in the chart? I suggest that you calculate the appropriate number of bars based on the width of the chart, for example:

number_of_bars = bar_chart.width / bar_width;

Would bar_width be fixed then? Or would it scale with the size of the window?
Actually should the chart even be resizable?

[jduo]

1. My thinking is that we have a Metrics widget, ...

I think it's okay, but I want the names of these three widgets to have the fps-meter- prefix.
I feel the chart component could potentially be reusable outside of the context of the fps-meter, but I guess we could always rename it.

[jduo]

In your example showing CSS/HTML at https://codepen.io/lc-soft/pen/NWxYpGv?editors=1100
Should the CSS you've shown here be passed into LCUI_LoadCSSString()?

[lc-soft]

Should the CSS you've shown here be passed into LCUI_LoadCSSString()?

@jduo Yes, you can use this css code directly and make the widget tree structure the same as the html code.

[lc-soft]

Would bar_width be fixed then? Or would it scale with the size of the window?

Actually should the chart even be resizable?

@jduo I thought about it, you can use a fixed width for bar. because there is no need to make the width of the bar scalable, in order to adapt to the large size, we can increase the number of bars instead of increasing the bar width.

[jduo]

Hi @lc-soft ,
Was trying to test a build of the widget and noticed the tutorial link was broken here: https://lcui.org/guide/

Quick question, does LCUI create a relationship between CSS properties and struct fields for widgets? Or is that part of the widget implementation?

[lc-soft]

@jduo

There is no English version of this tutorial, and I will replace the tutorial link with https://docs.lcui.lc-soft.io/.

does LCUI create a relationship between CSS properties and struct fields for widgets?

Check here:

LCUI/include/LCUI/gui/widget_base.h

Lines 287 to 302 in 6656f40

	LCUI_StyleSheet style;
	LCUI_StyleList custom_style;
	LCUI_CachedStyleSheet inherited_style;
	LCUI_WidgetStyle computed_style;
	/** Some data bound to the prototype */
	LCUI_WidgetData data;
	/**
	* Prototype chain
	* It is used to implement the inheritance of widgets,
	* Just like prototype chain in JavaScript
	*/
	LCUI_WidgetPrototypeC proto;

The stylesheet of the widget will be updated here:

LCUI/src/gui/widget_task.c

Lines 203 to 215 in 029984e

	LCUI_WidgetTaskContext Widget_BeginUpdate(LCUI_Widget w,
	LCUI_WidgetTaskContext ctx)
	{
	unsigned hash;
	LCUI_Selector selector;
	LCUI_StyleSheet style;
	LCUI_WidgetRulesData data;
	LCUI_CachedStyleSheet inherited_style;
	LCUI_WidgetTaskContext self_ctx;
	LCUI_WidgetTaskContext parent_ctx;
	self_ctx = malloc(sizeof(LCUI_WidgetTaskContextRec));

CSS properties will be recalculated when they change and their actual values will be saved in LCUI_Widget::computed_style.

LCUI/src/gui/widget_task.c

Lines 175 to 196 in 029984e

	void LCUIWidget_InitTasks(void)
	{
	#define SetHandler(NAME, HANDLER) self.handlers[LCUI_WTASK_##NAME] = HANDLER
	SetHandler(VISIBLE, Widget_ComputeVisibilityStyle);
	SetHandler(POSITION, Widget_ComputePositionStyle);
	SetHandler(RESIZE, Widget_ComputeSizeStyle);
	SetHandler(SHADOW, Widget_ComputeBoxShadowStyle);
	SetHandler(BORDER, Widget_ComputeBorderStyle);
	SetHandler(OPACITY, Widget_ComputeOpacityStyle);
	SetHandler(MARGIN, Widget_ComputeMarginStyle);
	SetHandler(PADDING, Widget_ComputePaddingStyle);
	SetHandler(BACKGROUND, Widget_ComputeBackgroundStyle);
	SetHandler(ZINDEX, Widget_ComputeZIndexStyle);
	SetHandler(DISPLAY, Widget_ComputeDisplayStyle);
	SetHandler(FLEX, Widget_ComputeFlexBoxStyle);
	SetHandler(PROPS, Widget_ComputeProperties);
	SetHandler(UPDATE_STYLE, Widget_OnUpdateStyle);
	SetHandler(REFRESH_STYLE, Widget_OnRefreshStyle);
	SetHandler(TITLE, Widget_OnSetTitle);
	self.handlers[LCUI_WTASK_REFLOW] = NULL;
	InitStylesheetCacheDict();
	self.refresh_all = TRUE;

[jduo]

Hi @lc-soft , I got sidetracked for a bit. Plan to come back to this issue next week.

[lc-soft]

Hi @lc-soft , I got sidetracked for a bit. Plan to come back to this issue next week.

OK, If you think this project has some incomprehensible code, please feel free to ask me.

[MorphicDreamer]

Hi don't know if I can do this, but is this still available?

[lc-soft]

Hi don't know if I can do this, but is this still available?

@interdice It is temporarily unavailable because the new version under development has many changes, and it needs to wait until the new version is released.

[issuehunt-oss]

@lc-soft has cancelled funding for this issue.(Cancelled amount: $144.00) See it on IssueHunt

[issuehunt-oss]

@lc-soft has cancelled funding for this issue.(Cancelled amount: $6.10) See it on IssueHunt

[issuehunt-oss]

@lc-soft has cancelled funding for this issue.(Cancelled amount: $10.00) See it on IssueHunt

[issuehunt-oss]

@lc-soft has cancelled funding for this issue.(Cancelled amount: $10.00) See it on IssueHunt

[issuehunt-oss]

@lc-soft has cancelled funding for this issue.(Cancelled amount: $15.00) See it on IssueHunt