Programmiersprache – die neusten Beiträge

Ist das ein genauer Typescript Code?

interface User {
    id: number;
    firstName: string;
    lastName: string;
    email: string;
    password: string;
}

let users: User[] = [];
let currentUserId: number | null = null;

const userForm = document.getElementById('userForm') as HTMLFormElement;
const firstNameInput = document.getElementById('firstName') as HTMLInputElement;
const lastNameInput = document.getElementById('lastName') as HTMLInputElement;
const emailInput = document.getElementById('email') as HTMLInputElement;
const passwordInput = document.getElementById('password') as HTMLInputElement;
const userTableBody = document.getElementById('userTableBody') as HTMLTableSectionElement;

userForm.addEventListener('submit', (event) => {
    event.preventDefault();
    if (currentUserId === null) {
        addUser();
    } else {
        updateUser();
    }
    userForm.reset();
    currentUserId = null;
});

function addUser() {
    const newUser: User = {
        id: Date.now(),
        firstName: firstNameInput.value,
        lastName: lastNameInput.value,
        email: emailInput.value,
        password: passwordInput.value,
    };
    users.push(newUser);
    renderUserTable();
}

function updateUser() {
    const user = users.find((u) => u.id === currentUserId);
    if (user) {
        user.firstName = firstNameInput.value;
        user.lastName = lastNameInput.value;
        user.email = emailInput.value;
        user.password = passwordInput.value;
        renderUserTable();
    }
}

function deleteUser(id: number) {
    users = users.filter((user) => user.id !== id);
    renderUserTable();
}

function editUser(id: number) {
    const user = users.find((u) => u.id === id);
    if (user) {
        currentUserId = id;
        firstNameInput.value = user.firstName;
        lastNameInput.value = user.lastName;
        emailInput.value = user.email;
        passwordInput.value = user.password;
    }
}

function renderUserTable() {
    userTableBody.innerHTML = '';
    users.forEach((user) => {
        const row = document.createElement('tr');
        row.innerHTML = `
      <td>${user.firstName}</td>
      <td>${user.lastName}</td>
      <td>${user.email}</td>
      <td>
        <button onclick="editUser(${user.id})">Bearbeiten</button>
        <button onclick="deleteUser(${user.id})">Löschen</button>
      </td>
    `;
        userTableBody.appendChild(row);
    });
}

Bitte es soll nichts von Js haben, sondern wirklich die Typescript Merkmale beeinhalten

Studium, Code, Informatik, Programmiersprache, TypeScript

Wie kann der Scroll-Button ausgeblendet werden bzw. eingeblendet?

Warum funktioniert es nicht, der Button bleibt von Anfang bis Ende der Seite eingeblendet.

Ich möchte eine JS -Funktion schreiben, die diesen Button erst einblendet, wenn der Nutzer ein Stück weit herunter gescrollt hat. Ebenso soll der Button versteckt werden, wenn der Nutzer wieder nach oben gescrollt hat.

Mein bisheriger Code:

HTML:  
   <a href="#" id="topButton">Nach oben</a>

CSS: 
#topButton {
    position: fixed;
    bottom: 20px; /* Abstand vom unteren Rand */
    right: 30px; /* Abstand vom rechten Rand */
    background-color: #007BFF; /* Blau */
    color: white; /* Weißer Text */
    padding: 10px 15px; /* Innenabstand */
    border: none; /* Kein Rand */
    border-radius: 5px; /* Abgerundete Ecken */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Schatten */
    text-decoration: none; /* Keine Unterstreichung */
    font-size: 14px; /* Schriftgröße */
    cursor: pointer; /* Zeiger-Hand-Symbol */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Animation */
  }


  #topButton:hover {
    background-color: #0056b3; /* Dunkleres Blau beim Hover */
    transform: translateY(-2px); /* Leichtes Anheben beim Hover */
  }


  #topButton:active {
    transform: translateY(0); /* Zurücksetzen bei Klick */
  }

