Continued work on tutorial

Author: azonenberg

src/ngscopeclient/MainWindow.cpp

@@ -1035,7 +1035,12 @@ void MainWindow::ToolbarButtons()
 
 	//Trigger button group
 	if(ImGui::ImageButton("trigger-start", GetTexture("trigger-start"), buttonsize))
+	{
 		m_session.ArmTrigger(TriggerGroup::TRIGGER_TYPE_NORMAL);
+
+		if(m_tutorialDialog && (m_tutorialDialog->GetCurrentStep() == TutorialWizard::TUTORIAL_03_ACQUIRE) )
+			m_tutorialDialog->AdvanceToNextStep();
+	}
 	Dialog::Tooltip("Arm the trigger in normal mode");
 	if(multigroup)
 	{
@@ -1051,8 +1056,7 @@ void MainWindow::ToolbarButtons()
 		ImVec2 anchorPos(
 			buttonEndPos.x - ImGui::GetFontSize(),
 			buttonStartPos.y + 2*ImGui::GetFontSize());
-		m_tutorialDialog->DrawSpeechBubble(anchorPos, ImGuiDir_Up, "  Arm the trigger");
-		//FIXME better handling of going off edge
+		m_tutorialDialog->DrawSpeechBubble(anchorPos, ImGuiDir_Up, "Arm the trigger");
 	}
 
 	if(ImGui::ImageButton("trigger-single", GetTexture("trigger-single"), buttonsize))

src/ngscopeclient/TutorialWizard.cpp

@@ -53,6 +53,12 @@ TutorialWizard::TutorialWizard(Session* session, MainWindow* parent)
 	m_markdownText.push_back(ReadDataFile("md/tutorial_01_addinstrument.md"));
 	m_markdownText.push_back(ReadDataFile("md/tutorial_02_connect.md"));
 	m_markdownText.push_back(ReadDataFile("md/tutorial_03_acquire.md"));
+	m_markdownText.push_back(ReadDataFile("md/tutorial_04_scrollzoom.md"));
+
+	m_markdownText.push_back(ReadDataFile("md/tutorial_99_final.md"));
+
+	//DEBUG: autiomatically jump ahead a bit
+	m_step = TUTORIAL_03_ACQUIRE;
 }
 
 TutorialWizard::~TutorialWizard()
@@ -93,16 +99,18 @@ bool TutorialWizard::DoRender()
 
 	ImGui::Separator();
 
-	//move slightly right of centerline
-	ImGui::SetCursorPosX(ImGui::GetContentRegionAvail().x / 2);
+	//move near the right edge
+	ImGui::SetCursorPosX(ImGui::GetContentRegionAvail().x * 0.8);
 
 	//Show back button unless at first step
+	//TODO: is this necessary? will it break things? For now turn it off
+	/*
 	ImGui::BeginDisabled(m_step == TUTORIAL_00_INTRO);
 		if(ImGui::Button("<< Back"))
 			m_step --;
 	ImGui::EndDisabled();
-
 	ImGui::SameLine();
+	*/
 
 	//Show forward button
 	//If last step, close dialog when pressed
@@ -114,26 +122,32 @@ bool TutorialWizard::DoRender()
 	}
 	else
 	{
-		//Enable the continue button as needed
 		ImGui::BeginDisabled(!m_continueEnabled);
-
-		//By default, continue is disabled when we move to the next step
-		if(ImGui::Button("Continue >>"))
-		{
-			m_step ++;
-			m_continueEnabled = false;
-		}
-
+			if(ImGui::Button("Continue >>"))
+				AdvanceToNextStep();
 		ImGui::EndDisabled();
 	}
 
-	//If this is the first step, show the first bubble
-	if(m_step == TUTORIAL_00_INTRO)
+	//Show hints on continue button for some steps
+	if(m_continueEnabled)
 	{
 		ImVec2 anchorPos(
 			buttonStartPos.x + 2*ImGui::GetFontSize(),
 			buttonStartPos.y + 2*ImGui::GetFontSize());
-		DrawSpeechBubble(anchorPos, ImGuiDir_Up, "Begin the tutorial");
+		switch(m_step)
+		{
+			case TUTORIAL_00_INTRO:
+				DrawSpeechBubble(anchorPos, ImGuiDir_Up, "Begin the tutorial");
+				break;
+
+			case TUTORIAL_04_SCROLLZOOM:
+				DrawSpeechBubble(anchorPos, ImGuiDir_Up, "Continue when you are comfortable zooming the plot");
+				break;
+
+			//show nothing otherwise
+			default:
+				break;
+		}
 	}
 
 	return true;
