Can browser backgrounds be transparent?

[rbytes]

I experimented but could not make browser backgrounds transparent. Does anyone know if it can be done?
If you look at my WeatherScope post in Basic Programs, you can see that the ten browsers on screen showing the daily forecasts all have white backgrounds. I think it would look better if just the text could be seen on the image background. (I might have to change the color to white to make it more readable)

If it can't be done, I will change the browsers to fields.

[GeorgeMcGinn]

Can SmartBASIC BROWSER recognize Style Sheets?

You do not have to put these into two separate files, but if you put them in one file, the style sheet code goes first.

I think this should resize to the window size of your mobile browser. Your WeatherScope has 10 browsers, so you can put a different image in each one if you want.


If so, you can use something like the following (index.html):

Code: Select all

<header>
      <span>Developing and Designing</span>
      <h1>George McGinn | SmartBASIC Developer</h1>
      <nav>
        <ul>
          <li><a href="#" class="home">Home</a></li>
          <li><a href="#" class="about">About</a></li>
          <li><a href="#" class="contact">Contact</a></li>
        </ul>
      </nav>
    </header>

Then, the Style Sheet, which can be in the same HTML file or in a .CSS as follows (style.css):

Code: Select all

*{
  box-sizing:border-box;
}
header{
  max-width:100%;
  width:100%;
  padding:100px 25px;
  height:500px;
  background-color:blue;
  color:#eacb19;
  text-align:center;

  background-image:url('../img/sunset.jpg');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  width:100%;
}
header h1{
  text-shadow:5px 8px 10px green;
}
header ul{
  list-style:none;
  padding-top:4em;
  margin: 0 10px;

}
header li{
  display:inline-block;
}

The idea with webpages is if you set a background image, then your webpage should behave like it's transparent.

If this does not work, I can look up the older, pre-HTML5 version.

George.

[rbytes]

I could do that, but then each browser window would display an entire image. I want one full-screen background image that can show through all 10 browser windows. From the documentation, I don't think that is possible. I wrote an alternate version of WeatherScope this afternoon that uses fields instead of browsers. I will post it soon. The screen shot is attached.

You may notice another display limitation. I show the weather icons as sprites, and I can't get them to display on top of the fields! They are now seen through the white field backgrounds which have their alpha set to .4. I tried making the fields transparent, but the text was then too hard to read. So the weather icons are faded slightly by the semi-transparent fields covering them. It is the best compromise I can figure out so far. I'm not sure if this is an iOS or just a smart Basic limitation.

[GeorgeMcGinn]

As far as the icon images that show the weather, make them image tags instead of sprites. You can specify its size, location in the browser.

You program it top-bottom, but if you use the table tag, then create 2 table rows with five table data tags each, each table acts like a mini-browser where you can put text, and images can be positioned anywhere, same as text.

You can even put in an underline background image for the entire page as well.

A simple sample looks like this page: https://cosmologyandspace.wordpress.com ... on-photos/

But here I show a photo, then the next table data has text and a link to a full page. Some have many images with the text wrapped around them.

Post the code that produced the example below and let me see if I can come up with something else.

George.

[rbytes]

I think I improved the final look with another change. There is a lot of code to sift through to see what this program is doing so I will list the changes I made.

1. In the first version I posted, each of the 10 forecast days was displayed in its own browser, in two rows of 5. That meant that I had to build HTML code from the json weather file. The weather icon images were displayed with image tags. But the browsers could not be made partially transparent.

2. In the second version, I used 10 fields, each positioned and sized exactly the same as the browser it replaced. I had to make a simple text file of the weather forecast to display in each field. The fields were set at an alpha of .5, allowing the full-screen cloud background to show through. The weather icon images were downloaded and then loaded into sprites. They were positioned in the top right corner of each forecast window. The one disadvantage is that they were behind the fields, so looked slightly greyed-out.

3. In this version, I made the fields completely transparent. I added a semi-transparent rectangle behind each field - a sprite set to an alpha of .5 The white rectangular image was created exactly the right size and shape by taking a screen shot of version two, loading it into ArtStudio, selecting the exact area of one field, filling it with white and saving it as an image. Why did I go to all that trouble? I wanted to have the weather icons appear on top of the rectangles, not behind them. See the attached image and compare it to the previous one I posted. Look particularly at the icon on the Saturday forecast. The thundercloud is much darker than in the previous version.

