B4J Library [Web][BANanoClippy] - Pure JavaScript Joy with Sounds and Animations

Hi Fam

Demo

Github Repo

Remember Microsoft Clippy, Merlin, Links, Rocky and Rover and others, year, you can add them to your app and perform some gestures and speak. Have you ever wanted to have one in your website / app? Now it's possible! Yippie!

As it takes time to create these b4xlibs, this one is based on a certificate of appreciation, i.e. DonationWare.

UI Design - I needed a quick demo so I decided to go thin with a single multi-usable component just to meet this demo based on MD3

'Static code module
Sub Process_Globals
    Private clippy1 As BANanoClippy
    Private BANano As BANano
    Private cboAnimations As MDUComponent
    Private cboAgents As MDUComponent
    Private snackBar As MDUComponent
    Private txtField As MDUComponent
End Sub

Sub Initialize
    ' get the body tag
    Private body As BANanoElement
    body.Initialize("#body")
    body.empty
    '
    snackBar.Initialize(Me, "body", "snackbar", "mdui-snackbar", "")
    snackBar.SetOpen(False)
    snackBar.SetAttr("placement", "top-end")
    
    Dim lbl As MDUComponent
    lbl.Initialize(Me, "body", "lbl", "h1", "Clippy Agents")
    '
    cboAgents.Initialize(Me, "body", "cboAgents", "mdui-select", "")
    cboAgents.SetWidth("500px")
    cboAgents.OnEvent("change")
    
    Dim lbl1 As MDUComponent
    lbl1.Initialize(Me, "body", "lbl1", "h1", "Clippy Animations")
    '
    cboAnimations.Initialize(Me, "body", "cboAnimations", "mdui-select", "")
    cboAnimations.SetWidth("500px")
    cboAnimations.OnEvent("change")
    '
    Dim lbl2 As MDUComponent
    lbl2.Initialize(Me, "body", "lbl2", "h1", "Text To Speech")
    
    txtField.Initialize(Me, "body", "txtSpeak", "mdui-text-field", "").SetLabel("Text to Speech").SetRows("4")
    txtField.SetWidth("800px")
    txtField.SetValue("Add Clippy or his friends to any website for instant nostalgia.")
    '
    Dim lbl3 As MDUComponent
    lbl3.Initialize(Me, "body", "lbl3", "div", "")
    lbl3.SetHeight("20px")
    
    Dim btnSpeak As MDUComponent
    btnSpeak.Initialize(Me, "body", "btnSpeak", "mdui-button", "Speak!")
    btnSpeak.OnEvent("click")
    btnSpeak.SetWidth("200px")
    '
    clippy1.Initialize(Me, "clippy1", "./assets/agents/")
    For Each a As String In clippy1.GetAgents
        cboAgents.AddSelectItem(a, a)
    Next
    
End Sub

Sub cboAgents_change(e As BANanoEvent)
    'get the selected agent
    Dim thisAgent As String = cboAgents.GetValue
    snackBar.SetText($"Agent Selected: ${thisAgent}"$)
    snackBar.SetOpen(True)
    'hide any existing agent
    clippy1.Hide(True)
    'load a new agent
    clippy1.LoadAgent(thisAgent)
End Sub

Private Sub clippy1_Loaded
    'get clippy animations
    Dim animations As List = BANano.await(clippy1.GetAnimations)
    cboAnimations.Clear
    For Each a As String In animations
        cboAnimations.AddSelectItem(a, a)
    Next    
    clippy1.show
End Sub

Sub cboAnimations_change(e As BANanoEvent)
    Dim thisAnimation As String = cboAnimations.GetValue
    clippy1.Play(thisAnimation)
End Sub

Sub btnSpeak_click(e As BANanoEvent)
    e.PreventDefault
    Dim s As String = txtField.GetValue
    s = s.Trim
    If s = "" Then
        snackBar.SetText("Please enter text to speech first!").SetOpen(True)
        Return
    End If
    
    clippy1.Speak(txtField.GetValue)
End Sub

 

[Mashiane]

Tutorial

[BANanoClippy] - 🎬 Bringing Classic Microsoft Agent Characters to Life with JavaScript! 🧙‍♂️🐵📎

Hi Fam Demo B4xlib Recently we released BANanoClippy, A web based version of Microsoft Agent characters to use in your web app. For those who dont know, let me refresh you. Remember Clippy, Bonzi, Rover, and the rest of the quirky animated assistants from the late '90s and early 2000s? In...

www.b4x.com