RE: Using the BBBW to Run a Flask Application in HTML w/ Photos Included/Seth

Hello,

I am using Python, Flask (a Python microframework), and HTML to run some software to make this photo show up. I have been unable to make the photo show for some reason.

This line is what I am using:

<img alt="Images of the BBBlue!" src="./BBBlueII.png"/>

, in my body tag.

My flask application just calls the HTML page and serves it on the BBBW.

I have the photo(s) in the dir before the .html file(s). I learned that I should type ./ before the file in question b/c I am using the .png file in the dir directly before the
.html file dir.

Seth

P.S. Any help would be appreciated.

Hello Again,

Do I need specific software or photo rendering software for the BBBW or something odd like this idea to perform the task at hand?

Seth

On Sat, 28 Jul 2018 12:10:01 -0700 (PDT), Mala Dies
<functt@gmail.com> declaimed the following:

I have the photo(s) in the dir before the .html file(s). I learned that I
should type ./ before the file in question b/c I am using the .png file in
the dir directly before the
.html file dir.

  Please show the result of

ls -R

from the flask application root directory?

  ./ means CURRENT DIRECTORY

  ../ means PARENT DIRECTORY

  Personally, it sounds like your project is configured "upside down"
from what many use... I'd have made an "images" subdirectory /under/ the
HTML directory, and then used "images/whatever.png".

Hello,

I will do that in about an hour or two. Thank you for making me understand that I need an additional directory.

My tree so far is like this:

/bbg/MBC

/MBC has all my flask applications in Python.

then…

/bbg/MBC/templates has all my .html files in it.

Seth

P.S. I guess I need another directory to have my images located within it, e.g. /bbg/MBC/images and I have my .png image in the images folder. I will get back to you w/ that terminal read w/ the ls -R in the flask application root dir.

Hello Mr. Dennis,

Seth here…below is the idea of ls -R in my current directory w/ all my Flask applications.

`

debian@beaglebone:~/bbg/MBC$ ls -R
.:
MotorBridge.py templates timeII.py uMove.py
MotorBridge.pyc timeIII.py time.py

./templates:
core.css main.html mainOne.html mainTwo.html

`

If you need any other info, please let me know.

Seth

Hello Sir,

Please forgive me. I typed in the wrong amount of info. Please see here:

`

debian@beaglebone:~/bbg/MBC$ ls -R
.:
images MotorBridge.py MotorBridge.pyc templates timeIII.py timeII.py time.py uMove.py

./images:
BBBlue.png

./templates:
core.css main.html mainOne.html mainTwo.html

`

That should do it.

Seth

Hello Once More Sir,

Seth here. Um, would the permissions of the .png file matter in this case?

Seth

Hello,

I really hate having to do this to you but here is my new dir tree set up:

`

debian@beaglebone:~/bbg/MBC$ ls -R
.:
MotorBridge.py MotorBridge.pyc templates timeIII.py timeII.py time.py uMove.py

./templates:
core.css image main.html mainOne.html mainTwo.html

./templates/image:
BBBlue.png

`

Okay…

Seth

On Sat, 28 Jul 2018 14:54:09 -0700 (PDT), Mala Dies
<functt@gmail.com> declaimed the following:

Hello Mr. Dennis,

Seth here...below is the idea of ls -R in my current directory w/ all my
Flask applications.

debian@beaglebone:~/bbg/MBC$ ls -R
.:
MotorBridge.py templates timeII.py uMove.py
MotorBridge.pyc timeIII.py time.py

./templates:
core.css main.html mainOne.html mainTwo.html

If you need any other info, please let me know.

  I was hoping it would show one of the image files in that listing. As
it is, "../image.file" would be looking in the MBC directory, and
"./image.file" would be looking in the "/templates" subdirectory.
(presuming things are searched relative to the HTML file being rendered).

On Sat, 28 Jul 2018 15:03:01 -0700 (PDT), Mala Dies
<functt@gmail.com> declaimed the following:

Hello Sir,

Please forgive me. I typed in the wrong amount of info. Please see here:

debian@beaglebone:~/bbg/MBC$ ls -R
.:
images MotorBridge.py MotorBridge.pyc templates timeIII.py timeII.py
time.py uMove.py

./images:
BBBlue.png