Here is the code:

Code: Select all

/*
WeatherScope V1.2b
by ricardobytes, April 2017

Source: Apixu Weather Service

Get forecast with variable days = number of days 
1 to 10

"http://api.apixu.com/v1/forecast.json?key=d848a4fc1cce4240acc41833162411&q="&city$&"days="&days
"http://api.apixu.com/v1/forecast.json?key=e49b04c03f114ae39d4210711170104&q="&city$&"days="&days

Apixu will provide up to a 10-day forecast for each 
locale, with a comprehensive array of weather data. The bonus 
astro and hour-by-hour data are not used in this version.

V1.2
Browsers replaced by fields with white 
semi-transparent filled rectangles behind them.
Buttons also made semi-transparent

V1.1
Next, Prev and Home buttons added
so user can select any of 10 locations
or return to home location

V1.0
Ten browsers were created to display the
ten forecast days for each city
Fresh button added to refresh data

Check out the forecast details at https://www.apixu.com/doc/forecast.aspx
*/

SET ORIENTATION LANDSCAPE
option sprite pos central
GET SCREEN SIZE W,H
laun$=LAUNCHER$ ()
dev$=DEVICE_TYPE$()
iostest=0                ' set to 1 to test other iOS devices on iPad
IF iostest THEN
  dev$=""
  W=667!H=375          ' to test iPhone 6
ENDIF
IF laun$="desktop" AND dev$ <>"iPad" THEN H*=.9
rw=W/1024!rh=H/768
SET TOOLBAR OFF
OPTION BASE 1
SET BUTTONS CUSTOM
lf$=chr$(10)
q$=CHR$(34)
mark=1
days=10
DIM urban$(10)
DIM months(12)
DIM days$(7)
DIM format$(10)
selcity=1
cr$=CHR$(10)
GRAPHICS
GRAPHICS CLEAR 0,0,.3
if dev$="iPad" then imy=0 else imy=-30
draw image "scope.jpg" at 0,imy scale rw*.5
DRAW COLOR 0,0,0
IF dev$="iPad" THEN
  hm=4       ' horizontal margin
  vm=95     ' vertical margin
  col=8
  lshift=0
  heightshift=10
  titleshift=0
  tvshift=0
  bvshift=20
ELSE
  hm=4*rw    ' horizontal margin
  vm=150*rh-20  ' vertical margin
  col=5
  lshift=5
  heightshift=25
  titleshift=-10
  tvshift=10
  bvshift=40
ENDIF
SET BUTTONS FONT NAME "CabinSketch-Bold"
SET BUTTONS FONT SIZE 30*rw
fill alpha .5
BUTTON "refresh" TEXT "FRESH" AT 100*rw,bvshift+710*rh SIZE 100*rw,60*rh
BUTTON "prev" TEXT "PREV" AT 285*rw,bvshift+710*rh SIZE 100*rw,60*rh
BUTTON "home" TEXT "HOME" AT 465*rw,bvshift+710*rh SIZE 100*rw,60*rh
BUTTON "next" TEXT "NEXT" AT W-380*rw,bvshift+710*rh SIZE 100*rw,60*rh
BUTTON "quit" TEXT "QUIT" AT W-200*rw,bvshift+710*rh SIZE 100*rw,60*rh
FIELD "city1" TEXT "" AT 60*rw,25*rh SIZE 240*rw,40*rh RO
FIELD "city1" BACK ALPHA 0
FIELD "city1" FONT COLOR 1,1,1
FIELD "city1" FONT SIZE 25*rw
FIELD "city2" TEXT "" AT 800*rw,25*rh SIZE 240*rw,40*rh RO
FIELD "city2" BACK ALPHA 0
FIELD "city2" FONT COLOR 1,1,1
FIELD "city2" FONT SIZE 25*rw
fname$="apixuf_"
DRAW COLOR 0,1,1
DRAW FONT SIZE 50*rw
DRAW FONT NAME "CabinSketch-Bold"
DRAW TEXT "WeatherScope" AT 345*rw+titleshift,20*rh-tvshift

