Giter Site home page Giter Site logo

ktp-forked-repos / owl_inspector Goto Github PK

View Code? Open in Web Editor NEW

This project forked from fstiehle/owl_inspector

0.0 1.0 0.0 544 KB

GUI to visualize SWI CLP(FD) programs

Home Page: https://fabianstiehle.com/owl_inspector/

JavaScript 64.04% CSS 16.71% HTML 1.26% Prolog 17.99%

owl_inspector's Introduction

Owl Inspector is a web based visualization software for SWI-Prolog’s CLP(FD) library.

Take a look at the examples folder to get a quick overview of what's possible.

Quickstart

Install

Prerequisites: npm & SWI Prolog both available, for example, via bower. Install via npm install (In the directory). Run npm run or gulp run once.

Hello world

Start the server with npm run or gulp run. Once this is done once, the server can be started via gulp webserver. The GUI can be accessed at: http://localhost:8080/

The owl_tracer module exposes a set of annotations that can be used by a CLP program to annotate certain parts of the program and collect data on its execution.

You can use the following predicates to annotate your program.

  • 'πŸ“Œ'/1
  • 'πŸ“Œ'/2
  • owl_trace/1
  • owl_trace/2

'πŸ“Œ'/2 or owl_trace/2 need to be called before anything else with all the variables that need to be traced. All variables need to be assigned names. See the docs for more info and a way to automatically generate names.

:- use_module(library(clpfd)).
:- use_module(tracer/owl_tracer).

sendmore(L):-
  L = [S,E,N,D,M,O,R,Y],
  'πŸ“Œ'(L, ['S','E','N','D','M','O','R','Y']),
  'πŸ“Œ'(L ins 0..9),
  'πŸ“Œ'(S #\= 0),
  'πŸ“Œ'(M #\= 0),
  'πŸ“Œ'(all_different(L)),
  'πŸ“Œ'(1000*S + 100*E + 10*N + D
	  + 1000*M + 100*O + 10*R + E
	  #= 10000*M + 1000*O + 100*N + 10*E + Y).

Use owl_send/0 to start a socket connection and send the trace to the GUI.

?- sendmore(L), labeling([], L), owl_send.

Use owl_clean/0 to flush the trace before running the program again.

3D Propagation view

Each bar depicts the state of one variable at a given timestamp

  • The height of the bar represents its domain size
  • timestamps progress along the x-axis
  • variables are arranged along the y-axis

3D Propagation

Tracer

Access the tracer's docs in docs/owl_tracer.html

Hosting the GUI yourself

All the necessary files of the GUI are contained in the gui/dist folder once npm run or gulp run or gulp build is executed. This represents a static web page and can be hosted on every server. The socket address in tracer/owl_server as well as in gui/src/renderer/components/Layout.jsx need to be adopted.

owl_inspector's People

Contributors

fstiehle avatar

Watchers

 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.