Make a popups

Is there any way to make pop up menus like flowing photo

You can easily make palettes, eg:

Or you can use a Custom HTML Prompt action and do anything you want.

1 Like

Thank u very much. It is more useful to use a Custom HTML Prompt for me. Is there any example for HTML. I am not good at HTML.

There are quite a few macros and other examples of how to use the prompt on this forum... for instance:

Custom HTML Prompt with total control of display - Tips & Tutorials - Keyboard Maestro Discourse

FWIW my HTML knowledge is extremely basic, and a few months ago was essentially zero. But after some Google-fu I learned enough to build several of my own custom prompts for a few macros. If you want to see one, see this sample code for my macro: KMF: Redesigned: Quickly Create a New Expansion With Typinator (using Typinator’s AppleScript dictionary)

Sample HTML (click to expand/collapse)
<!DOCTYPE html>
<html>

<head>

<style>

	body {
		background-color: rgba(50,50,50,0.95);
		color: rgba(255,255,255,0.7);
		font-family: arial
	}
	
	select {
		font-size: 100%;
		background: rgba(255,255,255,0.3);
		background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
		background-repeat: no-repeat;
		background-position-x: 100%;
		background-position-y: -2.5px;
		color: rgba(255,255,255,0.75);
		border: 1px solid rgba(155,155,155,0.5);
		border-radius: 5px;
		padding-left: 10px;
		padding-right: 15px;
		width: 300px;
		height: 25px;
		-webkit-appearance: none;
		}
		
	select:is(:hover, :focus) {
		font-size: 100%;
		background: rgba(255,255,255,0.4);
		background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
		background-repeat: no-repeat;
		background-position-x: 100%;
		background-position-y: -2.5px;
		color: rgba(255,255,255,0.85);
		border: 1px solid rgba(255,255,255,0.6);
		border-radius: 5px;
		padding-left: 10px;
		padding-right: 15px;
		width: 300px;
		-webkit-appearance: none;
		}
	
	textarea {
		font-size: 100%;
		background: rgba(255,255,255,0.1);
		color: rgba(255,255,255,0.75);
		border: 1px solid rgba(155,155,155,0.5);
		border-radius: 5px;
		padding-left: 10px;
		resize: yes;
		width: 286px;
		height: 20px;
		}

	textarea:is(:hover, :focus) {
		font-size: 100%;
		background: rgba(255,255,255,0.2);
		color: rgba(255,255,255,0.85);
		border: 1px solid rgba(255,255,255,0.6);
		border-radius: 5px;
		}

	table {
		width: 100%;
		}
	
	table, th, tr, td {
		border: 0px solid;
		padding-left: 5px;
		padding-right: 5px;
		}
	
	td.extrapadding {
		padding-bottom: 5px;
		}

	button {
		font-size: 100%;
		background: rgba(255,255,255,0.1);
		color: rgba(255,255,255,0.75);
		border-radius: 5px;
		border: 1px solid transparent;
  		}
	
	button:is(:hover, :focus) {
		font-size: 100%;
		background: rgba(255,255,255,0.2);
		color: rgba(255,255,255,0.85);
		border-radius: 5px;
		border: 1px solid transparent;
  		}
  		
  	button.submit {
		font-size: 100%;
		background: rgba(0,75,255,1);
		color: rgba(255,255,255,0.75);
		border-radius: 5px;
		border: 1px solid transparent;
  		}
	
	button.submit:is(:hover, :focus) {
		font-size: 100%;
		background: rgba(0,100,255,1);
		color: rgba(255,255,255,0.85);
		border-radius: 5px;
		border: 1px solid transparent;
  		}
  	
  	<!-- .checkbox {	-->
  	  	<!-- 	background: rgba(255,255,255,0.0);	-->
  	  	<!-- 	}	-->

	*:hover {
		cursor: default;
		}
  	
	*.submit:hover {
		cursor: copy;
		position: relative;
		}

	*.cancel:hover {
		cursor: pointer;
		}

	*.menu:hover {
		cursor: context-menu;
		}

	*.textfield:hover {
		cursor: text;
		}

	*.checkbox:hover {
		cursor: cell;
		}

</style>

