Call For Examples — Changing Widget or Font Size With a Custom Widget

Developer
1

Hey folks, this is an x-post from this product suggestion that just got resurrected.

@AquaMaofian is interested in programmatically changing some parameters of widgets in an app, and this to me is a dead-center use-case for custom widgets.

here’s the question: is anyone currently programmatically changing the size of a widget or the font size of text in an app? If so, would you be willing to share either the code that you’re using, or in conversation with another community member?

2

Yes, the one Simple Langbox Widget
Keep in mind if you use it as a Text Box replacement, each time a custom widget is used it opens a new iframe and never releases resources… so it will crash the app eventually.
What we learned about custom widget, many props, and what not to do - #7 by mellerbeck

3

How could you change the size of a widget?
As far as I know you can only change the appearence inside of the iFrame, but not of the widget itself (I would love to do so…).

I have e.g.:

– an input, where you can choose between text and number. You can change:

  • Border Color
  • Border Focus Color
  • Border Width
  • Border Radius
  • Background Color
  • Font Color
  • Font Size
    You then can start a trigger by hitting enter or changing a bool (to trigger it with a button).

– a progress Bar where you can change:

  • Bar Color
  • Background Color
  • Border Radius
  • Min & Max Value

– two different loopers with a similar progress bar

– two different line charts with several changable parameters

One Way to Change those parameters is by changing Variables in CSS:

getValue("BorderColor", (internalVariable) => {
	document.querySelector(":root").style.setProperty("--borderColor", internalVariable);
});

However I don’t think Custom Widgets should be used to recreate all standard widgets as Buttons or Inputs…