Share My Creation [B4X Tool] - B4XIDEViewer V. 1.0

[B4X Tool] - B4XIDEViewer V. 1.0

What is B4XIDEViewer?
-It’s a B4X Tool which can show bitmaps, images and saved pictures from your B4XIDE on your computer. You can also play video and audio files present on your device. You can transfer files from the device. You can show and search huge text files, show PDFs, GIF-images and more….

Why B4XIDEViewer?
-Well, I like working with MultiMedia, such as bitmaps, images, audio, video. I extract frames from a video, do something with each image and then reassemble everything to a new video or GIF-image. In order to see the results, I need to implement a player in my app, save bitmaps to a png/jpg and then display it in an ImageView or I need to open the shared folder on my PC but this is very often slow.
With B4XIDEViewer, I can now simply send the image/video/file directly from the B4XIDE to the computer and display it. I just write a log-command. I can easily do this directly in my code and of course I can set breakpoints at these log-commands. Now I can see how an image gets generated while applying certain effects, step by step. You can do this while debugging. You have a history of all images you created.

The Client Library is attached to this post and works with all platforms i.e. B4A, B4i and B4J. It is a single B4XLib and you install it like any other library. Sample projects are provided and also the source code of the library is available if you extract the B4Xlib. I could have actually provided only one sample project since the code is the same for all platforms.

Installation:
  1. Download the B4XIDEViewer program jar-file from here and save it where you want, for instance on your desktop.
  2. Create an incoming firewall-rule on the computer where B4XIDEViewer will be executed. The easiest way to do this is to use the command prompt (Windows):
    a) Make sure you open an administrator command prompt. Click on Start, type in CMD and then right-click on Command Prompt and choose Run as Administrator.
    b) Type the following command followed by the Enter-key:
    B4X:
    netsh advfirewall firewall add rule name="B4XIDEViewer" protocol=TCP dir=in localport=51070 action=allow
    c) If operation was successful, you will see the word “OK” printed on the screen..
    d) Note: if you are using B4J as a client IDE and it is installed on the same computer where B4XIDEViewer is running, then there is no need to create a firewall-rule.
    e) If the standard port 51070 is already in use on your computer, you will need to change the port into another port. Just change the command above accordingly and change the port in B4XIDEViewer.
  3. Open B4XIDEViewer and when prompted, open Settings and click on the “Save&Exit” button. Now B4XIDEViewer is ready and will await connection from a B4XIDE such as B4A, B4i or B4J.
  4. Download the B4XIDEViewer client library from this post and copy it into the corresponding Additional Library folder(s) for B4J, B4A and B4i. Make sure to refresh the library-pane in your B4XIDE. Note: if you use @JordiCP ’s excellent OpenCV wrapper for B4A, then there is a separate B4XIDEViewer client library available. It is distributed separately because it includes a dependency to the OpenCV wrapper. The library is “B4AIDEOCVViewer.b4xlib” and is attached to this post.
  5. You are now ready to use the B4XIDEViewer!

B4XIDEViewer Client Methods/Events

Author: Mikael Osterhed (moster67)
Version: 1.00
ViewerUtility

  • Functions:
    • ClearAllImages
      Clears all images shown in B4XIDEViewer.
    • Connect - connects to B4XIDEViewer
    • Initialize (CallingModule As Object, EventName As String, IPAddress As String, PortToUse As Int)
      Initializes the object. Set IP Address and Port Number of
      the computer where B4XIDEViewer is running. Default
      port is 51070 but may be changed in the B4XIDEViewer app.
      You should now monitor the connection-events by creating
      two separate subs named EventName_Connected and EventName_Disconnected.
      In future versions of B4X products, this last step may be
      available in the AutoComplete list.
    • LogFile (Dir As String, FileName As String)
      Passes a saved file to be shown in B4XIDEViewer.
      Each file is sent separately over the network. This is like a file-transfer.
    • LogGifImage (Dir As String, FileName As String)
      Passes a saved GIF-image to be shown in B4XIDEViewer.
      [*]LogCanvas (cvs As Canvas)
      Passes a single Canvas to be shown in B4XIDEViewer.
      The canvas will be changed into a Bitmap and sent separately over the network.
      [*]LogImg (BP As Bitmap)
      Passes a single Bitmap to be shown in B4XIDEViewer.
      Each Bitmap is sent separately over the network.
      GIF-format is not supported. Use the method LogGifImage instead.

      [*]LogImgList (BitmapList As List)
      Passes a list of Bitmap(s) to be shown in B4XIDEViewer.
      The list is sent over the network and then unpacked.
      GIF-format is not supported. Use the method LogGifImage instead.

      [*]LogMatImg (Mat As OCVMat)
      Takes an OCVMAT and converts it into a Bitmap to be shown in B4XIDEViewer.
      Each Bitmap is sent separately over the network. Only present in OpenCV version.

      [*]LogMatImgList (MatList As List)
      Takes a list of OCVMATs and convert them into Bitmap(s) to be shown in B4XIDEViewer.
      The list is sent over the network and then unpacked. Only present in OpenCV version.

      [*]LogSavedImage (Dir As String, FileName As String)
      Passes a saved image to be shown in B4XIDEViewer.
      Each image is sent separately over the network.
      The FileName is case-sensitive. Make sure to include also the suffix.
      GIF-format is not supported. Use the method LogGifImage instead.

      [*]LogStringData (StringData As String)
      Passes StringData to be shown in B4XIDEViewer.
      Each StringData is sent separately over the network.

      [*]LogVideoAudio (Dir As String, VideoName As String)
      Passes a saved Video/Audio file to be played in B4XIDEViewer.
      Each Video/Audio file is sent separately over the network.

      [*]LogVideoAudioStream (StreamingURL As String)
      Passes a Streaming-URL to be streamed in B4XIDEViewer.
      The URL-link is passed on as a String and will stream from
      B4XIDEViewer if protocol and codec are supported.


