Daten vom Server als Bilder anzeigen nicht als Zahlen

ronald001

hallo ich bekomme vom server (alles läuft über localhost) infos fon meinem canbus im auto gesendet

ich würde mir jetzt gerne aber anstatt einer zahl (in meinem fall eine 0 eine 4 und eine ein bild anzeigen lassen

so wie im tacho halt

Externer Inhalt www.youtube.com

Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.

Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

bei dpf

server

Code

var can = require('socketcan');
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);

var channel = can.createRawChannel("can0", true);
channel.setRxFilters([{id:132,mask:132},{id:120,mask:120},{id:1845,mask:1845},{id:608,mask:608},{id:1854,mask:1854},{id:1832,mask:1832}])

var channel1 = can.createRawChannel("can1", true);
channel.setRxFilters([{id:2024,mask:2024}])

var carInfo = {};
carInfo.speed = 0
carInfo.revs = 0
carInfo.mtemp = 0
carInfo.atemp = 0
carInfo.boost = 0
carInfo.dpf = 0
carInfo.volt = 0
carInfo.tank = 0
carInfo.tkm = 0
carInfo.lastregen = 0
carInfo.kurbelw = 0


app.use(express.static(__dirname + "/html"));
app.use('/scripts', express.static(__dirname + '/node_modules/canvas-gauges/'));

io.on('connection', function(client) {
    console.log('client connected')
})

setInterval(() => {
    io.emit('carMessage', carInfo)
}, 50)

channel.addListener("onMessage", function(msg) {
if (msg.id === 132) {
    var tempSpeed = msg.data.readUIntBE(1, 2)
    carInfo.speed = tempSpeed / 96
    console.log(carInfo)
}})

channel.addListener("onMessage", function(msg) {
if (msg.id === 120) {
    carInfo.revs = msg.data.readUIntBE(5, 2)
    console.log(carInfo)
}})

channel.addListener("onMessage", function(msg) {
if (msg.id === 608) {
    var tempmtemp = msg.data.readUIntBE(7, 1)
    carInfo.mtemp = tempmtemp - 60
   console.log(carInfo)
}})

channel.addListener("onMessage", function(msg) {
if (msg.id === 1845) {
    carInfo.atemp = msg.data.readUIntBE(5, 1)
    console.log(carInfo)
}})


channel.addListener("onMessage", function(msg) {
if (msg.id === 1845) {
var tempboost =  msg.data.readUIntBE(7, 1)
    carInfo.boost = tempboost / 100
    console.log(carInfo)
}})

channel.addListener("onMessage", function(msg) {
if (msg.id === 1854) {
    if(msg.data[3] == 22) {
    carInfo.park1 =  msg.data.readUIntBE(4, 1)
    console.log(carInfo)
}}})

channel.addListener("onMessage", function(msg) {
if (msg.id === 1854) {
    if(msg.data[3] == 24) {
    carInfo.park2 =  msg.data.readUIntBE(4, 1)
    console.log(carInfo)
}}})

channel.addListener("onMessage", function(msg) {
if (msg.id === 1854) {
    if(msg.data[3] == 25) {
    carInfo.park3 =  msg.data.readUIntBE(4, 1)
    console.log(carInfo)
}}})


channel.addListener("onMessage", function(msg) {
if (msg.id === 1854) {
    if(msg.data[3] == 23) {
    carInfo.park4 =  msg.data.readUIntBE(4, 1)
    console.log(carInfo)
}}})

channel.addListener("onMessage", function(msg) {
if (msg.id === 1854) {
    if(msg.data[3] == 19) {
    carInfo.park5 =  msg.data.readUIntBE(4, 1)
    console.log(carInfo)
}}})

channel.addListener("onMessage", function(msg) {
if (msg.id === 1854) {
    if(msg.data[3] == 21) {
    carInfo.park6 =  msg.data.readUIntBE(4, 1)
    console.log(carInfo)
}}})

channel.addListener("onMessage", function(msg) {
if (msg.id === 1854) {
    if(msg.data[3] == 20) {
    carInfo.park7 =  msg.data.readUIntBE(4, 1)
    console.log(carInfo)
}}})

