HTML-Komponente einfärben

[Mathias]

In JavaScript, kann ich folgendermassen Komponenten einfärben.
Ich habe auf dem Body mehrere Buttons.

Code: Alles auswählen

  // Hintegrund (body)   
  document.getElementsByTagName("body")[0].style.backgroundColor = "#FFDDFF";  // rosa
  // 3. Button
  document.getElementsByTagName("input")[2].style.backgroundColor = "#DDDDFF";  // hellblau

Als Vorlage habe ich dies gefunden: https://www.w3schools.com/jsref/tryit.a ... nclick_win

Wie kann ich dies mit pas2js umsetzen ?

Mit einer Typenumwandlung bin ich bis zum "style" gekommen, jetzt müsste ich es (nur) noch bis zum "backgroundColor" schaffen.

Code: Alles auswählen

    TJSHTMLElement(document.getElementsByTagName('BODY')[0]).style:=nil;

Einer eine Idee ?

[Mathias]

Zu meinem Erstaunen funktioniert folgender Code. Der Button wird rot und der Hintergrund grün.
Ich habe eine neue Classe hinzugefügt.

Code: Alles auswählen

program Project1;

{$modeswitch externalclass}

uses
  JS, Classes, SysUtils, Web;

type
    TColorElement = class external name 'Object' (TJSCSSStyleDeclaration)
      backgroundColor: JSValue; external name 'backgroundColor';
    end;

var
  Button1: TJSElement;

begin
  Button1 := document.createElement('input');
  Button1['id'] := 'Button2_id';
  Button1['type'] := 'button';
  Button1['value'] := 'Button2';
  document.body.appendChild(Button1);

  TColorElement(TJSHTMLElement(document.getElementsByTagName('input')[0]).style).backgroundColor := 'red';
  TColorElement(TJSHTMLElement(document.getElementsByTagName('body')[0]).style).backgroundColor := 'green';
end.

Ich vermute mal, das da sicher etwas fertiges vorhanden ist ?

[theo]

Kann man das nicht direkt als CSS Code setzen?

Code: Alles auswählen

blabla).style := 'color:blue; background-color:red';

Sonst CSS Datei einbinden und mit ID, Klasse oder Tag defnieren.

[Mathias]

Kann man das nicht direkt als CSS Code setzen?

So würde es gehen.

Code: Alles auswählen

TJSHTMLElement(document.getElementsByTagName('body')[0]).style.cssText := ' background-color:red';

Es wäre cool gewesen, wen es eine Lösung gäbe, so ähnlich wie die obige javascript Lösung.

Nur habe ich mit der css-Lösung noch festgestellt, das alle Style-Parameter überschrieben werden.

In diesem Beispiel, wird der background-color überschrieben.

Code: Alles auswählen

    TJSHTMLElement(document.getElementsByTagName('input')[0]).style.cssText:=' background-color:red'; // wird überschrieben
    TJSHTMLElement(document.getElementsByTagName('input')[0]).style.cssText:=' borderColor:green';

[theo]

Ich würde es sowieso anders machen.
Ich würde das CSS in den HTML Head schreiben oder aus einer ".css Datei linken und dann im JS Code nur noch die Klasse zuweisen, also gar keine einzelnen Eigenschaften (Farbe etc.).

[Mathias]

Ich würde das CSS in den HTML Head schreiben

Ist dies nicht einer der Vorzüge von pas2js, das man die HTML nicht anfassen muss ?

[theo]

Ich würde das CSS in den HTML Head schreiben

Ist dies nicht einer der Vorzüge von pas2js, das man die HTML nicht anfassen muss ?

Ich weiss nicht was der Vorteil von pas2js ist, da ich es noch nie ausprobiert habe.
Wie schon gesagt, weiss ich nicht, welches Problem das überhaupt löst.
Web und LCL lassen sich ja nicht gut aufeinander abbilden.

Am Ende besteht das Web ja doch aus HTML, CSS, JS, DOM und serverseitigen Technologien und pas2js ist einfach ein Umweg.
Du siehst ja selber, dass du nicht an diesen Sachen vorbeikommst.
document.getElementsByTagName('input') greift ja z.B Pascal-JS-mässig auf ein HTML Element zu <INPUT...>

Ich lasse mich gerne vom Gegenteil überzeugen.
Bis jetzt leuchtet es mir leider nicht ein.

Vielleicht hat es eine pädagogischen Nutzen, da du so vielleicht JS lernst ohne es zu bemerken?

[Mathias]

