VueUI Conversions and Style Tweaks (#11523)

code/game/machinery/atmoalter/portable_atmospherics.dm

@@ -26,7 +26,7 @@
 	var/obj/machinery/atmospherics/portables_connector/port = locate() in loc
 	if(port)
 		connect(port)
-	
+
 /obj/machinery/portable_atmospherics/canister/Initialize()
 	..()
 
@@ -41,6 +41,7 @@
 		air_contents.react()
 	else
 		update_icon()
+		SSvueui.check_uis_for_change(src)
 
 /obj/machinery/portable_atmospherics/Destroy()
 	qdel(air_contents)
@@ -113,6 +114,7 @@
 		user.drop_from_inventory(T,src)
 		src.holding = T
 		update_icon()
+		SSvueui.check_uis_for_change(src)
 		return
 
 	else if (W.iswrench())
@@ -120,6 +122,7 @@
 			disconnect()
 			to_chat(user, "<span class='notice'>You disconnect \the [src] from the port.</span>")
 			update_icon()
+			SSvueui.check_uis_for_change(src)
 			return
 		else
 			var/obj/machinery/atmospherics/portables_connector/possible_port = locate(/obj/machinery/atmospherics/portables_connector/) in loc
@@ -127,6 +130,7 @@
 				if(connect(possible_port))
 					to_chat(user, "<span class='notice'>You connect \the [src] to the port.</span>")
 					update_icon()
+					SSvueui.check_uis_for_change(src)
 					return
 				else
 					to_chat(user, "<span class='notice'>\The [src] failed to connect to the port.</span>")
@@ -170,6 +174,7 @@
 		cell = C
 		user.visible_message("<span class='notice'>[user] opens the panel on [src] and inserts [C].</span>", "<span class='notice'>You open the panel on [src] and insert [C].</span>")
 		power_change()
+		SSvueui.check_uis_for_change(src)
 		return
 
 	if(I.isscrewdriver())
@@ -182,6 +187,7 @@
 		cell.forceMove(src.loc)
 		cell = null
 		power_change()
+		SSvueui.check_uis_for_change(src)
 		return
 	..()
 
@@ -206,4 +212,4 @@
 	if(air_contents.gas.len == 0)
 		return
 
-	message_admins("'[src.name]' was opened[cause ? " by [cause]" : ""], containing [english_list(air_contents.gas)]. (<A HREF='?_src_=holder;adminplayerobservecoodjump=1;X=[x];Y=[y];Z=[z]'>JMP</a>)")
+	message_admins("'[src.name]' was opened[cause ? " by [cause]" : ""], containing [english_list(air_contents.gas)]. (<A HREF='?_src_=holder;adminplayerobservecoodjump=1;X=[x];Y=[y];Z=[z]'>JMP</a>)")

code/game/machinery/atmoalter/pump.dm

@@ -61,6 +61,7 @@
 
 	target_pressure = rand(0,1300)
 	update_icon()
+	SSvueui.check_uis_for_change(src)
 
 	..(severity)
 
@@ -111,6 +112,7 @@
 			update_icon()
 
 	src.updateDialog()
+	SSvueui.check_uis_for_change(src)
 
 /obj/machinery/portable_atmospherics/powered/pump/return_air()
 	return air_contents
@@ -127,8 +129,8 @@
 /obj/machinery/portable_atmospherics/powered/pump/attack_hand(var/mob/user)
 	ui_interact(user)
 
-/obj/machinery/portable_atmospherics/powered/pump/ui_interact(mob/user, ui_key = "rcon", datum/nanoui/ui=null, force_open=1)
-	var/list/data[0]
+/obj/machinery/portable_atmospherics/powered/pump/vueui_data_change(list/data, mob/user, datum/vueui/ui)
+	data = ..() || list()
 	data["portConnected"] = connected_port ? 1 : 0
 	data["tankPressure"] = round(air_contents.return_pressure() > 0 ? air_contents.return_pressure() : 0)
 	data["targetpressure"] = round(target_pressure)
@@ -143,13 +145,13 @@
 	data["hasHoldingTank"] = holding ? 1 : 0
 	if (holding)
 		data["holdingTank"] = list("name" = holding.name, "tankPressure" = round(holding.air_contents.return_pressure() > 0 ? holding.air_contents.return_pressure() : 0))
+	return data
 
-	ui = SSnanoui.try_update_ui(user, src, ui_key, ui, data, force_open)
+/obj/machinery/portable_atmospherics/powered/pump/ui_interact(mob/user)
+	var/datum/vueui/ui = SSvueui.get_open_ui(user, src)
 	if (!ui)
-		ui = new(user, src, ui_key, "portpump.tmpl", "Portable Pump", 480, 410, state = physical_state)
-		ui.set_initial_data(data)
+		ui = new(user, src, "machinery-atmospherics-portpump", 480, 410, "Portable Pump")
 		ui.open()
-		ui.set_auto_update(1)
 
 /obj/machinery/portable_atmospherics/powered/pump/Topic(href, href_list)
 	if(..())
@@ -166,10 +168,10 @@
 			holding.forceMove(loc)
 			holding = null
 		. = 1
-	if (href_list["pressure_adj"])
-		var/diff = text2num(href_list["pressure_adj"])
-		target_pressure = min(10*ONE_ATMOSPHERE, max(0, target_pressure+diff))
+	if (href_list["pressure_set"])
+		target_pressure = between(pressuremin, text2num(href_list["pressure_set"]), pressuremax)
 		. = 1
 
 	if(.)
 		update_icon()
+		SSvueui.check_uis_for_change(src)

code/modules/power/apc.dm

@@ -127,7 +127,6 @@
 	var/obj/item/cell/cell
 	var/chargelevel = 0.0005  // Cap for how fast APC cells charge, as a percentage-per-tick (0.01 means cellcharge is capped to 1% per second)
 	var/cellused = 0
-	var/initalchargelevel = 0.0005  // Cap for how fast APC cells charge, as a percentage-per-tick (0.01 means cellcharge is capped to 1% per second)
 	var/start_charge = 90				// initial cell charge %
 	var/cell_type = /obj/item/cell/apc
 	var/opened = COVER_CLOSED
@@ -139,7 +138,7 @@
 	var/infected = FALSE
 	var/operating = TRUE
 	var/charging = CHARGING_OFF
-	var/chargemode = CHARGE_MODE_DISCHARGE
+	var/chargemode = TRUE // whether we're trying to charge
 	var/chargecount = 0
 	var/locked = TRUE
 	var/coverlocked = TRUE
@@ -177,7 +176,7 @@
 	var/emergency_lights = FALSE
 
 	var/time = 0
-	var/charge_mode = CHARGE_MODE_CHARGE
+	var/charge_mode = CHARGE_MODE_CHARGE // if we're actually able to charge
 	var/last_time = 1
 
 /obj/machinery/power/apc/updateDialog()
@@ -537,6 +536,7 @@
 				//to_chat(user, "You remove the power cell.")
 				charging = CHARGING_OFF
 				update_icon()
+				SSvueui.check_uis_for_change(src)
 				return
 	else if	(istype(W, /obj/item/cell) && opened != COVER_CLOSED)	// trying to put a cell inside
 		if(cell)
@@ -556,6 +556,7 @@
 			SPAN_NOTICE("You insert \the [cell]."))
 		chargecount = 0
 		update_icon()
+		SSvueui.check_uis_for_change(src)
 	else if	(W.isscrewdriver())	// haxing
 		if(opened != COVER_CLOSED)
 			if (cell)
@@ -587,7 +588,7 @@
 		else if(opened != COVER_CLOSED)
 			to_chat(user, "You must close the cover to swipe an ID card.")
 		else if(wiresexposed)
-			to_chat(user, "You must close the panel")
+			to_chat(user, "You must close the wiring panel to swipe an ID card.")
 		else if(stat & (BROKEN|MAINT))
 			to_chat(user, "Nothing happens.")
 		else if(hacker)
@@ -596,6 +597,7 @@
 			if(allowed(usr) && !isWireCut(APC_WIRE_IDSCAN))
 				locked = !locked
 				to_chat(user, "You [ locked ? "lock" : "unlock"] the APC interface.")
+				SSvueui.check_uis_for_change(src)
 				update_icon()
 			else
 				to_chat(user, SPAN_WARNING("Access denied."))
@@ -730,6 +732,7 @@
 							emagged = FALSE
 						if(infected)
 							infected = FALSE
+						SSvueui.check_uis_for_change(src)
 			else
 				to_chat(user, SPAN_NOTICE("There has been a connection issue."))
 				return
@@ -789,6 +792,7 @@
 			to_chat(user, SPAN_NOTICE("You hack the charging slot. The next IPC that charges from this APC will be hacked and slaved to you."))
 			infected = TRUE
 			hacker = user
+			SSvueui.check_uis_for_change(src)
 	if(!(emagged || hacker))		// trying to unlock with an emag card
 		if(opened != COVER_CLOSED)
 			to_chat(user, "You must close the cover to swipe an ID card.")
