Hello, how can I dynamically change the background color of the current value? The value gValue.toFixed (0) is displayed. But I want the background to turn red as soon as the value goes into the minus range. Can someone please help me! [Beispiel1]

[image] TotallyInformation: <div id="p2" v-bind:style="back>=0 ? 'background-color:green' : 'background-color:red' "> Nice .. one small note .. Looking at the Chris' Vue data, the variable being dynamically updated from uibuilder is gValue .. better to use that in the style binding and delete…

[image] UnborN: Nice .. one small note .. Looking at the Chris' Vue data, the variable being dynamically updated from uibuilder is gValue I wasn't trying to give a full answer, only show the way :smiley:

yeap .. it seems that Chris has some studying to do :wink: @ChrisWeb71 may i recommend a very good video playlist that covers Vue basics Vue JS Tutorial

hello, thanks for the quick feedback. You guys helped me a lot. Vue is still completely new territory for me. Thanks again

It is a fun journey. :smiley: Definitely, do have a play with the basics and maybe follow that tutorial - all using uibuilder so you get familiar with the interactions. The uibuilder part is actually really simple. At the moment the front-end uibuilderfe library mainly ensures that you have a robus…

Hello, me again. Changing the background color depending on the value of the variable works great. Now I have the next problem I realized the whole thing with a circle. That works as it should. But I do not want to succeed that the circle flashes with red and not with green. Can you give me ano…

[image] ChrisWeb71: But I do not want to succeed that the circle flashes with red and not with green. Sorry, I think there is a translation problem there, I can't quite work out what you want to do.

Hi, I want the background to flash red when the value is less than zero. so e.g. like in this example [image] Pulsierendes Div erstellen ohne Javascript – revilodesign.de Du möchtest ein pulsierendes Div erstellen? Anleitung und Beispiele, um mit Keyframes pulsierende Animationen mit C…

Hi Julian, I'm currently in the process of integrating Node Red into my company. i want to visualize the production numbers. I want to create an appealing website to convince my boss. My question, how many simultaneous connections can the website created with UIBuilder, are there restrictions, s…

Hi, I solved the problem with the blinking circle I created 2 classes, one green point and the other red flashing point <a class="circle" style="margin: 10px auto auto 100px;"><div v-bind:class="gValue>=0 ? 'io' : ' nio'"></div></a>

There are too many ways to do that! The simplest would be to swap a static image with an animated gif for example. You can change images using just CSS. [image] ChrisWeb71: how many simultaneous connections can the website created with UIBuilder, are there restrictions, such as IIS on a Windows…

UI Builder change background color depending on the displayed value

General

UnborN 17 October 2020 16:57 23

Hi Chris,

I've been straggling with this too last night and today i read on the Chartkick github issues page that its a known issue with this library. No concrete answers were given in the thread.

Can not get multi-series graphs to update #102

I'll try to make an example with vue-google-charts

Topic		Replies	Views
Uibuilder v2 Charting Examples Share Your Projects uibuilder	29	6206	17 September 2022
Inject Chart.js array data into UI Builder Dashboard uibuilder	13	325	13 March 2023
Dynamically create charts / front end elements with Ui-Builder based on size of array? General	20	1394	1 August 2021
Uibuilder vega chart and db-s integration General uibuilder	14	1224	30 January 2022
Access the msg.payload in ui_builder using plotly Dashboard	12	1931	5 April 2020

UI Builder change background color depending on the displayed value

Related topics