Adding real Bliss Symbols to each control

[RealJoshue108]

Currently the entire panel of symbols is using only an image of a bunch of Bliss symbols to illustrate how they could be added. Currently I've got the data-purpose="symbol-set" semantic on the toggle that shows the symbol set.

@ruoxiran I'm wondering if we could we take that image and add the data-purpose="symbol-set" to the relevant Bliss references to the image.

I'm also wondering if they should be as CSV attributes in alt text?

Currently the code is:

<img id="ui1" src="/images/bliss_ui_call_2.png">

Could we do something like:

<img id="ui1" src="/images/bliss_ui_call_2.png" data-purpose="symbol-set" alt=" Start Phone Call - 22904 call,telephone,ring-(to) (telephone + action indicator) Stop Phone Call - 21841 relay (to stop + to start) - Character (superimposed) Lock - 16704 safe,safely,secure, securely (safety + description indicator) Start Camera - 13111 camera (enclosure + light: box that uses the sunlight to record what the eye sees) - Character (superimposed) ">

Finally it may not matter for the POC example - as I think if this were working, each button would be appropriately labelled and have the correct Bliss symbol reference.

I guess, the important think here is potentially the addition of:

<img id="ui1" src="/images/bliss_ui_call_2.png" **data-purpose="symbol-set"**>

to the image itself. Lets discuss tomorrow on our call.

[ruoxiran]

This seems work to me, but generally data-purpose is used in input boxes or some links. I understand that the start phone call here should be the function of the button. When the button is used, we usually use data-action to implement. So I guess your idea here is to replace the text or picture in the start phone call button with bliss. I think it might be better if you can adjust the logic and frame of this page as a whole. I give it below a suggested example with html:
First, set a button that can trigger the entire page. The function of this button can be set to replace the content of all data-symbols on the page as bliss.
For example, a button function can be implemented:
<button data-action="symbol-set" alt="replace all content in this page with bliss">replace content with bliss</button>
In this case, all the content you want to provide bliss on this page can be added by adding <span data-symbol="@@"></span> markup language. We only need to realize a function by searching for<span>and data-symbol to replace all the bliss on the page, instead of replacing every content.

Next, the start phone call button can be defined as follows:

<button data-action="start phone call" alt="call, telephone, ring-(to) (telephone + action indicator)">
      <span data-symbol="22904">start phone call</span>
</button>

Or, if the button is an image:

<button data-action="start phone call" call, telephone, ring-(to) (telephone + action indicator)>
       <span data-symbol="22904">
             <img id="ui1" src="/images/start_phone_call.png" alt="start phone call image">
       </span>
</button>

If you want to enter a phone number, you can use data-purpose in the input box,

<input data-purpose="input tel number"></input>

I'm not sure if I explained it clearly, we can talk about it later.

Best,

[RealJoshue108]

Thanks @ruoxiran thats really helpful - I'll update the implementation details with this :-)