@@ -804,6 +808,7 @@
 					locked = FALSE
 					to_chat(user, SPAN_NOTICE("You hack the APC interface open."))
 					update_icon()
+					SSvueui.check_uis_for_change(src)
 				else
 					to_chat(user, SPAN_WARNING("You fail to [ locked ? "unlock" : "lock"] the APC interface."))
 				return TRUE
@@ -887,6 +892,7 @@
 								 SPAN_NOTICE("You remove the power cell."))
 			charging = CHARGING_ON
 			update_icon()
+			SSvueui.check_uis_for_change(src)
 		return
 	if(stat & (BROKEN|MAINT))
 		return
@@ -902,67 +908,49 @@
 
 	return ui_interact(user)
 
-/obj/machinery/power/apc/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)
-	if(!user)
-		return
+/obj/machinery/power/apc/vueui_data_change(list/data, mob/user, datum/vueui/ui)
+	var/list/monitordata = ..()
+	data = list()
+	if(monitordata)
+		data = monitordata
 	var/isAdmin = isobserver(user) && check_rights(R_ADMIN, FALSE, user)
-	var/list/data = list(
-		"locked" = (locked && !emagged) ? TRUE : FALSE,
-		"isOperating" = operating,
-		"externalPower" = main_status,
-		"powerCellStatus" = cell ? cell.percent() : null,
-		"chargeMode" = chargemode,
-		"lightingMode" = night_mode,
-		"chargingStatus" = charging,
-		"totalLoad" = round(lastused_total),
-		"totalCharging" = round(lastused_charging),
-		"coverLocked" = coverlocked,
-		"failTime" = failure_timer * 2,
-		"siliconUser" = isAdmin || issilicon(user),
-		"emergencyMode" = !emergency_lights,
-		"time" = time,
-		"charge_mode" = charge_mode,
-
-		"powerChannels" = list(
-			list(
-				"title" = "Equipment",
-				"powerLoad" = lastused_equip,
-				"status" = equipment,
-				"topicParams" = list(
-					"auto" = list("eqp" = 3),
-					"on"   = list("eqp" = 2),
-					"off"  = list("eqp" = 1)
-				)
-			),
-			list(
-				"title" = "Lighting",
-				"powerLoad" = round(lastused_light),
-				"status" = lighting,
-				"topicParams" = list(
-					"auto" = list("lgt" = 3),
-					"on"   = list("lgt" = 2),
-					"off"  = list("lgt" = 1)
-				)
-			),
-			list(
-				"title" = "Environment",
-				"powerLoad" = round(lastused_environ),
-				"status" = environ,
-				"topicParams" = list(
-					"auto" = list("env" = 3),
-					"on"   = list("env" = 2),
-					"off"  = list("env" = 1)
-				)
-			)
+	data["locked"] = (locked && !emagged)
+	data["powerCellStatus"] = cell?.percent()
+	data["failTime"] = failure_timer * 2
+	data["siliconUser"] = isAdmin || issilicon(user)
+	data["totalLoad"] = round(lastused_total)
+	data["totalCharging"] = round(lastused_charging)
+	data["isOperating"] = operating
+	data["chargeMode"] = chargemode
+	data["externalPower"] = main_status
+	data["lightingMode"] = night_mode
+	data["chargingStatus"] = charging
+	data["coverLocked"] = coverlocked
+	data["emergencyMode"] = !emergency_lights
+	data["time"] = time
+	data["charge_mode"] = charge_mode
+	data["powerChannels"] = list(\
+		"Equipment" = list(\
+			"powerLoad" = lastused_equip,\
+			"status" = equipment
+		),
+		"Lighting" = list(
+			"powerLoad" = round(lastused_light),
+			"status" = lighting
+		),
+		"Environment" = list(
+			"powerLoad" = round(lastused_environ),
+			"status" = environ
 		)
 	)
+	return data
 
-	ui = SSnanoui.try_update_ui(user, src, ui_key, ui, data, force_open)
+/obj/machinery/power/apc/ui_interact(mob/user)
+	var/datum/vueui/ui = SSvueui.get_open_ui(user, src)
 	if (!ui)
-		ui = new(user, src, ui_key, "apc.tmpl", "[area.name] - APC", 665, data["siliconUser"] ? 540 : 480)
-		ui.set_initial_data(data)
+		ui = new(user, src, "machinery-power-apc", 665, (isobserver(user) && check_rights(R_ADMIN, FALSE, user) || issilicon(user)) ? 540 : 480, "[area.name] - APC")
 		ui.open()
-		ui.set_auto_update(TRUE)
+		ui.auto_update_content = TRUE
 
 /obj/machinery/power/apc/proc/report()
 	return "[area.name] : [equipment]/[lighting]/[environ] ([lastused_equip+lastused_light+lastused_environ]) : [cell? cell.percent() : "N/C"] ([charging])"
@@ -977,6 +965,7 @@
 		area.power_equip = FALSE
 		area.power_environ = FALSE
 	area.power_change()
+	SSvueui.check_uis_for_change(src)
 
 /obj/machinery/power/apc/proc/isWireCut(var/wireIndex)
 	return wires.IsIndexCut(wireIndex)
@@ -984,15 +973,14 @@
 /obj/machinery/power/apc/proc/can_use(mob/user, var/loud = 0) //used by attack_hand() and Topic()
 	if(inoperable())
 		return FALSE
+	var/use_flags = issilicon(user) && USE_ALLOW_NON_ADJACENT // AIs and borgs can use it at range
+	use_flags |= (check_rights(R_ADMIN, FALSE, user) && USE_ALLOW_NONLIVING) // admins can use the UI when ghosting
+	if(use_check(user, use_flags, show_messages = TRUE))
+		return FALSE
 	if(isobserver(user))
-		return check_rights(R_ADMIN, FALSE, user) // admins can use the UI when ghosting
-	if(user.stat)
-		to_chat(user, SPAN_WARNING("You must be conscious to use [src]!"))
-		return FALSE
+		return check_rights(R_ADMIN, FALSE, user)
 	if(!user.client)
 		return FALSE
-	if(!user.IsAdvancedToolUser())
-		return FALSE
 	if(user.restrained())
 		to_chat(user, SPAN_WARNING("You must have free hands to use [src]."))
 		return FALSE
@@ -1002,20 +990,13 @@
 
 	if (issilicon(user))
 		var/permit = FALSE // Malfunction variable. If AI hacks APC it can control it even without AI control wire.
-		var/mob/living/silicon/ai/AI = user
 		var/mob/living/silicon/robot/robot = user
-		if(hacker)
-			if(hacker == AI)
-				permit = TRUE
-			else if(istype(robot) && robot.connected_ai && robot.connected_ai == hacker) // Cyborgs can use APCs hacked by their AI
-				permit = TRUE
+		if(hacker == user || hacker == robot.connected_ai) // Cyborgs can use APCs hacked by their AI
+			permit = TRUE
 
 		if(aidisabled && !permit)
 			if(!loud)
-				to_chat(user, SPAN_DANGER("\The [src] have AI control disabled!"))
-			return FALSE
-	else
-		if (!in_range(src, user) || !isturf(loc))
+				to_chat(user, SPAN_DANGER("[src] has AI control disabled!"))
 			return FALSE
 
 	var/mob/living/carbon/human/H = user
@@ -1031,30 +1012,31 @@
 
 /obj/machinery/power/apc/Topic(href, href_list)
 	if(..())
-		return TRUE
+		return TOPIC_NOACTION
 
 	if(!can_use(usr, 1))
-		return TRUE
+		return TOPIC_NOACTION
 
 	if (href_list["lmode"])
 		toggle_nightlight(href_list["lmode"])
 		update_icon()
-		return TRUE
+		SSvueui.check_uis_for_change(src)
+		return TOPIC_REFRESH
 
 	var/isAdmin = isobserver(usr) && check_rights(R_ADMIN, FALSE)
 	if(!issilicon(usr) && !isAdmin && locked && !emagged)
 		// Shouldn't happen, this is here to prevent href exploits
 		to_chat(usr, "You must unlock the panel to use this!")
-		return TRUE
+		return TOPIC_NOACTION
 
 	if (href_list["emergency_lights"])
-		emergency_lights = href_list["emergency_lights"] != "off"
+		emergency_lights = !emergency_lights
 		for (var/obj/machinery/light/L in area)
 			if (!initial(L.no_emergency))
 				L.no_emergency = emergency_lights	//If there was an override set on creation, keep that override
 				INVOKE_ASYNC(L, /obj/machinery/light/.proc/update, FALSE)
 			CHECK_TICK
-		return TRUE
+		return TOPIC_REFRESH
 
 	if (href_list["lock"])
 		coverlocked = !coverlocked
@@ -1072,22 +1054,17 @@
 		if(!chargemode)
 			charging = CHARGING_OFF
 			update_icon()
+			SSvueui.check_uis_for_change(src)
 
-	else if (href_list["eqp"])
-		var/val = text2num(href_list["eqp"])
-		equipment = setsubsystem(val)
-		update_icon()
-		update()
-
-	else if (href_list["lgt"])
-		var/val = text2num(href_list["lgt"])
-		lighting = setsubsystem(val)
-		update_icon()
-		update()
-
-	else if (href_list["env"])
-		var/val = text2num(href_list["env"])
-		environ = setsubsystem(val)
+	else if (href_list["set"])
+		var/val = text2num(href_list["set"])
+		switch(href_list["chan"])
+			if("Equipment")
+				equipment = setsubsystem(val)
+			if("Lighting")
+				lighting = setsubsystem(val)
+			if("Environment")
+				environ = setsubsystem(val)
 		update_icon()
 		update()
 
@@ -1102,8 +1079,10 @@
 			else
 				locked = !locked
 				update_icon()
+				SSvueui.check_uis_for_change(src)
 
-	return FALSE
+	SSvueui.check_uis_for_change(src)
+	return TOPIC_REFRESH
 
 /obj/machinery/power/apc/proc/toggle_breaker()
 	operating = !operating
@@ -1184,14 +1163,14 @@
 		// draw power from cell as before to power the area
 		cellused = min(cell.charge, CELLRATE * lastused_total)	// clamp deduction to a max, amount left in cell
 		cell.use(cellused)
-
+		var/draw = 0
 		if(excess > lastused_total)		// if power excess recharge the cell
 										// by the same amount just used
-			var/draw = draw_power(cellused/CELLRATE) // draw the power needed to charge this cell
+			draw = draw_power(cellused/CELLRATE) // draw the power needed to charge this cell
 			cell.give(draw * CELLRATE)
 		else		// no excess, and not enough per-apc
 			if( (cell.charge/CELLRATE + excess) >= lastused_total)		// can we draw enough from cell+grid to cover last usage?
-				var/draw = draw_power(excess)
+				draw = draw_power(excess)
 				cell.charge = min(cell.maxcharge, cell.charge + CELLRATE * draw)	//recharge with what we can
 				charging = CHARGING_OFF
 			else	// not enough power available to run the last tick!
@@ -1215,8 +1194,8 @@
 
 				ch = draw_power(ch/CELLRATE) // Removes the power we're taking from the grid
 				cell.give(ch*CELLRATE) // actually recharge the cell
-				lastused_charging = ch
-				lastused_total += ch // Sensors need this to stop reporting APC charging as "Other" load
+				lastused_charging = ch + draw
+				lastused_total += ch + draw // Sensors need this to stop reporting APC charging as "Other" load
 			else
 				charging = CHARGING_OFF		// stop charging
 				chargecount = 0
@@ -1239,7 +1218,7 @@
 					charging = CHARGING_ON
 
 		else // chargemode off
-			charging = CHARGING_ON
+			charging = CHARGING_OFF
 			chargecount = 0
 
 	else // no cell, switch everything off
@@ -1423,12 +1402,12 @@
 
 /obj/machinery/power/apc/proc/update_time()
 
-	var/delta_power = (lastused_charging) ? (-lastused_charging) : (lastused_total)
-	delta_power *= 0.0005
+	var/delta_power = (lastused_charging * 2) - lastused_total
+	delta_power *= CELLRATE
 
-	var/goal = (delta_power > 0) ? (cell.charge) : (cell.maxcharge - cell.charge)
-
-	var/time_secs = (delta_power) ? ((goal / abs(delta_power)) / (round(world.time - last_time) / 10)) : (0)
+	var/goal = (delta_power < 0) ? (cell.charge) : (cell.maxcharge - cell.charge)
+	time = world.time + (delta_power ? ((goal / abs(delta_power)) * (world.time - last_time)) : 0)
+	// If it is negative - we are discharging
 	if(delta_power < 0)
 		charge_mode = CHARGE_MODE_DISCHARGE
 	else if(delta_power > 0)
@@ -1436,7 +1415,6 @@
 	else
 		charge_mode = CHARGE_MODE_STABLE
 	last_time = world.time
-	time = ((time_secs / 3600) > 1) ? ("[round(time_secs / 3600)] hours, [round((time_secs % 3600) / 60)] minutes") : ("[round(time_secs / 60)] minutes, [round(time_secs % 60)] seconds")
 
 #undef UPDATE_CELL_IN
 #undef UPDATE_OPENED1

code/modules/power/smes.dm

@@ -201,8 +201,7 @@
 	delta_power *= SMESRATE
 
 	var/goal = (delta_power < 0) ? (charge) : (capacity - charge)
-
-	var/time_secs = (delta_power) ? ((goal / abs(delta_power)) * (round(world.time - last_time) / 10)) : (0)
+	time = world.time + (delta_power ? ((goal / abs(delta_power)) * (world.time - last_time)) : 0)
 	// If it is negative - we are discharging
 	if(delta_power < 0)
 		charge_mode = 0
@@ -211,7 +210,6 @@
 	else
 		charge_mode = 2
 	last_time = world.time
-	time = ((time_secs / 3600) > 1) ? ("[round(time_secs / 3600)] hours, [round((time_secs % 3600) / 60)] minutes") : ("[round(time_secs / 60)] minutes, [round(time_secs % 60)] seconds")
 
 /obj/machinery/power/smes/machinery_process()
 	if(!can_function())
@@ -252,6 +250,8 @@
 	else
 		outputting = 0
 
+	SSvueui.check_uis_for_change(src)
+
 // called after all power processes are finished
 // restores charge level to smes if there was excess this ptick
 /obj/machinery/power/smes/proc/restore(var/percent_load)
@@ -277,6 +277,7 @@
 
 	if(clev != chargedisplay() ) //if needed updates the icons overlay
 		update_icon()
+	SSvueui.check_uis_for_change(src)
 	return
 
 //Will return 1 on failure
@@ -393,7 +394,32 @@
 		return 0
 	return 1
 
-/obj/machinery/power/smes/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)
+/obj/machinery/power/smes/vueui_data_change(list/data, mob/user, datum/vueui/ui)
+	// this is the data that will be sent to the ui
+	data = list()
+	var/list/monitordata = ..()
+	if(monitordata)
+		data = monitordata
+	data["nameTag"] = name_tag
+	data["chargeTaken"] = round(input_taken)
+	data["charging"] = inputting
+	data["chargeAttempt"] = input_attempt
+	data["chargeLevel"] = input_level
+	data["chargeMax"] = input_level_max
+	data["outputLoad"] = round(output_used)
+	data["outputting"] = outputting
+	data["outputOnline"] = output_attempt
+	data["outputLevel"] = output_level
+	data["outputMax"] = output_level_max
+	data["time"] = time
+	data["chargeMode"] = charge_mode
+	data["storedCapacity"] = 0
+	if(capacity)
+		data["storedCapacity"] = round(100.0*charge/capacity, 0.1)
+	data["failTime"] = failure_timer * 2
+	return data
+
+/obj/machinery/power/smes/ui_interact(mob/user)
 	if(!can_function())
 		if(!terminal)
 			to_chat(user, SPAN_WARNING("\The [src] is lacking a terminal!"))
@@ -401,41 +427,13 @@
 		if(is_badly_damaged())
 			to_chat(user, SPAN_WARNING("\The [src] is too damaged to function!"))
 		return
-
-	// this is the data which will be sent to the ui
-	var/data[0]
-	data["nameTag"] = name_tag
-	if(capacity)
-		data["storedCapacity"] = round(100.0*charge/capacity, 0.1)
-	else
-		data["storedCapacity"] = 0
-	data["charging"] = inputting
-	data["chargeMode"] = input_attempt
-	data["chargeLevel"] = input_level
-	data["chargeMax"] = input_level_max
-	data["charge_taken"] = round(input_taken)
-	data["outputOnline"] = output_attempt
-	data["outputLevel"] = output_level
-	data["outputMax"] = output_level_max
-	data["outputLoad"] = round(output_used)
-	data["failTime"] = failure_timer * 2
-	data["outputting"] = outputting
-	data["time"] = time
-	data["charge_mode"] = charge_mode
-
-
 	// update the ui if it exists, returns null if no ui is passed/found
-	ui = SSnanoui.try_update_ui(user, src, ui_key, ui, data, force_open)
+	var/datum/vueui/ui = SSvueui.get_open_ui(user, src)
 	if (!ui)
 		// the ui does not exist, so we'll create a new() one
-        // for a list of parameters and their descriptions see the code docs in \code\modules\nano\nanoui.dm
-		ui = new(user, src, ui_key, "smes.tmpl", "SMES Unit", 540, 420)
-		// when the ui is first opened this is the data it will use
-		ui.set_initial_data(data)
+		ui = new(user, src, "machinery-power-smes", 540, 420, "SMES Unit")
 		// open the new ui window
 		ui.open()
-		// auto update every Master Controller tick
-		ui.set_auto_update(1)
 
 /obj/machinery/power/smes/proc/Percentage()
 	return round(100.0*charge/capacity, 0.1)
@@ -447,7 +445,6 @@
 	if( href_list["cmode"] )
 		inputting(!input_attempt)
 		update_icon()
-
 	else if( href_list["online"] )
 		outputting(!output_attempt)
 		update_icon()
@@ -455,27 +452,11 @@
 		failure_timer = 0
 		update_icon()
 	else if( href_list["input"] )
-		switch( href_list["input"] )
-			if("min")
-				input_level = 0
-			if("max")
-				input_level = input_level_max
-			if("set")
-				input_level = input(usr, "Enter new input level (0-[input_level_max])", "SMES Input Power Control", input_level) as num
-		input_level = max(0, min(input_level_max, input_level))	// clamp to range
-
+		input_level = clamp(href_list["input"], 0, input_level_max)	// clamp to range
 	else if( href_list["output"] )
-		switch( href_list["output"] )
-			if("min")
-				output_level = 0
-			if("max")
-				output_level = output_level_max
-			if("set")
-				output_level = input(usr, "Enter new output level (0-[output_level_max])", "SMES Output Power Control", output_level) as num
-		output_level = max(0, min(output_level_max, output_level))	// clamp to range
-
+		output_level = clamp(href_list["output"], 0, output_level_max)	// clamp to range
 	investigate_log("input/output; <font color='[input_level>output_level?"green":"red"][input_level]/[output_level]</font> | Output-mode: [output_attempt?"<font color='green'>on</font>":"<span class='warning'>off</span>"] | Input-mode: [input_attempt?"<font color='green'>auto</font>":"<span class='warning'>off</span>"] by [usr.key]","singulo")
-
+	SSvueui.check_uis_for_change(src)
 	return 1
 
 /obj/machinery/power/smes/proc/energy_fail(var/duration)

code/modules/supermatter/supermatter.dm

@@ -352,29 +352,23 @@
 	Consume(user)
 
 // This is purely informational UI that may be accessed by AIs or robots
-/obj/machinery/power/supermatter/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)
-	var/data[0]
-
+/obj/machinery/power/supermatter/vueui_data_change(list/data, mob/user, datum/vueui/ui)
+	data = ..() || list()
 	data["integrity_percentage"] = round(get_integrity())
 	var/datum/gas_mixture/env = null
 	if(!istype(src.loc, /turf/space))
 		env = src.loc.return_air()
