See this talk on YouTube: https://www.youtube.com/watch?v=q_yiLNT-3cU

Freiberg Research Seminar 2024

0. Pre-History
1. LiaScript
2. Peer2Peer Classrooms
3. Peer2Peer Remote-Labs

Pre-History

!?Industrial eLab

LiaScript

_LiaScript: A simple and easy to use markdown based _

Technologies

• Back-End implemented in Elixir

• Fron-End implemented in Elm

  {{1}}

---

BrowserBased Technologies

• Indexed Database API IndexedDB

• Speech Synthesis or Web Speech API

              {{|>}}
  

  Hello and welcome this is a text-to-speech example.

• Progressive Web App PWA

• Web Real-Time Communication WebRTC

• Conflict-free Replicated Data Types CRDTs

Features

Quizzes

{{1}}

What is the name of the Markdown-Dialect I am talking about?

[[LiaScript]]

{{2}}

Insert the currect numbers such that the pyramid provides sums from bottom to top...

                        .----------------------.
                       /                      /|
             .--------+----------------------+ +---------.
            /         |      " [[  24   ]] " |/         /|
  .--------+----------+----------+-----------+---------+ +----------.
 /         |         11          |      "[[   13   ]] "|/          /|
+----------+----------+----------+----------+----------+----------+ +
|      " [[   5   ]] "|          6          |          7          |/
+---------------------+---------------------+---------------------+

{{3}}

Do you know an easier way of creating quizzes?

[( )] Yes [(X)] No

{{4}}

Guess the correct German articles?

[[male (der)] (female [die]) [neuter (das)]] [ [X] [ ] [ ] ] Mann - German for man [ ( ) (X) ( ) ] Frau - German for woman [ [X] [ ] [ ] ] Junge - German for boy [ ( ) ( ) (X) ] Mädchen - German for girl [ [X] [X] [ ] ] Paprika - German for bell pepper [ (X) (X) (X) ] Joghurt - German for yogurt

Multimedia & Presentation Formats

{{1}}

!?Text 2 Speech

Visualization

  9 |                                       (* dots)
    |
  y |                              *
  - |
  a |                    *
  x |
  i |          *
  s |
    |*
  0 +------------------------------------
    0            x-axis                 36



















{{1}}

x	dots
0	0
10	2
20	4
30	6

{{2}}

Animal	weight in kg	Lifespan years	Mitogen
Mouse	0.028	2	95
Flying squirrel	0.085	15	50
Brown bat	0.020	30	10
Sheep	90	12	95
Human	68	70	10

{{3}}

Seattle	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
0	40.7	41.5	43.6	46.6	51.4	56.0	60.5	61.2	57.0	50.1	44.1	39.6
2	40.2	40.7	42.7	45.3	50.0	54.4	58.5	59.2	55.4	49.2	43.5	39.3
4	39.7	40.0	41.9	44.4	48.9	53.2	57.0	57.7	54.2	48.6	43.1	38.9
6	39.6	39.5	41.3	44.2	49.5	54.2	57.8	57.4	53.6	48.2	42.8	38.7
8	39.6	39.9	42.9	47.1	52.7	57.3	61.3	61.1	56.7	49.5	43.1	38.7
10	41.3	42.7	46.4	50.7	56.4	60.9	65.2	65.4	60.9	52.8	45.5	40.4
12	43.8	46.0	49.5	53.8	59.6	64.3	69.4	69.8	65.1	56.0	47.8	42.6
14	45.1	47.7	51.3	55.9	61.9	66.9	72.6	73.2	67.7	57.8	48.8	43.6
16	44.5	47.5	51.4	55.9	62.3	67.5	73.9	74.3	68.2	57.4	47.8	42.6
18	42.6	44.7	48.7	53.8	60.3	65.9	72.3	72.2	64.6	53.9	46.0	41.2
20	42.0	43.3	46.4	50.2	56.0	61.4	66.9	66.6	60.7	52.3	45.2	40.7
22	41.4	42.5	45.0	48.3	53.5	58.2	63.2	63.5	58.7	51.1	44.5	40.1

