2c:null 2d:["$","title",null,{"children":"Workflow of the Chaos Machine project | urswilke | Observable"}] 32:T1273,// you can edit the source code to produce the graph above // (that is shown when "edit graph source" is selected // in the select box on top of this page) edit_me = `digraph workflow { ranksep=.5; graph [ truecolor=true, # the last 2 "00" make it completely transparent here, # thus all that comes before - I don"t care bgcolor="#ffffff00", fontname = "helvetica", #splines=ortho, concentrate=true ]; node [ fontname = "helvetica", style = "rounded,filled,radial", gradientangle=60, fillcolor="#dddddd99", # gradients dont work on observable...: # fillcolor="#dddddd99", fontsize=25, penwidth=4, color = "#ffffff55", width = 2.5 ]; edge [ fontname = "helvetica", penwidth=5, color="#aaaaaabb" ]; penwidth=5; style=rounded subgraph cluster_arduino { label = < arduino >; bgcolor = "#a8feff"; color = "#3e979d"; fontcolor = "#3e979d"; fontsize = 30; Thermometers -> mc; sketch -> mc; Thermometers [shape=box]; sketch [ label = "send_temp.ino", shape=box, URL="https://gitlab.com/urswilke/chaos_machine_code/-/tree/master/arduino/send_temp/send_temp.ino", tooltip = "arduino sketch to read multiple DS18B20 thermometers and then print the information to the serial connection" ]; {rank=same; mc; sketch} } sc -> python [ weight = 100, tooltip = "setup serial connection in arduino", URL = "https://gitlab.com/urswilke/chaos_machine_code/-/tree/master/python/T_to_midi.ipynb#Arduino" ] subgraph cluster_main { label = < python >; bgcolor = "#fffb4b"; color = "#4f93ba"; fontcolor = "#4f93ba"; fontsize = 30; penwidth=5; #graph[style=dotted]; "functions.py" [ shape=box, tooltip = "functions that are imported in the T_to_midi notebook", URL = "https://gitlab.com/urswilke/chaos_machine_code/-/tree/master/python/functions.py" ] python [ shape=box, tooltip = "python real-time loop to * read serial string, extract temperatures * calculate temperature differences * translate differences to midi notes according to a specified musical scale * send the note events to a midi port in real time During the loop the data is recorded in lists and when it has finished the data is written to a midi and csv files. ", label = "T_to_midi.ipynb", URL = "https://gitlab.com/urswilke/chaos_machine_code/-/tree/master/python/T_to_midi.ipynb" ]; "functions.py" -> python mc [ shape=box, label="micro-controller", tooltip="the micro-controller is connected to the PC via USB", ]; {rank = same; "functions.py" python} } # subgraph cluster_main_to_R_connectors { # label = "main workflow"; # } subgraph cluster_fluidsynth { label = <fluidsynth >; fontsize = 30; bgcolor = "#ffd030"; color = "#f07531"; fontcolor = "#f07531"; penwidth=5; sf2 [shape = cylinder, label = "sound\nfont"]; fluidsynth [ shape=box, tooltip = "* Fluidsynth can be easily started via the GUI QSynth.\n* An sf2 soundfont file has to be used.\n* A midi port can be synthesized in real time, or\n* A midi file can be rendered to an audio file." ]; sf2 -> fluidsynth; {rank=same; fluidsynth sf2} } mp -> fluidsynth [ weight = 100] mc -> sc [ arrowhead=none, tooltip = "setup serial connection in arduino", URL = "https://gitlab.com/urswilke/chaos_machine_code/-/tree/master/arduino/send_temp/send_temp.ino#L24" ]; python -> mp [arrowhead=none, weight = 1000]; sc [ label="serial\nconnection", color=grey, shape=diamond, tooltip = "The serial string sent from the arduino is of the following format: ID: 40255662332332138251, T: 24.62; ID: 402552102282332138209, T: 24.12; ID: 402551932392332138119, T: 24.62; ID: 4025514153413227192, T: 24.62; ID: 402552272422332138169, T: 21.75", URL = "https://gitlab.com/urswilke/chaos_machine_code/-/tree/master/python/recorded_data/serial_string.txt" ]; mp [ label = "midi\nport", shape=diamond, color=grey, tooltip = "The midi port to fluidsynth is set up by the python code in T_to_midi.ipynb", URL = "https://gitlab.com/urswilke/chaos_machine_code/-/tree/master/python/T_to_midi.ipynb#Setup_fluidsynth_connection" ]; #mc -> sc -> python -> mp -> fluidsynth[ style = invis, weight= 10 ]; fluidsynth -> speakers subgraph cluster_speaker { label = < speaker >; fontsize = 30; bgcolor="#FFD700"; # gradients dont work on observable...: # bgcolor="#CCA600"; speakers [label="🔊🎶"]; }`33:[{"id":"467de6f684aa8a431b7a4286e45f39341766446c674e73f0b59dfd9b47933ed71f7b679560ae3874c0d0fcd28dacccef1f51ff67882de832ce4ef9767d35b2f3","href":"https://static.observableusercontent.com/files/467de6f684aa8a431b7a4286e45f39341766446c674e73f0b59dfd9b47933ed71f7b679560ae3874c0d0fcd28dacccef1f51ff67882de832ce4ef9767d35b2f3","name":"graph_complete@2.gv","type":"application/octet-stream","lastModified":1605729624762.811,"size":8521}] 30:{"id":"643394e019492265","slug":"workflow-of-the-chaos-machine-project","title":"Workflow of the Chaos Machine project","thumbnail":"18c2cbdb760ce602cc12445622a0bc9703ac55f467d37f1dc86df078340812f9","access_level":"public","create_time":"$D2020-11-18T18:39:35.557Z","update_time":"$D2023-03-16T16:42:44.716Z","view_time":null,"first_public_time":"$D2020-11-25T23:03:07.875Z","has_unpublished_edits":null,"fork":{"id":"d6c696868c03a3e9","slug":"placing-graphviz-nodes-in-fixed-positions","title":"Placing Graphviz nodes in fixed positions","owner":{"id":"de3021be72d3af21","login":"magjac","name":"Magnus Jacobsson"}},"stars":2,"starred":false,"owner":{"type":"team","id":"a51ca4cc9deed430","login":"urswilke","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7de9d3ee803a0b1596940c8e2aef86ae41ce642c3a660e33f15da4d31ee05cbc","tier":"starter_2024"},"version":859,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"25e8378358212e6e","login":"urswilke","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7de9d3ee803a0b1596940c8e2aef86ae41ce642c3a660e33f15da4d31ee05cbc","tier":null}],"members":[{"type":"individual","id":"25e8378358212e6e","login":"urswilke","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7de9d3ee803a0b1596940c8e2aef86ae41ce642c3a660e33f15da4d31ee05cbc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Workflow of the Chaos Machine project","cells":[{"id":0,"value":"md`# Workflow of the Chaos Machine project\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"md`This is a wepage where the code of the the [Chaos Machine](https://gitlab.com/urswilke/chaos_machine_code/) software project is explained in an interactive diagram below (see my [blog post](https://urssblogg.netlify.app/post/2020-11-19-synthesizing-temperature-measurements-into-sound/) to introduce you to the project). \n\nOn this website here you can: \n\n* Experiment with the source code to generate such a graphviz diagram. **Edit graph source code in grey field below graph!**\n* Download & render up-to-date versions of the graphviz code from the repository. (Choose an option from the select box!) \n* You could also use this website to upload and visualize your own graphviz code. \n * Either provided by an online file in the variables \\`main_url\\` or \\`complete_url\\` (see navigation by hovering over the pane on the top right of this website) You just need to pass the url to your file to one of these variable, or\n * by pasting your own editable code to the variable \\`edit_me\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"viewof choose_source = {\n const choose_source = select({\n title: \"\",\n options: [\n { label: \"Download and vizualize main machine graph\", value: main_url_text },\n { label: \"Download and vizualize whole project graph\", value: complete_url_text },\n { label: \"Use editable graph source (see below graph)\", value: edit_me }\n ],\n value: edit_me\n });\n choose_source.input.style.fontSize = \"20px\";\n choose_source.input.style.marginTop = \"8px\";\n choose_source.input.style.marginBottom = \"30px\";\n return choose_source;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"md`### Interactive diagram\n\n* scroll to zoom in and out\n* drag and drop\n* hover (mouse-over) to see description\n* click on clickable nodes (not all) to view source code file\n* select Graphviz rendering engine below\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"graph = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"viewof engine = select({\n description: \"Select Graphviz rendering engine (There is perhaps not much sense to do this here. Just because I can :)\",\n options: [\"circo\", \"dot\", \"fdp\", \"osage\", \"patchwork\", \"twopi\"],\n // options: [\"circo\", \"dot\", \"fdp\", \"neato\", \"osage\", \"patchwork\", \"twopi\"],\n value: \"dot\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"md`# Edit`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"md`Below is the [DOT](https://www.graphviz.org/doc/info/lang.html) source code which you can edit in the gray area below (execute by pressing Ctrl + Enter) and see the effect in the graph above. For an easier DIY example of how graphviz works see [here](https://observablehq.com/@magjac/placing-graphviz-nodes-in-fixed-positions)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"md`The files you can select to download are generated by [this file](https://gitlab.com/urswilke/chaos_machine_code/-/blob/master/R/work_flow/work_flow.Rmd) (if you want to know more about the R package [DiagrammeR](https://rich-iannone.github.io/DiagrammeR/index.html) and how that can be used as a meta programming language to produce different graphviz versions from the same template with [substitutions](https://rich-iannone.github.io/DiagrammeR/graphviz_and_mermaid.html#substitution))`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"md`-----\n## Internals`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"import {fileInput} from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"graphviz = d3.graphviz(graph)\n .transition(() => d3.transition().duration(1000))\n .engine(engine)\n .renderDot(choose_source)\n .on(\"end\", () => d3.select(graph).dispatch(\"load\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3 = require(\"d3-graphviz@2\", \"d3-selection\", \"d3-transition\", \"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"complete_url = \"https://raw.githubusercontent.com/urswilke/urssblogg/master/content/post/2020-11-19-synthesizing-temperature-measurements-into-sound/graph_complete.gv\"\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"main_url = \"https://raw.githubusercontent.com/urswilke/urssblogg/master/content/post/2020-11-19-synthesizing-temperature-measurements-into-sound/graph_main.gv\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"complete_url_file = await fetch(new URL(complete_url))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"main_url_file = await fetch(new URL(main_url))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"complete_url_text = complete_url_file.text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"main_url_text = main_url_file.text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"md`This notebook is a fork from [here](https://observablehq.com/@magjac/placing-graphviz-nodes-in-fixed-positions).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"