-
-	if(!env)
-		data["ambient_temp"] = 0
-		data["ambient_pressure"] = 0
-	else
-		data["ambient_temp"] = round(env.temperature)
-		data["ambient_pressure"] = round(env.return_pressure())
+	data["ambient_temp"] = round(env?.temperature)
+	data["ambient_pressure"] = round(env?.return_pressure())
 	data["detonating"] = grav_pulling
+	return data
 
-	ui = SSnanoui.try_update_ui(user, src, ui_key, ui, data, force_open)
+/obj/machinery/power/supermatter/ui_interact(mob/user)
+	var/datum/vueui/ui = SSvueui.get_open_ui(user, src)
 	if (!ui)
-		ui = new(user, src, ui_key, "supermatter_crystal.tmpl", "Supermatter Crystal", 500, 300)
-		ui.set_initial_data(data)
+		ui = new(user, src, "machinery-power-supermattercrystal", 500, 300, "Supermatter Crystal", state = interactive_state)
+		ui.auto_update_content = TRUE
 		ui.open()
-		ui.set_auto_update(1)
-
 
 /*
 /obj/machinery/power/supermatter/proc/transfer_energy()

code/modules/vueui/var_monitor.dm

@@ -63,4 +63,4 @@
 // Transform functions.
 // Do not override.
 /datum/vueui_var_monitor/proc/transform_to_boolean(invert, source, current)
-	return !!source ^ invert
+	return !!source ^ invert

html/changelogs/mdp-vue-power.yml

@@ -0,0 +1,46 @@
+################################
+# Example Changelog File
+#
+# Note: This file, and files beginning with ".", and files that don't end in ".yml" will not be read. If you change this file, you will look really dumb.
+#
+# Your changelog will be merged with a master changelog. (New stuff added only, and only on the date entry for the day it was merged.)
+# When it is, any changes listed below will disappear.
+#
+# Valid Prefixes:
+#   bugfix
+#   wip (For works in progress)
+#   tweak
+#   soundadd
+#   sounddel
+#   rscadd (general adding of nice things)
+#   rscdel (general deleting of nice things)
+#   imageadd
+#   imagedel
+#   maptweak
+#   spellcheck (typo fixes)
+#   experiment
+#   balance
+#   admin
+#   backend
+#   security
+#   refactor
+#################################
+
+# Your name.
+author: MoondancerPony
+
+# Optional: Remove this file after generating master changelog.  Useful for PR changelogs that won't get used again.
+delete-after: True
+
+# Any changes you've made.  See valid prefix list above.
+# INDENT WITH TWO SPACES.  NOT TABS.  SPACES.
+# SCREW THIS UP AND IT WON'T WORK.
+# Also, all entries are changed into a single [] after a master changelog generation. Just remove the brackets when you add new entries.
+# Please surround your changes in  double quotes ("), as certain characters otherwise screws up compiling. The quotes will not show up in the changelog.
+changes:
+  - refactor: "Vue-ifies portable air pumps, APCs, SMES units, and the AI/admin Supermatter Crystal monitor. A lot of them have been spruced up as well!"
+  - backend: "Adds an optional min/max button to VueUI numeric inputs."
+  - tweak: "Fixes some missing formatting for VueUI progress bars."
+  - tweak: "FontAwesome icons in VueUI windows are now fixed-width. Thanks for pointing out the issue, Geeves!"
+  - tweak: "VueUI group-item elements now have their labels top-aligned."
+  - tweak: "VueUI windows now have a transparent background box to provide more visual contrast. This might cause issues with window sizes; please report them if encountered so the default sizes can be adjusted."

nano/templates/apc.tmpl

@@ -1,231 +0,0 @@
-{{if data.failTime}}
-<div class='notice'>
-	<b><h3>SYSTEM FAILURE</h3></b>
-	<i>I/O regulators malfunction detected! Waiting for system reboot...</i><br>
-	Automatic reboot in {{:data.failTime}} seconds...
-	{{:helper.link('Reboot Now', 'refresh', {'reboot' : 1})}}<br><br><br>
-</div>
-{{else}}
-<div class='notice'>
-	{{if data.siliconUser}}
-		<div class="itemContentSmall">
-			Interface Lock:
-		</div>
-		<div class="itemContentFull">
-			{{:helper.link('Engaged', 'locked', {'toggleaccess' : 1}, data.locked ? 'selected' : null)}}{{:helper.link('Disengaged', 'unlocked', {'toggleaccess' : 1}, data.malfStatus >= 2 ? 'linkOff' : (data.locked ? null : 'selected'))}}
-		</div>
-		<div class="clearBoth"></div>
-	{{else}}
-		{{if data.locked}}
-			Swipe an ID card to unlock this interface
-		{{else}}
-			Swipe an ID card to lock this interface
-		{{/if}}
-	{{/if}}
-</div>
-
-<div style="min-width: 480px">
-
-	<h3>Power Status</h3>
-
-	<div class="item">
-		<div class="itemLabel">
-			Main Breaker:
-		</div>
-		<div class="itemContent">
-			{{if data.locked && !data.siliconUser}}
-				{{if data.isOperating}}
-					<span class='good'>On</span>
-				{{else}}
-					<span class='bad'>Off</span>
-				{{/if}}
-			{{else}}
-				{{:helper.link('On', 'power', {'breaker' : 1}, data.isOperating ? 'selected' : null)}}{{:helper.link('Off', 'close', {'breaker' : 1}, data.isOperating ? null : 'selected')}}
-			{{/if}}
-		</div>
-	</div>
-
-	<div class="item">
-		<div class="itemLabel">
-			External Power:
-		</div>
-		<div class="itemContent">
-			{{if data.externalPower == 2}}
-				<span class='good'>Good</span>
-			{{else data.externalPower == 1}}
-				<span class='average'>Low</span>
-			{{else}}
-				<span class='bad'>None</span>
-			{{/if}}
-		</div>
-	</div>
-
-	<div class="item">
-		<div class="itemLabel">
-			Power Cell:
-		</div>
-		{{if data.powerCellStatus == null}}
-			<div class="itemContent bad">		
-				Power cell removed.
-			</div>
-		{{else}}
-			
-			{{:helper.displayBar(data.powerCellStatus, 0, 100, (data.powerCellStatus >= 50) ? 'good' : (data.powerCellStatus >= 25) ? 'average' : 'bad')}}
-			<div class="itemContent" style="width: 60px">		
-				{{:helper.round(data.powerCellStatus*10)/10}}%
-			</div>	
-		{{/if}}
-	</div>
-
-	<div class="item">
-		<div class="itemLabel">
-			Power Cell charge status:
-		</div>
-		<div class="itemContent">
-			<div class="statusValue">
-			{{if data.charge_mode == 1}}
-				APC's power cell will be fully charged in {{:data.time}}
-			{{else data.charge_mode == 2}}
-				APC's power cell input and output are equal
-			{{else}}
-				APC's power cell will run out of charge in {{:data.time}}
-			{{/if}}
-				
-			</div>
-		</div>
-	</div>
-
-	{{if data.powerCellStatus != null}}
-		<div class="item">
-			<div class="itemLabel">
-				Charge Mode:
-			</div>
-			<div class="itemContent">
-				{{if data.locked && !data.siliconUser}}
-					{{if data.chargeMode}}
-						<span class='good'>Auto</span>
-					{{else}}
-						<span class='bad'>Off</span>
-					{{/if}}				
-				{{else}}
-					{{:helper.link('Auto', 'refresh', {'cmode' : 1}, data.chargeMode ? 'selected' : null)}}{{:helper.link('Off', 'close', {'cmode' : 1}, data.chargeMode ? null : 'selected')}}
-				{{/if}}
-				&nbsp;
-				{{if data.chargingStatus > 1}}
-					[<span class='good'>Fully Charged</span>]
-				{{else data.chargingStatus == 1}}
-					[<span class='average'>Charging</span>]
-				{{else}}
-					[<span class='bad'>Not Charging</span>]
-				{{/if}}
-			</div>
-		</div>
-	{{/if}}
-	<div class="item">
-		<div class="itemLabel">
-			Night Lighting:
-		</div>
-		<div class="itemContent"; style="width: 105px">
-			{{:helper.link('On', 'night', {'lmode' : 'on'}, data.lightingMode ? 'selected' : null)}}{{:helper.link('Off', 'close', {'lmode' : 'off'}, data.lightingMode ? null : 'selected')}}
-		</div>
-	</div>
-	<div class="item">
-		<div class="itemLabel">
-			Emergency Lighting:
-		</div>
-		<div class="itemContent"; style="width: 105px">
-		{{if data.locked && !data.siliconUser}}
-				{{if data.emergencyMode}}
-					On
-				{{else}}
-					Off
-				{{/if}}
-			</div>
-		{{else}}
-			{{:helper.link(data.emergencyMode ? 'On' : 'Off', 'lightbulb', {'emergency_lights' : data.emergencyMode ? 'on' : 'off'}, null)}}
-			{{/if}}
-		</div>
-	</div>
-
-	<h3>Power Channels</h3>
-
-	{{for data.powerChannels}}
-		<div class="item">
-			<div class="itemLabel">
-				{{:value.title}}:
-			</div>
-			<div class="itemContent" style="width: 70px; text-align: right">
-				{{:value.powerLoad}}&nbsp;W
-			</div>
-			<div class="itemContent" style="width: 105px">
-				&nbsp;&nbsp;
-				{{if value.status <= 1}}
-					<span class='bad'>Off</span>
-				{{else value.status >= 2}}
-					<span class='good'>On</span>
-				{{/if}}
-				{{if data.locked}}
-					{{if value.status == 1 || value.status == 3}}
-						&nbsp;&nbsp;Auto
-					{{else}}
-						&nbsp;&nbsp;Manual
-					{{/if}}		
-				{{/if}}
-			</div>
-			{{if !data.locked || data.siliconUser}}
-				<div class="itemContentFull">
-					{{:helper.link('Auto', 'refresh', value.topicParams.auto, (value.status == 1 || value.status == 3) ? 'selected' : null)}}
-					{{:helper.link('On', 'power', value.topicParams.on, (value.status == 2) ? 'selected' : null)}}
-					{{:helper.link('Off', 'close', value.topicParams.off, (value.status == 0) ? 'selected' : null)}}
-				</div>
-			{{/if}}
-		</div>
-	{{/for}}
-
-	<div class="item" style="font-weight: bold">
-		<div class="itemLabel">
-			Total Load:
-		</div>
-		<div class="itemContent">
-			{{if data.totalCharging}}
-				{{:data.totalLoad}}W (+ {{:data.totalCharging}}W Charging)
-			{{else}}
-				{{:data.totalLoad}}W
-			{{/if}}
-		</div>
-	</div>
-
-	<div class="item">&nbsp;</div>
-
-	<div class="item">
-		<div class="itemLabel">
-			Cover Lock:
-		</div>
-		<div class="itemContent">
-			{{if data.locked && !data.siliconUser}}
-				{{if data.coverLocked}}
-					<span class='good'>Engaged</span>
-				{{else}}
-					<span class='bad'>Disengaged</span>
-				{{/if}}
-			{{else}}
-				{{:helper.link('Engaged', 'locked', {'lock' : 1}, data.coverLocked ? 'selected' : null)}}{{:helper.link('Disengaged', 'unlocked', {'lock' : 1}, data.coverLocked ? null : 'selected')}}
-			{{/if}}
-		</div>
-	</div>
-
-	{{if data.siliconUser}}
-		<h3>System Overrides</h3>
-
-		<div class="item">
-			{{:helper.link('Overload Lighting Circuit', 'lightbulb', {'overload' : 1})}}
-			{{if data.malfStatus == 1}}
-				{{:helper.link('Override Programming', 'script', {'malfhack' : 1})}}
-			{{else data.malfStatus > 1}}
-				<div class='notice'>APC Hacked</div>
-			{{/if}}
-		</div>
-	{{/if}}
-
-</div>
-{{/if}}

nano/templates/smes.tmpl

@@ -1,128 +0,0 @@
-{{if data.failTime}}
-<div class='notice'>
-	<b><h3>SYSTEM FAILURE</h3></b>
-	<i>I/O regulators malfunction detected! Waiting for system reboot...</i><br>
-	Automatic reboot in {{:data.failTime}} seconds...
-	{{:helper.link('Reboot Now', 'refresh', {'reboot' : 1})}}<br><br><br>
-</div>
-{{else}}
-<div class="item">
-	<div class="itemLabel">
-		Stored Capacity:
-	</div>
-	<div class="itemContent">
-		{{:helper.displayBar(data.storedCapacity, 0, 100, data.charging ? 'good' : 'average')}}
-		<div class="statusValue">
-			{{:helper.round(data.storedCapacity)}}%
-		</div>
-	</div>
-</div>
-
-<div class="item">
-	<div class="itemLabel">
-		Charge status:
-	</div>
-	<div class="itemContent">
-		<div class="statusValue">
-		{{if data.charge_mode == 1}}
-			SMES will be fully charged in {{:data.time}}
-		{{else data.charge_mode == 2}}
-			SMES input and output are equal
-		{{else}}
-			SMES will run out of charge in {{:data.time}}
-		{{/if}}
-			
-		</div>
-	</div>
-</div>
-
-<h3>Input Management</h3>
-<div class="item">
-	<div class="itemLabel">
-		Charge Mode:
-	</div>
-	<div class="itemContent">
-		{{:helper.link('Auto', 'refresh', {'cmode' : 1}, data.chargeMode ? 'selected' : null)}}{{:helper.link('Off', 'close', {'cmode' : 1}, data.chargeMode ? null : 'selected')}}
-		&nbsp;
-		{{if data.charging == 2}}
-			[<span class='good'>Charging</span>]
-		{{else data.charging == 1}}
-			[<span class='average'>Partially Charging</span>]
-		{{else}}
-			[<span class='bad'>Not Charging</span>]
-		{{/if}}
-	</div>
-</div>
-
-<div class="item">
-	<div class="itemLabel">
-		Input Level:
-	</div>
-	<div class="itemContent">
-		{{:helper.displayBar(data.chargeLevel, 0, data.chargeMax)}}
-		<div style="clear: both; padding-top: 4px;">
-			{{:helper.link('MIN', null, {'input' : 'min'}, (data.chargeLevel > 0) ? null : 'disabled')}}
-			{{:helper.link('SET', null, {'input' : 'set'}, null)}}			
-			{{:helper.link('MAX', null, {'input' : 'max'}, (data.chargeLevel < data.chargeMax) ? null : 'disabled')}}
-			<div style="float: left; width: 100px; text-align: center;">&nbsp;{{:data.chargeLevel}} W&nbsp;</div>
-		</div>
-</div>
-
-<div class="item">
-	<div class="itemLabel">
-		Input Load:
-	</div>
-	<div class="itemContent">
-		{{:helper.displayBar(data.charge_taken, 0, data.chargeMax, (data.charge_taken < data.chargeLevel) ? 'average' : 'good')}}
-		<div class="statusValue">
-			{{:data.charge_taken}} W
-		</div>
-	</div>
-</div>
-
-<h3>Output Management</h3>
-<div class="item">
-	<div class="itemLabel">
-		Output Status:
-	</div>
-	<div class="itemContent">
-		{{:helper.link('Online', 'power', {'online' : 1}, data.outputOnline ? 'selected' : null)}}{{:helper.link('Offline', 'close', {'online' : 1}, data.outputOnline ? null : 'selected')}}
-		&nbsp;
-		{{if data.outputting == 2}}
-			[<span class='good'>Outputting</span>]
-		{{else data.outputting == 1}}
-			[<span class='average'>Disconnected or No Charge</span>]
-		{{else}}
-			[<span class='bad'>Not Outputting</span>]
-		{{/if}}
-	</div>
-</div>
-
-<div class="item">
-	<div class="itemLabel">
-		Output Level:
-	</div>
-	<div class="itemContent">
-		{{:helper.displayBar(data.outputLevel, 0, data.outputMax)}}
-		<div style="clear: both; padding-top: 4px;">
-			{{:helper.link('MIN', null, {'output' : 'min'}, (data.outputLevel > 0) ? null : 'disabled')}}
-			{{:helper.link('SET', null, {'output' : 'set'}, null)}}			
-			{{:helper.link('MAX', null, {'output' : 'max'}, (data.outputLevel < data.outputMax) ? null : 'disabled')}}
-			<div style="float: left; width: 100px; text-align: center;">&nbsp;{{:data.outputLevel}} W&nbsp;</div>			
-		</div>
-	</div>
-</div>
-
-<div class="item">
-	<div class="itemLabel">
-		Output Load:
-	</div>
-	<div class="itemContent">
-		{{:helper.displayBar(data.outputLoad, 0, data.outputMax, (data.outputLoad < data.outputLevel) ? 'good' : 'average')}}
-		<div class="statusValue">
-			{{:data.outputLoad}} W
-		</div>
-	</div>
-</div>
-
-{{/if}}

nano/templates/supermatter_crystal.tmpl

@@ -1,25 +0,0 @@
-{{if data.detonating}}
-	<div class="notice" style="color: #000000;">
-		<h2 style="color: #000000;">CRYSTAL DELAMINATING</h2>
-		<h3 style="color: #000000;">Evacuate area immediately</h3>
-		<div class="clearBoth"></div>
-	</div>
-{{else}}
-	<h3>Crystal Integrity</h3>
-	{{:helper.displayBar(data.integrity_percentage, 0, 100, (data.integrity_percentage >= 90) ? 'good' : (data.integrity_percentage >= 25) ? 'average' : 'bad')}}
-	<b>{{:data.integrity_percentage}} %</b>
-	<h3>Environment</h3>
-	<span class="itemLabel">
-		Temperature:
-	</span>
-	<span class="itemContent">
-		{{:helper.displayBar(data.ambient_temp, 0, 10000, (data.ambient_temp >= 5000) ? 'bad' : (data.ambient_temp >= 4000) ? 'average' : 'good')}}
-		{{:data.ambient_temp}} K
-	</span>
-	<span class="itemLabel">
-		Pressure:
-	</span>
-	<span class="itemContent">
-		{{:data.ambient_pressure}} kPa
-	</span>
-{{/if}}

vueui/src/assets/global.scss

@@ -55,6 +55,9 @@ body.vueui {
 #content > div {
     margin-right: 8px;
     margin-top: 8px;
+    background-image: url(resources/uiTransparent.png);
+    padding: 0.5em;
+    box-sizing: border-box;
 }
 
 .uiTitleWrapper {
@@ -173,6 +176,7 @@ a, .button, button, input[type=submit], input[type=button], input[type=reset], i
     font-weight: bold;
     padding: 3px 4px;
     margin: 4px 0px;
+    box-sizing: border-box;
 }
 
 .displayBar {

vueui/src/assets/icons.scss

@@ -23,6 +23,7 @@ $fa-css-prefix: "ic";
 .uiIcon16 {
     @include fa-icon;
     @extend .fas;
+    @extend .#{$fa-css-prefix}-fw;
     font-size: 12px;
     padding: 2px;
 }
@@ -236,22 +237,22 @@ $fa-css-prefix: "ic";
     "chiefengineer" $fa-var-wrench,
     "researchdirector" $fa-var-lightbulb,
     "chiefmedicalofficer" $fa-var-plus,
-    
+
     /* Engineering Positions */
     "stationengineer" $fa-var-wrench,
     "atmospherictechnician" $fa-var-wrench,
