update

app.py

@@ -65,14 +65,8 @@ observe_js = """
 			const newWidth = entry.contentRect.width
 			
 			target.style.backgroundSize = `${newWidth}px`;
-			target.style.setProperty("--indication-dot-size", `${newWidth*0.025}px`);
-			target.style.setProperty("--indication-text-size", `${newWidth*0.035}px`);
-			
-			let all_elem = target.querySelectorAll(":scope > label");
-			Array.from(all_elem).forEach(item => {
-				item.querySelector(":scope > input").style.width = `${newWidth*0.025}px`;
-				item.querySelector(":scope > input").style.height = `${newWidth*0.025}px`;
-			});
+			target.style.setProperty("--channel-indicator-size", `${newWidth*0.025}px`);
+			target.style.setProperty("--channel-name-size", `${newWidth*0.035}px`);
 		});
 	});
 	observer.observe(document.querySelector("#radio-group > div:nth-of-type(2)"));
@@ -96,6 +90,8 @@ init_js = """
 	
 	const div = document.querySelector(selector);
 	const divWidth = div.clientWidth;
+	div.style.setProperty("--channel-indicator-size", `${divWidth*0.025}px`);
+	div.style.setProperty("--channel-name-size", `${divWidth*0.035}px`);
 	
 	// add figure of the input montage
 	div.style.cssText = `
@@ -109,27 +105,24 @@ init_js = """
 	
 	// move the radios/checkboxes
 	let name, left, bottom;
-	let all_elem = div.querySelectorAll(":scope > label");
-	Array.from(all_elem).forEach(item => {
+	const elements = div.querySelectorAll(":scope > label");
+	Array.from(elements).forEach(item => {
 		name = item.querySelector(":scope > input").getAttribute(attribute);
 		left = channel_info.inputDict[name].css_position[0];
 		bottom = channel_info.inputDict[name].css_position[1];
 		
-		item.style.cssText = `position: absolute; left: ${left}; bottom: ${bottom};`;
+		item.style.cssText = `position: absolute; left: ${left}%; bottom: ${bottom}%;`;
 		item.className = "";
 		item.querySelector(":scope > span").innerText = "";
 		item.querySelector(":scope > input").style.cssText = `
 			position: absolute;
-			width: ${divWidth*0.025}px;
-			height: ${divWidth*0.025}px;
+			width: var(--channel-indicator-size);
+			height: var(--channel-indicator-size);
 			transform: translate(-50%, -50%);
 		`;
 	});
 	
 	// add indication for the empty tpl_channels
-	div.style.setProperty("--indication-dot-size", `${divWidth*0.025}px`);
-	div.style.setProperty("--indication-text-size", `${divWidth*0.035}px`);
-	
 	name = stage1_info.emptyTemplate[0];
 	left = channel_info.templateDict[name].css_position[0];
 	bottom = channel_info.templateDict[name].css_position[1];
@@ -137,25 +130,21 @@ init_js = """
 		${selector}::before {
 			content: "";
 			position: absolute;
-			left: ${left};
-			bottom: ${bottom};
-			width: var(--indication-dot-size);
-			height: var(--indication-dot-size);
+			left: ${left}%;
+			bottom: ${bottom}%;
+			width: var(--channel-indicator-size);
+			height: var(--channel-indicator-size);
 			border-radius: 50%;
 			background-color: red;
 		}
 	`;
-	left = parseFloat(left.slice(0, -1))+2.7;
-	left = left.toString()+"%";
-	bottom = parseFloat(bottom.slice(0, -1));
-	bottom = bottom.toString()+"%";
 	const txt_rule = `
 		${selector}::after {
 			content: "${name}";
 			position: absolute;
-			left: ${left};
-			bottom: ${bottom};
-			font-size: var(--indication-text-size);
+			left: ${left+2.7}%;
+			bottom: ${bottom}%;
+			font-size: var(--channel-name-size);
 			font-weight: 900;
 			color: red;
 		}
@@ -183,22 +172,20 @@ update_js = """
 	let cnt, name, left, bottom;
 	if(stage1_info.state == "step2-selecting"){
 	    selector = "#radio-group > div:nth-of-type(2)";
-	    cnt = stage1_info.step2.count
+	    cnt = stage1_info.step2.count;
 	    
 	    // update the radios
-		let all_elem = document.querySelectorAll(selector+" > label");
-		Array.from(all_elem).forEach(item => {
+		const elements = document.querySelectorAll(selector+" > label");
+		Array.from(elements).forEach(item => {
 			name = item.querySelector(":scope > input").value;
 			left = channel_info.inputDict[name].css_position[0];
 			bottom = channel_info.inputDict[name].css_position[1];
-			
-			item.style.left = `${left}`;
-			item.style.bottom = `${bottom}`;
+			item.style.left = `${left}%`;
+			item.style.bottom = `${bottom}%`;
 		});
-		
 	}else if(stage1_info.state == "step3-2-selecting"){
 	    selector = "#chkbox-group > div:nth-of-type(2)";
-	    cnt = stage1_info.step3.count
+	    cnt = stage1_info.step3.count;
 	}else return;
 	
 	// update the indication
@@ -209,25 +196,21 @@ update_js = """
 		${selector}::before {
 			content: "";
 			position: absolute;
-			left: ${left};
-			bottom: ${bottom};
-			width: var(--indication-dot-size);
-			height: var(--indication-dot-size);
+			left: ${left}%;
+			bottom: ${bottom}%;
+			width: var(--channel-indicator-size);
+			height: var(--channel-indicator-size);
 			border-radius: 50%;
 			background-color: red;
 		}
 	`;
-	left = parseFloat(left.slice(0, -1))+2.7;
-	left = left.toString()+"%";
-	bottom = parseFloat(bottom.slice(0, -1));
-	bottom = bottom.toString()+"%";
 	const txt_rule = `
 		${selector}::after {
 			content: "${name}";
 			position: absolute;
-			left: ${left};
-			bottom: ${bottom};
-			font-size: var(--indication-text-size);
+			left: ${left+2.7}%;
+			bottom: ${bottom}%;
+			font-size: var(--channel-name-size);
 			font-weight: 900;
 			color: red;
 		}

app_utils.py

@@ -210,11 +210,11 @@ def save_figure(channel_info, tpl_montage, filename1, filename2):
 	for i, name in enumerate(tpl_names):
 		left = tpl_coords[i,0]/6.4
 		bottom = tpl_coords[i,1]/6.4
-		tpl_dict[name]["css_position"] = [str(round(left, 2))+"%", str(round(bottom, 2))+"%"]
+		tpl_dict[name]["css_position"] = [round(left, 2), round(bottom, 2)]
 	for i, name in enumerate(in_names):
 		left = in_coords[i,0]/6.4
 		bottom = in_coords[i,1]/6.4
-		in_dict[name]["css_position"] = [str(round(left, 2))+"%", str(round(bottom, 2))+"%"]
+		in_dict[name]["css_position"] = [round(left, 2), round(bottom, 2)]
 	
 	channel_info.update({
 		"templateDict" : tpl_dict,