עברית
Motion
AccessibilityPrivacy
Case study12 / 15September 2026

TaazTV

A digital news and notice board for screens around Merkaz Ta'az, edited by typing straight onto the cards.

Role
Sole developer, prototype to product
Organisation
Merkaz Ta'az, IDF
Period
September 2026
Context
Ta'az (part of the IDF)

01 / The challenge

A unit has a steady flow of information for the people in it: news, notices, events, safety instructions, the day's schedule and the numbers to call in an emergency. On printed notices it goes out of date quickly, and every change means printing and pinning up a new sheet.

The idea was one digital board for Merkaz Ta'az, shown on screens around the unit. It had to suit the place: run on an ordinary computer on a closed network with no internet, and be simple enough for staff who are not technical to update it themselves.

  • Printed notices go out of date quickly
  • No way to show a notice only when it matters
  • Closed network: no internet connection
  • The people updating it are not programmers

02 / What I built

TaazTV is a digital board for any 16:9 screen. One display shows the unit's name with the clock and the Hebrew and Gregorian dates, a menu, today's schedule with the current event highlighted, emergency and in-house phone numbers, and a news ticker. The main area is a moving board of announcement cards in eight styles, or a full-width slideshow.

Staff run it from a Hebrew control panel in the browser. They open a card and type straight onto it, drag items into order, add pictures and QR codes, and set when each item should appear. Every change shows on the display at once, and the whole board works without an internet connection.

How it came together

  1. 15 Sep 2026Prototype, layout, designA first single-page board and a four-zone layout, taken into Claude Design to create the display and the control panel.
  2. 17 Sep, 12:00A working board and panelWith Claude Code the designs became a working display and control panel, synced without reloading, with picture cropping and backup.
  3. 17 Sep, 13:00A round of review notesReal weather, undo and redo, the Hebrew date in letters, and a live-preview window that can be dragged and resized.
  4. 17 Sep, 16:00Card becomes the editorA visual card-type picker, drag-to-reorder in every list, QR codes on cards, and in-place editing with the display's own drawing code.
  5. 17 Sep, 20:00Offline, one list, schedulesFonts kept inside the project, smooth endless scrolling, cards and slides from one list, and weekly time windows.
  6. 17 Sep, 21:30QR codes that really scanPhones could not read the codes from the hand-written QR encoder. I replaced it with a proven library and verified 254 codes.
  7. 22 Sep 2026Into Ta'az's code libraryPublished with its full history to the private Ta'az organisation on GitHub.

03 / Highlights

01

One screen, six areas

The unit's name, clock and dates, a menu, today's schedule, emergency numbers, a news ticker and a moving board of notices, on one display.

02

Edit on the card itself

Click a title and type, click the picture to replace it. Every change appears on the display at once, with no refresh.

03

QR codes that really scan

A card can carry a QR code that opens the full story on a phone, with the Ta'az emblem inside. Every code tested scans correctly.

04

Notices on a schedule

Any section or card can be limited to chosen weekdays and hours, like a briefing shown only on Thursdays, 15:00–19:00.

05

Works offline

Runs in the browser of an ordinary computer on a closed network, with no internet connection. A double-click starts it.

06

AI-assisted engineering

Designed in Claude Design and coded with Claude Code under my direction: I set the requirements, reviewed each change and verified it by measurement.

04 / Screens

13 screens · sample data

Design noteThe layout was mine before any visual design: four zones on a 1920 × 1080 stage, a top bar, the board, a side column of one third and a ticker. Claude Design then styled it under my direction, and the plate below draws the result to scale. Staff edit straight on the card, and the result was checked by measurement: 254 QR codes read back, and the scrolling measured frame by frame.