@@ -144,30 +158,52 @@ bool TutorialWizard::DoRender()
 
 void TutorialWizard::DrawSpeechBubble(
 		ImVec2 anchorPos,
-		ImGuiDir dirTip,
-		const string& str)
+		[[maybe_unused]] ImGuiDir dirTip,
+		string str)
 {
 	auto& prefs = m_session->GetPreferences();
 	auto outlineColor = prefs.GetColor("Appearance.Help.bubble_outline_color");
 	auto fillColor = prefs.GetColor("Appearance.Help.bubble_fill_color");
 	auto list = ImGui::GetForegroundDrawList();
 
 	auto textsize = ImGui::CalcTextSize(str.c_str(), nullptr);
-
-	//Anchor position is the tip of the speech bubble, centered on the menu
 	auto size = ImGui::GetFontSize();
-	float tailLength = size;
+
+	//Default is for the arrow to be 1/4 of the way across
+	auto leftOverhang = textsize.x / 4;
 	float radius = 0.5 * size;
+
+	//Update overhang if the button would go off the start of the window
+	//For now, we only care about the left side
+	auto viewport = ImGui::GetWindowViewport();
+	auto wpos = viewport->Pos;
+	float farleft = anchorPos.x - (leftOverhang + radius);
+	float offLeftEdge = farleft - wpos.x;
+	if(offLeftEdge < 0)
+	{
+		//for now just clamp the anchor
+		//but this breaks things we can't make it too small
+		//anchorPos.x += fabs(offLeftEdge) + size;
+		leftOverhang = 2*size;
+
+		//Make the text a bit wider and recalculate the size
+		//Quick hack, but it keeps it visible!
+		str = "   " + str;
+		textsize = ImGui::CalcTextSize(str.c_str(), nullptr);
+	}
+
+	//Anchor position is the tip of the speech bubble
+	float tailLength = size;
 	ImVec2 textPos(
-		anchorPos.x - textsize.x/4,
+		anchorPos.x - leftOverhang,
 		anchorPos.y + tailLength + radius);
 
 	//Fill
-	MakePathSpeechBubble(list, dirTip, anchorPos, textsize, tailLength, radius);
+	MakePathSpeechBubble(list, dirTip, anchorPos, textsize, tailLength, radius, leftOverhang);
 	list->PathFillConcave(fillColor);
 
 	//Outline
-	MakePathSpeechBubble(list, dirTip, anchorPos, textsize, tailLength, radius);
+	MakePathSpeechBubble(list, dirTip, anchorPos, textsize, tailLength, radius, leftOverhang);
 	list->PathStroke(outlineColor, 0, 0.25 * size);
 
 	//Text
@@ -181,24 +217,11 @@ void TutorialWizard::MakePathSpeechBubble(
 	ImVec2 anchorPos,
 	ImVec2 textsize,
 	float tailLength,
-	float radius)
+	float radius,
+	float leftOverhang)
 {
 	auto size = ImGui::GetFontSize();
 	auto tailWidth = size;
-
-	//Default is for the arrow to be 1/4 of the way across
-	auto leftOverhang = textsize.x / 4;
-
-	//Update overhang if the button would go off the start of the window
-	auto wpos = ImGui::GetWindowPos();
-	float minleft = wpos.x;
-	float farleft = anchorPos.x - (leftOverhang + radius);
-	float offLeftEdge = farleft - minleft;
-	if(offLeftEdge < 0)
-	{
-		//leftOverhang = 0.5*size;
-	}
-
 	auto rightOverhang = textsize.x - leftOverhang;
 
 	//ImGui wants clockwise winding. Starting from the tip of the speech bubble go down, then across

src/ngscopeclient/TutorialWizard.h

@@ -51,34 +51,49 @@ class TutorialWizard : public Dialog
 		TUTORIAL_00_INTRO,
 		TUTORIAL_01_ADDINSTRUMENT,
 		TUTORIAL_02_CONNECT,
-		TUTORIAL_03_ACQUIRE
+		TUTORIAL_03_ACQUIRE,
+		TUTORIAL_04_SCROLLZOOM,
+
+		TUTORIAL_99_FINAL
 	};
 
 	TutorialStep GetCurrentStep()
 	{ return static_cast<TutorialStep>(m_step); }
 
 	///@brief Move the tutorial to the next step
 	void AdvanceToNextStep()
-	{ m_step ++; }
+	{
+		m_step ++;
+		m_continueEnabled = false;
+	}
+
+	///@brief Enable the next step but do not advance to it
+	void EnableNextStep()
+	{ m_continueEnabled = true; }
+
+	void DrawSpeechBubble(
+		ImVec2 anchorPos,
+		ImGuiDir dirTip,
+		std::string str);
+
+protected:
 
 	void MakePathSpeechBubble(
 		ImDrawList* list,
 		ImGuiDir dirTip,
 		ImVec2 anchorPos,
 		ImVec2 textsize,
 		float tailLength,
-		float radius);
+		float radius,
+		float leftOverhang);
 