Ich weiss nicht was der Vorteil von pas2js ist, da ich es noch nie ausprobiert habe.
Wie schon gesagt, weiss ich nicht, welches Problem das überhaupt löst.

Da gehen die Meinungen auseinander. Ich hatte mal mit javascript eine WebGL Animation geschrieben. Der Dialekt von javascript ist noch schlimmer als der von C/C++. Und wen man die mit seiner Muttersprache Pascal machen kann, geht dies viel einfacher. Man kann zB. die gewohnte TStringList verwenden.
Klar muss man bei pas2js die Bibliotheken von Browsern kennen lernen. Dies ist bei Desktop-Anwendungen der gleiche Fall. Beispiele SDL oder GTK.
Du coodest sicher auch lieber mit Pascal eine SDL oder GTK-Anwendung ?

Web und LCL lassen sich ja nicht gut aufeinander abbilden.

LCL ist im Grund nur eine sehr ausgereift Bibliothek für FPC.

[theo]

Du coodest sicher auch lieber mit Pascal eine SDL oder GTK-Anwendung ?

Immer wenn es möglich ist und nicht zu viele Verrenkungen erfordert, wähle ich Lazarus und FPC.

Aber manchmal stimmt Aufwand und Ertrag einfach nicht. Z.B. bei Arduino/ESP.
Da tippe ich lieber C in die Arduino IDE und bin immer noch 10x schneller fertig, als ich mit FPC auch nur ein funktionierendes "Setup" habe, von Bibliotheken ganz zu schweigen. Das meiste ist ja eh Copy&Paste.

Kürzlich habe ich etwas mit VISA gemacht. Zuerst wollte ich NI-VISA auf Linux installieren um nachher mit FPC auf die Library zuzugreifen.
Ich habe das nicht einmal so zum Laufen gebracht auf Ubuntu, auch ohne den FPC Teil nicht.
PyVisa hat hingegen sofort funktioniert.
Da lerne ich halt ein bisschen Python bis das Interface läuft. Nachher mit TPythonEngine in Lazarus weiter.

Ich wähle meistens den Weg des geringsten Widerstands. Was das ist, muss jeder von Fall zu Fall selbst entschieden.
Bei pas2js kommt es wahrscheinlich auf den Anwendungsfall an.

[Mathias]

Aber manchmal stimmt Aufwand und Ertrag einfach nicht. Z.B. bei Arduino/ESP.
Da tippe ich lieber C in die Arduino IDE und bin immer noch 10x schneller fertig, als ich mit FPC auch nur ein funktionierendes "Setup" habe,

Da kann ich dir voll zustimmen, besonders wen man das Arduino-Projekt weiter gibt. Bei einer Skechänderung, oder defektes des Arduinos, kann man niemanden zumuten ein Cross-Compiler zu installieren. Eine Arduino IDE sollte jeder leihe installieren können.

Da lerne ich halt ein bisschen Python bis das Interface läuft. Nachher mit TPythonEngine in Lazarus weiter.

Sehe ich das richtig, das man damit Python libs in LAzarus in FPC verwenden kann ?

Bei pas2js kommt es wahrscheinlich auf den Anwendungsfall an.

Dies denke ich auch. Für etwas professionelles würde ich javascript und html vorziehen. Aber wie schon gesagt, für eine Animation reicht pas2js völlig.
Ob man mit pas2js zB. ein Forum programmieren kann, ist die 2. Frage. Keine Ahnung, wie gut es mit SQL und co zusammenarbeitet.

[theo]

Sehe ich das richtig, das man damit Python libs in LAzarus in FPC verwenden kann ?

Direkt weiss ich nicht, aber man kann Python Funktionen ausführen.
In TPythonEngine.InitScript kann man das drumherum ablegen z.B. (abgekürzt):

Code: Alles auswählen

import sys;
import io;
import os;
import time;
import pyvisa;
import struct;
import json;

etc.etc.

def setData(item):
        try:
           o.write(item)
        except pyvisa.errors.VisaIOError as c:
              if type(c) == str:
                    if c.find('VI_ERROR_TMO') == -1:
                            return c

Dann kann man in Lazarus diese Funktion(en) aufrufen:

Code: Alles auswählen

procedure TSCPICtrlMngr.SetScpi(Cmd: string; Value: string; Target: TObject);
begin
  if PE.IsHandleValid then
    PE.ExecString('setData(''' + Cmd + ' ' + Value + ''')');
  if Assigned(fOnSCPIChangeValue) then OnSCPIChangeValue(Self);
end;