<script type="text/javascript">
	function KMWindow() {
		let select = document.getElementById("setName");

		let data = document.kmvar.localsetname;

		let items = data.split("|").filter(s => s != "");

		items.forEach(item => {
			let option = document.createElement("option");
			option.text = item;
			select.add(option);
		});
		
		winBounds = window.KeyboardMaestro.GetVariable("localWinBounds");
		if(!winBounds) {
			winBounds = window.KeyboardMaestro.GetVariable("localWinBounds");
			}
		return winBounds;

	}
</script>

<title>Create a New Typinator Expansion</title>

</head>

<body>

<h2 style="text-align: center;">Follow the instructions to create your new Typinator rule</h2>
<h4 style="text-align: center;">Hover over each item to see additional information.</h4>

<form id="myform">
<table>

	<tr title="Select the Typinator set you would like to add the new rule to.">
		<td class="extrapadding" style="text-align: right;">Set Name</td>
		<td class="extrapadding"><select name="localsetname" class="menu" id="setName" style="width: 300px"></select></td>
	</tr>

	<tr title="Type the abbreviation you would like to type to have expanded.&#010&#010Click and drag the bottom-right corner to increase this field's size.">
		<td style="text-align: right;">Abbreviation</td>
		<td><textarea name="localabbreviation" id="abbreviation" class="textfield" placeholder="Type your abbreviation here" required></textarea></td>
	</tr>
	
	<tr title="Type the word or phrase you would like to have appear after typing the abbreviation.&#010&#010Click and drag the bottom-right corner to increase this field's size.">
		<td style="text-align: right;">Expansion</td>
		<td><textarea name="localexpansion" class="textfield" placeholder="Type your expansion here" required></textarea></td>
	</tr>

	<tr title="You can add a description that will appear in the main Typinator window here.&#010&#010Click and drag the bottom-right corner to increase this field's size.">
		<td style="text-align: right;">Description</td>
		<td><textarea name="localdescription" class="textfield" placeholder="Type an optional description here."></textarea></td>
	</tr>
	
	<tr title="Select how you would like to handle the abbreviation's case.&#10;&#10;More info can be found by hovering over each item in the dropdown menu.">
		<td class="extrapadding" style="text-align: right;">Case Handling</td>
		<td class="extrapadding">
			<select name="localcaseHandling" class="menu" id="caseHandling" style="width: 300px">
				<option value="Case affects expansion" title="&quot;Case affects expansion&quot; means the expansion will match the abbreviations case; in other words &quot;btw&quot; becomes &quot;by the way&quot;, and &quot;BTW&quot; becomes &quot;BY THE WAY&quot;.">Case affects expansion</option>
				<option value="Case does not matter" title="&quot;Case does not matter&quot; means no matter how you type the abbreviation, it will be expanded the same way every time.">Case does not matter</option>
				<option value="Case must match" title="&quot;Case must match&quot; means you must type the abbreviation in the exact same case as you saved it in for it to be expanded.">Case must match</option>
			</select>
		</td>
	</tr>
	
	<tr title="Select what format you want to save the new expansion as.&#10;&#10;More info can be found by hovering over each item in the dropdown menu.">
		<td style="text-align: right;">Format</td>
		<td>
			<select name="localformat" class="menu" id="format" style="width: 300px">
				<option value="Plain Text" title="Plain text will be expanded to match the target document's format">Plain Text</option>
				<option value="Formatted Text" title="Formatted Text will be pasted with a specific format; font, size, color etc, regardless of the target document's format.">Formatted Text</option>
				<option value="Picture" title="Picture format is how to paste in images.&#10;&#10;NOTE: This is not currently supported with this macro!">Picture</option>
				<option value="HTML" title="HTML expansions are not just text expansions that happen to contain HTML code, but rather a distinct expansion format that can be described in HTML.&#10;HTML expansions are most useful for mail applications that support rich text messages, such as Apple Mail, Microsoft Outlook, Airmail, Thunderbird, as well as many web-based mail services like iCloud Mail and Gmail.">HTML</option>
			</select>
		</td>
	</tr>
	
	<tr><th colspan="2" height="10"></th></tr>
	
	<tr title="These are additional options for your custom description.">
		<th></th>
		<th align="left">Description Options</th>
	</tr>
	
	<tr title="If you select this option, the date will be prepended to the beginning of the description.&#10;&#10;This can be useful since Typinator does not natively support sorting by date added.">
		<td></td>
		<td><label class="checkbox"><input name="localprependDate" type="checkbox"> Prepend Date</label></td>
	</tr>

	<tr title="If you select this option, the abbreviation will be prepended to the description.&#10;&#10;This can be helpful to show the abbreviation when you have a custom description.">
		<td></td>
		<td><label class="checkbox"><input name="localprependAbbreviation" type="checkbox" class="checkbox"> Prepend Abbreviation</label></td>
	</tr>

	<tr title="If you select this option, the expansion will be prepended to the description.&#10;&#10;This can be helpful to show the expansion when you have a custom description.">
		<td></td>
		<td><label class="checkbox"><input name="localprependExpansion" type="checkbox" class="checkbox"> Prepend Expansion</label></td>
	</tr>

	<tr><th colspan="2" height="10"></th></tr>

	<tr title="These are optional Typinator options that are not vital to the macro's execution but can be useful for creating more refined abbreviations.">
		<th></th>
		<th align="left">More Typinator Options</th>
	</tr>

	<tr title="Select this option if you want Typinator to require typing a non-alpha character after the abbreviation before it is expanded.">
		<td></td>
		<td><label class="checkbox"><input name="localwholeWord" type="checkbox" class="checkbox"> Whole Word</label></td>
	</tr>

	<tr title="Select this option if your abbreviation is a RegEx (Regular Expression) and it will be checked for proper formatting before being added to your Typinator set.">
		<td></td>
		<td><label class="checkbox"><input name="localRegExSet" type="checkbox" class="checkbox"> RegEx Set</label></td>
	</tr>
	
	<tr><th colspan="2" height="10"></th></tr>
	
	<tr title="These are additional options that are not vital to the macro's execution but can be useful for verification, workflow etc.">
		<th></th>
		<th align="left">More Options</th>
	</tr>

	<tr title="Select this option if you would like to see a review of the new rule's details after adding it to Typinator.">
		<td></td>
		<td><label class="checkbox"><input name="localshowResults" type="checkbox" class="checkbox"> Show Results</label></td>
	</tr>

	<tr title="Select this option if you would like the new expansion pasted into your front window upon completion.">
		<td></td>
		<td><label class="checkbox"><input name="localpasteFrontDoc" type="checkbox" class="checkbox"> Paste In Document</label></td>
	</tr>

	<tr title="Select this option if you would like to open Typinator upon completion.">
		<td></td>
		<td><label class="checkbox"><input name="localopenTyp" type="checkbox" class="checkbox"> Open In Typinator</label></td>
	</tr>

	<tr><th colspan="2" height="10"></th></tr>
	
	<tr><th colspan="2" align="center">
		<button name="Cancel" type="button" class="cancel" style="width:100px" title="Click to cancel macro."
			onclick="window.KeyboardMaestro.Cancel('Cancel')">Cancel
		</button>
		<button name="Submit" type="submit" class="submit" style="width:100px" title="Click to submit new rule to Typinator."
			onclick="if ( document.getElementById('myform').checkValidity() ) { window.KeyboardMaestro.Submit('Submit') } else { document.getElementById('myform').reportValidity() }">Submit
		</button>
		
	</th></tr>

</table>

</form>
</body>
</html>

<!-- Original Submit button -->
<!-- onclick="window.KeyboardMaestro.Submit('Submit')">Submit -->

I was able to learn enough HTML and CSS (cascading style sheets) in just a couple of weeks to build that, so even if your experience is currently zero, I encourage you to take a stab at building something yourself because the long-term benefits are worth it.

2 Likes

Thanks. I will try to learn it. I hope to build macros myself.

1 Like

You're very welcome. Let us know if you need further help!

2 Likes

can you help me about this question?

Can I ask a question?
How to adjust the text alignment in the palette.

The options available are in the Palette theme. You can left/right/center the text for each button, adjust its size, etc. But all buttons need to be the same size.


Is it? I cannot find it.

Is what? You can left/center the text for each button (sorry, there is no right alignment), and adjust the size. But all buttons are the same size.

What is it you cannot find?

I see right text in your palette. How can do that.

You cannot right-align the text. All buttons are the size required for the largest button.

how can do that?

What you are seeing there is left-aligned text. The button on the right only appears to be right-aligned because it has the most letters and is filling the whole button space.

2 Likes

By ensuring that the last button is the longest string.

1 Like

Ok, I got it. Thank you.

1 Like