oEmbed

{{1}}

??Familienschacht Freiberg

{{2}}

??Simulation: Noninverting Amplifier

{{3}}

??States of Matter

Coding & Reusability

https://github.com/topics/liascript-template

Todo: Music

Arduino

#ifndef F_CPU
#define F_CPU 16000000UL // 16 MHz clock speed
#endif

int main(void)
{
  DDRB |= (1 << PB1);  // Ausgabe LED festlegen
  TCCR1A = 0;
  TCCR1B = 0;
  TCCR1B |= (1 << CS12) | (1 <<CS10);  // 1024 als Prescale-Wert
  TCCR1A |= (1 << COM1A0);
  OCR1A = 15625;

  while (1) _delay_ms(500);
}

@AVR8jsMem.sketch(example2_div_id,100000,1)

Hosting

{{1-2}}

Git

Git is a distributed version control system that tracks changes in any set of computer files, usually used for coordinating work among programmers. It was originally created by Linus Torvalds in 2005 for development of the Linux kernel, and has become the most popular version control system.

Source: Wikipedia

{{1}}

IPFS & IPNS

The __I__nter__P__lanetary __F__ile __S__ystem (IPFS) is a protocol, hypermedia and file sharing peer-to-peer network for storing and sharing data in a distributed file system ... supported by Opera, Brave-Browser, Agregore, and more to come

https://ipfs.tech

Onion-Share

!?Onion-Share Demo

The Tor Network is a system that allows users to anonymize their online activities and their identity by routing the data traffic through multiple servers, thereby hiding the source of the data. The network consists of thousands of voluntary servers worldwide that act as "nodes" and encrypt the data traffic to protect the privacy of the users.

Tor Browser: For anonymous browsing

• Download & Install: https://www.torproject.org/download/

• Disable private browsing to enable IndexedDB for caching LiaScript courses:

  Settings >> Privacy & Security >> History >> Always use private browsing mode (disable)

• Enable CORS:

  Settings >> Extensions & Themes >> Search for "CORS Unblock" >> Click on "CORS Unblock" >> Install (Add to Firefox)

  If you have disabled private browsing mode, enable "CORS Unblock".

  Otherwise, enable the plugin first to be used in private mode: Settings >> Extensions & Themes >> "CORS Unblock" >> Run in Private Windows (Allow)

  

OnionShare for anonymous hosting and sharing

• Download & Install: https://onionshare.org
• Open and "Connect to Tor"
• Share data: Start Hosting >> Add Files or Add Folder >> Start sharing
• Send the Onion-Address and the Private-Key to your students
• Open the Onion-Address within the Tor-Browser, enter the private key and select "Remember this key"
• Open the README.md of the course and copy this URL
• Goto https://LiaScript.github.io and paste this URL "click on Load URL"

Learning Management Systems

LiaScript-Exporter exports to:

• SCORM 1.2 & 2004

• PDF

• IMS

• Projects

• RDF / Metadata

• Android APK

  {{1}} !?LiaScript in Moodlet

Classrooms-Lite

<iframe src="https://giphy.com/embed/fVPzDNORY7A3szWDil" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>

via GIPHY

Peer^2^Peer in da Browser

{{1-2}}

    👨🏾‍💻 --.     .-- 👩‍💻
          \   /

👩‍💻 ------  🖥️  ------ 👨🏾‍💻

          /   \
    👨🏾‍💻 --'     '-- 👩‍💻

{{2}}

- - - --👨🏾‍💻-----👩‍💻
              /  \
             /    \
    👩‍💻------+-----👨🏾‍💻- - -
      \    /      /
       \  /      /
        👨🏾‍💻     👩‍💻- - - -

WebRTC

