Member Avatar for mallows

I have a number of data points that I want to display on a web page. At the moment I use Imagemagick and place the data items on a base image and just display the image. the data gets updated every 5 minutes. Data is for instance temperatures and pressures.

I was thinking if I could just write the data values into a very simple CSS sheet and get a form control (text box) on my web page, to show the value from the CSS. I ahve about 20 floating point numbers to show.

As I am new to CSS and forms, I was hoping someone could just show me how I declare a variable in the CSS and then show this variable in my web page text box.

  • 5 Contributors
  • 5 Replies
  • 108 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by Grantmitch1

Dani AI

Generated

For : short answer — CSS alone cannot populate a form input with runtime data. As noted, CSS is for presentation, not content. The practical choices are to emit the values from the server when the page is generated (PHP/ASP), or have the page fetch/update values with JavaScript. , and pointed toward those same server/client approaches and a DB if you need history or aggregation.

If you want minimal server work, expose the 20 values from the server as a tiny JSON endpoint (or render them into the page on load). Client JavaScript can then set each input.value and poll or refresh every 5 minutes. Another option is to generate CSS custom properties (variables) on the server and have JS read them with getComputedStyle — that works only when JS reads the CSS; CSS itself will not set an input's value. See MDN on CSS custom properties (Using CSS custom properties).

Example patterns (replace IDs/names to match your page):

/* if you generate CSS variables server-side */
:root { --temp1: 23.5; }

/* JS reads the CSS var and sets the input */
const t = getComputedStyle(document.documentElement).getPropertyValue('--temp1').trim();
document.getElementById('temp1').value = t;

Or a cleaner approach: fetch JSON from the server and update fields:

fetch('/data.json')
  .then(r => r.json())
  .then(data => {
    document.getElementById('temp1').value = data.temp1;
    // loop for the rest...
  })
  .catch(console.error);

Troubleshooting notes: make sure IDs match, trim whitespace when reading CSS vars, watch caching headers if you generate files every 5 minutes, and be mindful of CORS when fetching. For the input API see MDN (HTMLInputElement.value). Server-side rendering (PHP) is simplest for static pages; client-side fetch is best if you want the page to update in-place without a full reload.

Recommended Answers

All 5 Replies

Member Avatar for jakesee

I was thinking if I could just write the data values into a very simple CSS sheet and get a form control (text box) on my web page, to show the value from the CSS.

No you can't. CSS deals with the looks of the web page, not the content of the web page.

Member Avatar for rudevils

i think jakesee is right, you need to use PHP, ASP or something else to do it.

Member Avatar for Grantmitch1

i think jakesee is right, you need to use PHP, ASP or something else to do it.

Yupp PHP can do it ;)

Member Avatar for rexibit

PHP can't do it alone. You will need to be sending data to it from somewhere for it to calculate and run on the server prior to the page loading.

CSS would be used to format the data as the page renders.

Another method you could do, if you had time and resources, would be to store the data into a database and use it. I am not sure what application you are wanting this for, but it sounded like it was coming from some database somewhere when you say "datapoints."

Member Avatar for Grantmitch1

PHP can do all the nitty gritty...

Throw in some Javascript to make it look nice with a bit of CSS...

Thats good home made data viewing

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.