Final words:
This project was based on Erel’s “b4x-network-asyncstreams-b4xserializator” sample-project which you can find here.
I am also using Erel’s “xCustomListView” with LazyLoading. You can find further information about this very versatile object here:
Since the forum is a wealth of useful information, I have of course sometimes used sample-code found here and modified it accordingly to my needs. It would be stupid not to take advantage of this fact. My kudos to those authors.
I have also posted in the forum some of my solutions used in this project.

This was one of the these stupid ideas I had, using libraries, in perhaps not in a common and not intended way to achieve something which I was missing from the IDEs. It is a work-around to facilitate working with multimedia from the client IDE's. Ideal would of course be if some of the functionality provided by my project would already be included in the standard IDE.

Remember to remove the library and the specific debugging code when compiling your release code.

Maybe the download link got lost above, so here it is again:
-Download the B4XIDEViewer program jar-file from here

Update: March 12, 2019
-updated client library with new method: LogCanvas
Update: March 13, 2019
-there is now only one single B4XLib and which works with all platforms

I am still planning to add some more features and once ready, I will publish also the source code of the main app i.e. B4XIDEViewer which was developed in B4J.

If you have any suggestions how to improve this project, please post them here.

Here is a short demo video:


On my (just started) YouTube channel, Moster67's B4X Corner, you can find a full demo too. Please subscribe now! I have lots of ideas for this channel which I think you will find interesting.

Hope you like it.
 

Attachments

  • B4XIDEViewer.b4xlib
    10.4 KB · Views: 682
  • B4AIDEOCVViewer.b4xlib
    3.8 KB · Views: 714
  • B4AIDEViewerClientDemo.zip
    63.2 KB · Views: 630
  • B4iIDEViewerClientDemo.zip
    55.2 KB · Views: 633
  • B4JIDEViewerClientDemo.zip
    55 KB · Views: 668
Last edited:

Gunther

Active Member
Licensed User
Longtime User
Hello,

I tried your creation and followind you given instructions.

I am getting this error when compleing your B4JTestApp. Any clue?

May be there is no B4J lib?

upload_2019-3-11_18-13-9.png
 

MarkusR

Well-Known Member
Licensed User
Longtime User
@Gunther
is #StartAtBoot not something from Android World?
 

moster67

Expert
Licensed User
Longtime User
The client library needed for B4XIDEViewer now works with all 3 platforms (B4A, B4J and B4i). It's a single B4XLib.
Any updates to the client library will from now on be attached to this thread.
 
Last edited:

Swissmade

Well-Known Member
Licensed User
Longtime User
Very nice.
Thanks for this
 

matt humphreys

Member
Licensed User
Longtime User
looks great however I'm not having much success with the video player aspect...
.mp4's don't play for me.
The viewer opens but that's it.
.mp3 audio is ok.
it even plays the audio track from a .flv file...but no video.
I copy each file into the assets directory and invoke as per
bv.LogVideoAudio(File.DirAssets,"Pexelsvideo.mp4")

codec issue maybe?

matt

UPDATE:
works fine on Windows 7, XP has the issue so I'm not sure I really have a problem that is worth pursuing. Thanks.
 
Last edited:

moster67

Expert
Licensed User
Longtime User
codec issue maybe?
Most likely...
in your case, the video file is copied over to the computer and then B4XIDEViewer opens the video-file for playback on the computer (it is using the MediaPlayer provided by JavaFX/B4J). If the codec is not supported, then of course you won't be able to play the video. If you are using the LogVideoAudioStream-method, which passes on a streaming-url, the behaviour would be the same i.e. the codec must be supported.

Maybe I will add a possibility to use another external program installed on the computer such as ffplay (part of ffmpeg) or VLC and then all codecs should be supported. We'll see.

A work-around, and which should work for you, is to use the LogFile-method (like the pdf-transfer in the demo) and when prompted, open the file in B4XIDEViewer. This requires of course that you have a capable (codec wise) video-player such as VLC installed on your computer and which is the default player for video-files. You could also open the directory where the video-file is saved and use "open with".....
 

matt humphreys

Member
Licensed User
Longtime User
just as an update for any XP platform users like myself...more out of interest that anything else...

https://www.oracle.com/technetwork/java/javafx/downloads/supportedconfigurations-1506746.html
specifically the "JavaFX Media" table and codec support to play AAC audio and H.264/AVC video.

Although windows XP is not listed, I can confirm that the "MainConcept trial version (demo codecs from Showcase)" installs said codecs and works just fine...albeit limited to 30 secs audio and watermarked video.
If one was in dire need of that requirement then license appears to be $100 per device.
 

CaptKronos

Active Member
Licensed User
Hi Moster67, any chance of making the viewer window resizable so that we can both view more images and increase the size of the images?
 

moster67

Expert
Licensed User
Longtime User
@CaptKronos
Sorry - I just saw your question.
I am bit busy right now but I will post the source code within short and then you (or anyone) can change the project as per your heart's contents:) and implement new features and improvements.
 
Top