Remote PC audio controller

Remote PC audio controller created with Delphi Firemonkey.


These apps, created with Delphi Firemonkey, allow you to control your sound like a remote control with a smartphone when watching video on a PC.
First run "AudioService.exe" on your PC.
The IP address of the PC is also known.
Next, run the smartphone app and register the IP address of the PC.
IP address registration of multiple PCs is also possible.
Select IP Address of the PC to enable audio volume control with the dial button.


 
 



The application was built with the Rio version of Delphi 10.3.
The component used by the app is Rapid Design UX at http://fmxdesign.com/.
Rapid Design UX components are required when building application projects.
You can download the trial version for free.




Application binaries download.

Delphi Project full source download.

Rapid Design UX Components download.




New components to create FMX apps from various designs

http://fmxdesign.com has released a component that allows you to develop Delphi FMX apps with great design.


This components support the FireMonkey platforms which are Android, IOS, OSX, and Windows.

Component products are in three groups.
Rapid Design UX for Good Design Apps, Rapid Design Chart for easy chart creation and
And a free component, Rapid Design LAB.
A free component, Rapid Design LAB, provides a circle gauge and an analog clock where developers can change images.
There are many sample images of the panel and needle, so there is no problem if you do not have the image file separately.
In the case of Analog Clock, the transparent panel allows the developer to use the picture as a clock background.

There is also a component that can freely draw various shapes from triangle.





Commercial components, Rapid Design UX and Chart, provide a free trial version.
The trial version has no functional limitations, and a message appears at run time.

Rapid Design UX is made up of 23 components, which allows the developer to freely set colors and sizes without using styles.
It also provides popular toast messages and pop-up dialog boxes on mobile.
(TRDToastMessage, TRDPopupDialog, TRDInputQueryBox)
These can be used at design time by simply changing the desired attributes by changing the button text etc. at the time of method call after setting properties such as color.

There are four types of buttons that can be used for navigation.
(TRDNavigationButtons, TRDNavigationSlider, TRDButtonSet, TRDToggleButtons)
They have the advantage of being able to develop quickly because the size and spacing of the buttons are automatically adjusted according to the number of added image icons.
Buttons that do not use icons are automatically sized and spaced when you enter only the number of buttons.
It also has the advantage of reducing the amount of coding by processing each button click event in a single method.



The Rapid Design Chart provides the four most commonly used charts.
(TRDChartBarVert, TRDChartBarHori, TRDChartLine, TRDChartPie)
If you put the data in Lines in the same way as putting data in TMemo, it is easy to use because the chart is created automatically.
In addition, you can create a multi-chart simply by stacking layers by making each chart's background transparent.


It is very easy to use, so try the free trial version.
For more information, see http://fmxdesign.com or YouTube videos.

I will post the detailed usage of each component again next time.



A line drawing with two positions (x1, y1) and (x2, y2) with TLine.

A line drawing with two positions(x1, y1) and (x2, y2) with TLine.

TLine's attributes are height and width, and TLine's coordinates are x, y position at the top left, so it is not easy to draw lines by specifying (x1, y1) and (x2, y2).

I have created a method that draws two positions using TLine's Rotation Angle attribute.

The principle is to find only the line width and rotation angle value with two postion.
First, you can specify the properties of TLine as shown in the figure.
The important thing is RotationCenter.
If RotationCenter has default values ​​of 0.5 and 0.5, it rotates around the center of the line.
RotationCenter should be changed to (0,0) to rotate around the end point of the line (x1.y1).



The line width and rotation angle designation can be calculated as shown in the figure.
Red color line is a TLine.



I wrote the sample code using the above method.
The position.X values is x2>x1 when the rotation angle range is 0 ~ 180.
If the SIN value exceeds 180, the +/- value changes.
So, as in the sample code, if x1>x2 then, change two position.
The drawing order is not considered.

Even if you do not understand the principle of line drawing, you can draw a line by inputting the Thickness of two Position and line as parameters.
Of course, color change is also possible.

