Facebook Pixel

AN-00132 ViSi Reading Text Information from Webpage

Description This application note demonstrates a way of accessing webpages and saving the contents into a micro-SD card file.
Supported Processor DIABLO16
Supported Environment ViSi
Difficulty Difficult


File Downloads


The coverage of this application note demonstrates the way of accessing webpages and saving the content into a file in the micro-SD.


Pre-requisite Application Note:

ViSi Connecting the CC3000 to an AP

ViSi Resolving Remote Address

ViSi TCP Socket Connections

Before getting started, the following are required:

Visit www.4dsystems.com.au/products to see the latest display module products that use the Diablo16 processor. The display module used in this application note is the uLCD-32PTU, which is a Picaso display. This application note is applicable to Diablo16 display modules as well.

for non-gen4 displays(uLCD-xxx)

for gen4 displays (gen4-uLCD-xxx)

When downloading an application note, a list of recommended application notes is shown. It is assumed that the user has read or has a working knowledge of the topics presented in these recommended application notes.

  Application Overview

In this application project, a set of text information is being accessed from the internet and then saved to a file in the micro-SD. The target webpage content type used in this application is limited to a text-based webpage content and information. This application note is limited to the related basics of the HTTP 1.1 as used in the application project. It is not intended to be a reference material for the aforementioned topic.


  Setup Procedure

For instructions on how to launch Workshop 4, how to open a ViSi project, and how to change the target display, kindly refer to the section “Setup Procedure” of the application note

ViSi Getting Started - First Project for Picaso and Diablo16


  Create a New Project

For instructions on how to create a new ViSi project, please refer to the section “Create a New Project” of the application note

ViSi Getting Started - First Project for Picaso and Diablo16


  Design of the Project

Layout of the Project

In this project couple of objects were used to provide a simple user interface form for the CC3000. In this project the information contained in one webpage is being downloaded using the CC3000 and then saved to a micro- SD.

Connection Status

These icons show the status of connecting to the network. The progress spinner is used to indicate that the processes under the connection icon is currently running or being executed.


The ViSi-based CC3000 Program

In this part of the application note statements that were written in 4DGL will be shown.  These statements are used to produce the functionality desired for this project application. Each of the sub-routines has a group of statements that are intended for a designated purpose only.

The HTTPS /1.1 related commands

The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems.[1]HTTP is the foundation of data communication for the World Wide Web.

After being able to connect to a Wi-Fi network and to successfully connect a remote host to a socket, we will now try to take data from the internet to the display device. For demonstration purposes, we will only make a copy of the information downloaded to a file in the micro-SD.

Let this us point to the important commands used in the pre-requisite application notes. Under the sub-routine wifi_connect(), commands are used to connect the CC3000 to a certain WI-FI network. The command is given by the statement below.


After connecting to the network, the next step is to retrieve the remote host address. Following a successful query of the remote host address, we then open a communication socket according to the communication protocol that we are to use either TCP or UDP data communication is supported by the CC3000. For this application note a TCP data communication is being established with the remote host.


If a socket is successfully opened using the wSOCKET_OPEN command the next step to take is connecting the resulting IP address of the remote host. Connecting to a remote host will require the use of the wSOCKET_CONNECT command.

Having been able to establish connection to the remote host, we can now proceed with requesting information from the remote host. Above are the statements used to request the content of a webpage located in the specified website host.

Let us try to interpret the meaning of the statements shown above. The HTTP 1.1 protocol involves the command GET. The “GET” command is a method that can be used to retrieve whatever information in the form of an entity that is identified by the Request-URL.  In this application project we are requesting the content of the URL:


To do we need to separate the page content URL with the Host address. And send the informations separately. The first one to be sent will be the URL of the desired page and preceeded by the GET method of HTTP 1.1.

After the ‘GET’ related command has been sent, this is followed by the ‘Host’ address information.

To better understand this the user can refer to this additional reading –

Hypertext Transfer Protocol -- HTTP/1.1

If the GET and Host statements have been sent, the next is to add a last statement that contains a ‘\r\n’ statement. Now that we have sent all the statements needed to request for the resources of a webpage, let us now move to reading the data from the CC3000 and saving it to a file in a micro-SD.


Next is read the available data on the CC3000. To read the available information from the CC3000 we use the wREAD_DATA command. This command checks the CC3000 for availability of data and then followed by a continuous read according to the length specified.

The statements shown above puts the read characters to an array named data_ and then saves them one by one on the text file previously created. The file_Close(file) statement saves and closes the created text file.


  Run the Program

Refer to the section "Connect the WiFi Module to the uLCD-35DT" of the application note

ViSi Connecting the CC3000 to an AP

for the connection diagram of the WiFi module to the 4D display.

For instructions on how to save a ViSi project, how to connect the target display to the PC, how to select the program destination, and how to compile and download a program, please refer to the section “Run the Program” of the application note

ViSi Getting Started - First Project for Picaso and Diablo16