./templates:
core.css main.html mainOne.html mainTwo.html

  Okay, better...

  Presuming search is relative to the /templates/*.html file, you would
need to use

  ../images/image.file

to go up one level, then down the other.

On Sat, 28 Jul 2018 15:13:49 -0700 (PDT), Mala Dies
<functt@gmail.com> declaimed the following:

debian@beaglebone:~/bbg/MBC$ ls -R
.:
MotorBridge.py MotorBridge.pyc templates timeIII.py timeII.py time.py
uMove.py

./templates:
core.css image main.html mainOne.html mainTwo.html

./templates/image:
BBBlue.png

  And with that hierarchy, you should just need to use

    image/image.file

to reference them.

Hello Sir,

I am very sorry about my “playing touch” here. I tried your way and my way. I even listened to these instructions: https://www.w3schools.com/html/html_filepaths.asp.

Seth

P.S. I think there is something incorrect w/ the file permissions of the .png file. If not, I am out of ideas. From above in the bbg/MBC/ dir, I run this cmd: sudo python timeIII.py. This file, the timeIII.py file, is supposed to grab the chosen file, the mainTwo.html file, and render it on the listed web address. My photo will not show. Here is the webpage so far:

You can see where the photo seems to want to go but the photo does not place itself visually. It is some error on the webpage only.

Hey Sir,

Anyway…thank you for trying again w/ me. I did try another photo, a .jpg photo, and got the same issue. It just might be my .html set up software.

Seth

P.S. I will return service after changing things up.

On Sat, 28 Jul 2018 16:55:38 -0700 (PDT), Mala Dies
<functt@gmail.com> declaimed the following:

P.S. I think there is something incorrect w/ the file permissions of the
.png file. If not, I am out of ideas. From above in the bbg/MBC/ dir, I run
this cmd: sudo python timeIII.py. This file, the timeIII.py file, is

  Since "sudo" means running with root privileges, and root normally can
access anything, I doubt if it is file permissions.

supposed to grab the chosen file, the mainTwo.html file, and render it on
the listed web address. My photo will not show. Here is the webpage so far:

  In your browser, can you do a "view source" to confirm what appears in
the <img...> tag.

  I will comment that looking at online Flask documents indicates that it
wants to put non-template files in a directory named "static". All the
examples seem to be using CSS files but it may apply for images too. See
page 17 of
<https://pythonhow.com/wp-content/uploads/2016/01/Building-a-Python-Flask-Website.pdf>
for the example. Try creating a "static/images" directory, and put the
image inside it. Then change the HTML to look for "images/whatever.file" --
no "./" or "../".

  At this point I can only recommend looking for some forum specific to
the use of Flask, since nothing in this thread is really Beaglebone (nor
Python) related.

<https://doc.lagout.org/programmation/python/Flask%20Web%20Development_%20Developing%20Web%20Applications%20with%20Python%20[Grinberg%202014-05-18].pdf>
appears to be the content of the FIRST EDITION book. There have likely been
some significant changes -- the SECOND EDITION came out in March. See page
32-33.

Hello,

I have a couple of Flask books dedicated to Flask and similar items. I will review them again and look over what you have listed. You are right about the /static/ dir.

I forgot about it. I will keep up my search. I am glad that it is not the BBBW or beaglebone related issues keeping me from performing on this topic.

Seth

P.S. Thank you again for your support.

After having suggested looking for a Flask specific forum -- I'm making
one more post, since I spent the afternoon creating a test Flask
application and fighting to get it to find the files.

On Sun, 29 Jul 2018 08:45:11 -0700 (PDT), Mala Dies
<functt@gmail.com> declaimed the following:

I have a couple of Flask books dedicated to Flask and similar items. I will
review them again and look over what you have listed. You are right about
the /static/ dir.

I forgot about it. I will keep up my search. I am glad that it is not the
BBBW or beaglebone related issues keeping me from performing on this topic.

  And it seems to be very picky about that too... I finally got a test to
display a few images. I can NOT navigate out of "static" (and specifying it
in the flask.Flask(...) call broke the rest.

-=-=-=-=- app.py
"""
    Flask_Test / Image_App
    Dennis L Bieber July 29 2018

    A test Flask application meant to illustrate the needed URLs to access
    image files that are located in various location within the application
    project.
"""

import flask
import os.path

app = flask.Flask(__name__,
                static_folder="./static")

image_list = [
                    "./others/red.png", #application root
                    "./templates/green.png", #templates subdirectory in
application root
                    "static/blue.png", #default "static"
directory
                    "./static/images/blue_dot.png" #subdirectory in
"static" directory
                ]

@app.route("/")
def home():
    return flask.render_template("home.html", images=image_list,
staticfolder=app.static_folder)

if __name__ == "__main__":
    app.run(debug=True)

Hello Sir,

Those links in the last message were on point. I did not have those resources. They are very much like what I am encountering and in a brief idea. Oh, I wanted to give you an update since you spent
so much time handling more issues w/ Flask and ideas about Flask.

I am using the BBBW: uname -a Linux beaglebone 4.14.49-ti-r54 and cat /etc/dogtag BeagleBoard.org Debian Image 2018-06-17. I thought since you gave me some info.
on your system you were using, I would share.

This is from the cmd test:

`

.
├── MotorBridge.py
├── MotorBridge.pyc
├── static
│ └── images
│ ├── BBBlue.png
│ └── openFile.jpg
├── templates
│ ├── core.css
│ ├── main.html
│ ├── mainOne.html
│ └── mainTwo.html
├── timeIII.py
├── timeII.py
├── time.py
└── uMove.py

`

This is the odd software I found that I have been changing a bit over the course of about four days:

`

from flask import Flask, render_template
app = Flask(name)
import datetime

@app.route("/")
def hello():
now = datetime.datetime.now()
timeString = now.strftime("%m-%d-%Y %H:%M")
templateData = {
“time”: timeString,
}
return render_template(“mainTwo.html”, **templateData)

if name == “main”:
app.run(host=“192.168.7.2”, port=5000, debug=True)

`

and this is my .html file named mainTwo.html:

`

Hello...

The Time and Date Are: {{ time }}.

<hr Click It or Ticket!

Tables!

  • Wrath
  • Love
  • Wrath

    Hello...today was a "hell" of a day. It was a terrible day of time and effort. I had to do things and these things are something that was not too liked by myself or others. Boo!

    Love

    Hello...today was a lovely day, i.e. full of charm and grace. I hope my efforts served well. All of what I do, if guided by you, is for the betterment of society. I promise.

    `

    That software from above will change in time but as you see in the beginning, I call the photo into question w/ this idea: .

    My /static dir. just has the images dir. w/ a .jpg file in it.

    Now onto what you were discussing:

    I will attempt to follow your instruction on your last message. If you have extra time on your hand, please have some ideas
    relating to Flask if you like to discuss Flask w/ serving.

    I see you are versed in Flask and other ideas involving around their idea of servers and non-production styled applications.

    Seth

    P.S. So…please sir. Do not feel like you must answer. But, in the case that you enjoy Flask, please do not hesitate to reply with whatever you feel
    is correct and/or interesting. Oh and really, thank you for this wake-up and informative display. I have been finally moving on from older ideas of
    just serving letters w/ these Flask applications. I have actually just recently started to get into .html files more and some .css and JavaScript.

On Sun, 29 Jul 2018 16:47:07 -0700 (PDT), Mala Dies
<functt@gmail.com> declaimed the following:

I see you are versed in Flask and other ideas involving around their idea
of servers and non-production styled applications.

  No, I am not...

  Most of my ideas over the last few days were based upon standard Linux
(POSIX) file path capabilities (and they failed). What I did today is the
first Flask application I've ever written -- using
<https://code.visualstudio.com/docs/python/tutorial-flask>
<http://flask.pocoo.org/docs/0.12/api>
and
<http://jinja.pocoo.org/docs/2.10/templates/>

  I have the 2nd Ed O'Reilly book on order at Amazon.

  Many years ago I did make use of CherryTemplate and a Python script to
generate /static/ web-pages from database tables, but I did not operate the
web-server and could not put the database and dynamic pages on it. I'd let
you see the pages, but the owner allowed the domain to expire so they are
no longer live. (The domain has now been grabbed by a Japanese beauty site
-- why they want to squat on www.bestiaria.com is unknown)

Oh…No Issue,

Anyway, I just started on this project from picking it back up after it was on and off for a bit.

I really appreciate you pitching in and being cooperative. This is something that is hard to come by
these days.

I saw in one of your past messages, I could use on the Flask Application once the server
is up and running.

I tried. I really hate myself for this idea but I forgot how I made the outline of the photo appear on my server
web address. So, I am stuck w/out being able to view the source of my photo (or the lack of the photo).

Maybe I put it in /templates like you have described above. I will test that out and get to the point when I can
view the source on the .html page.

Seth

P.S. Complications are fun!

Anyway…Hello Again,

I think you were correct in your software version w/ Flask and having to make available the extra server pages.

Or…at least those pages of photos, .png or .jpg or whatever, were made available in the Flask server app.

Seth

P.S. I cannot even get my lack of the photo to show up again. Off to research more. Anyway sir, thank you
for your time.