# CCN Keypad Tiny

**URL:** <https://discuss.compclassnotes.com/t/ccn-keypad-tiny/321>\
**Category:** Moez Workbench\
**Created:** [July 24, 2026, 3:30pm UTC](https://discuss.compclassnotes.com/t/ccn-keypad-tiny/321 "2026-07-24T15:30:24Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Moez44](https://dub1.discourse-cdn.com/flex006/user_avatar/discuss.compclassnotes.com/moez44/32/404_2.png) [@Moez44](https://discuss.compclassnotes.com/u/Moez44)\
**Post date:** [July 24, 2026, 3:30pm UTC](https://discuss.compclassnotes.com/t/ccn-keypad-tiny/321/1 "2026-07-24T15:30:24Z")

</div>

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](https://europe1.discourse-cdn.com/flex006/uploads/ccn1/original/1X/cc4d996bd62cbb1f5d919f4a5f65454610f4786a.png)

---

<div class="post-metadata">

**Author:** ![CCNDEV](https://dub1.discourse-cdn.com/flex006/user_avatar/discuss.compclassnotes.com/ccndev/32/100_2.png) [@CCNDEV](https://discuss.compclassnotes.com/u/CCNDEV)\
**Post date:** [July 24, 2026, 3:32pm UTC](https://discuss.compclassnotes.com/t/ccn-keypad-tiny/321/2 "2026-07-24T15:32:16Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![CCNDEV](https://dub1.discourse-cdn.com/flex006/user_avatar/discuss.compclassnotes.com/ccndev/32/100_2.png) [@CCNDEV](https://discuss.compclassnotes.com/u/CCNDEV)\
**Post date:** [July 24, 2026, 3:35pm UTC](https://discuss.compclassnotes.com/t/ccn-keypad-tiny/321/3 "2026-07-24T15:35:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Moez44](https://dub1.discourse-cdn.com/flex006/user_avatar/discuss.compclassnotes.com/moez44/32/404_2.png) [@Moez44](https://discuss.compclassnotes.com/u/Moez44)\
**Post date:** [July 24, 2026, 3:39pm UTC](https://discuss.compclassnotes.com/t/ccn-keypad-tiny/321/4 "2026-07-24T15:39:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![CCNDEV](https://dub1.discourse-cdn.com/flex006/user_avatar/discuss.compclassnotes.com/ccndev/32/100_2.png) [@CCNDEV](https://discuss.compclassnotes.com/u/CCNDEV)\
**Post date:** [July 24, 2026, 3:40pm UTC](https://discuss.compclassnotes.com/t/ccn-keypad-tiny/321/5 "2026-07-24T15:40:12Z")

</div>

ok I send shortly

---

<div class="post-metadata">

**Author:** ![CCNDEV](https://dub1.discourse-cdn.com/flex006/user_avatar/discuss.compclassnotes.com/ccndev/32/100_2.png) [@CCNDEV](https://discuss.compclassnotes.com/u/CCNDEV)\
**Post date:** [July 24, 2026, 5:24pm UTC](https://discuss.compclassnotes.com/t/ccn-keypad-tiny/321/6 "2026-07-24T17:24:51Z")

</div>

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

```auto
    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); 
}

```

}

});

---

<div class="post-metadata">

**Author:** ![Moez44](https://dub1.discourse-cdn.com/flex006/user_avatar/discuss.compclassnotes.com/moez44/32/404_2.png) [@Moez44](https://discuss.compclassnotes.com/u/Moez44)\
**Post date:** [July 31, 2026, 4:19pm UTC](https://discuss.compclassnotes.com/t/ccn-keypad-tiny/321/7 "2026-07-31T16:19:47Z")

</div>

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: 👥 🔐 🗣 ⛓️‍💥 🔑 🫆

**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](https://europe1.discourse-cdn.com/flex006/uploads/ccn1/original/1X/50af31a2cc5074f4c82009f8ec3cfc148a31a8cc.png)

---

<div class="post-metadata">

**Author:** ![CCNDEV](https://dub1.discourse-cdn.com/flex006/user_avatar/discuss.compclassnotes.com/ccndev/32/100_2.png) [@CCNDEV](https://discuss.compclassnotes.com/u/CCNDEV)\
**Post date:** [July 31, 2026, 4:27pm UTC](https://discuss.compclassnotes.com/t/ccn-keypad-tiny/321/8 "2026-07-31T16:27:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![CCNDEV](https://dub1.discourse-cdn.com/flex006/user_avatar/discuss.compclassnotes.com/ccndev/32/100_2.png) [@CCNDEV](https://discuss.compclassnotes.com/u/CCNDEV)\
**Post date:** [July 31, 2026, 4:32pm UTC](https://discuss.compclassnotes.com/t/ccn-keypad-tiny/321/9 "2026-07-31T16:32:27Z")

</div>

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

I do not see the other new emojis?

---

<div class="post-metadata">

**Author:** ![Moez44](https://dub1.discourse-cdn.com/flex006/user_avatar/discuss.compclassnotes.com/moez44/32/404_2.png) [@Moez44](https://discuss.compclassnotes.com/u/Moez44)\
**Post date:** [July 31, 2026, 8:25pm UTC](https://discuss.compclassnotes.com/t/ccn-keypad-tiny/321/10 "2026-07-31T20:25:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![FreeFormer](https://dub1.discourse-cdn.com/flex006/user_avatar/discuss.compclassnotes.com/freeformer/32/97_2.png) [@FreeFormer](https://discuss.compclassnotes.com/u/FreeFormer)\
**Post date:** [August 1, 2026, 12:39am UTC](https://discuss.compclassnotes.com/t/ccn-keypad-tiny/321/11 "2026-08-01T00:39:43Z")

</div>

go to these places collect the symbols for the keypad

> **[🗣 | CCN WIKI Books](https://wiki.compclassnotes.com/books/applicable-cryptography/page/5f93f)**
>
> 🗣 (
> 𖤘"user"-\>"dara"
> 𖤘"channel"-\>"/ff/free/channel1"
> 𖤘"secret"-\>"we are free!"    
> );
> 
> save as...

> **[👥 | CCN WIKI Books](https://wiki.compclassnotes.com/books/applicable-cryptography/page/3ef81)**
>
> 🔐\["rsa"\];
> 
> //group chat;
> 👥 (
> 𖤘"owner"-\>"free" 
> );
> 
> save as channel1;

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

> **[Applicable Cryptography | CCN WIKI Books](https://wiki.compclassnotes.com/books/applicable-cryptography)**
>
> Applicable Free Form Programmable Cryptography.Author: Dara O ShaydaArtwork: Tokyo Ghoul

---

<div class="post-metadata">

**Author:** ![CCNDEV](https://dub1.discourse-cdn.com/flex006/user_avatar/discuss.compclassnotes.com/ccndev/32/100_2.png) [@CCNDEV](https://discuss.compclassnotes.com/u/CCNDEV)\
**Post date:** [August 1, 2026, 3:06am UTC](https://discuss.compclassnotes.com/t/ccn-keypad-tiny/321/12 "2026-08-01T03:06:19Z")

</div>

@Moez44

do something like this

url="[https://www.wolframcloud.com/obj/ccn2/AI/freeform/ff/grammarian\_functions/crypto/CCNfnUUIDEdit0?base=”](https://www.wolframcloud.com/obj/ccn2/AI/freeform/ff/grammarian_functions/crypto/CCNfnUUIDEdit0?base=%E2%80%9D);

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](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.

> **[encodeURI() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI)**
>
> The encodeURI() function encodes a URI by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two...

Dara

---

<div class="post-metadata">

**Author:** ![Moez44](https://dub1.discourse-cdn.com/flex006/user_avatar/discuss.compclassnotes.com/moez44/32/404_2.png) [@Moez44](https://discuss.compclassnotes.com/u/Moez44)\
**Post date:** [August 1, 2026, 7:15pm UTC](https://discuss.compclassnotes.com/t/ccn-keypad-tiny/321/13 "2026-08-01T19:15:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Moez44](https://dub1.discourse-cdn.com/flex006/user_avatar/discuss.compclassnotes.com/moez44/32/404_2.png) [@Moez44](https://discuss.compclassnotes.com/u/Moez44)\
**Post date:** [August 8, 2026, 7:19am UTC](https://discuss.compclassnotes.com/t/ccn-keypad-tiny/321/14 "2026-08-08T07:19:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![CCNDEV](https://dub1.discourse-cdn.com/flex006/user_avatar/discuss.compclassnotes.com/ccndev/32/100_2.png) [@CCNDEV](https://discuss.compclassnotes.com/u/CCNDEV)\
**Post date:** [August 8, 2026, 1:01pm UTC](https://discuss.compclassnotes.com/t/ccn-keypad-tiny/321/15 "2026-08-08T13:01:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Moez44](https://dub1.discourse-cdn.com/flex006/user_avatar/discuss.compclassnotes.com/moez44/32/404_2.png) [@Moez44](https://discuss.compclassnotes.com/u/Moez44)\
**Post date:** [August 10, 2026, 1:17pm UTC](https://discuss.compclassnotes.com/t/ccn-keypad-tiny/321/16 "2026-08-10T13:17:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![CCNDEV](https://dub1.discourse-cdn.com/flex006/user_avatar/discuss.compclassnotes.com/ccndev/32/100_2.png) [@CCNDEV](https://discuss.compclassnotes.com/u/CCNDEV)\
**Post date:** [August 10, 2026, 1:37pm UTC](https://discuss.compclassnotes.com/t/ccn-keypad-tiny/321/17 "2026-08-10T13:37:32Z")

</div>

Ok give me screenshots and recordings of what you have NOW

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

---

<div class="post-metadata">

**Author:** ![Moez44](https://dub1.discourse-cdn.com/flex006/user_avatar/discuss.compclassnotes.com/moez44/32/404_2.png) [@Moez44](https://discuss.compclassnotes.com/u/Moez44)\
**Post date:** [August 10, 2026, 2:09pm UTC](https://discuss.compclassnotes.com/t/ccn-keypad-tiny/321/18 "2026-08-10T14:09:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![CCNDEV](https://dub1.discourse-cdn.com/flex006/user_avatar/discuss.compclassnotes.com/ccndev/32/100_2.png) [@CCNDEV](https://discuss.compclassnotes.com/u/CCNDEV)\
**Post date:** [August 10, 2026, 2:10pm UTC](https://discuss.compclassnotes.com/t/ccn-keypad-tiny/321/19 "2026-08-10T14:10:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![CCNDEV](https://dub1.discourse-cdn.com/flex006/user_avatar/discuss.compclassnotes.com/ccndev/32/100_2.png) [@CCNDEV](https://discuss.compclassnotes.com/u/CCNDEV)\
**Post date:** [August 10, 2026, 2:51pm UTC](https://discuss.compclassnotes.com/t/ccn-keypad-tiny/321/20 "2026-08-10T14:51:47Z")

</div>

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

[Next page](https://discuss.compclassnotes.com/t/ccn-keypad-tiny/321.md?page=2)