Help needed to enhance a HTML prompt

ALYB · September 6, 2024, 7:31am

I have this HTML prompt:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New term pairs</title>
    <style>
        body {
            background-color: #DBE8F9;
            width: 800px;
            margin: 20px auto;
            /* Center the content */
            font-family: Arial, sans-serif;
        }

        .textbox {
            width: 45%;
            /* Set the width of each textbox */
            height: 300px;
            /* Set the height of each textbox */
            box-sizing: border-box;
            padding: 8px;
            margin-bottom: 10px;
            font-size: 15px;
        }

        .textbox-container {
            display: flex;
            justify-content: center;
            width: 100%;
        }


        .button-container {
            display: flex;
            justify-content: center;
            width: 100%;
        }

        .button-container button {
            padding: 10px;
            cursor: pointer;
            margin-right: 20px;
        }
    </style>
</head>

<body data-kmwindow="SCREEN(Main,Left,30%),SCREEN(Main,Top,40%),800,390">
             <div class="textbox-container">
	    <textarea id="leftBox" class="textbox"></textarea>
	    <textarea id="rightBox" class="textbox"></textarea>
             </div>
	   <div class="button-container">
	        <button 
	            name="der" 
	            type="button" 
	            onclick="window.KeyboardMaestro.Submit('der')">der</button>
	        <button 
	            name="die" 
	            type="button" 
	            onclick="window.KeyboardMaestro.Submit('die')">die</button>
	        <button 
	            name="das" 
	            type="button" 
	            onclick="window.KeyboardMaestro.Submit('das')">das</button>
	        <button 
	            name="Cancel" 
	            type="button" 
	            title="Press ESC to close the dialogue box"
	            onclick="window.KeyboardMaestro.Cancel('Cancel')">Cancel</button>
	        <button
	            name="OK"
	            type="button"
	            title="Click OK to add the term pairs to the glossary"
	            onclick="window.KeyboardMaestro.Submit('OK')">OK</button>
	        <button
	            name="de"
	            type="button"
	            onclick="window.KeyboardMaestro.Submit('de')">de</button>
	        <button
	            name="het"
	            type="button"
	            onclick="window.KeyboardMaestro.Submit('het')">het</button>
	   </div>

    </div>

    <script>
        window.onload = () =>
            document.getElementById('leftBox').focus();
        function KMInit() {
            const kmVar = window.KeyboardMaestro.GetVariable;

            document.getElementById("leftBox").value = (
                kmVar("Local_sourceTerms")
            );
            document.getElementById("rightBox").value = (
                kmVar("Local_targetTerms")
            );
        }

        function KMWillCloseWindow() {
            const 
                km = window.KeyboardMaestro,
                boxValue = k =>
                    document.getElementById(k).value;

            km.SetVariable(
                "Local_updatedSourceTerms", 
                boxValue("leftBox")
            );
            km.SetVariable(
                "Local_updatedTargetTerms", 
                boxValue("rightBox")
            );
        }
    </script>
</body>
</html>

I have added five buttons (der, die, das, de, het), that I have copied from the OK button.

Of course, the "submit" isn't correct. But what should I use? What I want is this:

When I click the der button, the var Local_der should be pasted into the left box. When I click the de button, the var Local_de should be pasted into the right box.

Thanks for your help!
HTML prompt.kmmacros (5.1 KB)

mrpasini · September 7, 2024, 3:18am

This should get you started. I just coded the der and de options (well, OK and Cancel work too). And this is what you get after clicking each button:

Apologies but I had to compact the HTML a bit to get around more easily. And I styled the buttons differently to separate functions.

HTML prompt II.kmmacros (6.4 KB)

To give you a running start:

Define a local variable for each button's text.
Create a JavaScript function for each button to write that variable in the right panel.
Call that JS function from the button.

ALYB · September 7, 2024, 10:02am

Thank you!