-    
+
     /* Medical Positions */
     "medicaldoctor" $fa-var-plus,
     "psychiatrist" $fa-var-plus,
     "chemist" $fa-var-plus,
-    
+
     /* Science Positions */
     "scientist" $fa-var-lightbulb,
     "geneticist" $fa-var-lightbulb,
     "roboticist" $fa-var-lightbulb,
     "xenobiologist" $fa-var-lightbulb,
-    
+
     /* Security Positions */
     "warden" $fa-var-key,
     "detective" $fa-var-key,
@@ -267,4 +268,4 @@ $fa-css-prefix: "ic";
             }
         }
     }
-}
+}

vueui/src/components/view/machinery/atmospherics/portpump.vue

@@ -0,0 +1,68 @@
+<template>
+  <vui-group>
+    <vui-group-row><h3>Pump Status</h3></vui-group-row>
+    <vui-group-item label="Tank Pressure:">
+      {{tankPressure}} kPa
+    </vui-group-item>
+
+    <vui-group-item label="Port Status:">
+      <span :class="portConnected ? 'good' : 'average'">{{portConnected ? 'Connected' : 'Disconnected'}}</span>
+    </vui-group-item>
+
+    <vui-group-item label="Load:">
+      {{powerDraw}} W
+    </vui-group-item>
+
+    <vui-group-item label="Cell Charge:">
+      <vui-progress :value="cellCharge" :min="0" :max="cellMaxCharge"/>
+    </vui-group-item>
+
+    <vui-group-row><h3>Holding Tank Status</h3></vui-group-row>
+    <vui-group-item v-if="hasHoldingTank" label="Tank Label:">
+      {{holdingTank.name}}&nbsp;<vui-button icon="eject" :params="{'remove_tank': 1}">Eject</vui-button>
+    </vui-group-item>
+    <vui-group-item v-if="hasHoldingTank" label="Tank Pressure:">{{holdingTank.tankPressure}} kPa</vui-group-item>
+    <vui-group-row v-else>
+      <span class="average"><i>No holding tank inserted.</i></span>
+    </vui-group-row>
+
+
+    <vui-group-row><h3>Power Regulator Status</h3></vui-group-row>
+    <vui-group-item label="Target Pressure:">
+      <vui-progress :value="targetpressure" :min="minpressure" :max="maxpressure"/>
+      <div style="float: left; clear: both; padding-top: 4px; text-align: center;">
+        <vui-input-numeric v-model="targetpressure" :min="minpressure" :max="maxpressure" min-button max-button width="4em" :button-count="0" @input="s({pressure_set : targetpressure})"/>
+      </div>
+    </vui-group-item>
+
+    <vui-group-item label="Power Switch:">
+      <vui-button :class="{selected: on}" :icon="on ? 'power-off' : 'times'" :params="{power : 1}">{{on ? 'On' : 'Off'}}</vui-button>
+    </vui-group-item>
+
+    <vui-group-item label="Pump Direction:">
+      <vui-button icon="share" :flip="pump_dir ? 'horizontal' : ''" :params="{direction : 1}">{{pump_dir ? 'Out' : 'In'}}</vui-button>
+    </vui-group-item>
+  </vui-group>
+</template>
+
+<script>
+import Utils from "../../../../utils.js";
+export default {
+	data() {
+		return this.$root.$data.state;
+  },
+	methods: {
+    s(parameters) {
+      Utils.sendToTopic(parameters);
+    }
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+  .item {
+    width: 100%;
+    margin: 4px 0 0 0;
+    clear: both;
+  }
+</style>

vueui/src/components/view/machinery/power/apc.vue

@@ -0,0 +1,171 @@
+<template>
+  <div>
+    <div v-if="state.failTime" class="notice" style="color: white;"> <!-- Failure - Disabled -->
+      <h3 class="fw-bold">SYSTEM FAILURE</h3>
+      <span class="fst-italic">I/O regulator malfuction detected! Waiting for system reboot...</span><br>
+      Automatic reboot in {{state.failTime}} seconds...
+      <vui-button icon="sync" :params="{reboot : 1}">Reboot Now</vui-button>
+    </div>
+    <vui-group v-else> <!-- Main -->
+      <div class="notice"> <!-- Lock -->
+        <div v-if="state.siliconUser">
+          <vui-group-item label="Interface Lock:">
+            <vui-button v-if="state.locked" icon="lock" :params="{toggleaccess : 1}" :class="{selected : state.locked}">Engaged</vui-button>
+            <vui-button v-else icon="lock-open" :params="{toggleaccess : 1}" :disabled="state.malfstatus >= 2" :class="{selected : (state.malfstatus < 2) && !state.locked}">Disengaged</vui-button>
+          </vui-group-item>
+        </div>
+        <span v-else>Swipe an ID card to {{state.locked ? "un" : null}}lock this interface.</span>
+      </div>
+
+      <div style="min-width: 480px"> <!-- Body -->
+        <h3>Power Status</h3>
+        <vui-group-item label="Main Breaker:">
+          <div v-if="state.locked && !state.siliconUser">
+            <span :class="{good : state.isOperating, bad : !state.isOperating}">{{state.isOperating ? "On" : "Off"}}</span>
+          </div>
+          <vui-button v-else :icon="state.isOperating ? 'power-off' : 'times'" :params="{breaker : 1}" :class="{selected: state.isOperating}">{{state.isOperating ? "On" : "Off"}}</vui-button>
+        </vui-group-item>
+
+        <vui-group-item label="External Power:">
+          <span v-if="state.externalPower == 2" class="good">Good</span>
+          <span v-else-if="state.externalPower == 1" class="average">Low</span>
+          <span v-else class="bad">None</span>
+        </vui-group-item>
+
+        <vui-group-item label="Power Cell">
+          <span v-if="state.powerCellStatus == null" class="bad">Power cell removed.</span>
+          <span v-else>
+            <vui-progress :value="state.powerCellStatus" :min="0" :max="100" :class="cellClass"/>
+            <span style="width:60px">{{Math.round(state.powerCellStatus * 10)/10}}%</span>
+          </span>
+        </vui-group-item>
+
+        <vui-group-item label="Power Cell charge status:">
+          <div class="statusValue">
+            <span v-if="state.charge_mode == 1">APC's power cell will run out of charge in {{timeRemaining}}.</span>
+            <span v-else-if="state.charge_mode == 2">APC is not charging or discharging.</span>
+            <span v-else>APC will be fully charged in {{timeRemaining}}.</span>
+          </div>
+        </vui-group-item>
+
+        <vui-group-item label="Charge Mode:" v-if="state.powerCellStatus != null">
+          <span v-if="state.locked && !state.siliconUser" :class="{good : state.chargeMode, bad : !state.chargeMode}">{{state.chargeMode ? "Auto" : "Off"}}</span>
+          <vui-button v-else :icon="state.chargeMode ? 'sync' : 'times'" :class="{selected: state.chargeMode}" :params="{cmode : 1}">{{state.chargeMode ? "Auto" : "Off"}}</vui-button>
+          &nbsp;
+          [<span :class="chargeClass">{{chargeStatus}}</span>]
+        </vui-group-item>
+
+        <vui-group-item label="Night Lighting:">
+          <vui-button :icon="state.lightingMode ? 'moon' : 'sun'" :class="{selected: state.lightingMode}" :params="{lmode : state.lightingMode ? 'off' : 'on'}">{{state.lightingMode ? "On" : "Off"}}</vui-button>
+        </vui-group-item>
+
+        <vui-group-item label="Emergency Lighting:">
+          <div style="width: 105px">
+            <span v-if="state.locked && !state.siliconUser">{{state.emergencyMode ? "On" : "Off"}}</span>
+            <vui-button v-else icon="lightbulb" :class="{selected: state.emergencyMode}" :params="{emergency_lights : 1}">{{state.emergencyMode ? "On" : "Off"}}</vui-button>
+          </div>
+        </vui-group-item>
+
+        <h3>Power Channels</h3>
+        <vui-group-row v-for="(channel, channel_title) in state.powerChannels" :key="channel_title">
+          <div style="display:table-cell;vertical-align:top;padding-right:8px;width:4%;" class="itemLabel">
+            {{channel_title}}
+            <span style="float:right;">
+              [<span :class="channelStatClass(channel.status)">{{channelStatus(channel.status)}}</span>]&nbsp;
+              [<span class="good">{{channelPower(channel.status)}}</span>]
+            </span>
+          </div>
+          <div style="display:table-cell;width:10%;">
+            <span style="width: 70px; text-align: right; display:inline-block;">
+              {{channel.powerLoad}}&nbsp;W
+            </span>
+            <span style="width: 105px">
+              &nbsp;&nbsp;
+              <span v-if="state.locked">
+                <span v-if="channel.status == 1 || channel.status == 3">
+                  &nbsp;&nbsp;{{channelPower(channel.status)}}
+                </span>
+              </span>
+            </span>
+            &nbsp;&nbsp;
+            <span v-if="!state.locked || state.siliconUser">
+              <vui-button icon="sync" :params="{set : 3, chan : channel_title}" :class="{selected : channel.status == 1 || channel.status == 3}">Auto</vui-button>
+              <vui-button icon="power-off" :params="{set : 2, chan : channel_title}" :class="{selected : channel.status == 2}">On</vui-button>
+              <vui-button icon="times" :params="{set : 1, chan : channel_title}" :class="{selected : channel.status == 0}">Off</vui-button>
+            </span>
+          </div>
+        </vui-group-row>
+
+        <vui-group-item label="Total Load:">
+          {{state.totalLoad}}W{{state.totalCharging ? ` (+ ${state.totalCharging}W Charging)` : null}}
+        </vui-group-item>
+
+        <vui-group-item :balance="0.69">&nbsp;</vui-group-item>
+
+        <vui-group-item label="Cover Lock">
+          <div v-if="state.locked && !state.siliconUser">
+            <span :class="{good : state.coverLocked, bad : !state.coverLocked}" v-if="state.coverLocked">{{state.coverLocked ? "E" : "Dise"}}ngaged</span>
+          </div>
+          <div v-else>
+            <vui-button :icon="state.coverLocked ? 'lock' : 'lock-open'" :class="{selected: state.coverLocked}" :params="{lock : 1}">{{state.coverLocked ? "E" : "Dise"}}ngaged</vui-button>
+          </div>
+        </vui-group-item>
+
+        <div v-if="state.siliconUser">
+          <h3>System Overrides</h3>
+          <div>
+            <vui-button icon="lightbulb" :params="{overload : 1}">Overload Lighting Circuit</vui-button>
+            <vui-button v-if="state.malfStatus == 1" icon="script" :params="{malfhack : 1}">Override Programming</vui-button>
+            <span class="notice" v-else-if="state.malfStatus > 1">APC Hacked</span>
+          </div>
+        </div>
+      </div>
+    </vui-group>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return this.$root.$data; // Make data more easily accessible
+  },
+  computed: {
+    chargeClass() {
+      if(this.state.chargingStatus > 1) {return "good"}
+      if(this.state.chargingStatus == 1) {return "average"}
+      return "bad";
+    },
+    chargeStatus() {
+      if(this.state.chargingStatus > 1) {return "Fully Charged"}
+      if(this.state.chargingStatus == 1) {return "Charging"}
+      return "Not Charging";
+    },
+    cellClass() {
+      if(this.state.powerCellStatus >= 50) {return "good"}
+      if(this.state.powerCellStatus >= 25) {return "average"}
+      return "bad";
+    },
+    timeRemaining() {
+      var timeleft = (this.state.time - this.wtime)/10 // deciseconds
+      var hours = Math.round(timeleft / 3600)
+      var minutes = Math.round(timeleft % 3600 / 60)
+      var seconds = Math.round(timeleft % 60)
+      return [hours >= 1 && `${hours} hours`, minutes >= 1 && `${minutes} minutes`, seconds >= 1 && `${seconds} seconds`].filter(Boolean).join(", ")
+    }
+  },
+  methods: {
+    channelStatus(channelStat) {
+      if(channelStat <= 1) {return "Off"}
+      return "On";
+    },
+    channelPower(channelStat) {
+      if(channelStat == 1 || channelStat == 3) {return "Auto"}
+      return "Manual";
+    },
+    channelStatClass(channelStat) {
+      if(channelStat <= 1) {return "bad"}
+      return "good";
+    },
+  }
+}
+</script>

