7. Creating Content#
Now that you understand the layout of the template, you are ready to start creating content for the textbook.
As was mentioned previously the xx_toc.yml file is used to specify the files that contain the content of the book. It is recommended to use ipynb format, as that will allow you to utilize the full power of the textbook. At the top of every ipynb file, you should include a code cell with the following line:
%run -i ../python/common.py
This will enable powerful notebook functions such as: displaying a series of slide images, displaying html table, and displaying interactive terminal media player, just to name a few.
Add cell tag: ‘remove-cell’, in order to not have this import cell displayed in your textbook html.
Following this you should specify a title for the subsection by creating a markdown cell and creating an h1 text element:
# Title
After this, you are able to freely add either code cells or markdown cells and they will be displayed in the same way they appear in the ipynb file.
%run -i ../python/common.py
bash = BashSession()
---------------------------------------------------------------------------
ModuleNotFoundError Traceback (most recent call last)
File ~/ope/ope-docubook/content/python/common.py:4
2 from IPython.core.display import HTML, Markdown, TextDisplayObject, Javascript
3 from IPython.display import display, IFrame, Image
----> 4 import ipywidgets as widgets
5 from ipywidgets import interact, fixed, Layout
6 import os, requests, pty, re, subprocess, struct, sys, fcntl, termios, select
ModuleNotFoundError: No module named 'ipywidgets'
---------------------------------------------------------------------------
NameError Traceback (most recent call last)
Cell In[1], line 2
1 get_ipython().run_line_magic('run', '-i ../python/common.py')
----> 2 bash = BashSession()
NameError: name 'BashSession' is not defined
7.1. Special Displays#
7.1.1. A sample image that use customized styles#
display(Markdown(htmlFig("../images/src/sample-image.jpg",
align="left",
margin="auto 3em 0 auto",
width="100%", id="fig:vnm",
caption="Figure: A Sample Image that use special style")))
|
7.1.2. Display string in customized styles#
X=np.uint8(0xae)
XL=np.bitwise_and(X,0xf)
XH=np.bitwise_and(np.right_shift(X,4),0xf)
displayStr("0b10101110 = 0x"+format(X,"02X"), size="4em", align="center")
7.1.3. Display terminal shell command results#
TermShellCmd("echo hello")
7.1.4. Display bash command in customized styles#
bash.run("man mkdir", height="10em")
del bash
7.1.5. Use HTML and CSS to customize styles#
This is the example of image overlapping with backgrounds.
This is some sample texts.: This is some sample texts.This is some sample texts.This is some sample texts. This is some sample texts. This is some sample texts. This is some sample texts. This is some sample texts. This is some sample texts. This is some sample texts. This is some sample texts. This is some sample texts. This is some sample texts. This is some sample texts. This is some sample texts. This is some sample texts. This is some sample texts. This is some sample texts. This is some sample texts. This is some sample texts. This is some sample texts.
7.2. Animation Examples#
In this part of this book we will cover some special animated cells.
If there’s any misalignment with the baseline, unless noted above the cell output, please refer to the called functions in common.py file.
7.2.1. Display bytes in special styles#
X=np.uint8(0xae)
XL=np.bitwise_and(X,0xf)
XH=np.bitwise_and(np.right_shift(X,4),0xf)
displayBytes([[0x00],[0xff]], labels=["ALL OFF", "ALL ON"])
displayBytes(bytes=[[X]],td_font_size="2.5em", th_font_size="1.5em")
7.2.2. Display series of slide images#
display(mkImgsAnimateBox(dir="../images/imported_slides",
# force=True,
saveto="save1.html",
files=['General_Presentation_1.jpg',
'General_Presentation_2.jpg',
'General_Presentation_3.jpg',
'General_Presentation_4.jpg',
'General_Presentation_5.jpg',
'General_Presentation_6.jpg'
]))
7.2.3. Display HTML table#
Control Operator |
Description |
|---|---|
newline |
End of line |
|| |
Or list operator |
&& |
And list operator |
; |
Sequential list operator |
| |
Pipe Operator |
\(\&\) |
Background Operator |
( |
Subshell list begin Operator |
) |
Subshell list end Operator |
;; |
Case statement end matching Operator |
;& |
Case statement fall through Operator |
;;& |
Case statement continue matching Operator |
7.2.4. Display website#
display(IFrame("https://en.wikipedia.org/wiki/List_of_Unix_commands", height=600, width="100%"))
7.2.5. Display interactive files#
display(HTML('''
<iframe src="https://jappavoo.github.io/SOL6502/index.html", height="980px" width="100%"></iframe>
'''))
7.2.6. Display videos#
display(HTML('''
<iframe src="https://jappavoo.github.io/SOL6502/asciinema/atest.html", height="600x" width="100%"></iframe>
'''))