After entering the name of a city, we want to see its weather forecast for the next hours, with a graphic icon. This time VIC-20 uses Arduino R4 Wifi to browse a web site!
Some time ago, I published a tutorial about how to connect to the web with an emulated VIC-20 (using VICE). The availability on the market of Arduino Uno R4 Wifi at a price that’s as little as 25 euros gives us the opportunity to step forward.
If you want to have an idea of what this project does, skip to the end of this page and watch the short video!
Key points on this implementation are:
- Communication is controlled by (and data presented on) the VIC-20.
- We will actually browse a real website under https (our chosen weather website is meteosicuro.it). This service only covers cities in Italy – if you want to browse or get forecasts from a different website you will need to adapt the Arduino software.
- Arduino is in charge to manage all the HTTPS communication, and trims the significant content down to a size that’s acceptable for a VIC-20 to display. Also, I managed to handle the complex character set used by modern websites (utf-8) and cast it to a stream of ascii chars that a VIC-20 can handle natively.
- Connecting Arduino to a PC is not necessary after the initial configuration, it might be useful just for debugging purposes. In the video linked below you see VIC-20 and Arduino powered by their puwer supplies, and nothing more.
- This project might work also on C64, if you make some little adaptation.
Required hardware
- Arduino Uno R4 Wifi
- VIC-20 user port serial cable (as built in project #1)
- A physical VIC-20 (recommended 16K expansion)
- A wi-fi network
As usual, at the bottom at the page you will find links to help you purchasing it.
Building it
No breadboard nor patch cables are necessary this time.
The connections (VIC-20 user port cable) stay the same as in the previous projects so:
- White serial line: Arduino’s digital pin #12
- Red serial line: Arduino’s digital pin #11
- Ground of serial line (black): Arduino power block GND
At this point, it’s time to lauch the Arduino IDE and load the required software.
Arduino software
Load the project software (sketch file) inside the Arduino IDE. The sketch file can be found inside the ZIP you download by clicking below:
Software package: VIC-20 and Arduino project 5
Unpack, then move the folder “VIC_to_Arduino_p5_Weather_Forecasts” into your Arduino projects folder. Then start Arduino IDE and open the sketch “VIC_to_Arduino_p5_Weather_Forecasts.ino” file.
Below the listing of the software. You need to configure it before running, directions and comments will follow.
/*
derived from WifiWebClientSSL example
Connects to a specific website using the WiFi module.
This example is written for a network using WPA encryption. For
WEP or WPA, change the WiFi.begin() call accordingly.
Find the full UNO R4 WiFi Network documentation here:
https://docs.arduino.cc/tutorials/uno-r4-wifi/wifi-examples#wi-fi-web-client
*/
#include "SoftwareSerial.h"
#include "WiFiS3.h"
#include "arduino_secrets.h"
// Arduino configuration
#define WHITECABLE 12 // VIC RX
#define REDCABLE 11 // VIC TX
// Forecast server config
const char server[] = "meteosicuro.it"; // name of the website providing Meteo Forecasts
String script = "/"; // Script part before the city name (from the meteo forecasts server)
const int bufmaxlen = 255; // Max len of a string to be sent to VIC
const int debug = 0; // Set to 1 for debug on serial
const long TIMEOUT = 10000; // 1000 is 1 second, 10000=10 secs. Increase to 20000 if needed
///////please enter your sensitive data in the Secret tab/arduino_secrets.h
char ssid[] = SECRET_SSID; // your network SSID (name)
char pass[] = SECRET_PASS; // your network password (use for WPA, or use as key for WEP)
int keyIndex = 0; // your network key index number (needed only for WEP)
int status = WL_IDLE_STATUS;
// Initialize the Ethernet client library
// with the IP address and port of the server
// that you want to connect to (port 80 is default for HTTP):
WiFiSSLClient client;
unsigned long lastConnectionTime = 0; // last time you connected to the server, in milliseconds
String buffer; // Buffer for chars received from the web
// Define our communication line with VIC-20
SoftwareSerial VICSerial(REDCABLE,WHITECABLE);
/* -------------------------------------------------------------------------- */
void setup() {
/* -------------------------------------------------------------------------- */
pinMode(LED_BUILTIN, OUTPUT);
//Initialize serial and wait for port to open:
Serial.begin(9600);
while (!Serial) {
; // wait for serial port to connect. Needed for native USB port only
}
// check for the WiFi module:
if (WiFi.status() == WL_NO_MODULE) {
Serial.println("Communication with WiFi module failed!");
// don't continue
while (true);
}
String fv = WiFi.firmwareVersion();
if (fv < WIFI_FIRMWARE_LATEST_VERSION) {
Serial.println("Please upgrade the firmware");
}
// attempt to connect to WiFi network:
while (status != WL_CONNECTED) {
Serial.print("Attempting to connect to SSID: ");
Serial.println(ssid);
// Connect to WPA/WPA2 network. Change this line if using open or WEP network:
status = WiFi.begin(ssid, pass);
// wait 5 seconds for connection:
delay(5000);
}
printWifiStatus();
buffer="";
Serial.println("\nREADY! Type a city name on the VIC");
// Set the baud rate to speak to VIC
VICSerial.begin(1200);
// Send message to VIC
VICSerial.println("START}");
}
/* -------------------------------------------------------------------------- */
void loop() {
String astring;
char rx; // Chars from VIC
if (VICSerial.available()) {
astring=VICSerial.readStringUntil(13);
if (astring.length()>0) { // Input from VIC
Serial.println();
Serial.println(">"+astring);
httpComm(astring);
}
}
// Read commands from serial console (if Arduino is connected to PC)
astring = Serial.readStringUntil(13);
astring.trim();
if (astring.length()>0) { // Input from PC
Serial.println();
Serial.println("S>"+astring);
if (astring.equals("*")) { // * is special command = empty buffer
buffer.concat("BREAK}");
VICSerial.println(buffer);
buffer="";
lastConnectionTime=0;
} else { // Use string for search
httpComm(astring);
}
}
read_response();
if (buffer.indexOf('}')>1) { // end of text seen
Serial.print("Got response: ");
Serial.print(buffer.length());
Serial.println(" bytes");
if (debug) {
Serial.println(buffer);
}
//Check for any errors
if (buffer.indexOf("404.php")>1) {
buffer="404 NOT FOUND}";
}
//Extract icon
long int x=buffer.indexOf("//openweathermap.org");
long int y=buffer.indexOf('\"',x+1);
String icon=buffer.substring(x,y);
icon.replace("//openweathermap.org/img/w/","");
icon.replace("d.png","");
icon.replace("n.png","");
//Serial.println(icon);
String compacticon="?";
if (icon.equals("01")) {
compacticon="S"; // Sun
} else if (icon.equals("02")) {
compacticon="X"; // Sun+Cloud
} else if (icon.equals("03")) {
compacticon="C"; // Cloud
} else if (icon.equals("04")) {
compacticon="D"; // Double cloud
} else if (icon.equals("09")) {
compacticon="R"; // Rain
} else if (icon.equals("10")) {
compacticon="V"; // Variable weather
} else if (icon.equals("11")) {
compacticon="T"; // sTorm
} else if (icon.equals("13")) {
compacticon="N"; // sNow
}
//Prepare
x = buffer.indexOf("Meteo per ");
if (x>1) {
y= buffer.indexOf("
",x+1);
buffer=buffer.substring(x,y);
buffer=tagstrip(buffer);
buffer.toUpperCase();
long int z=buffer.indexOf(", POI EVOLVE");
buffer=buffer.substring(0,z);
buffer=compacticon+"."+buffer; // prepend compact icon
buffer.replace(", PREVISIONE PER LE PROSSIME ORE:",":");
buffer.replace(" (MEDIA DA ORA A FINE GIORNATA)","}");
}
if (buffer.length()>bufmaxlen) { // Prevent VIC buffer overrun
buffer=buffer.substring(0,bufmaxlen);
buffer=buffer+"}";
}
if (debug) {
dumpstring(buffer);
Serial.println("----");
}
char bufout[512]; memset(bufout,0,sizeof(bufout)); // Clear
char bufixed[512]; memset(bufixed,0,sizeof(bufixed)); // Clear
// Copy string buffer into char array
for (int i=0;buffer[i] && (i<511);i++) {
bufout[i]=buffer.charAt(i);
}
utf8toascii(bufout,bufixed);
// Replace ° with G and à with A
for (int i=0;uint8_t q=bufixed[i];i++) {
if (q==176) bufixed[i]=(char)71; //G
if (q==224) bufixed[i]=(char)65; //G
}
Serial.println(bufixed);
if (debug) {
dumpascii(bufixed);
}
VICSerial.println(bufixed);
buffer="";
lastConnectionTime=0;
}
}
/* -------------------------------------------------------------------------- */
void printWifiStatus() {
/* -------------------------------------------------------------------------- */
// print the SSID of the network you're attached to:
Serial.print("SSID: ");
Serial.println(WiFi.SSID());
// print your board's IP address:
IPAddress ip = WiFi.localIP();
Serial.print("IP Address: ");
Serial.println(ip);
// print the received signal strength:
long rssi = WiFi.RSSI();
Serial.print("signal strength (RSSI):");
Serial.print(rssi);
Serial.println(" dBm");
digitalWrite(LED_BUILTIN, LOW); // turn the LED off (HIGH is the voltage level)
}
void httpComm(String astring) {
// close any connection before send a new request.
// This will free the socket on the NINA module
client.stop();
// if there's a successful connection:
if (client.connect(server, 443)) {
Serial.print("fetching: https://");
Serial.print(server);
Serial.println(script+urlencode(cookCityName(astring)));
// send the HTTP GET request:
client.println("GET "+script+urlencode(cookCityName(astring))+" HTTP/1.0");
client.print("Host: "); client.println(server);
client.println("User-Agent: ArduinoWiFi/1.1");
client.println("Connection: close");
client.println();
// note the time that the connection was made:
lastConnectionTime = millis();
//Serial.println("connection time:"+lastConnectionTime);
} else {
// if you couldn't make a connection:
Serial.println("connection failed");
}
buffer="";
}
// Read chars received from the web
void read_response() {
if (debug && (lastConnectionTime>0)) {
Serial.print("Buffer size:");
Serial.print(buffer.length());
}
if (client.connected()) {
while(client.connected()) {
while (client.available()) {
/* actual data reception */
char c = client.read();
buffer.concat(c);
}
}
buffer.concat("}"); // Terminates buffer
return;
}
if (lastConnectionTime>0) {
if ((millis() - lastConnectionTime) > TIMEOUT) {
Serial.println("Timeout");
buffer.concat("TIMEOUT}");
lastConnectionTime=0;
client.stop();
} else {
Serial.print("Elapsed Msec: ");
Serial.println(millis()-lastConnectionTime);
}
}
}
/*
urlencode by Steve Nelson
URLEncoding is used all the time with internet urls. This is how urls handle funny characters
in a URL. For example a space is: %20
These functions simplify the process of encoding and decoding the urlencoded format.
Prerequisite Examples:
https://github.com/zenmanenergy/ESP8266-Arduino-Examples/tree/master/helloworld_serial
*/
String urlencode(String str)
{
String encodedString="";
char c;
char code0;
char code1;
char code2;
for (int i =0; i < str.length(); i++){
c=str.charAt(i);
if (c == ' '){
encodedString+= '+';
} else if (isalnum(c)){
encodedString+=c;
} else{
code1=(c & 0xf)+'0';
if ((c & 0xf) >9){
code1=(c & 0xf) - 10 + 'A';
}
c=(c>>4)&0xf;
code0=c+'0';
if (c > 9){
code0=c - 10 + 'A';
}
code2='\0';
encodedString+='%';
encodedString+=code0;
encodedString+=code1;
//encodedString+=code2;
}
yield();
}
return encodedString;
}
// Prepares city name to be used as a parameter for the query: all lowercase, no spaces
String cookCityName(String aname) {
aname.toLowerCase();
aname.replace(' ','-');
return aname;
}
String tagstrip(String mystring) {
int tagLevel = 0;
String outputString="";
for (unsigned i = 0; mystring[i]; i++)
{
if (mystring[i] == '<')
{
tagLevel++;
}
else if (mystring[i] == '>' && tagLevel > 0)
{
tagLevel--;
}
else if (tagLevel == 0)
{
outputString += mystring[i];
}
}
return outputString;
}
void dumpstring(String astr) {
char c;
for (int i=0;c=astr.charAt(i);i++) {
Serial.print(i);
Serial.print(") ");
Serial.print(c);
Serial.print("--");
Serial.println(((uint8_t)c));
}
}
void dumpascii(char* str) {
char c;
for (int i=0;c=str[i];i++) {
Serial.print(i);
Serial.print(") ");
Serial.print(c);
Serial.print("--");
Serial.println(((uint8_t)c));
}
}
//converts a single utf8 character to ascii
uint8_t utf8Ascii(uint8_t ascii) {
const uint8_t degCascii = 0x8F;
const uint8_t degFascii = 0x90;
static uint8_t cPrev;
uint8_t c = '\0';
if (ascii < 0x7f || ascii == degCascii || ascii == degFascii) {
cPrev = '\0';
c = ascii;
} else {
switch (cPrev) {
case 0xC2: c = ascii; break;
case 0xC3: c = ascii | 0xC0; break;
case 0x82: if (ascii==0xAC) c = 0x80; // Euro symbol special case
}
cPrev = ascii; // save last char
}
return(c);
}
// picks every character from char *source,converts it and writes it into char* destination
void utf8toascii(const char* source, char* destination)
{
int k=0;
char c;
for (int i=0; source[i]; i++)
{
c = utf8Ascii(source[i]);
if (c!=0)
destination[k++]=c;
}
destination[k]=0;
}
// do not copy anything below this line
//-----------------------
.
Before analysing the code, we must be aware of the limitations. Web pages today can be worth of several hundreds Kbytes of text,. We wanted a short weather forecast so the information we actually need is just about 100-200 characters long, enough that can fit within both the memory limits and the screen size of a VIC-20.
Also, given the size of the expected response, we will be able to store the entire web data inside a string variable (on the VIC-20 strings are limited to 255 chars). If not, we could have printed the web data directly while receiving it, but however the VIC screen is very limited: 22 columns by, say, 20 rows yelds however 440 chars as a maximum display area. We could double it with 40 columns special software, but you got the idea.
From how it stands, you can see why the following points hold:
- Information gathered from the web must be processed on the Arduino and trimmed down to an acceptable size before it is sent to the VIC-20.
- We needed a web site whose page structure was predictable and easy enough for an Arduino to parse. meteosicuro.it was a good choice but the code can be adapted also to use other websites.
- In order to be able to tell the VIC-20 when the response has been completed we decided to use a special character as a terminator (it’s the closing bracket “}“). You will see later in the VIC-20 code that actually any ascii character whose code is above 123 will interpreted as a response terminator.
So, here are a few comments to the code:
Configuration
Arduino will connect to a WiFi network so before starting you have to type the SSID (Network name) and WiFi password into the configuration. For a matter of elegance and following Arduino’s tutorials examples, this configuration is done inside the arduino_secrets.h file, you should see it open as a tab inside our Arduino IDE after opening the project. Just replace the dummy strings below with the ones that are right for your Wifi:
#define SECRET_SSID "your_Wifi_SSID" #define SECRET_PASS "********"
Back to the main code file,
const int debug = 0;
can be changed to 1 when Arduino is connected to your PC in case you want to see what happens inside it. We will get back to this later.
Also, if you have a slow network connection and encounter timouts, you can also increase the TIMEOUT constant in order to avoid locking VIC-20 too long in the wait phase.
ANALYSIS OF ARDUINO CODE
The setup() section Connects to the Wifi, then connects to the VIC-20 and sends a START message to switch the VIC-20 program into input mode, just in case it has been run before Arduino is up and running.
The loop() section reads input from the VIC, and if it’s got a city name it sends it to the website in order to get forecasts via the httpComm() function. That function only sends the request, the response data will be gathered later by read_response().
Also, the PC Serial line is read. You can type a city name on the PC as well, so you can test the thing even without a VIC attached. You can force the buffer to be sent to VIC’s communication line by entering an asterisk “*”.
read_response() gets the web data inside a buffer string variable. Since the function is inside the loop, in case of slow connections it can be called several times, but a certain point the timout will be detected and a TIMEOUT message will be sent to the VIC.
The code following the read_response() call activates after seeing the end-of-response character “}” (this is due to the asynchronous nature of the read_response function) then it performs all the necessary trimming and cleaning on the text to be sent to the VIC.
Weather icon detection
First of all, the weather icon. Software on the Arduino seeks for a special META tag in the response’s HTML to see what is the icon that best describes the forecast. It turns out that our chosen website, meteosicuro, uses openweathermap and its icons to display weather forecasts. Every weather status (sun, rain, etc.) is represented with a PNG icon whose filename contains a code number from 01 to 13. So we extract this number for deciding which icon to display on the VIC – it will be represented with a letter (S for Sun, R for Rain, etc) and later communicated placing the icon letter at the head of the response.
For example, if the forecast for Rome is sunny, the icon used on the website will be something like:
01d.png
So our extracted icon code is 01. This gets futher transformed to a letter code to be sent to the VIC, so in this case 01 –> S (for Sun).
The response sent to the VIC will be something like this:
S.FORECAST FOR ROME (RM): SUNNY SKY…
Note the trailing “S.” The presence of the dot as second char will tell VIC that a weather icon has to be displayed, the letter before the dot will tell which icon has to be shown.
Weather string transformation
After identifying the weather icon the buffer string will be simplified. The received HTML response (including HTTP headers) gets trimmed pulling out the first
paragraph content, that’s the forecast normally displayed at the top of the page. Then it is turned into UPPERCASE for a proper display on the VIC standard petscii charset, and finally a few unneeded phrases get removed with a few buffer.replace().
Also, since we need to limit the string length, it will get trimmed if it is longer than bufmaxlen=255.
Since as we mentioned above every ascii char with code > 123 will terminate the forecast display, we need to transform the symbols ° and à that can be found inside the forecast string. Here, please note that in a web text that’s encoded in utf-8 they occupy two bytes. A problem! So I had to use a special function to cast the utf-8 text we got from the web to 8-bit ascii, then scan and replace the two symbols above.
The buffer string is now ready to be sent to the VIC!
httpComm()
This function actually connects under HTTPS. The url that is called is like:
https://meteosicuro.it/cityname
where the cityname is lowercase and spaces have been transformed into dashes – the cookCityName() function does exactly this, plus the whole city name gets urlencoded in order to avoid using exotic chars on the URL.
You might use the meteosicuro.it website too and compare results with what you see on the VIC-20 screen. You will notice the information is the same, although on the website you have way more data.
The function also records the time when the connection was made so that we can detect when the timeout has passed.
VIC-20 Software
VIC-20 software can be found inside the software package you have downloaded: FORECAST40. Transfer them onto a diskette or your SD2IEC device and you’re ready to go. If you can’t, you might type the programs using the listings below.
5 PRINT"{CLEAR}{DOWN*2}{SPACE*2}METEO FORECASTS BY{SPACE*6}METEOSICURO.IT":PRINT"{DOWN*3}{SPACE*4}PRESS ANY KEY"
6 GETK$:IFK$=""THEN6
10 OPEN2,2,0,CHR$(8)+CHR$(0)
15 MV=4096:GOSUB1000
17 REM***
18 REM*** MAIN LOOP
20 GET#2,A$:GETK$:IFA$=""ANDK$=""THEN20
22 IFK$<>""THEN28.KEYPRESSED
23 IFA$=""THEN20
25 IFASC(A$)<123THENPOKEMV,ASC(A$):B$=B$+A$:GOTO20
26 GOSUB2000
28 B$=""
30 PRINT"{HOME}{DOWN*17}{SPACE*54}";
32 INPUT"{HOME}{DOWN*17}{PURPLE}CITY{BLUE}";S$
35 IFS$="STOP"THENEND
38 IFLEN(S$)>0THENPOKEMV,30
40 PRINT#2,S$:S$=""
50 GOTO20
999 REM****** PREP
1000 PRINT"{CLEAR} {DOWN*4}WAITING FOR START"
1100 RETURN
1999 REM***PRINT FOREC
2000 PRINT"{CLEAR}{BLUE} {DOWN}";
2010 IFMID$(B$,2,1)<>"."THEN2100
2015 IC$=LEFT$(B$,1):B$=RIGHT$(B$,LEN(B$)-2)
2040 IFLEN(B$)<3THEN2199
2050 IFIC$="S"THENIC$="{YELLOW}(Q)"
2051 IFIC$="X"THENIC$="{YELLOW}(Q){CYAN}({CM +})"
2052 IFIC$="C"THENIC$="{CYAN}({CM +*2})({CM +})"
2053 IFIC$="D"THENIC$="{PURPLE}({CM +*2}){CYAN}{CM +})"
2054 IFIC$="R"THENIC$="{BLACK}/////"
2055 IFIC$="V"THENIC$="{YELLOW}*{CYAN}({CM +*2})"
2056 IFIC$="T"THENIC$="{RED}^@#V*"
2057 IFIC$="N"THENIC$="{CYAN}*.*.*"
2060 PRINT"{HOME}{DOWN*2}{GREEN}";IC$;
2100 PRINT"{HOME}{BLUE}{DOWN*4}"B$:B$=""
2110 GET#2,A$:IFA$<>""THEN2110.FLUSH
3000 RETURN
The code is designed to run on a 16K VIC-20 but it might work also on unexpanded. In order to make it run on unexpanded, just edit the contents of line 15 setting MV=7680 and it will probably fit without any problems.
A few comments on the code as usual:
lines 5-6: intro screen
lines 10-15: opening of serial connection and call to preparation subroutine
lines 20-50: main loop. If data is received from serial line (line 25), add it to th buffer B$. If a key is pressed (K$), switch to input mode at line 30. When a city name string has been entered (S$) send it over the line then print an arrow up on the top-left corner, and wait for response.
line 1000: initial screen
line 2000: prints ut the forecast. depending on the trailing letter+dot it prints out a weather icon (sorry for ugliness). Line 2110 flushes any chars in the receive buffer of serial line after the end-of-response char.
Using the thing
- Connect VIC to Arduino when they are both off
- Turn up the VIC-20, LOAD the software, RUN it, press any key
- Turn on Arduino (either connect power or connect it to your PC – I assume the sketch have been uploaded into it already). Important: If Arduino is connected to a computer, remember to open the serial monitor with the button and check that speed is set to 9600. Arduino Uno R4 does not like to communicate with you at 1200 which is used for special purposes, so I had to change PC serial speed with respect to previous projects.
- The VIC should turn into input mode asking for a city name a soon as Arduino starts. If not, you can force VIC to input mode by hitting RETURN at any time.
- Enter city name of an italian city. It’s better to use italian names, such as Bologna, Napoli, Roma, Firenze, Aosta… Although the web site might reckognize english names as Rome it uses mostly italian names.
- After asking for the CITY you will see a arrow-up sign in the corner. This means that connection to the web site is being made. After a few seconds you will see the response on the screen. The response will be in italian, like it is on the original website.
- If the city name is not found on the website, you will get a 404 not found
- Occasionally, on timeout or www communication issues you might get the raw content of the web response (well, actually only the first part). The output will be rather ugly to see but press C= and SHIFT together to switch to the alternate lower/uppercase char set and you will be able to read it.
- Enter STOP as a city name to quit using the program
Conclusions
We have seen how to connect a VIC-20 and an Arduino Uno R4 Wifi allowing us to browse a specific website for getting meteo forecasts for italian cities.
As usual, I made a short clip on YouTube in order to let you give a glance at how it works.
This project opens up a wealth of possibilities because with it we go directly onto a real web site using up-to-date technologies. After using this thing a while you see it’s robust enough and you really have the feeling you are browsing a website… even though in a unique way.
Of course we have several limitations. I have shown an approach but there can be others. Arduino Uno R4 Wifi is not the only board that we can use. Also there are other libraries that an be used to communicate on the web. On the VIC-20 side, we can try to extend the limits beyond the 255 buffer characters used here and make a better use of the memory, the screen, and even the serial line!
Keep on experimenting!
Loading...