I have tried to insert the old functions (to set the focus to the left box and to fill the left box and right box with terms), but I cannot get this to work. Could you please help again?

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New Term Pairs</title>
    <style>
        body {
            background-color: #DBE8F9;
            width: 800px;
            margin: 20px auto;
            font-family: Arial, sans-serif;
        }
        .textbox {
            width: 45%;
            height: 300px;
            box-sizing: border-box;
            padding: 8px;
            margin-bottom: 10px;
            font-size: 15px;
       }
        .textbox-container {
            display: flex;
            justify-content: center;
            width: 100%;
        }
        .button-container {
            display: flex;
            justify-content: center;
            width: 100%;
      }
	.button-container button {
		width:50px;
		padding: 10px;
		cursor: pointer;
		margin-right: 20px;
		border: 0;
		border-radius: 6px;
		background: cornflowerblue;
		color: white;
        }
	.ok-container button {
		width:70px;
		padding: 10px;
		float:right;
		margin-top: 12px;
		margin-right: 20px;
		border: 0;
		border-radius: 6px;
		background: steelblue;
		color: white;
	}
    </style>
	<script>
	function der(){document.getElementById('leftBox').innerText = window.KeyboardMaestro.GetVariable('Local_der');}
	function de(){document.getElementById('rightBox').innerText = window.KeyboardMaestro.GetVariable('Local_de');}

        window.onload = () =>
            document.getElementById('leftBox').focus();
        function KMInit() {
            const kmVar = window.KeyboardMaestro.GetVariable;

            document.getElementById("leftBox").value = (
                kmVar("Local_sourceTerms")
            );
            document.getElementById("rightBox").value = (
                kmVar("Local_targetTerms")
            );
        }

        function KMWillCloseWindow() {
            const 
                km = window.KeyboardMaestro,
                boxValue = k =>
                    document.getElementById(k).value;

            km.SetVariable(
                "Local_updatedSourceTerms", 
                boxValue("leftBox")
            );
            km.SetVariable(
                "Local_updatedTargetTerms", 
                boxValue("rightBox")
            );
        }

	</script>
</head>
<body data-kmwindow="SCREEN(Main,Left,30%),SCREEN(Main,Top,40%),800,440" data-kmwindowid="New Term Pairs" >
	<div class="textbox-container">
		<textarea id="leftBox" class="textbox"></textarea>
		<textarea id="rightBox" class="textbox"></textarea>
	</div>
	<div class="button-container">
		<button type="button" 
		onclick="der()">der</button>
	<button type="button" 
		onclick="window.KeyboardMaestro.Submit('die')">die</button>
	<button type="button" 
		onclick="window.KeyboardMaestro.Submit('das')">das</button>
	<button type="button"
		onclick="de()">de</button>
	<button type="button"
		onclick="window.KeyboardMaestro.Submit('het')">het</button>
	</div>
	<div class="ok-container" style="margin-right:35px">
		<button type="button"
			title="Add the term pairs to the glossary"
			onclick="window.KeyboardMaestro.Submit('OK')">OK</button>
		<button type="button" 
			title="Close the dialogue box"
			onclick="window.KeyboardMaestro.Cancel('Cancel')">Cancel</button>
	</div>

    </div>
</body>
</html>

HTML prompt III.kmmacros (8.1 KB)

mrpasini · September 7, 2024, 5:08pm

I don't understand what you are trying to do or how you expect to use the Pairs window. So naturally I don't understand why you would copy back those functions. Clarifications?

ALYB · September 7, 2024, 5:41pm

Here is a demo of the old HTML prompt.

I copy a source term and a target term from my translation editor and via some algorithms I generate all declensions for three German genders and two Dutch genders.

But sometimes the algorithm is wrong and I have to override the generated results in the left or right box. E.g. the algorithm thinks that the Dutch is feminine like the German, while it actually is neutral. Then I click the het button.

mrpasini · September 7, 2024, 5:59pm

I don't see a demo (but i don't think it would help).

So you paste something in the clipboard into what location? And then you use the buttons to get the declensions. German in the left, Dutch in the right? (Sorry, neither is in my arsenal.)

What does the het button do?

ALYB · September 7, 2024, 6:05pm

Last item.

I paste the German into the left box and the Dutch into the right box. This already includes all declensions, but sometimes they are not correct.

The button ‘het’ pastes the declensions of a neutral noun into the right box, when the automatically generated result isn’t correct.

mrpasini · September 7, 2024, 7:23pm

In the version I sent you above, you can click on each text box and type or paste from the clipboard into it.

How you derive any data from the buttons is not clear to me but I've shown you how you can associate data with a button. If you need to change the data associated with a button, you can use a switch action to identify the button and perform whatever magic is involved.

So I think, as far as the prompt goes, you have what you need. But I wouldn't try to add back what I deleted.

ALYB · September 8, 2024, 5:53am

You were right. After some sleep I came up with this solution:

function auto()
{document.getElementById('leftBox').innerText = window.KeyboardMaestro.GetVariable('Local_sourceTerms')
document.getElementById('rightBox').innerText = window.KeyboardMaestro.GetVariable('Local_targetTerms');}

Thanks again!

Help needed to enhance a HTML prompt

Options