Blueprint of the TaazTV display at 1 : 2.5, with dimension lines for its top bar, side column, board, ticker, board margins and card columns, and details of its column scale and QR codes.Blueprint of the TaazTV display at 1 : 2.5, with dimension lines for its top bar, side column, board, ticker, board margins and card columns, and details of its column scale and QR codes.
The board, drawn to scaleTaazTV's display as a blueprint: a 1920 × 1080 stage with a 128 px top bar, a 96 px ticker, a side column of one third, and three card columns of 384 px.
The display: the unit's name, clock and dates on top, a moving board of notices in the middle, a menu, today's schedule and phone numbers on the right, and a news ticker along the bottom.
01 The display: the unit's name, clock and dates on top, a moving board of notices in the middle, a menu, today's schedule and phone numbers on the right, and a news ticker along the bottom.
The 16:9 slideshow mode: a full-width team photo with the caption "Centre fun day, August", a progress bar, slide dots and the counter 4 / 10
02 The same board in 16:9 slideshow mode. The side panels and the ticker stay in place while the slides change.
The control panel's item editor: the strip of eight card shapes on top, the news card drawn at its real width with its title selected for typing, and settings beside it
03 The editor is the card itself: the title is typed in place, with the eight card shapes above it and the text, picture, timing and QR settings beside it.
The "Add a new item" grid: eight wireframe thumbnails of the card styles, each with a short hint
04 Adding an item starts from pictures of the eight card styles, not from a list of names.
A close-up of a QR code on a photo, with rounded modules, the Ta'az emblem in the middle and the caption "To the full article"
05 A QR code on a slide's photo, with rounded modules and the Ta'az emblem in its middle.
The QR style panel: a large live preview beside pickers for module shape, frame shape, centre shape and logo size, with a note on how the logo stays readable
06 One panel sets the look of every QR code on the board. Each sample is drawn by the real generator, and a centre shape that would not scan with the chosen frame is greyed out.
The weekly timing for the "Going-home briefing": Thursday selected, 15:00 to 19:00, with an "outside the window" badge
07 The going-home briefing is set to Thursdays, 15:00–19:00. At 11:40 the badge says it is outside its window, and the card itself states its schedule.
The floating live-view window showing a miniature of the display over the schedule editor
08 The floating live-view window: a miniature of the real display that can be dragged and resized, here over the "today at the centre" editor.
The control panel home page with a backup reminder, an on/off switch for each screen area and counters
09 The control panel's home page: a switch and a status for each screen area, counters, and a reminder to export a backup.
The board's list of items, each row with a drag handle, a type icon, its title and switches
10 One list of items. Each row can be dragged into place, shown or hidden, duplicated, deleted or opened.
The board with the side panels switched off and four columns of cards across the full width
11 With the side panels off and four columns chosen, the board spreads across the full width by itself.
The first prototype, "The Notice Board": a light-blue header with the clock, an urgent ticker, three columns of cards and a footer
12 The first prototype, "The Notice Board" (15 September 2026). It already had scrolling card columns and an urgent strip, but it still loaded its fonts and styles from the internet.

05 / What it delivers

1 dayto build the working product, from design to final version
1double-click starts it, on an ordinary computer with no internet
100%of the QR codes tested scan correctly
8card styles, shown as moving cards or 16:9 slides

TaazTV puts the unit's news, notices, schedule and emergency numbers on one live screen that looks after itself: items come and go on their own schedule, and staff can change anything from the control panel without a programmer. It runs on a closed network as it is, with no internet or outside services.

It also shows how I work with AI tools. I set the requirements and directed Claude Design for the look and Claude Code for the code, then reviewed every step and held the result to a measured standard: every QR style was checked with a separate reader, the scrolling was measured, and the editor was compared with the display until the two matched.

06 / Role and tech

I built TaazTV on my own, from the first prototype and the layout sketch to the finished product: the display, the control panel, the data model and the offline setup.

I worked with AI tools the way a lead works with a fast team: Claude Design produced the visual design, and Claude Code wrote the code with me, in 14 of the 15 commits. I set the requirements, directed each step, reviewed the results and checked them by measurement. When phones could not read the first QR codes, I replaced the hand-written encoder with a proven open-source library and verified 254 test codes before calling it done.

Tech

  • HTML
  • CSS
  • JavaScript
  • localStorage
  • BroadcastChannel
  • SVG
  • qrcode-generator
  • Intl (Hebrew calendar)
  • Python http.server
  • Open-Meteo (optional)
  • Claude Design
  • Claude Code

How it's built

The board is a plain web app in HTML, CSS and JavaScript, with no framework, no build step and nothing downloaded at run time. A small local server, started with a double-click, serves two pages on the computer connected to the screen: the display and the control panel. The content is kept in the browser's own storage, and every change is broadcast to the open display at once. The display and the editor draw cards with the same code, so they always match. QR codes come from a proven open-source encoder kept inside the project. The visual design was produced in Claude Design and the code written with Claude Code, under my direction and review.

One live screen for the unit's news and notices, edited by typing straight onto the cards.

Built in a day with AI tools I directed, and checked by measurement.

Chapters