cycle:
temp=col
FOR u=1 TO 10
  READ urban$(u)
  N$="browse"&u
  x=hm+col
  col+=w/5
  IF u=5 THEN col=temp
  y=vm
  IF u>5 THEN y=vm+H/2.6+4*rw+heightshift
  'GOSUB parse  ' save files, modify font sizes and colors
  sprite "panel"&u load "panel.jpg"
  sprite "panel"&u at X+90*rw,Y+140*rh scale .5*(rw+rh)/2
  sprite "panel"&u alpha .5
  sprite "panel"&u show
  FIELD N$ AT X+lshift,Y SIZE (W/5.5),(H/2.7)+heightshift ML
  FIELD N$ back alpha 0
  field N$ font size 18*(rh+rw)/2
  'FIELD N$ font color 1,1,1
NEXT u

GOSUB monthmax
GOSUB getdays
GOSUB today
GOSUB tendays
GOSUB readcity
GOSUB parse  ' save files, modify font sizes and colors

DO

IF BUTTON_PRESSED ("refresh") THEN
  RESTORE
  FOR t= 1 TO 10
    N$="browse"&t
    FIELD N$ TEXT "Refreshing page"
  NEXT t
  PAUSE 1
  GOSUB readcity
  GOSUB parse
ENDIF
IF BUTTON_PRESSED ("prev") THEN
  selcity-=1
  IF selcity<1 THEN selcity=10
  GOSUB readcity
  GOSUB parse
ENDIF
IF BUTTON_PRESSED ("home") THEN
  selcity=1
  GOSUB readcity
  GOSUB parse
ENDIF
IF BUTTON_PRESSED ("next") THEN
  selcity+=1
  IF selcity>10 THEN selcity=1
  GOSUB readcity
  GOSUB parse
ENDIF
IF BUTTON_PRESSED("quit") THEN
  IF laun$="desktop" THEN
    IF FILE_EXISTS("/launch") THEN
      RUN "/-Launch.sb"
    ELSE
      EXIT
    ENDIF 
  ENDIF
  END
ENDIF

SLOWDOWN
UNTIL 0

END

' save weather data to a file
' then load it and replace certain words, colors and font sizes
' also convert units to standard values