The Web Real-Time Communication is a free and open-source project providing web browsers and mobile applications with real-time communication (RTC) via application programming interfaces (APIs). It allows audio and video communication to work inside web pages by allowing direct peer-to-peer communication, eliminating the need to install plugins or download native apps...

Source: Wikpedia

{{0-1}}

                     (WebRTC)
Alice 👩‍💻 <------------------------------> 👨🏾‍💻 Bob

{{1}}

               (Signaling Server)

       .-------------> 🖥️ --------------.
       |    "{1}{}"   /  A      "{2}{}" |
       |             /    \             |
       |            /      \            V
                   /        \
Alice 👩‍💻 <--------'          '--------- 👨🏾‍💻 Bob
            "{4}{}"             "{3}{}"
      A                                  A
      |                                  |
      '----------------------------------'
      A    "{5}{Direct Communication}"   A
      |                                  |
      '-- - - - - - - - - - - - - - - - -'
             "{6}{InDirect via TURN}"

{{7}}

More confusing information on WebRTC:

!?WebRTC

CRDTs

A Conflict-free Replicated Data Type (CRDT) is a new type of data structure¹ that can be replicated across multiple instances in a network with the following guarantees:

{{1}}

1. A replica can be updated independently, concurrently and without coordinating with other replicas.

2. Inconsistencies can be resolved automatically.

3. Although replicas may have different state, they are guaranteed to eventually converge.

   {{2}} Task: Implement an distributed counter

   {{3}}

Alice 👩‍💻

[0]---------*-->[5]--[+1 = 6]--------*-->[8]-- - - - - - - - - - - - 
           /            \           /          \
          A              V         A            \
         /                        /              \
[0]---[+5 = 5]-----------------[+2 = 7]-- - - - --*- - - - - - - - - -

Bob 👨🏾‍💻

{{4}}

Solution: Use Sets and Unions instead...

{{5}}

Alice 👩‍💻

{(a,0)}----------*-->{(a,0),(b,5)}->{(a,1),(b,5)}---*-->{(a,1),(b,7)}
                /                         \        /   
               A                           V      A   
              /                                  /
{(b,0)}---{(b,5)}----------------------------{(b,7)}-----------------

Bob 👨🏾‍💻

{{6}}

__ Implementations__

• Automerge
• Yjs

Enter

go to: Freiberg-Classroom

select >> Share >> Classroom >> GunDB >> Freiberg

---

qr-code

Trying

What is the name of the language you have been learning today.

[[LiaScript]]

Is it possible that browsers can communicate directly with each other?

[(X)] Yes [(X)] It depends [( )] No

Questions

How would you rate the distributed approach?

[(good)] It is quite good [(ok)] It is ok [(bad)] It is bad [(intermediate)] Well, it depends [(no way)] No way [(undefined)] I don't know...

---

Share your feelings:

<script run-once="true"> LIA.classroom.subscribe("wave", (msg) => { const icon = document.createElement("span") icon.innerHTML = msg icon.classList.add("fall") icon.style.left=(Math.random() * 100) + "%" icon.style.zIndex = 10000 document.body.appendChild(icon) icon.addEventListener('animationend', function() { icon.remove(); }); }) console.log("subscription") </script> <script input="button" run-once="true" modify="false"> if (LIA.classroom.connected){ LIA.classroom.publish("wave", "👋") } "👋" </script>

@wave(❤️) @wave(👎) @wave(👍) @wave(💀) @wave(❓)

Remote Labs

Original Edrys: https://github.com/edrys-org/edrys

{{1}}

Edrys-Lite: https://cross-lab-project.github.io/edrys-Lite/

Footnotes

1. The CRDT concept was defined in 2011 by Marc Shapiro, Nuno Preguiça, Carlos Baquero and Marek Zawirski.

   See also: https://en.wikipedia.org/wiki/Conflict-free_replicated_data_type ↩