Giter Club home page Giter Club logo

to.science.forms's Introduction

Travis Ci

About

Zettel is a webservice to generate html forms for different media types. You can use the forms in your own website to generate valid json-ld data for your own usage learn more.

The Following media types are supported

  • Article

Screenshot

Screenshot of zettel

Get zettel running

Download Activator

cd /tmp
wget http://downloads.typesafe.com/typesafe-activator/1.3.2/typesafe-activator-1.3.2-minimal.zip
unzip typesafe-activator-1.3.2-minimal.zip
sudo mv activator-1.3.2-minimal /opt

Git clone

cd /tmp
git clone https://github.com/hbz/zettel
cd zettel

Run

/opt/activator-1.3.2-minimal/activator run

Go to http://localhost:9000/tools/zettel

Add zettel to an existing web application

Find a complete example on how to embedd a zettel form to your application, using javascript.

Diagram about zettel data flow

You can include a zettel form using iframes

<iframe src="http://localhost:9000/tools/zettel/forms?id=katalog:data" width="100%"
	style="height: 100vh; border: none;" id="myIframe-1">
	<p>iframes are not supported by your browser.</p>
</iframe>

A zettel form sends json data to a parent window using events.

function postJsonData() {
		var target = parent.postMessage ? parent
				: (parent.document.postMessage ? parent.document
						: undefined);
		if (typeof target != "undefined") {
			var data = $('#embeddedJson').text();
			if (data.length) {
				target.postMessage(data, "*");
			}
		}
	}

A client can catch the data using an event listener

function getMessage(e){
	 var obj = JSON.parse(e.data);
	 console.log(JSON.stringify(obj.message));
	 console.log(JSON.stringify(obj.code));
	 console.log(JSON.stringify(obj.action));
}
window.addEventListener("message", getMessage, false);

The json data has the form "message", "code", "action". If the form contains errors a code of 400 is replied together with a reasonable message. If zettel was able to produce rdf from the form it sends a code of 200 and the actual data in the message field.

{
	"message":{...more json data or URI-encoded rdf-xml...},
	"code": <"200"|"400">
}

To edit an existing resource you must send your data to the zettelform this can be done by posting form-data to the /forms route. You can also post rdf-xml data. Zettel will try to fill the form with your rdf data. You can achieve this by sending a message to the zettel iframe. Zettel listens to javascript events. Please use the following pattern:

target.postMessage({
				'queryParam' : 'id=katalog:data&format=xml&topicId='
						+ topicId + '&documentId=' + documentId,
				'message' : rdf,
				'action'  : 'postDataToZettel'
			}, "*");

List forms

GET /forms

Responds with text/html to provide al list of supported forms. e.g.

<ul>
<li><a href="/forms?id=katalog:data">katalog:data</li>
</ul>

Get a specific form

GET /form?id=any:supportedType

Responds a text/html form for the type

Convert form data to json-ld

Accept: application/json POST /form?id=any:supportedType

The request is processed as application/x-www-form-urlencoded. Incoming data is validated. A Json-Ld representation of the posted data is replied.

Add new forms to zettel

Comming soon...

Run

Download

cd /tmp
git clone https://github.com/hbz/zettel
cd zettel

Run

/opt/activator-1.3.2-minimal/activator run

Go to http://localhost:9000/tools/zettel

Install

cd /tmp/zettel
/opt/activator-1.3.2-minimal/activator dist
cp target/universal/zettel-1.0-SNAPSHOT.zip  /tmp
cd /tmp
unzip zettel-1.0-SNAPSHOT.zip
mv zettel-1.0-SNAPSHOT /opt/zettel

edit /opt/zettel/conf/application.conf

contextUrl="http://localhost:9002/tools/etikett/context.json"
etikettService="http://api.localhost:9002/tools/etikett"
etikettUser=admin
etikettPwd=admin
zettel.researchData.helpText="http://localhost/node/2"

edit startscript

sudo cp /tmp/zettel/install/zettel.tmpl /etc/init.d/zettel
sudo chmod u+x /etc/init.d/zettel
sudo editor /etc/init.d/zettel

set the following vars

JAVA_HOME=/opt/java
HOME="/opt/zettel"
USER="user to run zettel"
GROUP="user to run zettel"
SECRET=`uuidgen` # generate a secret e.g. using uuidgen
PORT=9000

include into system start and shutdown

sudo update-rc.d zettel defaults 99 20

start

sudo service zettel start

Update

rm -rf /tmp/zettel
cd /tmp
git clone https://github.com/hbz/zettel
cd /tmp/zettel
/opt/activator-1.3.2-minimal/activator dist
cp target/universal/zettel-1.0-SNAPSHOT.zip  /tmp
cd /tmp
unzip zettel-1.0-SNAPSHOT.zip
cp /opt/zettel/conf/application.conf /tmp/zettel-1.0-SNAPSHOT/conf
sudo service zettel stop
rm -rf /opt/zettel/*
mv /tmp/zettel-1.0-SNAPSHOT/* /opt/zettel/
sudo service zettel start

License

GNU AFFERO GENERAL PUBLIC LICENSE Version 3, 19 November 2007

to.science.forms's People

Contributors

aquast avatar jschnasse avatar peterreimer avatar philboeselager avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.