vueui/src/components/view/machinery/power/smes.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <div v-if="state.failTime" class="notice"> <!-- Failure - Disabled -->
+      <h3 class="fw-bold">SYSTEM FAILURE</h3>
+      <span class="fst-italic">I/O regulator malfuction detected! Waiting for system reboot...</span><br>
+      Automatic reboot in {{state.failTime}} seconds...
+      <vui-button icon="sync" :params="{reboot : 1}">Reboot Now</vui-button>
+    </div>
+    <vui-group v-else>
+      <vui-group-item label="Stored Capacity:">
+        <vui-progress :value="state.storedCapacity" :min="0" :max="100" :class="state.charging ? 'good' : 'average'"/>
+        <div class="statusValue">
+          {{Math.round(state.storedCapacity)}}%
+        </div>
+      </vui-group-item>
+
+      <vui-group-item label="Charge status:">
+        <div class="statusValue">
+          <span v-if="state.chargeMode == 1">
+            SMES will be fully charged in {{timeRemaining}}
+          </span>
+          <span v-else-if="state.chargeMode == 2">
+            SMES input and output are equal
+          </span>
+          <span v-else>
+            SMES will run out of charge in {{timeRemaining}}
+          </span>
+        </div>
+      </vui-group-item>
+
+      <h3>Input Management</h3>
+      <vui-group-item label="Charge Mode:">
+        <vui-button :icon="state.chargeAttempt ? 'sync' : 'times'" :params="{cmode : 1}">{{state.chargeAttempt ? 'Auto' : 'Off'}}</vui-button>
+        &nbsp;
+        [<span :class="chargeClass">{{chargeStatus}}</span>]
+      </vui-group-item>
+
+      <vui-group-item label="Input Level:">
+        <vui-progress :value="state.chargeLevel" :min="0" :max="state.chargeMax"/>
+        <div style="clear: both; padding-top: 4px; text-align:center;">
+          <vui-input-numeric width="100px" v-model="state.chargeLevel" min-button max-button :button-count="0" :min="0" :max="state.chargeMax" @input="s({input : state.chargeLevel})">&nbsp;{{state.chargeLevel}} W&nbsp;</vui-input-numeric>
+        </div>
+      </vui-group-item>
+
+      <vui-group-item label="Input Load:">
+        <vui-progress :value="state.chargeTaken" :min="0" :max="state.chargeMax" :class="(state.chargeTaken < state.chargeLevel) ? 'average' : 'good'"/>
+        <div class="statusValue">
+          {{state.chargeTaken}} W
+        </div>
+      </vui-group-item>
+
+      <h3>Output Management</h3>
+      <vui-group-item label="Output Status:">
+        <vui-button :icon="state.outputOnline ? 'power-off' : 'times'" :params="{online : 1}">{{state.outputOnline ? 'On' : 'Off'}}line</vui-button>
+        &nbsp;
+        [<span :class="outputClass">{{outputStatus}}</span>]
+      </vui-group-item>
+
+      <vui-group-item label="Output Level:">
+        <vui-progress :value="state.outputLevel" :min="0" :max="state.outputMax"/>
+        <div style="clear: both; padding-top: 4px; text-align: center;">
+          <vui-input-numeric width="100px" v-model="state.outputLevel" min-button max-button :button-count="0" :min="0" :max="state.outputMax" @input="s({output : state.outputLevel})">&nbsp;{{state.outputLevel}} W&nbsp;</vui-input-numeric>
+        </div>
+      </vui-group-item>
+
+      <vui-group-item label="Output Load:">
+        <vui-progress :value="state.outputLoad" :min="0" :max="state.outputMax" :class="(state.outputLoad < state.outputLevel) ? 'good' : 'average'"/>
+        <div class="statusValue">
+          {{state.outputLoad}} W
+        </div>
+      </vui-group-item>
+    </vui-group>
+  </div>
+</template>
+
+<script>
+import Utils from "../../../../utils.js";
+export default {
+  data() {
+    return this.$root.$data; // Make data more easily accessible
+  },
+  methods: {
+    s(parameters) {
+      Utils.sendToTopic(parameters)
+    },
+  },
+  computed: {
+    chargeClass() {
+      switch(this.state.chargeMode){
+        case 2: return 'good';
+        case 1: return 'average';
+        default: return 'bad';
+      }
+    },
+    chargeStatus() {
+      switch(this.state.chargeMode){
+        case 2: return "Charging";
+        case 1: return "Partially Charging";
+        default: return "Not Charging";
+      }
+    },
+    outputClass() {
+      switch(this.state.outputting){
+        case 2: return 'good';
+        case 1: return 'average';
+        default: return 'bad';
+      }
+    },
+    outputStatus() {
+      switch(this.state.outputting){
+        case 2: return "Outputting";
+        case 1: return "Disconnected or No Charge";
+        default: return "Not Outputting";
+      }
+    },
+    timeRemaining() {
+      var timeleft = (this.state.time - this.wtime)/10 // deciseconds
+      var hours = Math.round(timeleft / 3600)
+      var minutes = Math.round(timeleft % 3600 / 60)
+      var seconds = Math.round(timeleft % 60)
+      return [hours >= 1 && `${hours} hours`, minutes >= 1 && `${minutes} minutes`, seconds >= 1 && `${seconds} seconds`].filter(Boolean).join(", ")
+    }
+  }
+}
+</script>

