Javascript hente verdi og bruke i variabel

[Garrian]

Heisann

 

Jeg er kjent med HTML, men sliter litt hva gjelder javascript. Saken er at jeg har en PLS med innebygget Webserver, med variabler jeg ønsker å vise grafisk på nettside.

 

Koden under generer ett random tall fra 0-100 hver gang man klikker på knappen, og viser dette grafisk. Jeg ønsker å fjerne denne knappen, og istede erstatte det med ett faktisk tall i en variabel fra PLSen.

 

 

Jeg ønsker altså å ersatte random 0-100 med verdien fra "test" i øverste linje. Og gjerne med oppdatering hvert 1sek.

 

 

Setter stor pris på all hjelp

 

 

 

<!-- AWP_In_Variable Name='"variabler".test' -->

 

    <div class="container">

      <button type="button" id="gauge_refresh">Refresh Gauges</button>

    </div>

    <script src="./raphael-2.1.4.min.js"></script>

    <script src="./justgage.js"></script>

    <script>

    document.addEventListener("DOMContentLoaded", function(event) {

 

      var g2 = new JustGage({

        id: 'g2',

        value: 80,

        min: 0,

        max: 100,

        symbol: '%',

        pointer: true,

        pointerOptions: {

          toplength: -15,

          bottomlength: 10,

          bottomwidth: 12,

          color: '#8e8e93',

          stroke: '#ffffff',

          stroke_width: 3,

          stroke_linecap: 'round'

        },

        gaugeWidthScale: 0.6,

        counter: true

      });

 

      document.getElementById('gauge_refresh').addEventListener('click', function() {

 

        g2.refresh(getRandomInt(0,100));

 

      });

    });

    </script>

Endret 15. oktober 2019 av Garrian

[0laf]

Ikke helt sikker på om jeg forstår opplegget her, men den øverste linjen er en kommentar, det er noe mer problematisk å hente verdien fra den kommentaren enn dersom det hadde vært en node, men det er fullt mulig, noe sånt :
 

function filterNone() {
  return NodeFilter.FILTER_ACCEPT;
}

function getComment(elem) {
  var curNode,
      search   = 'AWP_In_Variable Name',
      iterator = document.createNodeIterator(elem, NodeFilter.SHOW_COMMENT, filterNone, false);

  while (curNode = iterator.nextNode()) {
    if (curNode.nodeValue.indexOf(search) !== -1) {
      return curNode.nodeValue;
    }
  }
  return false;
}

function parseComment(cmt) {
  var match = 'Name=\'"variabler".';

  if (cmt && cmt.indexOf(match) !== -1) {
    return cmt.split(match).pop().replace(/\'/g, '');
  }
  return false;
}
var comment = getComment(document.body);
var value   = parseComment(comment);

/*  "value" har nå verdien fra kommentaren, eller "false" dersom kommentaren ikke matcher osv
    For å oppdatere hvert sekund, bruk en interval, noe sånt :
*/

window.setInterval(function() {

  comment = getComment(document.body);
  value   = parseComment(comment);

}, 1000); // 1 sekund === 1000 millisekunder

[Garrian]

 

Ikke helt sikker på om jeg forstår opplegget her, men den øverste linjen er en kommentar, det er noe mer problematisk å hente verdien fra den kommentaren enn dersom det hadde vært en node, men det er fullt mulig, noe sånt :

 

function filterNone() {
  return NodeFilter.FILTER_ACCEPT;
}

function getComment(elem) {
  var curNode,
      search   = 'AWP_In_Variable Name',
      iterator = document.createNodeIterator(elem, NodeFilter.SHOW_COMMENT, filterNone, false);

  while (curNode = iterator.nextNode()) {
    if (curNode.nodeValue.indexOf(search) !== -1) {
      return curNode.nodeValue;
    }
  }
  return false;
}

function parseComment(cmt) {
  var match = 'Name=\'"variabler".';

  if (cmt && cmt.indexOf(match) !== -1) {
    return cmt.split(match).pop().replace(/\'/g, '');
  }
  return false;
}
var comment = getComment(document.body);
var value   = parseComment(comment);

/*  "value" har nå verdien fra kommentaren, eller "false" dersom kommentaren ikke matcher osv
    For å oppdatere hvert sekund, bruk en interval, noe sånt :
*/

window.setInterval(function() {

  comment = getComment(document.body);
  value   = parseComment(comment);

}, 1000); // 1 sekund === 1000 millisekunder

Tusen takk ! Men vet dessverre ikke hvordan dette kan kobles til koden jeg har.

 

Om du vil sette deg litt inn i problemstillingen kan du laste ned eksempelfilene fra https://justgage.com. Og bruke pointer.html.

 

 

[Garrian]

 

Litt enklere oppsummert: 

 

Tallet 20 nedenfor (value: 20) gjør at det viser 20% på skalaen. Så jeg ønsker en kode for å erstatte dette tallet med min variabel.

 

    document.addEventListener("DOMContentLoaded", function(event) {

      var g2 = new JustGage({

        id: 'g2',

        value: 20,

        min: 0,

        max: 100,

        symbol: '%',

        pointer: true,

        pointerOptions: {

          toplength: -15,

          bottomlength: 10,

          bottomwidth: 12,

          color: '#8e8e93',

          stroke: '#ffffff',

          stroke_width: 3,

          stroke_linecap: 'round'

        },

        gaugeWidthScale: 0.6,

        counter: true

      });

[0laf]

Først og fremst, er kommentaren :
 

<!-- AWP_In_Variable Name='"variabler".test' -->

 
på samme nettside som resten av koden? Dersom du må scrape den nettsiden over http må du finne på noe annet?

I koden jeg postet ovenfor har variabelen "value" den verdien du søker, dog som "string", ser ut som du vil ha et tall, men du kan gjøre noe sånt :
 

document.addEventListener("DOMContentLoaded", function(event) {
  var g2 = new JustGage({
    id: 'g2',
    value: (value ? +value : 0), // sett inn variabel i stedet for tallet ?
    min: 0,
    max: 100,
    symbol: '%',
    pointer: true,
    pointerOptions: {
      toplength: -15,
      bottomlength: 10,
      bottomwidth: 12,
      color: '#8e8e93',
      stroke: '#ffffff',
      stroke_width: 3,
      stroke_linecap: 'round'
    },
    gaugeWidthScale: 0.6,
    counter: true
  });
});