Hacking an E-Reader to Show my Tea Menu

E-Readers are great and use so little power! I wanted to have a tea menu to show guests and for my own reference. I'll share how to generate an e-book with all your drinks in Deno, as well as rendering a custom cover page with SVG. Wow your friends by turning an old device into a smart home tea menu.

Transcript

1. HACKING AN E-READER TO SHOW MY TEA MENU Tiger Oakes
2. ▪ Building Microsoft Loop. ▪ Worked on Edge, Chrome, and Firefox. ABOUT ME tigeroakes.com @notwoods@hachyderm.io @not_woods TIGER OAKES
3. I LIKE TEA
4. Too many teas! PROBLEM
5. CALL TODAY! 1-800-CODE-ME GITHUB.COM/NOTWOODS/TEA-BOOK 4 EASY PAYMENTS OF HARD WORK YOU DON’T PAY BECAUSE YOU BUILD IT YOURSELF! THIS HAS NEVER BEEN ON
6. MENU IMAGE Rendering a custom image to display on the e-reader screen 1
7. BACKGROUND
8. MANYWORLDSTAVERN.COM/PRODUCTS/HAZY-HILLS
9. BACKGROUND DESIGN 2010
10. FOREGROUND
11. .SVG FILE <svg viewBox="0 0 600 800" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(0 0)"> <text>Hazy Hills</text> <line x1="0" y1="10" x2="220" y2="10" /> <text>Black tea, moderate caffeine</text> <text>9 g/12 oz, steep 4 mins, 93°C</text> </g> </svg>
12. TRANSFORM: TRANSLATE <g transform="translate(30 85)"> <text>Daphne’s Cyotea Blend</text>… </g> <g transform="translate(30 180)"> <text>Cookie</text>… </g> <g transform="translate(30 275)"> <text>Imperial Jasmine</text>… </g> <g transform="translate(322 85)"> <text>913 King’s Oolong</text>… </g> <g transform="translate(322 180)"> <text>Lapsang Souchong</text>… </g> <g transform="translate(322 275)"> <text>Hazy Hills</text>… </g>
13. TRANSFORM: TRANSLATE <g transform="translate(30 85)"> <text>Daphne’s Cyotea Blend</text>… </g> <g transform="translate(30 180)"> <text>Cookie</text>… </g> <g transform="translate(30 275)"> <text>Imperial Jasmine</text>… </g> <g transform="translate(322 85)"> <text>913 King’s Oolong</text>… </g> <g transform="translate(322 180)"> <text>Lapsang Souchong</text>… </g> <g transform="translate(322 275)"> <text>Hazy Hills</text>… </g>
14. TRANSFORM: TRANSLATE <g transform="translate(30 85)"> <text>Daphne’s Cyotea Blend</text>… </g> <g transform="translate(30 180)"> <text>Cookie</text>… </g> <g transform="translate(30 275)"> <text>Imperial Jasmine</text>… </g> <g transform="translate(322 85)"> <text>913 King’s Oolong</text>… </g> <g transform="translate(322 180)"> <text>Lapsang Souchong</text>… </g> <g transform="translate(322 275)"> <text>Hazy Hills</text>… </g>
15. <g transform="translate(8 8)"> </g> <g transform="translate(8 360)"> </g> TRANSFORM: TRANSLATE <g transform="translate(30 85)"> <text>Daphne’s Cyotea Blend</text>… </g> <g transform="translate(30 180)">…</g> <g transform="translate(30 275)">…</g> <g transform="translate(322 85)">…</g> <g transform="translate(322 180)">…</g> <g transform="translate(322 275)">…</g> <g transform="translate(30 85)"> <text>Herbal Supplement</text>… </g> <g transform="translate(30 180)">…</g> <g transform="translate(30 275)">…</g> <g transform="translate(322 85)">…</g> <g transform="translate(322 180)">…</g> <g transform="translate(322 275)">…</g>
16. OTHER DESIGNS DIFFERENT CONTENT Use a different number of groups and reposition them. DIFFERENT FONTS Swap font-family with CSS. DIFFERENT BACKGROUND Change out the background shown under the text.
17. LOADING IMAGE ONTO E-READER Set as custom screensaver image NOOK & IPAD Use the image as a book cover KINDLE & KOBO
18. E-BOOK MENU Creating ePub files to load onto the eReader 2
19. EPUB FORMAT BOOK.EPUB RENAMED ZIP FILE Simply renaming book.zip to book.epub creates an e-Book. Standard format used by almost all e-Readers.
20. Directory with XML sitemap pointing to HTML files, CSS, and images ZIP folder with XML table of contents pointing to XHTML files, CSS, and images E-BOOKS ARE LIKE WEBSITES WEBSITE E-BOOK ▪ sitemap.xml ▪ index.html ▪ image.png ▪ css/ ▪ style.css ▪ myfont.ttf ▪ content.opf ▪ chapter1.xhtml ▪ image.png ▪ css/ ▪ style.css ▪ myfont.ttf
21. XHTML VS HTML <img /> vs <Img /> <hr /> vs <hr> <link rel="stylesheet“ href="css/style.css"> <h1>Heading</h1> <p>Paragraph</p> IDENTICAL ELEMENTS IDENTICAL CSS ONLY LOWERCASE TAGS STRICT CLOSING TAGS S C E O
22. CONTENT.OPF METADATA Book title, author, cover 1 SPINE The chapters, in order 3 MANIFEST List of every file in the ZIP folder GUIDE Important pages 2 4
23. CONTENT.OPF <?xml version="1.0" encoding="UTF-8"?> <package version="3.0" xmlns="http://www.idpf.org/2007/opf" unique-identifier="id-1"> <metadata xmlns:dc="http://purl.org/dc/elements/1.1/"> <dc:identifier id="id-1">uuid</dc:identifier> <dc:title>Tea Book</dc:title> <dc:creator>Tiger Oakes</dc:creator> <meta name="cover" content="cover_id" /> </metadata> <manifest> <item href="css/styles.css" media-type="text/css" /> <item id="nav" href="index_page.xhtml" media-type="application/xhtml+xml" /> <item id="ch1" href="chapter1.xhtml" media-type="application/xhtml+xml" /> <item id="cover_id" href="image.png" media-type="image/png" /> </manifest> <spine toc="ncx"> <itemref idref="nav" /> <itemref idref="ch1" /> </spine> <guide> <reference type="toc" title=“Index Page" href="index_page.xhtml" /> </guide> </package>
24. CONTENT.OPF <?xml version="1.0" encoding="UTF-8"?> <package version="3.0" xmlns="http://www.idpf.org/2007/opf" unique-identifier="id-1"> <metadata xmlns:dc="http://purl.org/dc/elements/1.1/"> <dc:identifier id="id-1">uuid</dc:identifier> <dc:title>Tea Book</dc:title> <dc:creator>Tiger Oakes</dc:creator> <meta name="cover" content="cover_id" /> </metadata> <manifest> <item href="css/styles.css" media-type="text/css" /> <item id="nav" href="index_page.xhtml" media-type="application/xhtml+xml" /> <item id="ch1" href="chapter1.xhtml" media-type="application/xhtml+xml" /> <item id="cover_id" href="image.png" media-type="image/png" /> </manifest> <spine toc="ncx"> <itemref idref="nav" /> <itemref idref="ch1" /> </spine> <guide> <reference type="toc" title="Index Page" href="index_page.xhtml" /> </guide> </package>
25. SCRIPTING Write these files with automated tooling 3
26. PANDOC Statically generate an ePub file using markdown as input. pandoc.org
27. MARKDOWN TEMPLATE Each top-level heading is turned into a chapter in the eBook. --- title: Tea Book creator: Tiger Oakes cover-image: image.png css: css/style.css ... # Chapter 1 Hello world … # Chapter 2
28. interface FormattedTeaDatabasePage { /** Name of the tea. */ name: string; /** Caffeine level. */ caffeine: string; /** Temperature to steep the tea at. */ temperature: string; /** How long to steep the tea for. */ steepTime: string; /** How many tea leaves to use per amount of water. */ serving: string; /** Type of tea, such as "Black tea" or "Herbal tea". */ type: string; /** Where in the house the tea is located at. */ location: readonly string[]; }
29. DENO Write JavaScript to run on your desktop (like Node) but with much more built-in functionality
30. github.com/NotWoods/tea-book SOLUTION More fun than pen and paper!
31. DAPHNE LIU @thebetterdaphne@twitter.com Ex-Lyft Frontend Developer with accessibility & design systems experience THANKS TO
32. CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, infographics & images by Freepik. SHAMELESS PLUG www.jetcityimprov.org Check out Joy Market in West of Lenin @ Fremont this Thursday, Friday, or Saturday! Check out DnDprov in University Heights @ UW on June 3rd
33. CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, infographics & images by Freepik. THANK YOU! github.com/NotWoods/tea-book tigeroakes.com @notwoods@hachyderm.io @not_woods