parse:
  ' read the 10-day forecast from Apixu for a specific locale and save it
  HTTP a$ GET forecast$
  IF FILE_EXISTS(fname$&city$) THEN FILE fname$&city$ DELETE
  FILE fname$&city$ WRITELINE forecast$
  FILE fname$&city$ SETPOS 0
  'a$=city$&lf$
  FOR t=1 TO 50
    FILE fname$&city$ READLINE temp2$
    temp$&=temp2$
  NEXT t

    daye=CURRENT_DAY()
    option sprite pos central
    FOR t= 1 TO 10
    dater$=format$(t)
    daye+=1
    IF daye>7 THEN daye=1
    srch$=t-2
    
    fnd=INSTR(temp$,dater$,mark)       ' mark sets the start of the search
    IF fnd<>-1 THEN
      mark=fnd
      stpt=INSTR(temp$,"date"&q$,fnd)+23    ' start of date string
      enpt=INSTR(temp$,",",stpt)     ' end of date string
      a$=days$(daye)&lf$


    fnd=INSTR(temp$,"icon",mark)
    IF fnd<>-1 THEN
      stpt=INSTR(temp$,":",fnd)+2    ' start of icon name string
      enpt=INSTR(temp$,",",stpt)-1   ' end of icon name string
      tpic$=MID$(temp$,stpt,enpt-stpt)
      picname$="image"&t&".png"
      web$="http:"&tpic$
      HTTP web$ GETDIM M
      FILE picname$ WRITEDIM M
      sprite "spr"&t load picname$
      if t>5 then
         vmv=303*(rh+rw)/2
         hmv=t-5
      else
         vmv=-2
         hmv=t
      endif
      sprite "spr"&t at (w/5)*(hmv-1)+150*rw,132*rh+vmv scale rw
      sprite "spr"&t show
      a$&=dater$&lf$
      
    ENDIF

    fnd=INSTR(temp$,"text",mark)
    IF fnd<>-1 THEN
      stpt=INSTR(temp$,":",fnd)+2    ' start of condition string
      enpt=INSTR(temp$,",",stpt)-1     ' end of condition string
      a$&=MID$(temp$,stpt,enpt-stpt)&lf$
    ENDIF

    fnd=INSTR(temp$,"maxtemp_c",mark)
    IF fnd<>-1 THEN
      stpt=INSTR(temp$,":",fnd)+1    ' start of maximum temperature string
      enpt=INSTR(temp$,",",stpt)     ' end of maximum temperature string
      a$&="High: "&MID$(temp$,stpt,enpt-stpt)&" C"&lf$
    ENDIF

    fnd=INSTR(temp$,"mintemp_c",mark)
    IF fnd<>-1 THEN
      stpt=INSTR(temp$,":",fnd)+1    ' start of minimum temperature string
      enpt=INSTR(temp$,",",stpt)     ' end of minimum temperature string
      a$&="Low: "&MID$(temp$,stpt,enpt-stpt)&" C"&lf$
    ENDIF

    fnd=INSTR(temp$,"maxwind_kph",mark)
    IF fnd<>-1 THEN
      stpt=INSTR(temp$,":",fnd)+1    ' start of windspeed string
      enpt=INSTR(temp$,",",stpt)     ' end of windspeed string
      a$&="Wind: "&MID$(temp$,stpt,enpt-stpt)&" kph"&lf$
    ENDIF

    fnd=INSTR(temp$,"avghumidity",mark)
    IF fnd<>-1 THEN
      stpt=INSTR(temp$,":",fnd)+1    ' start of visibility string
      enpt=INSTR(temp$,",",stpt)     ' end of visibility string
      a$&="Humidity: "&MID$(temp$,stpt,enpt-stpt)&" %"&lf$
    ENDIF

    fnd=INSTR(temp$,"totalprecip_mm",mark)
    IF fnd<>-1 THEN
      stpt=INSTR(temp$,":",fnd)+1    ' start of precipitation string
      enpt=INSTR(temp$,",",stpt)     ' end of precipitation string
      a$&="Precipitation: "&MID$(temp$,stpt,enpt-stpt)&" mm"&lf$
    ENDIF

    fnd=INSTR(temp$,"avgvis_km",mark)
    IF fnd<>-1 THEN
      stpt=INSTR(temp$,":",fnd)+1    ' start of visibility string
      enpt=INSTR(temp$,",",stpt)     ' end of visibility string
      a$&="Visibility: "&MID$(temp$,stpt,enpt-stpt)&" km"&lf$
    ENDIF

    fnd=INSTR(temp$,"sunrise",mark)
    IF fnd<>-1 THEN
      stpt=INSTR(temp$,":",fnd)+2    ' start of visibility string
      enpt=INSTR(temp$,",",stpt)-1     ' end of visibility string
      a$&="Sunrise: "&MID$(temp$,stpt,enpt-stpt)&lf$
    ENDIF

    fnd=INSTR(temp$,"sunset",mark)
    IF fnd<>-1 THEN
      stpt=INSTR(temp$,":",fnd)+2    ' start of visibility string
      enpt=INSTR(temp$,",",stpt)-1     ' end of visibility string
      a$&="Sunset: "&MID$(temp$,stpt,enpt-stpt)&lf$
    ENDIF

      'mark=fnd
      N$="browse"&t
      FIELD N$ TEXT a$
    ELSE
      a$&=lf$&"Not Available"
    ENDIF
    
  NEXT t
RETURN

today:
  year=CURRENT_YEAR()
  tu$=year&"-"
  month=CURRENT_MONTH ()
  IF month<10 THEN tu$&="0"&month&"-" ELSE tu$&=month&"-"
  date=CURRENT_DATE ()
  IF date<10 THEN tu$&="0"&date ELSE tu$&=date
  format$(1)=tu$
RETURN

tendays:

'debug pause
FOR t=1 TO 9
  tu$=year&"-"
  moonth=month
  date=CURRENT_DATE ()+t
  IF date>months(month) THEN
    date=date-months(month)
    moonth=month+1
  ENDIF
  IF moonth<10 THEN tu$&="0"&moonth&"-" ELSE tu$&=moonth&"-"
  IF date<10 THEN tu$&="0"&date ELSE tu$&=date
  format$(t+1)=tu$