vueui/src/components/view/machinery/power/supermattercrystal.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <div v-if="detonating" class="notice" style="color: #000000;">
+      <h2 style="color: #000000;">CRYSTAL DELAMINATING</h2>
+      <h3 style="color: #000000;">Evacuate area immediately</h3>
+      <div class="clearBoth"/>
+    </div>
+    <vui-group v-else>
+      <vui-group-row>
+        <h3>Crystal Integrity</h3><!--
+        --><vui-progress :value="integrity_percentage" :min="0" :max="100" :class="integrity_class"/><!--
+        --><b>{{integrity_percentage}} %</b>
+      </vui-group-row>
+      <h3>Environment</h3>
+      <vui-group-item label="Temperature:">
+        <vui-progress :value="ambient_temp" :min="0" :max="10000" :class="temp_class"/>
+        {{ambient_temp}} K
+      </vui-group-item>
+      <vui-group-item label="Pressure:">
+        {{ambient_pressure}} kPa
+      </vui-group-item>
+    </vui-group>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return this.$root.$data.state; // Make data more easily accessible
+  },
+  computed: {
+    temp_class() {
+      if(this.ambient_temp >= 5000){return "bad"}
+      if(this.ambient_temp >= 4000){return "average"}
+      return "good";
+    },
+    integrity_class() {
+      if(this.integrity_percentage >= 90){return "good"}
+      if(this.integrity_percentage >= 25){return "average"}
+      return "bad";
+    }
+  }
+}
+</script>

