I'm receiving data from an Arduino,parsing it using Python and my intent is to update the values in the HTML using the data from serial. Like <h6>value</h6>so the new value will be there when I refresh the page. How to do it?
I'm not sure about your situation but, We use python as the server-side language and for making a dynamic HTML, we use Django Template which is developed for Django (A python based framework).
Here's an example of making a simple html with some data:
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="{{ meta.keywords }}" />
<meta name="robots" content="index,follow" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<title>{{ meta.title}}</title>
<meta name="description" content="{{ meta.description }}">
<meta name="og:description" content="{{ meta.description }}">
<meta property="og:title" content="{{ meta.title }}" />
<meta property="og:image" content="{{ meta.image_url}}" />
<meta property="og:image:type" content="image/png" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8">
</head>
<body>
<h1>{{ data.title }}</h1>
<h2>{{ data.description }}</h2>
{% if data.additional_info %}
<p>
{{ data.additional_info }}
</p>
{% endif %}
{% if data.list1|length > 0 %}
{% for item in data.list1 %}
<h2>{{ item.title }}</h2>
<p>
{{ item.content }}
</p>
{% endfor %}
{% endif %}
{% if data.list2|length > 0 %}
{% for item in data.list2 %}
<h2>{{ item.title }}</h2>
<p>
{{ item.content }}
</p>
{% endfor %}
{% endif %}
{% if data.list3|length > 0 %}
{% for item in data.list3 %}
<h2>{{ item.title }}</h2>
<p>
{{ item.content }}
</p>
{% endfor %}
{% endif %}
</body>
</html>
Related
I was following one chatbot tutorial using Django, I came across this error:
frontpage.html
{% extends 'core/base.html' %}
{% block title %}Welcome | {% endblock %}
{% block content %}
<div class="p-10 lg:p-20 text-center">
<h1 class="text-3xl lg:text-6xl text-white">Djangochat</h1>
</div>
{% endblock %}
base.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> {% block title %}{% endblock %}Django </title>
<script src="https://cdn.tailwindcss.com" ></script>
<body class="bg-teal-600">
<nav class="flex items-center justify-between px-4 py-6 bg-teal-800">
<div>
Djangochat
</div>
<div class="flex items-center space-x-4">
Log in
Sign up
</div>
</nav>
{% block content %}
{% endblock %}
</head>
</body>
</html>
Output
enter image description here
So, {% block title %} {% end block %} is not working, kindly help.
Change the title to this on base.html
<title>{% block title %}my base page{% endblock %}</title>
Then go to frontpage.html or any page you want to
<title>{% block title %}my front page{% endblock %}</title>
As mentioned in the official documentation The Django template language
EDIT
You're mistaken about the form of HTML the close tag of the head in the body
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> {% block title %}{% endblock %}Django </title>
<script src="https://cdn.tailwindcss.com" ></script>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
When I use {% extends 'base.html' %} my navbar displays correctly but when I use {% block content %} Hello World{% endblock content %} my navbar disappears and I only see the text "Hello World". I dont really know what to try it appeared to be straight forward but apparently it isn't until you actually know.
{% extends "base.html" %}
{% block content %}<h1>Hello World</h1>{% endblock content %}
My 'base.html' file
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<title>my title goes here</title>
{% endblock %}
</head>
<body>
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col">
<nav class="navbar custom-navbar">
<h1>World Truthers</h1>
<div class="col navbar-buttons">
<button class="btn custom-button"><p><b>Contact</b></p></button>
<button class="btn custom-button"><p><b>About</b></p></button>
<button class="btn custom-button"><p><b>Returns</b></p></button>
<button class="btn custom-button"><p><b>Payment</b></p></button>
<button class="btn custom-button"><p><b>Delivery</b></p></button>
<button class="btn custom-button"><p><b>Store</b></p></button>
</div>
</nav>
</div>
</div>
</div>
{% endblock %}
</body>
Change your base.html to the one below. What is happening is you are overwriting your content block with whats in your template ("Hello world"). If you want to stick with this, in your child template, put {{block.super}} after {% block content %}, but the "correct" way would be to change your base.html with the one below.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<title>my title goes here</title>
{% endblock %}
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<nav class="navbar custom-navbar">
<h1>World Truthers</h1>
<div class="col navbar-buttons">
<button class="btn custom-button"><p><b>Contact</b></p></button>
<button class="btn custom-button"><p><b>About</b></p></button>
<button class="btn custom-button"><p><b>Returns</b></p></button>
<button class="btn custom-button"><p><b>Payment</b></p></button>
<button class="btn custom-button"><p><b>Delivery</b></p></button>
<button class="btn custom-button"><p><b>Store</b></p></button>
</div>
</nav>
</div>
</div>
</div>
{% block content %}
{% endblock %}
</body>
I cannot show a file-upload button.
I wrote in profile.html like
{% extends "registration/accounts/base.html" %}
{% block content %}
user.username: {{ user.username }}<hr>
user.is_staff: {{ user.is_staff }}<hr>
user.is_active: {{ user.is_active }}<hr>
user.last_login: {{ user.last_login }}<hr>
user.date_joined: {{ user.date_joined }}
{% endblock %}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>UPLOAD</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
{% block body %}
<div class="container">
<form action="{% url 'accounts:upload_save' %}" method="POST" enctype="multipart/form-data">
<input type="file" name="files[]" multiple>
<input type="hidden" value="{{ p_id }}" name="p_id">
{% csrf_token %}
<input type="submit">
</form>
</div>
{% endblock %}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
So,I wrote multipart/form-data tag like
<form action="{% url 'accounts:upload_save' %}" method="POST" enctype="multipart/form-data">.
But, profile.html did not show the part of ~ .
it showed only {% extends "registration/accounts/base.html" %}
~ {% endblock %}.
How can i fix it?
Placing and position of {% block content %} is wrong in your code.
There are several issues with your code and I removed them.
You dont need an extra {% block body %}.
So you should use this code instead :
{% extends "registration/accounts/base.html" %}
{% block content %}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>UPLOAD</title>
</head>
<body>
user.username: {{ user.username }}<hr>
user.is_staff: {{ user.is_staff }}<hr>
user.is_active: {{ user.is_active }}<hr>
user.last_login: {{ user.last_login }}<hr>
user.date_joined: {{ user.date_joined }}
<div class="container">
<form action="{% url 'accounts:upload_save' %}" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<input type="file" name="files[]" multiple>
<input type="hidden" value="{{ p_id }}" name="p_id">
<input type="submit" value="Upload">
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
{% endblock %}
Also Note that, Place the csrf_token in correct position and add value="Upload" to input type="submit" .
I've been trying to render a html template with a python dictionary.
Actually I created a sitemap for my webpage and implemented it with the {{%extends%}} tag. The solution I wanted to reach is to create a dictionary for each website which can be reached with CherryPy and render it with Jinja. The process is the following:
I create a dictionary with the needed variables
pass the dictionary to an extra function which appends the dictionary with the static variables (sitemap).
The first solution I tried to is converting the dictionary into a string and return the string and render it.
import cherrypy
import os
from jinja2 import Environment, FileSystemLoader
BASE_PATH = os.path.dirname(os.path.abspath(__file__))+"\\static"
print BASE_PATH
env = Environment(loader=FileSystemLoader(BASE_PATH))
class Main(object):
def __init__(self):
self.sites = {"main": "index",
"leroy": "leroy"}
def render_pages(self, template, dict):
dictItemCount = len(dict)
dictPosition = 1
string=""
for current in dict:
if(dictPosition == dictItemCount):
print 'last item in dictionary'
string += str(current)+"="+"'"+str(dict[current])+"'"
break
dictPosition += 1
string += str(current)+"="+"'"+str(dict[current])+"', "
return template.render(>>>PROBLEM HERE<<<)
#cherrypy.expose
def leroy(self):
tmpl = env.get_template('leroy.html')
jahre = 24
monate = jahre*12
tage = monate*30
stunden = tage*24
minuten = stunden*60
sekunden = minuten*60
variables = {jahre: jahre,
monate: monate,
tage: tage,
stunden: stunden,
sekunden: sekunden}
#tmpl.render(sites=self.sites, jahre=jahre, monate=monate, tage=tage, stunden=stunden, minuten=minuten, sekunden=sekunden)
return Main.render_pages(self, tmpl, variables)
cherrypy.quickstart(Main(), '/', "conf/cherrypy.conf")
-------------------> EDIT <-------------------
Here is the 'leroy.html' template:
{% extends "base.html" %}
{% block title %}{% endblock %}
{% block head %}
{{ super() }}
<style type="text/css">
.important { color: #336699; }
</style>
{% endblock %}
{% block content %}
<p class="important">
Jahre: {{jahre}} <br />
Monate: {{monate}} <br />
Tage: {{tage}} <br />
Stunden: {{stunden}} <br />
Minuten: {{minuten}} <br />
Sekunden: {{ sekunden }}
</p>
<br /><br />
{% endblock %}
'base.html':
{% block head %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock %} - TEST </title>
<!-- Bootstrap -->
<link href="/static/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
{% endblock %}
{% block content %}
<body>
{% endblock %}
{% block footer %}
<br /><br />Sitemap:
<ul id="sitemap">
{% for site in sites %}
<li>{{site}}</li>
{% endfor %}
</ul>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/static/js/bootstrap.min.js"></script>
</body>
</html>
{% endblock %}
The comment from #jwalker solved my problem:
You don't need to convert it to a string, just pass the dict to template.render()
I am trying to get Zurb's Foundation to work like what I have seen on youtube, and how the demo works speaking of
I got the demo index.html working fine
The screen won't scale like it should
This is my skeleton.html
{% load zinnia_tags i18n %}
{% load url from future %}
{% get_tags as entry_tags %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="{{ LANGUAGE_CODE }}" lang="{{ LANGUAGE_CODE }}" version="-//W3C//DTD XHTML 1.1//EN" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{% block title %}{% endblock %}</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="cache-control" content="public" />
<meta name="robots" content="follow, all" />
<meta name="language" content="{{ LANGUAGE_CODE }}" />
<meta name="viewport" content="width=device-width">
<meta name="description" content="{% block meta-description %}Time Tool,TimeBank,Barter{% endblock %}" />
<meta name="keywords" content="{% block meta-keywords %}Time Trade Barter {{ entry_tags|join:", "}}{% endblock %}" />
<meta name="author" content="Brian Scott Carpenter" />
{% block meta %}{% endblock %}
<link rel="shortcut icon" href="{{ STATIC_URL }}img/favicon.ico" />
<link rel="home" href="{% url "home" %}" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ STATIC_URL }}stylesheets/app.css">
<script src="{{ STATIC_URL }}javascripts/vendor/custom.modernizr.js"></script>
<link href='http://fonts.googleapis.com/css?family=Jolly+Lodger' rel='stylesheet' type='text/css'>
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="{{ STATIC_URL }}/css/ie.css" />
<![endif]-->
{% block link %}{% endblock %}
{% block script %}{% endblock %}
</head>
<body class="skeleton {% block body-class %}{% endblock %}">
{% block header %}{% endblock%}
<div class="row">
<div class="small-8 columns">
<div class="panel">
{% block content %}{% endblock %}
</div>
</div>
<div class ="small-4 columns">
{% block sidebar %}{% endblock %}
</div>
</div>
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li id="message_{{ forloop.counter }}"
{% if message.tags %} class="{{ message.tags }}"
{% endif %}>
{{ message }}
</li>
{% endfor %}
</ul>
{% endif %}
</div>
{% block footer %}{% endblock %}
</div>
<script>
document.write('<script src=' +
('__proto__' in {} ? 'javascripts/vendor/zepto' : 'javascripts/vendor/jquery') +
'.js><\/script>')
</script>
<script src="javascripts/foundation/foundation.js"></script>
<script src="javascripts/foundation/foundation.reveal.js"></script>
<script src="javascripts/foundation/foundation.topbar.js"></script>
<script src="javascripts/foundation/foundation.interchange.js"></script>
<script src="javascripts/foundation/foundation.forms.js"></script>
<script src="javascripts/foundation/foundation.placeholder.js"></script>
<script src="javascripts/foundation/foundation.tooltips.js"></script>
<script src="javascripts/foundation/foundation.joyride.js"></script>
<script src="javascripts/foundation/foundation.cookie.js"></script>
<script src="javascripts/foundation/foundation.clearing.js"></script>
<script src="javascripts/foundation/foundation.alerts.js"></script>
<script src="javascripts/foundation/foundation.dropdown.js"></script>
<script src="javascripts/foundation/foundation.orbit.js"></script>
<script src="javascripts/foundation/foundation.abide.js"></script>
<script src="javascripts/foundation/foundation.magellan.js"></script>
<script src="javascripts/foundation/foundation.section.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
base.html
{% extends "skeleton.html" %}
{% load zinnia_tags i18n %}
{% load url from future %}
{% load postman_tags %}
{% block title %}Tempilo{% endblock %}
{% block header %}
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><li>{% trans "Home" %}</li></h1>
</ul>
<section class="top-bar-section">
{% if user.is_authenticated %}
{% trans "Logged in" %}: {{ user.username }}
<ul class="right">
<li><a href={% url "postman_inbox" %}> {% trans "Inbox" %}</a></li>
<li>{% trans "Log out" %}</li>
{% else %}
<ul class="right">
<li>{% trans "Log in" %}</li>
{% endif %}
</ul>
</ul>
</div>
<h1>Tempilo<small> It's a Time tool</small></h1>
<hr />
</div>
<!-- End Nav -->
{% endblock %}
{% block sidebar %}
<div class="side-nav right">
<ul class="button-group">
<li>{% trans "Create an Offer" %}</li>
<li class="divider"></li>
<li>{% trans "See the Offer's" %}</li>
<li class="divider"></li>
<li class="divider"></li>
<li>{% trans "Transaction List" %}</li>
<li class="divider"></li>
<li>{% trans "Create a Request" %}</li>
<li class="divider"></li>
<li>{% trans "See the Requests" %}</li>
<li class="divider"></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %} {% endblock %}
{% block footer %}
<div id="footer">
<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Tempilo</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://bitbucket.org/BrianScottCarpenter/tempilo" property="cc:attributionName" rel="cc:attributionURL">Leprechaun King</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.<br />Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="https://bitbucket.org/BrianScottCarpenter/tempilo" rel="dct:source">https://bitbucket.org/BrianScottCarpenter/tempilo</a>.
<img src="http://s06.flagcounter.com/count/bLXn/bg_FFFFFF/txt_000000/border_CCCCCC/columns_8/maxflags_250/viewers_0/labels_0/pageviews_0/flags_0/" alt="Flag Counter" border="0">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-47015323-1', 'bitbucket.org');
ga('send', 'pageview');
</script>
</div>
{% endblock %}
</body>
</html>
Your HTML in base.html is not valid. Among the mistakes are:
You have closing divs that don't appear to have opening div tags in your sidebar block.
There's an opening <li> without a closing tag in the header block.
There's no closing </section> tag in the header block.
There is an extraneous </body></html> at the bottom.
Fix all the errors in the HTML and retry.