NEXT t
RETURN

monthmax:
  FOR t=1 TO 12
    READ temp
    months(t)=temp
  NEXT t
  IF CURRENT_YEAR()%4=0 THEN months(2)=28
RETURN

getdays:
FOR t=1 TO 7
  READ temp$
  days$(t)=temp$
NEXT t
RETURN

readcity:
  ' look for city
  '  a$="http://api.apixu.com/v1/search.json?key=d848a4fc1cce4240acc41833162411&q="&city$
  
  ' get forecast for city
  city$=urban$(selcity)
  a$="http://api.apixu.com/v1/forecast.json?key=d848a4fc1cce4240acc41833162411&q="&city$&"&days="&days
  'a$="http://api.apixu.com/v1/forecast.json?key=c5d759f6536c4ef0930203316170304&q="&city$&"days="&days
  comma=INSTR(city$,",")!IF comma<>-1 THEN city$=LEFT$(city$,comma-1)
  under=INSTR(city$,"_")!IF under<>-1 THEN city$=LEFT$(city$,under-1)&" "&RIGHT$(city$,LEN(city$)-under)
  IF city$="Powell River" THEN city$="Van Anda"
  FIELD "city1" TEXT city$
  FIELD "city2" TEXT city$
  'GOSUB parse  ' save files, modify font sizes and colors
RETURN

DATA "Calgary", "Powell_River", "Kelowna", "Vernon", "Whitehorse", "Winnipeg", "Burlington,Ontario,Canada", "Ottawa", "Hunter_River", "St_Andrews,United_Kingdom"

setdate:
DATA 31,28,31,30,31,30,31,31,30,31,30,31
DATA "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" 

[Mr. Kibernetik]

You may notice another display limitation. I show the weather icons as sprites, and I can't get them to display on top of the fields! They are now seen through the white field backgrounds which have their alpha set to .4. I tried making the fields transparent, but the text was then too hard to read. So the weather icons are faded slightly by the semi-transparent fields covering them. It is the best compromise I can figure out so far. I'm not sure if this is an iOS or just a smart Basic limitation.

Interface objects are always on top of sprites inside a page in sB.
But you can create another page - for sprites, and make it to be on top of a page with fields.

[rbytes]

Thanks. I will give that a try.

[GeorgeMcGinn]

I'm missing all the image files in the example, background and sprites. Do you have them up on Dropbox?

Thanks. I will give that a try.

[rbytes]

If you go back to the post WeatherScope in Basic Programs, I have attached the two images you need. You should also download the code again, since I fixed a bug today that prevented icons from downloading properly.

You don't need any icon images. They are downloaded on the fly from the Apixu website once I extract their paths and filenames from the JSON download for a specific city's forecast.

I thought you and others might like to see what the weather download looks like. It is huge! It crashes smart Basic if I try to look at it in the editor. Just tap the link and get ready to scroll!

[GeorgeMcGinn]

Thanks, I'll re-download.

I got that early on when trying to look at these files. I've been working on an app for travelers that will give them current and predictive weather reports along the route they are traveling.

I also have an app I'm writing in SmartBASIC that expands/extracts data from JSON and XML files, and I used that code to pull just the data I need and create a pipe delimited file. That's so if a person pushes the "Get Forecast" button every minute, my app is programmed to only hit the URL 20 or more minutes after the last request, so it reads the pipe-delimited file and reproduces the report.

Even the 24-hour file produced will crash the SmartBASIC IDE, even when I have 20GB of space available on my device.

When I'm done with my program that splits, extracts and creates JSON and XML files, I'll post it here, but this is a large project, I have 15 libraries and almost 2,000 lines of code, so I expect it will be at least 6 more months to finish it.

George.

If you go back to the post WeatherScope in Basic Programs, I have attached the two images you need. You should also download the code again, since I fixed a bug today that prevented icons from downloading properly.

You don't need any icon images. They are downloaded on the fly from the Apixu website once I extract their paths and filenames from the JSON download for a specific city's forecast.

I thought you and others might like to see what the weather download looks like. It is huge! It crashes smart Basic if I try to look at it in the editor. Just tap the link and get ready to scroll!