vueui/src/components/vui/button.vue

@@ -1,6 +1,6 @@
 <template>
   <div @click="senddata()" class="button" :disabled="$root.$data.status < 2 || this.disabled">
-    <div v-if="icon" class="uiIcon16" :class="[this.iconOnly ? '' : 'mr-1', 'ic-' + icon]"/>
+    <div v-if="icon" class="uiIcon16" :class="[`ic-${this.icon}`, {'mr-1': !this.iconOnly}, getRotateClass, getFlipClass]"/>
     <span><slot/></span>
   </div>
 </template>
@@ -14,6 +14,14 @@ export default {
       type: String,
       default: ""
     },
+    rotate: {
+      type: Number,
+      default: 0
+    },
+    flip: {
+      type: String,
+      default: ""
+    },
     params: {
       type: Object,
       default: null
@@ -52,6 +60,24 @@ export default {
       }
       Utils.sendToTopic(this.params, this.pushState)
     }
+  },
+  computed: {
+    getRotateClass() {
+      switch(this.rotate % 360) {
+        case 90:
+          return "ic-rotate-90"
+        case 180:
+          return "ic-rotate-180"
+        case 270:
+          return "ic-rotate-270"
+        default:
+          return ""
+      }
+    },
+    getFlipClass() {
+      if(!this.flip) return
+      return `ic-flip-${this.flip}`
+    }
   }
 }
 </script>

