Table 9x4 pcoWEB

100%

Table 9x4 pcoWEB

✓ Published0🌍 Public

Last edited Mar 5, 2023

Created on Mar 5, 2023

The example visualizes the binary inputs and outputs of a Carel pco Board as a 9x4 grid of LED-like cells, with two rows for 18 inputs and two rows for 18 outputs. Built with plain HTML and CSS, the page uses flexbox for layout and styled `div` elements as indicators, with yellow highlighting on active cells. The code references specific board connections (C19-X4, C17-X2) via CSS IDs, showing a static snapshot of the device's state through a pcoWEB server interface.

AI-generated description

Visualize the Binary inputs and outputs of a Carel pco Board through a pcoWEB Server

MIT Licensed

Similar vizzes

Loading thumbnail…

Pico:ed Comprehensive Demo (CircuitPython)

This demo turns the ELECFREAKS Pico:ed RP2040 board into an interactive hardware showcase, using the 17×7 IS31FL3731 LED matrix as a live data display. Button A cycles through menu items, Button B activates a feature, and pressing both exits early. A scanner auto-detects external I2C sensors (MPU6050, QMC5883L, HMC5883L) and reports results on the matrix; the on-board RP2040 die temperature sensor drives a real-time readout. Code is a single `code.py` that runs directly from the CIRCUITPY drive, exercising the board's buttons, buzzer, and temperature sensor while adapting to whatever I2C breakout is connected.

IIoTeacher

53% match

Loading thumbnail…

p5 wolfram CA

A p5.js sketch renders a one-dimensional cellular automaton, displaying each generation as a horizontal row of small squares that stack downward over time. The simulation starts with a single active cell in the center of the top row and applies a fixed Wolfram rule set to compute each subsequent generation from the three neighboring cells above. The code uses the p5.js `createCanvas`, `rect`, and `fill` functions to draw the grid, and the result produces a deterministic, rule-based visual pattern that evolves over the canvas height.

PPhilippe Rivière

53% match

Loading thumbnail…

P5.js 64 x 128

This example renders a responsive grid of 64 columns by 128 rows of circles, colored by Perlin noise on an HSB palette. It uses the p5.js library with `createCanvas`, `noise`, `fill`, and `ellipse` to draw the visualization. The sketch also integrates `p5.AudioIn` to capture microphone volume, which dynamically adjusts the noise animation speed. The code demonstrates a custom hot-reloading setup for VizHub, extracting p5 functions and binding them to the sketch instance.

EEJ Fox

53% match

Loading thumbnail…

Staafjespuzzel code from Henk, tweaked. (36cube puzzle)

This visualization shows the solution search for the 36cube puzzle, a 6x6 grid where each row and column must contain each color exactly once. The code displays the board state in text form, with each cell colored and a numeric permutation showing the column order for each row. It tracks remaining colors per height level and uses a backtracking algorithm with placement statistics to explore solutions. The implementation uses C++ with the standard library, specifically the `set` container, and outputs progress markers and intermediate board states to standard output.

GGerHobbelt

52% match

Loading thumbnail…

Table_Cell Integration Trial12_EH

This interactive visualization maps gene expression data onto a stylized diagram of a cell, showing which subcellular locations (e.g., plasma membrane, cytosol) have up- or down-regulated genes. It integrates a treemap of gene ontology categories, a color-coded cell diagram drawn with `d3.line` and `curveCardinal`, and a filterable HTML table. The code uses `d3.scaleSequential` with `interpolateBlues` and `interpolateReds` to color cell regions based on net differential expression values, and transitions animate table row updates.

PParkhwahwa

51% match

Loading thumbnail…

CSS Grid work

This example demonstrates a CSS Grid layout using four colored panels arranged in an asymmetric pattern within a full-viewport section. The grid defines named areas—left, center, centerone, and right—to position the crimson divs across rows and columns with gaps. It uses pure CSS grid-template-areas and grid-template-rows to control the layout, while the HTML page includes no JavaScript or external frameworks. The visualization highlights how grid-area assignments and fractional row units (1fr) create a responsive, non-uniform structure.

LLaurens

51% match

Loading thumbnail…

Pracitcas con OLED display acumulativas de LDI

This visualization demonstrates a Raspberry Pi Pico W with an OLED display, combining two interactive exercises. The first shows a regional weather menu with five simple animated icon bitmaps controlled by physical buttons. The second displays a short, pre-prompted response from the OpenAI API, such as a joke or recipe, with the output truncated to fit the screen. The code uses the `ssd1306` library for OLED rendering and the `urequests` library to call OpenAI's chat completions endpoint, managing the API response text for clear on-device display.

IIoTeacher

50% match

Loading thumbnail…

Table_Cell Integration Trial2

This visualization integrates a gene table with a diagram of a cell. The cell diagram shows color-coded regions representing net gene expression changes based on data for a list of genes. It uses D3 v5 to draw the cell areas as SVG paths. Clicking a cell region filters the gene table, highlighting associated genes. The table is sortable and styled with CSS, while the data is loaded from an online JSON file.

PParkhwahwa

50% match