Datenpunkt in CSS

[Thorsten4-71]

Frohe Weihnachten Zusammen, ich habe mir eine (aus Excel) Tabelle in CSS konvertiert. Ich möchte jetzt gerne Werte aus Datenpunkte ins CSS Skript einfügen und zusätzlich ein Datenpunkt mit z.b. 50 addieren. Geht soetwas? Bin darin absoluter anfänger. Ich habe vor ca. 40 Jahre Basic auf einen C64 gelernt aber leider nicht weiter verfolgt. Über eine Hilfe wäre ich Euch sehr dankbar.

[Codierknecht]

@thorsten4-71 sagte in Datenpunkt in CSS:

Bin darin absoluter anfänger

Ja - denn Du bringst da CSS und HTML durcheinander.
CSS ist die reine Stilinformation (Formatierung). Du meinst wohl eher HTML. Das ist die Auszeichnungssprache im Web.

Wie immer gilt: Zeigen!

https://forum.iobroker.net/topic/51555/hinweise-für-gute-forenbeiträge

[Thorsten4-71]

@codierknecht Danke für die Info, wie gesagt ich bin absoluter Anfänger, ich habe das als CSS konvertieren lassen und habe jetzt auch keinen bereich für HTML gefunden und hoffe, es hilft mir trotzdem jemand. Hier ein Teil, kann da ein Datenpunkt eingebunden werden?

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-0ord{text-align:right}
</style>
<table class="tg" style="table-layout: fixed; width: 1047px">
<colgroup>
<col style="width: 79.2px">
<col style="width: 72.2px">
<col style="width: 288.2px">
<col style="width: 54.2px">
<col style="width: 96.2px">
<col style="width: 96.2px">
<col style="width: 96.2px">
<col style="width: 86.2px">
<col style="width: 97.2px">
<col style="width: 81.2px">
</colgroup>
  <tr>
    <th class="tg-031e">Kaufdatum</th>
    <th class="tg-031e">WKN</th>
    <th class="tg-031e">Aktie/ETF/Optionen</th>
    <th class="tg-031e">Anzahl</th>
    <th class="tg-0ord">&nbsp;Kaufpreis&nbsp;</th>
    <th class="tg-0ord">Gesamtwert</th>
    <th class="tg-031e">aktueller Kurs</th>
    <th class="tg-031e">Gesamtwert<br>  aktuell</th>
    <th class="tg-031e">&nbsp;Gebühr&nbsp;</th>
    <th class="tg-031e">Laufzeit</th>
  </tr>

MOD-EDIT: Code in code-tags gesetzt!

[Codierknecht]

@thorsten4-71
Das was Du hier zeigst ist eine Mischung aus CSS (das was zwischen <style>...</style> steht) und HTML (der Rest darunter). Für den Anfang würde ich zunächst den Teil mit der Formatierung weglassen. Das verwirrt nur.

Das sähe dann vereinfacht etwa so aus:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Wert 1</td>
    <td>Wert 2</td>
  </tr>
</table>

Wie gesagt: CSS ist allein für die Formatierung des Ganzen zuständig.

kann da ein Datenpunkt eingebunden werden?

Die Frage ist: Wofür? Willst Du das per Vis anzeigen lassen? Wenn ja: Welche? Vis oder Vis2?

Wenn Vis2 bin ich raus.
Ansonsten kann man das in ein HTML-Widget einbauen und die Werte per Binding da rein beamen.
Aufwändiger wird's allerdings, wenn da beliebig viele Zeilen zu verarbeiten sind.
Und die Zahl an Bindings ist auch begrenzt. Je nach Umfang der Tabelle kommt man da schnell an die Grenzen.

Wo kommen die Daten denn her?
Ich persönlich würde die Werte per Script schon in eine fertige HTML-Tabelle klöppeln und das dann in einen eigenen Datenpunkt unter 0_userdata.0 schreiben.

[OliverIO]

@thorsten4-71 sagte in Datenpunkt in CSS:

Datenpunkte ins CSS Skript einfügen und zusätzlich ein Datenpunkt mit z.b. 50 addieren

Um mal die Kernfrage zu beantworten:
Ja das geht und nennt sich Binding. Ob das sinnvoll ist kann schlecht beurteilt werden, da der Gesamtusecase nicht bekannt ist.

Anhand deines Teilbeispiels, welches unvollständig ist und ich ab Zeile 32 mit einer zusätzlichen Datenzeile und dem abschließenden table-Tag ergänzt habe.
Auch greifen die ganzen css-Anweisungen gar nicht, da bspw für die Klasse tg-031e gar keine Anweisungen gibt. wahrscheinlich müssten die klassen unten nach folgendem schema ersetzt werden
tg-031e = tg
tg-0ord = tg tg-0ord
habe ich aber nicht ausprobiert

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-0ord{text-align:right}
</style>
<table class="tg" style="table-layout: fixed; width: 1047px">
<colgroup>
<col style="width: 79.2px">
<col style="width: 72.2px">
<col style="width: 288.2px">
<col style="width: 54.2px">
<col style="width: 96.2px">
<col style="width: 96.2px">
<col style="width: 96.2px">
<col style="width: 86.2px">
<col style="width: 97.2px">
<col style="width: 81.2px">
</colgroup>
  <tr>
    <th class="tg-031e">Kaufdatum</th>
    <th class="tg-031e">WKN</th>
    <th class="tg-031e">Aktie/ETF/Optionen</th>
    <th class="tg-031e">Anzahl</th>
    <th class="tg-0ord">&nbsp;Kaufpreis&nbsp;</th>
    <th class="tg-0ord">Gesamtwert</th>
    <th class="tg-031e">aktueller Kurs</th>
    <th class="tg-031e">Gesamtwert<br>  aktuell</th>
    <th class="tg-031e">&nbsp;Gebühr&nbsp;</th>
    <th class="tg-031e">Laufzeit</th>
  </tr>
  <tr>
    <td class="tg-031e">{0_userdata.tabelle.kaufdatum}</th>
    <td class="tg-031e">{0_userdata.tabelle.WKN}</th>
    <td class="tg-031e">Aktie/ETF/Optionen</th>
    <td class="tg-031e">{0_userdata.tabelle.Anzahl;/+100}</th>
    <td class="tg-0ord">&nbsp;Kaufpreis&nbsp;</th>
    <td class="tg-0ord">Gesamtwert</th>
    <td class="tg-031e">aktueller Kurs</th>
    <td class="tg-031e">Gesamtwert<br>  aktuell</th>
    <td class="tg-031e">&nbsp;Gebühr&nbsp;</th>
    <td class="tg-031e">Laufzeit</th>
  </tr>
</table>

wie du siehst habe ich in 3 Spalten im letzten Block etwas eingetragen. Dien anderen Felder habe ich mal gelassen, da ja das prinzip klar werden soll.
Kaufdatum und WKN wird aus den entsprechenden Datenpunkten gefüllt.
Bei Anzahl habe ich noch eine Rechenoperation mit +100 eingefügt.
Das alles ist hier dokumentiert
https://github.com/ioBroker/ioBroker.vis

Wie du siehst, benötigst du für jede Spalte multipliziert für jede Zeile einen eigenen Datenpunkt. Das ist aber nicht so ganz sinnvoll da diese ja auch irgendwie befüllt werden müssen.
Daher bieten sich dann eher andere Lösungen an (Tabellenwidget, mein widgt jsontemplate oder die Tabelle komplett in einem skript aufbauen und dann das erzeugte html per binding in einem html widget anzeigen.