vueui/src/components/vui/group-item.vue

@@ -29,5 +29,6 @@ div.item {
 .itemLabel {
   padding-right: 8px;
   width: 4%;
+  vertical-align: top;
 }
 </style>

vueui/src/components/vui/input/numeric.vue

@@ -1,8 +1,10 @@
 <template>
   <div>
+    <vui-button v-if="minButton" :disabled="val<=min" @click="onUpdatedValue(min+1-val)">Min</vui-button>
     <vui-button v-for="bv in subButtons" :key="'-' + bv" :disabled="val - bv < min" @click="onUpdatedValue(-(10 ** bv))">-</vui-button>
     <input @keypress="onKeyPress" :style="{width: width}" ref="input" :value="val" @input="onFieldUpdate($event.target)">
     <vui-button v-for="bv in addButtons" :key="'+' + bv" :disabled="val + bv > max" @click="onUpdatedValue(10 ** bv)">+</vui-button>
+    <vui-button v-if="maxButton" :disabled="val>=max" @click="onUpdatedValue(max-val)">Max</vui-button>
   </div>
 </template>
 
@@ -14,6 +16,14 @@ export default {
       type: Number,
       default: 0
     },
+    minButton: {
+      type: Boolean,
+      default: false
+    },
+    maxButton: {
+      type: Boolean,
+      default: false
+    },
     buttonCount: {
       type: Number,
       default: 1

vueui/src/components/vui/progress.vue

@@ -29,6 +29,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+  .displayBar {
+    position: relative;
+    width: 236px;
+    height: 16px;
+    border: 1px solid #666666;
+    float: left;
+    margin: 0 5px 0 0;
+    overflow: hidden;
+    background: #000000;
+  }
   .displayBarFill {
     line-height: 1em;
     white-space: nowrap;
@@ -39,4 +49,20 @@ export default {
       margin-left: 2px;
     }
   }
+  .displayBarFill.good {
+      color: #ffffff;
+      background: #4f7529;
+    }
+  .displayBarFill.average {
+    color: #ffffff;
+    background: #cd6500;
+  }
+  .displayBarFill.bad {
+    color: #ffffff;
+    background: #ee0000;
+  }
+  .displayBarFill.highlight {
+    color: #ffffff;
+    background: #8BA5C4;
+  }
 </style>