procedure TForm1.Draw_Line2P( x1,y1, x2,y2, thick : single );
var
  d, xtemp, ytemp, rAngle : single;
  drawLine : TLine;
begin
  if x1 > x2 then
  begin
    xtemp := x1;     ytemp := y1;
    x1 := x2;          y1 := y2;
    x2 := xtemp;     y2 := ytemp;
  end;

  d := SQRT( Power( x2-x1, 2 ) + Power( y2-y1, 2 ) );   // Uses System.Math
  rAngle := RadToDeg( ArcSin( (y2-y1)/d ));

  drawLine := TLine.Create(self);
  drawLine.Parent := self;
  drawLine.LineLocation := TLineLocation.Inner;
  drawLine.LineType := TLineType.Bottom;
  drawLine.RotationCenter.X := 0;
  drawLine.RotationCenter.Y := 0;
  drawLine.Stroke.Thickness := thick;
  drawLine.Height := 1;
  drawLine.Width  := d;
  drawLine.Position.X := x1;
  drawLine.Position.Y := y1;
  drawLine.RotationAngle := rAngle;
end;





Calling apps from the web with Android Intent


How to call the Delphi Firemonkey App from a web page via Android Intent.

At this point, the URL parameter values are sent to the App.


1. Create an html page and install it on the web. (callapp.html)
<a href="delphiapp://callType1?title=This is a Type1&data1=1111&data2=2222">call Type1</a><BR><BR>

<a href="delphiapp://callType2?title=This is a Type2&data1=3333&data2=4444&data3=5555">call Type2</a><BR><BR>

<a href="delphiapp://callType2?title=Type2 : 한글로 된 제목&data1=6666&data2=7777&data3=3번째 데이터">call Type2 한글</a><BR><BR>



2. Add the same intent-filter entry to the html page's uri entry in the AndroidManifest.template.xml file.



3. Create a Delphi Project.
procedure TForm1.FormCreate(Sender: TObject);
{$IFDEF ANDROID}
var
  intent: JIntent;
  uri: Jnet_Uri;
  uriStr: String;
  rValue : TStringList;
  i : integer;
{$ENDIF}

begin
  {$IFDEF ANDROID}
  intent := SharedActivity.getIntent;
  if intent <> nil then
  begin
    if TJIntent.JavaClass.ACTION_VIEW.equals(intent.getAction) then
    begin
      uri := intent.getData;
      uriStr := JStringToString(uri.toString);  // read uriStr

      rValue := Get_URL_String( uriStr );  // parsing value

      for i := 0 to rValue.Count-1 do
         Memo1.Lines.Add( rValue[i] );
    end;
  end;
  {$ENDIF}
end;



Demo Video

Firemonkey 2D/3D Graph Chart Demo Project

I release the project that draws charts using various Firemonkey's  graphical components and objects.
The Demo Project reads the data from the SQLite Database Table and draws a graph chart.

It has the following features.

  • Demo Project built with Delphi Berlin update2.
  • Multi Platform Support: Windows / Mac OS X / Android / iOS.
  • Demo uses SQLite but uses FireDAC, so all databases can be linked.
  • Database Table Generates graphs that match the aspect ratio automatically, regardless of the number of records.
  • The Demo draws two charts, but you can easily draw multiple charts simultaneously.
  • Graph range is based on maximum value of record value and can be specified at runtime.
  • 2D Graph can draw on all Firemonkey's visible objects (TControl). Demo created above Rectangle object.
  • The total size of the 2D Graph is automatically set to match the size of the dynamically generated TLayout.
  • 3D Graph can be changed by mouse or touch Viewpoint.
  • 3D Graph size is set as camera Z coordinate value.
  • The 3D Graph range is automatically set to match the size of the dynamically generated TLayout3D.
  • The front and back positions of the screen reference of the 3D chart which is generated redundant are designated as the Z coordinate value of TLayout3D.
  • For Demo, 3D Graph Chart can be easily called from other projects using TFrame.

 2D chart creation method


 3D chart creation method

Sample data (SQLite Table)