-	void DrawSpeechBubble(
-		ImVec2 anchorPos,
-		ImGuiDir dirTip,
-		const std::string& str);
-
-protected:
+	///@brief Text for each tutorial page
 	std::vector<std::string> m_markdownText;
 
+	///@brief Current step of the tutorial
 	size_t m_step;
 
+	///@brief True if the "continue" button is active
 	bool m_continueEnabled;
 };
 

src/ngscopeclient/WaveformArea.cpp

@@ -4273,14 +4273,32 @@ void WaveformArea::OnMouseWheelPlotArea(float delta, float delta_h)
 
 	int64_t target = m_group->XPositionToXAxisUnits(ImGui::GetIO().MousePos.x);
 
-	//Zoom in
-	if(delta > 0)
-		m_group->OnZoomInHorizontal(target, pow(1.5, delta));
-	else if (delta < 0)
-		m_group->OnZoomOutHorizontal(target, pow(1.5, -delta));
+	//If we have both X and Y deltas, use the larger one and ignore incidental movement in the other axis
+	if(fabs(delta) > fabs(delta_h) )
+	{
+		//Zoom in
+		if(delta > 0)
+		{
+			m_group->OnZoomInHorizontal(target, pow(1.5, delta));
+
+			//If in the tutorial, ungate the wizard
+			auto tutorial = m_parent->GetTutorialWizard();
+			if(tutorial && (tutorial->GetCurrentStep() == TutorialWizard::TUTORIAL_04_SCROLLZOOM) )
+				tutorial->EnableNextStep();
+		}
+		else if (delta < 0)
+		{
+			m_group->OnZoomOutHorizontal(target, pow(1.5, -delta));
+
+			//If in the tutorial, ungate the wizard
+			auto tutorial = m_parent->GetTutorialWizard();
+			if(tutorial && (tutorial->GetCurrentStep() == TutorialWizard::TUTORIAL_04_SCROLLZOOM) )
+				tutorial->EnableNextStep();
+		}
+	}
 
 	//Pan horizontally
-	if (delta_h != 0)
+	else if (delta_h != 0)
 		m_group->OnPanHorizontal(delta_h);
 }
 

src/ngscopeclient/WaveformGroup.cpp

@@ -1195,6 +1195,11 @@ void WaveformGroup::OnMouseWheel(float delta)
 		OnZoomInHorizontal(target, pow(1.5, delta));
 	else
 		OnZoomOutHorizontal(target, pow(1.5, -delta));
+
+	//If in the tutorial, ungate the wizard
+	auto tutorial = m_parent->GetTutorialWizard();
+	if(tutorial && (tutorial->GetCurrentStep() == TutorialWizard::TUTORIAL_04_SCROLLZOOM) )
+		tutorial->EnableNextStep();
 }
 
 /**

src/ngscopeclient/md/tutorial_00_intro.md

@@ -2,8 +2,8 @@
 
 Thanks for trying ngscopeclient! If this is your first time using the tool, we suggest you go through this tutorial to learn your way around.
 
-The tutorial will only be automatically displayed once. If you wish to return to the tutorial at any point, simply select "Tutorial" from the Help menu.
+You can drag this tutorial window by the title bar to reposition it, or dock it by dragging it to the edge of the window, as needed.
 
-You can drag this tutorial window by the title bar to reposition it, or dock it by dragging it to the edge of the window, as needed. To end the tutorial at any time, just press the close button in the title bar of this window.
+The tutorial will only be automatically displayed once. To end the tutorial at any time, just press the close button in the title bar of this window. If you wish to return to the tutorial at any point, simply select "Tutorial" from the Help menu.
 
-Press the "Continue" button to begin the tutorial.
+Press the "Continue" button to begin the tutorial. We suggest maximizing the application so you can see the entire user interface without the tutorial obscuring your view.

src/ngscopeclient/md/tutorial_04_scrollzoom.md

@@ -0,0 +1,7 @@
+# Horizontal Zoom
+
+In conventional digital oscilloscopes, the display zoom setting and the sample rate / record length are locked so that changing one changes the other.
+
+Since ngscopeclient allows you to have many views displaying the same waveform data, the horizontal zoom on a plot is independent of the timebase settings. The default record length for the demo scope is 1M samples which is much longer than the visible area of the plot.
+
+Try using your mouse wheel (or touchpad vertical scroll axis) over the timeline or plot to zoom in and out. Zoom centers on the mouse position, so you can focus on different parts of the waveform.

src/ngscopeclient/md/tutorial_99_final.md

@@ -0,0 +1,7 @@
+# Done
+
+You've completed the tutorial! We hope you enjoy using ngscopeclient.
+
+This tutorial has only scratched the surface of the feature set. Please refer to the PDF or HTML versions of the user manual for a more complete reference.
+
+If you have questions, comments, or problems please reach out via the IRC/Discord channels or file a GitHub ticket.