new article - Text TV Pixelflut BornHack 2024 - idea, inspiration, mockup, text rendering sample

5 files changed, 126 insertions, 0 deletions

diff --git a/Text TV Pixelflut BornHack 2024/Anti aliased text.png b/Text TV Pixelflut BornHack 2024/Anti aliased text.png
new file mode 100644
index 0000000..739c551
--- /dev/null
+++ b/Text TV Pixelflut BornHack 2024/Anti aliased text.png
Binary files differdiff --git a/Text TV Pixelflut BornHack 2024/Anti aliasing turned off.png b/Text TV Pixelflut BornHack 2024/Anti aliasing turned off.png
new file mode 100644
index 0000000..628d80c
--- /dev/null
+++ b/Text TV Pixelflut BornHack 2024/Anti aliasing turned off.png
Binary files differdiff --git a/Text TV Pixelflut BornHack 2024/Mock up.png b/Text TV Pixelflut BornHack 2024/Mock up.png
new file mode 100644
index 0000000..e633493
--- /dev/null
+++ b/Text TV Pixelflut BornHack 2024/Mock up.png
Binary files differdiff --git a/Text TV Pixelflut BornHack 2024/Thumbnail.png b/Text TV Pixelflut BornHack 2024/Thumbnail.png
new file mode 100644
index 0000000..1bd926a
--- /dev/null
+++ b/Text TV Pixelflut BornHack 2024/Thumbnail.png
Binary files differdiff --git a/Text TV Pixelflut BornHack 2024/index.md b/Text TV Pixelflut BornHack 2024/index.md
new file mode 100644
index 0000000..1c7eed1
--- /dev/null
+++ b/Text TV Pixelflut BornHack 2024/index.md
@@ -0,0 +1,126 @@
+---
+description: Pixelflut emulating teletext aka *Tekst-TV* featuring schedule, and user content *news* section
+created: 2024-07-07
+---
+
+## Idea
+
+This years BornHack will feature an even cooler Pixelflut setup, which inspired me to make something for it.
+An important goal was to have something with a low barrier of entry to interact with it.
+My first idea involved a keyboard presented at the Pixelflut setup,
+allowing one to type messages to be displayed on screen.
+Then later i got the idea to make it Text TV themed, this works well with the nerdy culture, and allows me to add a
+schedule, and get user interaction through a "news" section.
+
+### Mock up
+
+![Mock up](Mock up.png)
+
+### Inspiration
+![Forside - Text TV - dr.dk](https://www.dr.dk/fttvimg/DR1/100_0001-180.gif)
+![Beredskab - Text TV - dr.dk](https://www.dr.dk/fttvimg/DR1/150_0001-186.gif)
+![Menings måling - Text TV - dr.dk](https://www.dr.dk/fttvimg/DR1/179_0001-242.gif)
+
+---
+
+## Renderer coding
+
+### Text rendering in C using pango & cairo
+
+Based on a cairo pixel flut code sample from a fellow hacker, which i could expand to import and image, rather easily, 
+and render text, which worked, but it was anti aliased, making it look horible in the small format.
+
+![Anti aliased text](Anti aliased text.png)
+
+Top is gimp mock up text,
+bottom is pango cairo rendered text
+
+### Turning off anti aliasing
+
+This was annoying, because `cairo_set_antialias(cr, CAIRO_ANTIALIAS_NONE);` didn't work,
+it had to be done in pango context.
+
+[Change font rendering (non-antialiased) with pango - stackoverflow.com](https://stackoverflow.com/questions/16106659/change-font-rendering-non-antialiased-with-pango#answer-73221211)
+
+An answer in this stack overflow question, mentions that:
+*"In C you can turn off anti-aliasing when drawing with Pangocairo like this:"*
+```c
+cairo_font_options_t *options = cairo_font_options_create();
+cairo_font_options_set_antialias(options, CAIRO_ANTIALIAS_NONE);
+pango_cairo_context_set_font_options(context, options);
+cairo_font_options_destroy(options);
+```
+
+Next problem then, is getting the context.
+
+I found out how to do this in: [pango examples cairoshape.c - gitlab.com](https://gitlab.gnome.org/GNOME/pango/-/blob/239e030e4f38f0b7b899a8a405437601daf2860d/examples/cairoshape.c#L137)
+
+Using `layout = pango_cairo_create_layout (cr);` and `pango_layout_get_context (layout);`
+
+This means i can now turn off, anti aliasing
+
+Here's a code sample:
+
+```c
+  cairo_surface_t *surface;
+  cairo_t *cr;
+
+  surface = cairo_image_surface_create_for_data(
+    f->image, f->format,
+    f->width, f->height, f->stride);
+  cr = cairo_create(surface);
+
+  //cairo_scale (cr, 2, 2);
+  //cairo_set_antialias(cr, CAIRO_ANTIALIAS_NONE);
+
+  int              w, h;
+  cairo_surface_t *image;
+
+  image = cairo_image_surface_create_from_png ("../base.png");
+  w = cairo_image_surface_get_width (image);
+  h = cairo_image_surface_get_height (image);
+  //cairo_translate (cr, 0, 1080 - h);
+
+  cairo_set_source_surface (cr, image, 0, 0);
+  cairo_paint (cr);
+
+  // Set up the Pango Cairo context
+  PangoLayout *layout = pango_cairo_create_layout(cr);
+  PangoFontDescription *font_desc = pango_font_description_from_string("Monospace 7");
+  //pango_font_description_set_size(font_desc, 8 * PANGO_SCALE);
+  pango_layout_set_font_description(layout, font_desc);
+  pango_font_description_free(font_desc);
+
+  // Turn off antialias
+  PangoContext *pango_context = pango_layout_get_context (layout);
+  cairo_set_antialias(cr, CAIRO_ANTIALIAS_NONE);
+  cairo_font_options_t *options = cairo_font_options_create();
+  cairo_font_options_set_antialias(options, CAIRO_ANTIALIAS_NONE);
+  pango_cairo_context_set_font_options(pango_context, options);
+  cairo_font_options_destroy(options);
+
+  // Move
+  cairo_translate (cr, 6, 115);
+
+  // Set the text to display
+  pango_layout_set_text(layout, "Hello World!", -1);
+
+  // Render the layout
+  cairo_set_source_rgb(cr, 1, 1, 1); // Set color to white
+  pango_cairo_show_layout(cr, layout);
+
+  // Clean up
+  g_object_unref(layout);
+
+
+  cairo_destroy (cr);
+  cairo_surface_destroy(surface);
+```
+
+Which renderes non-anti-aliased text
+
+![Anti aliasing turned off](Anti aliasing turned off.png)
+
+Again, top is gimp mock up text,
+bottom is pango cairo rendered text
+