Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Hacking an E-Reader to Show my Tea Menu

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.

Tiger Oakes

May 10, 2023
Tweet

More Decks by Tiger Oakes

Other Decks in Programming

Transcript

  1. ▪ Building Microsoft Loop. ▪ Worked on Edge, Chrome, and

    Firefox. ABOUT ME tigeroakes.com @[email protected] @not_woods TIGER OAKES
  2. 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
  3. .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>
  4. 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>
  5. 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>
  6. 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>
  7. <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>
  8. 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.
  9. LOADING IMAGE ONTO E-READER Set as custom screensaver image NOOK

    & IPAD Use the image as a book cover KINDLE & KOBO
  10. 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.
  11. 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
  12. 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
  13. 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
  14. 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>
  15. 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>
  16. 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
  17. 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[]; }
  18. DENO Write JavaScript to run on your desktop (like Node)

    but with much more built-in functionality
  19. 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
  20. 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 @[email protected] @not_woods