JavaScript:
// Element auswählen
let topButton = document.getElementById("topButton");


// Scroll-Event-Listener hinzufügen
window.addEventListener("scroll", function() {
  // Zeigt den Button an, wenn mehr als 50px gescrollt wurde
  if (window.scrollY > 50) {
    topButton.style.display = "block"; // Button wird sichtbar
  } else {
    topButton.style.display = "none"; // Button wird versteckt
  }
});


// Klick-Event für den Button
topButton.addEventListener("click", function(event) {
  event.preventDefault(); // Standard-Aktion verhindern
  window.scrollTo({
    top: 0, // Scrollt nach oben
    behavior: "smooth" // Sanftes Scrollen
  });
});
Homepage, App, Programm, HTML, Webseite, programmieren, CSS, JavaScript, HTML5, Code, PHP, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code

Frage zu c# bzw. #script?

Kennt sich jemand mit #script aus?

Ich habe folgendes Skript:

 "Script/DeviceTemplate": {
        "Content": "{{var assignments = []}}
{{var nodeId = ServiceTask.DeviceInstallationServiceTask.Details.NodeId}}
{{#each groupName in Typicals.DeviceTypes.xxx.DeviceTypicals[ServiceTask.DeviceInstallationServiceTask.Details.Typical.Name].SignalGroups}}
{{var index = 0}}
{{#each signal in Typicals.DeviceTypes.xxx.SignalGroups[groupName].SignalList}}
{{var baseComponent = ServiceTask.DeviceInstallationServiceTask.Details.Typical.SignalAssignments[groupName].BaseComponent}}
{{var _ = assignments.push({
    "assignmentIndex": index,
	"deviceId": "" + nodeId,
    "sparkplugName": baseComponent + signal.MetricBaseName
})}}
{{index = index + 1}}
{{/each}}
{{/each}}
{{ {
  "system": {
    "deviceName": nodeId
  },
  "apps": [
    {
      "appName": "SPARKPLUG",
      "appId": 12345,
      "settings": {
                "clientId": nodeId,
                "keepAliveInterval": 120,
                "publishInterval": 120,
                "startupDelay": 50
      },	 
      "sparkplugSettings": {
            "mqttTopic": "spBv1.0",
            "sparkplugTopic": "NTN/{MessageType}/" + nodeId
      },
      "assignments": assignments
    }
  ]
} |> json}}"
      }

Dieses hat zwei Schleifen, in der inneren Schleife soll die Variable index um 1 erhöht werden. Alles funktioniert, nur bekomme ich in der Ausgabe für jeden Aufruf von

index = index + 1

ebenfalls eine Ausgabe:

     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
   {"system":{"deviceName......

Wie kann ich die Ausgabe von 1 bis 23 unterdrücken?

Software, IT, programmieren, C Sharp, Code, Programmiersprache, Script, Softwareentwicklung

Warum scrollt es automatisch nach oben, wenn ich auf den Slider klicke (siehe bitte meine letzte Frage für Code)?

Wenn ich auf den Slider klicke, dann scrollt es danach nicht mehr nach unten, sondern geht automatisch nach oben. Woran könnte das Problem liegen?

HTML:

<article id="ÜberschriftAnfang">
  <h1>Michael Jackson - The King of Pop</h1>
  
  <!-- Slideshow Container -->
  <div class="slideshow-container">
   
    <!-- Slide 1 -->
    <div class="mySlides fade active" style="display:block">
      <div class="numbertext">1 / 3</div>
      <img src="Background picture.jpg" style="width:100%" alt="Background Image">
    </div>

    <!-- Slide 2 -->
    <div class="mySlides fade">
      <div class="numbertext">2 / 3</div>
      <img src="papers.co.jpg" style="width:100%" alt="Background Image 2">
    </div>

    <!-- Slide 3 -->
    <div class="mySlides fade">
      <div class="numbertext">3 / 3</div>
      <img src="5m6XCzF.jpg" style="width:100%" alt="Background Image 3">
    </div>

    <!-- Navigation Arrows -->
    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>

  </div>

  <!-- Dots Navigation -->
  <div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
  </div>
</article>

JS:

let slideIndex = 1;
showSlides(slideIndex); // Startet die Slideshow und zeigt das erste Bild an.

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");

  // Überprüfen, ob der slideIndex größer als die Anzahl der Slides ist
  if (n > slides.length) {
    slideIndex = 1; // Setze den Index auf 1, wenn er größer ist als die Anzahl der Slides
  }

  // Überprüfen, ob der slideIndex kleiner als 1 ist
  if (n < 1) {
    slideIndex = slides.length; // Setze den Index auf die letzte Slide, wenn er kleiner ist als 1
  }

  // Alle Slides ausblenden
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  // Alle Dots zurücksetzen
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }

  // Zeige das aktuelle Bild und Dot
  slides[slideIndex - 1].style.display = "block";  
  dots[slideIndex - 1].className += " active";
}

CSS: siehe Antwort

HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webentwicklung, Frontend

Custom Cursor wird nicht angezeigt?

Die Programmierung von meiner Bildergalerie (Slider) hat mir ein paar Schwiergkeiten bereitet...schlussendlich habe ich chatgpt gefragt und der hat mir direkt einen Code ausgespuckt- der funktioniert auch soweit so gut allerdings werden die Mouse-Cursor immer noch nicht richtig angezeigt. Eigentlich sollten diese eigene Bilder anzeigen, je nachdem über welche seite des Bildes man sich bewegt. Weiß jemand wie/ob man so etwas programmieren kann bzw. wo mein Fehler liegen könnte?

- Die Bilder liegen aufjeden Fall im selben Ordner wie index2.html

Hier der vollständige Code:

<!DOCTYPE html>

<html lang="de">

<head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Bild-Slider mit benutzerdefiniertem Cursor</title>

 <style>

  body {

   font-family: Arial, sans-serif;

   display: flex;

   justify-content: center;

   align-items: center;

   height: 100vh;

   margin: 0;

   background-color: #f0f0f0;

  }

  .slider-container {

   position: relative;

   width: 500px;

   height: 300px;

   overflow: hidden;

   border: 2px solid #ccc;

   border-radius: 10px;

  }

  .slider-images {

   display: flex;

   transition: transform 0.5s ease-in-out;

  }

  .slider-images img {

   width: 100%;

   height: 100%;

   object-fit: cover;

  }

  /* Unsichtbare, transparente Boxen für Cursorsteuerung */

  .slider-nav {

   position: absolute;

   top: 0;

   width: 20%; /* Nur ein schmaler Bereich am linken und rechten Rand */

   height: 100%;

   background-color: transparent;

   z-index: 2;

  }

  /* Linke Box: Cursor ändert sich beim Hover */

  .slider-nav.left {

   left: 0;

   cursor: url('pfeillinks.png') 22 22, auto; /* Benutzerdefinierter Cursor (Hotspot bei 22px, 22px) */

  }

  /* Rechte Box: Cursor ändert sich beim Hover */

  .slider-nav.right {

   right: 0;

   cursor: url('pfeilrechts.png') 22 22, auto; /* Benutzerdefinierter Cursor (Hotspot bei 22px, 22px) */

  }

  /* Hover-Effekt: Cursor als Pointer, wenn er über den Boxen schwebt */

  .slider-nav.left:hover {

   cursor: url('pfeillinks.png') 22 22, pointer; /* Benutzerdefinierter Cursor (Hotspot bei 22px, 22px) */

  }

  .slider-nav.right:hover {

   cursor: url('pfeilrechts.png') 22 22, pointer; /* Benutzerdefinierter Cursor (Hotspot bei 22px, 22px) */

  }

 </style>

</head>

<body>

<div class="slider-container">

 <div class="slider-images">

  <img src="https://via.placeholder.com/500x300/FF5733" alt="Bild 1">

  <img src="https://via.placeholder.com/500x300/33C4FF" alt="Bild 2">

  <img src="https://via.placeholder.com/500x300/75FF33" alt="Bild 3">

 </div>

 <!-- Unsichtbare Boxen für die Linke und Rechte Navigation -->

 <div class="slider-nav left" onclick="changeSlide('prev')"></div>

 <div class="slider-nav right" onclick="changeSlide('next')"></div>

</div>

<script>

 let currentIndex = 0;

 const images = document.querySelectorAll('.slider-images img');

 const totalImages = images.length;

 function changeSlide(direction) {

  if (direction === 'next') {

   currentIndex = (currentIndex + 1) % totalImages;

  } else if (direction === 'prev') {

   currentIndex = (currentIndex - 1 + totalImages) % totalImages;

  }

  const sliderImages = document.querySelector('.slider-images');

  sliderImages.style.transform = `translateX(-${currentIndex * 100}%)`;

 }

</script>

</body>

</html>

Ich bin jedem der sich mit dem Problem beschäftigt dankbar! (:

Computer, HTML, Webseite, programmieren, CSS, Code, Programmiersprache, Webdesign, Webentwicklung, Cursor, Galerie, slider

Epson Nadeldrucker einzelne Buchstaben drucken?

Hey Leute!

Ich versuche aus einem Raspberry Pi 4 und meinem EPSON LQ Nadeldrucker eine "Schreibmaschiene" zu bauen. Ist es möglich, statt Line-By-Line jeden Buchstaben den ich eingebe einzeln zu drucken? Ich komme nämlich nicht weiter.

Mein aktuelles Script:

import os
import sys
import termios
import tty


# Pfad zum USB-Drucker
DRUCKER_USB_PORT = '/dev/usb/lp0'


# Funktion, um eine Taste direkt ohne ENTER zu lesen
def lese_taste():
    fd = sys.stdin.fileno()
    alte_einstellungen = termios.tcgetattr(fd)
    try:
        tty.setraw(fd)
        taste = sys.stdin.read(1)  # Liest genau 1 Zeichen
    finally:
        termios.tcsetattr(fd, termios.TCSADRAIN, alte_einstellungen)
    return taste


# Verbindung zum Drucker öffnen
if not os.path.exists(DRUCKER_USB_PORT):
    print(f"Der Drucker wurde nicht unter {DRUCKER_USB_PORT} gefunden.")
    sys.exit(1)


try:
    with open(DRUCKER_USB_PORT, 'wb', buffering=0) as drucker:  # Ungepufferter Modus
        print("Schreibmaschinen-Modus aktiv. Tippe, um zu drucken. Drücke 'Strg+C' zum Beenden.")


        while True:
            taste = lese_taste()  # Zeichen sofort lesen
            if ord(taste) == 3:  # Strg+C beenden
                break
            elif ord(taste) == 13:  # ENTER (Carriage Return)
                drucker.write(b'\r\n')  # Zeilenumbruch senden
            else:
                drucker.write(taste.encode('ascii'))  # Zeichen sofort senden
            drucker.flush()  # Sicherstellen, dass die Daten sofort geschrieben werden


except PermissionError:
    print(f"Keine Berechtigung für Zugriff auf {DRUCKER_USB_PORT}.")
    print("Führe das Skript mit 'sudo' aus oder ändere die Berechtigungen:")
    print(f"  sudo chmod 666 {DRUCKER_USB_PORT}")
except Exception as e:
    print(f"Ein Fehler ist aufgetreten: {e}")
finally:
    print("Verbindung zum Drucker geschlossen.")


Drucker, Code, Programmiersprache, Python, Schreibmaschine, Python 3, Raspberry Pi, ChatGPT

Meistgelesene Beiträge zum Thema Programmiersprache