channel.addListener("onMessage", function(msg) {
if (msg.id === 1854) {
    if(msg.data[3] == 18) {
    carInfo.park8 =  msg.data.readUIntBE(4, 1)
    console.log(carInfo)
}}})

channel.addListener("onMessage", function(msg) {
if (msg.id === 1845) {
    if(msg.data[3] == 00) {
        carInfo.dpf = msg.data.readUIntBE(3, 1)
    console.log(carInfo)
}}})

channel.addListener("onMessage", function(msg) {
if (msg.id === 1832) {
    if(msg.data[3] == 19) {
    carInfo.tkm =  msg.data.readUIntBE(4, 2)
    console.log(carInfo)
}}})

channel.addListener("onMessage", function(msg) {
if (msg.id === 1832) {
    if(msg.data[3] == 01) {
    carInfo.gkm =  msg.data.readUIntBE(4, 3)
    console.log(carInfo)
}}})

channel.addListener("onMessage", function(msg) {
if (msg.id === 1849) {
    if(msg.data[3] == 16) {
    carInfo.volt =  msg.data.readUIntBE(4, 2)
    console.log(carInfo)
}}})

channel.addListener("onMessage", function(msg) {
if (msg.id === 1832) {
    if(msg.data[3] == 177) {
    var temptank = msg.data.readUIntBE(4, 1)
    carInfo.tank = (temptank / 2.55) * 0.7
    console.log(carInfo)
}}})

channel1.addListener("onMessage", function(msg) {
if (msg.id === 2024) {
    if(msg.data[3] == 138) {
    var templastregen = msg.data.readUIntBE(4, 2)
    carInfo.lastregen = templastregen / 10

    console.log(carInfo)
}}})

channel1.addListener("onMessage", function(msg) {
if (msg.id === 2024) {
    if(msg.data[2] == 12) {
    carInfo.kurbelw = msg.data.readUIntBE(3, 2)
    console.log(carInfo)
}}})









channel.start()
channel1.start()

server.listen(3000)

Alles anzeigen

index.js

Code

var socket = io.connect('192.168.0.24:3000');

document.addEventListener("DOMContentLoaded", onDomReadyHandler())

function onDomReadyHandler(event) {
    socket.on('carMessage', (data) => {


        var s = data.speed;
        s=s*100;
        s=Math.round(s);
        s=s/100;

        var v = data.volt;
        v=v*1;
        v=Math.round(v);
        v=v/100;

        var t = data.tank;
        t=t*1;
        t=Math.round(t);
        t=t/1;



         document.getElementById("speed").innerHTML = s;
        document.getElementById("revs").innerHTML = data.revs;
        document.getElementById("boost").innerHTML = data.boost;
        document.getElementById("mtemp").innerHTML = data.mtemp;
        document.getElementById("atemp").innerHTML = data.atemp;
        document.getElementById("dpf").innerHTML = data.dpf;
        document.getElementById("volt").innerHTML = v;
        document.getElementById("tank").innerHTML = t;
               console.log(data)


    })
}

Alles anzeigen

