CCN Keypad Tiny

CCN Student Workbench Moez Workbench
1

First update on the Keypad Tiny project

What i did :

1- Built the keypad in HTML/JS as recommanded: kept it light fast and easy to integrate into futur projects

2- layout and grid : the 16 requested emojis are arranged in to 4*4 grid, with a row for math operators

3- Unicode Backspace : Multi codepoint emojis would fragment when using standard string slicing, now it isolates full unicode graphemes so emojis are deleted in one click

4- Buttons now insert symbols at the exact position of the text cursor, not only at the end of the text

Next : Add the construct button for UUID,barcode,QR code generation

Here is a screenshot of the keypad.

image_2026-07-24_162844001
image_2026-07-24_162844001397×802 35.8 KB

2

Great!

I give some code tonight to make a cloud call to connect to us. I think I already gave it to you didn’t I?

3

make sure the buttons operate on chrome or firefox on mobile phones

4

I double checked, i didn’t receive a cloud call except what i used in the migration of SFX Project, i will test the buttons right away.

5

ok I send shortly

6

else if (e.target.value === “Construct!”)
{

    console.log( e.target.id );
   const url = "https://www.wolframcloud.com/obj/ccn2/freeform/ff/networks/tests/ffsimplefetch"+"?ping=dara";
   const myHeaders = new Headers();
   myHeaders.append("Content-Type", "application/json");
   myHeaders.append("Access-Control-Allow-Origin","*");
   myHeaders.append("Access-Control-Allow-Origin","https://www.wolframcloud.com");
  myHeaders.append('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');

   try {
    const response = await fetch(url /*{
    method: "POST",
    mode: "no-cors",
   // body: "dara",
    headers: myHeaders,
    }*/);

     if (response.ok) {
        const data = await response.json(); 
       
       //outputarea.value = outputarea.value+"\n"+"//"+data+";";
       
        console.log(data);
    } else {
        throw new Error('Failed to fetch data');
    }
} catch (error) {
    console.error('Error:', error); 
}

}

});

7

Hi Dara,

Here is a summary of everything done so far on Keypad Tiny.

Keypad Buttons

  • Built a 4x4 grid with the emoji symbols you gave me, plus a row of math operators (+ − × ÷ = %).
  • Emojis and operators are generated dynamically from arrays, so adding/removing symbols is a one-line change.

Input

  • The display field supports both physical keyboard typing and button taps, and inserts symbols at the cursor position (not just at the end).
  • Backspace correctly removes full emoji symbols instead of breaking them into corrupted fragments.

Mobile compatibility (Chrome/Firefox)

  • Added touch action: manipulation to remove tap delay, and disabled long-press text selection on buttons, so taps register instantly on mobile.

Construct! button

  • The request succeeds, and the cloud responds with a JSON payload confirming the system is on and reachable.

5. Studying the ping / JSON concept

  • Reviewed what the ping proves: server reachability.
  • Reviewed the difference between URL query parameters (?ping=dara) and a JSON body, and why this ping doesn’t need a body
  • Understood the bigger picture: Construct! will follow the same client → cloud → response pattern to get the UUID, same as mobile app that offloads computation to a remote service instead of doing it locally.

New emojis added

  • Added 6 confirmed symbols from your latest message: :busts_in_silhouette: :locked_with_key: :speaking_head: :broken_chain: :key: :fingerprint:

Known issue emojis on mobile

  • Buttons work correctly on desktop browser (all symbols insert, backspace, keyboard input, Construct fetch, all confirmed working)
  • On mobile, the buttons respond, but some emojis do not display correctly.
  • Currently investigating to confirm the exact cause.

Next steps

  • Waiting on the remaining Construct!/UUID/QR/barcode.
  • Resolving the mobile emoji rendering issue.

image
image1592×857 45.3 KB

8

I previously had sent you the new emojis and the construct code , I do not see any of it.

Also we need a video screen recording else a little photo means nothing .

We did not as you to add + - …, those are supplied by the keyboard , keypad buttons are for icons and symbols not provided by the ASCII keyboards.

This is what you had 2 weeks ago!

Not sure what I am looking at.

Dara

9

Why there are french annotations? Did you use someone else’s code?

I do not see the other new emojis?

10

Hi Dara,

Thanks for your feedback :

  • The French text was only temporary. I wrote it in French by habit while testing. I have now changed everything to English.

  • I removed the symboles that are already on the keyboard. The keypad now only shows the icons.

  • I added the new emojis and the Construct fetch code you sent, I’ll share the newest file.

  • I’ll send a short screen recording to show the buttons, backspace, and Construct working.

Sorry for the late reply, I had something come up earlier so I’m catching up on the 5 hours tonight.

Could you send me the actual UUID endpoint? The one I currently have * is just the connectivity ping, it doesn’t return a UUID. In the meantime, I’ve made Construct! generate and display a QR code live in the page, currently encoding what’s typed on the keypad as a placeholder. Once I have the real endpoint, I’ll swap it to encode the actual UUID instead.

11

go to these places collect the symbols for the keypad

And here. This site and this programming language you you and Mahmood will used to create blokchains and other applications.

12

@Moez44

do something like this

url="https://www.wolframcloud.com/obj/ccn2/AI/freeform/ff/grammarian_functions/crypto/CCNfnUUIDEdit0?base=”;

then

url+”dara” or whatever else you like.

Here try it , click on the link below or copy paste into a browser:

https://www.wolframcloud.com/obj/ccn2/AI/freeform/ff/grammarian_functions/crypto/CCNfnUUIDEdit0?base=dara

each you get the same base “dara” but different trailing uuicode.

In order to add spaces and special symbols e.g. emoticons , you need to ENCODE the URL e.g.

Dara

13

Hi Dara,

Video is on the drive.

Quick update:

  • Keypad works, icons only (removed +, -, etc.)
  • Construct! button shows a QR code on screen when clicked.
  • Everything is in English now.

Tonight I will:

  • Add the emojis that are still missing.
  • Try connecting to the real UUID endpoint you sent me and understand the encodeURI
14

Status report August 8, 2026

I was absent since August 4. The current project (Keypad Tiny) did not move forward this week. I will catch up on the lost time and get back on track.

15

Thank you @Moez44 . Let us know when you are planning to report to work, important

16

Hello Dara, sorry for the late reply. I got some good rest on my way back home, and I’m feeling refreshed and ready to get back to work today. I’m online and available to resume work right away.

17

Ok give me screenshots and recordings of what you have NOW

I will give you some schedules a little bit of good news

18

Hello,

I recorded a video showing the current state of the project and where we actually stand at this stage. It shows a quick test of the app, the current progress and how things are working so far. I’ve uploaded the video to the Drive.

I remain available for the next steps

19

where is the video, send me the link from your google drive to save my time please

20

I will be back in 40 mins, post the urls for the videos and images so I upload thank you