und meine html (bitte nicht steinigen es ist mein erstes mal das ich ne "webseite/app erstellt habe

für meinen nutzen reicht es soweit

Code

<head>

    <title>Canbus Gauges</title>
    <script src="/socket.io/socket.io.js"></script>
    <link rel="stylesheet" type="text/css" href="style1.css">

<script language="javascript" type="text/javascript">
function windowClose() {
window.open('','_parent','');
window.close();
}
</script>

</head>

<body>
    <script src="/index1.js"></script>
    <div id="hintergrund">
<div id="abstand1">
  <p><center>
    <p><strong>MS Can-Bus Dashboard</strong></p>
  </center></p>
    </div>

<div id="box1">
      <p>Geschwindigkeit:</p>
</div>

<div id="box2">
      <!-- speed -->
      <p id="speed"></p>
        <!-- //speed -->
</div>

<div id="kmh">
      <p>km/h</p>
</div>
        
<div id="box13">
      <p>Spannung:</p>
</div>

<div id="box14">
      <!-- volt -->
      <p id="volt"></p>
          <!-- //volt -->
</div>

<div id="v">
      <p>Volt</p>
</div>
        
<div style="clear:left" />

<div id="box3">
      <p>Drehzahl:</p>
</div>

<div id="box4">
      <!-- revs -->
      <p id="revs"></p>
        <!-- //revs -->
        </div>
        
<div id="u">
    <p>U/min</p>
</div>

<div id="box15">
      <p>Diesel:</p>
</div>

<div id="box16">
      <!-- tank -->
      <p id="tank"></p>
        <!-- //tank -->
</div>

<div id="t">
      <p>L</p>
</div>

<div style="clear:left" />

<div id="box5">
      <p>Ladedruck:</p>
</div>

<div id="box6">
      <!-- boost -->
      <p id="boost"></p>
        <!-- //boost -->
        </div>


<div id="b">
    <p>bar</p>
</div>

<div id="box17">
      <p>Tageskm:</p>
</div>

<div id="box18">
      <!-- tkm -->
      <p id="tkm"></p>
        <!-- //tkm -->
        </div>


<div id="tk">
    <p>KM</p>
</div>


<div style="clear:left" />

<div id="box7">
      <p>Wassertemp:</p>
</div>

<div id="box8">
      <!-- mtemp -->
      <p id="mtemp"></p>
        <!-- //mtemp -->
        </div>


<div id="t1">
    <p>&#x2103;</p>
</div>

<div id="box19">
      <p>Gesamtkm:</p>
</div>

<div id="box20">
      <!-- gkm -->
      <p id="gkm"></p>
        <!-- //gkm -->
        </div>


<div id="gk">
    <p>KM</p>
</div>


<div style="clear:left" />

<div id="box9">
      <p>Getriebetemp:</p>
</div>

<div id="box10">
      <!-- atemp -->
      <p id="atemp"></p>
        <!-- //boos -->
        </div>


<div id="t2">
    <p>&#x2103;</p>
</div>

<div style="clear:left" />
        
<div id="box11">
      <p>DPF:</p>
</div>

<div id="box12">
      <!-- dpf -->
      <p id="dpf"></p>
        <!-- //dpf -->
        </div>


<div id="status">
    <p>Status</p>
</div>

<div style="clear:left" />

<a href="hscan.html">HS Can Daten</a>

<input type="button" value="EXIT" onclick="windowClose();">


</div>
</body>

Alles anzeigen

nun hole ich mit :

document.getElementById("dpf").innerHTML = data.dpf;

den wert vom dpf vom server

in meinem Fall wie oben beschrieben ist das entweder

0 für off

4 frür regeneration gestartet

8 für regeneration beendet

mit:

<div id="box12">
<p id="dpf"></p>
</div>

zeig ich das dann auf der seite an

würde wie gesagt gerne die zahlen durch kleine "symbole" ersetzen

und eventuell auch wenn die werte sich ändern aber in einem gewissen bereich liegen

0-3

4-7

8-11

ich suche nun seit Tagen im netzt

und bitte bitte keine Steinigung an mir vornehmen

timtim

Hi,

am einfachsten wäre hier eine Funktion zu erstellen, welche dir abhängig der Werte ein Bild oder Icon zurück gibt.

Ein kleines beispiel mit UTF-8 Emojis (https://www.w3schools.com/charsets/ref_utf_symbols.asp https://apps.timwhitlock.info/emoji/tables/unicode )

Code

<div id='test'></div>

<script>

function getIcon(numberValue){
    if(numberValue == 0){
        return "&#9940;"
    }
    else if(numberValue == 4){
        return "&#9981"
    }
    else if(numberValue == 8){
        return "&#127937"
    }
}

document.getElementById("test").innerHTML = getIcon(8);

</script>

Alles anzeigen

Um das nun für Wertebereiche zu tun müsste man nur die If's passend verwenden. Und das getIcon() eben an der stelle an welcher du normal die zahl setzen würdest.

Grüße

Timo

Jetzt mitmachen!